.bg-menu-theme {
  background-color: var(--primary-color) !important;
}

.menu .app-brand.demo {
  height: 76px;
  margin-top: 0px;
  background-color: var(--secondary-color);
}

.bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(var(--secondary-color) 41%, rgba(255, 255, 255, 0.11) 95%, rgba(255, 255, 255, 0));
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
  color: var(--left-menu-font-color);
}

.bg-menu-theme .menu-header {
  color: var(--left-menu-font-color);
  opacity: 0.6;
}

.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:focus,
.bg-menu-theme .menu-horizontal-prev:hover,
.bg-menu-theme .menu-horizontal-prev:focus,
.bg-menu-theme .menu-horizontal-next:hover,
.bg-menu-theme .menu-horizontal-next:focus {
  color: var(--left-menu-font-color-hover);
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: var(--left-menu-font-color);
  background-color: color-mix(in lch, var(--primary-color) 80%, rgb(0, 0, 0)) !important;
}

.btn-primary:hover {
  color: var(--button-font-color) !important;
  background-color: var(--button-color-hover) !important;
  border-color: var(--button-color-hover) !important;
}

html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
.layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
  background-color: rgba(119, 119, 119, 0.3);
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--secondary-color);
}

.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
.bg-menu-theme .menu-item.active > .menu-link {
  color: var(--primary-color);
}

.app-brand-logo {
  width: 200px;
  height: 80px;
  background-size: 182px;
  background-repeat: no-repeat;
  background-position: center;
}

.card .app-brand-logo {
  background-color: var(--secondary-color);
  border-radius: var(--bs-card-border-radius);
}

.btn-primary {
  color: var(--button-font-color);
  background-color: var(--button-color);
  border-color: var(--button-color);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus {
  color: var(--button-font-color);
  background-color: var(--button-color-hover);
  border-color: var(--button-color-hover);
}

.layout-navbar {
  background-color: var(--secondary-color) !important;
}

.navbar-horizontal {
  background-color: var(--secondary-color) !important;
}

.navbar-horizontal .nav-link {
  color: var(--top-menu-font-color);
  opacity: 0.65;
}

.navbar-horizontal .nav-link.active,
.navbar-horizontal .nav-link.show,
.navbar-horizontal .nav-link:hover {
  color: var(--top-menu-font-color);
  opacity: 1;
}

.navbar-horizontal .dropdown > a.dropdown-avatar {
  color: var(--button-color);
}

.navbar-horizontal .dropdown > a.dropdown-avatar:hover,
.dropdown.dropdown-user > a:hover {
  opacity: 0.8;
}

.app-brand-logo-min {
  max-height: 50px;
}

.app-brand .layout-menu-toggle {
  background-color: var(--primary-color);
}

.bg-navbar-theme {
  color: var(--top-menu-font-color);
}

.bg-menu-font-color {
  background-color: var(--top-menu-font-color) !important;
  color: var(--secondary-color) !important;
}

.text-menu-font-color {
  color: var(--top-menu-font-color) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--button-color) !important;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: var(--button-color) !important;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: var(--button-font-color) !important;
  background-color: var(--button-color) !important;
  border-color: var(--button-color) !important;
}

.btn-outline-primary:hover {
  color: var(--button-font-color) !important;
  background-color: var(--button-color-hover) !important;
  border-color: var(--button-color-hover) !important;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(196, 196, 196, 0.4) !important;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show.dropdown-toggle,
.show > .btn-primary.dropdown-toggle {
  color: var(--button-font-color) !important;
  background-color: color-mix(in lch, var(--button-color-hover) 80%, rgb(0, 0, 0)) !important;
  border-color: color-mix(in lch, var(--button-color-hover) 80%, rgb(0, 0, 0)) !important;
}

.btn-outline-primary {
  color: var(--button-color);
  border-color: var(--button-color);
  background: transparent;
}

.btn-outline-primary .badge {
  background: var(--button-color);
  border-color: var(--button-color);
  color: var(--button-font-color);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--button-font-color) !important;
  background-color: var(--button-color) !important;
  border-color: var(--button-color) !important;
  box-shadow: none !important;
}

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

.bg-label-primary {
  background-color: color-mix(in lch, var(--primary-color) 20%, white) !important;
  color: var(--primary-color) !important;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: var(--button-color);
  color: var(--button-font-color);
  box-shadow: 0 2px 4px 0 rgba(145, 145, 145, 0.4);
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--button-color);
  border-color: var(--button-color);
  box-shadow: 0 2px 4px 0 rgba(132, 132, 132, 0.4);
}

.form-check-input:focus {
  border-color: var(--button-color);
  box-shadow: 0 2px 4px 0 rgba(123, 123, 123, 0.4);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--button-color);
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  background-color: var(--secondary-color) !important;
  border: 3px solid color-mix(in lch, var(--secondary-color) 20%, white) !important;
}

.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle,
.bg-menu-theme .menu-item.active > .menu-link {
  color: var(--left-menu-font-color);
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: rgba(119, 119, 119, 0.3);
}

a {
  color: var(--button-color);
}

a:hover {
  color: color-mix(in lch, var(--button-color) 60%, white);
}

html:not([dir='rtl']) .border-primary,
html[dir='rtl'] .border-primary {
  border-color: var(--primary-color) !important;
}

.border-secondary {
  border-color: var(--secondary-color) !important;
  color: var(--left-menu-font-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
  color: var(--top-menu-font-color) !important;
}

.alert-primary {
  background-color: color-mix(in lch, var(--primary-color) 20%, white);
  border-color: color-mix(in lch, var(--primary-color) 20%, white);
  color: var(--primary-color);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: var(--left-menu-font-color);
}

.list-group-item-primary {
  border-color: var(--primary-color);
  background-color: color-mix(in lch, var(--primary-color) 20%, white);
  color: var(--primary-color) !important;
}

.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus {
  border-color: var(--button-color);
  background-color: var(--button-color);
  color: var(--button-font-color);
  box-shadow: 0 0.125rem 0.25rem rgba(158, 158, 158, 0.4);
}

.progress-bar {
  background-color: var(--primary-color);
  color: var(--left-menu-font-color);
  box-shadow: 0 2px 4px 0 rgba(177, 177, 177, 0.4);
}

.bg-primary.toast,
.bg-primary.bs-toast {
  color: #fff !important;
  background-color: color-mix(in lch, var(--primary-color) 85%, white) !important;
  box-shadow: 0 0.25rem 1rem rgba(159, 159, 159, 0.4);
}

.bg-primary.toast .toast-header .btn-close,
.bg-primary.bs-toast .toast-header .btn-close {
  background-color: var(--primary-color) !important;
  box-shadow: 0 0.1875rem 0.375rem 0 rgba(168, 168, 168, 0.4) !important;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cccccc'/%3e%3c/svg%3e") !important;
}