body {color: var(--cl-basic); background: var(--bg-body)}
input {border: 1px solid var(--bd-dark);background: var(--bg-dark)}
#id-wrap {width: 100%; height: calc(100% - var(--ht-head)); display:grid; grid-template-columns: 50% calc(50% - 370px) 360px; grid-template-rows: 80px 60% calc(40% - 80px); gap: 5px; padding: 10px; overflow: hidden}
.up { color: var(--cl-red)}
.dn { color: var(--cl-blue)}

.x-top {grid-column: 1 / 3; display:grid;  grid-template-rows: 40px 35px; grid-row-gap: 5px}
.x-top .logo {width: 120px; text-indent: -200px; background: url("../images/logo.png") no-repeat center / auto 80%; overflow: hidden}

.x-top-bar { display:flex; justify-content: space-between; row-gap: 5px; border-radius: 10px; background: #25467b; box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2); }
.x-top-bar .nav {display: flex; justify-content: flex-end; column-gap: 10px; margin-right: 10px}
.x-top-bar .nav button {width: 40px; height: 40px; text-indent: -100px; border: none; background-color: transparent; background-image: url("../images/icon.png");  background-size: auto 80px; overflow: hidden}
.x-top-bar .nav .journal {background-position: 0 0}
.x-top-bar .nav .login {background-position: -40px 0}
.x-top-bar .nav .refresh {background-position: -80px 0}

.content >  div {display: none}
.content >  div.on {display: block}

.x-symbol-bar dl {display:flex; height: 100%; align-items: center; column-gap: 10px}
.x-symbol-bar .symbolbox { height:100%;}
.x-symbol-bar .price {height:100%; display:flex; align-items: center; column-gap: 10px; font-family: 'LINESeedKR-Bd'; font-size: 1.25em}


.x-chart {grid-column: 1 / 2; grid-row: 2 / 3;}

.x-orderbook-tab { grid-column: 2 / 3;}

.price-box {height: calc(100% - 40px); font-size: .875rem}
.price-box > div {width: 100%}
.price-box > div ul {position: relative; display: flex; margin: 0 20px}
.price-box > div ul li {text-align: right; padding: 0 5px}
.price-box > div ul li.price {width: 30%; text-align: left}
.price-box > div ul li.vol {width: 35%}
.price-box > div ul li.total {width: 35%; display: flex; align-items: center; justify-content: flex-end}
.price-box ul li {border-bottom: 1px solid var(--bd-light)}
.price-box .price-top li {line-height: 35px}
.price-box .price-list {height: calc(50% - 60px)}
.price-box .price-list ul {font-size:0.8rem; height: 10%; transition: all .5s}
.price-box .price-list .bar {height: 11px; position: absolute; top:2px; right: 0; z-index: 1} 
.price-box .price-list.price-sell .bar {background: var(--bg-short); opacity: .25;}
.price-box .price-list.price-buy .bar {background: var(--bg-long); opacity: .25;}
.price-box > div.price-crt ul li {width: 100%; height: 30px; display: flex; align-items: center; justify-content: flex-end; column-gap: 20px}
.price-box > div.price-crt ul li span {font-weight: bold}
.price-box > div.trade-rate ul {align-items: center}
.price-box > div.trade-rate ul li {width: 30px}
.price-box > div.trade-rate ul li label {font-size: .875em; font-weight: bold}
.price-box > div.trade-rate ul li.bar {display: flex; width: calc(100% - 60px); align-items: center}
.price-box .trade-rate {height: 40px; padding: 10px 0}
.price-box .trade-rate ul {height: 25px;}
.price-box .trade-rate li {padding: 0; border-bottom: none}
.price-box .trade-rate li label {text-align: center}
.price-box .trade-rate li span.buy {position: relative; min-width: 30px; height: 16px; padding-left: 5px; text-align: left; color: #fff; font-size: .75em; background: var(--bg-long)}
.price-box .trade-rate li span.buy::after {content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-color: transparent transparent var(--bg-box); border-style: solid; border-width: 0 0 16px 4px}
.price-box .trade-rate li span.sell {position: relative; min-width: 30px; height: 16px; padding-right: 5px;; color: #fff; font-size: .75em; background: var(--bg-short)}
.price-box .trade-rate li span.sell::before {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-color: var(--bg-box) transparent transparent; border-style: solid; border-width: 16px 4px 0 0}

.tab-chekyul {height: calc(100% - 40px); padding: 10px; overflow-y: scroll; font-size: .875rem}
.chekyul-top ul {display: flex; justify-content:space-around; border-bottom: 1px solid var(--bd-basic)}
.chekyul-top ul li {text-align: right; width: 30%}
.chekyul-top ul li:first-child {width: 40%; text-align: left}
.chekyul-list {height: auto; }
.chekyul-list ul {display: flex; justify-content:space-around; border-bottom: 1px solid var(--bd-light)}
.chekyul-list ul li {text-align: right; width: 30%; padding: 5px 0}
.chekyul-list ul li:first-child {width: 40%; text-align: left}

.x-acct {  grid-column: 2 / 3; grid-row: 3 / 4;}
.title {height: 40px; font-family: 'LINESeedKR-Bd'; font-size: 1em; border-bottom: 1px solid #364d76}
.account {padding: 10px}
.account ul {display: flex; flex-direction: column; gap: 10px}
.account li {display: flex; flex-direction: column; gap: 5px}
.account label {width: 100%}

.tab {display: flex; column-gap:10px; height: 40px; border-bottom: 1px solid #364d76}
.tab button {color: #6e8abc; font-family: 'LINESeedKR-Bd'; font-size: 1em; border: none; padding: 0 10px; background-color: transparent}
.tab button.on {position: relative; color: #fff;}
.tab button.on::after {content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(75deg, #168a75, #74f0cb);
    box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.1);}

.x-order-tab {grid-column: 3 / 4; grid-row: 1 / 4; border-radius: 14px; padding: 2px; background: linear-gradient(125deg, #214475, #142b53); overflow: hidden; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1)}
.x-order-tab > div {width: 100%; height: 100%; padding: 10px; border-radius: 10px; background: #142b53; overflow: hidden}
.x-order-box {padding: 20px}
.x-order-box ul {display: flex; row-gap: 5px; flex-direction: column}
.x-order-box ul.trade-box-bdy {padding: 10px 0}
.x-order-box ul .ant-radio-group {justify-content: flex-start}
.x-order-box ul li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; row-gap: 5px; position: relative;}
.x-order-box label {font-size: .875em}
.x-order-box input {width: 50%; height: 30px; border: none; border-radius: 5px; background: var(--bg-basic); text-align: right}
.x-order-box input[type='checkbox'] {width: auto; height: auto}
.x-order-box input[type='radio'] {width: auto; height: auto}
.x-order-box button {width: 50%; height: 30px; border: none; border-radius: 5px; background: linear-gradient(45deg, #4e6ba3, #304b80);}
.x-order-box > div > div {margin-bottom: 20px}

.x-order-box .searchBox > li {position: relative; border: 2px solid #1e3d6c; border-radius: 10px; background: #18315a}
.x-order-box .searchBox > li::after {content: ''; position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; background: url("../images/ico.png") -90px 0 / auto 60px;}
.x-order-box .searchBox input {width: 100%; text-align: left; height: 34px; padding: 0 10px; background-color: transparent;}
.x-order-box .searchBox input::placeholder {font-family: 'LINESeedKR-Bd'; color: #6f92cc; font-size: .875em; text-align: center}

.x-order-box .ui-spinner-input {width: 100%; margin: 0}
.x-order-box .ui-widget-content {width: 50%; border: 1px solid var(--bd-dark); background: none}

.ui-widget.ui-widget-content {border: 1px solid var(--bd-dark);}
.ui-menu .ui-menu-item {color: var(--cl-basic); background: var(--bg-light)}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {color: #fff; background: var(--bg-active)}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {width: 16px; height: 16px; border: none; background: var(--bg-active)}


.leverage {position: relative}
.leverage .x-pop {display: none; position: absolute; top: 10px; left: 0; width: 100%; text-align: center; padding: 10px; border-radius: 10px; border: 2px solid #1e3d6c; background: #18315a; z-index: 100}
.leverage .x-pop ul {display: flex; row-gap: 10px;}
.leverage .x-pop .btnArea { justify-content: space-between}
.leverage .x-pop .btnArea button {width: 30%}
.x-order-box .ui-button { border: 1px solid var(--bd-dark); background: var(--bg-dark)}

.radio {justify-content: flex-start !important; column-gap: 5px}
.radio .ui-button {padding: 3px; border: none; background: none}

.x-symbol-bar dt {position: relative; width: 200px}
.x-symbol-bar .symbolbox {width: 100%}

.symbolbox-lst { position:absolute; top: 35px; width: 100%; border: 2px solid #1e3d6c; border-radius: 10px; background: #061b3f; z-index: 100}
.symbolbox-lst li {justify-content: flex-start !important; padding: 0 5px}
.symbolbox-lst li.on {background: var(--bg-active);}

.x-lst-tab {grid-column: 1 / 2; grid-row: 3 / 4;}
.x-lst-tab .tab {column-gap: 10px}
.x-lst-tab .tab button { width: auto; padding: 0 10px}
.x-lst-tab table { font-size: .875em; width: 100%;}
.x-lst-tab table th {padding:5px;  border-bottom : 1px solid var(--bd-basic); font-weight: normal}

.x-order-box .slider {width: 100%; border: 1px solid var(--bd-dark); background: var(--bg-dark); }
.x-order-box .ant-slider-rail {position: relative; padding: 5px 0}
.x-order-box .ant-slider-rail::after {content: ''; width: 100%; height: 6px; border-radius: 3px; }
.x-order-box button.ant-slider-handle {position: absolute; top: 0; width: 12px; height: 12px; z-index: 10}
.ant-slider-mark {display: flex; justify-content: space-between; width: 100%; color: var(--cl-light)}

.trade-bottom {padding-top: 10px; display: flex; justify-content: space-between; column-gap: 8px; margin-bottom: 10px}
.trade-bottom > div {flex: 1; width: 100%; height: auto; border: none; font-size: 1.125em; text-transform: uppercase; font-family: 'NanumSquare', sans-serif; border-radius: 5px;}
.trade-bottom > div ul {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 0;}
.trade-bottom > div ul li {display: block; margin-bottom: 0;}
.trade-bottom div.long {color: #fff; background: var(--bg-long);}
.trade-bottom div.shot {color: #fff; background: var(--bg-short);}

.btnOpt ul {display: flex; justify-content: space-between; flex-direction:row; column-gap: 10px}
.btnOpt ul li {width: 50%; display: flex; flex-wrap: nowrap; column-gap: 5px}
.btnOpt ul li button {background: var(--bg-basic)}
.btnOpt ul li button.on {background: linear-gradient(45deg, #4e6ba3, #304b80) }

.btnWrap {padding: 10px 0}
.btnWrap button {position: relative; width: 100%; height: 30px; border: none; font-family: 'LINESeedKR-Bd'; 
    background: linear-gradient(90deg, #1d9c87, #15dea8); color: #fff; padding: 5px 10px; text-align: center; border-radius: 20px;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                inset -1px -1px 2px rgba(0, 0, 0, 0.5),
                2px 2px 6px rgba(0, 0, 0, 0.1);
}
.btnWrap button::before {content: ''; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background-image: url("../images/ico.png"); background-size: auto 40px}
.btnWrap button.startBtn::before {background-position: 0 -20px}
.btnWrap button.stopBtn::before {background-position: -20px -20px}
.btnWrap button.endBtn::before {background-position: -40px -20px}


button.emb { 
    background: linear-gradient(45deg, #4e6ba3, #304b80); border: none; color: #fff; text-align: center; border-radius: 20px;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                inset -1px -1px 2px rgba(0, 0, 0, 0.5),
                2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.1s ease-in-out;
}


.tab-chekyul ul {display:flex;width:100%;}