h6._title {
	font-size:24px; font-family:'Poppins'; text-align:center; margin-bottom:25px;
}

div[data-layer='account'] {
	display:-webkit-flex; justify-content:space-between; column-gap:30px; row-gap:30px; width:100%; box-sizing:border-box;
}
div[data-layer='account'] ._left {
	width:30%; box-sizing:border-box; flex-shrink:0;
}
div[data-layer='account'] ._right {
	width:100%; box-sizing:border-box;
}

div[data-layer='account'] .box {
	border:1px solid #DEDEDE; border-radius:6px; padding:30px 0; background:white; box-shadow:0 2px 5px rgba(0,0,0,.2); margin-bottom:18px;
}
div[data-layer='account'] .box .img {
	width:140px; height:140px; box-sizing:border-box; margin:0 auto 40px; background:#DEDEDE; box-shadow:0 2px 5px #DEDEDE; border-radius:50%; overflow:hidden;
}
div[data-layer='account'] .box .content {
	width:85%; box-sizing:border-box; margin:0 auto;
}
div[data-layer='account'] .box .content .items {
	display:-webkit-flex; justify-content:space-between; column-gap:10px; margin-bottom:12px;
}
div[data-layer='account'] .box:last-child,
div[data-layer='account'] .box .content .items:last-child {
	margin:0;
}
div[data-layer='account'] .box .content .items p {
	font-size:12px; font-family:'Poppins','sans-serif';
}
div[data-layer='account'] .box .content .items p:nth-child(1) {
	width:100px; box-sizing:border-box; flex-shrink:0; color:#C0C0C0; position:relative; font-weight:normal;
}
div[data-layer='account'] .box .content .items p:nth-child(1):before {
	content:':'; position:absolute; right:0;
}
div[data-layer='account'] .box .content .items p:nth-child(2) {
	width:100%; box-sizing:border-box; color:black;
}

div[data-layer='account'] .box h6 {
	font-size:15px; font-family:'Poppins'; color:black;
}
div[data-layer='account'] .box .content .items._roles p {
	color:black;
}
div[data-layer='account'] .box .content .items._roles p:before {
	content:' ';
}
div[data-layer='account'] .box .content .items._password p:nth-child(2) {
	cursor:pointer; color:#0055FF; text-decoration:underline;
}
div[data-layer='account'] .box .button {
	background:var(--button-color); color:white; width:140px; margin:20px auto 0; border-radius:6px; text-align:center; padding:6px 13px; box-sizing:border-box; cursor:pointer; font-family:'Poppins','sans-serif'; font-size:13px; border:1px solid transparent; transition:.4s;
}
div[data-layer='account'] .box .button:hover {
	background:white; border-color:black; transition:.4s; color:black;
}
@media (min-width:360px) and (max-width:960px) {
	div[data-layer='account'] {
		flex-direction:column;
	}
	div[data-layer='account'] ._right,
	div[data-layer='account'] ._left {
		width:100%;
	}
	div[data-layer='account'] .box .content .items {
		flex-direction:column;
	}
	div[data-layer='account'] .box .content .items._password {
		flex-direction:row;
	}
	div[data-layer='account'] .box .content .items p:before {
		content:' ' !important;
	}
	div[data-layer='account'] .box .content .items._password p:nth-child(1):before {
		content:':' !important;
	}
}


/*Topup Request*/
div[data-layer='myhistory'] ._full {
	width:100%; box-sizing:border-box; 
}
div[data-layer='myhistory'] .box:not(:first-child) {
	min-height:500px;
}
div[data-layer='myhistory'] .box {
	border:1px solid #DEDEDE; border-radius:6px; background:white; box-shadow:0 2px 5px rgba(0,0,0,.2); margin-bottom:18px; position:relative; 
}
div[data-layer='myhistory'] ._full .box .content {
	width:100%; box-sizing:border-box; margin:0 auto;
}
div[data-layer='myhistory'] ._full:first-child > .box {
	width:fit-content;
}
div[data-layer='myhistory'] ._full .box .content._status {
	display:-webkit-flex; align-items:center; padding:10px 0;
}
div[data-layer='myhistory'] ._full .box .content._status ._items div {
	width:fit-content; box-sizing:border-box; transition:.5s; border-bottom:2px solid transparent; margin:0 auto;
}
div[data-layer='myhistory'] ._full .box .content._status ._items.active div {
	border-bottom-color:var(--button-color); transition:.5s;
}
div[data-layer='myhistory'] ._full .box .content._status ._items {
	width:120px; box-sizing:border-box; border-right:1px solid #C2C2C2; text-align:center; font-size:13px; font-family:'Poppins'; cursor:pointer;
}
div[data-layer='myhistory'] ._full .box .content._status ._items:last-child {
	border-right:0;
}
div[data-layer='myhistory'] .box ul._wrapper_items,
div[data-layer='myhistory'] .box ul._header {
	display:-webkit-flex; align-items:center; padding:12px 0; border-bottom:1px solid #DEDEDE; font-size:13px; font-family:'Poppins'; color:black; justify-content:space-between;
}
div[data-layer='myhistory'] .box ul._wrapper_items {
	font-size:15px; padding:15px 0; width:100%; box-sizing:border-box;
}
div[data-layer='myhistory'] .box ul li {
	width:100%; box-sizing:border-box; flex-shrink:0; text-align:center;
}
div[data-layer='myhistory'] .box ul li.items:nth-child(1),
div[data-layer='myhistory'] .box ul li.items:nth-child(2) {
	max-width:200px; 
}
div[data-layer='myhistory'] .box ul li.items:nth-child(3),
div[data-layer='myhistory'] .box ul li.items:nth-child(4) {
	max-width:140px;
}
div[data-layer='myhistory'] .box ul li.items:nth-child(5) {
	max-width:150px;
}
div[data-layer='myhistory'] ._full .box .content[data-table='_body'] {
	min-height:500px;
}
div[data-layer='myhistory'] .box .content ._pag_list {
	display:-webkit-flex; align-items:center; width:100%; box-sizing:border-box; justify-content:center; padding-top:20px; position:relative; bottom:20px; left:0; right:0;
}
div[data-layer='myhistory'] .box .content ._pag_list ._pag {
	display:grid; place-items:center; width:30px; height:30px; box-sizing:border-box; transition:.4s; cursor:pointer;  font-size:15px; font-family:'Poppins'; pointer-events:none; color:#C2C2C2;
}
div[data-layer='myhistory'] .box .content ._pag_list ._pag.active {
	pointer-events:auto; color:black;
}
div[data-layer='myhistory'] .box .content ._pag_list ._pag_jump {
	display:grid; place-items:center; width:30px; height:30px; box-sizing:border-box; transition:.4s; font-size:15px; font-family:'Poppins';
}
@media (min-width:360px) and (max-width:960px) {
	div[data-layer='myhistory'] .box .content.header {
		display:none;
	}
	div[data-layer='myhistory'] ._full:not(:first-child) .box {
		background:transparent; box-shadow:none; border:0px;
	}
	div[data-layer='myhistory'] .box .content.body {
		display:-webkit-flex; column-gap:10px; row-gap:10px; flex-wrap:wrap;
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items {
		max-width:300px; border:1px solid #DEDEDE; border-radius:6px; background:white; box-shadow:0 2px 5px rgba(0,0,0,.2); flex-direction:column; align-items:flex-start; padding:20px;
	}
	div[data-layer='myhistory'] ._full .box .content._status {
		max-width:300px; overflow-x:auto;
	}
	div[data-layer='myhistory'] .box .content ._pag_list {
		position:relative; margin-top:10px;
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items {
		margin-bottom:8px; text-align:left; font-size:13px;
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:last-child {
		margin:0;
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:before {
		color:#C0C0C0; font-size:10px;
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:nth-child(1):before {
		content:'Request ID:';
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:nth-child(2):before {
		content:'Date:';
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:nth-child(3):before {
		content:'Amount:';
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:nth-child(4):before {
		content:'Upgrade To:';
	}
	div[data-layer='myhistory'] .box .content.body ._wrapper_items .items:nth-child(5):before {
		content:'Status:';
	}
}


/*Topup*/
div[data-layer='topup'] {
	width:100%; 
	box-sizing:border-box; 
	display:-webkit-flex;
	justify-content:center;
}
div[data-layer='topup'] ._normal {
	width:100%; box-sizing:border-box; max-width:720px;
}
div[data-layer='topup'] .box {
	border:1px solid #DEDEDE; border-radius:6px; padding:15px 0; background:white; box-shadow:0 2px 5px rgba(0,0,0,.2); margin-bottom:18px;
}
div[data-layer='topup'] .box .content {
	width:95%; box-sizing:border-box; margin:0 auto;
}
div[data-layer='topup'] .box .content .myLeaderLine {
	border-bottom:1px solid #DEDEDE; padding-bottom:9px;
}
div[data-layer='topup'] .box .content .myLeader {
	padding:6px 0;
}
div[data-layer='topup'] .box .content .myRankLine {
	border-top:1px solid #DEDEDE; padding-top:9px;
}
div[data-layer='topup'] .box .content ._current.myLeader p {
	font-size:18px; color:black;
}
div[data-layer='topup'] .box .content ._current.myLeader span {
	font-size:13px; font-family:'Poppins'; color:rgba(0,0,0,.5); margin-left:3px; margin-bottom:6px;
}
div[data-layer='topup'] .box .content .items p {
	font-size:12px; font-family:'Poppins','sans-serif'; margin-bottom:7px; margin-left:3px; line-height:1; color:rgb(80,80,80);
}
div[data-layer='topup'] .box .content .items .selection .button {
	margin:0; color:black !important;
}
div[data-layer='topup'] .box .content .items .selection ._select {
	background:white; border:1px solid black;
}
div[data-layer='topup'] .box .content .items .selection ._select.active {
	background:var(--button-color); color:white !important; border-color:var(--button-color);
}
div[data-layer='topup'] .panel-image .single-img .blank {
	overflow:hidden; width:110px; height:110px; box-sizing:border-box;
}
div[data-layer='topup'] .box .content .myRankLine {
	padding-bottom:6px;
	font-size:12px;
	font-family:'Poppins';
	color:rgba(80,80,80);
}
div[data-layer='topup'] .progress-bar {
	display:-webkit-flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
}
div[data-layer='topup'] .bar {
	position:absolute;
	width:100%;
	box-sizing:border-box;
	bottom:4px;
	height:2px;
	z-index:1;
	background:var(--button-color);
	transition:1s;
	max-width:0;
}
div[data-layer='topup'] .progress-bar:before {
	content:' ';
	position:absolute;
	background:rgba(0,0,0,.1);
	bottom:4px;
	width:100%;
	height:2px;
	box-sizing:border-box;
	z-index:0;
}
div[data-layer='topup'] .progress-bar .point {
	font-family:'Poppins';
	font-size:15px;
	text-align:center;
	width:100%;
	box-sizing:border-box;
	display:-webkit-flex;
	flex-direction:column;
	align-items:center;
}
div[data-layer='topup'] .progress-bar .point:first-child {
	align-items:flex-start;
}
div[data-layer='topup'] .progress-bar .point:last-child {
	align-items:flex-end;
}
div[data-layer='topup'] .progress-bar .point:after {
	content:' ';
	display:block;
	width:9px;
	height:9px;
	border:1px solid var(--button-color);
	background:white;
	border-radius:50%;
	margin-top:3px;
	position:relative;
	z-index:1;
}
div[data-layer='topup'] .progress-bar .point.active:after {
	background:var(--button-color);
}
div[data-layer='topup'] .credit-top {
	width:100%;
	box-sizing:border-box;
	display:-webkit-flex;
	column-gap:10px;
}
div[data-layer='topup'] .box._upgrade,
div[data-layer='topup'] .box._top {
	width:100%;
	box-sizing:border-box;
	padding:15px;
}
div[data-layer='topup'] ._upgrade {
	background:var(--button-color);
}
div[data-layer='topup'] .box._upgrade ._up,
div[data-layer='topup'] .box._top ._current {
	display:-webkit-flex;
	width:100%;
	box-sizing:border-box;
	column-gap:8px;
	row-gap:8px;
	flex-wrap:wrap;
	margin-top:9px;
	font-family:'Poppins';
}
div[data-layer='topup'] .box._upgrade ._cols,
div[data-layer='topup'] .box._upgrade p {
	font-size:12px;
	font-family:'Poppins';
	color:white;
}
div[data-layer='topup'] .box._top p {
	font-size:12px;
	font-family:'Poppins';
	color:black;	
}
div[data-layer='topup'] .box._top .title,
div[data-layer='topup'] .box._upgrade .title {
	font-size:15px;
	font-weight:bold;
}
div[data-layer='topup'] .box._upgrade .remain {
	margin-top:9px;
	font-style:italic;
}
div[data-layer='topup'] .box._upgrade .button,
div[data-layer='topup'] .box._top .button {
	background:transparent;
	width:145px; 
	font-weight:bold;
	border-radius:6px; 
	text-align:center; 
	padding:4px 12px; 
	box-sizing:border-box; 
	cursor:pointer; 
	font-family:'Poppins','sans-serif'; 
	font-size:13px; 
	border:2px solid transparent; 
	transition:.4s;
}
div[data-layer='topup'] .box._upgrade .button {
	color:white;
	border-color:white;
}
div[data-layer='topup'] .box._top .button {
	color:black;
	border-color:black;
}
div[data-layer='topup'] .button[data-action='topup'] {
	background:var(--button-color);
	width:145px;
	margin:20px auto 0;
	border-radius:6px; 
	text-align:center; 
	padding:4px 12px; 
	box-sizing:border-box; 
	cursor:pointer;
	font-family:'Poppins','sans-serif'; 
	font-size:13px; 
	transition:.4s;
	color:white;
}
div[data-layer='topup'] .box._top .button.active,
div[data-layer='topup'] .box._top .button:hover {
	background:var(--button-color);
	transition:.4s;
	color:white;
	border-color:var(--button-color);
}
div[data-layer='topup'] .box._upgrade .button.active,
div[data-layer='topup'] .box._upgrade .button:hover {
	background:white;
	transition:.4s;
	color:var(--button-color);
	border-color:white;
}
@media (min-width:360px) and (max-width:960px) {
	div[data-layer='topup'] .credit-top ._up,
	div[data-layer='topup'] .credit-top {
		flex-direction:column;
	}
	div[data-layer='topup'] .button {
		width:100% !important;
	}
	div[data-layer='topup'] .progress-bar .point {
		font-size:12px;
	}
}


/*Edit Modal*/
div.edit-modal {
	position:fixed; width:100%; box-sizing:border-box; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.2); z-index:9999; height:100vh; display:grid; place-items:center; overflow:hidden; transition:.4s; opacity:0; pointer-events:none;
}
div.edit-modal.active {
	opacity:1; pointer-events:auto; transition:.4s;
}
div.edit-modal .box {
	width:100%; box-sizing:border-box; max-width:400px; background:white; border-radius:11px;  box-shadow:0 2px 5px rgba(0,0,0,.2); overflow:hidden;
}
div.edit-modal .box .panel-image .single-img .blank {
	width:110px; height:110px; overflow:hidden; box-sizing:border-box;
}
div.edit-modal .box .title {
	width:100%; box-sizing:border-box; padding:8px 30px; font-family:'Poppins'; font-size:21px; background:#F3F3F3;
}
div.edit-modal[data-layer='edit-address'] .box {
	max-width:540px;
}
div.edit-modal .box .content {
	margin-bottom:20px; padding:30px 30px 0;
}
div.edit-modal .box .content .panel-input {
	margin-bottom:12px;
}
div.edit-modal .box .button {
	background:var(--button-color); color:white; width:140px; margin:20px auto 0; border-radius:6px; text-align:center; padding:6px 13px; box-sizing:border-box; cursor:pointer; font-family:'Poppins','sans-serif'; font-size:13px; border:1px solid transparent; transition:.4s; margin-bottom:30px;
}
div.edit-modal .box .button:hover {
	background:white; border-color:black; transition:.4s; color:black;
}