.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    width: 100%;
    height: 55px;
  }
  
  body.dark .header-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #16181d;
    padding: 10px 20px;
    border-bottom: 1px solid #2b3543;
    position: fixed;
    width: 100%;
    height: 55px;
  }
  .menu-icons, .timeframes, .tools, .extras {
    display: flex;
    align-items: center;
  }

  .farea{
    display: block;
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
  }
  
  .menu-icons .icon, .tools .icon, .extras .icon {
    font-size: 12px;
    margin-right: 15px;
    cursor: pointer;
  }
  
  .timeframes span {
    margin: 0 5px;
    font-size: 14px;
    cursor: pointer;
  }
  
  .timeframes .active {
    color: blue;
    font-weight: bold;
  }
  
  .tools button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
  }
  
  .tools button:hover {
    background-color: #0056b3;
  }

  .desktop_sidebar {
    width: 3%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    border-right: 1px solid #ddd;
    margin-top: -9px;
    position: fixed;
    /* overflow: auto; */
  }

  body.dark   .desktop_sidebar {
    width: 3%;
    height: 100vh;
    background-color: #16181d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    border-right: 1px solid #2b3543;
    margin-top: -9px;
    position: fixed;
    /* overflow: auto; */
  }
  .gchart-canvas{
    background: transparent !important;
  }
  body.dark .gchart-canvas{
    /* background: #16181d !important; */
  }
  .icon {
    font-size: 20px;
    margin: 10px 0;
    cursor: pointer;
    color: #555;
    text-align: center;
  }
  
  .icon:hover {
    color: #000;
  }
  
  .divider {
    width: 100%;
    height: 1px;
    background-color: #ddd;
    /* margin: 4px 0; */
  }

  body.dark .divider {
    width: 100%;
    height: 1px;
    background-color: #2b3543;
    /* margin: 5px 0; */
  }

  body.dark .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle !important;
    border-top: 1px solid #2b3543;
    font-size: 11px !important;
  }
  .brd{
    border-right: 1px solid #ddd;
  }
  body.dark .brd{
    border-right: 1px solid #2b3543;
  }
  .brl{
    border-left: 1px solid #ddd;
  }
  body.dark .brl{
    border-left: 1px solid #2b3543;
  }
  .brt{
    border-top: 1px solid #ddd;
  }
  body.dark .brt{
    border-top: 1px solid #2b3543;
  }
  .bbt{
    border-bottom: 1px solid #ddd;
  }

  .bbl{
    border-bottom: 1px solid #ddd;
  }
  body.dark .bbl{
    border-bottom: 1px solid #2b3543;
  }
  .quotes-page{
    top: 128px;
    position: fixed;
    right: 0;
    height: 39% !important;
    white-space: nowrap;
    overflow: auto;
    width: 36%;
  }

  .mw200{
    max-width: 200px !important;
  }

  .dgrid{
    display: grid;
  }


  .poa{
    position: absolute;
  }
  .closeaction{
    max-width: 100%;
    font-size: 25px;
    line-height: 39px;
    color: var(--color3);
    cursor: pointer;
  }

  .addeditaction{
    max-width: 100%;
    font-size: 22px;
    line-height: 37px;
    /* color: var(--color3); */
    cursor: pointer;
  }

  .select-element{
    background-color: transparent;
    color: var(--color10);
    border: none;
    outline: none;
    height: 40px;
    padding: 0px 10px;
    font-size: 14px;
    font-weight: 500;
    width: calc(100vw - 40px);
    max-width: 100%;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
  }

  body.dark   .select-element{
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
    height: 40px;
    padding: 0px 10px;
    font-size: 14px;
    font-weight: 500;
    width: calc(100vw - 40px);
    max-width: 100%;
    border-right: 1px solid #2b3543;
    border-bottom: 1px solid #2b3543;
  }

  .modify-element{
    background-color: transparent;
    color: var(--color10);
    border: none;
    outline: none;
    height: 40px;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    width: calc(100vw - 40px);
    max-width: 100%;
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
  }

  body.dark   .modify-element{
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
    height: 40px;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    width: calc(100vw - 40px);
    max-width: 100%;
    border-right: 1px solid #2b3543;
    border-bottom: 1px solid #2b3543;
  }


  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    padding: 8px;
    cursor: pointer;
  }

  .selectoption{
    background: white !important;
    color: #000 !important;
  }

  body.dark .selectoption{
    background: #16181d !important;
    color: white !important;
  }

  .tradepbox{
    line-height: 16px !important;
    border: 1px solid #50a7fb !important;
    background: #50a7fb;
    width: 35px;
    height: 30px !important;
    color: white;

}

.tradepbox:hover{
    background: #9abedf;
    border: 1px solid #9abedf !important;
    color: white !important;
}

.tradenbox{
    line-height: 16px !important;
    border: 1px solid #50a7fb !important;
    background: #50a7fb;
    width: 35px;
    height: 30px !important;
    color: white;

}

.tradenbox:hover{
    background: #9abedf;
    border: 1px solid #9abedf !important;
    color: white !important;
}

.tradeobox{
    line-height: 16px !important;
    border: 1px solid #cc393e !important;
    background: #cc393e;
    width: 35px;
    height: 30px !important;
    color: white;

}
.tradeobox:hover{
    border: 1px solid #d77e81 !important;
    background: #d77e81;
    color: white !important;
}

.tradecbox{
    line-height: 16px !important;
    border: 1px solid grey !important;
    background: grey;
    width: 35px;
    height: 30px !important;
    color: white;
    font-size: 20px !important;
    padding: 6px 5px !important;

}
.tradecbox:hover{
    border: 1px solid rgb(172, 167, 167) !important;
    background: rgb(172, 167, 167);
    color: white !important;
}

.tradeoption{
    opacity: 0;
    display: inline-block;
    position: relative;
    margin: 0px auto;
}

.posoption{
    opacity: 0;
    display: inline-flex;
    position: relative;
    width: 50%;
    margin-left: -15px;
    top: -70px;
}


  .search-element{
    background-color: transparent;
    color: rgba(24, 26, 32, 1);
    border: 1px solid rgba(234, 236, 239, 1);
    outline: none;
    height: 39px;
    font-size: 14px;
    font-weight: 500;
    width: calc(100vw - 0px);
    max-width: 80%;
    float: left;
    padding-left: 10px;
  }

  body.dark   .search-element{
    background-color: transparent;
    color: white;
    border: 1px solid #2b3543;
    outline: none;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    width: calc(100vw - 0px);
    max-width: 80%;
    float: left;
    padding-left: 10px;
  }

  .quotes-text-page{
    top: 55px;
    position: fixed;
    right: 0;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
    width: 36%;
    border-bottom: 1px solid #ddd;
    line-height: 35px;
  }

  body.dark   .quotes-text-page{
    top: 55px;
    position: fixed;
    right: 0;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
    width: 36%;
    border-bottom: 1px solid #2b3543;
    line-height: 35px;
  }

  .quotes-search-page{
    top: 90px;
    position: fixed;
    right: 0;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
    width: 36%;
  }

  .chart-page{
    top: 55px;
    position: fixed;
    left: 55px;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
    width: 60%;
    height: 47%;
    max-height: 71%;
  }

  .trade-page{
    top: 55px;
    position: fixed;
    left: 3%;
    white-space: nowrap;
    width: 22%;
    height: 48%;
    overflow: auto;
  }

  .modify-page{
    top: 55px;
    position: fixed;
    left: 3%;
    white-space: nowrap;
    width: 22%;
    height: 48%;
    overflow: auto;
  }
.loginholder{
    border-radius: 5px;
    width: 400px;
    text-align: center;
    margin: 50px auto;
    background: white;
}

.registerholder{
    border-radius: 5px;
    width: 400px;
    text-align: center;
    margin: 50px auto;
    background: white;
}
  .orderclose-page{
    top: 55px;
    position: fixed;
    left: 3%;
    white-space: nowrap;
    width: 22%;
    height: 48%;
    overflow: auto;
  }

  .bglight{
    background: linear-gradient(217deg, rgb(149 213 255 / 80%), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgb(94 148 148 / 80%), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgb(51 51 104 / 80%), rgba(0, 0, 255, 0) 70.71%);
  }

.chart-active{
    background: #f1f9ff;
}
.mainimg{
    width: 44px !important;
    margin-top: -10px !important;
}
body.dark .chart-active{
    background: #202933;
}

  .chartjs-render-monitor{
    width: 100% !important;
  }

  .w10{
    width: 10% !important;
  }
  .w15{
    width: 15% !important;
  }
  .w21{
    width: 21% !important;
  }
  .w40{
    width: 50%;
  }
  .w75{
    width: 75% !important;
  }
  .w50{
    width: 50% !important;
  }
  .w39{
    width: 39% !important;
  }
  .w80{
    width: 80% !important;
  }
  .w85{
    width: 85% !important;
  }
  .w100{
    width: 100% !important;
  }
  .l21{
    left: 25% !important;
  }

  .mh22{
    max-height: 22% !important;
  }

  .h64{
    height: 67%;
  }

  .h55{
    height: 59% !important;
  }

  .qty-search{
    width: 20%;
    margin: 10px;
    float: right;
  }
  .comsec{
    height: 100vh;
    overflow: auto;
  }
  .v100p{
    width: 100px;
  }

  .logoutbtn{
    border: 1px solid red !important;
    color: red;
  }

  .logoutbtn:hover{
    color: red !important;
  }

  .table{
    border: 1px solid #ddd;
  }
  body.dark .table{
    border: 1px solid #2b3543;
  }

  .overscroll{
    overflow: scroll;
  }
  .table>thead>tr>th{
    border-bottom: 1px solid #ddd !important;
    font-weight: 500 !important;
    text-align: center;
  }

  body.dark .table>thead>tr>th{
    border-bottom: 1px solid #2b3543 !important;
    font-weight: 500 !important;
    text-align: center;
  }

  .blocked-data .table>tbody>tr>td, .blocked-data .table>tbody>tr>th, .blocked-data .table>thead>tr>td, .blocked-data .table>thead>tr>th{

    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    text-align: left !important;
    padding-left: 20px !important;
  }

  .quantity-data .table>tbody>tr>td, .quantity-data .table>tbody>tr>th, .quantity-data .table>thead>tr>td, .quantity-data .table>thead>tr>th{

    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    text-align: left !important;
    padding-left: 20px !important;
  }

  .ledger-data .table>tbody>tr>td, .ledger-data .table>tbody>tr>th, .ledger-data .table>thead>tr>td, .ledger-data .table>thead>tr>th{

    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    text-align: left !important;
    padding-left: 20px !important;
  }

  
.showMSG-holder{
  width: 30vw;
  margin: 15vh auto;
  border-radius: 10px;
  padding: 20px;
}
.msg-title{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  padding: 5px 0px;
}

.msg-message{
  text-align: center;
  font-size: 14px;
  padding: 5px 0px;
}

.msg-image{
  text-align: center;
  margin: 5px 0px;
}

body.light .showMSG-holder{
  background-color: var(--color1);
  color: var(--color2);
}

body.dark .showMSG-holder{
  background-color: var(--color10);
  color: var(--color1);
}



  .profile-holder{
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 85;
    display: none;
}

.password-holder{
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 85;
    display: none;
}

.flashProfile-holder{
    width: 30vw;
    margin: 20vh auto;
    border-radius: 5px;
    padding: 20px;
    background: #ebeeee;
}

body.dark .flashProfile-holder{
    width: 30vw;
    margin: 20vh auto;
    border-radius: 5px;
    padding: 20px;
    background: #424345;
}

.pay-holder{
    width: 50vw;
    margin: 0vh auto;
    border-radius: 5px;
    padding: 20px;
    background: #ebeeee;
}

body.dark .pay-holder{
    width: 50vw;
    margin: 0vh auto;
    border-radius: 5px;
    padding: 20px;
    background: #424345;
}

.grid{
    display: grid;
}

.side-page:hover{
    color: var(--color3);
}


.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle !important;
    border-top: 1px solid #ddd;
    font-size: 11px !important;
}

  .hover-title {
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    font-size: 10px;
    border-radius: 5px;
    left: 80%;
    white-space: nowrap;
    padding-bottom: 8px;
    z-index: 999999;
  }


  .dropdown {
    display: none;
    position: fixed !important;
    top: 55px;
    right: 5px;
    width: 400px;
    height: 500px;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: auto;
    
}

body.dark .dropdown{
  background-color: #333;
}

/* body.dark .dropdown {
  display: none;
  position: fixed !important;
  top: 55px;
  right: 5px;
  width: 400px;
  height: 500px;
  background: black;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: auto;
  
} */

.dropdown.active {
    display: block;
}

.dropdown h4 {
    margin: 0;
    padding: 10px;
    background: #007bff;
    color: white;
    text-align: center;
}

.notifications {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notifications li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.notifications li:last-child {
    border-bottom: none;
}

.notifications li:hover {
    background: #f1f1f1;
}


.bgmsg {
  background: lightgoldenrodyellow;
}

body.dark .bgmsg {
  background: #5c5c5b;
}

.msgunread {
  top: 1px;
  position: relative;
}
.notiImg {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-left: 5px;
  background: #f1f3f2;
}
.top17 {
  top: 17px;
}

.pos {
  position: absolute;
}
.top13 {
  top: 15px;
}
.single-trade-box .fs5 {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
}
.unread {
  padding: 1px 5px;
  background: black;
  color: white;
  border-radius: 15px;
}