body.dark {
  --black: #000;
  --black-bis: #111;
  --grey: #505050;
  --primary: #1874ff;
  --primary-light: #001d49;
  --primary-hover: #3a8bff;
  --primary-light-hover: #002a66;
  --link: #1874ff;
  --link-light: #001d49;
  --link-hover: #3a8bff;
  --link-light-hover: #002a66;
  --success: #00ff77;
  --success-light: #005326;
  --success-hover: #33ff99;
  --success-light-hover: #007a3d;
  --danger: #ff3434;
  --danger-light: #3f0000;
  --danger-hover: #ff6666;
  --danger-light-hover: #5a0000;
  --info: #0064fa;
  --info-light: #001638;
  --info-hover: #338bff;
  --info-light-hover: #002a5a;

  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-base: #000;
  --border-base: #222;
  --border-light: rgb(255 255 255 / 10%);

  --shadow-default: 0 1px 3px 0 rgb(255 255 255 / 25%);

  --hover-bg: #222222;
  --active-bg: #1f1f1f;
}

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

.dark .has-text-link {
  color: var(--link) !important;
}

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

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

.dark hr {
  background-color: #1b1b1b !important;
}

.dark .input,
.dark .textarea,
.dark .select select {
  background-color: var(--black-bis);
  border-color: var(--border-base);
  color: var(--text-primary);
}

.dark .select.is-link select {
  border-color: var(--border-base);
}

.dark .button {
  background-color: var(--black-bis);
  border-color: var(--border-base);
  color: var(--text-primary);
}

.dark .button.is-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-primary);
}

.dark .button.is-primary.is-outlined {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.dark .button.is-primary.is-light {
  background-color: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-light);
}

.dark .button.is-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-primary);
}

.dark .button.is-danger.is-outlined {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.dark .button.is-danger.is-light {
  background-color: var(--danger-light);
  color: var(--danger);
  border-color: var(--danger-light);
}

.dark .button.is-primary.is-light {
  background-color: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-light);
}

.dark .button.is-success {
  background: var(--success-light);
  border-color: var(--success-light);
  color: var(--text-primary);
}

.dark .button.is-success.is-outlined {
  background: transparent;
  border-color: var(--success);
  color: var(--success);
}

.dark .button.is-success.is-light {
  background-color: var(--success-light);
  color: var(--success);
  border-color: var(--success-light);
}

.dark .button:hover {
  background-color: var(--hover-bg);
  border-color: var(--border-base);
  color: var(--text-primary);
}

.dark .button.is-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.dark .button.is-primary.is-outlined:hover {
  color: var(--text-primary);
  border-color: var(--primary-hover);
}

.dark .button.is-primary.is-light:hover {
  background-color: var(--primary-light-hover);
  border-color: var(--primary-light-hover);
}

.dark .button.is-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.dark .button.is-danger.is-outlined:hover {
  color: var(--danger-hover);
  border-color: var(--danger-hover);
}

.dark .button.is-danger.is-light:hover {
  background-color: var(--danger-light-hover);
  border-color: var(--danger-light-hover);
}

.dark .button.is-success:hover {
  background: var(--success-light-hover);
  border-color: var(--success-light-hover);
}

.dark .button.is-success.is-outlined:hover {
  color: var(--success-hover);
  border-color: var(--success-hover);
}

.dark .button.is-success.is-light:hover {
  background-color: var(--success-light-hover);
  border-color: var(--success-light-hover);
}

.dark .navbar {
  background-color: var(--black-bis);
}

.dark .navbar-item,
.dark .navbar-link {
  color: var(--text-primary);
}

.dark a.navbar-link:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

.dark .navbar-dropdown {
  background-color: var(--black-bis);
  border: 1px solid var(--border-light);
}

.dark .navbar-dropdown a.navbar-item:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-primary) !important;
}

.dark .breadcrumb a,
.dark .breadcrumb li span {
  color: var(--grey);
}

.dark .breadcrumb li+li::before {
  color: var(--grey);
}

.dark .dropdown-content {
  background-color: var(--black-bis);
}

.dark .dropdown-item.is-active,
.dark button.dropdown-item.is-active {
  background-color: var(--primary);
  color: var(--text-primary);
}

.dark a.dropdown-item:hover,
.dark button.dropdown-item:hover {
  background-color: var(--active-bg);
  color: var(--text-primary);
}

.dark .menu-list li ul {
  border-left: 1px solid var(--border-base);
}

.dark .menu-list a:hover {
  background-color: #181818;
}

.dark .box,
.dark .card {
  background-color: var(--black-bis);
  box-shadow: var(--shadow-default);
  color: var(--text-secondary);
}

.dark .has-background-white {
  background-color: var(--black-bis) !important;
}

.dark .has-background-light {
  background-color: var(--black-bis) !important;
}

.dark .panel {
  background: var(--black-bis);
  box-shadow: var(--shadow-default);
}

.dark .panel-block,
.dark .panel-block strong {
  color: var(--text-primary);
}

.dark .panel-block:hover,
.dark label.panel-block:hover {
  background-color: var(--hover-bg);
}

.dark .panel-tabs:not(:last-child),
.dark .panel-block:not(:last-child) {
  border-color: var(--hover-bg);
}

.dark .table {
  background-color: var(--black-bis);
  color: var(--grey);
}

.dark .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--black);
}

.dark .table thead td,
.dark .table thead th {
  color: var(--grey);
}

.dark .table td,
.dark .table th {
  border: 1px solid var(--hover-bg);
}

.dark .tabs ul {
  border-bottom-color: var(--border-base);
}

.dark .tabs a {
  border-bottom-color: transparent;
}

.dark #product-page #content>.tabs {
  background: var(--black-bis) !important;
}

.dark #product-page #content>.tabs li {
  background: transparent !important;
}

.dark .product-card .product-name {
  color: #dddddd;
}

.dark .modal-card {
  border: 1px solid var(--border-base);
}

.dark .modal-card-head,
.dark .modal-card-foot {
  background-color: var(--black-bis) !important;
}

.dark .modal-card-head {
  border-bottom: 1px solid var(--border-base);
}

.dark .modal-card-title {
  color: var(--text-primary);
}

.dark .modal-card-body {
  background-color: var(--black) !important;
}

.dark .modal-card-foot {
  border-top: 1px solid var(--border-base);
}

.dark #catalog-modal .modal-content {
  border: 1px solid var(--border-light);
}

.dark .delete,
.dark .modal-close {
  background-color: var(--border-light);
}

.dark .pagination-previous,
.dark .pagination-next,
.dark .pagination-link {
  border-color: var(--border-light);
  color: #fafafa;
}

.dark .tag:not(body).is-light {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

.dark .tag:not(body).is-primary {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.dark .tag:not(body).is-primary.is-light {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.dark .tag:not(body).is-link.is-light,
.dark .tag:not(body).is-info.is-light {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

.dark .tag:not(body).is-success {
  background-color: var(--success-light) !important;
  color: var(--success) !important;
}

.dark .tag:not(body).is-success.is-light {
  background-color: var(--success-light) !important;
  color: var(--success) !important;
}

.dark .tag:not(body).is-danger.is-light {
  background-color: var(--danger-light) !important;
  color: var(--danger) !important;
}

.dark .notification.is-success.is-light {
  background-color: var(--success-light);
  color: var(--success);
}

.dark .notification.is-danger.is-light {
  background-color: var(--danger-light);
  color: var(--danger);
}

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

.dark .has-text-primary,
.dark a.has-text-primary:hover,
.dark a.has-text-primary:focus {
  color: var(--primary) !important;
}

.dark .xcom svg {
  color: var(--text-primary) !important;
}

.dark .heading-list li span,
.dark .heading-list li a {
  background: var(--black);
}

.dark .heading-list li:after {
  border-top: 1px dotted var(--border-base);
}

.dark .cart-total .box .is-flex span {
  color: #777;
}

.dark .cart-total .box>.block:after {
  border-color: var(--border-base);
}

.dark .product-card img,
.dark .anycategories .box img {
  border-radius: 0.5rem;
}

.dark .product-card .actual-price,
.dark #product .actual-price {
  color: var(--text-primary) !important;
}

.dark .footer {
  background-color: var(--black);
}

.dark footer .scroll-top-trigger,
.dark .mobile-contacts-list {
  border: 1px solid var(--border-light);
}

.dark .loading {
  background: var(--black);
}

.dark .checkbox:hover,
.dark .radio:hover {
  color: #7c7c7c;
}

.dark .radio-ui {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
}

.dark .input::placeholder,
.dark .textarea::placeholder {
  color: var(--grey);
}

.dark .swiper-pagination-bullet {
  background: var(--primary);
}

@media (max-width: 1023px) {
  .dark .icons-menu {
    background-color: rgb(0 0 0 / 40%) !important;
    box-shadow: 0 1px 3px 0 rgb(255 255 255 / 25%);
  }

  .dark #menu .navbar-start {
    background-color: var(--black-bis) !important;
  }
}