@font-face{font-family:"roboto";src:url("fonts/roboto-regular.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"roboto";src:url("fonts/roboto-bold.ttf")format("TrueType");font-weight:700;font-display:swap}
@font-face{font-family:"roboto";src:url("fonts/roboto-bolditalic.ttf")format("TrueType");font-weight:400;font-display:swap;font-style:italic;}
@font-face{font-family:"inter";src:url("fonts/inter-regular.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"inter";src:url("fonts/inter-bold.ttf")format("TrueType");font-weight:700;font-display:swap}

:root{
	--burger:#FFF;
	--green-dark: #0C3111;
	--green: #007E15;
	--green-grey: #213522;
	--yellow-bg: #FFFCF8;
	--yellow-skin: #FAE8D8;
	--yellow: #FFCB55;
	--yellow-light: #FFFF00;
	--red: #BD0018;
	
	--focus-color:#0B6BCB;
	--purple: #4a21ef;
	--purple-dark: #4527a0;
	--purple-light: #d1c4e9;
	--lavendar: #d3e1ff;
}

html, body { font-family: roboto, sans-serif; font-size:16px; line-height:1.5em; position:relative; overflow-x:hidden; }
/* body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } */
.container .boundary { width:86%; max-width:800px; }
h1, h2, h3, h4 {font-family:inter, sans-serif;}

a {color:inherit;}

.modal h2 {background-color:var(--purple-dark)!important;}

.form-message { background-color: var(--yellow-light); color: #333; border-color: var(--yellow-light); }

.textbox, .selection { background-color: #FFF; box-shadow:0 0 .5px #ddd; border-radius:5px!important; height:58px; color:#AAA; margin-bottom:2em; }
.textbox[readonly] { background-color:#FFF!important; color:#AAA!important; }
.button { margin:0; text-transform:unset!important; width:100%; height:44px; background-color:#0B6BCB; border:0; }
.button:hover { background-color:#999; }
.button:disabled { background-color:#666!important; color:#BBB!important; }
.button.purple { background-color:var(--purple); border-radius:5px; }
.button.light {background-color:#d3e1ff; color:#000!important; margin-bottom:1em; }
label { font-size:.9em!important; }
label span { color:#F00; }

.textbox.min { width:calc(100% - 68px); margin-right:10px; }
.square-button { display:inline-block; width:58px; height:58px; box-sizing:border-box; border-radius:5px; border:1px solid #DDD; line-height:58px; text-align:center; }

.jBox-Notice .jBox-container { background-color:PapayaWhip!important; }

.jBox-Tooltip .jBox-title { font-weight:400!important; }

.top-menu { height:40px; line-height:40px; margin-top:20px; }
.top-menu .top-menu-account { position:relative; display:inline-block; width:auto; font-weight:bold; font-size:.8em; }
.top-menu .top-menu-account img { width:36px; display:inline-block; vertical-align:middle; margin-right:5px; }
.top-menu .top-menu-account .top-menu-account-content { position:absolute; top:110%; left:0; background-color:#FFF; box-shadow: 0 0 3px #666; border-radius:5px; z-index:100; list-style-type:none; margin:0; padding:5px 10px; font-size:1rem; font-weight:normal; white-space:nowrap; display:none; }
.top-menu .top-menu-account .top-menu-account-content.active { display:block; }
.top-menu .top-menu-account .top-menu-account-content li { padding:0 10px; display:block; }
.top-menu .top-menu-account i { transform:rotate(90deg); display:inline-block; }

.top-menu .top-menu-account .top-menu-logo { display:inline-block; }

.top-menu .top-menu-function { float:right; }
.top-menu .top-menu-function a { display:inline-block; width:30px; height:30px; border-radius:5px; text-align:center; line-height:30px; font-size:1.3em; color:var(--purple-dark); background-color:var(--purple-light); vertical-align:middle; margin-left:10px; }

.main-function .main-function-display { text-align:center; font-size:2.5em; padding:1.2em 0; }

.main-function .main-function-buttons { display:flex; align-self: stretch; box-sizing: border-box; flex-direction: row; flex-shrink: 0; height: 100px; justify-content: space-between; overflow: hidden; }
.main-function .main-function-buttons a { display: flex; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; }

.main-function .main-function-buttons a span { width:50px; height:50px; background-color:var(--purple-light); border-radius:5px; line-height:50px; text-align:center; }
.main-function .main-function-buttons a svg { width:2em; height:2em; display:inline-block; vertical-align:middle; }
.main-function .main-function-buttons a svg path { fill:var(--purple-dark); }

.tabs { background-color:#FFF; margin-top:1.2em; }
.tabs .tab-container { background:unset; }
.tabs .tab-nav { background-color:#FBFCFE; border-bottom:1px solid #DDD; }
.tabs .tab-nav .tabmenu { border:0; color:var(--purple-dark); border-top-left-radius:10px; border-top-right-radius:10px; }
.tabs .tab-nav .tabmenu.active { background-color:#b39ddb; color:#673ab7; }
.tabs .tabcontent { border:0; background:unset; padding: 20px 0; }

.money-item { display:block; padding:10px 0; }
.money-item .money-item-image, .money-item .money-item-content { height:64px; line-height:64px; }
.money-item .money-item-image, .money-item .money-item-content, .money-item .money-item-content-left, .money-item .money-item-content-right { display:inline-block; width:35px; vertical-align:top; }

.money-item .money-item-image div { position:relative; display:inline-block; width:35px; height:35px; vertical-align:middle; }
.money-item .money-item-image img { width:100%; height:auto; display:inline-block; vertical-align:top; }
.money-item .money-item-image img.small { position:absolute; bottom:0; right:-1px; width:17.6px; height:17.6px; border:1.2px solid #FFF; border-radius:100%; }

.money-item .money-item-content { width:calc(100% - 35px); padding-left:10px; box-sizing:border-box; }
.money-item .money-item-content-left, .money-item .money-item-content-right { width:50%; line-height:1.5em; vertical-align:middle; }
.money-item .money-item-content-right { text-align:right; }

.money-item .money-item-content span { display:block; color:#666; font-size:.8em; }
.money-item .money-item-content span span { display:inline-block; color:green; font-size:1em; }

.top-nav { height:63px; line-height:63px; border-bottom:1px solid #DDD; font-size:1.3em; margin-bottom:1.2em; }
.top-nav a { width:63px; height:63px; display:inline-block; vertical-align:63px; text-align:center; vertical-align:top; margin-left: -20px; }
.top-nav a img { display:inline-block; width:30px; height:auto; vertical-align:middle; }

/* loading effect */
.css-cvm7tb {
	position: fixed;
	/* display: flex; */
	display:none; 
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	inset: 0px;
	-webkit-tap-highlight-color: transparent;
	background-color: rgba(255, 255, 255, 0.5);
}
.css-13o7eu2 {
	display: block;
}
.css-79elbk {
	position: relative;
}
.css-liiq10 {
	display: inline-block;
	color: rgb(238, 238, 238);
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.css-1ayyxhp {
	display: inline-block;
	animation: 550ms linear 0s infinite normal none running animation-61bdi0;
	color: rgb(74, 33, 239);
	position: absolute;
	left: 0px;
}
.css-1ayyxhp .MuiCircularProgress-circle {
	stroke-linecap: round;
}
.css-1ayyxhp .MuiCircularProgress-circle {
	stroke-linecap: round;
}
.css-1aw1elk {
	stroke: currentcolor;
	stroke-dasharray: 80px, 200px;
	stroke-dashoffset: 0;
}
@keyframes animation-61bdi0 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* loading effect */

@media (min-width:576px){
	
	
}

@media (min-width:768px){
	
	
}

@media (min-width:996px){
	
	
}

@media (min-width:1200px){
	
	
}

@media(min-width:1400px){
	
}

@media (min-width:1600px){
	
}