@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

:root {
    --bs-c1: #9c8321; /* Base */
    --bs-c1d10: #8a7620; /* 10% darker */
    --bs-c1l50: #fff3b2; /* 50% lighter */
    --bs-c2: #0d0c22; /* Base */
    --bs-c2a: #1e3b5c; /* Accent (lighter variant) */
    --bs-c2d10: #0b0a1f; /* 10% darker */
    --bs-c2d20: #09081b; /* 20% darker */
    --bs-c9: #537575; /* Base (lighter) */
    --bs-c9d10: #405b5a; /* Intermediate darker */
    --bs-c9d15: #2b3d3e;
    --bs-c9d20: #2d3f3f; /* More dark */
    --bs-c9d30: #1a2325; /* Darkest */
    --bs-c8: #000;
    --bs-c10: #cbdefe;
    --bs-c6: #8d8d8d;
    --bs-c3: #bbbdbd;
    --bs-c4: #ebeae6;
    --bs-c5: #f4f4f3;
    --bs-c5d10: #f8f8f8;
    --bs-c7: #fff;
    --bs-font-family: 'Cairo', sans-serif;
    --bs-rtl: rtl;
    --bs-ltr: ltr;
    --line-height: 1.2em;
    --bs-font-size: 0.9375rem; /* 15px */
    --bs-font-light: 300;
    --bs-font-regular: 400;
    --bs-font-medium: 500;
    --bs-font-bold: 700;
    --header-height: 2rem;
    --footer-height: 2rem;
    --z-fixed: 100;
}

*,
::before,
::after {
    box-sizing: border-box;
}

/*input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
}*/

.datepicker tbody tr > td.day.today:before {
    background-color: unset !important;
}

.datepicker tbody tr > td span.year.focused,
.datepicker tbody tr > td span.year.focused:hover,
.datepicker tbody tr > td span.year.active:hover,
.datepicker tbody tr > td span.year.active.focused:hover,
.datepicker tbody tr > td span.year.active,
.datepicker tbody tr > td span.hour.focused,
.datepicker tbody tr > td span.hour.focused:hover,
.datepicker tbody tr > td span.hour.active:hover,
.datepicker tbody tr > td span.hour.active.focused:hover,
.datepicker tbody tr > td span.hour.active,
.datepicker tbody tr > td span.minute.focused,
.datepicker tbody tr > td span.minute.focused:hover,
.datepicker tbody tr > td span.minute.active:hover,
.datepicker tbody tr > td span.minute.active.focused:hover,
.datepicker tbody tr > td span.minute.active,
.datepicker tbody tr > td span.month.focused,
.datepicker tbody tr > td span.month.focused:hover,
.datepicker tbody tr > td span.month.active:hover,
.datepicker tbody tr > td span.month.active.focused:hover,
.datepicker tbody tr > td span.month.active,
.datepicker tbody tr > td.day.selected,
.datepicker tbody tr > td.day.selected:hover,
.datepicker tbody tr > td.day.active,
.datepicker tbody tr > td.day.active:hover {
    background: var(--bs-c2) !important;
}

.datepicker tbody tr > td.day.today {
    background: var(--bs-c1) !important;
}

.list-unstyled {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    left: auto !important;
    right: 8px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    left: auto !important;
    right: 8px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    left: auto !important;
}

.asterisk {
    color: red;
}

.highlight {
    background-color: yellow;
    color: var(--bs-c2);
}

p {
    line-height: revert;
    margin: 0;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: unset;
    border: unset;
}

    .btn i {
        display: inline-flex;
        margin: 0 5px;
    }

.btn-extra {
    color: var(--bs-c2);
    height: 40px;
    width: fit-content !important;
    min-width: max-content !important;
    border: 1px solid transparent !important;
    border-radius: 2px;
    background-color: var(--bs-c5);
}

    .btn-extra:hover {
        border-color: rgba(0,0,0,0.1);
        background-color: var(--bs-c7);
        -webkit-box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
        box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
    }

    .btn-extra:focus {
        border-color: rgba(2, 37, 75, 0.81);
        background-color: var(--bs-c7);
        -webkit-box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
        box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
    }

.dropdown-menu {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.background-svg {
    height: 70vh;
}

input[type='text'],
input[type='date'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='email'],
input[type='url'],
input[type='tel'],
.braintree-input,
textarea,
select,
.form-select,
.selectize-input {
    border: 1px solid transparent;
    text-align: center;
}

input[type='text'],
input[type='date'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='email'],
input[type='url'],
input[type='tel'],
.braintree-input,
.selectize-input,
textarea,
.ql-container
.ql-editor,
select,
.form-select,
.input-with-prefix {
    font: var(--bs-font-regular) 1rem/1.5rem var(--bs-font-family);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 5px 16px;
    -webkit-transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;
    transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;
    transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, box-shadow 200ms ease;
    transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;
    border-radius: 2px;
    outline: none;
    background-color: var(--bs-c5);
    color: var(--bs-c2);
    direction: var(--bs-rtl);
}

    input:hover[type='text'],
    input:hover[type='date'],
    input:hover[type='number'],
    input:hover[type='search'],
    input:hover[type='password'],
    input:hover[type='email'],
    input:hover[type='url'],
    input:hover[type='tel'],
    input:hover[type='date'],
    textarea:hover,
    select:hover,
    .form-select:hover,
    .input-with-prefix:hover {
        border-color: rgba(0,0,0,0.1);
        background-color: var(--bs-c7);
        -webkit-box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
        box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
    }

    input:focus[type='text'],
    input:focus[type='date'],
    input:focus[type='number'],
    input:focus[type='search'],
    input:focus[type='password'],
    input:focus[type='email'],
    input:focus[type='url'],
    input:focus[type='tel'],
    input:focus[type='date'],
    textarea:focus,
    select:focus,
    .form-select:focus,
    .input-with-prefix:focus {
        border-color: rgba(2, 37, 75, 0.81);
        background-color: var(--bs-c7);
        -webkit-box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
        box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1);
    }

label {
    color: var(--bs-c2);
    margin-bottom: 0.2rem;
}

/* For mobile screens (less than 576px) */
@media (max-width: 575px) {
    .background-svg {
        width: 100%;
        height: auto;
    }
}

/* Custom styles for large screens and tablets in landscape mode */
@media (min-width: 768px) {
    .background-svg {
        width: unset;
        height: 70vh;
    }
}

/* For tablets, and small desktops */
@media (max-width: 991px) {
}

/* For very large desktops (min-width: 1200px) */
@media (min-width: 1200px) {
}

/*Searchable dropdown list style*/
.select2-container--default .select2-selection--single {
    border: 1px solid transparent !important;
    text-align: center !important;
    font: var(--bs-font-regular) 1rem/1.5rem var(--bs-font-family) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 40px !important;
    padding: 5px 16px !important;
    transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
    border-radius: 4px !important;
    outline: none !important;
    background-color: #f3f3f4 !important;
    color: #0d0c22 !important;
    direction: var(--bs-rtl) !important;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        box-shadow: none !important;
    }

    .select2-container--default .select2-selection--single:hover {
        border-color: rgba(0,0,0,0.1) !important;
        background-color: var(--bs-c7) !important;
        box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1) !important;
    }

    .select2-container--default .select2-selection--single:focus {
        border-color: rgba(2, 37, 75, 0.81) !important;
        background-color: var(--bs-c7) !important;
        box-shadow: 0 0 0 4px rgba(2, 37, 75, 0.1) !important;
    }

.select2-container--default .select2-search--dropdown .select2-search__field {
    box-shadow: none !important; /* Remove box-shadow */
}

/* Add margin-top to select2-dropdown when shown below */
.select2-dropdown.select2-dropdown--below {
    margin-top: 10px !important;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #aaa !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.progress {
    height: 20px;
    margin-bottom: 0px;
}

#progressBar {
    text-align: center;
    line-height: 20px;
    width: 0%;
    background-color: #198754; /* #1ab394;  Green color */
    border-radius: 0; /* Remove rounded corners */
}

.alert-download {
    margin: 0 6.2rem 0.2rem 2rem;
    background: #c5ddd1;
    border: 1px solid var(--bs-c5);
}

/* Custom Select2 Style */
.custom-select2 .select2-selection--single {
    border: 1px solid transparent;
    text-align: center;
    font: var(--bs-font-regular) 1rem/1.5rem var(--bs-font-family);
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 5px 16px;
    transition: background-color 200ms ease, outline 200ms ease, color 200ms ease, box-shadow 200ms ease;
    border-radius: 4px;
    outline: none;
    background-color: #f3f3f4;
    color: #0d0c22;
    direction: var(--bs-rtl);
}

    .custom-select2 .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }

    .custom-select2 .select2-selection--single:hover {
        border-color: rgba(0, 0, 0, 0.1);
        background-color: var(--bs-c7);
    }

    .custom-select2 .select2-selection--single:focus {
        border-color: rgba(2, 37, 75, 0.81);
        background-color: var(--bs-c7);
    }

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-c2) !important;
}

.select2-results__option:hover {
    background-color: var(--bs-c2) !important;
}

.skeleton-loader {
    width: 100%;
    height: 38px; /* Match Bootstrap select height */
    background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 86%;
    }

    .brand {
        padding-left: 1.4rem;
    }
}

.text-warning {
    color: var(--bs-c1) !important;
}

@media (max-width: 992px) {
    .content.fluid {
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }
}

.table > :not(caption) > * > * {
    background-color: unset !important;
}