@font-face {
  font-family: NunitoSans Black;
  font-style: normal;
  font-weight: 900;
  src: url(/h-assets/fonts/nunitosans-black-40ca0429e1a40bcd6c26.woff2) format("woff2"), url(/h-assets/fonts/nunitosans-black-7ae52f38151ec8bc7591.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: NunitoSans Bold;
  font-style: normal;
  font-weight: 700;
  src: url(/h-assets/fonts/nunitosans-bold-9c4cdbefdbac045118a3.woff2) format("woff2"), url(/h-assets/fonts/nunitosans-bold-9709a8d45fa54da212c6.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: NunitoSans Regular;
  font-style: normal;
  font-weight: 400;
  src: url(/h-assets/fonts/nunitosans-regular-159d1cc68606c496d527.woff2) format("woff2"), url(/h-assets/fonts/nunitosans-regular-6829d5bb0386828b00bc.woff) format("woff");
}
body {
  font-family: "Nunito Sans", sans-serif !important;
  font-optical-sizing: auto !important;
  font-style: normal !important;
}

html, body, #app {
  background-color: #252b3b !important;
}

.main-layout {
  background-color: #252b3b !important;
}

.navbar {
  background-color: #1c2233;
  border-bottom: 1px solid rgba(96, 125, 139, .2);
}

.selected-asset {
  --backgroud-color-hover: hsla(0, 0%, 100%, .05);
  background-color: #454958;
  border:none;
  border-radius: 3px;
  border-bottom: 3px solid #eb6e00;
}
.selected-asset:hover {
  /* background-color: #4e5364; */
  border:none;
  /* border-bottom: 3px solid #eb6e00; */
}

#modalAssets {
  margin-top: 64px;
  border-radius: 0;
  background-color: #252b3b;
  border: 1px solid rgba(96, 125, 139, .2);
  border-top: none;
  height: 100vh !important;
}

.left-section-desktop {
  background-color: #252b3b;
  /* border-right: 1px solid rgba(96, 125, 139, .2); */
  padding: 0;
}

.modalTradeHistory-desktop {
  margin-left: 81px;
}

.mdl {
  margin-top: 64px !important;
  border-radius: 0 !important;
  background-color: #191d29 !important;
  border-right: 1px solid rgba(96, 125, 139, .2) !important;
  height: calc(100% - 64px) !important;
}

#modalSelectTimeframe {
  border-left: 1px solid rgba(96, 125, 139, .2) !important;
  border-right: none !important;
  /* margin-right: -2px; */
}
#modalSelectPrice {
  border-left: 1px solid rgba(96, 125, 139, .2) !important;
  border-right: none !important;
  /* margin-right: -2px; */
}

.right-section {
  background-color: #252b3b;
  border-left: 1px solid rgba(96, 125, 139, .2);
}

.nav-balance {
  line-height: 1.1 !important;
}

#amount-area {
  border: 1px solid #3b404e;
  border-radius: 5px;
  background: #3b404e;
  padding-left: 10px;
  padding-top: 4px;
  margin-bottom: 20px;
}

#time-area {
  border: 1px solid #3b404e;
  border-radius: 5px;
  background: #3b404e;
  padding-left: 10px;
  padding-top: 4px;
  margin-bottom: 20px;
}

.right-section form {
  border:none !important;
  padding-top: 20px;
}

#amount-area #amount {
  padding-top: 9px;
}

#amount-area label {
  padding-left: 0px;
  margin-top: -27px;
  background: none;
}

#time-area label {
  padding-left: 0px;
  margin-top: -27px;
  background: none;
}

.cursor-pointer {
  border: none !important;
  background: none !important;
  font-size: 24px;
  padding: 0px !important;
  margin: 0px !important;
}

small {
  font-size: 90% !important;
}

#dropdown-profile {
  position: fixed;
  right: 0;
  width: 400px;
  top: 0;
  left: auto;
  height: calc(100% - 64px);
  margin-top: 64px;
  border-radius: 0;
  border: none !important;
  background-color: #2c3143;
  margin-top: 64px;
  width: 300px;
  border-left: 1px solid rgba(96, 125, 139, .2) !important;
  box-shadow: none !important;
}

.dropdown-item {
  border: 1px solid #2c3244;
  background: #1f2334;
}
.dropdown-item:hover {
  background: #009af9;
}

.bg-secondary {
  background-color: rgb(28 32 46) !important;
}

.alert-gray {
  background: #2a3145;
}

.card-history {
  background: none !important;
  border-radius: 0;
  box-shadow: none !important;
}
.card-history:hover {
  background: #404554 !important;
}

.lh-1-2 {
  line-height: 1.2!important;
}

.card-hist-finish {
  border:none !important;
  border-bottom: 1px solid #3b404f !important;
}

#modalBigMenu {
  box-shadow: none;
  background: #252b3b;
  border-right: 1px solid #293340;
}

#modalBigMenu ul li {
  border-bottom: 1px solid #293340;
}

#modalBigMenu ul li a {
  color: #89a0b9 !important;
}

#modalTradeHistory {
  padding: 0 !important;
}


.tabs {
  border-bottom: 1px solid #293340;
}

.bok {
  position: relative;
  padding-left: 0;
  background: #314464;
  color: #ccc;
  border: 2px solid #314464;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

#modalTimeframe {
  bottom: 0;
}

#modalCandleType {
  bottom: 0 !important;
}

#modalTimeframe ul li {
  background: #424b65;
}
#modalTimeframe ul li:hover {
  background: #314464;
}

#modalCandleType ul li {
  background: #424b65;
}

#modalCandleType ul li:hover {
  background: #314464;
}

#modalTradeTools ul li {
  background: #424b65;
}

#modalTradeTools ul li:hover {
  background: #314464;
}

#modalSelectTimeframe ul li {
  background: #252b3b;
}

#modalSelectTimeframe ul li:hover {
  background: #314464;
}

#modalSelectPrice ul li {
  background: #252b3b;
}

#modalSelectPrice ul li:hover {
  background: #314464;
}

.card {
  background: #2a3145;
  border: 1px solid #293340;
}

.alert-secondary {
  background: #252b3b;
  border: 1px solid #252b3b;
  color: #8ea5bf !important;
}

.nav-item .dropdown-menu {
  border-radius: 0px;
  background-color: #23283b;
  border-top: none !important;
  border: 1px solid #28323f !important;
  border-top: none !important;
}

.dropdown-menu[data-bs-popper] {
  top: 114%;
  left: 7px;
}

.dropdown-item-no-bg {
  border:none !important;
}

#modalFloatingButtonTools ul li {
  background: #162032 !important;
  border: 1px solid #44506a;
  color: #7f91a7;
}

#modalFloatingButtonTools ul li:hover {
  background: #26334a !important;
  border: 1px solid #44506a;
}

#modalFloatingButtonTools ul li a{
  color: #7f91a7;
}

#modalFloatingButtonTools ul li a:hover{
  background: none !important;
}

@media only screen and (min-width: 991px) { 
  .mdl { 
    margin-left: 81px !important;
  }

  #modalAssets {
    /* height: auto !important; */
    border-left: 0;
  }

  #modalSelectPrice {
    height: auto !important;
    border-radius: 5px !important;
    background: #3b404e !important;
    margin-top: 95px !important;
    border: none !important;
  }
  
  #modalSelectTimeframe {
    height: auto !important;
    border-radius: 5px !important;
    background: #3b404e !important;
    margin-top: 175px !important;
    border: none !important;
  }
  
}

.bg-dark {
  background-color: #23283b !important;
}

#container {
  /* background-color: #23283b !important; */
  background: none !important;
}

html, body, #app {
  background-color: #23283b !important;
}

.currentActiveTrade span {
  background-color: rgb(69 76 102);
}

.currentActiveTrade span.countdown-item {
  height: 21px;
  line-height: 19px;
  background-color: #1f2334;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 7px;
}

.currentActiveTrade span {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  margin-right: 10px;
  border-radius: 5px;
  /* background: #2a2b30; */
  /* background-color: #333; */
  padding-left: 10px;
  padding-bottom: 2px;
  padding-top: 2px;
}

.middle-section {
  /* background-color: #23283b; */
  background: none !important;
}

.btn-tools {
  border: 1px solid #454c66;
  background: #252b3b;
}

#modalActiveTrade {
  text-shadow: none;
  margin-top: 64px !important;
  background: linear-gradient(to bottom, #1c2233, rgba(35, 40, 59, 0));
}

.border-bottom-grey {
  border-bottom: 1px solid #293340; 
}

.header {
  border-bottom: 1px solid #363c53;
}

.header__menu {
  background-color: #23283b;
}

#signInWithGoogle {
  margin-top: 69px;
}

#modalDrawing {
  background-color: #23283b !important;
  box-shadow: 4px 4px 10px rgb(24 34 56);
}

.left-section-desktop .cild {
  border-radius: 0px!important;
  border: none;
  border-right: 1px solid #3b404f;;
}

.text-grey {
  color: #8d9199 !important;
}

.left-menu-item:hover {
  background: #404554;
}

.f10 {
  font-size: 11px !important;
}

#modalBigMenu {
  width: 330px !important;
  box-shadow: none;
  background: #252b3b;
  border-right: 1px solid #3b404f;
  margin-left: 0 !important;
}

.mdl {
  background: linear-gradient(to bottom, #1e2435, #2f3544) !important;
}

.left-menu-item.active center a {
  color: #fff !important;
}

.title-area {
  font-size: 16px;
}

.header-label {
  background: #434b61;
}

.form-control {
  font-size: 12px;
}

#modalNotification {
  width: 330px;
  padding: 0;
}

#modalToptrader {
  padding: 0;
}

#modalBigMenu ul li a {
  color: #8d9199 !important;
}

#modalBigMenu ul li {
  border-bottom: 1px solid #3b404f;
}

.right-section {
  background: none;
  border-left: none;
  background: linear-gradient(to left, #1c2233, rgba(35, 40, 59, 0));
}

.right-section form {
  padding: 0 !important;
  padding-top: 10px !important;
}

.modal-sign__input.p-10 {
  border: none !important;
}

#modalCalendar {
  max-width: 400px;
  top: auto;
  left: auto;
}

.card-notif {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #3b404f !important;
}

a {
  color: #7cc3fa;
}

.dropdown-menu {
  background: linear-gradient(to bottom, #1e2435, #2f3544) !important;
}

#calendar {
  box-shadow: 1px 6px 20px 5px rgb(59 72 118);
}

.card-hist-unfinish {
  border:none !important;
  border-bottom: 1px solid #2f270e !important;
  /* background-color: #372d11 !important; */
  /* border-top: none !important; */
  background: #46370b !important;
}

/* #khonten {
  background-image: url(https://izytrade.space/images/world_map.svg) !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
} */

.selected-asset:hover {
  background-color: #4e5364;
  border-bottom: 3px solid #eb6e00;
}

@media only screen and (max-width: 991px) { 

  .area-profile {
    margin-top: 0;
  }

  .countdown-item {
    background: #ffc107 !important;
  }
  
  .countdown-item a {
    color: #000 !important;
  }
  .countdown-item a:active {
    color: #000 !important;
  }

  #modalTradeHistory {
    /* width: 100%; */
  }

  .dropdown-menu.show {
    border:none !important;
  }

  .mdl {
    border:none !important;
  }

  #modalAssets{
    padding: 10px;
  }

  .selected-asset {
    border-bottom: none;
  }
  
  .selected-asset:hover {
    border-bottom: none;
    background:none;
  }

  #modalCalendar {
    max-width: 400px;
    top: 323px;
    left: auto;
  }

  #modalTradeTools{
    width: 100%;
  }

  .form-control {
    font-size: 16px;
  }

  .middle-section {
      height: calc(100% - 200px);
  }

  #modalTradeTools {
    box-shadow: 0px 1px 14px 3px #232c46;
  }

  .currentActiveTrade span { 
    border-radius: 10px;
  }
  .form-trade-mobile {
    background: none !important;
  }
  #modalSelectPrice {
    border-radius: 10px !important;
    height :auto !important;
    background: #494e63 !important;
  }
  #modalSelectTimeframe {
    border-radius: 10px !important;
    height :auto !important;
    background: #494e63 !important;
  }
  .mdl {
    margin-top: 48px !important; 
    height: calc(100% - 48px) !important;
  }
  #dropdown-profile {
    /* margin-top: 48px !important;  */
    height: calc(100% - 48px) !important;
    right: 0;
    left: auto !important;
  }

  #btn-sell {
    padding: 10px 20px;
    margin-bottom: 12px;
  }
  
  #btn-buy {
    padding: 10px 20px;
    margin-bottom: 12px;
  }

  

  #modalSelectPrice {
    box-shadow: 0px 1px 14px 3px #23283b !important;
  } 

  .input-group-text {
    line-height: 1.3 !important;
  }

  #time-area #time {
    padding-top: 8px !important;
  }

  .payout-area {
    margin-top: -15px !important;
    margin-bottom: 5px !important;
  }

  #labelSelectedPair {
    /* margin-top: 8px; */
    background: #243862; 
    border-bottom: 3px solid #eb6e00;
  }

  .right-section {
    height: 200px;
    /* border-top: 1px solid #293340; */
    background: linear-gradient(to bottom, #313546, #1e2435) !important;
  }

  .right-section form {
      padding-top: 12px;
  }

  #modalActiveTrade {
    margin-top: 48px !important;
    background: linear-gradient(to bottom, #1c2233, rgba(35, 40, 59, 0));
  }

  .tools-mobile {
    background: none;
  }

  .currentTime {
    background: none;
  }

  #amount-area, #time-area {
    background: #23283b;
  }

  #modalTradeHistory.show {
    border-right: 1px solid #282828 !important;
  }
  

}