html {
    font-size: 14px;
}

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

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 140px;
    flex: 1;
    min-height:100vh;
    background-color: #eff6fc
}

.form-group label.required-field::after {
    content: " *";
    color: #c0202f !important; /* Adding !important to force the color to show */
    font-weight: bold;
    margin-left: 3px;
}
/* 1. Ensure the wrapper allows absolute positioning */
.select-wrapper {
    position: relative;
    display: block;
}

/* 2. Style the arrow and force it to the top */
.select-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Crucial: clicks go through to the select */
    color: #212529;
    font-size: 0.75rem;
    z-index: 10; /* Forces the arrow on top of the select box */
}

/* 3. Ensure the select box doesn't cover the arrow */
.simple-select {
    display: block;
    width: 100%;
    /* UPDATED: Changed padding to Top Right Bottom Left. 
       2.25rem on the right ensures the text NEVER touches the arrow */
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* NEW: Truncate long text with an ellipsis (...) when the box shrinks */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .simple-select:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

/* Mobile & Desktop Adjustments */
@media screen and (max-width: 768px), screen and (min-width: 1200px) {
    .simple-select {
        /* Maintain the larger right padding here as well */
        padding: 0.6rem 2.25rem 0.6rem 1rem;
        font-size: 16px;
    }

    .select-arrow {
        right: 12px; /* Bumped slightly to center it in the new padding */
        font-size: 0.875rem;
    }
}
/*====================== Log In Page (Not used) ========================*/
/* Left Side Bar */
.sidebar {
    background-color: white;
    padding: 2rem;
    font-size: 0.9rem;
}

    .sidebar h5 {
        font-weight: bold;
    }

    .sidebar .disclaimer {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-top: 1.5rem;
    }

    .sidebar .warning {
        color: #c0202f;
        font-weight: bold;
        margin-top: 1rem;
    }

.support {
    background-color: #e9fbfd;
    margin-top: 50px;
}

/* Login Image */
.login-image {
    width: 150px;
    margin-top: 20px;
    margin-right: 20px;
}

/* Main Content */
.main-content {
    background-color: #e9fbfd;
}

/* Login */
.sign-in {
    color: #2a5166 !important;
}

.login-card {
    background-color: white;
    padding: 2rem;
    width: 360px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

    .login-card h4 {
        margin-bottom: 1.5rem;
    }

    .login-card a {
        font-size: 0.85rem;
        text-decoration: none;
    }

/* Foot Text */
.support {
    font-size: 0.75rem;
    margin-top: 2rem;
}

/*====================== Confirm Agency Details ========================*/
.card {
    margin-left: 5rem;
    margin-right: 5rem;
}

.confirm-agency {
    font-weight: 600;
}

/*====================== Nav Bar ========================*/
/* Nav Bar */
.main-header {
    background: #5a759f;
    margin-bottom: 25px;
}

.nav-photo {
    margin: 10px;
    margin-left: 3rem;
    /*width: 70px;*/
    height: 120px;
    /*filter: brightness(0) invert(1);*/
}

.state-name {
    font-weight: bold;
    font-size: 1.5rem;
    color: #555;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.org-name {
    font-weight: bold;
    font-size: 2.15rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    text-decoration: none;
}

.navbar {
    position: relative;
}

.navbar-nav {
    margin-left: 3rem;
}

.nav-link {
    color: black !important;
    padding: 10px 8px;
    margin: 0 5px;
    font-size: 15px;
    white-space: nowrap;
}

.nav-box:hover {
    background-color: #395683;
    height: 117%;
}

/*========================== Nav Bar Contents ============================*/
/* These are currently not being used!! */
/* Login and Register */
.login-area {
    max-width: auto;
}


/* Search Bar */
.input-group .form-control {
    max-width: auto;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Background Check Dropdown options */
@media (min-width: 992px) { /* When Screen is small, dropdown has to be clicked */
    .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(2px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible;
        transform: translateY(0) !important;
        margin-top: 0 !important;
        top: 100% !important;
    }
}

.dropdown-item {
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease;
}

    .dropdown-item:active,
    .dropdown-item:focus {
        outline: none !important;
        box-shadow: none !important;
        background-color: inherit !important;
    }

    .dropdown-item:hover {
        background-color: #ededed !important;
        color: #000000 !important;
    }

/* Nav bar Screen Sizing */
@media (max-width: 991.98px) {
    .state-name {
        font-size: 1.25rem; /* West Virginia */
    }

    .org-name {
        font-size: 1.7rem; /* Bureau for Social Services */
    }
}

/* Search Sizing */
@media (max-width: 991.98px) {
    .collapse .serach-bar {
        width: 100%;
    }

        .collapse .serach-bar .input-group {
            width: 100%;
        }

            .collapse .serach-bar .input-group .form-control {
                max-width: 100%;
                width: auto;
            }

            .collapse .serach-bar .input-group > .btn {
                flex-shrink: 0;
            }
}

/*===================== Footer ======================*/

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 3rem;
    height: 95px;
    padding: 16px 24px;
    background: #5a759f
}

.footer-info {
    color: white;
    position: center;
}

/*===================== Form / All =======================*/

/* Both the Agency and Applicant */
.container {
    padding-top: 20px;
    padding-bottom: 10px;
    border-radius: 10px;
}

h2 {
    font-size: 20px;
    color: #5a759f;
    border-bottom: 2px solid #5a759f;
    padding-bottom: 5px;
}

p {
    font-size: 13px;
    margin-top: 10px;
}

.verify-info {
    border: 1px solid #999;
    padding: 10px 15px;
    margin-bottom: 20px;
    background-color: #F7F7F7;
}

.verify-content {
    display: flex;
    align-items: flex-start;
}

.verify-box {
    color: white;
    background-color: #c0202f;
    padding: 5px 10px;
    margin-right: 10px;
    font-weight: bold;
}

strong {
    font-size: 16px;
}

/* Required Fields (*) */
.required-input {
    color: #c0202f;
    font-weight: bold;
}

/* Pop up Bubble */
.name-anchor {
    position: relative;
}

.address-anchor {
    position: relative;
}

.info-bubble {
    position: absolute;
    top: -130px;
    left: 15px;
    width: 95%;
    max-width: 100%;
    z-index: 1050;
    padding-top: 29.5px;
    padding-bottom: 29.5px;
    border: 1px solid rgba(184, 218, 255, 0.5);
    /* Start Hidden */
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .info-bubble.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

.close-bubble {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px;
    font-size: 0.8rem;
}

.is-invalid-bubble {
    background-color: #f8d7da;
    color: #721c24;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* ============ Error Message Styling ============ */
/* Error Message Spacing */
.feedback-slot {
    min-height: 20px;
    margin-top: 0.25rem;
    display: block;
    clear: both;
}

/* Error Message Font */
    .feedback-slot span.text-danger {
        display: block;
        color: #B00020 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        display: block !important;
        line-height: 1.2;
        margin-top: 4px !important;
        min-height: 1.25em;
        min-height: 1.2em;
    }

/* Fix the Input Box Border and Background */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #B00020 !important; /* Darker red border */
    background-image: none !important; /* Removes the Bootstrap '!' icon if it's causing overlap issues */
}

    /* Fix the Glow */
    .form-control.is-invalid:focus {
        border-color: #B00020 !important;
        box-shadow: 0 0 0 0.25rem rgba(176, 0, 32, 0.2) !important; /* Very faint dark red shadow */
    }

.select-with-arrow {
    /* Override Bootstrap's hidden appearance */
    -webkit-appearance: menulist; /* For Chrome/Safari/Edge */
    -moz-appearance: menulist; /* For Firefox */
    appearance: menulist; /* Standard property */
    /* Optional: Undo padding if Bootstrap added it to hide the arrow */
    padding-right: 12px;
}

/* Custom Dropdown Error Border */
.dropdown-check-wrapper.is-invalid summary {
    border: 1px solid #B00020 !important;
}

    .dropdown-check-wrapper.is-invalid summary:focus {
        outline: none; /* Removes default browser focus */
        box-shadow: 0 0 0 0.25rem rgba(176, 0, 32, 0.2) !important;
    }

/* Checkboxes */
/* Target the label specifically when the checkbox is invalid */
.form-check-input.is-invalid ~ .form-check-label {
    color: #B00020 !important; /* Forces your dark accessible red */
}

/* Text stays dark enough when focused */
.form-check-input.is-invalid:focus ~ .form-check-label {
    color: #B00020 !important;
}

/* ========== Buttons ========== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Save and Complete Registration Buttons */
.btn-primary {
    background-color: #0070F4;
    border-color: #0070F4;
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Small Add Buttons (Application Form) */
.btn-info, btn-info:focus {
    background-color: #0070F4 !important;
    background: #0070F4 !important;
    color: white !important;
    box-shadow: none;
}

    .btn-info:hover {
        background-color: #1e6abd !important;
        color: white !important;
        border-color: #1e6abd !important;
    }

/* X Buttons */
.btn-danger {
}

/* Button Disabled Section */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: not-allowed;
    pointer-events: auto; /* Hover detection even if button is disabled */
}

    .tooltip-wrapper .tooltip {
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        visibility: hidden;
        opacity: 0;
        white-space: nowrap;
        z-index: 1;
        transition: opacity 0.3s ease;
        background-color: #333;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding: 6px 12px;
        border-radius: 4px;
    }

    /* Hover Interaction (When Button is Disabled) */
    .tooltip-wrapper:hover .tooltip {
        visibility: visible;
        opacity: 1;
    }

    /* "Enabled" State Overrides */
    .tooltip-wrapper:has(button:not(:disabled)) {
        cursor: default;
    }

        .tooltip-wrapper:has(button:not(:disabled)) .tooltip {
            display: none;
        }

/* Text Boxes */
textarea {
    resize: none;
}

.counter {
    margin-top: 5px;
    font-size: 14px;
    color: #555;
}

.warning {
    color: #B00020 !important;
}

/* Override text-muted on light-grey backgrounds for ADA compliance */
.bg-light .text-muted,
.container.bg-light .form-label.text-muted {
    color: #595959 !important; /* Darker grey for better contrast */
    font-size: 0.875rem; /* Slightly larger to help readability */
}

/* Also ensure the character count is readable */
#charCount.text-muted {
    color: #595959 !important;
}

/*===================== Agency Registration Screen =======================*/
/* Update and Modify (Agency Screen) Text Fields */
.left-fixed {
    max-width: 500px;
    min-width: 500px;
}

/* Left text boxes small screen */
@media (max-width: 992px) {
    .left-fixed {
        max-width: 100%;
        min-width: 100%;
    }
}

/* Agency View */
.checkbox-list-container {
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    background-color: #fff;
}

/* Enhances accessibility for keyboard navigators */
.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/*===================== Applicant Registration Screen =======================*/

/* Residential and Name History */
/* Tables */
table {
    font-size: 13px;
}

thead {
    background-color: #ddd;
}


/* History Disclaimer */
.history-box {
    background-color: #eee;
    padding: 5px 10px;
    border-top: 1px solid #ccc;
}

/* Terms and agreements box */
.info-box {
    font-size: 35px;
    font-weight: bold;
}

/* Terms and Agreement Content */
.legal-text {
    white-space: pre-line;
    font-size: 14px;

}

/* Employee Sign and Date */
.blackbox-sign {
    border: 1px solid #000000;
}

/*================ Success Page =================*/

.success-page {
    min-height: 50vh;
    margin-bottom:25vh;
}

/* Card */
.success-card {
    position: relative;
    background: white;
    width: 100%;
    max-width: 420px;
    padding: 32px 28px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

    /* Green Success Bar */
    .success-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 6px;
        width: 100%;
        background: linear-gradient( 90deg, #2EC4A6, #57d7e9);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

.skip-link {
    position: absolute;
    top: -40px; /* Hide off-screen */
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
    text-decoration: none;
    border-radius: 0 0 5px 0;
}

    .skip-link:focus {
        top: 0; /* Slide down when tabbed into */
        outline: 2px solid var(--accent-color);
    }

.success-icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border: 4px solid #70d4c2c4;
    border-radius: 50%;
}

.icon-halo {
    position: absolute;
    inset: 0;
    background-color: rgba(46, 196, 166, 0.2);
    border-radius: 50%;
}

.icon-circle i {
    font-size: 42px;
    position: relative;
    color: #26b39a;
}

.submission-status {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.application-icon {
    position: relative;
    padding: 5px;
    color: #26b39a
}

.info-strip {
    margin-top: 2.5rem;
    padding: 10px 12px;
    background-color: #F3F4F6;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
}


.successful-info {
    text-align: left;
}

/* Success Button */
.btn-success-custom {
    background-color: #26B39A;
    color: white;
}

    .btn-success-custom:hover {
        background-color: #20927d;
        color: white;
    }

/* The wrapper that acts as the dropdown button */
.dropdown-check-wrapper {
    position: relative;
    width: 100%;
    font-family: inherit;
}

    .dropdown-check-wrapper details {
        width: 100%;
    }

    .dropdown-check-wrapper summary {
        padding: 8px 12px;
        border: 1px solid #dee2e6; 
        border-radius: 0.375rem; 
        cursor: pointer;
        list-style: none;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .dropdown-check-wrapper summary::after {
            content: '▼';
            font-size: 0.7rem;
            color: #6c757d;
        }

/* The actual list container that pops out */
.checkbox-list-container {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background: white;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    margin-top: 5px;
}

.choices {
    margin-bottom: 0 !important;
}

    .choices[data-type*="select-multiple"] {
        z-index: 10 !important;
    }

        .choices[data-type*="select-multiple"] .choices__inner {
            min-height: 38px !important;
            padding: 6px 12px !important;
            border: 1px solid #ced4da !important;
            border-radius: 0.375rem !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 6px !important;
            align-items: center;
            background-color: #fff;
        }

.choices__input {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.choices__list--multiple .choices__item {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 4px 8px !important;
    font-size: 14px;
    white-space: normal !important;
    word-break: normal !important; 
    overflow-wrap: break-word !important; 
}

/* AgencyType Items in the dropdown itself */
.choices__list--dropdown .choices__item {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.validate.invalid + .choices .choices__inner {
    border-color: #dc3545 !important;
}