body[class*="brand-"] {
    color: var(--brand-text);
}

body[class*="brand-"] .content-wrapper {
    background: linear-gradient(180deg, var(--brand-surface) 0%, #fff 260px) !important;
}

body[class*="brand-"] .main-header.navbar {
    box-shadow: 0 8px 24px rgba(21, 31, 42, .06) !important;
}

body[class*="brand-"] .card,
body[class*="brand-"] .info-box,
body[class*="brand-"] .callout {
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px var(--brand-widget-shadow) !important;
}

body[class*="brand-"] .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--brand-border) !important;
    color: var(--brand-text) !important;
}

body[class*="brand-"] .card-primary.card-outline,
body[class*="brand-"] .card-outline.card-primary {
    border-top: 3px solid var(--brand-primary) !important;
}

body[class*="brand-"] .card-info.card-outline,
body[class*="brand-"] .card-outline.card-info {
    border-top: 3px solid var(--brand-status-info) !important;
}

body[class*="brand-"] .card-success.card-outline,
body[class*="brand-"] .card-outline.card-success {
    border-top: 3px solid var(--brand-status-success) !important;
}

body[class*="brand-"] .card-warning.card-outline,
body[class*="brand-"] .card-outline.card-warning {
    border-top: 3px solid var(--brand-status-warning) !important;
}

body[class*="brand-"] .card-danger.card-outline,
body[class*="brand-"] .card-outline.card-danger {
    border-top: 3px solid var(--brand-status-danger) !important;
}

body[class*="brand-"] .card-secondary.card-outline,
body[class*="brand-"] .card-outline.card-secondary {
    border-top: 3px solid var(--brand-status-neutral) !important;
}

body[class*="brand-"] .card-title,
body[class*="brand-"] h1,
body[class*="brand-"] h2,
body[class*="brand-"] h3,
body[class*="brand-"] h4,
body[class*="brand-"] h5,
body[class*="brand-"] h6 {
    color: var(--brand-text);
}

body[class*="brand-"] .text-muted {
    color: var(--brand-muted) !important;
}

body[class*="brand-"] .btn {
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600;
}

body[class*="brand-"] .btn-primary,
body[class*="brand-"] .badge-primary,
body[class*="brand-"] .bg-primary,
body[class*="brand-"] .bg-gradient-primary,
body[class*="brand-"] .progress-bar.bg-primary {
    background-color: var(--brand-primary) !important;
    background-image: none !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

body[class*="brand-"] .btn-primary:hover,
body[class*="brand-"] .btn-primary:focus,
body[class*="brand-"] .btn-primary:active {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    color: #fff !important;
}

body[class*="brand-"] .btn-info,
body[class*="brand-"] .badge-info,
body[class*="brand-"] .bg-info,
body[class*="brand-"] .bg-gradient-info,
body[class*="brand-"] .progress-bar.bg-info {
    background-color: var(--brand-status-info) !important;
    background-image: none !important;
    border-color: var(--brand-status-info) !important;
    color: #fff !important;
}

body[class*="brand-"] .btn-success,
body[class*="brand-"] .badge-success,
body[class*="brand-"] .bg-success,
body[class*="brand-"] .bg-gradient-success,
body[class*="brand-"] .progress-bar.bg-success {
    background-color: var(--brand-status-success) !important;
    background-image: none !important;
    border-color: var(--brand-status-success) !important;
    color: #fff !important;
}

body[class*="brand-"] .btn-warning,
body[class*="brand-"] .badge-warning,
body[class*="brand-"] .bg-warning,
body[class*="brand-"] .bg-gradient-warning,
body[class*="brand-"] .progress-bar.bg-warning {
    background-color: var(--brand-status-warning) !important;
    background-image: none !important;
    border-color: var(--brand-status-warning) !important;
    color: #2f2517 !important;
}

body[class*="brand-"] .btn-danger,
body[class*="brand-"] .badge-danger,
body[class*="brand-"] .bg-danger,
body[class*="brand-"] .bg-gradient-danger,
body[class*="brand-"] .progress-bar.bg-danger {
    background-color: var(--brand-status-danger) !important;
    background-image: none !important;
    border-color: var(--brand-status-danger) !important;
    color: #fff !important;
}

body[class*="brand-"] .btn-secondary,
body[class*="brand-"] .btn-default,
body[class*="brand-"] .badge-secondary,
body[class*="brand-"] .bg-secondary,
body[class*="brand-"] .bg-gradient-secondary,
body[class*="brand-"] .progress-bar.bg-secondary {
    background-color: var(--brand-status-neutral) !important;
    background-image: none !important;
    border-color: var(--brand-status-neutral) !important;
    color: #fff !important;
}

body[class*="brand-"] .btn-outline-primary,
body[class*="brand-"] .btn-outline-info,
body[class*="brand-"] .btn-outline-success,
body[class*="brand-"] .btn-outline-secondary {
    background-color: #fff !important;
}

body[class*="brand-"] .small-box {
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px var(--brand-widget-shadow) !important;
    overflow: hidden;
}

body[class*="brand-"] .small-box.bg-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
}

body[class*="brand-"] .small-box.bg-info {
    background: linear-gradient(135deg, var(--brand-status-info), var(--brand-secondary)) !important;
}

body[class*="brand-"] .small-box.bg-success {
    background: linear-gradient(135deg, var(--brand-status-success), var(--brand-primary)) !important;
}

body[class*="brand-"] .small-box.bg-warning {
    background: linear-gradient(135deg, var(--brand-status-warning), color-mix(in srgb, var(--brand-status-warning) 72%, var(--brand-secondary) 28%)) !important;
}

body[class*="brand-"] .small-box.bg-danger {
    background: linear-gradient(135deg, var(--brand-status-danger), color-mix(in srgb, var(--brand-status-danger) 70%, var(--brand-secondary) 30%)) !important;
}

body[class*="brand-"] .small-box .icon {
    color: rgba(255,255,255,.24) !important;
}

body[class*="brand-"] .small-box .small-box-footer {
    background: rgba(0,0,0,.12) !important;
    color: rgba(255,255,255,.94) !important;
}

body[class*="brand-"] .info-box-icon {
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

body[class*="brand-"] .info-box-text {
    color: var(--brand-muted) !important;
    font-weight: 600;
}

body[class*="brand-"] .info-box-number {
    color: var(--brand-text) !important;
}

body[class*="brand-"] .table thead th,
body[class*="brand-"] table.dataTable thead th {
    background: var(--brand-table-head) !important;
    border-bottom: 1px solid var(--brand-border) !important;
    color: var(--brand-text) !important;
}

body[class*="brand-"] .table td,
body[class*="brand-"] .table th {
    border-top-color: var(--brand-border) !important;
}

body[class*="brand-"] .table-hover tbody tr:hover {
    background-color: color-mix(in srgb, var(--brand-primary) 5%, #fff 95%) !important;
}

body[class*="brand-"] .page-item.active .page-link,
body[class*="brand-"] .page-item.active a {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

body[class*="brand-"] .page-link:hover,
body[class*="brand-"] .page-link:focus {
    background-color: color-mix(in srgb, var(--brand-primary) 9%, #fff 91%) !important;
    color: var(--brand-secondary) !important;
}

body[class*="brand-"] .dropdown-item:hover,
body[class*="brand-"] .dropdown-item:focus,
body[class*="brand-"] .dropdown-item.active,
body[class*="brand-"] .dropdown-item:active {
    background-color: color-mix(in srgb, var(--brand-primary) 10%, #fff 90%) !important;
    color: var(--brand-secondary) !important;
}

body[class*="brand-"] .dropdown-item:hover i,
body[class*="brand-"] .dropdown-item:focus i,
body[class*="brand-"] .dropdown-item.active i,
body[class*="brand-"] .dropdown-item:active i {
    color: var(--brand-secondary) !important;
}

body[class*="brand-"] .nav-tabs .nav-link,
body[class*="brand-"] .nav-pills .nav-link {
    border-radius: 6px !important;
}

body[class*="brand-"] .nav-pills .nav-link.active,
body[class*="brand-"] .nav-pills .show > .nav-link {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

body[class*="brand-"] .alert-info {
    background-color: color-mix(in srgb, var(--brand-status-info) 12%, #fff 88%) !important;
    border-color: color-mix(in srgb, var(--brand-status-info) 28%, #fff 72%) !important;
    color: var(--brand-text) !important;
}

body[class*="brand-"] .alert-success {
    background-color: color-mix(in srgb, var(--brand-status-success) 12%, #fff 88%) !important;
    border-color: color-mix(in srgb, var(--brand-status-success) 28%, #fff 72%) !important;
    color: var(--brand-text) !important;
}

body[class*="brand-"] .alert-warning {
    background-color: color-mix(in srgb, var(--brand-status-warning) 14%, #fff 86%) !important;
    border-color: color-mix(in srgb, var(--brand-status-warning) 32%, #fff 68%) !important;
    color: #3c2d18 !important;
}

body[class*="brand-"] .alert-danger {
    background-color: color-mix(in srgb, var(--brand-status-danger) 12%, #fff 88%) !important;
    border-color: color-mix(in srgb, var(--brand-status-danger) 30%, #fff 70%) !important;
    color: var(--brand-text) !important;
}

body[class*="brand-"] .form-control:focus,
body[class*="brand-"] .custom-select:focus,
body[class*="brand-"] .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
}

body[class*="brand-"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

body[class*="brand-"] .progress {
    background-color: var(--brand-surface-alt) !important;
    border-radius: 6px !important;
}

body[class*="brand-"] .modal-header.bg-primary,
body[class*="brand-"] .modal-header.bg-info,
body[class*="brand-"] .modal-header.bg-success,
body[class*="brand-"] .modal-header.bg-warning,
body[class*="brand-"] .modal-header.bg-danger {
    background-image: none !important;
}

body[class*="brand-"] .auth-card {
    box-shadow: 0 18px 44px rgba(18, 28, 38, .16) !important;
}