/**
 * DMS Common CSS - App overrides (single place for Bootstrap / Font Awesome customization)
 * Location: public/common/css/app.css
 * Load order: vendor/bootstrap -> vendor/fontawesome -> focus/app_end-ltr|rtl.css -> common/css/tokens.css -> common/css/app.css
 * To change a color / font-size / spacing / button style, edit tokens.css (variable) or the SECTION below, not scattered files.
 * Sources merged (2026-09-04): public/css/common.css | public/css/public.css | public/css/paid.css | public/css/access-control.css
 */

/* ===== SECTION 1/4: common.css (Bootstrap/FA overrides + utilities, was public/css/common.css) ===== */

.margin-top-right-3 {
    margin-top: 1px;
    margin-right: 3px;
}

.margin-top-2-right-3 {
    margin-top: 1px;
    margin-right: 3px;
}

.margin-top-margin-right-2 {
    margin-top: 2px;
    margin-right: 2px;
}

.margin-right-2 {
    margin-right: 2px;
}

.item-align-center {
    width: 100%;
    margin: 0 auto;
}

.item-align-center-discount {
    width: 100%;
    margin: 0 auto;
}

.page-breadcrumb {
    height: 75px;
}

.protip-skin-default--scheme-pro.protip-container {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: var(--white);
}

.protip-skin-default--scheme-pro[data-pt-position="top-left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top-right"] .protip-arrow {
    border-top-color: var(--white);
}

.protip-skin-default--scheme-pro[data-pt-position="right-top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="right"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="right-bottom"] .protip-arrow {
    border-right-color: var(--white);
}

.protip-skin-default--scheme-pro[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="bottom"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="bottom-right"] .protip-arrow {
    border-bottom-color: var(--white);
}

.protip-skin-default--scheme-pro[data-pt-position="left-top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="left-bottom"] .protip-arrow {
    border-left-color: var(--white);
}

.protip-skin-default--scheme-pro.protip-container {
    font-family: Roboto, Helvetica, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.2rem;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.2;
}

a {
    color: var(--bs-primary);
    text-decoration: none;
}

a:hover {
    color: var(--bs-icon-color-hover);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

#main-menu-navigation .nav-item i,
.nav-item .mega-dropdown-menu i {
    min-width: 14px;
}

.progress {
    height: 24px;
}

.form-control,
.typeahead.tt-input,
.typeahead.tt-hint,
.select2-container--default .select2-search--dropdown .select2-search__field {
    display: block;
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--bs-light);
    appearance: none;
    border-radius: 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

div.form-control.disabled,
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--bs-gray-200);
}

div.form-control {
    line-height: 1rem;
}

.paid-row .select2-container {
    width: 100% !important;
}

.swal2-popup {
    font-size: 0.875rem;
}

.swal2-popup .swal2-title {
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0;
}

.swal2-popup .swal2-html-container {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    font-weight: initial;
    margin-top: 11px;
    text-decoration: none;
}

.swal2-popup .swal2-actions button svg {
    width: 16px;
    height: 16px;
}

.swal2-popup .swal2-close {
    font-size: 22px;
}

.swal2-popup .swal2-close:focus {
    box-shadow: none;
}

.swal2-popup .swal2-timer-progress-bar {
    background: var(--bs-secondary);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bs-light);
    border-radius: 10px;
}

.select2-container--focus.select2-container--default .select2-selection--single,
.select2-container--focus.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border: 1px solid var(--bs-primary-hover);
}

.select2-dropdown {
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
}

.select2-container--default .select2-dropdown--below .select2-results__options .select2-results__option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

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

/* .select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
height: auto;
} */

/* .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.5;
padding: 12px 15px;
} */
/* .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
} */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: 0;
}

.select2-container--default .select2-selection--multiple {
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-primary);
    color: var(--white);
    border-color: var(--bs-primary);
    padding: 1px 8px 1px 20px;
    border-radius: 10px;
    margin-top: 5px;
}

.select2-container--classic .select2-results__options .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: var(--bs-primary);
    color: var(--white);
}

.select2-container .select2-search--inline .select2-search__field {
    margin: 0;
    height: 21px;
    color: var(--bs-body-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--white);
    opacity: 0.7;
    border-right: none;
    padding: 1px 4px 0 8px
}

.select2-container .select2-search--inline {
    margin-top: 3px;
}

.wizard>.actions a,
.wizard>.actions a:active,
.wizard>.actions a:hover,
div.tox .tox-button,
.swal2-popup .swal2-actions button,
.fc .fc-button-primary {
    display: inline-block;
    font-weight: 400;
    color: var(--bs-body-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 12px 18px;
    font-size: 1rem;
    border-radius: .5rem;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* :hover, .wizard > .actions a:hover, div.tox .tox-button:hover, .swal2-popup .swal2-actions button:hover, .fc .fc-button-primary:hover {
color: var(--bs-body-color);
} */
.btn-check:focus+.btn,
.wizard>.actions .btn-check:focus+a,
div.tox .btn-check:focus+.tox-button,
.swal2-popup .swal2-actions .btn-check:focus+button,
.fc .btn-check:focus+.fc-button-primary,
.btn:focus,
.wizard>.actions a:focus,
div.tox .tox-button:focus,
.swal2-popup .swal2-actions button:focus,
.fc .fc-button-primary:focus {
    outline: 0;
    box-shadow: none;
}

.btn:disabled,
.wizard>.actions a:disabled,
div.tox .tox-button:disabled,
.swal2-popup .swal2-actions button:disabled,
.fc .fc-button-primary:disabled,
.btn.disabled,
.wizard>.actions a.disabled,
div.tox .disabled.tox-button,
.swal2-popup .swal2-actions button.disabled,
.fc .disabled.fc-button-primary,
fieldset:disabled .btn,
fieldset:disabled .wizard>.actions a,
.wizard>.actions fieldset:disabled a,
fieldset:disabled div.tox .tox-button,
div.tox fieldset:disabled .tox-button,
fieldset:disabled .swal2-popup .swal2-actions button,
.swal2-popup .swal2-actions fieldset:disabled button,
fieldset:disabled .fc .fc-button-primary,
.fc fieldset:disabled .fc-button-primary {
    pointer-events: none;
    opacity: 0.65;
}

.btn-primary,
.wizard>.actions a,
.wizard>.actions a:active,
.wizard>.actions a:hover,
div.tox .tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    color: var(--white);
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn-primary:hover,
.wizard>.actions a:hover,
div.tox .tox-button:hover:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm:hover,
.fc .fc-button-primary.fc-button-active:hover:not(:disabled),
.fc .fc-button-primary:hover:not(:disabled):active {
    color: var(--white);
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn-check:focus+.btn-primary,
.wizard>.actions .btn-check:focus+a,
div.tox .btn-check:focus+.tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .btn-check:focus+button.swal2-confirm,
.fc .btn-check:focus+.fc-button-primary:not(:disabled).fc-button-active,
.fc .btn-check:focus+.fc-button-primary:not(:disabled):active,
.btn-primary:focus,
.wizard>.actions a:focus,
div.tox .tox-button:focus:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm:focus,
.fc .fc-button-primary.fc-button-active:focus:not(:disabled),
.fc .fc-button-primary:focus:not(:disabled):active {
    color: var(--white);
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    box-shadow: 0 0 0 0 rgba(var(--bs-box-shadow-rgb), 0.5);
}

.btn-check:checked+.btn-primary,
.wizard>.actions .btn-check:checked+a,
div.tox .btn-check:checked+.tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .btn-check:checked+button.swal2-confirm,
.fc .btn-check:checked+.fc-button-primary:not(:disabled).fc-button-active,
.btn-check:active+.btn-primary,
.wizard>.actions .btn-check:active+a,
div.tox .btn-check:active+.tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .btn-check:active+button.swal2-confirm,
.fc .btn-check:active+.fc-button-primary:not(:disabled).fc-button-active,
.btn-primary:active,
.wizard>.actions a:active,
div.tox .tox-button:active:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm:active,
.fc .fc-button-primary:active:not(:disabled),
.btn-primary.active,
.wizard>.actions a.active,
div.tox .active.tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.active.swal2-confirm,
.fc .active.fc-button-primary.fc-button-active:not(:disabled),
.show>.btn-primary.dropdown-toggle,
.wizard>.actions .show>a.dropdown-toggle,
div.tox .show>.dropdown-toggle.tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-confirm,
.fc .show>.dropdown-toggle.fc-button-primary.fc-button-active:not(:disabled) {
    color: var(--white);
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}

.btn-check:checked+.btn-primary:focus,
.wizard>.actions .btn-check:checked+a:focus,
div.tox .btn-check:checked+.tox-button:focus:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .btn-check:checked+button.swal2-confirm:focus,
.fc .btn-check:checked+.fc-button-primary.fc-button-active:focus:not(:disabled),
.btn-check:active+.btn-primary:focus,
.wizard>.actions .btn-check:active+a:focus,
div.tox .btn-check:active+.tox-button:focus:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .btn-check:active+button.swal2-confirm:focus,
.fc .btn-check:active+.fc-button-primary.fc-button-active:focus:not(:disabled),
.btn-primary:active:focus,
.wizard>.actions a:active:focus,
div.tox .tox-button:active:focus:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm:active:focus,
.fc .fc-button-primary:active:focus:not(:disabled),
.btn-primary.active:focus,
.wizard>.actions a.active:focus,
div.tox .active.tox-button:focus:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.active.swal2-confirm:focus,
.fc .active.fc-button-primary.fc-button-active:focus:not(:disabled),
.show>.btn-primary.dropdown-toggle:focus,
.wizard>.actions .show>a.dropdown-toggle:focus,
div.tox .show>.dropdown-toggle.tox-button:focus:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-confirm:focus,
.fc .show>.dropdown-toggle.fc-button-primary.fc-button-active:focus:not(:disabled) {
    box-shadow: 0 0 0 0 rgba(var(--bs-box-shadow-rgb), 0.5);
}

.btn-primary:disabled,
.wizard>.actions a:disabled,
div.tox .tox-button:disabled:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm:disabled,
.fc .fc-button-primary.fc-button-active:disabled:not(:disabled),
.fc .fc-button-primary:disabled:not(:disabled):active,
.btn-primary.disabled,
.wizard>.actions a.disabled,
div.tox .disabled.tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.disabled.swal2-confirm,
.fc .disabled.fc-button-primary.fc-button-active:not(:disabled),
.fc .disabled.fc-button-primary:not(:disabled):active {
    color: var(--white);
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}

.btn-secondary,
div.tox .tox-button--secondary {
    color: var(--white);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary:hover,
div.tox .tox-button--secondary:hover {
    color: var(--white);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-border);
}

.btn-check:focus+.btn-secondary,
div.tox .btn-check:focus+.tox-button--secondary,
.btn-secondary:focus,
div.tox .tox-button--secondary:focus {
    color: var(--white);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-border);
    box-shadow: 0 0 0 0 rgba(var(--bs-secondary-shadow-rgb), 0.5);
}

.btn-check:checked+.btn-secondary,
div.tox .btn-check:checked+.tox-button--secondary,
.btn-check:active+.btn-secondary,
div.tox .btn-check:active+.tox-button--secondary,
.btn-secondary:active,
div.tox .tox-button--secondary:active,
.btn-secondary.active,
div.tox .active.tox-button--secondary,
.show>.btn-secondary.dropdown-toggle,
div.tox .show>.dropdown-toggle.tox-button--secondary {
    color: var(--white);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-border);
}

.btn-check:checked+.btn-secondary:focus,
div.tox .btn-check:checked+.tox-button--secondary:focus,
.btn-check:active+.btn-secondary:focus,
div.tox .btn-check:active+.tox-button--secondary:focus,
.btn-secondary:active:focus,
div.tox .tox-button--secondary:active:focus,
.btn-secondary.active:focus,
div.tox .active.tox-button--secondary:focus,
.show>.btn-secondary.dropdown-toggle:focus,
div.tox .show>.dropdown-toggle.tox-button--secondary:focus {
    box-shadow: 0 0 0 0 rgba(var(--bs-secondary-shadow-rgb), 0.5);
}

.btn-secondary:disabled,
div.tox .tox-button--secondary:disabled,
.btn-secondary.disabled,
div.tox .disabled.tox-button--secondary {
    color: var(--white);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-success,
.btn-approved {
    color: var(--white);
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

.btn-success:hover,
.btn-approved:hover {
    color: var(--white);
    background-color: var(--bs-success-hover-bg) !important;
    border-color: var(--bs-success-hover-border) !important;
}

.btn-check:focus+.btn-success,
.btn-success:focus {
    color: var(--white);
    background-color: var(--bs-success-hover-bg);
    border-color: var(--bs-success-hover-border);
    box-shadow: 0 0 0 0 rgba(var(--bs-success-shadow-rgb), 0.5);
}

.btn-check:checked+.btn-success,
.btn-check:active+.btn-success,
.btn-success:active,
.btn-success.active,
.show>.btn-success.dropdown-toggle {
    color: var(--white);
    background-color: var(--bs-success-hover-bg);
    border-color: var(--bs-success-hover-border);
}

.btn-check:checked+.btn-success:focus,
.btn-check:active+.btn-success:focus,
.btn-success:active:focus,
.btn-success.active:focus,
.show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(var(--bs-success-shadow-rgb), 0.5);
}

.btn-success:disabled,
.btn-success.disabled {
    color: var(--white);
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-info,
.btn-rejected {
    color: var(--white);
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-info:hover,
.btn-rejected:hover {
    color: var(--white);
    background-color: var(--bs-info-hover-bg) !important;
    border-color: var(--bs-info-hover-border) !important;
}

.btn-check:focus+.btn-info,
.btn-info:focus {
    color: var(--white);
    background-color: var(--bs-info-hover-bg);
    border-color: var(--bs-info-hover-border);
    box-shadow: 0 0 0 0 rgba(var(--bs-info-shadow-rgb), 0.5);
}

.btn-check:checked+.btn-info,
.btn-check:active+.btn-info,
.btn-info:active,
.btn-info.active,
.show>.btn-info.dropdown-toggle {
    color: var(--bs-body-color);
    background-color: var(--bs-info-hover-bg) !important;
    border-color: var(--bs-info-hover-border);
}

.btn-check:checked+.btn-info:focus,
.btn-check:active+.btn-info:focus,
.btn-info:active:focus,
.btn-info.active:focus,
.show>.btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(var(--bs-info-shadow-rgb), 0.5);
}

.btn-info:disabled,
.btn-info.disabled {
    color: var(--bs-body-color);
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-warning,
.btn-pending {
    color: var(--white);
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-warning:hover,
.btn-pending:hover {
    color: var(--white);
    background-color: var(--bs-warning-hover-bg);
    border-color: var(--bs-warning-hover-border);
}

.btn-check:focus+.btn-warning,
.btn-warning:focus {
    color: var(--white);
    background-color: var(--bs-warning-hover-bg);
    border-color: var(--bs-warning-hover-border);
    box-shadow: 0 0 0 0 rgba(var(--bs-warning-shadow-rgb), 0.5);
}

.btn-check:checked+.btn-warning,
.btn-check:active+.btn-warning,
.btn-warning:active,
.btn-warning.active,
.show>.btn-warning.dropdown-toggle {
    color: var(--white);
    background-color: var(--bs-warning-hover-bg);
    border-color: var(--bs-warning-hover-border);
}

.btn-check:checked+.btn-warning:focus,
.btn-check:active+.btn-warning:focus,
.btn-warning:active:focus,
.btn-warning.active:focus,
.show>.btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(var(--bs-warning-shadow-rgb), 0.5);
}

.btn-warning:disabled,
.btn-warning.disabled {
    color: var(--white);
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-danger,
.btn-cancelled,
.swal2-popup .swal2-actions button.swal2-cancel {
    color: var(--white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover,
.btn-cancelled:hover,
.swal2-popup .swal2-actions button.swal2-cancel:hover {
    color: var(--white);
    background-color: var(--bs-danger-hover-bg) !important;
    border-color: var(--bs-danger-hover-border) !important;
}

.btn-check:focus+.btn-danger,
.swal2-popup .swal2-actions .btn-check:focus+button.swal2-cancel,
.btn-danger:focus,
.swal2-popup .swal2-actions button.swal2-cancel:focus {
    color: var(--white);
    background-color: var(--bs-danger-hover-bg);
    border-color: var(--bs-danger-hover-border);
    box-shadow: 0 0 0 0 rgba(var(--bs-danger-shadow-rgb), 0.5);
}

.btn-check:checked+.btn-danger,
.swal2-popup .swal2-actions .btn-check:checked+button.swal2-cancel,
.btn-check:active+.btn-danger,
.swal2-popup .swal2-actions .btn-check:active+button.swal2-cancel,
.btn-danger:active,
.swal2-popup .swal2-actions button.swal2-cancel:active,
.btn-danger.active,
.swal2-popup .swal2-actions button.active.swal2-cancel,
.show>.btn-danger.dropdown-toggle,
.swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-cancel {
    color: var(--white);
    background-color: var(--bs-danger-hover-border);
    border-color: var(--bs-cancel-border);
}

.btn-check:checked+.btn-danger:focus,
.swal2-popup .swal2-actions .btn-check:checked+button.swal2-cancel:focus,
.btn-check:active+.btn-danger:focus,
.swal2-popup .swal2-actions .btn-check:active+button.swal2-cancel:focus,
.btn-danger:active:focus,
.swal2-popup .swal2-actions button.swal2-cancel:active:focus,
.btn-danger.active:focus,
.swal2-popup .swal2-actions button.active.swal2-cancel:focus,
.show>.btn-danger.dropdown-toggle:focus,
.swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-cancel:focus {
    box-shadow: 0 0 0 0 rgba(var(--bs-danger-shadow-rgb), 0.5);
}

.btn-danger:disabled,
.swal2-popup .swal2-actions button.swal2-cancel:disabled,
.btn-danger.disabled,
.swal2-popup .swal2-actions button.disabled.swal2-cancel {
    color: var(--white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.buttons-csv span::before {
    font-family: "fontawesome";
    content: "\f6dd\2002"
}

.buttons-excel span::before {
    font-family: "fontawesome";
    content: "\f1c3\2002"
}

.buttons-print span::before {
    font-family: "fontawesome";
    content: "\f02f\2002"
}

button.dt-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;

    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
    background-image: none !important;
}

button.dt-button.buttons-csv {
    background-color: var(--bs-primary) !important;
}

button.dt-button.buttons-excel {
    background-color: var(--bs-info) !important;
}

button.dt-button.buttons-print {
    background-color: var(--bs-success) !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3,
.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-6 {
    margin-top: 4.5rem !important;
}

.mt-7 {
    margin-top: 6rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-6 {
    margin-right: 4.5rem !important;
}

.me-7 {
    margin-right: 6rem !important;
}

.content-wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
.content-wrapper table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    content: '+';
    background-color: var(--bs-info);
    padding: 0 4px;
    margin-right: 4px;
    font-family: FontAwesome;
    content: "\f107" !important;
}

.content-wrapper table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
.content-wrapper table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
    background-color: var(--bs-info);
    padding: 0 4px;
    font-family: FontAwesome;
    content: "\f106" !important;
    margin-right: 4px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bs-red);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: var(--white);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--bs-light-green);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--bs-light-green);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.switch.disabled .slider {
    background: var(--bs-gray-400);
}

.pagination .page-item .page-link svg {
    width: 18px;
    height: 18px;
}

.pagination.pagination-separated .page-item {
    margin-left: 2px;
    margin-right: 2px;
}

.pagination.pagination-separated .page-item:first-child {
    margin-left: 0;
}

.pagination.pagination-separated .page-item:last-child {
    margin-right: 0;
}

.pagination.pagination-rounded .page-item {
    margin-right: 2px;
    margin-left: 2px;
}

.pagination.pagination-rounded .page-item .page-link {
    border-radius: 50px;
}

.table,
.datepicker table {
    margin-bottom: 0;
}

.table> :not(:last-child)> :last-child>*,
.datepicker table> :not(:last-child)> :last-child>* {
    border-bottom-color: inherit;
}

.table thead th,
.datepicker table thead th {
    border-top: 0;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--bs-body-color);
}

.table thead th i,
.datepicker table thead th i {
    margin-left: 0.325rem;
}

.table td img,
.datepicker table td img {
    width: 20%;
    border-radius: 5px;
}

.table td.table-avatar img {
    width: 10%;
}

.help-tabs.nav {
    border-radius: 0px;
}

.help-tabs::before {
    content: "\f059";
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    font-weight: var(--fa-style, 900);
    margin: 10px;
}

.tab-content.border1 {
    border-left: 1px solid var(--bs-gray-300);
    border-right: 1px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-300);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.s-modal .modal-content {
    max-width: 600px;
    margin: auto;
}

.color-icon {
    padding: 0.313rem 0.8rem;
    border-radius: 10px;
}

.tab-pane {
    padding-top: 24px;
}

.label-txt {
    display: flex;
    align-items: center;
    justify-content: end;
}

.label-txt label {
    margin-bottom: 0px;
}

.calendar-control i {
    position: absolute;
    right: 24px;
    bottom: 10px;
}

.calendar-control.t44 i {
    top: 44px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation>li>a.link-imperson {
    padding: 0px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation>li>a.link-imperson i {
    margin: 0px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation>li>a.link-imperson i:before {
    font-size: 32px;
}

body.vertical-layout .imperson-msg {
    margin-left: 240px;
}

.link-view i,
.link-edit i,
.link-list i,
.link-imperson i {
    font-size: 24px;
    vertical-align: middle;

    padding: 0 4px;
    cursor: pointer;
}

.link-list i {
    color: var(--bs-success);
}

.link-view i {
    color: var(--bs-info);
}

.link-edit i {
    color: var(--bs-primary);
}

.link-imperson i {
    color: var(--bs-warning);
}

.link-delete i {
    font-size: 24px;
    vertical-align: middle;
    color: var(--bs-danger);
    padding: 0 4px;
}

.horizontal-layout .navbar-fixed {
    justify-content: space-between;
}

.link-view i:hover {
    color: var(--bs-info-hover-bg);
}

.link-edit i:hover {
    color: var(--bs-icon-color-hover);
}

.link-delete i:hover {
    color: var(--bs-danger-hover-bg);
}

.link-list i:hover {
    color: var(--bs-success-hover-bg);
}

.link-imperson i:hover {
    color: var(--bs-warning-hover-bg);
}

select.form-control {
    border: 1px solid var(--bs-light);
}

.dataTables_length select {
    -moz-appearance: auto;
    -webkit-appearance: auto;
}

table img.border {
    border: 1px solid var(--bs-light) !important;
}

.day-section {
    display: flex;
    align-items: center;
    margin: 4px;
    gap: 4px;
}

.day-section label {
    margin: 0px;
    line-height: 1rem;
}

.date-section {
    display: flex;
    align-items: center;
    margin: 4px 0;
    gap: 4px;
}

.colorpicker {
    height: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

span.select2-container--open {
    z-index: 10050;
}

.align-items-center .mb-3,
.align-items-center .my-3 {
    margin-bottom: 0px !important;
}

.align-items-center .mt-3 {
    margin-top: 0px !important;
}

/**Leave Type Page Stype**/
.paid-row .ar-allocated-days .add-allocated-days {
    display: none;
}

.paid-row:last-child .ar-allocated-days .add-allocated-days {
    display: inline-block;
}

input::file-selector-button {
    color: var(--bs-body-color);
    background-color: var(--bs-gray-100);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: 1px;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.was-validated .form-control.select2:invalid+.select2-container .select2-selection {
    border-color: var(--bg-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff7588' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23ff7588' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-position: center right calc(0em + .375rem);
    background-repeat: no-repeat;
    background-size: calc(.625em + .75rem) calc(.625em + .75rem);
}

.form-control#asset_image,
.form-control.file-upload {
    padding: 8px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--bs-gray-400);
    background-image: none;
}

input[data-toggle="datepicker"],
.date-control {
    background: var(--white) url(/public/images/calendar.png) no-repeat right center;
    background-size: 16px;
    background-position-x: calc(100% - 8px);
}

.sim-report-container {
    display: flex;
    gap: 16px;
}

.input-group-text {
    border-color: var(--bs-gray-200);
}

.import-step.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

form .input-group-text {
    border-color: var(--bs-gray-400);
}

.intl-tel-input {
    display: block;
}

.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
    display: none;
}

.view label {
    font-weight: 700;
}

.view .iti__arrow {
    display: none;
}

.view .iti__tel-input {
    border: 0px;
    padding-left: 25px !important;
}

.view .iti--show-selected-dial-code .iti__selected-flag {
    background: transparent;
    padding-right: 0px;
    padding-left: 0px;
}

.view .country-select.inside input,
.view .country-select.inside input[type=text] {
    border: 0px;
    padding: 0 0 0 25px;
    height: 26px;
}

.view .country-select .flag.us {
    margin: 7px 0 0 0px;
}

.view .country-select .selected-flag .arrow {
    display: none;
}

.view .country-select.inside .selected-flag {
    padding: 0px;
}

form .form-control#user_picture,
form .form-control#user_signature {
    padding-top: 8px;
}

.iti--allow-dropdown input.iti__tel-input.view,
.country-select.inside input[type=text].view {
    background: var(--white);
    border: 0px;
}

.diagram-box svg>a.selected .st2 {
    fill: var(--bs-light-green);
}

.evhc-section {
    margin-bottom: 16px;
}

.evhc-section>h4 {
    position: relative;
}

.evhc-section>h4>span {
    position: absolute;
    right: 4px;
    cursor: pointer;
}

.evhc-section .bb {
    border-bottom: 1px solid var(--bs-gray-400);
}

.evhc-section .bb-dashed {
    border-bottom: 1px dashed var(--bs-gray-400);
}

.evhc-section .evhc-item,
#import_steps .import-step,
#po_steps .po-step {
    padding: 0px 0px 0 0px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(var(--bs-black-rgb), .12), 0 1px 2px rgba(var(--bs-black-rgb), .24);
}

.evhc-section .evhc-item .item-container,
#import_steps .import-step .accordion-body,
#po_steps .po-step .accordion-body {
    padding: 0px 14px 14px 14px;
}

.po-step .accordion-header::after,
.import-step .accordion-header::after {
    font-family: FontAwesome;
    content: "\f102" !important;
    right: 20px;
    font-size: 1.2rem;
    float: right;
    border: none;
    position: absolute;
}

.po-step .accordion-header.collapsed::after,
.import-step .accordion-header.collapsed::after {
    font-family: FontAwesome;
    content: "\f103" !important;
    right: 20px;
    font-size: 1.2rem;
    float: right;
    border: none;
    position: absolute;
}

.po-step.disabled .accordion-header.collapsed::after,
.import-step.disabled .accordion-header.collapsed::after {
    color: var(--bs-gray-500);
}

.evhc-section .evhc-item p {
    margin: 0px;
    line-height: 40px;
}

.evhc-section .evhc-item .percent,
.evhc-section .evhc-item .type3-ranger,
.percent-slider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.evhc-section .evhc-item .percent-info,
.evhc-section .evhc-item .ranger-info,
.percent-info {
    width: 50px;
    text-align: center;
    border-radius: 0.5rem;
    padding: 7.5px 4px;
    border: 2px solid var(--bs-gray-200);
    flex-shrink: 0;
}

.tyre-copy {
    padding: 6px 12px;
    flex-shrink: 0;
}

.evhc-section .evhc-item .range-section,
.range-section {
    flex: 1;
    min-width: 0;
    height: 50px;
}

.evhc-section .evhc-item .item-name.red,
.evhc-section .evhc-item .tyre-tread.red {
    background: var(--vhc-red);
    color: var(--white) !important;
}

.evhc-section .evhc-item .item-name.red .badge.item-ind,
.evhc-section .evhc-item .tyre-tread.red .badge.item-ind {
    background: var(--vhc-item-red-badge);
    color: var(--white) !important;
}

.evhc-section .evhc-item .item-name.amber,
.evhc-section .evhc-item .tyre-tread.amber {
    background: var(--vhc-amber);
    color: var(--bs-body-color) !important;
}

.evhc-section .evhc-item .item-name.amber .badge.item-ind,
.evhc-section .evhc-item .tyre-tread.amber .badge.item-ind {
    background: var(--vhc-item-amber-badge);
    color: var(--bs-gray-700) !important;
}

.evhc-section .evhc-item .item-name.green,
.evhc-section .evhc-item .tyre-tread.green {
    background: var(--vhc-green);
    color: var(--white) !important;
}

.evhc-section .evhc-item .item-name.green .badge.item-ind,
.evhc-section .evhc-item .tyre-tread.green .badge.item-ind {
    background: var(--vhc-item-green-badge);
    color: var(--white) !important;
}

.evhc-section .evhc-item .item-name.not_checked,
.evhc-section .evhc-item .tyre-tread.not_checked {
    background: var(--vhc-gray);
    color: var(--bs-body-color) !important;
}

.evhc-section .evhc-item .item-name.not_checked .badge.item-ind,
.evhc-section .evhc-item .tyre-tread.not_checked .badge.item-ind {
    background: var(--vhc-item-grey-badge);
    color: var(--bs-gray-700) !important;
}

.evhc-item .pull-right .select2-container {
    width: 150px !important;
    float: right;
}

.evhc-item .switch {
    float: right;
}

.badge.item-ind {
    font-size: 16px;
    background: var(--bs-gray-200);
    margin-right: 8px;
    min-width: 32px;
    color: var(--bs-body-color);
    position: relative;
}

.item-ind.edit:after {
    content: "\f303" !important;
    font-family: FontAwesome;
    position: absolute;
    top: -6px;
    right: -6px;
    vertical-align: middle;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    background: var(--vhc-item-red-badge);
    color: var(--white);
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion {
    width: 100%;
    display: block;
    position: relative;
    border-bottom: 1px solid var(--bs-primary);
    padding: 8px;
}

.accordion.collapsed::after {
    content: "\f107" !important;
}

.accordion::after {
    content: "\f106" !important;
}

.accordion::after {
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0 2px 0 6px;
    margin: 0 0.3em 0 0;
    vertical-align: 0;
}

.br-1 {
    border-radius: 1rem;
}

.item-container .form-check {
    padding: 0 1.25rem 0.8rem 1.25rem;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.vhc-status-btn {
    margin-right: 16px;
}

.item-container .actions {
    background: var(--bs-gray-100);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 8px;
    padding-bottom: 8px
}

.fc-btns {
    position: absolute;
    bottom: 8px;
    width: 120px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.fc-btns span i {
    padding: 8px;
    font-size: 18px;
}

.fancybox-files {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    gap: 16px;
    justify-content: center;
    margin: 16px 0px;
}

.fancybox-files>a {
    display: flex;
    width: 100%;
    height: 300px;
    justify-content: center;
    border: 1px solid var(--bs-gray-400);
    position: relative;
}

.fancybox-files>a>img {
    object-fit: contain;
    object-position: center center;
    max-width: 295px;
}

.item-name,
.accordion-header {
    position: relative;
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    font-size: 1.2rem;
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--accordion-header-bg), var(--accordion-header-bg), var(--accordion-header-bg));
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
}

.item-name.open,
.accordion-header:not(.collapsed) {
    border-radius: 10px 10px 0 0;
    margin-bottom: 1rem;
}

.vhc-items li {
    cursor: pointer;
}

.item-name::before {
    font-family: FontAwesome;
    position: absolute;
    right: 64px;
    padding: 0 2px 0 6px;
    margin: 0 0.3em 0 0;
    vertical-align: 0;
    cursor: move;
}

.item-name::before {
    content: "\f338" !important;
}

.item-name.view::before {
    display: none;
}

.item-name .fa-trash {
    position: absolute;
    right: 28px;
    padding: 0 6px;
    margin: 0 0.3em 0 0;
    cursor: pointer;
}

.item-name .collapse-icon {
    position: absolute;
    right: 0;
    padding: 0 6px;
    margin: 0 0.3em 0 0;
    cursor: pointer;
}

.item-name .text-right .collapse-icon {
    position: relative;
}

.item-yn>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-group>.form-group .add-note {
    visibility: hidden;
}

.note-group>.form-group .fa-up-down {
    width: 48px;
    text-align: center;
    line-height: 40px;
}

.note-group>.form-group:last-child .add-note {
    visibility: visible;
}

.models-group>.model-section .add-model {
    visibility: hidden;
}

.models-group>.model-section:last-child .add-model {
    visibility: visible;
}

/* .models-group >.model-section:first-child .remove-model{
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
} */
.item-note-content {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--bs-gray-200);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(var(--bs-black-rgb), 0.1);
    line-height: 31px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.item-note-content li {
    list-style: decimal;
    line-height: 1;
    padding: 4px;
    margin-left: 16px;
}

.item-note-content input:focus {
    outline: none;
}

.item-note-txt {
    width: 100%;
    border-bottom: 1px solid var(--bs-gray-400);
    border-left: 0;
    border-top: 0;
    border-right: 0;
    padding: 4px 4px 0px 4px;
    border-radius: 0px;
}

.item-note .select2-search__field::placeholder {
    content: "aaa";
}

.item-note .fa-square-minus {
    font-size: 2rem;
    color: var(--vhc-red)
}

.item-note .fa-square-minus:hover {
    cursor: pointer
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    right: 0;
}

.bb {
    border-bottom: 1px solid var(--bs-gray-400);
}

.vservice>.form-group .remove-service {
    visibility: visible;
}

.vservice>.form-group:first-child .remove-service {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.3;
}

.vservice .form-group .add-service {
    visibility: hidden;
}

.vservice>.form-group:last-child .add-service {
    visibility: visible;
}

.radio-group {
    display: flex;
    gap: 32px;
    align-items: center;
}

.form-check-input {
    --mdb-form-check-bg: var(--mdb-body-bg);
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.3em;
    vertical-align: top;
    appearance: none;
    background-color: var(--mdb-form-check-bg);
    background-image: var(--mdb-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    position: relative;

}

.form-check-input.item-type-yes {
    border: var(--mdb-border-width) solid var(--vhc-green);
}

.form-check-input.item-type-no {
    border: var(--mdb-border-width) solid var(--vhc-red);
}

.form-check-input.item-type-red {
    border: var(--mdb-border-width) solid var(--vhc-red);
}

.form-check-input.item-type-amber {
    border: var(--mdb-border-width) solid var(--vhc-amber);
}

.form-check-input.item-type-green {
    border: var(--mdb-border-width) solid var(--vhc-green);
}

.form-check-input.item-type-not_checked {
    border: var(--mdb-border-width) solid var(--vhc-gray);
}

.form-check-input[type=radio] {
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125em;
    margin-right: 4px;
}

.form-check-input[type=radio] {
    border-radius: 50%;
}

.form-check .form-check-input {
    float: left;
}

.form-check-input[type=radio]:checked {
    background-image: none;
    background-color: var(--white);
}

.form-check-input:checked[type=radio] {
    --mdb-form-check-bg-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e);
}

.form-check-input[type=radio]:before {
    width: 1rem;
    height: 1rem;
}

.form-check-input:before {
    content: "";
    position: absolute;
    box-shadow: 0px 0px 0px 13px rgba(var(--bs-black-rgb), 0);
    border-radius: 50%;
    width: 0.875rem;
    height: 0.875rem;
    background-color: rgba(var(--bs-black-rgb), 0);
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
}

.form-check-input[type=radio]:after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    z-index: 1;
    display: block;
    border-radius: 50%;
    /* background-color: var(--mdb-body-bg); */
}

.form-check-input:checked:after {
    border-radius: 50%;
    width: 0.625rem;
    height: 0.625rem;
    border-color: var(--bs-blue);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}

.form-check-input.item-type-yes:checked:after {
    background-color: var(--vhc-green);
}

.form-check-input.item-type-no:checked:after {
    background-color: var(--vhc-red);
}

.form-check-input.item-type-red:checked:after {
    background-color: var(--vhc-red);
}

.form-check-input.item-type-amber:checked:after {
    background-color: var(--vhc-amber);
}

.form-check-input.item-type-green:checked:after {
    background-color: var(--vhc-green);
}

.form-check-input.item-type-not_checked:checked:after {
    background-color: var(--vhc-gray);
}

.percent-range,
.form-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    height: 12px;
    background: var(--bs-gray-400);
}

.percent-range::-webkit-slider-thumb,
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    background-color: var(--vhc-gray);
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
}

.percent-range::-moz-range-thumb,
.form-range::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: var(--vhc-gray);
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
}

.percent.red .percent-range::-moz-range-thumb,
.type3-ranger.red .form-range::-moz-range-thumb {
    background-color: var(--vhc-red);
}

.percent.red .percent-range::-webkit-slider-thumb,
.type3-ranger.red .form-range::-webkit-slider-thumb {
    background-color: var(--vhc-red);
}

.percent.amber .percent-range::-moz-range-thumb,
.type3-ranger.amber .form-range::-moz-range-thumb {
    background-color: var(--vhc-amber);
}

.percent.amber .percent-range::-webkit-slider-thumb,
.type3-ranger.amber .form-range::-webkit-slider-thumb {
    background-color: var(--vhc-amber);
}

.percent.green .percent-range::-moz-range-thumb,
.type3-ranger.green .form-range::-moz-range-thumb {
    background-color: var(--vhc-green);
}

.percent.green .percent-range::-webkit-slider-thumb,
.type3-ranger.green .form-range::-webkit-slider-thumb {
    background-color: var(--vhc-green);
}

.percent.not_checked .percent-range::-moz-range-thumb,
.type3-ranger.not_checked .form-range::-moz-range-thumb {
    background-color: var(--vhc-gray);
}

.percent.not_checked .percent-range::-webkit-slider-thumb,
.type3-ranger.not_checked .form-range::-webkit-slider-thumb {
    background-color: var(--vhc-gray);
}

.percent-range::-webkit-slider-thumb:hover,
.form-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(var(--bs-percent-shadow), .1)
}

.percent-range:active::-webkit-slider-thumb,
.form-range:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(var(--bs-percent-shadow), .2)
}

.percent-range:focus::-webkit-slider-thumb,
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(var(--bs-percent-shadow), .2)
}

.percent-range::-moz-range-thumb:hover,
.form-range::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(var(--bs-percent-shadow), .1)
}

.percent-range:active::-moz-range-thumb,
.form-range:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(var(--bs-percent-shadow), .2)
}

.percent-range:focus::-moz-range-thumb,
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(var(--bs-percent-shadow), .2)
}

.sliderticks {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.sliderticks span {
    display: flex;
    justify-content: center;
    width: 1px;
    height: 10px;
    background: var(--bs-gray-300);
    line-height: 54px;
    color: var(--bs-gray-700) !important;
}

.tyre-selection {
    display: flex;
    gap: 8px;
}

.tyre-selection .tyre-val {
    width: calc(100% - 120px);
}

.tyre-selection .tyre-manual {
    width: 112px;
}

.tyre-selection .tyre-manual .btn {
    padding: 8px;
}

.hidden,
.select2-container.hidden,
.form-control.hidden {
    display: none !important;
}

.reset-damage-info {
    position: absolute;
    right: 8px;
    cursor: pointer;
}

.zone-section {
    align-items: center;
    margin-bottom: 4px;
}

.zone-sections .zone-section .add-zone,
.upload-files-container .attach-item .btn-plus,
.special-offers .row .add-special {
    visibility: hidden;
}

.zone-sections .zone-section:last-child .add-zone,
.upload-files-container .attach-item:last-child .btn-plus,
.special-offers .row:last-child .add-special {
    visibility: visible;
}

.zone-sections .zone-section:nth-child(11) .add-zone {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.upload-files-container .attach-item .action,
.upload-files-container .attach-item .pm-action {
    text-align: center;
}

.checkbox-section {
    display: flex;
    align-items: center;
    gap: 8px;
    height: calc(2.75rem + 2px);
}

.clear-note-all {
    width: 100%;
    margin-bottom: 14px;
}

.item-note-content>div {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.item-note-content>div>span {
    width: 16px;
}

.success-color {
    color: var(--bs-success);
}

.info-color {
    color: var(--bs-info);
}

.warning-color {
    color: var(--bs-warning);
}

.error-color {
    color: var(--bs-danger);
}

#technician_ability-table tr.child td.child .dtr-details,
#technician_ability-table tr.child td.child .dtr-details li {
    width: 100%;
}

#technician_ability-table tr.child td.child .dtr-details li .dtr-title {
    width: 70%;
}

#technician_ability-table tr.child td.child .dtr-details li .dtr-data {
    width: 28%;
    display: inline-block;
    border: 1px solid var(--bs-gray-400);
}

#technician_ability-table tr.child td.child .dtr-details li:last-child .dtr-data {
    border: 0px;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(721, 1fr);
    /* background-color: var(--bs-gray-400); */
    grid-gap: 1px;
}

.slot-grid>div {
    /* background: var(--white); */
    box-shadow: 0 0 0 1px var(--bs-gray-400);
}

.slot {
    background: var(--slot-bg);
    cursor: pointer;
}

.slot.disabled {
    background: var(--bs-light);
    cursor: not-allowed;
    pointer-events: none;
}

.slot.active {
    background: var(--bs-light-green);
}

.slot-cnt {
    font-weight: bold;
    padding: 4px;
    margin: 2px 0px;
    position: relative;
}

.slot-cnt::before,
.tech-section::before {
    font-family: FontAwesome;
    position: absolute;
    right: 0px;
    padding: 0 2px 0 6px;
    margin: 0 0.3em 0 0;
    vertical-align: 0;
    cursor: pointer;
}

.slot-cnt::before,
.tech-section::before {
    content: "\f107" !important;
}

.slot-cnt.open::before,
.tech-section.open::before {
    content: "\f106" !important;
}

.slot-times {
    display: none;
}

.slot-time {
    background: var(--white);
    border-radius: 10px;
    border: 1px solid var(--bs-gray-200);
    padding: 4px 4px 2px 4px;
    margin: 2px 4px;
    display: inline-block;
}

.sa-section .lbl,
.tech-section {
    font-weight: bold;
    position: relative;
}

#brand-prefix,
#part_number {
    text-transform: uppercase;
}

.ui-tooltip,
.ui-tooltip .arrow:after {
    background: var(--border-tooltip);
}

.ui-tooltip {
    padding: 10px 20px;
    color: var(--white);
    border-radius: 8px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    box-shadow: 0 0 7px var(--bs-body-color);
    display: inline-block;
    z-index: 10001
}

.ui-tooltip-content {
    display: inline-block;
}

.ui-tooltip .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
    background: transparent;
}

.ui-tooltip .arrow.top {
    top: -16px;
    bottom: auto;
}

.ui-tooltip .arrow.left {
    left: 20%;
}

.ui-tooltip .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px var(--border-tooltip);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ui-tooltip .arrow.top:after {
    bottom: -20px;
    top: auto;
}

.tooltip-light {
    --border-tooltip: var(--light-tooltip);
    background-color: var(--light-tooltip);

    color: var(--dark-tooltip);
}

.tooltip-success {
    --border-tooltip: var(--success-tooltip);
    background-color: var(--success-tooltip);

    color: var(--bs-gray-100);
}

.tooltip-info {
    --border-tooltip: var(--info-tooltip);
    background-color: var(--info-tooltip);

    color: var(--bs-gray-100);
}

.tooltip-danger {
    --border-tooltip: var(--danger-tooltip);
    background-color: var(--danger-tooltip);
    color: var(--bs-gray-100);
}

.tooltip-warning {
    --border-tooltip: var(--warning-tooltip);
    background-color: var(--warning-tooltip);

    color: var(--dark-tooltip);
}

.is-default {
    display: flex;
    gap: 8px;
    align-items: center;
}

.remove-profile {
    color: var(--bs-danger);
    cursor: pointer;
}

.hide {
    display: none !important;
}

.full-sim-tbl-container {
    max-height: 500px;
    overflow: auto;
}

.full-import-tbl-container {
    max-height: 500px;
    overflow: auto;
}

.gap-1 {
    gap: 8px;
}

.datetime-container {
    display: flex;
    gap: 8px;
}

.leave-type-detail-section {
    margin-bottom: 1.875rem;
    border: none;
    border-radius: 10px;
    -webkit-box-shadow: 0 10px 40px 0 rgba(var(--bs-dark-rgb), .07), 0 2px 9px 0 rgba(var(--bs-dark-rgb), .06);
    box-shadow: 4 10px 40px 0 rgba(var(--bs-dark-rgb), .07), 0 2px 9px 0 rgba(var(--bs-dark-rgb), .06);
    padding: 2rem 1rem 1rem 1rem;
}

.translate_wrapper {
    background: var(--white);
    border-radius: 4px;
}

.current_lang {
    cursor: pointer;
    text-transform: uppercase;
    overflow: hidden;
}

.lang {
    padding: 10px 15px;
    width: 150px;
    float: left;
    margin: 2px;
}

.lang i.fa-check {
    visibility: hidden;
}

.lang.selected {
    background: var(--bs-primary);
    color: var(--white);
}

.lang.selected i.fa-check {
    display: inline-block;
    visibility: visible;
}

.lang img,
.lang span.lang-txt {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.lang span.lang-txt {
    position: relative;
    top: -1px;
    font-weight: 700;
}

.lang img {
    width: 20px;
    margin-left: 0;
}

.lang span span {
    font-weight: 400;
}

.lang span.fa {
    font-size: 12px;
    position: relative;
    top: -1px;
    margin-left: 3px;
}

/*more lang*/
.more_lang {
    transform: translateY(-20px);
    opacity: 0;
    cursor: pointer;
    display: none;
    -webkit-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    -moz-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    -o-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    -ms-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
}

.translate_wrapper.active .more_lang.active {
    display: block;
}

.more_lang.active {
    opacity: 1;
    transform: translateY(-0px);
}

.more_lang .lang:hover {
    background: var(--bs-primary);
    color: var(--white);
}

.more_lang .lang:hover span {
    color: var(--white);
}

.translate_wrapper:hover,
.translate_wrapper.active,
.content a:hover {
    /* box-shadow:rgba(var(--bs-black-rgb),0.2) 0 5px 15px; */
    -webkit-transition: all 0.3s cubic-bezier(0, .99, .44, .99);
    -moz-transition: all 0.3s cubic-bezier(0, .99, .44, .99);
    -o-transition: all 0.3s cubic-bezier(0, .99, .44, .99);
    -ms-transition: all 0.3s cubic-bezier(0, .99, .44, .99);
    transition: all 0.3s cubic-bezier(0, .99, .44, .99);

}

.dropdown .dropdown-menu .dropdown-item div.selected {
    position: relative;
}

.translate_wrapper.active .lang {
    border-bottom: 1px solid var(--bs-light);
}

.dropdown .dropdown-menu .dropdown-item .selected::after {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    font-weight: var(--fa-style, 900);
    content: "\f00c";
    position: absolute;
    right: 0px;
    top: 0px;
}

.select2-container--default .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: var(--bs-gray) transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    right: 22px;
    margin-left: -4px;
    margin-top: -2px;
    top: 50%;
    width: 0;
    cursor: pointer
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.product-tbl td {
    background: var(--white);
    padding: 4px 16px;
    vertical-align: middle;
}

.product-tbl tr.sub_c td {
    padding: 8px 16px;
}

.product-tbl td .form-control {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 4px 0px;
    height: 24px;
}

.add_serial {
    width: 100%;
    background: var(--bs-gray-300);
    text-align: center;
}

@media screen and (max-width: 991px) {
    body.vertical-layout .imperson-msg {
        margin-left: 0px;
    }

    form .form-group {
        gap: 16px;
    }

    .note-group>.form-group {
        gap: 0px;
    }

    .note-group>.form-group>.col-lg-9 {
        width: calc(100% - 150px);
    }

    .note-group>.form-group>.col-lg-1 {
        width: 32px;
    }

    .note-group>.form-group .fa-up-down {
        width: 32px;
    }

    .note-group>.form-group>.col-lg-2 {
        width: 110px;
    }

    .note-group>.form-group>.col-lg-2>.btn {
        padding: 8px;
    }

    .fancybox-files {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .upload-files-container .attach-item .action button span {
        display: none;
    }

    .upload-files-container .attach-item .pm-action button {
        padding-left: 12%;
        padding-right: 12%;
    }
}

@media screen and (max-width: 767px) {
    .label-txt {
        justify-content: left;
    }

    .note-group>.form-group {
        gap: 0px;
    }

    .note-group>.form-group>.col-lg-9 {
        width: calc(100% - 150px);
    }

    .note-group>.form-group>.col-lg-1 {
        width: 32px;
    }

    .note-group>.form-group .fa-up-down {
        width: 32px;
    }

    .note-group>.form-group>.col-lg-2 {
        width: 110px;
    }

    .note-group>.form-group>.col-lg-2>.btn {
        padding: 8px;
    }

    .fancybox-files {
        grid-template-columns: auto;
    }

    .fancybox-files {
        display: grid;
        grid-template-columns: 100%;
    }

    .upload-files-container .attach-item {
        gap: 3px;
    }

    .upload-files-container .attach-item .action,
    .upload-files-container .attach-item .pm-action {
        text-align: right;
    }

    .upload-files-container .attach-item .action button span {
        display: inline;
    }

    .upload-files-container .attach-item .pm-action button {
        padding-left: 18px;
        padding-right: 18px;
    }
}

display: inline-block;
visibility: visible;
}

@media screen and (max-width: 991px) {
    body.vertical-layout .imperson-msg {
        margin-left: 0px;
    }

    form .form-group {
        gap: 16px;
    }

    .note-group>.form-group {
        gap: 0px;
    }

    .note-group>.form-group>.col-lg-9 {
        width: calc(100% - 150px);
    }

    .note-group>.form-group>.col-lg-1 {
        width: 32px;
    }

    .note-group>.form-group .fa-up-down {
        width: 32px;
    }

    .note-group>.form-group>.col-lg-2 {
        width: 110px;
    }

    .note-group>.form-group>.col-lg-2>.btn {
        padding: 8px;
    }

    .fancybox-files {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .upload-files-container .attach-item .action button span {
        display: none;
    }

    .upload-files-container .attach-item .pm-action button {
        padding-left: 12%;
        padding-right: 12%;
    }
}

@media screen and (max-width: 767px) {
    .label-txt {
        justify-content: left;
    }

    .note-group>.form-group {
        gap: 0px;
    }

    .note-group>.form-group>.col-lg-9 {
        width: calc(100% - 150px);
    }

    .note-group>.form-group>.col-lg-1 {
        width: 32px;
    }

    .note-group>.form-group .fa-up-down {
        width: 32px;
    }

    .note-group>.form-group>.col-lg-2 {
        width: 110px;
    }

    .note-group>.form-group>.col-lg-2>.btn {
        padding: 8px;
    }

    .fancybox-files {
        grid-template-columns: auto;
    }

    .fancybox-files {
        display: grid;
        grid-template-columns: 100%;
    }

    .upload-files-container .attach-item {
        gap: 3px;
    }

    .upload-files-container .attach-item .action,
    .upload-files-container .attach-item .pm-action {
        text-align: right;
    }

    .upload-files-container .attach-item .action button span {
        display: inline;
    }

    .upload-files-container .attach-item .pm-action button {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media screen and (max-width: 468px) {
    .upload-files-container .attach-item .action button span {
        display: none;
    }
}

.prod-sub-header {
    margin: 15px;
    border-bottom: 2px solid #ebebeb;
    color: var(--bs-primary)
}

/* Bootstrap 4 .close backward compatibility */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}

.close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}

/* ===== SECTION 2/4: public.css (public-layout feather icon fix, was public/css/public.css) ===== */
.user-icon:before {
    font-family: feather !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e9d7";
}

/* ===== SECTION 3/4: paid.css (damage-list widget, was public/css/paid.css) ===== */
.damage-sections h3 {
    margin: 0
}

.damage-list {
    border: 1px solid var(--bs-gray-400);
}

.damage-list>div {
    border-bottom: 1px solid var(--bs-gray-400);
    display: flex;
    justify-content: space-between;
    padding: 4px 16px;
    cursor: pointer;
}

.damage-list>div:last-child {
    border: 0px;
}

/* ===== SECTION 4/4: access-control.css (permissions matrix page, was public/css/access-control.css) ===== */
:root {
    --bg: #F2F3EF;
    --panel: #FFFFFF;
    --line: #E2E1D8;
    --line-strong: #D0CFC4;
    --ink: #1B1C18;
    --ink-soft: #6B6B62;
    --ink-faint: #9B9A8E;
    --navy: #28305A;
    --navy-soft: #4A5488;
    --teal: #0F6E56;
    --teal-bg: #E1F0EA;
    --amber: #8A5A12;
    --amber-bg: #FBEDD8;
    --radius: 10px;
    --bs-body-font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
.display-font {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

.page-wrap {
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.page-title {
    font-size: 21px;
    margin-bottom: 2px;
}

.page-meta {
    color: var(--ink-soft);
    font-size: 13px;
}

.page-meta b {
    color: var(--ink);
    font-weight: 600;
}

/* module card wrapper (collapse/expand + top switcher) */
.module-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
}

.module-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.module-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--teal-bg);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.module-head .name {
    font-weight: 700;
    font-size: 14.5px;
}

.module-toggle-all {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--navy-soft);
    background: none;
    border: 1px solid var(--line-strong);
    padding: 5px 10px;
    border-radius: 6px;
}

.chev {
    color: var(--ink-faint);
    font-size: 11px;
    transition: transform .15s;
    cursor: pointer;
    flex-shrink: 0;
}

.module-head[aria-expanded="true"] .chev {
    transform: rotate(90deg);
}

.module-card:not(.enabled) .module-icon {
    background: var(--line);
    color: var(--ink-faint);
}

.module-card:not(.enabled) .name {
    color: var(--ink-faint);
}

.module-card:not(.enabled) .module-toggle-all,
.module-card:not(.enabled) .chev {
    visibility: hidden;
    pointer-events: none;
}

.module-card:not(.enabled) .matrix {
    display: none;
}

/* bootstrap switch tint */
.form-switch .form-check-input {
    width: 34px;
    height: 19px;
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}

.form-switch.switch-module .form-check-input:checked {
    background-color: var(--navy);
    border-color: var(--navy);
}

.form-switch .form-check-input:focus {
    box-shadow: none;
    border-color: var(--line-strong);
}

/* roles view */
.role-chip {
    padding: 7px 13px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink-soft);
}

.role-chip.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.role-chip.new {
    border-style: dashed;
    color: var(--navy-soft);
    background: transparent;
}

.matrix {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.matrix-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.matrix-table th,
.matrix-table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

.matrix-table tr:last-child td {
    border-bottom: none;
}

.matrix-table thead th {
    background: #F7F7F2;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.matrix-table thead th:not(:first-child) {
    text-align: center;
}

.matrix-table td:not(:first-child) {
    text-align: center;
}

.matrix-table tbody tr.locked {
    opacity: .45;
}

.fname {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
}

.lock-badge {
    font-size: 9.5px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--amber);
    background: var(--amber-bg);
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
}

.matrix-table input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--navy);
    cursor: pointer;
}

.matrix-table tbody tr.locked input {
    cursor: not-allowed;
}

.legend {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink-soft);
    flex-wrap: wrap;
}

.legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.teal {
    background: var(--teal);
}

.dot.amber {
    background: var(--amber);
}

.hint {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--amber-bg);
    border: 1px solid #EFD9AE;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--amber);
}