:root {
  --dark-bg: #121212;
  --dark-secondary-bg: #1c1c1c;
  --dark-secondary-text: #F3F9FC;
  --dark-teritary-text: #787878;
  --dark-tablethead-color: #7B7878;
  --dark-bordercolr : #2b2929;
  --white-fg : #ffffff;
  /* --card-bg: #1C1C1C; */
  /* --card-bg: #1C1C1C; */
}

.dark {
  background-color: var(--dark-bg) !important;
  color: var(--dark-secondary-text);
}
.dark {

  .support-chat-grp,
  .commoncard1,
  .nft-menu-list li,
    .kyc-grp select,
    .offcanvas-header,
    .offcanvas-body,
    .menu .dropdown-content a:hover,
    .menu {
        background-color: var(--dark-bg) !important;
    }

    .text-primary-clr{
      color: #2685A3 !important;
    }

    .hot-list .text-green{
      color: #28A745 !important;
    }

    .hot-list .text-red{
        color: #D32F2F !important;
    }
    .chat-head p,
    .recevier-body p:nth-child(2),
    .sender-body p:nth-child(2),
    .hot-list .text-blackbold{
      color: #ffffff !important;
    }
    .hot-list .text-secondary{
      color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
    }
    .text-secondary{
      color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
    }
    .chat-input input,
    .write-msg-body .input-group,
    .preivew-img-body,
    .recevier-body,
    .sender-body,
    .chat-head,
    .ticket-add-grp{
      background-color: #000 !important;
    }
    .write-msg-body .input-group{
      border: 0;
    }
    .chat-grp,
    .days-filter li p,
    .bnb-eth,
    .commoncard,
    .notify-card:hover,
    .menu .dropdown-content,
    .menu-right-grp {
        background-color: var(--dark-secondary-bg) !important;
    }
    .checkbox__body,
    .nft-social-icons li svg path,
    h4,
    .notification-grp h5,
    .notify-card h6,
    .offcanvas-title,
    #scanner-content p,
    #assets-details h4,
    .menu .dropdown-content a h5,
    .menu .nav-item .nav-link {
        color: var(--dark-secondary-text) !important;
    }

    h1,h2,h3,h4,h5,h6{
      color: #ffffff;
    }

    footer{
      & a, span{
        color: #ffffff !important;
      }
    footer a, span{
      color: #ffffff !important;
    }

    .accordion{
      --bs-accordion-bg: #1c1c1c;
    }

    .faq-grp .accordion-item > .accordion-header .accordion-button, .faq-grp .accordion-button{
      background-color: #1c1c1c;
    }

    .faq-grp .accordion-header button{
      color: #ffffff !important;
    }

    .accordion-item {
      color: #787878;
    }

    .identity-verification {
        background-color: var(--dark-bg) !important;
    }

    .identity-verification h2 {
        color: var(--dark-secondary-text) !important;

    }
    .text-secondary-color{
      color: #7B7878 !important
    }
    .identity-verification .card {
        background-color: var(--dark-secondary-bg) !important;
        border: 1px solid var(--dark-border-color) !important;
    }

    .identity-verification .card-title {
        color: var(--dark-secondary-text) !important;
    }

    .identity-verification .card-text {
        color: var(--dark-secondary-text) !important;
    }

    .button-tertiary{
      background-color: #121212 !important;
      color: #897A7A !important;
    .table-header{
      background-color: #121212 !important;
    }
  }
}
}
.dark {

  .kyc-grp select,
  .kyc-grp input,
  .offcanvas-header,
  .offcanvas-body,
  .menu .dropdown-content a:hover,
  .menu {
    background-color: var(--dark-bg) !important;
  }

  .commoncard,
  .notify-card:hover,
  .menu .dropdown-content,
  .menu-right-grp {
    background-color: var(--dark-secondary-bg) !important;
  }

  .notification-grp h5,
  .notify-card h6,
  .offcanvas-title,
  #scanner-content p,
  #assets-details h4,
  .menu .dropdown-content a h5,
  .menu .nav-item .nav-link {
    color: var(--dark-secondary-text) !important;
  }

    .identity-verification .verified_icon {
        color: var(--dark-secondary-text) !important;
    }

    .login_section,
    .login_form,
    .login-form-container
    .btn-toggle-password {
        color: var(--dark-secondary-text) !important;
    }

    .login_form h2 {
        color: var(--dark-secondary-text) !important;
    }

    .login_form p {
        color: var(--dark-teritary-text) !important;
    }

    .login-form-container{
        background-color: var(--dark-secondary-bg) !important;
    }

    .login-form-container .btn-signup {
        color: #fff !important; /* Use your desired color for the link in dark mode */
        text-decoration: none !important;
    }

    .login-form-container .qr-code {
        filter: invert(1) !important; /* Inverts the QR code image for better visibility in dark mode */
    }
    .edit-banner,
    /* .form-grp input {
        background-color: #1c1c1c !important;
    } */
    .edit-banner{
      border: 0 !important;
    }
}

.dark {
      .register_section,
      .register_form,
       .otp_section,
       .forget_form,
       .modal-content,
      .modal-body,
      .staking_card,
      .register-form-container
      .btn-toggle-password {
        color: var(--dark-secondary-text) !important;
    }

    .register_form h2, a {
        color: var(--dark-secondary-text) !important;
    }

    .register_form p {
      color: var(--dark-teritary-text) !important;
  }

    .register-form-container{
        background-color: var(--dark-secondary-bg) !important;
    }

    .register-form-container .btn-signup {
        color: #fff !important; /* Use your desired color for the link in dark mode */
        text-decoration: none !important;
    }
    .registeration-form {
      background-color: var(--dark-secondary-bg) !important;
    }

    .otp-box {
         background-color: var(--dark-secondary-bg) !important;
    }

    .otp_section h2, h4, h3 {
        color: var(--dark-secondary-text) !important;
    }

    .otp_section span {
      color: var(--dark-teritary-text) !important;
    }

    .forget_form h2 {
            color: var(--dark-secondary-text) !important;
    }

    .forget_section_form {
          background-color: var(--dark-secondary-bg) !important;
    }

    .modal-content {
      background-color: var(--dark-secondary-bg) !important;
    }
    .create-ticket-popup .modal-content {
      background-color: var(--dark-bg) !important;
    }
    .setting_btn li {

            color: var(--dark-secondary-text) !important;
            background-color: var(--dark-secondary-bg) !important;
    }
    

    .modal-content label {
                 color: var(--dark-secondary-text) !important;
    }

    .info-box {
            background-color: var(--dark-secondary-bg) !important;
    }

    .info-box h6 {
        color: var(--dark-secondary-text) !important;
    }

    .info-box p {
        color: var(--dark-teritary-text) !important;
    }

    .staking_star p {
        color: #2685A3 !important;
    }
    .staking_card {
           background-color: var(--dark-secondary-bg) !important;
    }

    .staking_stepper_content strong {
            color: var(--dark-secondary-text) !important;
    }

    .staking_stepper_content p {
             color: var(--dark-secondary-text) !important;
    }
    .staking_btn {
         color: #000000 !important;
    }
    .staking_card h6 {
        color: var(--dark-secondary-text) !important;
    }

    .staking_card p {
        color: var(--dark-teritary-text) !important;
    }

    .staking_head h2 {
            color: #2685A3 !important;
    }
    .staking_coin h6 {
      background-image: linear-gradient(to right, #1c1c1c, #008dcf) !important;
    }

    .staking_coin12 h6 {
      background-image: linear-gradient(to right, #1c1c1c, #be0ff4) !important;
    }

    .staking_coin p {
            color: var(  --dark-secondary-text) !important;
    }
    .staking-top {
          background-color: #121212 !important;
    }

    .crypto-content {
      background-image: linear-gradient(135deg, #020202, #3d3c3c) !important;
    }

    .currency-section {
           background-color: var(--dark-b) !important;
           p, li{
            color: var( --dark-secondary-text) !important;
           }
           h6,strong{
            color: var(--dark-secondary-text) !important;
           }
    }

    .refferal_cards p {
        color: var(--dark-teritary-text) !important;
    }

    .refferal_banner {
           background-color: var(--dark-secondary-bg) !important;
    }

    .refferal_banner p {
            color: var( --dark-teritary-text) !important;
    }

    .refferal_link {
      background-color: var(--dark-secondary-bg) !important;
    }

    .refferal_link a {
      color: #2685A3 !important;
    }

    .select_Avatar  {
           color: var( --dark-teritary-text) !important;
    }

    .image_uploaded .nav-link {
      color: var( --dark-secondary-text) !important;
      background-color: var(--dark-primary-bg) !important;
    }

    .image_uploaded .nav-link.active {
      color: var(  --dark-secondary-bg) !important;
      background-color: var(--dark-secondary-text) !important;
    }

   .details_card {
       background-color: var(  --dark-bg) !important;
    }

    .referral-card li {
            color: var(--dark-teritary-text) !important;
    }
 

}


.dark {
  .stepper {
    background-color: var(--dark-bg) !important;
    color: var(--dark-secondary-text) !important;
  }


  .form-container {
    background-color: var(--dark-bg) !important;
    color: var(--dark-secondary-text) !important;
  }

  .form-title {
    color: var(--dark-secondary-text) !important;
  }


  .form-label {
    color: var(--dark-secondary-text) !important;
  }

  .form-control {
    background-color: var(--dark-secondary-bg) !important;
    color: var(--dark-secondary-text) !important;
    border-color: var(--dark-secondary-bg) !important;
  }


  .form-control::placeholder {
    color: var(--dark-secondary-text) !important;
    opacity: 0.7;
  }

    .notify-card p{
        color: var(--dark-teritary-text) !important;
    }
    .commoncard{
        background-color: var(--dark-secondary-bg);
        color: var(--dark-secondary-text);
    }
    .table > :not(caption) > * > *{
        color: var(--dark-secondary-text) !important;
        &.text-negative {
          color: var(--negativeValue-color) !important;
      }
      &.text-positive {
        color: var(--positiveValue-color) !important;
    }
    }
    .table th{
        color: var( --dark-tablethead-color) !important;
    }
    .tradeinput{
        background-color: var(--dark-bg) !important;
        color: var(--dark-secondary-text) !important;
        & input{
            color: var(--dark-secondary-text);
            &::placeholder{
                color: var(--dark-secondary-text);
            }
        }
        & .trade-text-coin{
            color: var(--dark-secondary-text);
        }
    }
    & .transferbtn{
        color: var(--dark-secondary-text);
      }


    & .trade-text-coin {
      color: var(--dark-secondary-text);
    }
    .mat-mdc-dialog-container .mdc-dialog__surface{
        background-color: var(--dark-secondary-bg) !important;
        color: var(--dark-secondary-text) !important;
    }
    .btn-close{
        filter: invert(1);
    }
    .coins{
        background-color: var(--dark-bg) !important;
    }
    .resultcard{
        background-color: var(--dark-bg) !important;
    }
    .secondarycard{
        background-color: var(--dark-bg) !important;
        color: var(--dark-secondary-text) !important;
    }
    .text-heading-color{
        color: var(--dark-secondary-text) !important;
    }
    .searchinput input{
        background-color: var(--dark-secondary-bg) !important;
    }
    .table > :not(caption) > * > *{
      p.textview{
        color: var(--dark-secondary-text) !important;
    }
    }
}

.dark {
  .swap-card {
    background-color: #121212 !important;
  }

  .roundedIcon svg {
    background-color: #1c1c1c !important;
  }

  .dropdown-menu.show {
    background-color: #1c1c1c !important;
    color: white !important;
  }

  .coin {
    color: white!important;
  }

  .popup {
    background-color: #121212 !important;
  }

  .popupCard,
  .dropdown {
    background-color: #1c1c1c !important;
  }

  .dropdown-item:hover {
    background-color: #121212 !important;

  }
  /* .commoncard input{
    background-color: var(--dark-bg) !important;
  } */
  .popup{
    & p,span{
      color: #FFFFFF !important;
    }
  }

  .fa-caret-down {
    color: #FFFF;

  }
  .btn-close{
    filter: invert(1);
  }
  
  .history-container .parenttab li.parentactive{
    background-color: var(--dark-bg) !important;
  }

  .history-container .content-wrapper .historyinput{
    background-color: var(--dark-secondary-bg) !important;
  }
  
  .history-container .mdc-text-field--filled:not(.mdc-text-field--disabled){
    background-color: var(--dark-secondary-bg) !important;
    & .mat-mdc-select-arrow svg{
      color:  var(--primary-color) !important;
    }
  }

  .mat-mdc-select-arrow svg{
    color:  var(--primary-color) !important;
  }

  .mat-mdc-select,.mat-mdc-select, .mat-mdc-select-min-line{
    color: var(--dark-secondary-text) !important;
  }
}


/* ICO */

.dark{
  .ico-section p{
    color:var(--dark-teritary-text) !important;
  }
  .ico-section{
    & span,li{
      color: #fff!important;
    }
  }

  .buy-token,.icoTransaction{
    color: #fff!important;
  }
  .button-secondary span{
    color: var(--primary-color) !important;
  }
  .button-secondary:hover span {
    color: #fff !important; /* Change the span color to white on hover */
  }
  .ico-dashboard .header span , .ico-card1 span{
    color: #fff;
  }
  .mat-mdc-select-panel,.mdc-text-field--filled:not(.mdc-text-field--disabled), .mat-mdc-option{
    background-color: #121212!important;
    color: white!important;
  }
  .mat-mdc-icon-button{
    filter: invert(1) !important;
  }
  .coin-select{
    background-color: #121212 !important;
    color: #fff !important;
    /* color: var(--dark-teritary-text) !important; */
    border-style: none !important;
  }
  .coinSpan,.close-button{
    color: #fff !important;
  }
  /* .coins:hover{
    background-color: #2685A3 !;
    color: #fff;
  } */
  .coinField .mat-mdc-select-min-line{
    /* color: #000000 !important; */
  }
  .ieo-details input,.ieo-details button {
    background-color: #121212 !important;
  }
  .borderhr{
    border-color: var(--dark-bg) !important;
  }
  .favorite-grp.fav-show{
    background-color: var(--dark-secondary-bg) !important;
  }
  .darkselect{
    background-color: var(--dark-bg) !important;
    border-color: var(--dark-bg) !important;
    color: var(--dark-secondary-text) !important;
  }
  .mdc-form-field{
    color: var(--dark-secondary-text) !important;
  }

  .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{
    border-color: var(--dark-border-color) !important;}
  .mdc-text-field--filled:not(.mdc-text-field--disabled){
    background-color: #121212 !important;

  }
  .betbtn{
    background-color: var(--dark-bg) !important;
    color: var(--dark-secondary-text) !important;
  }
  .tradeinput.border{
    /* background-color: transparent !important; */
    border-color: var(--dark-bordercolr) !important;
  }
  input.popupinput{
    background-color: var(--dark-bg) !important;
  }
  .input-group {
    & input,.input-group-text{
      background-color: var(--dark-bg) !important;
      color: var(--dark-secondary-text) !important;
    }
  }
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #666;
  }

  ::-webkit-scrollbar
  {
    width: 2px;
    background-color: #666;
  }

  ::-webkit-scrollbar-thumb
  {
    background-color: #000;
  }

  .bg-linear {
    background: linear-gradient(to right, rgb(41, 40, 40) 10%,#28A745 70%, #28A745 100%) !important;
  }
  input[type="time"]::-webkit-calendar-picker-indicator{
    filter: invert(1)!important;
  }
  input[type="file"]{
    background-color: transparent !important;
  }
  .innerCard{
    border: 1px solid #ffffff !important;
    border-radius: 4px;
    background-color: #121212 !important;
  }
  .borderCard{
    background-color: #121212!important;
  }
  .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input{
    color: var(--dark-secondary-text) !important;
  }
  .mdc-text-field .mat-mdc-form-field-infix input::placeholder{
    color: var(--dark-secondary-text) !important;
    opacity: 0.7 !important;
  }
  .blogcard{
    background-color: #E1EEF4 !important;
  }
  .botmarketplace{
      .mat-mdc-form-field-subscript-wrapper{
          height:0  !important;
      }
      .mdc-text-field--filled:not(.mdc-text-field--disabled){
          background-color: var(--primary-color) !important;
          color: var(--card-bg) !important;
          border-radius: 4px !important;
      }
      .mat-mdc-select,.mat-mdc-select-min-line{
          color: var(--card-bg) !important;
          padding: 3px !important;
      }
      .mat-mdc-form-field-infix{
          height: 24px !important;
      }
      .mdc-text-field--no-label .mat-mdc-form-field-infix{
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          height: 24px !important;
          padding: 0px 10px;
      }
      .mat-mdc-text-field-wrapper {
          height: 30px !important;
          border-radius: 0 !important;
      }
      .mdc-line-ripple{
          display: none !important;
      }
      .mdc-line-ripple--deactivating{
          display: none !important;
      }
      .mdc-text-field{
          padding: 0 !important;
      }
      .mat-mdc-select-arrow svg{
          fill: var(--card-bg) !important;
      }
      .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper:hover{
        background-color: #1c1c1c !important;
      }
      .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper:hover{
        background-color: #000 !important;
      }
  }
  .nft-sec{
    .mdc-text-field--filled:not(.mdc-text-field--disabled){
      background-color : var(--dark-secondary-bg)  !important
    }

    .mat-mdc-option,.mat-mdc-option:focus.mdc-list-item, .mat-mdc-option.mat-mdc-option-active.mdc-list-item,.mdc-list-item__primary-text{
      color: var(--dark-secondary-text) !important;
    }

    & input{
      background-color: var(--dark-secondary-bg) !important;
      color: var(--dark-secondary-text) !important;
    }
  } 
}


/* deposit */

.dark {
  .drop-coins{
    background-color: #121212 !important;
  }

  .text-black{
    color: #ffffff !important;
  }

  .bg-grey{
    background-color: #121212 !important;
  }

  .withdraw-page .bg-white{
    background-color: #1c1c1c !important;
  }
}
.dark {
  .bg-vip{
    background-color: #00242F !important;
  }

  .ngx-pagination a:hover{
    color: var(--dark-bg) !important;
  }

  div:where(.swal2-container) h2:where(.swal2-title){
    color: var(--dark-bg) !important;
  }

  .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{
    border-color : var(--card-bg) !important;
  }

  .news-btn {
        background-color: #666 !important;
        color: var(--dark-secondary-text) !important;
  }
  
  .mdc-text-field--filled:not(.mdc-text-field--disabled){
    border: 1px solid var(--dark-secondary-bg) !important;
  }
}
.dark .open-trade-his,
.dark .open-trade-his .sticky-top{
  background-color: #121212 !important;
}
.dark .inner-open-his-bg{
  background-color: #1c1c1c !important;
}
.dark .time-container{

  background-color: #1c1c1c !important;
  border: 1px solid #121212 !important;
}

.dark .custom-clr{
  color: #fff !important;
}
.dark .custom-dark-clr {
  color: var(--dark-secondary-text) !important;
}

.dark ul li a{
  color: #e5e6e6 !important;
}



.dark .faq-grp .accordion-button::after,
.dark .faq-grp  .accordion-item > .accordion-header .accordion-button,
.dark .faq-grp .accordion-button,
.dark .commoncard,
.dark .faq-grp .accordion-header button{
    background-color: #1C1C1C;
    color: #fff !important;
}

.dark .card-top{
  background-color: var(--dark-secondary-bg) !important;
}
.dark .product-card:hover .card-top{
  background-color: var(--primary-color) !important;
  color: #fff;
}

.dark .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
  background-color: #000 !important;
}

.dark {
  .mat-datepicker-content{
    background-color: var(--dark-bg) !important;
    color: var(--white-fg) !important;
    .mat-mdc-button:not(:disabled),
    .mat-calendar-body-label,
    .mat-calendar-body-cell-content,
    .mat-calendar-table-header th{
      color: var(--white-fg) !important;
    }
    .mat-calendar-arrow{
      filter: invert(1);
    }
    .mat-datepicker-toggle-default-icon{
      fill: var(--white-fg) !important;
    }
    /* .mat-mdc-icon-button{
      color: var(--white-fg) !important;
    } */
  }
}
.dark .swal-popup {
  background-color: #000 !important;
  border: 1px solid #444;
  border-radius: 10px;
}

.dark .swal-title {
  color: #fff !important;
}

.dark .swal-html {
  color: #fff !important;
}

.dark .swal-icon {
  color: #fff !important; 
}

.dark .swal-confirm-btn {
  background-color: #1e88e5 !important;
  color: white !important;
}

.dark .swal-deny-btn {
  background-color: #e53935 !important;
  color: white !important;
}

.dark 
.div_fixed-sidebar{
  background-color: black !important;

}
.dark .div_fixed-sidebar span{
  color: white !important;
}
.headingView{
  color: #fff !important;
  font-weight: bolder;
}
.div_fixed_container .dark .nav-pills .nav-link.active,
.div_fixed_container .dark .nav-pills .show > .nav-link {
    color: #2685A3 !important;
    background-color: transparent !important;
}

.dark .bg-light {
      background-color: var(--dark-bg) !important;
      color: #fff !important;
}

.dark .acc-group .account-list {
            background-color: #1C1C1C !important;
            color: #fff !important;

} 

.dark .api-table {
          background-color: var(--dark-secondary-bg) !important;
          color: #fff !important;

}

.dark .api-table th {
  /* background-color: #1C1C1C !important; */
  color: #fff !important;

}

.dark .accordion-button {
      background-color: #000 !important;
      color: #fff !important;
}

.dark .accordion-body{
  background-color: #1C1C1C;
  color: #d4d2d2 !important;
}

.dark .dashboard_popup {
      background-color: var(--dark-bg) !important;
}

.dark .dashboard_section {
      background-color: var(--dark-bg) !important;
}

 .dark .mat-mdc-select-placeholder {
      color: #fff !important;
 }   
.dark .inputcustom {
  background-color: #0c0c0c !important;
  border: 0;
  padding: 10px;
  width: 100%;
  text-align: start;
  margin-top: 10px;
  color: #fff !important;
}