/* generated by scripts/gen-brand-css.mjs – do not edit */
:root {
  --kn-primary: #556ee6;
  --kn-primary-rgb: 85, 110, 230;
  --kn-secondary: #74788d;
  --kn-secondary-rgb: 116, 120, 141;
  --kn-success: #34c38f;
  --kn-success-rgb: 52, 195, 143;
  --kn-info: #50a5f1;
  --kn-info-rgb: 80, 165, 241;
  --kn-warning: #f1b44c;
  --kn-warning-rgb: 241, 180, 76;
  --kn-danger: #f46a6a;
  --kn-danger-rgb: 244, 106, 106;
}
:root {
    --bs-blue: var(--kn-primary);
    --bs-red: var(--kn-danger);
    --bs-yellow: var(--kn-warning);
    --bs-green: var(--kn-success);
    --bs-cyan: var(--kn-info);
    --bs-gray: var(--kn-secondary);
    --bs-gray-600: var(--kn-secondary);
    --bs-primary: var(--kn-primary);
    --bs-secondary: var(--kn-secondary);
    --bs-success: var(--kn-success);
    --bs-info: var(--kn-info);
    --bs-warning: var(--kn-warning);
    --bs-danger: var(--kn-danger);
    --bs-primary-rgb: var(--kn-primary-rgb);
    --bs-secondary-rgb: var(--kn-secondary-rgb);
    --bs-success-rgb: var(--kn-success-rgb);
    --bs-info-rgb: var(--kn-info-rgb);
    --bs-warning-rgb: var(--kn-warning-rgb);
    --bs-danger-rgb: var(--kn-danger-rgb);
    --bs-link-color: var(--kn-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--kn-primary), #000 20%)
}
.figure-caption {
    color: var(--kn-secondary)
}
.table-primary {
    --bs-table-bg: color-mix(in srgb, var(--kn-primary), #fff 80%)
}
.table-secondary {
    --bs-table-bg: color-mix(in srgb, var(--kn-secondary), #fff 80%)
}
.table-success {
    --bs-table-bg: color-mix(in srgb, var(--kn-success), #fff 80%)
}
.table-info {
    --bs-table-bg: color-mix(in srgb, var(--kn-info), #fff 80%)
}
.table-warning {
    --bs-table-bg: color-mix(in srgb, var(--kn-warning), #fff 80%)
}
.table-danger {
    --bs-table-bg: color-mix(in srgb, var(--kn-danger), #fff 80%)
}
.form-select:focus {
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-primary) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-primary) 25%, transparent)
}
.form-select:disabled {
    color: var(--kn-secondary)
}
.form-check-input:focus {
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-primary) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-primary) 25%, transparent)
}
.form-check-input:checked {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary)
}
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary)
}
.form-range::-webkit-slider-thumb {
    background-color: var(--kn-primary)
}
.form-range::-webkit-slider-thumb:active {
    background-color: color-mix(in srgb, var(--kn-primary), #fff 70%)
}
.form-range::-moz-range-thumb {
    background-color: var(--kn-primary)
}
.form-range::-moz-range-thumb:active {
    background-color: color-mix(in srgb, var(--kn-primary), #fff 70%)
}
.valid-feedback {
    color: var(--kn-success)
}
.valid-tooltip {
    background-color: color-mix(in srgb, var(--kn-success) 90%, transparent)
}
.was-validated .form-control:valid, .form-control.is-valid {
    border-color: var(--kn-success)
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
    border-color: var(--kn-success);
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-success) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-success) 25%, transparent)
}
.was-validated .form-select:valid, .form-select.is-valid {
    border-color: var(--kn-success)
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
    border-color: var(--kn-success);
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-success) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-success) 25%, transparent)
}
.was-validated .form-check-input:valid, .form-check-input.is-valid {
    border-color: var(--kn-success)
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
    background-color: var(--kn-success)
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-success) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-success) 25%, transparent)
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: var(--kn-success)
}
.invalid-feedback {
    color: var(--kn-danger)
}
.invalid-tooltip {
    background-color: color-mix(in srgb, var(--kn-danger) 90%, transparent)
}
.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: var(--kn-danger)
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border-color: var(--kn-danger);
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-danger) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-danger) 25%, transparent)
}
.was-validated .form-select:invalid, .form-select.is-invalid {
    border-color: var(--kn-danger)
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
    border-color: var(--kn-danger);
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-danger) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-danger) 25%, transparent)
}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
    border-color: var(--kn-danger)
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
    background-color: var(--kn-danger)
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
    -webkit-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-danger) 25%, transparent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-danger) 25%, transparent)
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
    color: var(--kn-danger)
}
.btn-primary {
    --bs-btn-bg: var(--kn-primary);
    --bs-btn-border-color: var(--kn-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kn-primary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kn-primary), #000 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--kn-primary), #000 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kn-primary), #000 25%);
    --bs-btn-disabled-bg: var(--kn-primary);
    --bs-btn-disabled-border-color: var(--kn-primary)
}
.btn-secondary {
    --bs-btn-bg: var(--kn-secondary);
    --bs-btn-border-color: var(--kn-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kn-secondary), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kn-secondary), #000 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--kn-secondary), #000 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kn-secondary), #000 25%);
    --bs-btn-disabled-bg: var(--kn-secondary);
    --bs-btn-disabled-border-color: var(--kn-secondary)
}
.btn-success {
    --bs-btn-bg: var(--kn-success);
    --bs-btn-border-color: var(--kn-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kn-success), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kn-success), #000 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--kn-success), #000 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kn-success), #000 25%);
    --bs-btn-disabled-bg: var(--kn-success);
    --bs-btn-disabled-border-color: var(--kn-success)
}
.btn-info {
    --bs-btn-bg: var(--kn-info);
    --bs-btn-border-color: var(--kn-info);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kn-info), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kn-info), #000 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--kn-info), #000 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kn-info), #000 25%);
    --bs-btn-disabled-bg: var(--kn-info);
    --bs-btn-disabled-border-color: var(--kn-info)
}
.btn-warning {
    --bs-btn-bg: var(--kn-warning);
    --bs-btn-border-color: var(--kn-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kn-warning), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kn-warning), #000 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--kn-warning), #000 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kn-warning), #000 25%);
    --bs-btn-disabled-bg: var(--kn-warning);
    --bs-btn-disabled-border-color: var(--kn-warning)
}
.btn-danger {
    --bs-btn-bg: var(--kn-danger);
    --bs-btn-border-color: var(--kn-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kn-danger), #000 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kn-danger), #000 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--kn-danger), #000 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--kn-danger), #000 25%);
    --bs-btn-disabled-bg: var(--kn-danger);
    --bs-btn-disabled-border-color: var(--kn-danger)
}
.btn-outline-primary {
    --bs-btn-color: var(--kn-primary);
    --bs-btn-border-color: var(--kn-primary);
    --bs-btn-hover-bg: var(--kn-primary);
    --bs-btn-hover-border-color: var(--kn-primary);
    --bs-btn-focus-shadow-rgb: var(--kn-primary-rgb);
    --bs-btn-active-bg: var(--kn-primary);
    --bs-btn-active-border-color: var(--kn-primary);
    --bs-btn-disabled-color: var(--kn-primary);
    --bs-btn-disabled-border-color: var(--kn-primary)
}
.btn-outline-secondary {
    --bs-btn-color: var(--kn-secondary);
    --bs-btn-border-color: var(--kn-secondary);
    --bs-btn-hover-bg: var(--kn-secondary);
    --bs-btn-hover-border-color: var(--kn-secondary);
    --bs-btn-focus-shadow-rgb: var(--kn-secondary-rgb);
    --bs-btn-active-bg: var(--kn-secondary);
    --bs-btn-active-border-color: var(--kn-secondary);
    --bs-btn-disabled-color: var(--kn-secondary);
    --bs-btn-disabled-border-color: var(--kn-secondary)
}
.btn-outline-success {
    --bs-btn-color: var(--kn-success);
    --bs-btn-border-color: var(--kn-success);
    --bs-btn-hover-bg: var(--kn-success);
    --bs-btn-hover-border-color: var(--kn-success);
    --bs-btn-focus-shadow-rgb: var(--kn-success-rgb);
    --bs-btn-active-bg: var(--kn-success);
    --bs-btn-active-border-color: var(--kn-success);
    --bs-btn-disabled-color: var(--kn-success);
    --bs-btn-disabled-border-color: var(--kn-success)
}
.btn-outline-info {
    --bs-btn-color: var(--kn-info);
    --bs-btn-border-color: var(--kn-info);
    --bs-btn-hover-bg: var(--kn-info);
    --bs-btn-hover-border-color: var(--kn-info);
    --bs-btn-focus-shadow-rgb: var(--kn-info-rgb);
    --bs-btn-active-bg: var(--kn-info);
    --bs-btn-active-border-color: var(--kn-info);
    --bs-btn-disabled-color: var(--kn-info);
    --bs-btn-disabled-border-color: var(--kn-info)
}
.btn-outline-warning {
    --bs-btn-color: var(--kn-warning);
    --bs-btn-border-color: var(--kn-warning);
    --bs-btn-hover-bg: var(--kn-warning);
    --bs-btn-hover-border-color: var(--kn-warning);
    --bs-btn-focus-shadow-rgb: var(--kn-warning-rgb);
    --bs-btn-active-bg: var(--kn-warning);
    --bs-btn-active-border-color: var(--kn-warning);
    --bs-btn-disabled-color: var(--kn-warning);
    --bs-btn-disabled-border-color: var(--kn-warning)
}
.btn-outline-danger {
    --bs-btn-color: var(--kn-danger);
    --bs-btn-border-color: var(--kn-danger);
    --bs-btn-hover-bg: var(--kn-danger);
    --bs-btn-hover-border-color: var(--kn-danger);
    --bs-btn-focus-shadow-rgb: var(--kn-danger-rgb);
    --bs-btn-active-bg: var(--kn-danger);
    --bs-btn-active-border-color: var(--kn-danger);
    --bs-btn-disabled-color: var(--kn-danger);
    --bs-btn-disabled-border-color: var(--kn-danger)
}
.btn-link {
    --bs-btn-disabled-color: var(--kn-secondary)
}
.dropdown-menu {
    --bs-dropdown-link-disabled-color: var(--kn-secondary);
    --bs-dropdown-header-color: var(--kn-secondary)
}
.nav {
    --bs-nav-link-disabled-color: var(--kn-secondary)
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--kn-primary)
}
.accordion {
    --bs-accordion-active-color: color-mix(in srgb, var(--kn-primary), #000 10%);
    --bs-accordion-active-bg: color-mix(in srgb, var(--kn-primary), #fff 90%)
}
.pagination {
    --bs-pagination-hover-color: color-mix(in srgb, var(--kn-primary), #000 20%);
    --bs-pagination-focus-color: color-mix(in srgb, var(--kn-primary), #000 20%);
    --bs-pagination-focus-box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--kn-primary) 25%, transparent);
    --bs-pagination-active-bg: var(--kn-primary);
    --bs-pagination-active-border-color: var(--kn-primary)
}
.alert-primary {
    --bs-alert-color: color-mix(in srgb, var(--kn-primary), #000 40%);
    --bs-alert-bg: color-mix(in srgb, var(--kn-primary), #fff 80%);
    --bs-alert-border-color: color-mix(in srgb, var(--kn-primary), #fff 70%)
}
.alert-primary .alert-link {
    color: color-mix(in srgb, var(--kn-primary), #000 52%)
}
.alert-secondary {
    --bs-alert-color: color-mix(in srgb, var(--kn-secondary), #000 40%);
    --bs-alert-bg: color-mix(in srgb, var(--kn-secondary), #fff 80%);
    --bs-alert-border-color: color-mix(in srgb, var(--kn-secondary), #fff 70%)
}
.alert-secondary .alert-link {
    color: color-mix(in srgb, var(--kn-secondary), #000 52%)
}
.alert-success {
    --bs-alert-color: color-mix(in srgb, var(--kn-success), #000 40%);
    --bs-alert-bg: color-mix(in srgb, var(--kn-success), #fff 80%);
    --bs-alert-border-color: color-mix(in srgb, var(--kn-success), #fff 70%)
}
.alert-success .alert-link {
    color: color-mix(in srgb, var(--kn-success), #000 52%)
}
.alert-info {
    --bs-alert-color: color-mix(in srgb, var(--kn-info), #000 40%);
    --bs-alert-bg: color-mix(in srgb, var(--kn-info), #fff 80%);
    --bs-alert-border-color: color-mix(in srgb, var(--kn-info), #fff 70%)
}
.alert-info .alert-link {
    color: color-mix(in srgb, var(--kn-info), #000 52%)
}
.alert-warning {
    --bs-alert-color: color-mix(in srgb, var(--kn-warning), #000 40%);
    --bs-alert-bg: color-mix(in srgb, var(--kn-warning), #fff 80%);
    --bs-alert-border-color: color-mix(in srgb, var(--kn-warning), #fff 70%)
}
.alert-danger {
    --bs-alert-color: color-mix(in srgb, var(--kn-danger), #000 40%);
    --bs-alert-bg: color-mix(in srgb, var(--kn-danger), #fff 80%);
    --bs-alert-border-color: color-mix(in srgb, var(--kn-danger), #fff 70%)
}
.alert-danger .alert-link {
    color: color-mix(in srgb, var(--kn-danger), #000 52%)
}
.progress {
    --bs-progress-bar-bg: var(--kn-primary)
}
.list-group {
    --bs-list-group-disabled-color: var(--kn-secondary);
    --bs-list-group-active-bg: var(--kn-primary);
    --bs-list-group-active-border-color: var(--kn-primary)
}
.list-group-item-primary {
    color: color-mix(in srgb, var(--kn-primary), #000 40%);
    background-color: color-mix(in srgb, var(--kn-primary), #fff 80%)
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
    color: color-mix(in srgb, var(--kn-primary), #000 40%)
}
.list-group-item-primary.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--kn-primary), #000 40%);
    border-color: color-mix(in srgb, var(--kn-primary), #000 40%)
}
.list-group-item-secondary {
    color: color-mix(in srgb, var(--kn-secondary), #000 40%);
    background-color: color-mix(in srgb, var(--kn-secondary), #fff 80%)
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
    color: color-mix(in srgb, var(--kn-secondary), #000 40%)
}
.list-group-item-secondary.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--kn-secondary), #000 40%);
    border-color: color-mix(in srgb, var(--kn-secondary), #000 40%)
}
.list-group-item-success {
    color: color-mix(in srgb, var(--kn-success), #000 40%);
    background-color: color-mix(in srgb, var(--kn-success), #fff 80%)
}
.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
    color: color-mix(in srgb, var(--kn-success), #000 40%)
}
.list-group-item-success.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--kn-success), #000 40%);
    border-color: color-mix(in srgb, var(--kn-success), #000 40%)
}
.list-group-item-info {
    color: color-mix(in srgb, var(--kn-info), #000 40%);
    background-color: color-mix(in srgb, var(--kn-info), #fff 80%)
}
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
    color: color-mix(in srgb, var(--kn-info), #000 40%)
}
.list-group-item-info.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--kn-info), #000 40%);
    border-color: color-mix(in srgb, var(--kn-info), #000 40%)
}
.list-group-item-warning {
    color: color-mix(in srgb, var(--kn-warning), #000 40%);
    background-color: color-mix(in srgb, var(--kn-warning), #fff 80%)
}
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
    color: color-mix(in srgb, var(--kn-warning), #000 40%)
}
.list-group-item-warning.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--kn-warning), #000 40%);
    border-color: color-mix(in srgb, var(--kn-warning), #000 40%)
}
.list-group-item-danger {
    color: color-mix(in srgb, var(--kn-danger), #000 40%);
    background-color: color-mix(in srgb, var(--kn-danger), #fff 80%)
}
.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
    color: color-mix(in srgb, var(--kn-danger), #000 40%)
}
.list-group-item-danger.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--kn-danger), #000 40%);
    border-color: color-mix(in srgb, var(--kn-danger), #000 40%)
}
.link-primary {
    color: var(--kn-primary) !important
}
.link-primary:hover, .link-primary:focus {
    color: color-mix(in srgb, var(--kn-primary), #000 20%) !important
}
.link-secondary {
    color: var(--kn-secondary) !important
}
.link-secondary:hover, .link-secondary:focus {
    color: color-mix(in srgb, var(--kn-secondary), #000 20%) !important
}
.link-success {
    color: var(--kn-success) !important
}
.link-success:hover, .link-success:focus {
    color: color-mix(in srgb, var(--kn-success), #000 20%) !important
}
.link-info {
    color: var(--kn-info) !important
}
.link-info:hover, .link-info:focus {
    color: color-mix(in srgb, var(--kn-info), #000 20%) !important
}
.link-warning {
    color: var(--kn-warning) !important
}
.link-warning:hover, .link-warning:focus {
    color: color-mix(in srgb, var(--kn-warning), #000 20%) !important
}
.link-danger {
    color: var(--kn-danger) !important
}
.link-danger:hover, .link-danger:focus {
    color: color-mix(in srgb, var(--kn-danger), #000 20%) !important
}
.bg-primary.bg-soft {
    background-color: color-mix(in srgb, var(--kn-primary) 25%, transparent) !important
}
.bg-secondary.bg-soft {
    background-color: color-mix(in srgb, var(--kn-secondary) 25%, transparent) !important
}
.bg-success.bg-soft {
    background-color: color-mix(in srgb, var(--kn-success) 25%, transparent) !important
}
.bg-info.bg-soft {
    background-color: color-mix(in srgb, var(--kn-info) 25%, transparent) !important
}
.bg-warning.bg-soft {
    background-color: color-mix(in srgb, var(--kn-warning) 25%, transparent) !important
}
.bg-danger.bg-soft {
    background-color: color-mix(in srgb, var(--kn-danger) 25%, transparent) !important
}
.badge-soft-primary {
    color: var(--kn-primary);
    background-color: color-mix(in srgb, var(--kn-primary) 18%, transparent)
}
.badge-soft-primary[href]:hover, .badge-soft-primary[href]:focus {
    color: var(--kn-primary);
    background-color: color-mix(in srgb, var(--kn-primary) 40%, transparent)
}
.badge.bg-secondary[href]:hover, .badge.bg-secondary[href]:focus {
    background-color: color-mix(in srgb, var(--kn-secondary), #000 8%) !important
}
.badge-soft-secondary {
    color: var(--kn-secondary);
    background-color: color-mix(in srgb, var(--kn-secondary) 18%, transparent)
}
.badge-soft-secondary[href]:hover, .badge-soft-secondary[href]:focus {
    color: var(--kn-secondary);
    background-color: color-mix(in srgb, var(--kn-secondary) 40%, transparent)
}
.badge-soft-success {
    color: var(--kn-success);
    background-color: color-mix(in srgb, var(--kn-success) 18%, transparent)
}
.badge-soft-success[href]:hover, .badge-soft-success[href]:focus {
    color: var(--kn-success);
    background-color: color-mix(in srgb, var(--kn-success) 40%, transparent)
}
.badge-soft-info {
    color: var(--kn-info);
    background-color: color-mix(in srgb, var(--kn-info) 18%, transparent)
}
.badge-soft-info[href]:hover, .badge-soft-info[href]:focus {
    color: var(--kn-info);
    background-color: color-mix(in srgb, var(--kn-info) 40%, transparent)
}
.badge-soft-warning {
    color: var(--kn-warning);
    background-color: color-mix(in srgb, var(--kn-warning) 18%, transparent)
}
.badge-soft-warning[href]:hover, .badge-soft-warning[href]:focus {
    color: var(--kn-warning);
    background-color: color-mix(in srgb, var(--kn-warning) 40%, transparent)
}
.badge-soft-danger {
    color: var(--kn-danger);
    background-color: color-mix(in srgb, var(--kn-danger) 18%, transparent)
}
.badge-soft-danger[href]:hover, .badge-soft-danger[href]:focus {
    color: var(--kn-danger);
    background-color: color-mix(in srgb, var(--kn-danger) 40%, transparent)
}
.btn-group-example .btn:before {
    background-color: var(--kn-secondary)
}
.btn-soft-primary {
    color: var(--kn-primary);
    background-color: color-mix(in srgb, var(--kn-primary) 10%, transparent)
}
.btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active {
    background-color: var(--kn-primary)
}
.btn-soft-secondary {
    color: var(--kn-secondary);
    background-color: color-mix(in srgb, var(--kn-secondary) 10%, transparent)
}
.btn-soft-secondary:hover, .btn-soft-secondary:focus, .btn-soft-secondary:active {
    background-color: var(--kn-secondary)
}
.btn-soft-success {
    color: var(--kn-success);
    background-color: color-mix(in srgb, var(--kn-success) 10%, transparent)
}
.btn-soft-success:hover, .btn-soft-success:focus, .btn-soft-success:active {
    background-color: var(--kn-success)
}
.btn-soft-info {
    color: var(--kn-info);
    background-color: color-mix(in srgb, var(--kn-info) 10%, transparent)
}
.btn-soft-info:hover, .btn-soft-info:focus, .btn-soft-info:active {
    background-color: var(--kn-info)
}
.btn-soft-warning {
    color: var(--kn-warning);
    background-color: color-mix(in srgb, var(--kn-warning) 10%, transparent)
}
.btn-soft-warning:hover, .btn-soft-warning:focus, .btn-soft-warning:active {
    background-color: var(--kn-warning)
}
.btn-soft-danger {
    color: var(--kn-danger);
    background-color: color-mix(in srgb, var(--kn-danger) 10%, transparent)
}
.btn-soft-danger:hover, .btn-soft-danger:focus, .btn-soft-danger:active {
    background-color: var(--kn-danger)
}
.like-btn.active .bx-heart {
    color: var(--kn-danger)
}
.nav-tabs-custom .nav-item .nav-link::after {
    background: var(--kn-primary)
}
.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--kn-primary)
}
:root {
    --bs-footer-color: var(--kn-secondary)
}
[data-layout-mode=dark] {
    --bs-heading-dark-bg: var(--kn-primary)
}
[data-layout-mode=dark] .nav-tabs {
    --bs-nav-tabs-link-active-color: var(--kn-primary)
}
[data-layout-mode=dark] .accordion {
    --bs-accordion-active-bg: color-mix(in srgb, var(--kn-primary) 10%, transparent)
}
.mm-active {
    color: var(--kn-primary) !important
}
.mm-active > a {
    color: var(--kn-primary) !important
}
.mm-active > a i {
    color: var(--kn-primary) !important
}
.mm-active .active {
    color: var(--kn-primary) !important
}
.mm-active .active i {
    color: var(--kn-primary) !important
}
.mm-active > i {
    color: var(--kn-primary) !important
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    color: var(--kn-primary)
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
    color: var(--kn-primary)
}
body[data-sidebar=colored] .vertical-menu {
    background-color: var(--kn-primary)
}
body[data-sidebar=colored] .navbar-brand-box {
    background-color: var(--kn-primary)
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
    color: var(--kn-primary) !important
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li a:hover {
    color: var(--kn-primary)
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active {
    color: var(--kn-primary) !important
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active > a {
    color: var(--kn-primary) !important
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active > a i {
    color: var(--kn-primary) !important
}
.topnav .navbar-nav .nav-link:focus, .topnav .navbar-nav .nav-link:hover {
    color: var(--kn-primary)
}
.topnav .navbar-nav .dropdown-item.active, .topnav .navbar-nav .dropdown-item:hover {
    color: var(--kn-primary)
}
.topnav .navbar-nav .nav-item .nav-link.active {
    color: var(--kn-primary)
}
.topnav .navbar-nav .dropdown.active > a {
    color: var(--kn-primary)
}
@media (max-width: 991.98px) {
    .topnav .dropdown .dropdown-item.active, .topnav .dropdown .dropdown-item:active {
        color: var(--kn-primary)
    }
}
@media (min-width: 992px) {
    body[data-layout=horizontal][data-topbar=light] .topnav {
        background-color: var(--kn-primary)
    }
}
body[data-layout=horizontal][data-topbar=colored] #page-topbar {
    background-color: var(--kn-primary)
}
@media (min-width: 992px) {
    body[data-layout=horizontal][data-topbar=colored] .topnav {
        background-color: var(--kn-primary)
    }
}
.waves-effect.waves-primary .waves-ripple {
    background-color: color-mix(in srgb, var(--kn-primary) 40%, transparent)
}
.waves-effect.waves-success .waves-ripple {
    background-color: color-mix(in srgb, var(--kn-success) 40%, transparent)
}
.waves-effect.waves-info .waves-ripple {
    background-color: color-mix(in srgb, var(--kn-info) 40%, transparent)
}
.waves-effect.waves-warning .waves-ripple {
    background-color: color-mix(in srgb, var(--kn-warning) 40%, transparent)
}
.waves-effect.waves-danger .waves-ripple {
    background-color: color-mix(in srgb, var(--kn-danger) 40%, transparent)
}
.avatar-title {
    background-color: var(--kn-primary)
}
.social-list-item:hover {
    color: var(--kn-secondary)
}
.chase-dot:before {
    background-color: var(--kn-primary)
}
.form-check-primary .form-check-input:checked {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary)
}
.form-radio-primary .form-check-input:checked {
    border-color: var(--kn-primary);
    background-color: var(--kn-primary)
}
.form-radio-primary .form-check-input:checked:after {
    background-color: var(--kn-primary)
}
.form-check-secondary .form-check-input:checked {
    background-color: var(--kn-secondary);
    border-color: var(--kn-secondary)
}
.form-radio-secondary .form-check-input:checked {
    border-color: var(--kn-secondary);
    background-color: var(--kn-secondary)
}
.form-radio-secondary .form-check-input:checked:after {
    background-color: var(--kn-secondary)
}
.form-check-success .form-check-input:checked {
    background-color: var(--kn-success);
    border-color: var(--kn-success)
}
.form-radio-success .form-check-input:checked {
    border-color: var(--kn-success);
    background-color: var(--kn-success)
}
.form-radio-success .form-check-input:checked:after {
    background-color: var(--kn-success)
}
.form-check-info .form-check-input:checked {
    background-color: var(--kn-info);
    border-color: var(--kn-info)
}
.form-radio-info .form-check-input:checked {
    border-color: var(--kn-info);
    background-color: var(--kn-info)
}
.form-radio-info .form-check-input:checked:after {
    background-color: var(--kn-info)
}
.form-check-warning .form-check-input:checked {
    background-color: var(--kn-warning);
    border-color: var(--kn-warning)
}
.form-radio-warning .form-check-input:checked {
    border-color: var(--kn-warning);
    background-color: var(--kn-warning)
}
.form-radio-warning .form-check-input:checked:after {
    background-color: var(--kn-warning)
}
.form-check-danger .form-check-input:checked {
    background-color: var(--kn-danger);
    border-color: var(--kn-danger)
}
.form-radio-danger .form-check-input:checked {
    border-color: var(--kn-danger);
    background-color: var(--kn-danger)
}
.form-radio-danger .form-check-input:checked:after {
    background-color: var(--kn-danger)
}
.icon-demo-content i {
    color: var(--kn-secondary)
}
.icon-demo-content .col-lg-4:hover i {
    color: var(--kn-primary)
}
.card-radio-input:checked + .card-radio {
    border-color: var(--kn-primary) !important
}
.navs-carousel .owl-nav button {
    background-color: color-mix(in srgb, var(--kn-primary) 25%, transparent) !important;
    color: var(--kn-primary) !important
}
.tui-full-calendar-confirm {
    background-color: var(--kn-danger) !important
}
.tui-full-calendar-confirm:hover {
    background-color: color-mix(in srgb, var(--kn-danger), #000 20%) !important
}
.fc-state-down,
.fc-state-active,
.fc-state-disabled {
    background-color: var(--kn-primary)
}
.fc-event,
.fc-event-dot {
    background-color: var(--kn-primary)
}
#session-timeout-dialog .countdown-holder {
    color: var(--kn-danger)
}
#session-timeout-dialog .btn-default {
    color: var(--kn-danger)
}
.irs--square .irs-bar,
.irs--square .irs-to,
.irs--square .irs-from,
.irs--square .irs-single {
    background: var(--kn-primary) !important
}
.irs--square .irs-to:before,
.irs--square .irs-from:before,
.irs--square .irs-single:before {
    border-top-color: var(--kn-primary)
}
.irs--square .irs-handle {
    border: 2px solid var(--kn-primary)
}
.swal2-icon.swal2-question {
    border-color: var(--kn-info);
    color: var(--kn-info)
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--kn-success)
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--kn-success) 30%, transparent)
}
.swal2-icon.swal2-warning {
    border-color: var(--kn-warning);
    color: var(--kn-warning)
}
.swal2-progress-steps .swal2-progress-step {
    background: var(--kn-primary)
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: var(--kn-primary)
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
    background: color-mix(in srgb, var(--kn-primary) 30%, transparent)
}
.swal2-progress-steps .swal2-progress-step-line {
    background: var(--kn-primary)
}
.swal2-loader {
    border-color: var(--kn-primary) transparent var(--kn-primary) transparent
}
.toast-primary {
    border: 2px solid var(--kn-primary) !important;
    background-color: color-mix(in srgb, var(--kn-primary) 80%, transparent) !important
}
.toast-secondary {
    border: 2px solid var(--kn-secondary) !important;
    background-color: color-mix(in srgb, var(--kn-secondary) 80%, transparent) !important
}
.toast-success {
    border: 2px solid var(--kn-success) !important;
    background-color: color-mix(in srgb, var(--kn-success) 80%, transparent) !important
}
.toast-info {
    border: 2px solid var(--kn-info) !important;
    background-color: color-mix(in srgb, var(--kn-info) 80%, transparent) !important
}
.toast-warning {
    border: 2px solid var(--kn-warning) !important;
    background-color: color-mix(in srgb, var(--kn-warning) 80%, transparent) !important
}
.toast-danger {
    border: 2px solid var(--kn-danger) !important;
    background-color: color-mix(in srgb, var(--kn-danger) 80%, transparent) !important
}
.toast-error {
    background-color: color-mix(in srgb, var(--kn-danger) 80%, transparent);
    border: 2px solid var(--kn-danger)
}
.error {
    color: var(--kn-danger)
}
.parsley-error {
    border-color: var(--kn-danger)
}
.parsley-errors-list > li {
    color: var(--kn-danger)
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--kn-primary)
}
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: var(--kn-primary)
}
input[switch]:checked + label {
    background-color: var(--kn-primary)
}
input[switch]:checked + label {
    background-color: var(--kn-primary)
}
input[switch=bool] + label {
    background-color: var(--kn-danger)
}
input[switch=bool]:checked + label {
    background-color: var(--kn-success)
}
input[switch=primary]:checked + label {
    background-color: var(--kn-primary)
}
input[switch=success]:checked + label {
    background-color: var(--kn-success)
}
input[switch=info]:checked + label {
    background-color: var(--kn-info)
}
input[switch=warning]:checked + label {
    background-color: var(--kn-warning)
}
input[switch=danger]:checked + label {
    background-color: var(--kn-danger)
}
.sp-container button.sp-choose {
    background-color: var(--kn-success)
}
.bootstrap-timepicker-widget table td a:hover {
    color: var(--kn-primary)
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td .active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.selected, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active {
    background-color: var(--kn-primary) !important
}
.datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover {
    background-color: color-mix(in srgb, var(--kn-primary) 25%, transparent);
    color: var(--kn-primary)
}
.datepicker-panel > ul > li.highlighted, .datepicker-panel > ul > li.highlighted:hover, .datepicker-panel > ul > li:hover {
    background-color: var(--kn-primary)
}
.tox .tox-button:hover {
    background-color: var(--kn-primary) !important;
    border-color: var(--kn-primary) !important
}
.wizard .steps > ul > li a {
    background-color: color-mix(in srgb, var(--kn-primary) 10%, transparent)
}
.wizard .steps .number {
    border: 2px solid var(--kn-primary);
    color: var(--kn-primary)
}
.wizard .steps .current a, .wizard .steps .current a:active, .wizard .steps .current a:hover {
    background-color: color-mix(in srgb, var(--kn-primary) 20%, transparent)
}
.wizard .steps .current a .number, .wizard .steps .current a:active .number, .wizard .steps .current a:hover .number {
    background-color: var(--kn-primary)
}
.wizard > .actions a, .wizard > .actions a:active, .wizard > .actions a:hover {
    background-color: var(--kn-primary)
}
.wizard > .actions .disabled a, .wizard > .actions .disabled a:active, .wizard > .actions .disabled a:hover {
    background-color: var(--kn-primary)
}
.table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: var(--kn-primary)
}
.table-rep-plugin .btn-group .btn-default {
    background-color: var(--kn-secondary);
    border: 1px solid var(--kn-secondary)
}
.table-rep-plugin .btn-group .btn-default.btn-primary {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary);
    -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--kn-primary) 50%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kn-primary) 50%, transparent)
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::before {
    background-color: var(--kn-primary);
    border-color: var(--kn-primary)
}
.table-rep-plugin .fixed-solution .sticky-table-header {
    background-color: var(--kn-primary)
}
.table-rep-plugin table.focus-on tbody tr.focused th,
.table-rep-plugin table.focus-on tbody tr.focused td,
.table-rep-plugin .sticky-table-header {
    background: var(--kn-primary);
    border-color: var(--kn-primary)
}
.apexcharts-legend-text {
    color: var(--kn-secondary) !important
}
.gmaps-overlay {
    background: var(--kn-primary)
}
.gmaps-overlay_arrow.above {
    border-top: 16px solid var(--kn-primary)
}
.gmaps-overlay_arrow.below {
    border-bottom: 16px solid var(--kn-primary)
}
.auth-full-bg {
    background-color: color-mix(in srgb, var(--kn-primary) 25%, transparent)
}
.auth-review-carousel.owl-theme .owl-dots .owl-dot span {
    background-color: color-mix(in srgb, var(--kn-primary) 25%, transparent)
}
.auth-review-carousel.owl-theme .owl-dots .owl-dot.active span, .auth-review-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--kn-primary)
}
.product-color a.active, .product-color a:hover {
    color: var(--kn-primary)
}
.product-color a.active .product-color-item, .product-color a:hover .product-color-item {
    border-color: var(--kn-primary) !important
}
.checkout-tabs .nav-pills .nav-link.active {
    background-color: var(--kn-primary)
}
.mail-list a.active {
    color: var(--kn-danger)
}
.message-list li.active, .message-list li.active:hover {
    -webkit-box-shadow: inset -3px 0 0 var(--kn-primary);
    box-shadow: inset -3px 0 0 var(--kn-primary)
}
.categories-list li.active a {
    color: var(--kn-primary)
}
.chat-noti-dropdown.active:before {
    background-color: var(--kn-danger)
}
.chat-conversation .conversation-list .ctext-wrap {
    background-color: color-mix(in srgb, var(--kn-primary) 10%, transparent)
}
.chat-conversation .conversation-list .ctext-wrap .conversation-name {
    color: var(--kn-primary)
}
.chat-conversation .last-chat .conversation-list:before {
    color: var(--kn-primary)
}
@media (min-width: 576px) {
    .currency-value:after {
        background-color: var(--kn-primary)
    }
}
@media (max-width: 991.98px) {
    .navigation .navbar-nav .nav-item .nav-link:hover, .navigation .navbar-nav .nav-item .nav-link.active {
        color: var(--kn-primary)
    }
}
.navigation.nav-sticky .navbar-nav .nav-item .nav-link:hover, .navigation.nav-sticky .navbar-nav .nav-item .nav-link.active {
    color: var(--kn-primary)
}
.verti-timeline .event-list.active .event-timeline-dot {
    color: var(--kn-primary)
}
.jobs-categories a:hover {
    color: var(--kn-primary)
}