html,body{height:100%;font-size:0}body{background:#f0f1f5;overflow:auto;touch-action:manipulation;-ms-touch-action:manipulation}a{color:#168be8}
/* body::before{
	content:"";
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background-image:url("../img/fone_stars.svg");
	background-position:center top;
	background-size:auto 300px;
	background-repeat:repeat-x;
} */
/* BASIC */
.n,main{position:relative;max-width:1000px;margin:0 auto;min-height:100%}main{padding-top:68px;text-align:center}
.m,.c{display:inline-block;vertical-align:top}
.m{
	width:25%;
	min-height:300px
}

.c{
	width:60%;
	margin-left:16px;
	min-height:300px
}

.e{
	position:relative;
	background:#fff;
	padding:18px;
	margin-bottom:18px;
	text-align:left;
	font-size:15px;
	border-radius:16px;
	box-shadow:0 2px 4px 0 rgb(0 0 0/10%);
}
.e2{
	padding:5px 8px;
}

/* HEADER */
header{position:fixed;left:0;right:0;background:#1c1c1c;height:50px;z-index:5;box-shadow:0 2px 4px 0 rgb(0 0 0/10%)}
header .n{padding:0 60px;width:100%;height:100%}
header .i,header .t{display:inline-block;height:100%;background-repeat:no-repeat;background-position:center}
header .i{width:50px;background-size:30px 30px}
header .t{width:160px;background-size:160px 48px;background-position:left}
header a:hover{opacity:0.98}
header .f{
	position:absolute;
	top:0;
	bottom:0;
	right:55px;
	width:50px
}
header .f svg{
	position:absolute;
	width:33px;
	height:33px;
	top:50%;
	left:50%;
	fill:#f2f2f2;
	transform:translate(-50%,-50%)
}header .f svg:hover{fill:#fff;cursor:pointer}

/* MENU */
.p{
	position:relative;
	height:38px;
	margin:2px 0;
	border-radius:10px;
}
.p:hover{
	background:rgba(0,0,0,.05);cursor:pointer
}
.p .t{
	position:absolute;
	left:46px;top:50%;
	transform:translateY(-50%);
}
.p svg{
	position:absolute;
	left:10px;top:50%;
	transform:translateY(-50%);
	width:23px;
	height:23px;
	fill:grey
}
.m a{color:inherit}

/* BUTTON */
button{
	background:#4D72F7;
	color:#fff;
	padding:13px 19px;
	border-radius:30px;
	font-size:14px;
	font-weight:600;
	cursor:pointer
}
button:hover{
	background:#4169e1;
}
button:active{
	transform:scale(.98)
}

/* INPUT */
input,textarea{
	display:block;
	border:1px solid #e8e8e8;
	padding:15px;
	width:100%;
	margin-bottom:15px;
	border-radius:16px
}
textarea{
	max-width:100%;
	min-width:100%;
	min-height:150px
}
input:focus,textarea:focus{
	border-color:#d3d3d3
}

select{
	display:block;
	width:100%;
	padding:15px;
	margin:10px 0 15px 0;
	border:none;
	font-family:inherit;
	border-radius:16px;
	outline:2px dashed #d3d3d3;
	cursor:pointer
}
select:hover{
	outline:2px dashed grey
}

/* MAIN */
.h1,.h1big{
	margin:0;
	font-size:18px;
	margin-bottom:15px
}
.h1big{
	font-size:30px;
}
ol{
	padding:0 15px
}
ol li{
	margin:5px 0
}

.sb{
	position:relative;
	padding:13px 15px;
	background:#fafafa;
	border-radius:16px;
	border:1px solid #e8e8e8
}
.sb2{
	position:relative;
	height:50px;
}
.si{
	position:absolute;
	left:15px;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:40px;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat
}
.sb2 .si{
	left:0;
	top:0;
	transform:none
}
.sb .st{
	padding-left:55px
}
.sb2 .st{
	padding:10px 0 0 55px
}
.rmdl{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:15px
}

.line{
	height:2px;
	background:#e8e8e8;
	margin:15px;
}

/* FOOTER */
footer{
	color:#d3d3d3;
	background:#253444;
	padding:25px 18px;
	font-size:14px
}
footer .n{
	max-width:850px
}

/* FORM */
.w{position:relative}.w .i{position:absolute;top:2px;right:5px;bottom:0;width:40px;height:46px;cursor:pointer}.w .i svg{position:relative;top:50%;transform:translateY(-50%);width:30px;height:30px;fill:#bababa}.w .i:hover svg{fill:grey}.w input{padding-right:60px}.w2 input{padding-right:100px}.w2 .i2{right:48px}.w .psw{width:50px}.psw .s2,.psw2 .s1{display:none}.psw2 .s2{display:block}.btn_left_mrg{margin-left:15px}

/* Tooltip */
.tooltip{position:relative;display:inline-block;width:100%;height:100%}.tooltip .t{visibility:hidden;width:120px;background-color:black;color:#fff;font-size:11px;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:1;bottom:120%;left:50%;margin-left:-65px}.tooltip .t::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.tooltip:hover .t{visibility:visible}

/* INFO */
.out div{background:#fafafa;border:1px solid #fff;max-width:500px;padding:15px 18px;border-radius:10px;margin-bottom:15px}
.out .tru{background:rgba(75,189,92,.1);border-color:rgba(75,189,92,.2)}
.out .err{background:rgba(237,72,72,.1);border-color:rgba(237,72,72,.2)}


/* AMOUNT */
.amount{
	margin:3px 0 8px 0;
	padding:10px 15px
}
.amount .p{
	margin-left:-10px;background:transparent
}
.amount b{
	font-size:18px
}
.amount span{
	position:relative;
	top:-1px
}
.m .line{
	margin:7px -8px;
}
.abright{
	position:absolute;
	right:15px
}

/* LOAD */
.ld{
	position:relative;
	color:transparent
}
.ld:after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:8px;
	height:8px;
	border-radius:50%;
	background-color:#fff;
	box-shadow:16px 0 #fff,-16px 0 #fff;
	animation:flash 0.5s ease-out infinite alternate
}

@keyframes flash{
	0%{
	background-color:#FFF2;
	box-shadow:16px 0 #FFF2,-16px 0 #FFF;
	}
	50%{
	background-color:#FFF;
	box-shadow:16px 0 #FFF2,-16px 0 #FFF2;
	}
	100%{
	background-color:#FFF2;
	box-shadow:16px 0 #FFF,-16px 0 #FFF2;
	}
}

/* FONE */
.fn{
	display:none;
	position:fixed;
	top:0;left:0;right:0;bottom:0;
	background:rgba(0,0,0,.7);
	z-index:6
}

/* TRADE */
.chart{
	position:relative;
	margin:15px 0;
	min-height:200px;
	overflow:hidden
}

.trade_box,.trade_b{
	display:flex;
	justify-content:space-between
}

.trade_info .line{
	margin:10px -15px
}

.trade_info,.trade_btn{
	width:100%;
	max-width:273px;
	min-height:100px;
}

.trade_amount{
	color:#004D0D
}
.trade_b{
	margin-bottom:10px
}
.trade_b .tbtn,.tbtn_size{
	position:relative;
	width:30%;
	height:52px;
	padding:5px;
	border-radius:5px;
	font-size:0;
	font-weight:600;
	background:rgba(0,0,0,.1);
	box-shadow:inset 0 0 3px rgba(0,0,0,.2);
	cursor:pointer
}
.trade_b .tbtn:hover,.tbtn_size:hover{
	background:rgba(0,0,0,.15)
}
.trade_b .tbtn:active,.tbtn_size:active{
	transform:scale(.97)
}
.tbtn .nt{
	position:absolute;
	top:5px;
	left:8px;
	font-size:14px;
	color:#004D0D
}
.tbtn .np{
	position:absolute;
	top:50%;
	left:10px;right:10px;
	font-size:14px;
	color:#696969;
	font-weight:500;
	text-align:center
}
.tbtn .nb{
	position:absolute;
	top:5px;right:8px;
	left:22px;
	font-size:11px;
	text-align:right;
	color:#3b95f7;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis
}

.pbtn .tbtn,.pbtn .tbtn:hover{
	background:rgba(237,72,72,.2);
	box-shadow:inset 0 0 0 1px rgba(237,72,72,.3)
}

#tbtn_less .nb,#tbtn_more .nb{
	left:8px
}
.tbtn svg{
	position:absolute;top:50%;left:50%;
	transform:translate(-50%,-50%);
	width:25px;
	height:25px
}
#tbtn_less,.less_nmbr{
	fill:red
}
#tbtn_more,.more_nmbr{
	fill:#004D0D
}
.more_nmbr svg,.less_nmbr svg{
	position:relative;
	left:4px
}
.trade_tbtn_size{
	margin-top:15px
}
.tbtn_size{
	height:36px
}
.tbtn_size span{
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	font-size:14px;
}
.chart .lines{
	position:absolute;
	top:0;left:0;right:0;bottom:0;z-index:1
}
.chart .lines div{
	height:9.1%
}
.chart .lines .gr{
	background:rgba(0,0,0,.05)
}
.chart .lines .nmbr,.chart_val{
	position:absolute;
	right:10px;
	font-size:12px;
	font-weight:500
}
.chart .chart_val{color:#696969}
.fnn_lines{
	position:absolute;top:0;bottom:0;right:0;
	width:70px
}
.chart_val{
	right:25px;
	color:grey
}
#chart_box{
	position:absolute;
	top:0;
	left:0;
	right:70px;
	bottom:0;
	z-index:2
}
#chart_box .co{
	position:relative;
	display:inline-block;
	width:1px;
	height:100%
}
#chart_box .co:nth-child(2n){
	/*background-color:rgba(0,0,0,.2)*/
}
#chart_box x{
	position:absolute;
	left:0;
	right:0;
	width:100%;
	bottom:0;
	background:linear-gradient(180deg,rgba(59,149,247,.5),transparent);
	box-shadow:0 -2px 0 #3b95f7,0 2px 0 #3b95f7
}
#chart_box .co1 x:after,#chart_box .co1 x:before{
	position:absolute;
	content:'';
	top:-4px;right:-3px;
	width:7px;
	height:7px;
	border-radius:100%;
	background:#3b95f7
}
#chart_box .co1 x:before{
	background:rgba(59,149,247,.3);
	animation:pulse 2s linear infinite
}
@keyframes pulse{
  0% {
    transform:scale(0.5);
    opacity:0;
  }
  50% {
    opacity:1;
  }
  100% {
    transform:scale(4);
    opacity:0;
  }
}
.bid_a,.bid_a:hover{
	background:rgba(59,149,247,.2);
	color:#0a7bf5;
	box-shadow:inset 0 0 0 2px rgba(59,149,247,.5);
}
/* TIMER */
.box_timer{position:absolute;top:5px;height:60px;left:10px;width:60px;
border-radius:100%;background:#d3d3d3;z-index:2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}

.diagram{
	position:relative;
    width:100%;
    height:100%;
    border-radius:50%;
    background:#e8e8e8;
    overflow:hidden;
}
.diagram::before{
    content:'';
    display:block;
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    border-radius:100%;
    background:#fff;
    z-index:3;
	box-shadow:0 0 0 1px rgba(0,0,0,.1);
    opacity:1;
}
.diagram .piece {
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    position: absolute;
}
.diagram .piece::before {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 100%;
}
.diagram .piece.left {
    transform: rotate(0deg);
    z-index: 2;
    border-radius: 50%; /* only FireFox < 75.0v (fix bug)*/
}
.diagram.over_50 .piece.left {
    transform: rotate(180deg);
}
.diagram .piece.right {
    transform: rotate(180deg);
    z-index: 1;
    border-radius: 50%; /* only FireFox < 75.0v (fix bug)*/
}
.diagram.over_50 .piece.right {
    transform: rotate(360deg);
}
.diagram .left::before {
    background: #3b95f7;
}
.diagram.over_50 .left::before {
    background:#e8e8e8;
}
.diagram .right::before {
    background: #3b95f7;
}
.diagram .text {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diagram .text b{font-size:20px}
/**/
.trade_nums{
	margin-bottom:15px;
	font-size:0;
	overflow-x:auto;
	white-space:nowrap;
	text-align:center
}
.trade_nums .tnum{
	position:relative;
	display:inline-block;
	width:53.3px;
	height:40px;
	background:#fff;
	margin-left:15px;
	border-radius:5px;
	font-size:11px;
	font-weight:600;
	box-shadow:0 0 0 1px rgba(0,0,0,.1)
}
.trade_nums .tnum:nth-child(1){
	margin:0
}
.trade_nums::-webkit-scrollbar{
    display:none
}
.tnum .tnm{
	position:absolute;
	top:3px;
	left:50%;
	transform:translateX(-50%);
	color:#0a7bf5
}
.tnum .tnp{
	position:absolute;
	bottom:4px;
	left:50%;
	transform:translateX(-50%);
	font-size:12px;
	color:#004D0D
}

/**/
.flick:before,.trade_nums .flick:before{
	content:'';
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	border-radius:5px;
	animation:8s fadeIn;
	animation-fill-mode:forwards;
}
@keyframes fadeIn{
	0%{
		box-shadow:0 0 0 2px #3b95f7,0 0 5px #3b95f7
	}
	100%{
		box-shadow:none
	}
}

/* load box */
.sb_bld{
	position:absolute;
	top:60px;
	left:0;
	right:0;
	bottom:0;
	background:#fff;
	z-index:1;
	border-radius:0 0 16px 16px
}
.sb_lde{
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%)
}
.sb_ld {
    width:48px;
    height:48px;
    background:transparent;
    border-radius:50%;
    position:relative;
    animation:skLinRotate 1s ease-in-out infinite alternate
}
.sb_ld:after{
	content:"";
	position:absolute;
	inset:5px;
	border-radius:50%;
	border:5px solid transparent;
	border-top-color:#ff3d00
}
@keyframes skLinRotate{
	95%,100%{transform:rotate(840deg)}
}