:root {
    --bg-dark: #121212;
    --bg-dark-light: #1e1e1e;
    --text-primary: rgba(255, 255, 255, 0.6);
    --text-white: #fff;
    --primary-yellow: #FFCC07;
    --hover-yellow: #ffdf5e;
    --border-yellow: #DDBC13;
    --dark-text: #151515;
    --gray-border: rgba(253, 253, 253, 0.2);
    --gray-bg: rgba(41, 41, 41, 0.8);
    --dark-border: #353535;
}

body {
    color: var(--text-white);
    background: var(--bg-dark);
}

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

.btn-secondary {
    color: var(--text-primary);
    border-color: var(--border-yellow);
}

.header-button {
    color: var(--text-primary);
    border: 2px solid var(--border-yellow);
}

.header-button:hover,
.btn-secondary:hover,
.header-button:hover, 
.btn-secondary:hover {
    color: var(--dark-text) !important;
    background: var(--hover-yellow) !important;
    border-color: var(--hover-yellow) !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--text-white);
}

.marquee {
    background: var(--bg-dark);
    border-bottom: 0.3px solid var(--bg-dark);
}

#page_content {
    background: var(--bg-dark-light);
}

.form-select, #date_range {
    color: var(--text-primary);
    background-color: var(--gray-bg);
    border: 1px solid var(--gray-border);
}

.datatable th, .datatable td {
    color: var(--text-primary);
}

.btn-primary,
.button,
.balance_action a {
    color: var(--dark-text) !important;
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}

.btn-primary:hover,
.button:hover,
.balance_action a:hover {
    color: var(--dark-text);   
    background-color: var(--hover-yellow);
    border-color: var(--hover-yellow);
}

.footer {
    background: var(--bg-dark);
    border-radius: 36px 36px 0 0;
    border: 1px solid var(--dark-border);
}

.daterangepicker {
    color: var(--bg-dark-light);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: var(--text-white);
    background-color: var(--dark-border);
    border-color: var(--dark-border);
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-yellow);
    color: var(--dark-text);
}

.form-select:focus {
    border-color: var(--hover-yellow);
    box-shadow: 0 0 0 .25rem rgb(246 255 73 / 6%);
}

a {
    color: var(--primary-yellow) !important;
}

a:hover {
    color: var(--primary-yellow); 
}

.menu-item-account-wrapper, 
.navbar-main-mobile .offcanvas-body > .navbar-nav > .nav-item,
.navbar-main > div > .navbar-nav > .nav-item {
    background-color: var(--bg-dark-light);
}

.navbar-main-mobile .offcanvas-body > .navbar-nav > .nav-item .nav-link, 
.navbar-main > div > .navbar-nav > .nav-item .nav-link {
    color: var(--text-primary);
}

.navbar-main-mobile .offcanvas-body > .navbar-nav > .nav-item.active, 
.navbar-main > div > .navbar-nav > .nav-item.active {
    background: var(--bg-dark-light);
    border: 1px solid var(--primary-yellow);
    color: var(--text-primary);   
}

.navbar-main-mobile .offcanvas-body > .navbar-nav > .nav-item:hover, 
.navbar-main > div > .navbar-nav > .nav-item:hover {
    background: var(--bg-dark-light);    
}

.navbar-main-mobile .offcanvas-body > .navbar-nav > .nav-item a:hover, 
.navbar-main > div > .navbar-nav > .nav-item a:hover {
    color: var(--primary-yellow) !important;
}

.modal-content {
    background-color: var(--bg-dark);
    border-radius: 1.3rem;
}

.checkbox-primary input[type=radio]:checked+label::before, 
.checkbox-primary input[type=checkbox]:checked+label::before {
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}

.form-check-input:checked {
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}

#search {
    background: rgba(255, 255, 255, 0.1);
}

.form-control:focus {
    color: var(--text-primary);
}

.exchange-container {
    background: var(--bg-dark-light);
    border: unset;
}

.crypto-select-item {
    background: var(--bg-dark-light);
    box-shadow: unset !important;
}

.crypto-select-item .form-control,
.crypto-select-item .bootstrap-select .btn {
    background: var(--dark-border) !important;
    border-color: var(--dark-border);
}

.crypto-select-item .bootstrap-select .btn {
    border-right: 1px solid var(--bg-dark);
}

.crypto-select-item .bootstrap-select .crypto-name {
    color: var(--text-white);
}

#access-balance-block a {
    color: var(--primary-yellow);
}

.reverse-container .btn-reverse {
    background: var(--dark-border);
    border: 1px solid var(--bg-dark-light);
}

.counting-title,
.info-text {
    color: rgba(255, 255, 255, 0.5);
}

.dropdown-menu {
    background-color: var(--bg-dark-light);
}

.dropdown-item {
    color: var(--text-primary);
}

.crypto-select-item .bootstrap-select .dropdown-menu li.active a, 
.bootstrap-select .dropdown-menu li.active a .crypto-name, 
.bootstrap-select .dropdown-menu li.active a .content-full .full-name {
    color: var(--primary-yellow);
}

.dropdown-item:focus, .dropdown-item:hover,
.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:focus, 
.dropdown-menu > .active > a:hover {
    background-color: var(--bg-dark) !important;
}

.bootstrap-select .dropdown-header {
    color: rgba(255, 255, 255, 0.5);
}

.form-control,
.form-control:focus,
.order-form-line .input-group select, 
.order-form-line .input-group input:not(input[type="search"]):not(input[type="radio"]) 
{
    color: var(--text-primary) !important;
    background-color: var(--gray-bg) !important;
    border: 1px solid var(--gray-border) !important;
}

.order-form-line .input-group,
.personal-info .input-group {
    background: unset !important;
    box-shadow: unset !important;
}

.btn-check:focus+.btn-primary, 
.btn-primary:focus,
.btn-check:active+.btn-primary, 
.btn-check:checked+.btn-primary, 
.btn-primary.active, 
.btn-primary:active, 
.show>.btn-primary.dropdown-toggle {
    color: var(--dark-text);
    background: var(--hover-yellow);
    border-color: var(--hover-yellow);
}

.btn-check:focus+.btn-secondary, .btn-secondary:focus {
    background-color: unset !important;
    box-shadow: unset !important;    
}

.text-black,
.text-dark {
    color: var(--text-primary) !important;
}

.card {
    background: var(--bg-dark);
    color: var(--text-primary);
}

.button.button-outline,
.button.button-outline:hover,
.fcode-tabs .nav-link.active {
    color: var(--bg-dark);
    border: solid 1px var(--bg-dark); 
}

.fcode-tabs .nav-link {
    color: var(--primary-yellow);
    border: 1px solid var(--primary-yellow); 
}

.fcode-tabs .nav-link:hover,
.fcode-tabs .nav-link.active {
    background: unset !important;
    border: 1px solid var(--hover-yellow);
    color: var(--dark-text);
}

.btn-success.disabled, 
.btn-success:disabled {
    background-color: var(--text-primary);
    border-color: var(--text-primary);    
}

.fcode-control-owner .fcode_owner.active,
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover
 {
    border: 1px solid var(--primary-yellow) !important;
    background: unset !important;
}

.fcode-control-owner .fcode_owner {
    color: var(--text-primary) !important;
    border-bottom-color: var(--primary-yellow);
    background: unset !important;    
    border-bottom: unset !important;           
}

.fcode-control-owner,
.nav-tabs {
    border-bottom: 1px solid var(--primary-yellow);
}

.table {
    color: var(--text-primary);
}

.nav-link {
    color: var(--text-primary) !important;
}

.offcanvas {
    background: var(--dark-text);
}


.form-login {
    background: var(--bg-dark-light);
}

.header {
    background: var(--bg-dark);
}

.bootstrap-select>.dropdown-toggle {
    border-radius: 0 10px 10px 0 !important;
}

.form-control, .form-control:focus, .order-form-line .input-group select, .order-form-line .input-group input:not(input[type="search"]):not(input[type="radio"]) {
    box-shadow: none !important;
}

.navbar-light .navbar-toggler-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(19deg) brightness(103%) contrast(101%);
}

.navbar-button {
    background: unset;
}

.btn-light {
    color: var(--hover-yellow);
}

.language_menu .dropdown-toggle {
    color: var(--text-primary);
    border: 1px solid var(--border-yellow) !important;
    background: unset !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-yellow);
    color: var(--bg-dark);    
}

.menu-account-box {
    background: var(--bg-dark-light);
}

.menu-account-menu .menu-item-label {
    color: var(--text-white);
}

.menu-account-menu .nav-item.active .menu-item-icon {
    background-color: var(--primary-yellow);

}

.menu-account-menu .menu-item-icon img  {
    filter: brightness(0) saturate(100%) invert(100%) sepia(66%) saturate(2%) hue-rotate(323deg) brightness(109%) contrast(101%);
}

.bottom-nav .active .menu-item-icon {
    background: var(--primary-yellow);
}

.offcanvas-header .btn-close,
#search_icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(75deg) brightness(110%) contrast(100%);
}

.content_login {
    border-radius: 32px;
}

.form-login input[type='text'], .form-login input[type='password'], .form-login input[type='email'] {
    box-shadow: none !important;
}

.help-button {
    background: var(--primary-yellow);
}

.modal .bootstrap-select .filter-option-inner-inner {
    color: var(--text-primary);
}

.page-item.active .page-link {
    background: var(--primary-yellow);   
}

.img_logo_login,
.navbar-brand img {
    height: auto !important;
    max-height: unset !important;  
}

.navbar-toggler:focus {
    box-shadow: unset !important;
}


:root {
    --bg-dark: #121212;
    --bg-dark-light: #1e1e1e;
    --text-primary: rgba(255, 255, 255, 0.6);
    --text-white: #fff;
    --primary-yellow: #FFCC07;
    --hover-yellow: #ffdf5e;
    --border-yellow: #DDBC13;
    --dark-text: #151515;
    --gray-border: rgba(253, 253, 253, 0.2);
    --gray-bg: rgba(41, 41, 41, 0.8);
    --dark-border: #353535;
}

.datatable.datatable_balances td,
.datatable_balances tr,
.datatable_reports tr,
.pagination,
#referralBalances tr, #referralOrders tr {
    background: var(--gray-bg) !important;
}

.header::after,
#page_content,
.exchange-container {
    background: var(--bg-dark);
}

.bottom-nav {
    color: var(--bg-dark-light);
}

.language_menu .dropdown-toggle {
    color: var(--text-primary);
    border: 1px solid var(--border-yellow) !important;
    background: unset !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-yellow);
    color: var(--bg-dark);    
}

.page-item.disabled .page-link {
    background: unset !important;
}

.clipboard-btn {
    color: var(--primary-yellow);    
}

.personal-info .card {
    background: var(--bg-dark-light);
}

.nav-tabs .nav-link {
    background: unset !important;
}

.clipboard-btn,
.text-green {
    color: var(--primary-yellow);    
}

.user-profile-holder .nav {
    background: unset;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--text-white) !important;
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);    
}

.user-activity {
    background: #151515;
}

.verify-alert {
    background: var(--bg-dark-light);
}

.filepond--drop-label {
    background: var(--bg-dark-light);    
}