: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 {
  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);
  -webkit-border-radius: 36px 36px 0 0;
  -moz-border-radius: 36px 36px 0 0;
  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);
  -webkit-box-shadow: 0 0 0 0.25rem rgb(246 255 73 / 6%);
  -moz-box-shadow: 0 0 0 0.25rem rgb(246 255 73 / 6%);
  box-shadow: 0 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);
  -webkit-border-radius: 1.3rem;
  -moz-border-radius: 1.3rem;
  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);
  -webkit-box-shadow: unset !important;
  -moz-box-shadow: unset !important;
  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;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.order-form-line .input-group,
.personal-info .input-group {
  background: unset !important;
  -webkit-box-shadow: unset !important;
  -moz-box-shadow: 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;
  -webkit-box-shadow: unset !important;
  -moz-box-shadow: 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);
}

.navbar-light .navbar-toggler-icon {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
    saturate(1%) hue-rotate(19deg) brightness(103%) contrast(101%);
  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 {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(66%)
    saturate(2%) hue-rotate(323deg) brightness(109%) contrast(101%);
  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 {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
    saturate(0%) hue-rotate(75deg) brightness(110%) contrast(100%);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(75deg) brightness(110%) contrast(100%);
}

.content_login {
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border-radius: 32px;
}

.form-login input[type="text"],
.form-login input[type="password"],
.form-login input[type="email"] {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  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 {
  -webkit-box-shadow: unset !important;
  -moz-box-shadow: unset !important;
  box-shadow: unset !important;
}

.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);
}

.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);
}

#access-balance-block {
  right: 13px;
}
#datatable_balances {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-dark-light);
  border: 1px solid var(--dark-border);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  overflow: hidden;
}

/* Шапка */
#datatable_balances thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-dark-light);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 12px;
  padding: 14px 30px 14px 16px;
  border-bottom: 1px solid var(--dark-border);
  white-space: nowrap;
}

#datatable_balances tbody td {
  padding: 14px 30px 14px 16px;
  height: 56px;
  vertical-align: middle;
  color: var(--text-white);
  border-bottom: 1px solid rgba(253, 253, 253, 0.06);
}
#datatable_balances tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
#datatable_balances tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

#datatable_balances thead th:nth-child(1),
#datatable_balances tbody td:nth-child(1) {
  width: 33.33333% !important;
}
#datatable_balances thead th:nth-child(2),
#datatable_balances tbody td:nth-child(2) {
  width: 33.33333% !important;
  text-align: right;
}
#datatable_balances thead th:nth-child(3),
#datatable_balances tbody td:nth-child(3) {
  width: 33.33333% !important;
}
#datatable_balances thead th:nth-child(n + 4),
#datatable_balances tbody td:nth-child(n + 4) {
  width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#datatable_balances tbody td:nth-child(3) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-calc(100% - 15px) !important;
  width: -moz-calc(100% - 15px) !important;
  width: calc(100% - 15px) !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0px 14px 16px;
}

#datatable_balances .balance_currency {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
#datatable_balances .currency-icon {
  width: 20px;
  height: 20px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20px;
  -moz-box-flex: 0;
  -ms-flex: 0 0 20px;
  flex: 0 0 20px;
}

#datatable_balances .balance_amount {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

#datatable_balances .balance_actions {
  text-align: left;
  white-space: nowrap;
}
#datatable_balances .balance_actions a {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -moz-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 0 !important;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
  line-height: 1;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--border-yellow);
  background: var(--primary-yellow);
  color: var(--dark-text);
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease,
    -webkit-transform 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    -webkit-transform 0.15s ease;
  -o-transition: background-color 0.15s ease, border-color 0.15s ease,
    -o-transform 0.15s ease;
  -moz-transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -moz-transform 0.15s ease;
  transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease;
  transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, -webkit-transform 0.15s ease,
    -moz-transform 0.15s ease, -o-transform 0.15s ease;
}
#datatable_balances .balance_actions a:last-child {
  margin-right: 0;
}
#datatable_balances .balance_actions a:hover {
  background: var(--hover-yellow);
  border-color: var(--hover-yellow);
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}
#datatable_balances .balance-action-icon img {
  width: 14px;
  height: 14px;
  display: block;
}

#datatable_balances thead th.sorting::after,
#datatable_balances thead th.sorting_asc::after,
#datatable_balances thead th.sorting_desc::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24'><path fill='black' d='M7 14l5-5 5 5z'/></svg>")
    no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24'><path fill='black' d='M7 14l5-5 5 5z'/></svg>")
    no-repeat center/contain;
  background: currentColor;
  color: var(--text-primary);
  opacity: 0.5;
}
#datatable_balances thead th.sorting_asc::after {
  opacity: 0.9;
}
#datatable_balances thead th.sorting_desc::after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  opacity: 0.9;
}