/* Inter variable font — self-hosted. --font-family in /StyleGuide/css/styleguide.css

   already names 'Inter'; this @font-face makes it actually load. */

@font-face {

    font-family: 'Inter';

    src: url('../fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('woff2');

    font-weight: 100 900;

    font-style: normal;

    font-display: swap;

}



html {

    background-color: var(--bg-main);

}



::view-transition {

    background-color: var(--bg-main);

}



:root {

    --direction: 1;

    background-color: var(--bg-main);

    color: var(--text-main);

    --transition-mid: all ease-in-out 0.15s;

    --transition-fast: all ease-in-out;

    /*--fa-primary-color: var(--primary-blue);

    --fa-secondary-color: var(--primary-blue);

    --fa-primary-opacity: 1;

    --fa-secondary-opacity: .9;*/

    /* The outer ring and the handle */

    --fa-primary-color: #2b3652;

    --fa-primary-opacity: 1;

    /* The inner lens background */

    --fa-secondary-color: #aeb4c2;

    --fa-secondary-opacity: 1;

    --radius: 12px;

    --radius-button: 8px;

}

    :root:not([data-theme]),

    :root[data-theme='light'] {

        color-scheme: light;

        --bg-main: #F7F8FA;

        --card-bg: #FFFFFF;

        --shadow: rgba(13, 44, 75, 0.07);

        --card-shadow: 0 1px 2px rgba(13, 44, 75, 0.05), 0 2px 10px var(--shadow);

    }



    :root[data-theme='dim'] {

        color-scheme: dark;

        --bg-main: #2c3036;

    }



.fa-duotone.fa-magnifying-glass:after {

    content: "";

    clip-path: circle(37% at 43% 43%);

    background: var(--light-blue);

    border: thin solid var(--primary-blue);

    color: var(--primary-blue);

}



body {

    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    padding: 15px;*/

    font-family: var(--font-family);

    margin: 0;

    display: flex;

    color: var(--text-main);

    background-color: var(--bg-main);

    flex-direction: column;

    /*scrollbar-gutter: stable both-edges;*/

}



.content-frame {

    width: auto;

    min-width: 1200px;

}



body.modal-open {

    overflow: hidden;

}



.black-screen {

    z-index: 15;

}



.theme-transition {

    transition: background-color 0.3s ease, color 0.3s ease;

}



.terms-and-privacy {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 100%;

    padding: 0 30px;

}



.page-footer .footer-logo {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    gap: .45rem;

    font-size: .875rem;

    color: var(--text-muted);

    font-weight: 500;

}



@view-transition {

    navigation: auto;

    types: circular-wipe;

}

/* Both Pages */

.fixed-menu-loc {

    view-transition-name: content;

}



::view-transition-old(content) {

    animation: slide-out 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;

}



::view-transition-new(content) {

    animation: slide-in 0.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;

}



@keyframes slide-out {

    0% {

        transform: translateY(0%);

        opacity: 1;

    }



    100% {

        opacity: 0;

        transform: translateY(calc(5% * var(--direction)));

    }

}



@keyframes slide-in {

    0% {

        opacity: 0;

        transform: translateY(calc(-5% * var(--direction)));

    }



    100% {

        opacity: 1;

        transform: translateY(0%);

    }

}

/* Main Content Area */

main {

    padding: 0 5rem 4rem;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

}



.multichoice-container {

    display: grid; /* Adjust spacing between items */

}

/* 1 Column */

.multichoice-col1 {

    grid-template-columns: repeat(1, 1fr);

}

/* 2 Columns */

.multichoice-col2 {

    grid-template-columns: repeat(2, 1fr);

}

/* 3 Columns */

.multichoice-col3 {

    grid-template-columns: repeat(3, 1fr);

}

/* Single line */

.multichoice-colX {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

}



.form-field-box:has(.multichoice-container):has(input[type="checkbox"]),
.form-field-box:has(.multichoice-container):has(input[type="radio"]) {
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
}



.search-submit input[type=button] {

    width: 100%;

}

/* Establish the positioning context for the absolutely-positioned .password-toggle.

   Written WITHOUT :has() so it works in Safari versions that don't support it;

   scoped to the auth cards so other forms are unaffected. */

.ats-card-box .form-field-box {

    position: relative;

}



.form-field-box:has(.password-toggle) {

    display: grid; /* override the flex rule that .form-field-box:has(button) applies (Chromium) */

}



.ats-card-box input[type="password"] {

    padding-right: 3rem;

}



.form-field-box .password-toggle {

    position: absolute;

    right: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    cursor: pointer;

    padding: 0.5rem;

    color: #6b7280;

    transition: var(--transition);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    z-index: 3;

    min-width: 0;

    margin: 0;

}



.ats-form-group .change-password-start .password-toggle, .ats-form-group .form-signup-start .password-toggle {

    top: 68%;

}



.form-field-box .password-toggle:focus {

    outline: 2px solid var( --light-blue);

    outline-offset: 2px;

    color: var( --light-blue);

}



.form-field-box .password-toggle.active {

    color: var( --light-blue);

    background: rgba(14, 165, 233, 0.1);

}



.form-field-box .password-toggle i {

    font-size: 1rem;

    transition: var(--transition);

    font-weight: 500;

}



.password {

    padding-right: 3.25rem;

    width: 100%;

    padding: 1rem;

    border: 2px solid var(--border);

    border-radius: var(--radius);

    font-size: 1rem;

    font-family: inherit;

    font-weight: 500;

    background: var(--surface);

    color: var(--text-primary);

    transition: var(--transition);

    outline: none;

    position: relative;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);

}



.forgot-password {

    margin-top: 10px;

}



.ats-card-box {

    max-width: 550px;

    width: 100%;

    text-align: center;

    /*padding: 1rem;*/

}



    .ats-card-box .card-header {

        text-align: center;

        line-height: 0px;

        margin-bottom: 3rem;

        background: var(--dark-blue-gradient);

        color: var(--white);

        padding: 1rem;

    }



        .ats-card-box .card-header.complete {
            padding: 20px 16px;
            background: #325271;
            text-align: center;
            margin: auto;
        }



.card-header.complete .circle-div {
    background: none;
    color: #ccf0ce;
    width: auto;
    height: auto;
    margin: 0;
}


    .card-header.complete .content-header h2 {
        margin: 20px;
    }
.ats-card-box .card-header h2 {
    font-size: 2rem;
    margin-bottom: 55px;
    line-height: 35px;
}



        .ats-card-box .card-header h4 {

            font-size: 1.5rem;

            margin-bottom: 3rem

        }



        .ats-card-box .card-header p {

        }



    .ats-card-box button, .ats-card-box input, .ats-card-box a.button {

        width: 100%;

        margin: 0;

    }



.form-field-box .google {

    width: 15px;

}



.ats-card-box:has(.ats-form-group:is(:empty)) .card-header {

    margin-bottom: 0;

}



.ats-form-group:not(:empty) {

    margin: 0 8%;

    text-align: center;

    padding: 0 1rem 2rem;

}

/* Extra separation above the FIRST action button in a form.

   Avoids :nth-child(... of S) (Safari fails to parse it) and excludes the

   absolutely-positioned .password-toggle. The sibling rule below resets the

   margin on any later action buttons so only the first one is spaced. */

.ats-form-group .form-field-box:has(button:not(.password-toggle)) button:not(.password-toggle),

.ats-form-group .form-field-box:has(a.button) a.button {

    margin-top: 1rem;

}



.ats-form-group .form-field-box:has(button:not(.password-toggle)) ~ .form-field-box:has(button:not(.password-toggle)) button:not(.password-toggle),

.ats-form-group .form-field-box:has(a.button) ~ .form-field-box:has(a.button) a.button {

    margin-top: 0;

}



.form-signup-complete, .reset-complete, .change-password-complete {

    display: none;

}



.subtext {

    font-size: .8rem;

    font-style: italic;

}

/* Job Posting */

.ats-job-search {

    background-color: var(--tint-blue);

    border-radius: var(--radius);

    height: fit-content;

    position: sticky;

}



.ats-job-search-filters label {

    color: var(--dark-blue);

}



.job-posting-container {

    display: grid;

    grid-template-columns: minmax(360px,400px) minmax(350px,1fr);

    gap: 1rem;

}

/*.job-posting-container {

    display: grid;

    grid-template-columns: minmax(360px,400px) minmax(350px,1fr);

}*/

.search-feature {

    padding: 12px 17px;

    /*    border: thin solid var(--tint-grey);*/

    border: none;

    margin: 0;

}



    .search-feature > label {

        font-weight: bold;

    }



.form-field-box {

    margin: 5px 0;

    width: 100%;

}



.salary-range-slider {

    margin-top: 15px;

}



.search-submit {

    display: flex;

    justify-content: center;

    position: sticky;

    bottom: -0.3rem;

    z-index: 1;

    background: var(--tint-blue);

    padding: 0.6rem 0.3rem;

    border-top: thin solid var(--highlight-blue);

}



    .search-submit button {

        width: 100%;

    }



.ats-job-item {

    height: fit-content;

    /*border-left: 6px solid var(--primary-blue);*/

    margin-bottom: .5rem;

    transition: var(--transition);

    cursor: default;

}



.ats-job-item {

    background: var(--tint-blue);

    box-shadow: none;

    border-top: 1px solid var(--tint-blue);

    border-bottom: thin solid var(--primary-blue);

}



    .ats-job-item.selected {

        border-color: var(--tint-blue);

        border-right: 1px solid var(--tint-blue);

        background: var(--card-bg);

        width: 105%;

        box-shadow: var(--shadow-down);

        border-top-right-radius: 0;

        border-bottom-right-radius: 0;

        position: sticky;

        top: 8px;

        bottom: 65px;

        z-index: 2;

        clip-path: inset(-20px 2px -20px -20px);

    }



        .ats-job-item.selected .badge {

            background-color: var(--bright-grey);

            color: var(--text-main);

        }



            .ats-job-item.selected .badge.square {

            }



.form-find-position {

    min-height: calc(100vh - (var(--top-margin) + var(--bottom-margin)) - 4rem);

}



.ats-job-header {

    display: flex;

    /*margin-bottom: 20px;*/

    flex-direction: column;

    align-items: center;

}



.job-item-list {

    width: 100%;

}



.custom-banner {

    display: flex;

    justify-content: center;

    /*max-width: 950px;*/

    width: 100%;

    background: var(--primary-blue);

    color: var(--text-main-inverse);

    height: 120px;

    align-items: flex-end;

    border-bottom-right-radius: var(--round);

    border-bottom-left-radius: var(--round);

    padding: 20px;

}



.ats-job-header-flex {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 22px 0;

    width: 100%;

    gap: 15px;

}





.job-search-location {

    color: var(--primary-blue);

    font-weight: 600;



    span {

        color: var(--dim-grey);

        font-weight: 300;

        text-transform: initial;

    }



    .company-name {

        color: var(--text-main);

        font-size: 1.6rem;

        font-weight: 700;

        letter-spacing: -0.02em;

        line-height: 1.2;



        &::after {

            content: "";

            display: block;

            width: 46px;

            height: 3px;

            margin-top: 7px;

            border-radius: 2px;

            background: var(--primary-blue);

        }

    }

}



h4.company-name {

    padding: 8px 0;

}



.job-search-map {

    width: 100%;

    background: var(--tint-blue);

    border-radius: var(--radius);

    padding: 0px;

    overflow: hidden;

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows 0.35s ease-in-out, margin 0.35s ease-in-out;

}



    .job-search-map.map-border {

        border: thin solid var(--border-color-light);

        box-shadow: var(--shadow-card);

        margin: 15px 0;

        grid-template-rows: 1fr;

    }



    .job-search-map .map-reveal {

        min-height: 0;

        overflow: hidden;

    }



.job-search-map-button {

    color: var(--dim-grey);

    cursor: pointer;

    border: thin solid var(--dim-grey);

    padding: 14px 10px;

    min-width: 120px;

    /*    border-radius: var(--radius-button);*/

    border-radius: var(--radius);

    background: transparent;

    margin: 1px;

    cursor: pointer;

    display: flex;

    gap: 7px;

    justify-content: center;

    width: auto;

    transition: var(--transition);

    font-size: .85rem;

    align-items: center;

}



.job-totals {

    color: var(--text-main);

    font-weight: 400;

    margin: .5rem;

}



    .job-totals span {

        color: var(--primary-blue)

    }



.job-filters {

    margin: 0 10px;

}



    .job-filters select {

        min-width: 110px;

    }



.inner-job-card {

    padding: 0.5rem;

    position: relative;

    min-height: 110px;

    border-radius: var(--radius);

}



    .inner-job-card > div {

        margin-bottom: 0.2rem;

    }



.job-item-header {

    display: grid;

    justify-content: space-between;

    grid-template-columns: 200px 1fr max-content;

}



    .job-item-header .form-field-box {

        margin-top: 0;

    }



.job-post-header.has-badge {

    display: flex;

    justify-content: flex-start;

    align-items: flex-end;

    flex-direction: column;

}



.job-post-header .applied-chip {

    padding: 4px 7px 4px 11px;

    color: var(--green);

}



.job-post-header .applied-chip-half {

    padding: 4px 7px 4px 11px;

    color: var(--orange);

}



.job-post-header .progress-flex {

    display: flex;

    align-items: center;

    margin-right: .5rem;

}



.job-post-header .apply-text {

    font-size: 10px;

}



    .job-post-header .apply-text.green {

        color: var(--green);

    }



    .job-post-header .apply-text.orange {

        color: var(--orange);

    }



.job-post-header .form-field-box {

    margin: 3px 0;

}



.jobinfo-back {

    padding: 1rem 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: thin solid var(--border-color-light);

}



    .jobinfo-back i {

        margin-right: 10px;

    }



.job-post-header button, .job-post-header a.button {

    padding: 10px;

}



.job-post-title {

    font-size: 1.2rem;

    color: var(--primary-blue);

    font-weight: 600;

}



.job-posted-date {

    color: var(--dim-grey);

    font-size: .9rem;

    margin: 7px 2px;

}



.job-post-total {

    color: var(--dark-grey);

    font-size: .9rem;

    line-height: 21px;

}



.job-item-desc {

    line-height: 1.5rem;

}



.job-item-filter-badges .basic-badge:is(:empty) {

    display: none;

}



.job-item-star {

    position: absolute;

    bottom: 5px;

    right: 10px;

    cursor: pointer;

    transition: var(--transition);

    color: var(--primary-blue);

}



    .job-item-star:after {

        font-family: "Font Awesome 6 Pro";

        content: "\f02e";

    }



    .job-item-star.starred {

        color: var(--bookmark);

    }



        .job-item-star.starred:after {

            font-family: "Font Awesome 6 Pro";

            content: "\f02e";

            font-weight: 600;

        }



.job-item-share {

    display: none;

    position: absolute;

    bottom: 5px;

    right: 38px;

    cursor: pointer;

    transition: var(--transition);

    color: var(--primary-blue);

}





.applied-indicator {

    font-size: 0.85rem;

    margin-top: 0.5rem;

}



    .applied-indicator.green {

        color: var(--green);

    }



    .applied-indicator.orange {

        color: var(--orange);

    }



    .applied-indicator i {

        margin-right: 0.25rem;

    }



.cd-dropdown.open .cd-caret {

    transform: rotate(180deg);

}



.cd-item.selected {

    color: var(--primary-blue);

    font-weight: 600;

}



.cd-item-icon {

    width: 1rem;

    text-align: center;

    color: var(--primary-blue);

}



.cd-toggle {

    display: inline-flex;

    min-width: 10px;

    align-items: center;

    gap: 0.5rem;

    min-height: 50px;

    background: var(--card-bg, #ffffff);

    color: var(--text-main, #1f2937);

    border: 1px solid var(--border-color-light, #d1d5db);

    border-radius: var(--radius-button, 7px);

    cursor: pointer;

    font: inherit;

    font-size: 0.9rem;

    transition: var(--transition, all 0.2s ease-in-out);

}



    .cd-toggle:focus-visible {

        outline: 2px solid var(--primary-blue, #0273ad);

        outline-offset: 2px;

    }



.cd-caret {

    font-size: 0.7rem;

    transition: var(--transition, all 0.2s ease-in-out);

    margin-inline-start: 0.15rem;

}



.cd-menu {

    display: none;

    position: fixed;

    z-index: 1000;

    width: max-content;

    max-width: 340px;

    max-height: min(60vh, 420px);

    overflow-y: auto;

    overflow-x: hidden;

    background: var(--card-bg, #ffffff);

    border: 1px solid var(--border-color-light, #d1d5db);

    border-radius: var(--radius, 8px);

    box-shadow: var(--card-shadow, 0 2px 12px rgba(0, 0, 0, 0.15));

    padding: 0.35rem;

}



    .cd-menu.open {

        display: block;

    }



.cd-item {

    display: flex;

    margin: 0;

    align-items: center;

    gap: 0.6rem;

    width: 100%;

    min-width: 0;

    padding: 0.55rem 0.7rem;

    border: none;

    background: none;

    border-radius: var(--radius-button, 7px);

    color: var(--text-main, #1f2937);

    text-decoration: none;

    font: inherit;

    font-size: 0.9rem;

    text-align: start;

    cursor: pointer;

    transition: var(--transition-fast, all 0.2s ease-in-out);

    white-space: nowrap;

    justify-content: flex-start;

}



    .cd-item > span {

        overflow: hidden;

        text-overflow: ellipsis;

    }



    .cd-item:focus-visible {

        outline: none;

        background: var(--border-color-light, #eef0f3);

        color: var(--primary-blue, #0273ad);

    }



.app-download-dd {

    margin-top: 0.5rem;

}



    .app-download-dd button.cd-toggle {

        padding: 0.5rem 0.9rem;

    }



.job-desc-container {

    display: grid;

    grid-template-columns: minmax(400px,1fr) 300px;

    gap: 1rem;

    justify-content: center;

}



.job-application-form, .job-review-form, .job-application-post {

    padding: 1.4rem;

    height: fit-content;

}



.job-application-container {

    height: 100%;

    min-height: 800px;

}



    .job-application-container .card-container {

        justify-content: space-between;

    }



.form-bottom-button .form-field-box {

    display: flex;

    justify-content: flex-end;

}



.card-container.card.fixed-menu-loc {

    background: transparent;

    border: none;

    box-shadow: none;

}



    .card-container.card.fixed-menu-loc .card-header {

        border-radius: var(--radius);

    }



.job-detail {

    position: sticky;

    z-index: 1;

    top: 9px;

    box-shadow: var(--shadow-right);

}



.inner-job-desc-card {

}



    .inner-job-desc-card .jobdesc {

        overflow: auto;

        transition: var(--transition);

        height: 100%;

    }



        .inner-job-desc-card .jobdesc.job-scroll-height {

            /*max-height: 65vh;*/

        }

/*.job-detail .job-card {

    margin: 0;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

    padding: 1rem;

}*/

.job-detail .job-card {

    margin: 0;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

    padding: 1rem;

    border: 0;

    box-shadow: none;

    border-radius: 0;

    position: relative;

}



.job-header-badge {

    margin-top: 18px;

}



.job-apply-header {

    display: flex;

    justify-content: space-between;

}



    .job-apply-header .form-field-box {

        margin: 0;

        align-items: flex-start;

    }



.job-apply-header-buttons {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.job-detail-actions {

    display: flex;

    gap: 1.25rem;

    align-items: center;

    font-size: 1.35rem;

    color: var(--primary-blue);

}

.job-detail-share {

    display: flex;

    align-items: center;

}

.job-detail-bookmark {

    display: none;

}



.job-detail-actions a {

    color: inherit;

    cursor: pointer;

}



.job-detail-bookmark:after {

    font-family: "Font Awesome 6 Pro";

    content: "\f02e";

}



.job-detail-bookmark.starred {

    color: var(--bookmark);

}



    .job-detail-bookmark.starred:after {

        font-weight: 600;

    }



.mobile-apply-bar {

    display: none; /* mobile only */

}



.job-short-desc {

    color: var(--text-muted);

    margin: 5px auto;

}



.job-header {

    display: flex;

    align-items: center;

    font-size: 1.8rem;

    color: var(--primary-blue);

    font-weight: 600;

}



.job-header-title {

    display: flex;

/*    gap: 20px;*/

    align-items: flex-start;

    flex-direction: column;

}

    .job-header-title .badge.basic-badge.square {

        min-width: fit-content;

        max-width: 100px;

        margin: 0 10px 0 0;

        display: none;

    }

.job-apply-desc {

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    border-top: 0;

    border: none;

    box-shadow: none;

}



.form-container {

}



.custom-content {

    height: auto;

    display: flex;

    flex-direction: column;

}



    .custom-content.has-visible-content {

        padding: 1rem;

        margin: 1rem 0;

    }



    .custom-content:empty {

        display: none;

    }



    .custom-content input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=file]) {

        max-width: 500px;

        width: 100%;

    }



    .custom-content figure {

        display: flex;

        padding: 1rem;

        max-width: 100%;

        margin: 0;

        overflow: auto;

    }



    .custom-content table {

        width: 100%;

    }



    .custom-content p {

        text-align: left;

    }



        .custom-content p:has(input) {

            width: 100%;

        }



.application-title {

    margin-left: 20px;

}



.job-review-form {

    margin-top: 20px;

}



.job-application-form .form-field-box {

    display: grid;

}



.job-desc-detail, .job-application-steps {

    padding: 1.4rem;

    height: fit-content;

    /* position: sticky;

    top: 100px;*/

}



.job-desc-apply {

    display: flex;

    justify-content: center;

    border-top: thin solid var(--border-color-light);

    padding-top: 18px;

}



    .job-desc-apply button {

        width: 70%;

    }



.job-detail-item {

    font-weight: 600;

    margin: 20px 0;

}



    .job-detail-item > div {

        margin: 5px 0;

    }



.job-detail-item-title {

    color: var(--primary-blue);

    text-transform: uppercase;

    font-weight: 500;

}



.job-detail-item-text {

    color: var(--dim-grey);

}



.resume-page .card-container {

    min-height: initial;

}



.resume-page .job-application-steps {

    height: auto;

}



.ats-resume-group {

    text-align: center;

}



    .ats-resume-group .badge {

        font-size: .9rem;

        padding: 10px;

    }



.resume-instructions {

    max-width: 52ch;

    margin: 14px auto 18px;

    color: var(--text-grey);

    font-size: .95rem;

    line-height: 1.6;

}



.add-more {

    display: flex;

    justify-content: center;

    margin: 60px;

}



    .add-more button {

        border-style: dashed;

        min-width: 250px;

    }



        .add-more button i {

            font-size: 1.5rem;

        }

/* YES No Togggle */

.question-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.2rem 0;

    gap: 1.5rem;

}



.question-text {

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.5;

    color: var(--text-main);

    position: relative;

}



.toggle-group {

    display: flex;

    background: var(--tint-blue);

    border-radius: 10px;

    border: 1px solid var(--border-color-light);

}



.toggle-btn {

    flex: 1;

    border: none;

    background: transparent;

    padding: 8px 16px;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-muted);

    border-radius: 7px;

    cursor: pointer;

    transition: var(--transition);

    border: 1px solid var(--bright-grey);

}



    .toggle-btn.active {

        background: var(--bg-light);

        color: var(--primary-blue);

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        border: thin solid var(--border-color-light);

    }

/* YES No Togggle */

ol.questions-list {

    padding-inline-start: 24px;

}



.job-review-header {

    display: grid;

    justify-content: space-between;

    grid-template-columns: 400px 1fr max-content;

}



.job-review-header-left h2 {

    margin: 0;

    margin-bottom: .4rem

}



.job-review-header-right {

    text-align: right;

}



.job-review-header-pos {

    font-size: 1.2rem;

    margin-bottom: .4rem;

    color: var(--primary-blue);

}


.job-review-detail {
}



.job-review-detail-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: var(--tint-blue);

    color: var(--primary-blue);

    padding: 15px;

}



    .job-review-detail-header i {

        margin-right: 10px;

    }



    .job-review-detail-header .icon-container::after,

    .content-header .icon-container::after {

        font-family: "Font Awesome 6 Pro";

        content: "\f05a";

        font-weight: 900;

        margin-right: 12px;

        display: inline-block;

        color: var(--primary-blue);

        opacity: 0.8;

    }

    /* 1. Basic Information (Address Card) */

    .job-review-detail-header .icon-container.basicinfo::after,

    .content-header .icon-container.basicinfo::after {

        font-family: "Font Awesome 6 Pro";

        content: "\f47f";

    }

    /* 2. Education (Fancy Graduation Cap) */

    .job-review-detail-header .icon-container.education::after,

    .content-header .icon-container.education::after {

        font-family: "Font Awesome 6 Pro";

        content: "\f19d";

    }

    /* 3. References (Users Rectangle) */

    .job-review-detail-header .icon-container.references::after,

    .content-header .icon-container.references::after {

        font-family: "Font Awesome 6 Pro";

        content: "\e533"; /* Pro specific code */

    }

    /* 4. Previous Employment (Briefcase Blank) */

    .job-review-detail-header .icon-container.previousemployment::after,

    .content-header .icon-container.previousemployment::after {

        font-family: "Font Awesome 6 Pro";

        content: "\f0f2";

    }

    /* 5. Driver License (ID Card Clip) */

    .job-review-detail-header .icon-container.license::after,

    .content-header .icon-container.license::after {

        font-family: "Font Awesome 6 Pro";

        content: "\f2bb"; /* More detailed clip version */

    }

    /* 6. Previous Address (House Window) */

    .job-review-detail-header .icon-container.previousaddress::after,

    .content-header .icon-container.previousaddress::after {

        font-family: "Font Awesome 6 Pro";

        content: "\f015";

    }

/* 7. Resume Upload (File User) */

.content-header .icon-container.resume::after {

    font-family: "Font Awesome 6 Pro";

    content: "\f65c";

}

/* 8. Review and Submit (Clipboard Check) */

.content-header .icon-container.review::after {

    font-family: "Font Awesome 6 Pro";

    content: "\f46c";

}



.review-detail-esig:has(.review-detail-ai-consent) {
    background-color: var(--tint-blue);
    border: thin solid var(--light-blue);
}


.job-review-detail-header h2 {

    margin: 0;

    display: grid;

    grid-template-columns: 38px 1fr;

}



.content-header h2:has(.icon-container) {

    display: grid;

    grid-template-columns: 38px 1fr;

    align-items: center;

}



.review-detail-container {

    padding: 45px;

}



    .review-detail-container h3 {

        color: var(--primary-blue);

    }



.review-detail-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));

    gap: 10px;

}



.review-detail-info {

    margin-bottom: 20px;

}



.review-detail-title {

    font-weight: 600;

    color: var(--dark-blue);

    margin-bottom: 10px;

}



.review-detail-text {

    border-bottom: thin solid var(--bright-grey);

    width: auto;

    padding-bottom: 8px;

}



.review-detail-awards-flex {

    display: flex;

    gap: 10px;

}



    .review-detail-awards-flex .badge {

        font-size: 0.8rem;

    }



    .review-detail-awards-flex i {

        color: var(--light-orange);

        margin-right: 9px;

    }



.review-detail-esig {

    display: flex;

    justify-content: center;

    width: 100%;

    padding: 1.4rem;

    border-radius: var(--radius);

}



    .review-detail-esig:has(.review-detail-esig-agree) {

        background-color: var(--tint-blue);

        border: thin solid var(--light-blue);

    }



.review-detail-esig-agree {

}



.review-detail-esig:has(.review-detail-esig-submit) {

    background-color: var(--tint-orange);

    border: thin dashed var(--light-orange);

}



.review-detail-esig .review-detail-esig-submit {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.review-detail-esig-submit .form-field-box button {

    font-weight: 600;

    width: 100%;

}



.jump-to-consent {

    text-decoration: underline;

    font-weight: 700;

}



#map {

    height: 400px;

    width: 100%;

    background-color: var(--bright-grey); /* Shows a gray box if API fails to load */

}

    /* Prevents your global button/img styles from breaking the map */

    #map button {

        all: revert;

    }



    #map img {

        max-width: none !important;

        padding: 0 !important;

    }



.generic-errors:empty, .questions-area:empty {

    display: none;

}



.error-field:empty {

    display: none;

}



.error-field {
    display: block;
    font-size: 0.8rem;
    color: var(--red);
    position: relative;
    margin: 7px 0 5px 0;
}

label.field-label.required::after {
    content: none;
}

label.field-label.required .field-label-text::after {
    content: "*";
    margin-left: 3px;
    font-size: 1.1rem;
    color: var(--red);
    font-weight: 600;
}


.field-help-icon {

    margin-left: 6px;

    color: var(--light-blue);

    font-size: 0.85rem;

    cursor: help;

}



.field-help-bubble {

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 20;

    margin-top: 6px;

    width: max-content;

    min-width: 160px;

    max-width: min(240px, calc(100vw - 48px));

    padding: 8px 10px;

    background: var(--bg-light);

    border: 1px solid var(--border-color);

    border-radius: var(--radius);

    box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.15));

    font-size: 0.8rem;

    line-height: 1.3;

    color: var(--text-main);

    white-space: normal;

}



.field-label {

    position: relative;

}



.application-errors {

    color: var(--red);

}



.job-search-container {

    position: fixed;

    padding: .3rem;

    padding-top: .6rem;

    z-index: 16;

    top: 0;

    transition: var(--transition);

    background: var(--tint-blue);

    left: -800px;

    border: thin solid var(--highlight-blue);

    height: 100%;

    box-shadow: var(--shadow-right);

    overflow-y: auto;

    width: 100%;

    max-width: 350px;

    scrollbar-width: thin;

    scrollbar-color: var(--border-color-light) transparent;

}



    .job-search-container::-webkit-scrollbar {

        width: 8px;

    }



    .job-search-container::-webkit-scrollbar-track {

        background: transparent;

    }



    .job-search-container::-webkit-scrollbar-thumb {

        background: var(--border-color-light);

        border-radius: 8px;

    }



.close-search {

    font-size: 1.5rem;

    color: var(--primary-blue);

    text-align: right;

    margin: 1rem;

    cursor: pointer;

    transition: var(--transition);

    position: sticky;

    top: 0;

    z-index: 8;

}



.filter-tab {

    display: none;

    cursor: pointer;

}



.ats-job-header-flex.job-header-search {

    margin: 0;

    margin-bottom: 9px;

}



.search-and-filter-btn {

    position: relative;

    display: flex;

    flex-direction: column;

    /*    gap: .6rem;*/

    width: 100%;

    min-width: 0;

    background-color: transparent;

    border: 0;

    padding: 6px 0;

}



.search-pill-meta {

    flex: 0 0 auto;

}



    .search-pill-meta .job-totals,

    .search-pill-meta .job-filters {

        margin: 0;

    }



.search-container {

    display: flex;

    /*    flex: 1 1 360px;*/

    flex: 1 1;

    min-width: 0;

}



.search-bar-map,

.search-bar-home {

    display: flex;

    align-items: center;

    background-color: var(--bg-light);

    width: 100%;

    min-height: 44px;

    margin: 0;

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    transition: var(--transition);

}



.search-bar {

    display: flex;

    align-items: center;

    width: 100%;

    height: fit-content;

}



input#topSearch {

    /*    border-radius: var(--radius) 0 0 var(--radius);*/

    /*    border-radius: var(--radius);*/

    /*    height: 44px;*/

    /*    border: 1px solid var(--border-color-light);*/

    /*    font-size: 0.8rem;*/

    outline: none;

    transition: outline 0s;

}

    /*input#topSearch:focus {

        outline: 1px solid var(--light-blue);

    }*/

    /*input#topSearch::placeholder {

        color: #bbb;*/

/*        font-size: 0.8rem;*/

    /*}*/



.search-icon {

    padding: 0 10px;

    color: var(--primary-blue);

    font-size: 1.2rem;

}



.search-bar-map input,

.search-bar-home input {

    flex: 1;

    border: none;

    outline: none; /* Removes the default focus ring */

    font-size: 16px;

    color: var(--direction)

}



    .search-bar-map input::placeholder,

    .search-bar-home input::placeholder {

        color: #bbb;

    }



.search-bar-map:focus-within,

.search-bar-home:focus-within {

    border: 1px solid var(--light-blue);

}



.map-search-row {

    display: flex;

    flex-direction: column;

    /*    gap: .6rem;*/

    padding: 14px;

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

}



    .map-search-row .search-container {

        flex: 1 1 320px;

        width: auto;

        margin: 14px 0;

    }



.map-radius-filter {

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 0 0 auto;

    margin: 3px 6px;

}



.map-search-row select,

.map-search-row a {

    border-radius: var(--radius);

}



    .map-search-row select:focus {

        outline: none;

    }



.map-radius-filter label {

    margin: 0;

}



.search-bar-map a,

.search-bar-home a {

    /*    padding: 9px 22px;

    margin: 4px;

    border-radius: 10px;*/



    margin: 0;

    height: 50px;

    border: none;

    border-radius: 0 11px 11px 0;

}

/*.search-bar-home a {

    margin: 0;

    height: 50px;

    border: none;

    border-radius: 0 11px 11px 0;*/

/*    min-width: 200px;*/

/*    background: linear-gradient(to right, var(--bg-light), var(--primary-blue) 100%);*/

/*    justify-content: flex-end;*/

/*    border-radius: 0 var(--radius-rounded) var(--radius-rounded) 0;*/

/*}*/

.search-bar a {

    /* padding: 9px 22px; */

    /* margin: 4px; */

    /* border-radius: 10px; */

    height: 44px;

    margin: 0;

    border-radius: 0 var(--radius) var(--radius) 0;

    min-width: 0;

}



.filters-container {

    display: flex;

    align-items: center;

    flex: 0 0 auto;

    gap: 12px;

}



.sort-count-pill {

    display: inline-flex;

    align-items: center;

    background: var(--bg-light);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    min-height: 44px;

    padding: 0 6px;

}



    .sort-count-pill .job-filters {

        margin: 0;

    }



    .sort-count-pill .job-totals {

        margin: 0 10px;

        white-space: nowrap;

    }



.pill-divider {

    width: 1px;

    align-self: stretch;

    margin: 8px 2px;

    background: var(--border-color-light);

}



.sort-dropdown .cd-toggle {

    border: 0;

    background: transparent;

    min-height: 0;

    padding: 0 8px;

}

/*.filter-tab {

    display: flex;

    padding: 0 12px;

    background-color: transparent;

    transition: var(--transition);

    align-items: center;

    justify-content: center;

    margin: 0;

    cursor: pointer;

    color: var(--text-muted);

}*/

.filter-tab {

    display: flex;

    padding: 0 12px;

    background-color: transparent;

    transition: var(--transition);

    align-items: center;

    justify-content: center;

    margin: 0;

    cursor: pointer;

    color: var(--text-muted);

    height: 44px;

    border-top: 1px solid var(--border-color-light);

    border-bottom: 1px solid var(--border-color-light);

}



.bookmarked-jobs {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    flex: 0 0 auto;

    white-space: nowrap;

    min-height: 44px;

    padding: 0 1rem;

    border: 1.5px solid;

    border-radius: var(--radius);

    background: transparent;

    font-size: 0.9rem;

    transition: var(--transition-mid);

    cursor: pointer;

    border-color: var(--primary-blue);

    color: var(--primary-blue);

    height: 44px;

}



    .bookmarked-jobs i {

        font-size: 1rem;

    }



    .bookmarked-jobs.active {

        /*        border-color: var(--primary-blue);

        background: var(--tint-blue-hover);

        color: var(--primary-blue);*/

        border-color: var(--Bookmark);

        /*        background: var(--tint-blue-hover);*/

        color: var(--bookmark);

    }



.tab-line {

    display: flex;

    gap: 10px;

    color: var(--text-muted);

    border-radius: var(--radius);

    transition: var(--transition);

    font-size: 0.85rem;

}



.flex-container {

    max-width: 550px;

    width: 100%;

}



    .flex-container > .form-field-box:not(.hidden) ~ .form-field-box {

        margin-top: 1.25rem;

    }



.questions-area:has(.flex-container), .form-field-grid:has(.flex-container) {

    display: flex;

    justify-content: center;

}



.mobile-menu-container {

    display: none;

    z-index: 16;

}



.mobile-job-detail {

    position: fixed;

    transition: var(--transition);

    top: 100vh;

    left: 0;

    z-index: 100;

    width: 100%;

    background: var(--card-bg);

    height: 100%;

    display: none;

}



.job-desc-toggle {

    display: none;

    color: var(--primary-blue);

    text-align: right;

    margin: 8px 29px;

    cursor: pointer;

    transition: var(--transition);

    position: absolute;

    bottom: 6px;

    right: 7px;

    font-size: 14px;

}



    .job-desc-toggle i {

        font-size: 20px;

        transition: var(--transition);

    }



        .job-desc-toggle i.rotate {

            transform: rotate(180deg)

        }



.form-field-box.return-to-position {

    display: none;

}



.active-filters {

    display: none;

    justify-content: space-between;

    align-items: flex-start;

    padding: 8px 0;

    align-self: self-start;

    width: 100%;

    gap: 8px;

}



    .active-filters.has-chips {

        display: flex;

        /*        flex-direction: column-reverse;*/

        flex-direction: row;

    }



.active-filters-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.filter-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: .7rem;

    background-color: var(--primary-blue);

    border-radius: var(--round);

    border: thin solid var(--highlight-blue);

    padding: 5px 8px;

    width: max-content;

    font-weight: 600;

    color: var(--tint-blue);

    /*    margin-right: .5rem;

    margin-bottom: .5rem;*/

}



    .filter-chip .chip-close {

        background: none;

        border: none;

        cursor: pointer;

        font-size: 12px;

        line-height: 1;

        color: var(--tint-blue);

        padding: 0;

        margin: 0;

        min-width: 0;

        margin-left: 4px;

    }



button.chips-clear-all {

    margin: 0;

    padding: 4px 10px;

    border-radius: 16px;

}



.job-apply-container {

    container: my-container / inline-size;

}



.ats-card-box.verify-box {

    padding: 2rem;

}

/* Specific overrides for the partitioned digit boxes */

.verification-container {

    display: flex;

    gap: 8px;

    justify-content: space-between;

    margin-top: 10px;

}



    .verification-container input.digit-box {

        height: 60px;

        text-align: center;

        font-size: 1.5rem;

        border-radius: var(--radius);

        font-weight: 500;

    }

/* Adjusting subtext to match the image */

.verify-subtext {

    text-align: left;

    margin-top: 1.5rem;

    color: var(--dim-grey);

    font-size: 0.9rem;

    line-height: 1.5;

}



.user-profile {

    position: fixed;

    top: 90px;

    right: 40px;

    width: 0; /* Start at zero width */

    height: 0; /*Start at zero height */

    opacity: 0;

    display: none; /* Hidden until triggered */

    z-index: 15;

}



.ats-profile {

    height: fit-content;

    transition: var(--transition);

    box-shadow: var(--card-shadow);

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

}



    .ats-profile .inner-job-card {

        padding: 1.5rem;

    }



.profile-detail {

    display: grid;

    grid-template-columns: 30px 1fr;

    gap: 12px;

    background: var(--tint-blue);

    padding: .5rem;

    border-radius: var(--radius);

    border: thin solid var(--border-color);

    margin: 15px auto;

    color: var(--text-grey);

    font-size: 1rem;

    position: relative;

}



.inner-job-card .profile-header {

    margin: 0 auto 25px;

}



.profile-desc {

}



.profile-name {

    font-size: 1.5rem;

}



.close-setting {

    position: absolute;

    top: 5px;

    right: 5px;

    font-size: 1.3rem;

    transition: var(--transition);

    color: var(--primary-blue);

    cursor: pointer;

}



.profile-detail-text {

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

    max-width: 70%;

}



.profile-actions {

    display: flex;

    gap: 8px;

    justify-content: space-between;

}



.profile-button {

    background: var(--primary-blue);

    padding: 10px;

    border-radius: var(--radius);

    color: var(--tint-blue);

    cursor: pointer;

    transition: var(--transition);

    width: 100%;

    display: flex;

    gap: 10px;

    align-items: center;

    justify-content: center;

}



    .profile-button i {

        font-size: 1.5rem;

    }



.theme-container {

    display: flex;

    padding: 1rem;

    align-items: center;

}



@container my-container (width<550px) {

    .job-detail {

    }



    .job-header {

        font-size: 1.5rem

    }



    .job-apply-header {

    }



    .job-header-title {

        align-items: flex-start;

        flex-direction: column;

        gap: 0;

    }

}



.user-interactions {

    display: flex;

    align-items: center;

    gap: .8rem;

    font-size: 1.5rem;

}



.applicant-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));

    gap: 1rem;

    align-items: stretch;

    justify-content: flex-start;

}



.applicant-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: 10px;

    box-shadow: var(--card-shadow);

    padding: .75rem .9rem;

    display: grid;

    grid-template-columns: 1fr auto;

    grid-template-rows: auto auto auto;

    grid-template-areas: "title title" "top top" "prog cta";

    gap: .35rem .75rem;

    position: relative;

    overflow: hidden;

    transition: var(--transition);

    isolation: isolate;

    /*max-width: 435px;*/

    height: auto;

    width: 100%;

}

/*.applicant-card::before {

            content: "";

            position: absolute;

            inset: 0 auto 0 0;

            width: 4px;

            background: var(--primary-blue);

            opacity: .9;

        }

        .applicant-card.submitted::before {

            background: var(--green);

        }

        .applicant-card.almost-done::before {

            background: var(--primary-blue);

        }

        .applicant-card.in-progress::before {

            background: var(--orange);

        }

        .applicant-card.not-started::before {

            background: var(--dim-grey);

        }

        .applicant-card.bookmarked::before {

            background: var(--mid-grey);

        }*/

.card-top {

    grid-area: top;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: .5rem;

    min-width: 0;

}



.card-top-left {

    display: flex;

    align-items: center;

    gap: .4rem;

    min-width: 0;

}



.location-chip {

    display: inline-flex;

    align-items: center;

    gap: .3rem;

    background: var(--tint-blue);

    color: var(--primary-blue);

    border: 1px solid var(--highlight-blue);

    font-size: .68rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .04em;

    padding: .15rem .5rem;

    border-radius: var(--round);

    white-space: nowrap;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

}



    .location-chip i {

        font-size: .68rem;

        opacity: .85;

    }



.status-dot {

    display: inline-flex;

    align-items: center;

    gap: .3rem;

    font-size: .65rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: var(--green);

    white-space: nowrap;

}



    .status-dot::before {

        content: "";

        width: 7px;

        height: 7px;

        border-radius: 50%;

        background: var(--green);

        box-shadow: 0 0 0 2px var(--highlight-green);

    }



    .status-dot.inactive {

        color: var(--text-muted);

    }



        .status-dot.inactive::before {

            background: var(--mid-grey);

            box-shadow: 0 0 0 2px var(--bright-grey);

        }



.position-title {

    grid-area: title;

    font-size: 1rem;

    font-weight: 600;

    color: var(--text-main);

    margin: 0;

    letter-spacing: -0.01em;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    min-width: 0;

    text-align: left;

}



.progress-wrap {

    grid-area: prog;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    min-width: 0;

}



.progress-meta {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    margin-bottom: .25rem;

    gap: .5rem;

}



    .progress-meta .label {

        font-size: .68rem;

        color: var(--text-muted);

        font-weight: 500;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



        .progress-meta .label.not-started {

            color: var(--text-grey);

        }



        .progress-meta .label.in-progress {

            color: var(--orange);

        }



        .progress-meta .label.almost-done {

            color: var(--primary-blue);

        }



        .progress-meta .label.submitted {

            color: var(--mid-green);

        }



    .progress-meta .value {

        font-size: .85rem;

        font-weight: 600;

        color: var(--primary-blue);

    }



.progress-bar {

    height: 7px;

    width: 100%;

    background: var(--tint-blue);

}



.applicant-card .progress-bar {

    height: 6px;

    border-radius: var(--round);

    background: var(--tint-blue);

    overflow: hidden;

}



.progress-bar-percent {

    height: 7px;

    background-color: var(--highlight-blue);

}



.applicant-card .progress-bar-percent {

    height: 100%;

    border-radius: var(--round);

    background: var(--orange);

    transition: width .6s cubic-bezier(.86, 0, .07, 1);

}



    .applicant-card .progress-bar-percent.green {

        background: var(--mid-green);

    }



    .applicant-card .progress-bar-percent.blue {

        background: var(--primary-blue);

    }



    .applicant-card .progress-bar-percent.orange {

        background: var(--orange);

    }



.applicant-card a.button.continue-btn {

    grid-area: cta;

    align-self: center;

    margin: 0;

    padding: .55rem .85rem;

    min-width: 0;

    font-weight: 600;

    font-size: .8rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .35rem;

    border-radius: var(--radius-button);

    white-space: nowrap;

}



    .applicant-card a.button.continue-btn i {

        transition: var(--transition);

        font-size: .75rem;

    }



.settings-switch {

    display: flex;

    gap: 10px;

    padding: 18px 20px;

    justify-content: flex-end;

}



.switch {

    position: relative;

    display: inline-block;

    width: 30px;

    height: 7px;

    margin: 0;

}



    .switch input {

        opacity: 0;

        width: 0;

        height: 0;

    }



.slider.round {

    border-radius: var(--round);

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    transition: .4s;

}



    .slider.round:before {

        border-radius: 50%;

    }



    .slider:before {

        position: absolute;

        content: "";

        height: 12px;

        width: 12px;

        left: 0;

        bottom: -3px;

        border: thin solid var(--border-color);

        background-color: var(--light-blue);

        /* -webkit-transition: .4s; */

        transition: .4s;

    }



input:checked + .slider:before {

    background-color: var(--primary-blue);

    -webkit-transform: translateX(18px);

    -ms-transform: translateX(18px);

    transform: translateX(18px);

}



input:checked + .slider {

    background-color: var(--light-blue);

}



.page-header .company-logo img {

    max-height: 50px;

    object-fit: contain;

    margin-left: 10px;

}



.company-logo .company-logo-name {

    display: inline-flex;

    align-items: center;

    margin-left: 10px;

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-muted);

    max-width: min(300px, 45vw);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 1.1;

    padding: 15px;

    border: 2px solid;

    border-radius: var(--radius-button);

}



.irs-grid-text {

    cursor: pointer;

}



.section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding-bottom: 1px;

    margin-bottom: 10px;

    border-bottom: thin solid var(--border-color-light);

}



    .section-header .show-all-bookmarks {

        margin-bottom: 7px;

    }



.show-all-bookmarks a {

}



.section-header a {

    margin: 10px;

}



h3.job-section-title {

    text-align: left;

    font-weight: 600;

    font-size: 1.05rem;

    color: var(--text-main);

    margin-bottom: 7px;

    margin-left: 10px;

    display: flex;

    gap: 10px;

    align-items: center;

}



.job-section-title i {

    color: var(--text-muted);

    font-size: .9em;

}



.job-section-title .bookmarked {

    color: var(--bookmark);

}



.job-section-title .complete {

    color: var(--green);

}



.job-section-title .progress {

    color: var(--orange);

}



.bookmark-indicator {

    font-size: 0.8rem;

    color: var(--primary-blue);

    cursor: pointer;

    transition: var(--transition);

}



    .bookmark-indicator:after {

        font-family: "Font Awesome 6 Pro";

        content: "\f02e";

    }



    .bookmark-indicator.starred {

        color: var(--bookmark);

    }



        .bookmark-indicator.starred:after {

            font-family: "Font Awesome 6 Pro";

            content: "\f02e";

            font-weight: 600;

        }



.card-container.dash-board {

    display: flex;

    min-height: calc(100vh - 30rem);

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-top: 1rem;

}

    /* Dashboard only: fluid up to 1320px, shrinks freely below (mobile-first —

   the global .content-frame min-width: 1200px must not apply here) */

    .card-container.dash-board .content-frame {

        min-width: 0;

        width: min(100%, 1320px);

    }



.mobile-bottom-nav {

    display: none;

    position: sticky;

    bottom: 0;

    justify-content: center;

    width: 100%;

    height: var(--bottom-margin);

    background: var(--bg-light);

    box-shadow: var(--shadow-up);

    gap: 10px;

    align-items: center;

    justify-content: space-around;

    z-index: 10;

}



    .mobile-bottom-nav a {

        color: var(--primary-blue);

        background: transparent;

        padding: 1px;

        border-radius: var(--round);

        width: 45px;

        display: inline-block;

    }



        .mobile-bottom-nav a.highlight {

            background: var(--highlight-blue);

        }

    /*.mobile-bottom-nav .mobile-home a {

                color: var(--mid-green);

            }

            .mobile-bottom-nav .mobile-search a {

                color: var(--mid-green);

            }

            .mobile-bottom-nav .mobile-bookmark a {

                color: var(--mid-green);

            }

            .mobile-bottom-nav .mobile-about a {

                color: var(--mid-green);

        }*/

    .mobile-bottom-nav > div {

        text-align: center;

        font-size: 1.2rem;

    }



    .mobile-bottom-nav span {

        display: block;

        font-size: .9rem;

    }



.home {

    display: block;

}



    .home span {

        display: none;

    }



.settings-icon {

    position: relative;

    display: flex;

    align-items: center;

}



.settings-menu {

    display: none;

    position: absolute;

    top: calc(100% + 12px);

    right: -8px;

    min-width: 210px;

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    padding: 0.35rem;

    z-index: 30;

    font-size: 1rem;

}



    .settings-menu.open {

        display: block;

    }



.settings-menu-item {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    width: 100%;

    padding: 0.5rem 0.6rem;

    border-radius: var(--radius-button);

    color: var(--text-main);

    cursor: pointer;

    transition: var(--transition);

    white-space: nowrap;

}



    .settings-menu-item > i {

        width: 1.5rem;

        text-align: center;

        color: var(--primary-blue);

        font-size: 1.1rem;

    }



    .settings-menu-item.user-signout,

    .settings-menu-item.settings-about {

        padding: 0;

    }



.settings-menu .user-signout a,

.settings-menu .settings-about a {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    width: 100%;

    padding: 0.5rem 0.6rem;

    border-radius: var(--radius-button);

    color: var(--text-main);

}



    .settings-menu .user-signout a i,

    .settings-menu .settings-about a i {

        width: 1.5rem;

        text-align: center;

        color: var(--primary-blue);

        font-size: 1.1rem;

    }



/* Custom language menu — Google widget hidden but still performs the translation */

#google-translate-bar {

    display: none;

}

/* Google's injected top banner and hover tooltip */

body > .skiptranslate > iframe.skiptranslate,

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {

    display: none !important;

}



body {

    top: 0 !important; /* counters the inline top Google sets for its banner */

}



#goog-gt-tt {

    display: none !important;

}



.settings-menu-item.settings-language {

    position: relative;

}



.language-menu {

    display: none;

    position: absolute;

    top: 0;

    right: calc(100% + 10px);

    min-width: 170px;

    max-height: 320px;

    overflow-y: auto;

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    padding: 0.35rem;

    z-index: 31;

}



    .language-menu.open {

        display: block;

    }



.language-menu-item {

    display: block;

    padding: 0.4rem 0.6rem;

    border-radius: var(--radius-button);

    color: var(--text-main);

    cursor: pointer;

    white-space: nowrap;

}





    .language-menu-item.selected {

        color: var(--primary-blue);

        font-weight: 600;

    }



@media only screen and (max-width: 768px) {

    .language-menu {

        top: calc(100% + 4px);

        right: 0;

        max-height: 50vh;

    }

}



.dash-layout {

    /*display: grid;*/

    display: flex;

    grid-template-columns: 1fr 1fr;

    gap: 1.25rem;

    margin-top: 1.5rem;

    align-items: start;

    width: 100%;

    gap: 1.25rem;

    margin-top: 1.5rem;

    align-items: stretch;

    width: 100%;

    flex-direction: column;

}



    .dash-layout.no-guest {

        grid-template-columns: 1fr;

        max-width: 768px;

        margin: 0 auto;

        text-align: center;

    }



        .dash-layout.no-guest .dash-welcome-bar {

            justify-content: center;

            align-items: center;

        }

/* Left sidebar */

.dash-sidebar {

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    overflow: hidden;

}



.sidebar-hero {

    background: var(--dark-blue-gradient);

    padding: 1.5rem 1rem 1rem;

    text-align: center;

}

    /* Account-mode hero: left-aligned identity, actions right; wraps on narrow screens */

    .sidebar-hero.account {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 1rem;

        flex-wrap: wrap;

        text-align: left;

        padding: 1.5rem 1.75rem;

    }



.sidebar-hero-identity {

    display: flex;

    align-items: center;

    gap: 1rem;

    min-width: 0;

}



.sidebar-hero-text {

    min-width: 0;

}



.sidebar-hero.account .sidebar-avatar {

    margin: 0;

    flex-shrink: 0;

}



.sidebar-hero.account .sidebar-email {

    margin: 4px 0 0;

    overflow-wrap: anywhere;

}



.sidebar-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: var(--highlight-blue);

    color: var(--light-blue);

    font-size: 1.4rem;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto .75rem;

    border: 2px solid var(--primary-blue);

}



.sidebar-name {

    color: #fff;

    font-weight: 700;

    font-size: 1.4rem;

    letter-spacing: -0.01em;

    margin: 0;

}



.sidebar-email {

    color: rgba(255, 255, 255, 0.75);

    font-size: .8rem;

    margin: 4px 0 1rem;

}



.sidebar-linkedin-wrap {

    display: inline-flex;

    align-items: center;

    margin-left: 8px;

    vertical-align: middle;

}

.sidebar-linkedin {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: rgba(255, 255, 255, .5);

    font-size: 1rem;

    line-height: 1;

    cursor: pointer;

    transition: var(--transition);

}

    .sidebar-linkedin:hover,

    .sidebar-linkedin:focus-visible {

        color: #fff;

        outline: none;

    }

    .sidebar-linkedin.has-url {

        color: #fff;

    }

.linkedin-popover {

    display: none;

    position: fixed;

    z-index: 20;

    width: 280px;

    max-width: calc(100vw - 24px);

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    padding: .75rem;

    text-align: left;

}

    .linkedin-popover.open {

        display: block;

    }

    .linkedin-popover-label {

        display: block;

        font-size: .75rem;

        font-weight: 600;

        color: var(--text-muted);

        margin-bottom: .35rem;

    }

    input.linkedin-popover-input {

        width: 100%;

        box-sizing: border-box;

        border: 1px solid var(--border-color);

        border-radius: var(--radius-button);

        padding: .45rem .6rem !important;

        font-size: .85rem;

        background: var(--bg-light);

        color: var(--text-main);

    }

    .linkedin-popover-actions {

        display: flex;

        gap: .5rem;

        margin-top: .6rem;

        justify-content: flex-end;

    }

        .linkedin-popover-actions .button {

            margin: 0;

            min-width: 0;

            padding: .4rem .9rem;

            font-size: .8rem;

        }

        .linkedin-popover-actions .linkedin-visit.disabled {

            opacity: .5;

            pointer-events: none;

        }



.sidebar-resume-btns {

    display: flex;

    gap: .5rem;

    justify-content: center;

}



    .sidebar-resume-btns button {

        padding: .4rem .7rem;

        font-size: .75rem;

        margin: 0;

    }

/* Sidebar stats */

.sidebar-stats {

    display: grid;

    /*grid-template-columns: 1fr 1fr;*/

    grid-template-columns: repeat(3, 1fr);

    /*border: 1px solid var(--border-color-light);*/

}



.sidebar-stat {

    padding: .85rem .5rem;

    text-align: center;

    border-top: 1px solid var(--border-color-light);

    border-bottom: 1px solid var(--border-color-light);

    transition: var(--transition);

}



    .sidebar-stat:nth-child(1),

    .sidebar-stat:nth-child(2),

    .sidebar-stat:nth-child(3) {

        border-right: 1px solid var(--border-color-light);

    }



.sidebar-stat-val {

    font-size: 1.65rem;

    font-weight: 700;

    line-height: 1;

}



.sidebar-stat-lbl {

    font-size: .72rem;

    margin-top: 4px;

    letter-spacing: .02em;

}



.sidebar-stat.completed {

    color: var(--mid-green);

}



.sidebar-stat.in-progress {

    color: var(--orange);

}



.sidebar-stat.bookmarked {

    color: var(--primary-blue);

}

/* Sidebar nav */

.sidebar-nav {

    padding: .5rem;

}



.sidebar-nav-item {

    display: flex;

    align-items: center;

    gap: .7rem;

    padding: .6rem .75rem;

    border-radius: var(--radius);

    font-size: .875rem;

    color: var(--text-main);

    text-decoration: none;

    cursor: pointer;

    transition: var(--transition);

    margin-bottom: 2px;

}



    .sidebar-nav-item i {

        color: var(--primary-blue);

        width: 18px;

        text-align: center;

        font-size: 1rem;

    }



    .sidebar-nav-item.active {

        background: var(--tint-blue);

        color: var(--primary-blue);

        font-weight: 600;

    }

/* Right main */

.dash-main {

    min-width: 0;

}



.dash-welcome-bar {

    display: flex;

    justify-content: space-between;

    margin-bottom: 1rem;

    flex-direction: row;

    /*background: var(--card-bg);*/

    /*padding: 15px;*/

    border-radius: var(--radius);

    /*box-shadow: var(--card-shadow);*/

    align-items: center;

    gap: 10px;

}



    .dash-welcome-bar:empty {

        display: none;

    }



    .dash-welcome-bar .button {

        align-self: center;

        margin: 0;

        padding: .55rem .85rem;

        min-width: 0;

        font-weight: 600;

        font-size: .8rem;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: .35rem;

        border-radius: var(--radius-button);

        white-space: nowrap;

    }



    .dash-welcome-bar h2 {

        margin: 0;

        font-size: 1.5rem;

        font-weight: 700;

    }



    .dash-welcome-bar p {

        margin: 3px 0 0;

        font-size: .9rem;

        color: var(--text-muted);

    }

/* ── Unified search pill + suggestion chips (design 11) — shared by the dashboard,

      FindPosition keyword bar, and the map location bar ── */

.search-pill-row {

    display: flex;

    flex-direction: column;

    gap: .6rem;

    width: 100%;

}



.search-pill {

    display: flex;

    align-items: center;

    gap: .35rem;

    flex: 1 1 auto;

    min-width: 0;

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: 999px;

    padding: .3rem .35rem .3rem 1rem;

    min-height: 52px;

    transition: border-color .18s ease, box-shadow .18s ease;

}



    .search-pill:focus-within {

        border-color: var(--primary-blue);

        box-shadow: 0 0 0 3px var(--highlight-blue);

    }



    .search-pill > .search-icon {

        color: var(--text-muted);

        font-size: 1rem;

        flex: 0 0 auto;

        padding: 0;

    }



.search-pill-input {

    flex: 1 1 auto;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    color: var(--text-main);

    font: inherit;

    font-size: .95rem;

    padding: 0 .25rem !important;

    height: 100%;

}



    .search-pill-input::placeholder {

        color: var(--text-muted);

        opacity: .8;

    }



    .search-pill-input:focus {

        outline: none;

    }



.search-pill-select {

    border: none;

    outline: none;

    background: transparent;

    color: var(--text-main);

    font: inherit;

    font-size: .85rem;

    cursor: pointer;

    width: auto;

    flex: 0 0 auto;

}



.search-pill .cd-dropdown {

    flex: 0 0 auto;

}



/* Mobile: the distance dropdown is moved out of the pill (see findPositionUtil.positionMapDistance) */

@media (max-width: 600px) {

    .map-search-row .search-pill .pill-divider {

        display: none;

    }

}



/* Distance dropdown when it lives in the chips row (mobile) - styled like a chip. */

.search-chips .distance-dropdown {

    flex: 0 0 auto;

}



    .search-chips .distance-dropdown .cd-toggle {

        border: 1px solid var(--border-color-light);

        border-radius: 999px;

        background: var(--card-bg);

        min-height: 0;

        padding: .3rem .7rem;

        margin: 0;

    }



.search-chip-clear {

    color: var(--text-muted);

}



.search-pill-btn {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: .45rem;

    background: var(--primary-blue);

    /*    color: #fff;*/

    color: var(--text-main-inverse);

    border: none;

    border-radius: 999px;

    font: inherit;

    font-size: .88rem;

    /*    font-weight: 600;*/

    padding: .65rem 1.35rem;

    margin: 0;

    cursor: pointer;

    min-width: 0;

}

    /* .search-pill-btn i {

        display: none;

    }*/

    .search-pill-btn .search-pill-btn-label {

        display: none;

    }

.search-pill-icon-btn {

    flex: 0 0 auto;

    display: inline-flex;

    min-width: 0;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--text-muted);

    font-size: .95rem;

    cursor: pointer;

    padding: 0;

    margin: 0;

}



    .search-pill-icon-btn.active {

        color: var(--primary-blue);

    }



.search-pill-link {

    align-self: center;

    color: var(--primary-blue);

    font-size: .85rem;

    font-weight: 600;

    text-decoration: none;

    display: none;

}



.search-pill-meta {

    display: flex;

    align-items: center;

    gap: .75rem;

    color: var(--text-muted);

    font-size: .8rem;

    padding: 0 .5rem;

}



.search-chips {

    display: flex;

    gap: .45rem;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    padding-bottom: 2px;

    width: 100%;

    contain: inline-size;

    padding: 10px 0;

}



.search-chip {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: .35rem;

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: 999px;

    color: var(--text-main);

    font-size: .78rem;

    font-weight: 500;

    padding: .3rem .75rem;

    cursor: pointer;

    white-space: nowrap;

}



    .search-chip i {

        color: var(--text-muted);

        font-size: .7rem;

    }



@media (min-width: 601px) {

    .search-pill-row {

        flex-direction: row;

        align-items: center;

    }

    /* .search-pill-btn i {

        display: inline;

    }*/

    .search-pill-btn .search-pill-btn-label {

        display: inline;

    }

    .search-pill-link {

        display: inline-flex;

        gap: .35rem;

        align-items: center;

    }

}



.dash-search-row {

    display: flex;

    flex-direction: column;

    /*    gap: .6rem;*/

    width: 100%;

    min-width: 0;

}



    .dash-search-row .search-pill {

        box-shadow: var(--card-shadow);

    }



.dash-welcome-bar .dash-welcome-message {

    margin-left: 8px;

}

/* Section titles */

.section-title-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 1.25rem 0 .75rem;

}



    .section-title-row h3 {

        font-size: .9rem;

        font-weight: 700;

        color: var(--primary-blue);

        margin: 0;

        /* text-transform: uppercase;*/

        letter-spacing: .05em;

    }



    .section-title-row a {

        font-size: .8rem;

    }



.card-container.dash-board {

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

}

/* Empty state */

.empty-state {

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    padding: 3rem 2rem;

    text-align: center;

    margin-bottom: 1.25rem;

}



.empty-state-icon {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    background: var(--tint-blue);

    color: var(--primary-blue);

    font-size: 1.6rem;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1.25rem;

}



.empty-state h3 {

    font-size: 1.1rem;

    font-weight: 600;

    margin: 0 0 .5rem;

    color: var(--text-main);

}



.empty-state p {

    font-size: .875rem;

    color: var(--text-muted);

    margin: 0 0 1.5rem;

    max-width: 340px;

    margin-left: auto;

    margin-right: auto;

}

/* Getting started steps */

.getting-started {

    background: var(--card-bg);

    border: 1px solid var(--border-color-light);

    border-radius: var(--radius);

    box-shadow: var(--card-shadow);

    overflow: hidden;

}



.getting-started-header {

    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--border-color-light);

}



    .getting-started-header h3 {

        font-size: .9rem;

        font-weight: 700;

        color: var(--primary-blue);

        margin: 0;

        text-transform: uppercase;

        letter-spacing: .05em;

    }



.step-list {

    padding: .5rem;

}



.step-item {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: .85rem 1rem;

    border-radius: var(--radius);

    transition: var(--transition);

    cursor: default;

}



.step-num {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--tint-blue);

    color: var(--primary-blue);

    font-size: .8rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



    .step-num.done {

        background: var(--mid-green);

        color: #fff;

    }



.step-content {

    flex: 1;

    min-width: 0;

}



.step-title {

    font-size: .875rem;

    font-weight: 600;

    color: var(--text-main);

}



.step-desc {

    font-size: .78rem;

    color: var(--text-muted);

    margin-top: 2px;

}



.step-action {

    font-size: .8rem;

    flex-shrink: 0;

}



.map-center-marker {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--primary-blue);

    border: 3px solid var(--bg-light);

    box-shadow: var(--shadow-card);

}



/* --- Map popup: every open position at one location --- */

#map .gm-style-iw-c {

    padding: 0;

    border-radius: var(--radius);

}



#map .gm-style-iw-d {

    overflow: auto !important;

    max-height: 260px !important;

}



.map-jobs-popup {

    /* Google's bubble stays white in both themes, so the text colour is pinned

       rather than themed - var(--text-main) would vanish in dark mode. */

    color: #2B3652;

    font-family: var(--font-family);

    min-width: 240px;

    max-width: 300px;

}



.map-jobs-popup-header {

    /* right padding leaves room for Google's close button */

    padding: 10px 34px 10px 12px;

    border-bottom: thin solid var(--border-color-light);

}



.map-jobs-popup-location {

    font-weight: 700;

    font-size: 0.95rem;

}



.map-jobs-popup-count {

    font-size: 0.78rem;

    opacity: 0.7;

    margin-top: 2px;

}



.map-jobs-popup-list {

    display: flex;

    flex-direction: column;

}



.map-jobs-popup-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 12px;

}



    .map-jobs-popup-item + .map-jobs-popup-item {

        border-top: thin solid var(--border-color-light);

    }



.map-jobs-popup-item-main {

    min-width: 0;

}



.map-jobs-popup-title {

    font-weight: 600;

    font-size: 0.88rem;

    line-height: 1.25;

}



.map-jobs-popup-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    margin-top: 4px;

}



    .map-jobs-popup-badges .badge {

        font-size: 0.7rem;

    }



.map-jobs-popup-status {

    font-size: 0.7rem;

    font-weight: 700;

}



    .map-jobs-popup-status.green {

        color: var(--success-green, #1C7C4A);

    }



    .map-jobs-popup-status.orange {

        color: var(--warn-orange, #B5651D);

    }



a.button.map-jobs-popup-view {

    flex-shrink: 0;

    margin: 0;

    padding: 5px 10px;

    font-size: 0.75rem;

    white-space: nowrap;

    cursor: pointer;

}



.delete-account {

    max-width: 200px;

    justify-self: center;

}



@media only screen and (max-width: 1200px) {

    .search-and-filter-btn {

        grid-template-columns: minmax(300px, 1fr) minmax(200px, 1fr);

    }



    .job-review-header {

        display: flex;

    }



    .bookmarked-jobs {

        aspect-ratio: 1;

        justify-content: center;

    }



    .bookmarked-jobs-label {

        display: none;

    }



    .content-frame {

        min-width: 100%;

    }

}



@media (max-width: 900px) {

    .error-field {
        /*display: block;*/

        position: relative;        
        margin: 7px 0 5px 0;
    }



    label.field-label {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        max-width: 100%;

    }



        label.field-label.required::after {

            position: static;

            margin-left: 4px;

        }



        label.field-label .error-field {

            order: 1;

            flex-basis: 100%;

        }

}



@media only screen and (max-width: 768px) {

    .applicant-card:nth-child(n + 3) {

        display: none;

    }



    .mobile-job-detail {

        display: flex; /* column: .job-detail scrolls, .mobile-apply-bar sits below it */

        flex-direction: column;

        top: auto; /* bottom-anchored: the sheet hugs its content upward from the bottom edge */

        bottom: 0;

        transform: translateY(110%); /* parked offscreen below; 110% clears the up-shadow */

        height: auto;

        max-height: 80vh; /* fallback for browsers without dvh (iOS < 15.4) */

        max-height: 80dvh; /* tracks the dynamic viewport as mobile toolbars show/hide */

        border-radius: var(--radius) var(--radius) 0 0;

        overflow: hidden; /* .job-card inside is opaque with border-radius: 0 and would paint over the rounded corners */

        visibility: hidden;

    }



        .mobile-job-detail.open {

            visibility: visible;

            box-shadow: var(--shadow-up);

            transform: translateY(0);

        }

            /* 'More' expands the open sheet to fill the whole screen */

            .mobile-job-detail.open.expanded {

                height: 100vh;

                height: 100dvh;

                max-height: none; /* the 80dvh cap must not clip fullscreen */

                border-radius: 0;

            }



    .job-desc-toggle {

        display: inline-flex;

        position: static;

        align-items: center;

        gap: 6px;

        margin: 2px 0 0;

    }



    .job-detail-actions {

        display: flex;

        align-self: flex-start;

        flex-direction: row-reverse;

        align-items: center;

        min-height: 50px;

    }



    .job-detail-bookmark {

        display: inline-block;

    }



    .job-item-share {

        display: block;

    }



    /* Apply button lives in .mobile-apply-bar on mobile (moved by adjustJobDetails);

       keep it hidden in the header until that runs */

    .job-apply-header-buttons .apply-job-box {

        display: none;

    }



    .mobile-job-detail .job-detail {

        display: flex;

        flex-direction: column;

        flex: 0 1 auto; /* hug content, but shrink under the sheet cap so overflow:auto scrolls */

        min-height: 0;

        height: auto; /* override the generic .job-detail height:100% */

    }



    /* fullscreen: let the scroll area fill so the bar sits at the screen bottom */

    .mobile-job-detail.open.expanded .job-detail {

        flex-grow: 1;

    }



    .mobile-job-detail .job-detail .job-card,

    .mobile-job-detail .job-detail .job-apply-desc {

        flex-shrink: 0;

    }



    .mobile-job-detail .job-detail .job-apply-desc {

        height: auto;

    }



    .mobile-apply-bar {

        display: block;

        flex: 0 0 auto;

        padding: .75rem 1rem;

        background: var(--card-bg);

        border-top: thin solid var(--border-color-light);

    }



        .mobile-apply-bar .form-field-box {

            margin: 0;

        }



        .mobile-apply-bar button {

            width: 100%;

        }



    main {

        padding: 0 .41rem 1rem

    }

    /*    .search-feature {

        border-color: var(--highlight-blue);

    }*/

    .job-desc-container {

        display: flex;

        flex-direction: column-reverse;

    }



    .job-desc-detail {

        position: initial;

    }



    .job-desc-detail-container {

        display: grid;

        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));

        gap: 10px;

        margin-bottom: 1.7rem;

    }



    .job-detail {

        height: 100%;

        overflow: auto;

    }



    .job-detail-item {

        margin: 0;

    }



    .job-application-steps {

        display: none;

    }



    .job-posting-container {

        display: flex;

        flex-direction: column;

    }



    .mobile-search-feature {

        max-width: 100%;

        width: 100%;

        padding: 1rem;

        box-shadow: var(--shadow-up);

        background-color: var(--card-bg);

        border: thin solid var(--bright-grey);

    }



    .mobile-menu-container {

        display: block;

    }



    .ats-job-item {

        background: var(--card-bg);

    }



    .ats-job-search {

        max-width: 100%;

        width: 100%;

        border: none;

        box-shadow: none;

    }



    .ats-job-search-filters {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));

        gap: 3px;

    }



    .custom-content ol, .custom-content ul {

        padding: 1rem;

    }



    .custom-content figure {

        display: flex;

        max-width: 100%;

        overflow: auto;

        padding: 0;

    }



    .form-field-box.return-to-position {

        display: block;

        border-bottom: thin solid var(--border-color);

        padding-bottom: .7rem;

    }



        .form-field-box.return-to-position a {

            cursor: pointer;

        }



            .form-field-box.return-to-position a i {

                margin-right: 10px;

            }



    .inner-job-desc-card {

        padding-bottom: 1rem;

    }



        .inner-job-desc-card .jobdesc {

            overflow: visible;

        }



    .job-search-container {

        overflow-y: scroll;

    }



    .search-container {

        margin: 0;

        padding: 7px 0px;

    }



    .search-and-filter-btn {

        position: relative;

        display: flex;

        gap: 0px;

        flex-direction: column;

        align-items: flex-start;

    }

    .job-header {

        font-size: 1.5rem;

    }

    .job-header-title {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

    }

    .password-toggle {

        right: 0.625rem;

        width: 1.875rem;

        height: 1.875rem;

    }



        .password-toggle i {

            font-size: 0.95rem;

        }



    .job-short-desc {

    }



    .inner-job-desc-card .jobdesc > * {

        /*min-height: 300px;*/

    }



    .jobinfo-back {

        padding: 1rem;

    }



    .page-footer {

        display: none;

    }



    .mobile-bottom-nav .mobile-about {

        display: none;

    }



    .mobile-bottom-nav {

        display: flex;

        justify-content: space-around; /* Spreads active items out evenly */

        box-shadow: var(--shadow-up), 0 3px 0 0 var(--bg-light);

    }



        .mobile-bottom-nav div {

            display: block;

        }



        .mobile-bottom-nav > div:has(a) {

            flex: 1;

            text-align: center;

        }

        /* Hide the divs that don't have an anchor link inside them */

        .mobile-bottom-nav > div:not(:has(a)) {

            display: none;

        }



    .page-header {

        display: flex;

        top: 0;

    }



    .home {

        display: none;

    }



    .dash-layout {

        grid-template-columns: 1fr;

    }



    .sidebar-stats {

        grid-template-columns: repeat(3,1fr);

    }

/*    .sidebar-stat:nth-child(3),

    .sidebar-stat:nth-child(4) {

        border-top: none;

    }*/

    .sidebar-stat {

        border-right: 1px solid var(--border-color-light);

    }



        .sidebar-stat:last-child {

            border-right: none;

        }



    .ats-job-item.selected {

        width: 100%;

    }



    .map-search-row {

        padding: 14px 14px;

        gap: 0;

    }



        .map-search-row .search-container {

            margin: 0;

        }



    .sidebar-stat:nth-child(even) {

        border-right: 1px solid var(--border-color-light);

    }



    .dash-welcome-bar {

    }



    .job-apply-desc.card {

        border: 0;

        box-shadow: none;

        display: none;

        height: 100%;

        overflow: visible;

    }



    .user-interactions .search {

        display: none;

    }



    .search-container {

        width: 100%;

    }

    .job-header-title .badge.basic-badge.square {

        display: flex;

        margin: 10px 10px 10px 0;

    }

}



@media only screen and (max-width: 600px) {

    .page-header .company-logo img {

        margin-top: 10px;

        max-height: 30px;

    }



    .job-apply-desc.card {

        border: 0;

        box-shadow: none;

        display: none;

        height: 100%;

        overflow: visible;

    }



    .user-interactions .search {

        display: none;

    }

    /*.dash-search-row {

            padding: 0 10px;

        }*/

    .dash-search-row > .button {

        display: none;

    }



    .page-actions {

        padding: 0px 1rem;

        justify-content: flex-end;

        width: 100%;

    }



    .job-search-container {

        width: 100%;

    }

}



@media only screen and (max-width: 480px) {

    .bookmarked-jobs {

        margin-right: 9px;

        padding: 0.5rem 0.65rem;

    }



    .job-search-container {

        width: 100%;

    }



    .job-review-header {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

        margin-bottom: 1rem;

    }



    .job-review-header-right {

        text-align: left;

    }



    .close-search {

        font-size: 2.5rem;

    }



    .card, .form-detail-item {

        background: var(--card-bg);

        border: thin solid var(--border-color-light);

    }



    .ats-job-item .inner-job-card {

        border: none;

    }



    .job-apply-desc {

        height: 100vh;

    }



    .job-search-container {

        max-width: 400px;

    }



    main {

        padding: 0 .41rem 1rem;

    }



    .job-desc-detail-container {

        display: grid;

        grid-template-columns: repeat(auto-fill,minmax(100px,1fr));

        gap: 10px;

        margin-bottom: 1.7rem;

    }



    .job-detail-item {

        font-size: 0.7rem;

    }



    .job-item-header {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

    }



    .upload-container {

        display: flex;

        flex-direction: column;

        gap: 0;

    }



    .error-field {

        /*display: block;*/

        position: relative;

        margin: 7px 0 5px 0;

    }



    label.required::after, .question-text.required::after {

        top: -1px;

        right: -11px;

    }



    label.required:has(.error-field:is(:empty))::after {

        top: -1px;

        right: -11px;

    }



    label.field-label {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        max-width: 100%;

    }



        label.field-label.required::after {

            position: static;

            margin-left: 4px;

        }



        label.field-label .error-field {

            order: 1;

            flex-basis: 100%;

        }



    .review-detail-container {

        padding: 1rem;

    }



    .ats-card-box.verify-box {

        padding: 1rem;

    }



    .verification-container {

        gap: 3px;

    }



        .verification-container input.digit-box {

            font-size: 1rem;

        }



        .verification-container input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=reset]):not([type=color]):not([type=file]) {

            padding: 4px;

            height: 45px;

        }



    .ats-form-group {

        margin: 0;

    }



    .job-post-header.has-badge {

        justify-content: flex-start;

        align-items: center;

        flex-direction: row;

    }



    .cd-toggle {

        padding: 10px;

    }



    .active-filters.has-chips {

        flex-direction: column-reverse;

    }

}



@media only screen and (max-width: 370px) {

    .page-header {

        height: auto;

    }

}



@media (hover: hover) and (pointer: fine) {

    /* will only work on desktop 

      On mobile devices, when a user clicks, the hover effect triggers as well and stays on.  

        This will stop that from happening

    */

    .sidebar-nav-item:hover {

        background: var(--tint-blue);

    }



    .applicant-card:hover a.button.continue-btn i {

        transform: translateX(2px);

    }



    .applicant-card:hover {

        transform: translateY(-2px);

        box-shadow: 0 10px 26px -12px var(--shadow);

        border-color: var(--light-blue);

    }



    .form-field-box .password-toggle:hover {

        color: var( --light-blue);

        background: rgba(14, 165, 233, 0.08);

        transform: translateY(-50%) scale(1.05);

    }



        .form-field-box .password-toggle:hover i {

            transform: scale(1.1);

        }



    .ats-job-item:hover {

        border-color: var(--light-blue);

        border-top: 1px solid var(--light-blue);

        /*border-right: 6px solid var(--primary-blue);*/

        transform: translateY(-2px);

    }



    .profile-button:hover {

        background: var(--light-blue);

        color: var(--primary-blue);

    }



    .job-search-map-button:hover {

        background: transparent;

        color: var(--light-blue);

        border-color: var(--light-blue);

    }



    .application-errors:hover {

        color: var(--light-red);

    }



    .close-search:hover {

        color: var(--light-blue);

    }



    .search-container:hover, .search-bar:hover {

        border-color: var(--border-color-light);

    }



    .filter-tab:hover {

        background-color: var(--light-blue);

    }



        .filter-tab:hover .tab-line {

            color: var(--text-main-inverse-hover);

        }



    .job-item-star:hover {

        color: var(--light-orange);

    }



    .job-item-share:hover {

        color: var(--light-blue);

    }



    .close-setting:hover {

        color: var(--light-blue);

    }



    .bookmark-indicator:hover {

        color: var(--light-orange);

    }



    .cd-toggle:hover {

        border-color: var(--primary-blue);

        color: var(--primary-blue);

        background: var(--tint-blue-hover);

    }



    .cd-item:hover {

        background: var(--tint-blue);

        color: var(--primary-blue);

    }



    .settings-menu-item:hover,

    .settings-menu .user-signout a:hover,

    .settings-menu .settings-about a:hover {

        background: var(--tint-blue);

        color: var(--primary-blue);

    }



    .job-desc-toggle:hover {

        color: var( --light-blue);

    }



    .step-item:hover {

        background: var(--tint-blue);

    }



    .bookmarked-jobs:hover {

        /*        border-color: var(--primary-blue);

        color: var(--primary-blue);*/

        border-color: var(--bookmark);

        color: var(--bookmark);

    }



    .page-actions .user-translate:hover {

        background: var(--primary-blue);

    }



    .page-actions .settings-icon i:hover {

        color: var(--primary-blue);

    }

    /*

    .search-bar-home a:hover {

        background: linear-gradient(to right, var(--bg-light), var(--primary-blue) 100%);

        color: var(--text-main-inverse-hover);

    }

    */

    .job-search-container::-webkit-scrollbar-thumb:hover {

        background: var(--primary-blue);

    }





    .applicant-card:hover {

        box-shadow: 0 6px 20px rgba(13, 44, 75, 0.12);

        transform: translateY(-2px);

        border-color: var(--highlight-blue);

    }



    .language-menu-item:hover {

        background: var(--tint-blue);

        color: var(--primary-blue);

    }





    .search-pill-icon-btn:hover {

        background: var(--tint-blue);

        color: var(--primary-blue);

    }



    .search-chip:hover {

        border-color: var(--primary-blue);

        color: var(--primary-blue);

    }



    .sidebar-stat.attention:hover {

        cursor: pointer;

        background: var(--tint-blue);

    }

}