@charset "UTF-8";
/*
    :root {
    --gray-light: #f8f9fa;
    --gray: #8c98a4;
    --gray-dark: #343a40;
    --primary: navy;
    --secondary: #77838f;
}
*/
/* COLORS */

:root {
    /* Main Theme Colors */
    --bs-primary: #2F372F;
    --bs-secondary: #A9A9A9;
    --bs-success: #24a148;
    --bs-danger: #C84B31;
    --bs-warning: #FFB74D;
    --bs-info: #4589FF;
    --bs-light: #F5F5DC;
    --bs-dark: #343a40;
    /* RGB Versions for Opacity */
    --bs-primary-rgb: 47, 55, 47;
    --bs-secondary-rgb: 169, 169, 169;
    --bs-success-rgb: 36, 161, 72;
    --bs-danger-rgb: 200, 75, 49;
    --bs-warning-rgb: 255, 183, 77;
    --bs-info-rgb: 69, 137, 255;
    --bs-light-rgb: 245, 245, 220;
    --bs-dark-rgb: 52, 58, 64;
    /* Text Emphasis Colors */
    --bs-primary-text-emphasis: #1A1F1A;
    --bs-secondary-text-emphasis: #5A5A5A;
    --bs-success-text-emphasis: #0F4D20;
    --bs-danger-text-emphasis: #642618;
    --bs-warning-text-emphasis: #805C26;
    --bs-info-text-emphasis: #1C3A7A;
    --bs-light-text-emphasis: #495057; /* Using a standard dark gray for contrast on light beige */
    --bs-dark-text-emphasis: #C1C4C7; /* Using a light gray for contrast on dark charcoal */
    /* Subtle Background Colors */
    --bs-primary-bg-subtle: #d5d8d5;
    --bs-secondary-bg-subtle: #EAEAEA;
    --bs-success-bg-subtle: #D3F0DD;
    --bs-danger-bg-subtle: #F7DCD7;
    --bs-warning-bg-subtle: #FFF2DD;
    --bs-info-bg-subtle: #D9E5FF;
    --bs-light-bg-subtle: #FDFDF9;
    --bs-dark-bg-subtle: #D6D8DA;
    /* Subtle Border Colors */
    --bs-primary-border-subtle: #acb1ac;
    --bs-secondary-border-subtle: #D6D6D6;
    --bs-success-border-subtle: #A8E1BB;
    --bs-danger-border-subtle: #F0B8AE;
    --bs-warning-border-subtle: #FFE5B9;
    --bs-info-border-subtle: #B3CBFF;
    --bs-light-border-subtle: #EFEFDD;
    --bs-dark-border-subtle: #B4B7BA;
}
/* FILE: custom-army-theme.css */

:root {
    /* Main Theme Colors (Mapped from Army Standards) */
    --bs-primary: #2F372F; /* --armygreen */
    --bs-secondary: #565557; /* --armyaccentgrey01 */
    --bs-success: #009933; /* --core-green */
    --bs-danger: #CC0000; /* --core-red */
    --bs-warning: #FFCC01; /* --armygold */
    --bs-info: #0071bb; /* --armylink */
    --bs-light: #F1E4C7; /* --armyaccenttan */
    --bs-dark: #221F20; /* --armyblack */
    /* RGB Versions for Opacity */
    --bs-primary-rgb: 47, 55, 47;
    --bs-secondary-rgb: 86, 85, 87;
    --bs-success-rgb: 0, 153, 51;
    --bs-danger-rgb: 204, 0, 0;
    --bs-warning-rgb: 255, 204, 1;
    --bs-info-rgb: 0, 113, 187;
    --bs-light-rgb: 241, 228, 199;
    --bs-dark-rgb: 34, 31, 32;
    /* Text Emphasis Colors (Mapped from Army Darker Shades) */
    --bs-primary-text-emphasis: #1A1F1A;
    --bs-secondary-text-emphasis: #333333;
    --bs-success-text-emphasis: #007326;
    --bs-danger-text-emphasis: #990000;
    --bs-warning-text-emphasis: #f9b21b;
    --bs-info-text-emphasis: #00558c;
    --bs-light-text-emphasis: #565557;
    --bs-dark-text-emphasis: #D5D5D7;
    /* Subtle Background Colors (Mapped from Army Lighter Shades) */
    --bs-primary-bg-subtle: #d5d8d5;
    --bs-secondary-bg-subtle: #E5E5E5;
    --bs-success-bg-subtle: #d9f0e1;
    --bs-danger-bg-subtle: #f7d9d9;
    --bs-warning-bg-subtle: #fff6df;
    --bs-info-bg-subtle: #d9eaf5;
    --bs-light-bg-subtle: #f8f3e9;
    --bs-dark-bg-subtle: #4C4C4C;
    /* Subtle Border Colors (Mapped from Army Light Shades) */
    --bs-primary-border-subtle: #BFB8A6;
    --bs-secondary-border-subtle: #CCCCCC;
    --bs-success-border-subtle: #a6dbb8;
    --bs-danger-border-subtle: #eda6a6;
    --bs-warning-border-subtle: #ffeab3;
    --bs-info-border-subtle: #a6cde7;
    --bs-light-border-subtle: #e4dccc;
    --bs-dark-border-subtle: #666666;
}

:root {
    /* OFFICIAL BRAND PRIMARY */

    --armygold: #FFCC01;
    --armyblack: #221F20;
    --armygreen: #2F372F;
    --armywhite: #FFFFFF;
    /* BRAND SECONDARY */

    --armyaccenttan: #F1E4C7;
    --armyaccentfield01: #727365;
    --armyaccentfield02: #BFB8A6;
    --armyaccentgrey01: #565557;
    --armyaccentgrey02: #D5D5D7;
    /* ARMY.MIL INTERACTIVE */

    --armylink: #0071bb;
    --core-darkblue: #00558c;
    --core-lightblue: #a6cde7;
    --core-lighterblue: #d9eaf5;
    --core-darkgold: #f9b21b;
    --core-lightgold: #ffeab3;
    --core-lightergold: #fff6df;
    --core-darkgreen: #007326;
    --core-green: #009933;
    --core-lightgreen: #a6dbb8;
    --core-lightergreen: #d9f0e1;
    --core-darkred: #990000;
    --core-red: #cc0000;
    --core-lightred: #eda6a6;
    --core-lighterred: #f7d9d9;
    /* ARMY.MIL GREY ACCENTS */

    --greyscaleaccent100: #030000;
    --greyscaleaccent90: #1A1A1A;
    --greyscaleaccent80: #333333;
    --greyscaleaccent70: #4C4C4C;
    --greyscaleaccent60: #666666;
    --greyscaleaccent50: #7F7F7F;
    --greyscaleaccent40: #999999;
    --greyscaleaccent30: #B3B3B3;
    --greyscaleaccent20: #CCCCCC;
    --greyscaleaccent10: #E5E5E5;
    /* ARMY SPECIAL USE */

    --armyhighlightorange: #F16521;
    --armyhighlightgreen: #2Daa27;
    --armyhighlightred: #CF0000;
    /* MOH COLORS */

    --mohblue: #3f6bb3;
    --mohdarkblue: #32548d;
    --mohgreen: #c3b58f;
    --mohpostnam: #22396b;
    --mohvietnam: #555847;
    --mohww1: #665a40;
    --mohww2: #e4e4e4;
    --mohkorea: #c4c0b2;
    --mohcivilwar: #394d68;
    --mohgold: #bfc79d;
}

@media print {
    .no-print {
        display: none;
    }
}

:root {
    --gray-light: #f8f9fa;
    --gray: #8c98a4;
    --gray-dark: #343a40;
    --primary: navy;
    --secondary: #77838f;
    --bs-body-color: #52525b;
    --bs-dark-rgb: 113,113,122;
    --bs-list-group-color: #52525b;
}

/*Grid*/
body {
    height: 100vh;
}

.parent {
    height: 100vh;
    display: grid;
    grid-template: 50px 1fr auto / 200px 1fr auto;
}

    .parent header {
        grid-column: 1 / 4;
    }

main {
    grid-column: 2 / 3;
}


.left-nav-header, .page-header {
    border-color: #e4e4e7;
    background-color: #f4f4f5;
    color: #52525b;
    padding-top: .5rem;
    padding-left: .5rem;
    padding: .25rem;
    height: 47px;
    border-bottom: 1px solid #e4e4e7;
}

.parent footer {
    grid-column: 1 / 4;
}

.section-separator {
    border-right: 1px #dee2e6 dashed
}

.form-floating label {
    font-weight: 500 !important;
    opacity: .85 !important;
}


.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-action-active-color) !important;
    background-color: var(--bs-list-group-active-color) !important;
    border-color: var(--bs-list-group-border-color) !important;
    border-left: 3px solid var(--bs-purple) !important;
}

.list-group-category {
    background-color: var(--gray-light);
    color: black;
    font-weight: 600;
    padding: .75rem;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: #000000;
    opacity: 1 !important;
}

.form-control.input-validation-error, .was-validated .form-control:invalid, .form-select.input-validation-error, .was-validated .form-select:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.sub-heading {
    font-weight: 400;
}

.btn-collapse {
    font-size: 1.3rem;
    margin-top: -8px;
    cursor: pointer;
}
/*No layout*/
.parent-full {
    min-height: 100vh;
    display: grid;
    display: grid;
    grid-template: 50px 1fr auto / 200px 1fr auto;
    /*  grid-template-rows: 1fr auto;*/
}


    .parent-full header {
        grid-column: 1 / 4;
    }

    .parent-full footer {
        grid-column: 1 / 4;
    }

.nav-link:hover {
    background-color: #212529 !important;
}


.vertical-tab button.nav-link:hover, .vertical-tab a:hover {
    border-radius: 0px;
    background-color: #ffffff !important;
    color: var(--bs-gray-900);
    border-bottom: 1px solid var(--bs-secondary) !important;
    margin-bottom: 0px;
}

.vertical-tab button.active, .vertical-tab button.active:hover, .vertical-tab a.active, .vertical-tab a.active:hover {
    border-radius: 0px;
    border-top: 1px solid var(--bs-primary) !important;
    border-bottom: 1px solid var(--bs-primary) !important;
    margin-bottom: 0px;
}

.img-thumbnail {
    width: 200px !important;
}



.wizard-min-height {
    min-height: 400px;
}

.icon-btn {
    cursor: pointer;
}
/*Grid*/
.field-container, .field-container-sm, .field-container-lg, .field-container-border {
    display: grid;
    grid-template-columns: 180px 1fr;
    padding: .5rem;
}

.field-container-sm {
    grid-template-columns: 160px 1fr;
}

.field-container-lg {
    grid-template-columns: 270px 1fr !important;
}

.field-container-border {
    grid-template-columns: 200px 1fr;
    border-bottom: 1px dashed #dee2e6;
}

.field-container .field-sm {
    width: 60%;
}



.field-container span.text-danger {
    width: 100%;
    display: block;
    grid-column: 2 / 3;
}

.container-with-right-nav {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 250px;
}

.container-with-left-nav {
    height: 100%;
    display: grid;
    grid-template-columns: 325px 1fr;
}



#file-drop-zone, #email-drop-zone, .file-drop-zone {
    margin-top: 0px;
    min-height: 50px;
    border: 1px dashed var(--bs-primary);
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border-radius: .25rem;
}

.drop-zone-over {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF;
}

.bg-jag {
    color: #ffffff;
    background-color: #27272a !important;
    border-bottom: 3px solid #d4af37;
}

.section-border {
    border-color: #eaf3ff !important;
}

.footer {
    font-size: .7rem;
    color: #ffffff;
}

#imageViewer {
    position: fixed;
    top: 20px;
    left: 50%;
    margin-left: -450px;
    border: 2px solid #6c757d;
    border-radius: .25rem;
    background-color: #ffffff;
    display: none;
    z-index: 2000;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.image-column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .image-column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
        max-height: 150px;
    }

.left-menu-header {
    padding: 10px;
    font-weight: bold;
    text-align: center;
}



.left-panel-link div.active A {
    color: #d4af37;
}

.left-panel-link div A {
    color: #ffffff;
    text-decoration: none;
}

.left-nav-link, .left-panel-link {
    cursor: pointer;
    margin: .25rem;
}

    .left-nav-link div, .left-panel-link div {
        padding: 5px;
    }

        .left-nav-link div.active A {
            color: #3f3f46;
        }

        .left-nav-link div.active {
            border-radius: .5rem;
            background-color: #d4d4d8;
        }

        .left-nav-link div A {
            color: var(--bs-body-color);
            text-decoration: none;
        }

.upper {
    text-transform: uppercase;
}

label {
    color: #6b778c;
}

.dropZoneOver {
    background-color: #cce5ff !important;
    color: #FFFFFF;
}

.danger-box, .info-box, .primary-box, .success-box {
    padding: .25rem;
    border-color: #b8daff;
    color: #004085;
}

.danger-box {
    background-color: rgba(220,53,69,.075);
    border-left: .25rem solid rgba(220,53,69,.5);
}

.info-box {
    background-color: rgba(255,193,7,.075);
    border-left: .25rem solid rgba(255,193,7,.5);
}

.primary-box {
    background-color: rgba(13,202,240,.075);
    border-left: .25rem solid rgba(13,202,240,.5);
}

.success-box {
    background-color: rgba(25,135,84,.075);
    border-left: .25rem solid rgba(25,135,84,.5);
}




.hover-container .hover-btn {
    display: none;
}

.hover-container:hover .hover-btn {
    display: block !important;
}

.table-preview-header {
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
    margin-left: .25rem;
    padding: .25rem;
    border-radius: 50rem;
}


.view-tag {
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
    margin-left: .25rem;
    padding: .25rem;
    border-radius: 50rem;
}

    .view-tag i {
        cursor: pointer;
    }

    .view-tag:hover {
        border-color: #198754;
    }

.dnd-title {
    position: absolute;
    background-color: rgba(13,202,240,.075);
    font-weight: normal;
    cursor: move;
    text-align: center;
}

.dnd-title-hover {
    text-align: center;
    background-color: rgba(255,193,7,.5);
    border: 1px solid rgba(255,193,7,.7)
}


/*
    Styles for template
*/


.right-container {
    background-color: #f8f9fa;
    border-left: 1px solid #dee2e6 !important;
}

    .right-container a {
        color: #343a40;
    }

        .right-container a.active {
            background-color: #dfe0e1 !important;
            color: #000000 !important;
        }



a {
    text-decoration: none;
}

th a {
    font-weight: normal;
    text-decoration: none;
}

.table-hover tbody tr:hover {
    background-color: #cce5ff !important;
}



.view-divider {
    height: 5px;
    background-color: #8c98a4;
    margin-top: 5px;
}

    .view-divider:hover {
        background-color: var(--bs-purple);
        cursor: ns-resize;
    }

.dropdown-button {
    color: darkgray;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    width: 450px;
    overflow: auto;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin: 10px;
    z-index: 2;
    left: -250px;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

.dropdown a:hover {
    background-color: #ddd;
}

.show-element {
    display: block;
}

.required::after {
    content: "*";
    font-weight: bold;
    color: #dc3545;
    margin-left: 10px;
}

/*Scroll bar*/
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--bs-purple);
    }



.resizer {
    /* Displayed at the right side of column */
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    cursor: col-resize;
    user-select: none;
}

    .resizer:hover,
    .resizing {
        border-right: 2px solid blue;
    }

.bg-body {
    background-color: var(--greyscaleaccent10) !important;
}

.bg-dark {
    background-color: var(--armyblack) !important; /*#1f1e22*/
}

.bg-light {
    background-color: var(--mohww2) !important; /*#b8d4f0*/
}

.bg-army-green {
    background-color: var(--armygreen) !important; /*#b8d4f0*/
}

label {
    color: #000;
}

.text-dark {
    color: var(--armyblack) !important; /*#1f1e22*/
}

.display-required-label, .required::after {
    content: "*";
    font-weight: bold;
    color: #dc3545;
    margin-left: 10px;
}

.jagc_required {
    background-color: #fffeee;
}

.jag-bg-required {
    background: #fffeee;
    color: #000;
}

main.jag-no-left-nav {
    grid-column: 1/ 4;
}

.wizard-card {
    margin: 50px auto;
}

    .wizard-card .nav-item {
        flex: 1 1 auto;
        text-align: center;
    }

    .wizard-card .nav-link {
        width: 100%;
        text-transform: uppercase;
        -webkit-font-smoothing: subpixel-antialiased;
        background-color: var(--greyscaleaccent10) !important;
        color: #000 !important;
        border-radius: 0px;
        border-right: 2px solid #D5D5D7;
    }

        .wizard-card .nav-link:hover {
            background-color: var(--bs-jag-army-dark-green-light) !important;
            color: #fff !important;
        }

        .wizard-card .nav-link.active {
            background-color: var(--bs-jag-army-dark-green) !important;
            color: #fff !important;
            cursor: pointer;
            box-shadow: 0 16px 26px -10px var(--bs-jag-army-dark-green-light), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px #f0e9e833;
        }

    .wizard-card .bg-shadow {
        box-shadow: 0 10px 10px -10px var(--bs-jag-army-dark-green-light), 0px 10px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 5px -5px #f0e9e833;
    }


.form-floating > .form-control-plaintext ~ label.required::after,
.form-floating > .form-control:focus ~ label.required::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label.required::after,
.form-floating > .form-select ~ label.required::after {
    content: "*";
    position: initial;
    position: static;
    /*position: sticky;*/
}

/*
   SELECT 2
*/
.floating-select-label {
    z-index: 1000;
}

.form-floating .select2-container--bootstrap-5 .select2-selection {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
}

    .form-floating .select2-container--bootstrap-5 .select2-selection > .select2-selection__rendered {
        margin-top: 0.6rem;
        margin-left: 0.25rem;
    }

.jagc-dpdwn-select2.form-select.input-validation-error ~ .select2 .select2-selection {
    border-color: #ccc !important;
    box-shadow: 0 1px 1px rgba(232, 216, 156, 0.08) inset, 0 0 3px #ddd !important;
    /*  background-color: #fffeee !important; */
}

.select2-container--focus {
    border-color: #ccc;
    box-shadow: 0 1px 1px rgba(232, 216, 156, 0.08) inset, 0 0 3px #ddd;
    /*  background-color: #fffeee; */
}

.form-floating .select2-container--bootstrap-5 .select2-selection {
}

.select2-container--bootstrap-5 .select2-selection--single {
    /*  color: #1e2022;
        border: 1px solid #d5dae2;
        display: block;
        width: 100%;
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
}


.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: 0 1px 1px rgba(232, 216, 156, 0.08) inset, 0 0 3px #ddd;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border: 1px solid #ced4da;
    /* background-color: #fffeee; */
}

.select2-container--bootstrap-5 .select2-dropdown {
    box-shadow: 0 1px 1px rgba(232, 216, 156, 0.08) inset, 0 0 3px #ddd;
    border: 1px solid #ced4da;
    /* background-color: #fffeee; */
}

.select2-container--bootstrap-5 .select2-dropdown--above {
    box-shadow: 0 1px 1px rgba(232, 216, 156, 0.08) inset, 0 0 3px #ddd;
    /* background-color: #fffeee; */
}

.select2-container--bootstrap-5 .select2-results__group {
    color: #1f2e86;
    font-size: inherit;
}

ul.select2-results__options.select2-results__options--nested {
    padding-left: 5px;
    padding-bottom: 10px;
}

.select2-container--bootstrap-5 .select2-results__option {
    border-bottom: 1px dotted #ddd;
}

ul.select2-results__options.select2-results__options--nested .select2-results__option:last-child {
    border-bottom: none;
}

.form-floating .select2-container--bootstrap-5 .jagc_required {
    background-color: #fffeee;
}
/*
   SELECT 2
*/

/* Force captcha image and input group inline */
.JAGCNetAppointmentCaptcha {
    display: flex;
    align-items: center; /* vertically center image and input */
    gap: 1rem; /* space between image and input */
}

    .JAGCNetAppointmentCaptcha img {
        height: 40px; /* match input height */
        margin-bottom: 0 !important; /* remove bottom margin */
    }

.form-label {
    color: var(--bs-jag-army-dark-green-dark);
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    border-color: var(--core-lightblue);
}

.form-control {
    border-color: var(--core-lighterblue);
}

.form-check-input {
    border-color: var(--core-darkblue); /* #1488d3;*/
}

.JAGCNetAppointmentCaptcha .form-control::placeholder {
    color: black !important;
    opacity: 1;
}

div.progress {
    height: 1.5rem;
    border-radius: 0;
}

div.progress-bar {
    background-color: var(--bs-jag-army-dark-green)
}
/*.digital-timer {*/
/*background-color: #1a1a1a;*/ /* Dark background */
/*color: var(--mohcivilwar);*/ /* Bootstrap's 'danger' red */
/*font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 2.5rem;*/ /* Make it large */
/*padding: 10px 20px;
    border-radius: 5px;*/ /* Slightly rounded corners */
/*border: 2px solid #333;*/ /* Dark border */
/*display: inline-block;*/ /* Allows padding and block-like styling */
/*letter-spacing: 3px;*/ /* Space out the numbers */
/*line-height: 1;*/ /* Ensure tight vertical fit */
/*}*/



.countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.countdown-number {
    font-size: 3rem;
    font-weight: 700;
    width: 100px;
    height: 80px;
    color: var(--bs-jag-army-dark-green);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

    /*  .countdown-number::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--core-darkred), transparent);
        animation: scanline 2s linear infinite;
    }*/

    .countdown-number::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 
      The core trick: We create four linear gradients, one for each border.
      Each is a line of color that fades to transparent.
    */
        background-image: linear-gradient(to right, var(--core-darkred), var(--armygreen)), /* Top */
        linear-gradient(to bottom, var(--armygreen), var(--core-darkred)), /* Right */
        linear-gradient(to left, var(--core-darkred), var(--armygreen)), /* Bottom */
        linear-gradient(to top, var(--armygreen), var(--core-darkred)); /* Left */
        /* 
      Set the initial size of each gradient "line".
      Top/Bottom are 100% wide, 1px high. Right/Left are 1px wide, 100% high.
      We start them at size 0 so they are invisible.
    */
        background-size: 0% 1px, 1px 0%, 0% 1px, 1px 0%;
        /* Position each gradient line at the correct corner/edge to start. */
        background-position: top left, top right, bottom right, bottom left;
        /* This is critical - it prevents the gradients from tiling. */
        background-repeat: no-repeat;
        /* Apply the animation here. */
        animation: trace-border 4s linear infinite;
    }

/* 
  This is the new animation rule that replaces your old 'scanline' animation.
  It animates the background-size of the four gradients in sequence.
*/
@keyframes trace-border {
    0% {
        /* Start with all borders at size 0 */
        background-size: 0% 1px, 1px 0%, 0% 1px, 1px 0%;
    }

    25% {
        /* Top border grows to 100% width */
        background-size: 100% 1px, 1px 0%, 0% 1px, 1px 0%;
    }

    50% {
        /* Right border grows to 100% height */
        background-size: 100% 1px, 1px 100%, 0% 1px, 1px 0%;
    }

    75% {
        /* Bottom border grows to 100% width */
        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0%;
    }

    100% {
        /* Left border grows to 100% height, completing the circle */
        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    }
}

.countdown-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--armywhite);
    width: 100px;
    background: var(--bs-jag-army-dark-green-light);
}

@keyframes scanline {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


:root {
    /* Base Color: #2F372F */
    --bs-jag-army-dark-green: #2F372F;
    /* Lighter/Hover Shade (Example: 15% lighter) */
    --bs-jag-army-dark-green-light: #4c574c;
    /* Darker/Active Shade (Example: 15% darker) */
    --bs-jag-army-dark-green-dark: #121c12;
    /* RGB value for focus/shadows (2F372F in RGB) */
    --bs-jag-army-dark-green-rgb: 47, 55, 47;
}

.btn-jag-army-dark-green {
    /* Standard/Default State */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-jag-army-dark-green);
    --bs-btn-border-color: var(--bs-jag-army-dark-green);
    /* Hover State */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-jag-army-dark-green-light);
    --bs-btn-hover-border-color: var(--bs-jag-army-dark-green-light);
    /* Active/Click State */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-jag-army-dark-green-dark);
    --bs-btn-active-border-color: var(--bs-jag-army-dark-green-dark);
    /* Focus State */
    --bs-btn-focus-shadow-rgb: var(--bs-jag-army-dark-green-rgb);
}

.btn-outline-jag-army-dark-green {
    /* Standard/Default State */
    --bs-btn-color: var(--bs-jag-army-dark-green);
    --bs-btn-border-color: var(--bs-jag-army-dark-green);
    /* Hover State */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-jag-army-dark-green);
    --bs-btn-hover-border-color: var(--bs-jag-army-dark-green);
    /* Active/Click State */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-jag-army-dark-green-dark);
    --bs-btn-active-border-color: var(--bs-jag-army-dark-green-dark);
    /* Focus State */
    --bs-btn-focus-shadow-rgb: var(--bs-jag-army-dark-green-rgb);
}
/* Text Color Utility: class="text-jag-army-dark-green" */
.text-jag-army-dark-green {
    color: var(--bs-jag-army-dark-green) !important;
}

/* Background Color Utility: class="bg-jag-army-dark-green" */
.bg-jag-army-dark-green {
    background-color: var(--bs-jag-army-dark-green) !important;
}

/* Border Color Utility: class="border-jag-army-dark-green" */
.border-jag-army-dark-green {
    border-color: var(--bs-jag-army-dark-green) !important;
}

/* Alert/List Group Item (for contrast) */
.alert-jag-army-dark-green {
    --bs-alert-color: #000000; /* Dark text for light background */
    --bs-alert-bg: #e6e9e6; /* Very light version of the color */
    --bs-alert-border-color: #c7cbc7;
}

/* Custom CSS */
.form-select {
    /* Scrollbar Thumb and Track for Firefox */
    scrollbar-color: var(--bs-secondary-bg) var(--bs-body-bg);
    /* You can use specific hex codes like: scrollbar-color: #6c757d #f8f9fa; */
    /* Thumb (The moving part) | Track (The background) */
}
    /* Target the scrollbar in the form-select element */
    .form-select::-webkit-scrollbar {
        width: 8px; /* Set a standard width for the scrollbar */
    }

    /* Style the TRACK (the background of the scrollbar) */
    .form-select::-webkit-scrollbar-track {
        background: transparent; /* Makes the track completely transparent */
        /* If you want a specific light color: background-color: #f8f9fa; (Bootstrap Light) */
        /* border-radius: 10px; */
    }

    /* Style the THUMB (the movable part of the scrollbar) */
    .form-select::-webkit-scrollbar-thumb {
        background-color: var(--bs-secondary-color); /* Use a neutral Bootstrap color like secondary (gray) */
        /* If you want a specific color: background-color: #adb5bd; */
        border-radius: 10px;
        border: 3px solid transparent; /* Optional: adds padding/margin effect */
    }

/* 1. Style for Disabled Days (Full booked/Past dates) */
#appointmentDatePickerGroup .datepicker table tr td.disabled,
#appointmentDatePickerGroup .datepicker table tr td.disabled:hover {
    background-color: #eda6a6 !important; /* Soft red background */
    color: #000 !important; /* Dark red text */
    cursor: not-allowed;
    opacity: 0.6;
    border: 1px solid #B3B3B3;
    border-radius: 0;
}

/* 2. Style for the Active/Selected Day */
#appointmentDatePickerGroup .datepicker table tr td.active,
#appointmentDatePickerGroup .datepicker table tr td.active:hover,
#appointmentDatePickerGroup .datepicker table tr td.active.active {
    background-color: #009933 !important; /* Success Green */
    background-image: none !important; /* Remove default Bootstrap gradients */
    color: #ffffff !important;
    border-radius: 4px;
}

/* 3. Style for Today's Date (Optional: highlight it differently) */
#appointmentDatePickerGroup .datepicker table tr td.today {
    border: 2px solid #A9A9A9 !important; /* Gold border */
}

/* 4. Hover effect for available days */
#appointmentDatePickerGroup .datepicker table tr td.day:hover:not(.disabled):not(.active) {
    background: #a6dbb8;
    cursor: pointer;
}

#appointmentDatePickerGroup .datepicker table tr td.day {
    background: #D3F0DD;
    cursor: pointer;
}

.display-1 .bi-check2-circle {
    filter: drop-shadow(0px 4px 10px rgba(40, 167, 69, 0.2));
}

@media print {
    .btn, .alert {
        display: none !important; /* Hide buttons and alerts when printing */
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}

#errorSummary ul {
    margin: 0px;
}

.validation-summary-valid {
    display: none;
}

/* This rule styles and displays the summary box when errors are present */
.validation-summary-errors {
    /* You can customize this, but these are good Bootstrap defaults */
    border: 1px solid #dc3545; /* Red border */
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    padding: 1rem;
    border-radius: .25rem;
    margin-top: 1rem;
    width: 100%; /* Make it fill the footer */
}

    /* Style the list of errors inside the summary */
    .validation-summary-errors ul {
        margin-bottom: 0;
        padding-left: 1.5rem;
    }
.officeTimezoneDetails strong, #available-slots-container strong {
    color: #990000
}