:root {
    --bs-teal: #004C4C;
    --bs-teal-rgb: 0, 76, 76;

    --bs-primary: var(--bs-teal);
    --bs-primary-rgb: var(--bs-teal-rgb);

    --bs-cream: #EFE9D5;
    --bs-cream-rgb: 239, 233, 213;
    
    --bs-light: var(--bs-cream);
    --bs-light-rgb: var(--bs-cream-rgb);

    --bs-alabaster: #F8F5EF;
    --bs-alabaster-rgb: 248, 245, 239;
    
    --bs-white: var(--bs-alabaster);
    --bs-white-rgb: var(--bs-alabaster-rgb);
    
    --bs-dark: #102A43;
    --bs-dark-rgb: 16, 42, 67;

    --bs-oatmeal: #E3DDD3;
    --bs-oatmeal-rgb: 227, 221, 211;

    --bs-link-color: var(--bs-teal);
    --bs-link-hover-color: #003333; 

    --bs-link-primary-color: var(--bs-teal);
    --bs-link-primary-hover-color: #003333;

    --bs-link-dark-color: var(--bs-dark);
    --bs-link-dark-hover-color: #3182CE;
    
    --bs-link-white-color: var(--bs-white);
    --bs-link-white-hover-color: #b0b5b9; 

    --bs-form-switch-bg: var(--bs-teal);
    
    --bs-primary-bg-subtle: #e6eeee;       
    --bs-primary-border-subtle: #b3c9c9;   
    --bs-primary-text-emphasis: #003333;   
    --bs-primary-emphasis-color: var(--bs-dark);
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #52565b;
    background-color: var(--bs-white);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body.preloader-active {
    overflow: hidden !important;
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bs-white);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.spinner-custom {
    width: 50px;
    height: 50px;
    border: 5px solid var(--bs-oatmeal);
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: spinPreloader 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spinPreloader {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner-custom {
        animation-duration: 1.5s;
    }
}


html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: "Harlow";
    src: url("/static/fonts/Harlow-Solid-Italic.ttf.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Harlow", cursive;
    font-weight: normal;
    font-style: italic;
}

.text-primary {
    color: var(--bs-primary);
}

.text-white {
    color: var(--bs-white);
}

.text-dark {
    color: var(--bs-dark);
}

.text-light {
    color: var(--bs-light);
}

.btn-primary {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);

    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light);
}

.btn-dark {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);

    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);

    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light);
}

.btn-light {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);

    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);

    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
}

.btn-white {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);

    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
}

.btn-primary-dark {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);

    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
}

.btn-primary-light {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);

    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light);
}

.btn-primary-white {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);

    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-white);
}

.btn-dark-primary {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);

    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-dark-light {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);

    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-light);

    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light);
}

.btn-dark-white {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);

    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);

    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-white);
}

.btn-light-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);

    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-light-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);

    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);

    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
}

.btn-white-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-white-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);

    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-dark);
    --bs-btn-active-border-color: var(--bs-dark);
}

.table-primary {
    --bs-table-color: var(--bs-dark);
    --bs-table-bg: rgba(var(--bs-teal-rgb), 0.1);
    --bs-table-border-color: rgba(var(--bs-teal-rgb), 0.4);
    --bs-table-striped-bg: rgba(var(--bs-teal-rgb), 0.15);
    --bs-table-striped-color: var(--bs-dark);
    --bs-table-active-bg: rgba(var(--bs-teal-rgb), 0.25);
    --bs-table-active-color: var(--bs-dark);
    --bs-table-hover-bg: rgba(var(--bs-teal-rgb), 0.18);
    --bs-table-hover-color: var(--bs-dark);

    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.table-primary thead th {
    color: var(--bs-light) !important;
}

.table-responsive {
    border-radius: 1rem;
    overflow-x: auto;
}

.table-responsive .table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--bs-table-border-color);
    margin-bottom: 0;
}

.table-responsive .table > :not(caption) > * > * {
    border: 1px solid var(--bs-table-border-color);
}

.table-responsive .table thead th {
    border-color: var(--bs-table-border-color);
}

.primary-link {
    color: var(--bs-link-primary-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.primary-link:hover,
.primary-link:focus,
.primary-link:active {
    color: var(--bs-link-primary-hover-color);
    text-decoration: none;
}

.dark-link {
    color: var(--bs-link-dark-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.dark-link:hover,
.dark-link:focus,
.dark-link:active {
    color: var(--bs-link-dark-hover-color);
    text-decoration: none;
}

.light-link {
    color: var(--bs-link-light-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.light-link:hover,
.light-link:focus,
.light-link:active {
    color: var(--bs-link-light-hover-color);
    text-decoration: none;
}

.white-link {
    color: var(--bs-link-white-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.white-link:hover, 
.white-link:focus,
.white-link:active {
    color: var(--bs-link-white-hover-color);
    text-decoration: none;
}

.link-primary-dark {
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-dark);
  --bs-link-active-color: var(--bs-dark);
}

.link-primary-light {
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-light);
  --bs-link-active-color: var(--bs-light);
}

.link-primary-white {
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-white);
  --bs-link-active-color: var(--bs-white);
}

.link-dark-primary {
  --bs-link-color: var(--bs-dark);
  --bs-link-hover-color: var(--bs-primary);
  --bs-link-active-color: var(--bs-primary);
}

.link-dark-light {
  --bs-link-color: var(--bs-dark);
  --bs-link-hover-color: var(--bs-light);
  --bs-link-active-color: var(--bs-light);
}

.link-dark-white {
  --bs-link-color: var(--bs-dark);
  --bs-link-hover-color: var(--bs-white);
  --bs-link-active-color: var(--bs-white);
}

.link-light-primary {
  --bs-link-color: var(--bs-light);
  --bs-link-hover-color: var(--bs-primary);
  --bs-link-active-color: var(--bs-primary);
}

.link-light-dark {
  --bs-link-color: var(--bs-light);
  --bs-link-hover-color: var(--bs-dark);
  --bs-link-active-color: var(--bs-dark);
}

.link-light-white {
  --bs-link-color: var(--bs-light);
  --bs-link-hover-color: var(--bs-white);
  --bs-link-active-color: var(--bs-white);
}

.link-white-primary {
  --bs-link-color: var(--bs-white);
  --bs-link-hover-color: var(--bs-primary);
  --bs-link-active-color: var(--bs-primary);
}

.link-white-dark {
  --bs-link-color: var(--bs-white);
  --bs-link-hover-color: var(--bs-dark);
  --bs-link-active-color: var(--bs-dark);
}

.footer-link,
.footer-social-square-btn {
    --bs-footer-link-color: var(--bs-teal); 
    --bs-footer-link-hover: #003333;        
    
    color: var(--bs-footer-link-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--bs-footer-link-hover);
}

.form-check-input {
    background-color: var(--bs-oatmeal); 
    border-color: var(--bs-oatmeal); 
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-teal-rgb), 0.25);
}

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

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

.form-switch {
  padding-left: 3em;
}

.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e");
}

.table-light-dark {
    --bs-table-color: var(--bs-dark);
    --bs-table-bg: var(--bs-light);
    --bs-table-border-color: rgba(var(--bs-dark-rgb), 0.15);
    --bs-table-striped-bg: rgba(var(--bs-dark-rgb), 0.035);
    --bs-table-striped-color: var(--bs-dark);
    --bs-table-active-bg: rgba(var(--bs-dark-rgb), 0.10);
    --bs-table-active-color: var(--bs-dark);
    --bs-table-hover-bg: rgba(var(--bs-dark-rgb), 0.10);
    --bs-table-hover-color: var(--bs-dark);
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

.table-light-primary {
    --bs-table-color: var(--bs-primary);
    --bs-table-bg: var(--bs-light);
    --bs-table-border-color: rgba(var(--bs-teal-rgb), 0.18);
    --bs-table-striped-bg: rgba(var(--bs-teal-rgb), 0.035);
    --bs-table-striped-color: var(--bs-primary);
    --bs-table-active-bg: rgba(var(--bs-teal-rgb), 0.10);
    --bs-table-active-color: var(--bs-primary);
    --bs-table-hover-bg: rgba(var(--bs-teal-rgb), 0.10);
    --bs-table-hover-color: var(--bs-primary);
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

.table-light-dark thead {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

.table-light-dark thead th {
    color: var(--bs-light);
    background-color: var(--bs-dark);
    border-color: rgba(var(--bs-light-rgb), 0.25);
}

.table-light-primary thead {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.table-light-primary thead th {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: rgba(var(--bs-light-rgb), 0.25);
}

.table-dark-light {
    --bs-table-color: var(--bs-dark);
    --bs-table-bg: rgba(var(--bs-dark-rgb), 0.08);
    --bs-table-border-color: rgba(var(--bs-dark-rgb), 0.18);
    --bs-table-striped-bg: rgba(var(--bs-dark-rgb), 0.045);
    --bs-table-striped-color: var(--bs-dark);
    --bs-table-active-bg: rgba(var(--bs-dark-rgb), 0.12);
    --bs-table-active-color: var(--bs-dark);
    --bs-table-hover-bg: rgba(var(--bs-dark-rgb), 0.16);
    --bs-table-hover-color: var(--bs-dark);
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

.table-dark-light thead {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

.table-dark-light thead th {
    color: var(--bs-light);
    background-color: var(--bs-dark);
    border-color: rgba(var(--bs-cream-rgb), 0.20);
}

.table-primary-light {
    --bs-table-color: var(--bs-primary);
    --bs-table-bg: rgba(var(--bs-teal-rgb), 0.12);
    --bs-table-border-color: rgba(var(--bs-teal-rgb), 0.18);
    --bs-table-striped-bg: rgba(var(--bs-teal-rgb), 0.055);
    --bs-table-striped-color: var(--bs-primary);
    --bs-table-active-bg: rgba(var(--bs-teal-rgb), 0.16);
    --bs-table-active-color: var(--bs-primary);
    --bs-table-hover-bg: rgba(var(--bs-teal-rgb), 0.20);
    --bs-table-hover-color: var(--bs-primary);
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    border-color: var(--bs-table-border-color);
}

.table-primary-light thead {
    background-color: var(--bs-primary);
    color: var(--bs-light);
}

.table-primary-light thead th {
    color: var(--bs-light);
    background-color: var(--bs-primary);
    border-color: rgba(var(--bs-cream-rgb), 0.20);
}

.table-responsive {
    border-radius: 1rem;
    overflow: hidden;
}

.table-responsive .table {
    border: 1px solid var(--bs-table-border-color);
    border-collapse: separate;
    border-spacing: 0;
}

.table-responsive .table thead tr:first-child th:first-child {
    border-top-left-radius: 1rem;
}

.table-responsive .table thead tr:first-child th:last-child {
    border-top-right-radius: 1rem;
}

.table-responsive .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 1rem;
}

.table-responsive .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 1rem;
}