:root {
    --qopa-brand-primary: #622066;
    --qopa-brand-primary-dark: #4f1953;
    --qopa-brand-primary-soft: #f4ebf5;
    --qopa-brand-border: #d8bddb;
    --qopa-brand-shadow: rgba(98, 32, 102, 0.2);
    --qopa-brand-text-light: #ffffff;
}

.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue .main-header li.user-header,
.skin-green .main-header .navbar,
.skin-green .main-header .logo,
.skin-green .main-header li.user-header,
.skin-red .main-header .navbar,
.skin-red .main-header .logo,
.skin-red .main-header li.user-header,
.skin-red-light .main-header .navbar,
.skin-red-light .main-header .logo,
.skin-red-light .main-header li.user-header {
    background-color: var(--qopa-brand-primary) !important;
}

.skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-green .main-header .logo:hover,
.skin-green .main-header .navbar .sidebar-toggle:hover,
.skin-green .main-header .navbar .nav > li > a:hover,
.skin-green .main-header .navbar .nav > li > a:focus,
.skin-red .main-header .logo:hover,
.skin-red .main-header .navbar .sidebar-toggle:hover,
.skin-red .main-header .navbar .nav > li > a:hover,
.skin-red .main-header .navbar .nav > li > a:focus,
.skin-red-light .main-header .logo:hover,
.skin-red-light .main-header .navbar .sidebar-toggle:hover,
.skin-red-light .main-header .navbar .nav > li > a:hover,
.skin-red-light .main-header .navbar .nav > li > a:focus {
    background-color: var(--qopa-brand-primary-dark) !important;
}

.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li > a:hover,
.skin-green .sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li > a:hover,
.skin-red .sidebar-menu > li.active > a,
.skin-red .sidebar-menu > li > a:hover,
.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li > a:hover {
    border-left-color: var(--qopa-brand-primary) !important;
}

.skin-red-light .sidebar-menu > li.active > a,
.skin-red-light .sidebar-menu > li > a:hover {
    color: var(--qopa-brand-primary) !important;
}

.btn-primary,
.btn-info,
.btn-warning,
.label-info,
.label-warning,
.bg-aqua,
.bg-orange {
    background-color: var(--qopa-brand-primary) !important;
    border-color: var(--qopa-brand-primary) !important;
    color: var(--qopa-brand-text-light) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-primary.active,
.btn-info.active,
.btn-warning.active {
    background-color: var(--qopa-brand-primary-dark) !important;
    border-color: var(--qopa-brand-primary-dark) !important;
    color: var(--qopa-brand-text-light) !important;
}

.btn-primary.disabled,
.btn-primary[disabled],
.btn-info.disabled,
.btn-info[disabled],
.btn-warning.disabled,
.btn-warning[disabled] {
    background-color: var(--qopa-brand-primary) !important;
    border-color: var(--qopa-brand-primary) !important;
}

.box.box-primary,
.box.box-info {
    border-top-color: var(--qopa-brand-primary) !important;
}

.box.box-primary > .box-header,
.box.box-info > .box-header {
    color: var(--qopa-brand-primary);
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--qopa-brand-primary) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
    color: var(--qopa-brand-primary) !important;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--qopa-brand-primary-dark) !important;
}

.alert-info,
.alert-warning {
    background-color: var(--qopa-brand-primary-soft) !important;
    border-color: var(--qopa-brand-border) !important;
    color: var(--qopa-brand-primary) !important;
}

.callout.callout-info,
.callout.callout-warning {
    border-left-color: var(--qopa-brand-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--qopa-brand-primary) !important;
    border-color: var(--qopa-brand-primary) !important;
}

.form-control:focus {
    border-color: var(--qopa-brand-primary) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--qopa-brand-shadow) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--qopa-brand-primary) !important;
    box-shadow: 0 0 8px var(--qopa-brand-shadow) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--qopa-brand-primary) !important;
}

.logo-h img {
    height: 47px !important;
    width: auto !important;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
    border-radius: 0 !important;
}