@charset "utf-8";
@import 'responsive.css?ver=250805';
@import 'https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap';
@import 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';

/*Variable*/
:root {
  --color-red: #f65957;
  --color-blue: #468bfa;
  --color-white: #fff;
  --color-green: #53a451;
  --color-info: #4ba0b5;
	--color-warnning: #f6c244;
	--color-danger: #cb444a;
  --color-gray:#757575;
  --color-purple:#9c27b0;
  --bs-body-color: #212529;
}

.text-primary{color:#303f82!important}
.text-amber{color:#ffc107!important}
.text-aqua{color:#00ffff!important}
.text-blue{color:#2196F3!important}
.text-light-blue{color:#87CEEB!important}
.text-brown{color:#795548!important}
.text-cyan{color:#00bcd4!important}
.text-blue-grey{color:#607d8b!important}
.text-green{color:#4CAF50!important}
.text-light-green{color:#8bc34a!important}
.text-indigo{color:#3f51b5!important}
.text-khaki{color:#b4aa50!important}
.text-lime{color:#cddc39!important}
.text-orange{color:#ff9800!important}
.text-deep-orange{color:#ff5722!important}
.text-pink{color:#e91e63!important}
.text-purple{color:#9c27b0!important}
.text-deep-purple{color:#673ab7!important}
.text-red{color:#ff4e4e!important}
.text-sandr{color:#fdf5e6!important}
.text-teal{color:#009688!important}
.text-yellow{color:#d2be0e!important}
.text-white{color:#fff!important}
.text-black{color:#000!important}
.text-grey{color:#757575!important}
.text-light-grey{color:#f1f1f1!important}
.text-dark-grey{color:#3a3a3a!important}
.text-normal{color: var(--bs-body-color);}

.bg-yellow{background-color:#f9d895 !important;}
.bg-light-yellow{background-color:#faedd1 !important;}
.bg-blue{background-color:#bce0ef !important;}
.bg-light-blue{background-color:#e2ecf0 !important;}
.bg-purple{background-color:#e89af5 !important;}
.bg-light-purple{background-color:#f6e0fa !important;}
.bg-green{background-color:#baf9bc !important;}
.bg-light-green{background-color:#ecfbec !important;}
.bg-red{background-color:#fbdce8 !important;}
.bg-white{background-color:#fff !important;}
.bg-light-red{background-color:#fdebeb !important;}

body{
    font-size: 0.95rem;
    padding-top: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 100px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.top-navbar{
    height:40px;
    background: var(--bs-dark-bg-subtle) !important;
    align-items: baseline;
    line-height:40px;
    /* border-bottom: 5px solid var(--bs-dark-bg-subtle) !important; */
}
.top-navbar.kis{
  background: #235BEC !important;
}
.top-navbar.upbit{
  background: #093687 !important;
}
.top-navbar a,
.top-navbar button{
    font-weight: 600;
    text-decoration: none;
    color:#fff;
}
.top-navbar .nav-link {
  display: inline;
}

.top-navbar .nav-link.active {
  color: #04af95;
}

.bottom-navbar{
    background: var(--bs-dark-bg-subtle) !important;
    padding-top:0.5rem;
    padding-bottom:1.3rem;
}
.bottom-navbar a{
    font-weight: 600;
    text-decoration: none;
    /* color:#fff; */
    color:var(--bs-body-color);
    font-size:1rem;
}

.bottom-navbar a i{
  font-size:1.7rem;
  line-height:1.7rem;
}

.bottom-navbar .nav-item{
  width:24px;
  border-radius:4px;
}

.card {
    background: var(--bs-secondary-bg-subtle);
    padding: 0.5rem;
    border:none;
}

.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
 .btn{
    line-height: initial !important;
} 

.inline-block{
    display: inline-block;
}

.flex{
    display: flex;
    align-items: center;
}
.flex-sb{
  display: flex;
  justify-content: space-between;
}

.inline-flex{
    display: inline-flex;
    align-items: center;
}
.led-red {
    margin: 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    background-color: #F00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px 1px, inset #441313 0 -1px 3px, rgba(255, 0, 0, 0.5) 0 2px 3px; 
  }

  .led-gray {
    margin: 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    background-color: #b7b8b5;
    border-radius: 50%;
    /* box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px 1px, inset #304701 0 -1px 3px, #89FF00 0 2px 3px; */
  }

  .led-green {
    margin: 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    background-color: var(--color-green);
    border-radius: 50%;
    /* box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 1px 1px, inset #304701 0 -1px 3px, #89FF00 0 2px 3px; */
  }
  .ml5{margin-left:0.313rem;}
  .ml10{margin-left:0.625rem;}
  .ml15{margin-left:0.938rem;}
  .ml20{margin-left:1.25rem;}
  .ml25{margin-left:1.563rem;}
  .ml30{margin-left:1.875rem;}
  .ml40{margin-left:2.5rem;}
  
  .mr5{margin-right:0.313rem;}
  .mr10{margin-right:0.625rem;}
  .mr15{margin-right:0.938rem;}
  .mr20{margin-right:1.25rem;}
  .mr25{margin-right:1.563rem;}
  .mr30{margin-right:1.875rem;}
  .mr40{margin-right:2.5rem;}

  .mt5 {margin-top:0.313rem;}
  .mt10{margin-top:0.625rem;}
  .mt15{margin-top:0.938rem;}
  .mt20{margin-top:1.25rem;}
  .mt25{margin-top:1.563rem;}
  .mt30{margin-top:1.875rem;}
  .mt40{margin-top:2.5rem;}
  .mt-100px{margin-top:100px;}

  .mb0 {margin-bottom:0;}
  .mb5 {margin-bottom:0.313rem;}
  .mb10{margin-bottom:0.625rem;}
  .mb15{margin-bottom:0.938rem;}
  .mb20{margin-bottom:1.25rem;}
  .mb25{margin-bottom:1.563rem;}
  .mb30{margin-bottom:1.875rem;}
  .mb40{margin-bottom:2.5rem;}

  .pr0 {padding-right: 0!important;}
  .pr5 {padding-right: 0.313rem!important;}
  .pr10{padding-right: 0.625rem!important;}
  .pr20{padding-right: 1.25rem!important;}  
  .pr30{padding-right: 1.875rem!important;}

  .pl0 {padding-left: 0!important;}
  .pl5 {padding-left: 0.313rem!important;}
  .pl10{padding-left: 0.625rem!important;}
  .pl20{padding-left: 1.25rem!important;}  
  .pl30{padding-left: 1.875rem!important;}

  .left-0{left:0rem;}
  .left-5{left:0.5rem;}
 
  .table td{
    padding: 1px 0px;
    background-color: initial;
  }

  .table th{
    padding: 4px 1px;
    background-color: #cafcd5;
    color: #00960c;
    border-top: 2px solid #58925d;
    border-bottom: 2px solid #58925d;
  }

  div.va-middle{
    vertical-align: middle;
    height: 100%;
  }
  div.va-bottom{
    vertical-align: bottom;
    height: 100%;
  }

  .table.va-middle th,
  .table.va-middle td{
    vertical-align: middle;
  }
  
  .table.va-bottom th,
  .table.va-bottom td{
    vertical-align: bottom;
  }


  .table.bg-transparent th,
  .table.bg-transparent td{
    background: transparent;
  }


  .text-normal{
    color:var(--bs-body-color) !important;
  }

  .text-red{
    color:var(--color-red) !important; 
  }

  .text-blue{
    color:var(--color-blue) !important; 
  }

  .text-green{
    color:var(--color-green) !important; 
  }

  .fs11{font-size: 1.9rem !important;}
  .fs13{font-size: 1.1rem !important;}
  .fs14{font-size: 1.2rem !important;}
  .fs15{font-size: 1.3rem !important;}
  .fs16{font-size: 1.4rem !important;}
  .fs17{font-size: 1.5rem !important;}
  .fs18{font-size: 1.6rem !important;}
  .fs19{font-size: 1.7rem !important;}
  .fs20{font-size: 1.8rem !important;}
  .fs21{font-size: 1.9rem !important;}
  

  .h8 {
    font-size:0.75rem  !important;
  }

  .wd-10{width: 10px;}
  .wd-20{width: 20px;}
  .wd-30{width: 30px;}
  .wd-40{width: 40px;}
  .wd-50{width: 50px;}
  .wd-60{width: 60px;}
  .wd-70{width: 70px;}
  .wd-80{width: 80px;}
  .wd-90{width: 90px;}
  .wd-100{width: 100px;}
  .wd-110{width: 110px;}
  .wd-120{width: 120px;}
  .wd-130{width: 130px;}

  .wd-10p{width: 10%;}
  .wd-20p{width: 20%;}
  .wd-30p{width: 30%;}
  .wd-40p{width: 40%;}
  .wd-50p{width: 50%;}
  .wd-60p{width: 60%;}
  .wd-70p{width: 70%;}
  .wd-80p{width: 80%;}
  .wd-90p{width: 90%;}
  .wd-100p{width: 100%;}
  .pointer{
    cursor: pointer;
  }

.bottom-10px {bottom: 10px !important;}
.bottom-20px {bottom: 20px !important;}
.bottom-30px {bottom: 30px !important;}
.bottom-40px {bottom: 40px !important;}
.bottom-50px {bottom: 50px !important;}
.bottom-60px {bottom: 60px !important;}
.bottom-70px {bottom: 70px !important;}
.bottom-80px {bottom: 80px !important;}
.bottom-90px {bottom: 90px !important;}
.bottom-100px {bottom: 100px !important;}
.btn-round{
  border-radius: 50%;
  padding: 0.4rem;
}
.progress.mainCurrencyProgress{
  border-radius: 0;
  height: 3px;
  margin-top:-1px;
}
.progress-bar{
   transition: all 1s linear ;
}

.border-left{
  border-left:var(--bs-card-border-width) solid var(--bs-card-border-color);;
}
.fw-bold{
  font-weight: 600;
}

.fw-bolder{
  font-weight: 900 !important;
}

.form-check-input{
  float:initial !important;
}

.sticky-bottom-right{
  position: fixed;
  bottom : 5.5rem;
  right : 1.7rem;
  white-space: nowrap;
}
.btn{
  min-width: 2rem;
  min-height: 2rem;
}

.btn.btn-lg{
  min-width: 2.3rem;
  min-height: 2.3rem;
}

.flag{
  display: block;
  background-size: 20px;
  width: 20px;
  height: 20px;
  border-radius: 15%;
  margin: 0 0.5rem;
  background-repeat:no-repeat;
}
.flag.JPYKRW{
  background-image:url('https://cdn.countryflags.com/thumbs/japan/flag-square-250.png');
}
.flag.USDKRW{
  background-image:url('https://cdn.countryflags.com/thumbs/united-states-of-america/flag-square-250.png');
}
.flag.EURKRW{
  background-image:url('https://cdn.countryflags.com/thumbs/europe/flag-square-250.png');
}

.no-border-bottom > tbody > tr:last-child > td{
  border-bottom:0;
}

.mt-small td{
  padding-top: 0px;
  padding-bottom: 0px;
}

.mt-small h1,
.mt-small h2,
.mt-small h3,
.mt-small h4,
.mt-small h5,
.mt-small h6,
.mt-small h7{
  margin-top: 1px;
  margin-bottom: 1px;
}

.layout-table{
  width:100%;
  border-collapse: collapse;
  border-spacing : 0;
}
.layout-table th,
.layout-table td{
  padding: 0;
  line-height: 1.3rem;
}

.buy-sell-B::before{
  content:"Buy";
  padding: 1px 10px;
  border-radius: 4px;
  color: var(--color-blue) ;
  border:1px solid var(--color-blue) ;
}

.buy-sell-S::before{
  content: "Sell";
  padding: 1px 10px;
  border-radius: 4px;
  color: var(--color-red);
  border: 1px solid var(--color-red);
}

.sticky-bottom-right .btn i{
  font-size:1.6rem;
  padding:4px;
}

#chartLink li{
  color: var(--bs-black);
  text-decoration: none;
  padding: 3px 3px;
  margin-right: 3px;
  border: 1px solid var(--bs-gray);
  border-radius: 4px;
}

#chartLink li.active{
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}
.round-border{
  border-radius: 4px;
}
.round-border-50{
  border-radius: 50%;
}
.al-center{
  align-items: center;
}

.buy-sign{
  background-color: var(--color-green);
  border-radius: 50%;
  padding: 1px 4px;
  font-size: 0.8rem;
  margin-right: 0.2rem;
}

.sell-sign{
  background-color: var(--color-warnning);
  border-radius: 50%;
  padding: 1px 4px;
  font-size: 0.8rem;
  margin-right: 0.2rem;
}

.ui-tooltip {
  /* tooltip container box */
  white-space: pre-line;
}

.ui-tooltip-content {
  /* tooltip content */
  white-space: pre-line;
}

.auto-font-size{
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  /* word-break: break-all; */
  max-width: inherit;
  -webkit-line-clamp:1;
  -webkit-box-orient: vertical;
}
.nowrap{
  white-space: nowrap;
}
#status-bar{
  /* background:#d8fafc;
  border-top: 1px solid #3d993d;
  border-bottom: 1px solid #3d993d; */
}
.status-fill{
  border-radius: 20px;
  padding: 2px 8px;
}
.status-fill.blue{
  color: #fff;
  background-color: #0b5ed7;
}
.status-fill.green{
  color: #fff;
  background-color: var(--color-green);
}
.status-fill.gray{
  color: #363636;
  background-color: #d1d4da;
}

.trade-status{
  border-radius: 25%;
  padding: 0px 2px;
  font-size: 0.7rem;
}

.trade-status.on{
  color: var(--color-green);
  border: 1px solid var(--color-green);
  background-color: #fff;
}
.trade-status.off{
  color: var(--color-red);
  border: 1px solid var(--color-red);
  background: linear-gradient(to bottom right, #fff calc(50% - 1px), #c74d4d , #fff calc(50% + 1px) )
}

.trade-status-round{
  border-radius: 50%;
  padding: 2px 4px;
  font-size: 0.7rem;
}
.trade-status-round.on{
  color: var(--color-white);
  background-color: var(--color-purple);
  font-weight: 500;
}
.trade-status-round.off{
  color: var(--color-white);
  background-color: var(--color-gray);
  font-weight: 500;
}

.eval-seq{
  padding :0 2px !important;
  min-width: 2.5rem;
  border : 1px solid #ddd;
}
.eval-seq.plus{
  background-color : #faebeb;
  color : var(--color-red);
}
.eval-seq.minus{
  background-color: #e8fcff;
  color: var(--color-blue);
}
.manual-sell{
  border: 2px dotted red;
}

#trader-status-bar{
  position: fixed!important;
  bottom: 5.1rem;
  background: #d6f7fc;
  width: 100%;
  padding: 2px;
  border-top: 1px solid var(--color-blue);
  border-bottom: 1px solid var(--color-blue);
  margin-left: calc(1.5rem * -0.7);
}
.index-box{
  border-radius: 4px;
  border:2px solid #dee2e6;
  line-height: 1rem;
  padding:1px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.error{
  background: #fff;
  color: var(--color-red);
  border-bottom: 3px solid var(--color-red);
}

.success{
  background: #fff;
  color: var(--color-green);
  border-bottom: 3px solid var(--color-green);
}

.borderd{
  border: 1px solid #ddd;
  padding: 1px 3px!important;
}

.price-down:before{
  content:"▽";
}
.price-double-down:before{
  content:"▼";
}
.price-triple-down:before{
  content:"🡇";
  
}


.price-up:before{
  content:"△";
}
.price-double-up:before{
  content:"▲";
}
.price-triple-up:before{
  /* content:"🡅"; */
  content:'\f30c';
  font-family:"Font Awesome 6 Free"; 
  font-weight:600;
}

.form > .row{
  margin-bottom: 10px;
}

.sticky-header{
  border-collapse: separate;
	border-spacing: 0;
}
.sticky-header > thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;
}

.sticky-header.top-50 > thead > tr > th {
  top: 40px;
}
/* 
table.tbody-scroll tbody {
  height: 200px;
  display: inline-block;
  width: 100%;
  overflow: auto;
}
table.tbody-scroll {
  width: 100%;
  display:block;
}
table.tbody-scroll thead {
  display: inline-block;
  width: 100%;
  height: 20px;
} */

table.tbody-scroll{
  width: 100%;
}
table.tbody-scroll thead, 
table.tbody-scroll tbody { 
  display: block; 
}

table.tbody-scroll tbody {
    height: 200px;      
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}
.fixed-value{
  font-style: italic;
  text-decoration: underline;
}
.apply-value{
  color: var(--color-green);
  font-weight: 500;
  text-decoration: underline;
}
.rotate45{
  transform: rotate(45deg);
}

.shadow-border{
  box-shadow: 2px 2px 4px 1px rgb(185, 185, 185);
}

.btn-group.compact .btn{
  padding :5px;
}

.container{
  padding:0px;
}

.chart2-area{
  width: 100%;
}

.cmc-rank{
  border-radius: 15px;
  padding: 1px 5px;
  color: #fff;
  background-color: #5480d1;
}

.border-right{
  border-right:1px solid #ddd;
}


.dropdown-menu a{
  color: var(--bs-body-color);
}

.btn-xs{
  --bs-btn-padding-y: 0rem;
  --bs-btn-padding-x: 0rem;
  --bs-btn-font-size: 0.7rem;
  min-height: 1.5rem;
}