/* ================================
           Variables & Base
================================ */
:root {
    --color-primary: #274946;
    --color-primary-rgb: 39, 73, 70;
    --color-secondary: #CC4900;
    --color-secondary-rgb: 204, 73, 0;
    --color-accent: #CC4900;
    --color-muted: #70767cbf;
    --color-light: #F5F5F5;
    --color-dark: #444444;
    --color-gradient: linear-gradient(to right, var(--color-primary) 70%, var(--color-secondary));
    --color-gradient-reverse: linear-gradient(to right, var(--color-secondary) 70%, var(--color-primary) 90%);
}

html {
    font-size: 14px;
}

@media (min-width: 900px) {
    html {
        font-size: 16px;
    }
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: white;
}

/* ================================
           Focus States
================================ */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
a:focus[role=button],
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--color-primary-rgb), .25);
}

/* ================================
           Background
================================ */
.bkd-primary {
    opacity: 1;
    background-color: var(--color-primary) !important;
    color: var(--color-light);
}

.bkd-secondary {
    opacity: 1;
    background-color: var(--color-secondary) !important;
}

.bkd-accent {
    opacity: 1;
    background-color: var(--color-accent) !important;
}

.bkd-light {
    background-color: var(--color-light) !important;
}

.bkd-gradient {
    background: var(--color-gradient) !important;
}

.bkd-gradient_reverse {
    background: var(--color-gradient-reverse) !important;
}

.alert-gradient_reverse {
    background: var(--color-gradient-reverse) !important;
    color: var(--color-light);
}

/* ================================
           Outline
================================ */
.bkd-light-outline {
    opacity: 1;
    color: var(--color-primary);
    background-color: white !important;
    border: 2px solid var(--color-primary);
}

/* ================================
           Text
================================ */
.txt-primary {
    color: var(--color-primary) !important;
}

.txt-muted-hover:hover {
    color: var(--color-muted) !important;
}

.txt-secondary {
    color: var(--color-secondary) !important;
}

    .txt-secondary:hover {
        color: var(--color-primary) !important;
    }

.txt-primary-underline {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}

.txt-secondary-underline {
    color: var(--color-secondary) !important;
    text-decoration: underline !important;
}

.txt-light {
    color: var(--color-light) !important;
}

.txt-dark {
    color: var(--color-dark) !important;
}

.txt-muted {
    color: var(--color-muted) !important;
}

/* ================================
           Links
================================ */
a:hover, .btn-link {
    color: var(--color-primary) !important;
}

/* ================================
           Buttons
================================ */
button, a[role=button] {
    text-transform: uppercase;
}

button,
a[role=button],
select,
div[data-rounded="inputGroup"],
label[data-file],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=submit],
input[type=button],
input[type=text],
input[type=email],
input[type=password] {
    border-radius: 9999px !important;
}

.bn-primary {
    background-color: var(--color-primary);
    color: var(--color-light);
}

    .bn-primary:hover {
        background-color: white;
        color: var(--color-secondary) !important;
        border: 1px solid var(--color-secondary);
    }

.bn-primary-outline {
    background-color: white;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

    .bn-primary-outline:hover {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

.bn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

    .bn-secondary:hover {
        background-color: white;
        color: var(--color-primary) !important;
        border: 1px solid var(--color-primary);
    }

.bn-secondary-outline {
    background-color: white;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

    .bn-secondary-outline:hover {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

.swal-confirm {
    background-color: var(--color-primary);
    color: var(--color-light);
}

    .swal-confirm:hover {
        background-color: white;
        color: var(--color-secondary);
        border: .5px solid var(--color-secondary);
    }

.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: white !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--color-light) !important;
    text-decoration: none;
    background-color: var(--color-primary) !important;
}

    .dropdown-item.active:hover {
        color: var(--color-light) !important;
    }
/* ================================
        Button Custom Group
================================ */
.btn-custom-group {
    display: inline-flex;
    align-items: stretch;
}

    .btn-custom-group .btn {
        border-radius: 0 !important;
    }

        .btn-custom-group .btn:first-child {
            border-radius: 9999px 0 0 9999px !important;
        }

        .btn-custom-group .btn:last-child {
            border-radius: 0 9999px 9999px 0 !important;
        }

        .btn-custom-group .btn + .btn {
            border-left: 1px solid rgba(255, 255, 255, 0.4);
        }
/* ================================
           Inputs
================================ */
input::placeholder {
    color: #70767cbf !important;
    opacity: .5;
    font-size: small;
    font-weight: 700;
    text-transform: uppercase;
}

select {
    appearance: base-select;
}

option {
    background: white;
    color: #333;
    padding: 8px 12px;
    font-size: .9rem;
    padding: .5rem;
    padding-left: .7rem;
    font-weight: 500;
}

    option:checked {
        background: var(--color-primary);
        color: white;
    }


select:has(option[value=""]:checked) {
    color: #70767cbf !important;
    font-size: small;
    padding: .5rem;
    padding-left: .7rem;
    font-weight: 700;
}

.form-label-required:after {
    content: " *";
    color: #dc3545;
}

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

.shadow {
    box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.4) !important;
}

/* ================================
           Border Radius
================================ */
.radius-top {
    border-radius: 1.3rem 1.3rem 0 0 !important;
}

.radius-bottom {
    border-radius: 0 0 1.3rem 1.3rem !important;
}

.card-radius {
    border-radius: 1.3rem !important;
}
/* ================================
           Utilities
================================ */
.no-style {
    all: unset;
    display: inline;
}

.cursor-pointer {
    cursor: pointer;
}

.alert-primary {
    background: var(--color-primary) !important;
    color: var(--color-light);
}

.alert-secondary {
    background: var(--color-secondary) !important;
    color: var(--color-light);
}

.alert-accent {
    background: var(--color-accent) !important;
    color: var(--color-primary);
    font-weight: bolder;
}

.hr-secondary {
    opacity: 1;
    color: var(--color-secondary);
}

.hr-accent {
    opacity: 1;
    color: var(--color-accent);
}
/* ================================
           Pagination
================================ */
.page-item.active .page-link {
    background-color: white !important;
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

div.dt-container .dt-paging .dt-paging-button {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 6px 12px !important;
    margin: 0 3px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border-radius: 0 !important;
}

    div.dt-container .dt-paging .dt-paging-button.current,
    div.dt-container .dt-paging .dt-paging-button.current:hover {
        background: var(--color-primary) !important;
        color: #fff !important;
        border-color: var(--color-primary) !important;
        font-weight: bold !important;
    }
/* ================================
           Table
================================ */
.event-details-table th,
.event-details-table tbody,
.event-details-table tr,
.event-details-table td {
    border: none !important;
    border-style: none !important;
}
/* ================================
           Components
================================ */

.dropdown-toggle::after {
    content: none;
}

.loader {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    background: linear-gradient(90deg, var(--color-primary) calc(50% + 0.5ch), var(--color-secondary) 0) right / calc(200% + 1ch) 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: l7 2s infinite steps(11);
}

@keyframes l7 {
    to {
        background-position: left;
    }
}