@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
:root{
    /*--primary-color : #191F2C;*/
    /*--secondary-color : #323948;*/
    --primary-color : #031118;
    --secondary-color : #061f2b;
}
/*<style>*/
  /*@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');*/ 
  /*@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&family=Roboto&display=swap'); */
body{
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background-color: var(--primary-color);
    /*font-family: 'Barlow', sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    /*font-family: 'Poppins', sans-serif;*/
    /*font-family: 'Roboto', sans-serif;*/
}
/*toast style start*/
#toast-container{ 
    margin-bottom: 10px;
}
.toast-title{
    font-size: 12px!important;
}
.toast{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 0px!important;
    padding-left: 52px!important;
    padding-right: 20px!important;
    height: 50px;
    width: 250px!important;
}
.toast-close-button{
    position: unset!important;
}
/*toast style end*/
.container-wrapper{
    display: flex;
    flex-direction: column;
}
.content-wrapper{
    width: 100%;
    display: flex;
}
.clr-white{
    color: #fff!important;
}
.flex-center{
    align-items: center;
    display: flex; 
    justify-content: center;
}
.company-info p{
    white-space: pre-wrap;
}
.d-flex{
    display: flex;
}
.justify-center{
    justify-content: center;
}
.justify-around{
    justify-content: space-around;
}
.justify-end{
    justify-content: end;
}
.align-center{
    align-items: center;
}

/* Top Bar Start */
.top-navication{ 
    height: 8vh;
    width: 100%;
    display: flex;
}

/*Responseive Start*/
@media only screen and (max-width: 800px) {
    #paymentModal .modal{ 
      width: auto!important;
    }
  .top-navication .company-info{
    height: 50px;
  }
  .content-wrapper, .top-navication{
    flex-direction: column; 
    gap: 2px;
  }
  .top-navication{ 
    height: 147px;
  }
  .nav-menu{
    flex-wrap: wrap;
  }
  .sidebar, .company-info, .nav-menu{ 
    width: 100% !important;
  }
  .nav-menu{ 
    align-items: start!important;
    gap: 5px;
  }
  .nav-menu .switches-container{
      width: 50% !important;
  }
  .switches-container, .app-buttons{
      margin: 0px !important;
      width: 40% !important;
      justify-content: space-between;
  }
  .v29{
     overflow-x: scroll;
  }
  .footer > div{
    min-width: 1300px!important;
  }
  .nav-menu > ul{
    justify-content: center;
    width: 100%;
  } 
  .statistics button{
      width: 50%!important;
  }
  .paymentInfoContainer img{
        width: 25%; 
        margin: 6px 0px;
  }
  
}
/*Responseive End*/

.company-info{
    width: 25%;
    height: 100%;
    /*background-color: var(--secondary-color);*/
    background-color: var(--primary-color);
    display: flex; 
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px;
    box-sizing: border-box;
}
.company-info img{
    width: 30%; 
}
.Demo{
    padding: 7px 7px;
    font-size: 10px;
    border-radius: 0.125rem;
    background-color: orange!important;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}  
.live{
    padding: 7px 7px;
    font-size: 10px;
    border-radius: 0.125rem;
    background-color: #4BB543;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}
.nav-menu{
    display: flex;
    align-items: center;
    width: 75%;
    justify-content: space-between;
    background: var(--secondary-color); 
}
.statistics{
    padding: 0px 15px;
    list-style: none;
    margin: 0px;
    display: flex; 
}
.statistics li{
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
}
.statistics .title{
    color: #979fb5;
    font-size: 9px;
}
.statistics .value{
    color: #56b786;
    font-size: 16px;
}
.statistics .indicator{
    color: #56b786;
    font-size: 10px;
}
.app-buttons{
    display: flex;
    padding: 0px 15px;
}
.app-buttons button{ 
    width: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border: none;
    padding: 14px 10px;
    border-radius: 2px;
}
.app-buttons .withdraw{ 
    background-color: #0072fd;
    margin-right: 10px;
}
.app-buttons .deposit{ 
    background-color: #eb4e5c;
    margin-right: 10px;
}
/* Top Bar End */
/* Side Bar Start */
.sidebar{
    width: 25%;
    background-color: var(--primary-color);
}
.sidebar p.head{
    color: #fff;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    padding: 8px 10px;
    height: 13px;
    margin-bottom: 3px;
    margin-top: 6px;
    cursor: pointer;
    background: var(--secondary-color);
}
.sidebar .symbol{
    display: flex;
    justify-content: space-between;
    background-color: var(--secondary-color);
    margin-top: 6px;
    align-items: center;
}
.sidebar .symbols-list, .sidebar .favorite-list {
    height: calc(59vh - 40px);
    padding: 0 8px;
    overflow: auto; 
}
.sidebar .symbols-list{ 
    display: none;
}
.sidebar .symbol p{ 
    font-size: 12px!important;
    font-weight: bold; 
    margin: 0px;
}
.sidebar .symbol p.name{
    color: #cdcdcd;
    margin: 8px 0px; 
} 
.sidebar .symbol p.bid{
    color: #aeb133; 
} 
.sidebar .symbol p.offer{
    color: #ff4857; 
} 
.sidebar .symbol p.spread{
    color: #cdcdcd; 
}  
/* Side Bar End */
/* Content Start */
.content{
    width: 75%;
    height: 60vh;
    overflow: auto;
    background-color: var(--primary-color);
    /* border: 1px solid var(--secondary-color); */
}
.sd-list{
    height: 30vh;
    background-color: #061f2b;
    width: calc(25% - 10px);
    margin: 5px;
    position: relative;
    margin-bottom: 30px;
    margin-left: 0px;
    margin-right: 10px;
}
.remove-trade {
    position: relative; 
    right: 5px;
    margin: 0px;
    border: 1px solid #464c58;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 48%);
    height: 16px;
    padding: 0px 5px;
    cursor: pointer;
    line-height: 23px;
}
.remove-trade:hover {
    background: #000!important;
}
.remove-trade i{
    font-size: 13px;
    color: #fdfefd;
}
.sd-name{
    /*padding: 6px 0px;*/
    margin: 0px; 
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    height: 3vh;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sd-buy-sell{
    position: relative;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 48%);
}
.spread-point{
    position: absolute; 
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    outline: none;
    padding: 0px;
    margin: 0px;
    background: #003954;
    width: 13%;
    height: 3vh;
    font-size: 12px;
    line-height: 3vh;
    text-align: center;
    border: 1px solid #ffffff24;
    /*border-top: none!important;*/
    /*box-sizing: border-box;*/
    color: #cdcdcd;
    font-weight: bold;
}
.sd-buy-sell button{
    width: 50%;
    line-height: 25px;
    height: 8vh;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    padding: 0px 10px;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0px;
}
.sd-buy-sell button .lastsmall{
    margin-left: 2px;
}
.sd-buy-sell button.buy{
    background-color: #003f5b;
    color: #aeb133;
    text-align: right;
    border-left: 1px solid #031118;
}
.sd-buy-sell button.sell{
    background-color: #252f47;
    color: #ff4857;
    text-align: left;
    border-right: 1px solid #031118;
}
.sd-bs{
    padding-top: 3px;
    font-weight: 500;
}
.sd-bs .bidoffer{
    width: 50%;
    padding: 3px 0px;
    margin: 0px;
    text-align: center;
    font-size: 12px;
}

.sd-bs .bidoffer:nth-child(1){
    color: #fff;
}
.sd-bs .bidoffer:nth-child(2){
    color: #fff;
}
.sd-history{
    height: 17vh;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
/*    justify-content: space-around;*/
}
.sd-history-title p{ 
    color: #fdfefd;
    background: #032839;
    font-size: 12px;
    width: 25%;
    box-sizing: border-box;
    margin: 0px;
    padding: 7px 0px;
    font-weight: 500;
    
}
.sd-history-title p:nth-child(1),.sd-history-list p:nth-child(1){
    padding-left: 10px;
}
.sd-history-title p:nth-child(2), .sd-history-title p:nth-child(3),.sd-history-list p:nth-child(2), .sd-history-list p:nth-child(3){
    /*padding-left: 4px;*/
    text-align: right;
}
.sd-history-title p:nth-child(4),.sd-history-list p:nth-child(4){
    text-align: right;
    padding-right: 10px;
}
.sd-history-product .sd-history-list:nth-child(2), .sd-history-product .sd-history-list:nth-child(4){
    background: #061f2b;
}
.sd-history-list{
    height: 3.4vh; 
    align-items: center;
}
.sd-history-list p{
    width: 25%;
    /*line-height: 22px; */
    margin: 0px; 
    font-size: 12px;
    color: #fdfefd;
    box-sizing: border-box;
} 
.symbol-details{
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}
.search-items{
    padding: 4px;
}
.symbols-list-items .symbol.search-items p{
    padding: 4px!important;
    color: #cdcdcd!important;
    font-weight: 500!important;
    font-size: 12px!important;
}
.price-title{
    display: block;
    font-weight: 100;
    font-size: 12px;
}
.one-click-actions{
    display: flex;
}
.one-click-actions .market,.one-click-actions .lot,.one-click-actions .price{
    height:4vh;
    width: 33%;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: none;
    margin-top: 4px;
    box-sizing: border-box;
    background: #032839;
    color: #fff;
    font-size: 12px;
}
.one-click-actions .market{ 
}
.one-click-actions .lot{ 
    /*border-left: 4px solid #002c41;*/
    /*border-right: 4px solid #002c41;*/
    border: 1px solid #003f5b;
    width: 34%!important;
    text-align: center;
}
.one-click-actions .price{ 
    text-align: center;
}
.upicons,.downicons{
    /*display: none!important;*/
    font-size: 10px!important;
}
.upicons{
    color: #3cb786;
}
.downicons{
    color: #eb4e5c;
}
.up .upicons, .down .downicons{
    display: inline-block!important;
} 
/* Content End */
/* Footer Start */
.footer{
    background-color: var(--primary-color);
    width: 100%;
    position: relative; 
}
.footer-head{
    width: 100%;
    display: flex;
}
.footer ul{
    list-style: none;
    width: 50%;
    padding: 0px;
    margin-top: 1px;
    height: 36px;
    margin-bottom: 3px;
    align-items: center;
    border-top: 1px solid #0f3f57;
}
.footer-head ul li{
    width: 25%;
    color: #fff;
    border-bottom: 1px solid #0f3f57;
    text-align: center;
    padding-bottom: 5px;
    font-size: 15px;
}
.footer-head ul li.active{
    border-bottom: 2px solid #0072fd;
} 
.moreDetails{
    width: 40%;
    background: #061f2b70;
    /*background: #061f2b;*/
    box-sizing: border-box;
    height: 33px;
    display: flex;
    align-items: center;
}
.moreDetails .positions-tab{
    width: 100%;
}
.moreDetails p {
    color: #fff;
    font-size: 12px;
}
.moreDetails p .details-value{
    color: #56b786;
}
.open-positions-head p, .pending-positions-head p,  .closed-positions-head p{
    color: #979FB5;
    margin: 0px;
    font-size: 12px;
}

.open-positions-head, .pending-positions-head, .closed-positions-head{
    display: grid;
    /*grid-template-columns: 7% 6% 11% 11% 6% 9% 9% 7% 7% 6% 6% 7% 8%;*/
    grid-template-columns: 6% 5% 6% 11% 11% 5% 9% 9% 6% 6% 6% 6% 6% 8%; /* ATS250613010 AA */
    margin-bottom: 5px;
} 
.open-positions-values, .pending-positions-values, .closed-positions-values{
    display: grid;
    /*grid-template-columns: 7% 6% 11% 11% 6% 9% 9% 7% 7% 6% 6% 7% 8%;*/
    grid-template-columns: 6% 5% 6% 11% 11% 5% 9% 9% 6% 6% 6% 6% 6% 8%; /* ATS250613010 AA */
    background-color: var(--secondary-color);
    margin-top: 3px;
}
.open-positions-values p, .open-positions-details p, .pending-positions-values p, .pending-positions-details p , .closed-positions-values p, .closed-positions-details p {
    color: #fff;
    font-size: 12px;
    padding: 0px;
    margin: 7px 0px;
}
.v29 .open-positions-body, .v29 .pending-positions-body, .v29 .closed-positions-body{
    height: calc(30vh - 63px);
    overflow: auto;
}
.v91 .open-positions-body, .v91 .pending-positions-body, .v91 .closed-positions-body{
    height: calc(91vh - 85px);
    overflow: auto;
}
.open-positions-details, .pending-positions-details, .closed-positions-details{
    display: grid;
    /*grid-template-columns: 7% 6% 11% 11% 6% 9% 9% 7% 7% 6% 6% 7% 8%;*/
    grid-template-columns: 6% 5% 6% 11% 11% 5% 9% 9% 6% 6% 6% 6% 6% 8%; /* ATS250613010 AA */
    background-color: #061f2b52;
    margin-top: 3px; 
}
.pending-positions-details, .pending-positions-head , .pending-positions-values{
    /*grid-template-columns: 10% 10% 15% 15% 9% 9% 9% 7% 7% 9%!important; */
    grid-template-columns: 10% 9% 9% 14% 14% 8% 8% 8% 6% 6% 8%!important; /* ATS250613010 AA */
}
/* Footer End */
/* Hide scrollbar Start*/
body {
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
    overflow-y: scroll;
    -ms-overflow-style: none;
}  
body::-webkit-scrollbar-thumb {
    display: none;
}
 
body::-webkit-scrollbar-track {
    display: none!important;
}
::-webkit-scrollbar {
    width: 0px;
} 
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
} 
::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
/* Hide scrollbar END*/
/*Side bar live price start*/
.w-50{
    width: 50%;
}
.sidebar .head.active{
    background: #003f5b;
}
.sidebar .d-flex{
    padding: 0px 8px;
}
.search-items p:first-child{
    padding-left: 14px;
}
.search-items p:last-child{
    text-align: right;
    padding-right: 14px;
}
.search-items p:last-child span{
    background: var(--primary-color);
    color: #56b786;
    padding: 5px 10px;
    cursor: pointer;
}
.search-items p:last-child span:hover{
    background: #000;
}
#symbol-input{
    width: 100%;
    border: 1px solid var(--secondary-color);
    background: var(--primary-color);
    padding: 4px 12px;
    margin-bottom: 5px;
    margin-top: 6px;
    outline: none;
    color: white;
    box-sizing: border-box;
}
#symbol-input:focus{
    outline: 1px solid #0072fd;
}
.symbol p.spread{
    width: 10%!important;
    padding-right: 15px;
    text-align: right;
}
.symbol p:first-child{
    padding-left: 15px;
}
.symbol p{
    width: 30%;
}
.w33{
    width: 32%; 
}
.w33f{
    width: 33%; 
}
.sell-element{
    background: #eb4e5c;
    border: 1px solid #eb4e5c;
}
.buy-element{
    background: #0072fd;
    border: 1px solid #0072fd;
}
.sell-element, .buy-element{
    height: 50px;
    color: #fff;
    border-radius: 5px;
    text-align: left;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 48%);
    cursor: pointer;
    font-weight: bold;
}
.input-element{
    height: 50px;
    border: 1px solid #464c58;
    border-radius: 5px;
    overflow: hidden;
    background: var(--primary-color);
    box-shadow: 0px 0px 20px rgb(0 0 0 / 48%);
    border-bottom: none;
}

.sell-element p, .buy-element p{
    margin: 0px; 
    font-size: 14px;
}

.fav-element{
    background: var(--secondary-color);
    display: none;
}
.fav-element .flex-container{
    padding: 5px 10px 9px 10px;
    justify-content:space-between;
}
.input-element p{ 
    margin: 0px;
    text-align: center;
    font-size: 12px;
    padding: 2px 0px;
    color: #717d96;
}
.input-element input{
    width: 100%;
    outline: none;
    border: none;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: var(--primary-color);
    padding: 0px;
}
.p-0{
    padding: 0px!important;
}
.calculation-button button{
    width: 50%;
    height: 14px;
    line-height: 11px;
    color: #fff;
    background: var(--secondary-color);
    outline: none;
    font-size: 12px;
    border: 1px solid #464c58ab;
    font-weight: bold;
    cursor: pointer;
}
/*Side bar live price end*/
/*Button Price start*/
.buy{
    background: #0072fd;
    color: #fff;
}
.sell{
    background: #eb4e5c;
    color: #fff;
}
.buy, .sell{  
    text-align: center;
    display: inline-block;
    width: 30px; 
    border-radius: 3px;
}
.positive{
    color: #0072fd!important;
}
.negative{
    color: #eb4e5c!important;
}
/*Button Price end*/
/*Footer Start*/
.footerTab{
    cursor: pointer; 
}
/*Footer End*/
/*Modal Popup CSS Start*/

.myorder-btn {
  padding: 12px 16px;
  color: #fff;
  background-color: #d02b20;
  outline: 0;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
}
.myorder-btn:hover {
  background-color: #b72b1a;
}
/* Modal */
.modal-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center; 
  transition: 0.3s visibility ease-in, opacity 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
}
.modal-container.show {
  visibility: visible;
  opacity: 1;
}
.modal {
  width: 412px;
  min-height: 275px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(34, 34, 53, 0.1);
}
header {  
  border-bottom: 2px solid #eaeaef;
}
 
/* Main */
.modal-main {
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 2px solid #eaeaef;
} 
.text-wrapper span {
  font-weight: 400;
  color: #32324d;
}
/* Footer */
footer {
  padding: 17px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.order-btn {
  padding: 10px 68px;
  background-color: #fff;
  border-radius: 4px;
  outline: 0;
  cursor: pointer;
}
.order-btn-cancel {
  color: #32324d;
  font-weight: 700;
  border: 1px solid #dcdce4;
  background-color: #fff;
}
.order-btn-cancel:hover {
  box-shadow: rgba(50, 50, 77, 0.1) 0px 2px 8px 0px;
}
.order-btn-confirm, .order-modify-confirm {
  color: #fff;
  font-weight: 700;
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
}
.order-btn-confirm:hover, .order-modify-confirm:hover {
  box-shadow: rgba(208, 43, 32, 0.1) 0px 2px 8px 0px;
}
/* Media Query */
@media only screen and (max-width: 600px) {
  .modal {
    width: 362px;
  }
  .order-btn {
    padding: 10px 58px;
  }
  #paymentModal .modal{ 
      width: auto!important;
  }
}
.favsymbol{
    cursor: pointer;
/*    background: linear-gradient(to left, var(--secondary-color) 50%, #393d46 50%) right;*/
/*    background-size: 200%;*/
/*    transition: .5s ease-out;*/
}
.favsymbol.active .dynamic-element{
    display: none;
}
.dynamic-button{
    width: 23%;
    font-size: 10px;
    color: #fff;
    border: 1px solid #464c58;
    height: 12px;
    padding: 4px 3px 4px 3px;
    text-align: center;
    border-radius: 4px;
    display: none;
}
.dynamic-button:hover{
   background: #000; 
}
.favsymbol.active  .dynamic-button{
    display: block;
    height: 10px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 48%);
    cursor: pointer!important;
}
.favsymbol.active{
    padding: 0px 9px;
}
.favsymbol.active .name{
    padding-left: 6px!important;
    width: 25%!important;
}
.deletefav{
    width: 8%;
    padding: 2px 0px 5px 0px; 
    color: #eb4e5c;
}
.deletefav i{
    font-size: 13px;
} 
.dynamic-button.closeFavBtn{
    width: 5%;
}
.dynamic-button.closeFavBtn i{
    font-size: 10px;
}
/*Modal Popup CSS END*/ 
/*Main ONE CLICK TRADE START*/
.one-click-empty-container, .empty-fav-list{
    width: 100%;
    height: 60vh; 
    display: flex;
    justify-content: center;
    background: var(--secondary-color);
    align-items: center;
    flex-direction: column;
}
.one-click-empty-container img, .empty-fav-list img{
    width: 70px;
} 
.one-click-empty-container p, .empty-fav-list p{
    color: #838a99;
    font-weight: 500;
    font-size: 14px;
}
.empty-fav-list{ 
    height: calc(60vh - 30px);
}
.content .askLast, .content .offerLast{
    font-size: 36px;
    font-weight: bold;
    margin-left: 1px;
    letter-spacing: 0px!important;
}
.one-click-trade.buy, .one-click-trade.sell{
    border-radius: 0px!important;
}
/*Main ONE CLICK TRADE END*/
/*Order Modal Start*/
.toggle {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 90%;
  height: 35px;
  color: white;
  outline: 0;
  text-decoration: none;
  border-radius: 100px;
  border: 2px solid #546E7A;
  background-color: #263238;
  transition: all 500ms;
}
.toggle:active {
  background-color: #1c2429;
}
.toggle:hover:not(.toggle--moving):after {
  background-color: #455A64;
}
.toggle:after {
  display: block;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  color: white;
  background-color: #37474F;
  border: 2px solid;
  transition: all 500ms;
}

.toggle--on:after {
  content: "BUY";
  border-radius: 50px 5px 5px 50px;
  color: #66BB6A;
}

.toggle--off:after {
  content: "SELL";
  border-radius: 5px 50px 50px 5px;
  transform: translate(89%, 0);
  color: #f44336;
}

.toggle--moving {
  background-color: #1c2429;
}
.toggle--moving:after {
  color: transparent;
  border-color: #435862;
  background-color: #222c31;
  transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
}

#orderModal .tap{
    width: 33%;
    text-align: center;
    cursor: pointer;
    margin: 10px 0px;
}
#orderModal .tap.active{
    font-weight: bold;
    position: relative;
}
.symbol-details .s_status{
    width: 10%;
    text-align: center;
    margin: 0px;
    cursor: pointer;
}
.symbol-details .s_buysell, .symbol-details .s_name, .symbol-details .s_price{
    width: 30%;
    margin: 0px;
}
#orderModal .symbol-details{
    justify-content: center;
    align-items: center;
    background: #394050;
    color: #fff;
    padding: 10px 12px;
    border-radius: 7px;
}
#orderModal .tap.active::after{
    content: '';
    border-bottom: 4px solid #394050;
    display: inline-block;
    width: 100%;
    position: absolute;
    bottom: -11px;
    left: 0px;
}
.w50{
    width: 50%;
} 
.modal-section, .stop-element{ 
    display: none; 
} 
.modal-section.active, .stop-element.active{
    display: block; 
}
/*Order Modal End*/
/* Order Input Container */
.order-input-container {
  position: relative;
  margin: 10px;
} 
.order-input-container input {
    border: 0;
    border-bottom: 2px solid var(--secondary-color);
    outline: none;
    transition: .2s ease-in-out;
    box-sizing: border-box;
    background: #efefef;
    text-indent: 10px;
}

.order-input-container label {
  top: 0;
  left: 10px; right: 0;
  color: #616161;
  display: flex;
  align-items: center;
  position: absolute;
  font-size: 1rem;
  cursor: text;
  transition: .2s ease-in-out;
  box-sizing: border-box;
}

.order-input-container input,
.order-input-container label {
  width: 100%;
  height: 40px;
  font-size: 14px;
}

/* Interation */
.order-input-container input:valid,
.order-input-container input:focus {
  border-bottom: 2px solid #56b786;  
}

.order-input-container input:valid + label,
.order-input-container input:focus + label {
    color: #56b786;
    font-size: 14px;
    top: -27px;
    left: 0px;
    pointer-events: none;
}
.select-market{
    border-radius: 15px;
    padding: 5px 10px;
    background: #394050;
    color: #fff;
    margin-bottom: 10px;
}
.text-center{
    text-align: center!important;
}
.seprator{
    border: 1px solid #efefef;
    display: none;
}
.reqmargin-container{
    font-size: 12px;
    margin: 4px 10px 0px 10px;
    font-weight: 500; 
    padding: 5px; 
}
.reqmargin{
    font-weight: 600!important; 
}
.toast {
    opacity: 1 !important;
}
/* Order Input Container End */
/* Top Nav Profile Start */
.profile-container{
    display: inline!important;
    position: relative;
}
.profile-container .profile{
    background: #003f5b;
    width: 50px;
    padding: 8px;
    cursor: pointer;
    border: 1px solid #003f5b;
}
.profile-container .profile:hover{ 
    background: var(--primary-color);
    border: 1px solid #003f5b;
}
.profile-menu{
    position: absolute;
    color: white;
    width: 100px;
    right: 0px;
    padding: 10px;
    z-index: 1;
    background: #313746;
    top: 54px;
    border: 1px solid #706f6f;
    display: none;
    border-radius: 2px;
}
.profile-menu:hover{
    background: var(--primary-color);
}
.profile-link{
    display: block;
}
.profile-link i, .profile-link{
    font-size: 12px;
    cursor: pointer;
}
/* Top Nav Profile End */
/*Loader Start*/
.loader{
    background: var(--primary-color); 
    position: fixed;
    z-index: 5;
    top: 0;
    right: 0; 
    left: 0;
}
.loader-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.ml-loader {
  position: relative;
  width: 70px;
  height: 70px;
}

.ml-loader div {
  -webkit-transform-origin: 32px 32px;
  -ms-transform-origin: 32px 32px;
  transform-origin: 32px 32px;
  -webkit-animation: 1.2s opaque ease-in-out infinite both;
  animation: 1.2s opaque ease-in-out infinite both;
}

@-webkit-keyframes opaque {
  0% {
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1;
  }
}

@keyframes opaque {
  0% {
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.1;
  }
}

.ml-loader div::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 30px;
  width: 5px;
  height: 18px;
  border-radius: 10px;
  background-color: #fff;
}

.ml-loader div:nth-child(1) {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.ml-loader div:nth-child(2) {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.ml-loader div:nth-child(3) {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.ml-loader div:nth-child(4) {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.ml-loader div:nth-child(5) {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.ml-loader div:nth-child(6) {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.ml-loader div:nth-child(7) {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.ml-loader div:nth-child(8) {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.ml-loader div:nth-child(9) {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.ml-loader div:nth-child(10) {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.ml-loader div:nth-child(11) {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.ml-loader div:nth-child(12) {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
.ml-loader div:nth-child(13) {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*Loader End*/
/*Drag Start*/
.child {
  cursor: grab;
  transition: transform 0.3s ease-in-out;
} 
.dragging {
  opacity: 0.5;
} 
.dragover .favsymbol, .dragover{
   background: var(--primary-color)!important;
}
/*Drag End*/
/*Close order UI  start*/
.close_order, .close_pending_order{ 
    margin: 0px!important;
    cursor: pointer;
}
.close_order i{
    font-size: 10px; 
    background: #eb4e5c;
    color: #fff;
    border-radius: 10px;
    padding: 4px; 
}
.close_pending_order i{
    font-size: 10px; 
    background: #eb4e5c;
    color: #fff;
    border-radius: 10px;
    padding: 4px;
    margin-top: 6px;
}
/*Close order UI  end*/
/*progress Bar CSS Start*/

.progress-container {
    width: 30%;
    box-shadow: 0 4px 5px rgb(0, 0, 0, 0.1);
    margin: 0px 4px;
}
.progress-container, .progress {
    background-color: var(--primary-color);
    border-radius: 2px;
    position: relative;
    height: 19px;
    color: #fff;
} 
.progress-bid{
    position: absolute;
    right: 0;
    text-align: right;
}
.progress {
  transition: width .4s linear;
  box-sizing: border-box;
  line-height: 20px;
  /*background: #56b786;*/
} 
.progress.green{ 
  background-color: #0072fd; 
}
.progress.red{ 
  background-color: #eb4e5c; 
}
.sd-history-list .bid-value{
    position: absolute;
    right: 3px;
    font-size: 12px;
    top: 3px; 
}
.sd-history-list .offer-value{
    position: absolute;
    left: 3px;
    font-size: 12px;
    top: 3px; 
}
/*progress Bar CSS End*/
.footer-statistics{
    display: flex;
    justify-content: space-around;
    background: #061f2b;
    height: 3vh;
    line-height: 3vh; 
    border-top: 1px solid #003f5b;
    border-bottom: 1px solid #003f5b;
    box-sizing: border-box;
    z-index: 2;
    position: absolute;
    bottom: -6px;
    width: 100%;
}
.footer-statistics p{
    color: #fff;
    margin: 0px;
    font-size: 13px;
}
.footer-statistics-value, .footer-statistics .unit{
    color: #56b786;
}
#one-click-parent{
    padding-bottom: 4px;
}
.statistics button{ 
    width: 125px;
    color: #fff;
    border: none;
    padding: 14px 10px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    background: #061f2b;
    cursor: pointer;
} 
.statistics button:hover{ 
    background: #003f5b;
}
.statistics button.active{ 
    background: #003f5b;
}
.v59{ 
    height: 59vh;
}
.v29{ 
    height: 32vh;
}
.v91{ 
    height: 91vh;
} 
.v0{ 
    height: 0vh;
}
#userinfo{
    background: #003f5b;
    padding: 6px 11px;
    font-size: 12px;
    border-radius: 3px;
    text-transform: uppercase;
}
/* Finance Head */
.open-positions-head p:nth-child(1), .open-positions-values p:nth-child(1), .open-positions-details p:nth-child(1), 
.pending-positions-head p:nth-child(1), .pending-positions-values p:nth-child(1), .pending-positions-details p:nth-child(1),
.closed-positions-head p:nth-child(1), .closed-positions-values p:nth-child(1), .closed-positions-details p:nth-child(1),
.finance-head p:nth-child(1), .finance-body-value p:nth-child(1),
.commission-head p:nth-child(1), .commission-body-value p:nth-child(1),
.transaction-head p:nth-child(1), .transaction-body-value p:nth-child(1){
    padding-left: 10px;
}
.show-list, .pending-positions, .finance, .commission, .closed-positions, .transaction{
    display: none;
} 
.show-list.active{
    display: block!important;
} 
.finance-head, .finance-body-value{
    /*grid-template-columns: 15% 15% 20% 15% 15% 20%;*/
    grid-template-columns: 12% 12% 12% 17% 15% 15% 17%; /* ATS250613010 AA */
}
.transaction-head, .transaction-body-value{
    grid-template-columns: 25% 25% 25% 25%;
}
.commission-head, .commission-body-value{
    /*grid-template-columns: 15% 15% 15% 15% 15% 25%;*/
    grid-template-columns: 12% 12% 12% 12% 12% 15% 25%; /* ATS250613010 AA */
}
.finance-head, .transaction-head{
    display: grid;
    margin-bottom: 5px;
}
.commission-head{
    display: grid;
}
.finance-head p, .commission-head p, .transaction-head p{
    color: #979FB5;
    margin: 0px;
    font-size: 12px;
    text-transform: uppercase;
}
.v29 .finance-body, .v29 .commission-body, .v29 .transaction-body{
    height: calc(30vh - 63px);
    overflow: auto;
}
.v91 .finance-body, .v91 .commission-body, .v91 .transaction-body{
    height: calc(91vh - 85px);
    overflow: auto;
}
.finance-body-value, .commission-body-value, .transaction-body-value{
    display: grid; 
    background-color: var(--secondary-color);
    margin-top: 3px;
}
.finance-body-value p, .commission-body-value p, .transaction-body-value p{
    color: #fff;
    font-size: 12px;
    padding: 0px;
    margin: 7px 0px;
}
.commission-time{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 7px;
}
.commission-duration{
    background: #003f5b;
    color: white;
    border: 1px solid #003f5b;
    font-size: 12px;
    margin: 0px;
    padding: 2px 4px;
    outline: none;
}
.order-symbol-name{
    display: flex;
    align-items: center;
    margin: 2px!important;
}
.active .more, .less{
    display: none!important;
}
.active .less, .more{
    display: block!important;
}
/* Finance Head End*/
/*Button Effect*/
.animatic-span{
    display: none;
}
.one-click-order-trade { 
    position: relative;
    overflow: hidden; 
}
.one-click-order-trade .animatic-span{ 
	position: absolute;
	border-radius: 50%; 
	background-color: rgba(0, 0, 0, 0.3); 
	width: 200px;
	height: 200px;
	margin-top: -50px; 
	margin-left: -50px; 
	animation: ripple 2s;
	opacity: 0;
}  
@keyframes ripple {
	from {
		opacity: 1;
		transform: scale(0);
	}

	to {
		opacity: 0;
		transform: scale(10);
	}
}
/*Button Effect End*/
/*multi child tap*/
.footerMultiTab{
    position: relative;
    cursor: pointer;
}
.footerParentTab{
    display: none;
    position: absolute;
    top: 30px;
    flex-direction: column;
    width: 100%;
    background: #003f5b;
    border: 1px solid #1d70991f;
}
.footerParentTab.active{
    display: flex!important;
}
.footerParentTab .footerChildTab{ 
    padding: 4px 0px;
    cursor: pointer;
}
.footerParentTab .footerChildTab.active, .footerParentTab .footerChildTab:hover{ 
    background: #061f2b!important;
}
.footerMultiTab .more_menu{
    position: absolute;
    right: 7px;
    bottom: 3px;
}
.footerMultiTab.arrow-down .more_menu_up, .footerMultiTab .more_menu_down{
    display: block;
}
.footerMultiTab.arrow-down .more_menu_down, .footerMultiTab .more_menu_up{
    display: none;
}
.currentChildTab{
    text-transform: capitalize!important;
}
/*multi child tap end*/
/*closed positions start*/
.closed-positions-details, .closed-positions-head , .closed-positions-values{
    /*grid-template-columns: 9% 9% 12% 12% 13% 8% 7% 7% 9% 7% 7%!important; */
    grid-template-columns: 9% 8% 8% 12% 12% 12% 7% 6% 6% 8% 6% 6%!important; 
}
/*closed positions end*/
.empty-container {
    height: 100%;
    background: #061f2b;
    color: #979fb5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
/*modify modal start*/
.modify{
    cursor: pointer;
}
.flex-vh-center{
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
} 
#modifyModal .modal{
    min-height: 183px;
} 
.modify-modal-main{
    height: 60px;
    border-bottom: 2px solid #eaeaef;
}
.modify-modal-main input{
    border: 0;
    border-bottom: 2px solid var(--secondary-color);
    outline: none;
    transition: .2s ease-in-out;
    box-sizing: border-box;
    background: #efefef;
    padding: 8px 0px;
    text-indent: 10px;
    width: 90%;
}
.modify-modal-main input:focus {
  border-bottom: 2px solid #56b786;  
}
#sync , #closeOrders, #closePenOrders{
    position: absolute;
    font-size: 20px;
    line-height: 16px;
    margin-left: 5px;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
    display: none;
}
#switchload{
    position: absolute;
    font-size: 20px;
    line-height: 16px;
    right: 34px;
    top: 12px;
    margin-left: 5px;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite; 
}
#closeOrders, #closePenOrders{
    line-height: 10px!important; 
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
/*modify modal end*/
/*Close multi order functionality*/
.m-0{
    margin: 0px!important;
}
.selectBtn, .selectPenBtn{
    background: #061f2b;
    border: 1px solid #0f3f57;
    outline: none;
    color: #fff;
    padding: 4px 20px;
    cursor: pointer;
    margin-right: 8px;
    font-size: 10px;
    border-radius: 2px;
}
.select_symbol, .select_pen_symbol{
    background: #061f2b;
    border: 1px solid #0f3f57;
    outline: none;
    color: #fff;
    padding: 2px 9px;
    cursor: pointer;
    margin-right: 5px; 
    font-size: 10px;
    display: none;
}
.select_symbol:hover, .select_pen_symbol:hover{
    background: #000;
}
.select_symbol.active, .select_pen_symbol.active{
    background: #eb4e5c;
    border: 1px solid #eb4e5c; 
}
.deleteBtnActive .select_symbol,.deleteBtnActive .select_pen_symbol, .deleteBtnActive .select_checkbox, .deleteBtnActive .select_pen_checkbox{
    display: block!important;
}
.closeOrdersBtn, .closeOrdersPenBtn{
    margin-right: 10px;
    outline: none;
    background: #eb4e5c;
    border: 1px solid #eb4e5c;
    color: #fff;  
    padding: 4px 25px;
    cursor: pointer; 
    font-size: 10px;
    border-radius: 2px;
    display: none;
    word-spacing: 8px;
}
.font-bold{
    font-weight:bold;
}
/*.select_checkbox{*/
/*    width: 18px;*/
/*    margin-left: 17px;*/
/*    height: 18px;*/
/*    cursor: pointer;*/
/*}*/
.select_checkbox, .select_pen_checkbox {
    position: relative;
    border: 1px solid #000;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin-left: 18px;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 18px;
    width: 18px;
    -webkit-appearance: none;
    opacity: 0.8;
    background: #fff;
    display: none;
} 
.select_checkbox:hover, .select_pen_checkbox:hover {
  opacity: 1;
} 
.select_checkbox:checked, .select_pen_checkbox:checked {
  background-color: #eb4e5c;
  opacity: 1;
} 
.select_checkbox:before, .select_pen_checkbox:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 4px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}
.openpositions, .openpenpositions{
    cursor: pointer;
}
/*Close multi order functionality end*/
/*Toogle Switch Start*/
.switches-container {
    width: 16rem;
    position: relative;
    display: flex;
    padding: 0;
    position: relative;
    background: #003f5b;
    line-height: 40px;
    border-radius: 3rem;
    margin-left: auto;
    margin-right: auto; 
}
.switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
}
.switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: white; 
    font-size: 14px;
}
.switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0.15rem;
    z-index: 2;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1); 
    box-sizing: border-box;
}
.switch {
    border-radius: 3rem;
    background: #061f2b;
    height: 100%; 
}
.switch div {
    width: 100%;
    text-align: center;
    opacity: 0;
    display: block;
    color: #fff;
    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0; 
    font-size: 14px;
}
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
    transform: translateX(0%);
}
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
    transform: translateX(100%);
}
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
    opacity: 1;
}
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
    opacity: 1;
}
.switch-loader{
    position: absolute;
    background: #0074ab;
    width: 100%;
    border-radius: 20px;
    z-index: 3;
    text-align: center;
    color: #fff;
    display: none;
}
.switch-loader.active{
    display: block!important;
}
.cpointer{
    cursor: pointer!important;
}
.closed-positions-values:hover{
    background: #0d2632;
}
.expandDetails {
    width: 10%;
    background: #061f2b70; 
    box-sizing: border-box;
    height: 33px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.expandDetails p{ 
    background: #061f2b;
    border: 1px solid #0f3f57;
    outline: none;
    color: #fff;
    padding: 0px 9px;
    cursor: pointer;
    margin-right: 8px;
    font-size: 10px;
    border-radius: 2px;
    text-transform: uppercase;
}

.expandDetails p .material-icons{ 
    font-size: 19px;
}
.content-wrapper, .footer,  .footer-statistics,  .sidebar .symbols-list,  .sidebar .favorite-list, .content {
    transition: all 0.5s ease-in-out;
}
body.expand .content-wrapper{
    height: 85vh!important;
}
body.expand .footer {
    height: 7vh!important;
    overflow: hidden!important;
}
body.expand .footer-statistics{
/*    display: none;*/
    bottom: 1px!important;
}
body.expand .sidebar .symbols-list, body.expand .sidebar .favorite-list, body.expand .content {
    height: calc(88vh - 40px); 
}
body.expand .collapse_btn, .expand_btn, body.expand .footer-content{
    display: none;
}
body.expand .expand_btn, .collapse_btn{
    display: block;
}
/*Toogle Switch End*/
/*export css start*/
.exportDetails{
    width: 5%;
    background: #061f2b70;
    box-sizing: border-box;
    height: 33px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: space-around;
}
.export{ 
    background: #061f2b;
    border: 1px solid #0f3f57;
    outline: none;
    color: #fff;
    padding: 3px;
    cursor: pointer;
    margin-right: 8px;
    line-height: 0px;
    border-radius: 2px;
    display: block;
}
.export span{
    font-size: 19px;
}
.exportDetails.active{
    justify-content: space-around;
}
/*.exportDetails.active .export{*/
/*    display: none!important;*/
/*}*/
.exportDetails .exportLoader{
    line-height: 0px;
    display: none;
}
.exportDetails.active .exportLoader{
    /*display: block!important;*/
}
.exportDetails .exportLoader span{
    position: relative;
    font-size: 20px;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite; 
    /*display: none;*/
}
#exportLoaderIcon{
    color: #fff;
}
.footer.v91 .expandDetails{
    display: none;
}
/*export css end*/
/*Closed Orders filter option start */
.closedOrderFilter{
    width: 25px;
    padding: 0px;
    height: 25px;
    font-size: 10px;
    background: #061f2b;
    border: 1px solid #0f3f57;
    cursor: pointer;
}
.closedOrderFilter span{
    color: #fff;
    font-size: 20px;
    line-height: 25px;
}
.filter-menu{
    position: absolute;
    background: #031118;
    z-index: 12;
    width: 150px;
    top: 36px;
    right: 13px;
    display: none;
    border: 1px solid #0f3f57;
}
.filter-menu ul{
    list-style: none;
    width: 100%;
    padding: 0px;
    margin-top: 1px;
    height: auto;
    margin-bottom: 3px;
    align-items: center;
    border-top: none;
}
.filter-menu ul li {
    width: 100%;
    color: #fff;
    border-bottom: none;
    text-align: center;
    padding: 3px 0px;
    font-size: 12px;
    cursor: pointer;
}
.filter-menu ul li:hover, .filter-menu ul li.active {
    color: #eb4e5c;
    font-weight: bold;
    border-bottom: none!important;
}
.p-relative{
    position: relative!important;
}
/*Closed Orders filter option end */
/*Payment Method ui start*/ 
.c-pointer{
    cursor: pointer!important;
}
#paymentModal .modal{
    width: 500px!important; 
    border: 1px solid #323948;
    background: #191f2c;
    position: relative;
    min-height: auto;
}
#paymentModal .headline{
    margin: 0px;
    padding: 13px 0px;
    text-align: center;
    font-size: 15px;
    /* font-weight: bold; */
    color: #fff;
    border-bottom: 1px solid #323948;
}
#paymentModal .paymentMethods{
    padding: 30px 20px;
    flex-wrap: wrap;
    margin: 2px;
}
.paymentDetailContainer {
    width: 33.33%; 
    box-sizing: border-box;
    padding: 10px;
} 
.paymentDetailContainer .icon{ 
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #4b556b;
    text-align: center; 
    cursor: pointer; 
}
.paymentDetailContainer .icon img{
    width: 90%;
    /*padding: 11px;*/
    box-sizing: border-box;
}
.paymentDetailContainer.active .icon{ 
    border: 1px solid #aeb133!important;
}
#paymentModal .close{
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #4b556b;
    color: #82868e;
    width: 20px;
    height: 20px;
    text-align: center;
    cursor: pointer; 
}
#paymentModal .close i{
    line-height: 20px;
    font-size: 14px;
}
#paymentModal .back{
    position: absolute;
    top: 13px;
    left: 10px;
    color: #fff;
    cursor: pointer;
    display: none;
}
#paymentModal .back i{
    font-size: 18px;
}
.paymentDetailContainer .icon p{
    color: #fff;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.d-none{
    display: none;
}
.paymentInfoContainer{
    padding: 0px 10px;
    text-align: center;
}
.paymentInfoContainer .mainLine{
    color: #fff;
    text-align: center;
    margin: 0px;
}
.paymentInfoContainer img{
    width: 50%;
    /*background: #fff;*/
    /*padding: 10px;*/
    margin: 30px 0px;
}
.copyContainer{
    position: relative;
    text-align: left;
    border: 1px solid #323948;
    padding: 3px 15px; 
}
.copyContainer .main{
    font-size: 13px;
    color: #fff;
    margin: 8px 0px;
}
.copyContainer .sub{
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin: 5px 0px;
}
.matrialcopy{
    position: absolute;
    top: 17px;
    right: 13px;
    color: #fff;
    cursor: pointer;
}
.paymentCheckStatus{
    width: 100%;
    margin-top: 17px;
    margin-bottom: 17px;
    outline: none;
    padding: 10px;
    background: #0072fd;
    color: #fff;
    border: 1px solid #0072fd;
    text-transform: uppercase;
}
.paymentInfo{
    color: #fff;
    font-size: 12px;
    margin: 0px;
}
#paymentStep2{
    display: none;
}
.paymentLoader{
    width:30%;
    margin-left: 40%;
}
#paymentForm{
    border: 1px solid #323948;
    padding: 10px 15px;
    margin-top: 10px;
}
#paymentForm label{
    display: block;
    color: #fff;
    text-align: left;
    font-size: 13px;
    margin-bottom: 5px;
}
#paymentForm .form-container{
    flex-wrap: wrap;
}
#paymentForm #amount, #paymentForm #file{
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    margin-bottom: 10px;
    background: #191f2c;
    border: 1px solid #323948; 
    color: #d3d3d3f7;
    outline: none;
    padding-left: 10px;
}
#paymentForm #file{
    padding-top: 4px;
}
.button-container{
    text-align: right;
}
.submitPayment{
    background: #0072fd;
    color: #fff;
    border: 1px solid #0072fd;
    padding: 5px 10px;
}
 
#file {
    display: none;
} 
.custom-file-input-label { 
    padding: 0px;
    text-align: center!important;
    background: #1c8adb;
    box-sizing: border-box;
    height: 34px;
} 
.custom-file-input-label span {
    display: none;
}
.custom-file-input-label img {
    margin: 0px;
    width: 17%;
}
.w100{
    width: 100%!important;
}
#fileName{
    text-align: right;
    color: #fff;
    font-size: 13px;
}
#paymentForm .w50:nth-child(2){
    padding: 0px 0px 0px 10px;
    box-sizing: border-box;
}
p.transactionContainer{
    color: #fff;
    padding: 0px;
    margin: 9px 0px;
    text-align: left;
    font-size: 13px;
}
/*.paymentDetailContainer .info{*/
/*    width: 88%;*/
/*    padding: 0px 20px;*/
/*}*/
/*.paymentDetailContainer .info p{*/
/*    margin: 0px;*/
/*}*/
/*Payment Method ui end*/