/* B.7.1 - Potential Hazards */

/* YES - DARK GREEN */
#question6316 .answer-item:nth-of-type(1) {
    background-color: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

/* NO - DARK RED */
#question6316 .answer-item:nth-of-type(2) {
    background-color: #991B1B !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* White text and icons */
#question6316 .answer-item:nth-of-type(1) *,
#question6316 .answer-item:nth-of-type(2) * {
    color: #ffffff !important;
}

/* Hover */
#question6316 .answer-item:nth-of-type(1):hover {
    background-color: #14532d !important;
}

#question6316 .answer-item:nth-of-type(2):hover {
    background-color: #7f1d1d !important;
}

/* B.9.1.1 - Physical Demands */

/* YES - DARK GREEN */
#question6319 .answer-item:nth-of-type(1) {
    background-color: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

/* NO - DARK RED */
#question6319 .answer-item:nth-of-type(2) {
    background-color: #991B1B !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* White text and icons */
#question6319 .answer-item:nth-of-type(1) *,
#question6319 .answer-item:nth-of-type(2) * {
    color: #ffffff !important;
}

/* Hover */
#question6319 .answer-item:nth-of-type(1):hover {
    background-color: #14532d !important;
}

#question6319 .answer-item:nth-of-type(2):hover {
    background-color: #7f1d1d !important;
}

/* Hide LimeSurvey branding from the survey header */
.navbar-brand {
    display: none !important;
}

.navbar-brand img {
    display: none !important;
}

/* Replace LimeSurvey top-left logo with small Judiciary logo */

.navbar-brand {
    display: flex !important;
    align-items: center;
    width: 95px;
    height: 55px;
    padding: 5px 10px !important;
    margin: 0 !important;
    background-image: url('/upload/surveys/186743/images/logo1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Hide the original LimeSurvey logo */
.navbar-brand img {
    display: none !important;
}

/* B.4.1 - Financial Decisions */

/* YES - DARK GREEN */
#question6308 .answer-item:nth-of-type(1) {
    background-color: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

/* NO - DARK RED */
#question6308 .answer-item:nth-of-type(2) {
    background-color: #991B1B !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* White text and icons */
#question6308 .answer-item:nth-of-type(1) *,
#question6308 .answer-item:nth-of-type(2) * {
    color: #ffffff !important;
}

/* Hover */
#question6308 .answer-item:nth-of-type(1):hover {
    background-color: #14532d !important;
}

#question6308 .answer-item:nth-of-type(2):hover {
    background-color: #7f1d1d !important;
}

/* Judiciary top navigation */
.navbar,
.navbar-default,
.navbar-inverse {
    background-color: #162f25 !important;
    border-color: #162f25 !important;
}

/* Navigation text/icons */
.navbar a,
.navbar .navbar-brand,
.navbar .nav > li > a {
    color: #ffffff !important;
}

/* Small Judiciary logo in the top navigation */
.navbar-brand {
    width: 110px !important;
    height: 55px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    background-image: url('/upload/surveys/186743/images/logo1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: transparent !important;
}

/* Hide original LimeSurvey logo */
.navbar-brand img {
    display: none !important;
}

/* Mobile navigation */
.navbar-toggle {
    border-color: rgba(255,255,255,0.7) !important;
}

.navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* Navigation bottom border */
.navbar {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* =========================================================
   JUDICIARY TOP NAVIGATION
   ========================================================= */

/* Main top navigation */
.fruity .navbar,
.fruity nav.navbar,
.fruity #survey-nav,
#survey-nav {
    background-color: #162f25 !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 3px solid #685e04 !important;
    min-height: 55px !important;
}

/* Navigation container */
.fruity .navbar-header,
.fruity .navbar-collapse,
.fruity .navbar-default {
    background-color: #162f25 !important;
    background-image: none !important;
}

/* Navigation links */
.fruity .navbar a,
.fruity .navbar-nav > li > a,
.fruity .navbar .nav-link,
.fruity .navbar-brand {
    color: #ffffff !important;
}

/* Hover */
.fruity .navbar-nav > li > a:hover,
.fruity .navbar-nav > li > a:focus {
    background-color: #14532d !important;
    color: #ffffff !important;
}

/* Small Judiciary logo in the navigation */
.fruity .navbar-brand {
    width: 110px !important;
    height: 55px !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: url('/upload/surveys/186743/images/logo1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Hide original LimeSurvey logo */
.fruity .navbar-brand img,
.fruity .navbar-brand .logo {
    display: none !important;
}

/* Mobile hamburger */
.fruity .navbar-toggle {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.7) !important;
}

.fruity .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* Keep mobile header green */
@media (max-width: 767px) {
    .fruity .navbar,
    .fruity #survey-nav {
        background-color: #162f25 !important;
    }
}

/* =========================================================
   JOB ANALYSIS QUESTIONNAIRE TITLE
   ========================================================= */

.survey-name,
#surveynametext,
h1.survey-name {
    font-weight: 700 !important;
    color: #162f25 !important;
    letter-spacing: 0.2px !important;
}


/* =========================================================
   NEXT BUTTON - ALIGN WITH CONTENT BORDER
   ========================================================= */

@media (max-width: 767px) {

    body:not(.jd-design-ready) #ls-button-submit {
        position: relative !important;
        right: 14px !important;
        left: auto !important;
        margin-right: 0 !important;
    }

    body:not(.jd-design-ready) .fruity .navigator,
    body:not(.jd-design-ready) .fruity .nav-buttons {
        text-align: right !important;
        padding-right: 0 !important;
    }
}

/* =========================================================
   BOLD MAIN QUESTION/GROUP HEADINGS
   ========================================================= */

/* Main group/question headings such as B.1, B.2, B.3... */
.fruity .group-name,
.fruity .group-title,
.fruity .group-name h2,
.fruity .group-name h1,
.fruity .group-title h2,
.fruity .group-title h1,
.fruity .question-group-title {
    font-weight: 700 !important;
}

/* Keep the heading text strong on mobile as well */
@media (max-width: 767px) {
    .fruity .group-name,
    .fruity .group-title,
    .fruity .group-name h2,
    .fruity .group-name h1,
    .fruity .group-title h2,
    .fruity .group-title h1,
    .fruity .question-group-title {
        font-weight: 700 !important;
    }
}

/* =========================================================
   B.2.1 - Do not show validation red on initial display
   ========================================================= */

#question6296 .has-error,
#question6296 .is-invalid {
    box-shadow: none !important;
}

/* Keep normal input appearance */
#question6296 input[type="text"] {
    border-color: #ccc !important;
    box-shadow: none !important;
}

/* B.2.1 - Normal black text while typing */
#question6296 input[type="text"],
#question6296 textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: 400 !important;
}

/* Placeholder also normal grey */
#question6296 input[type="text"]::placeholder,
#question6296 textarea::placeholder {
    color: #777777 !important;
}

/* Prevent orange text while focused */
#question6296 input[type="text"]:focus,
#question6296 textarea:focus {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Prevent Fruity validation/focus from changing typed text */
#question6296 .form-control {
    color: #000000 !important;
}

/* =========================================================
   STANDARDIZE ALL FORM FIELDS TO MATCH B.3.1
   ========================================================= */

/* ---------------------------------------------------------
   1. ALL TEXT / SEARCH / AUTOCOMPLETE INPUTS
   --------------------------------------------------------- */

.fruity .question-container .answer-container input[type="text"],
.fruity .question-container .answer-container input[type="email"],
.fruity .question-container .answer-container input[type="number"],
.fruity .question-container .answer-container input[type="tel"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   2. AUTOCOMPLETE / SEARCH FIELD WRAPPERS
   --------------------------------------------------------- */

.fruity .question-container .answer-container .position-search,
.fruity .question-container .answer-container .position-search-container,
.fruity .question-container .answer-container .col-auto {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}


/* ---------------------------------------------------------
   3. AUTOCOMPLETE FORM CONTROLS
   --------------------------------------------------------- */

.fruity .question-container .answer-container .position-search input,
.fruity .question-container .answer-container .position-search .form-control,
.fruity .question-container .answer-container .form-control {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   4. DROPDOWNS
   --------------------------------------------------------- */

.fruity .question-container .answer-container select,
.fruity .question-container .answer-container select.form-control,
.fruity .question-container .answer-container select.form-select {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* Dropdown parent */
.fruity .question-container .answer-container select.form-control,
.fruity .question-container .answer-container select.form-select {
    flex: 1 1 auto !important;
}


/* ---------------------------------------------------------
   5. TEXTAREAS
   --------------------------------------------------------- */

.fruity .question-container .answer-container textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   6. ANSWER AREA
   --------------------------------------------------------- */

.fruity .question-container .answer-container {
    width: 100% !important;
    max-width: none !important;
}


/* ---------------------------------------------------------
   7. ANSWER ITEMS
   --------------------------------------------------------- */

.fruity .question-container .answer-item {
    width: 100% !important;
    max-width: none !important;
}


/* ---------------------------------------------------------
   8. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .fruity .question-container .answer-container input[type="text"],
    .fruity .question-container .answer-container input[type="email"],
    .fruity .question-container .answer-container input[type="number"],
    .fruity .question-container .answer-container input[type="tel"],
    .fruity .question-container .answer-container textarea,
    .fruity .question-container .answer-container select,
    .fruity .question-container .answer-container .position-search {
        width: 100% !important;
        max-width: none !important;
    }
}

/* =========================================================
   JUDICIARY JOB ANALYSIS — MOBILE DESIGN SYSTEM
   (matches attached Section A mockup)
   ========================================================= */

:root {
    --jd-green: #004d33;
    --jd-green-deep: #162f25;
    --jd-green-mid: #166534;
    --jd-green-soft: #e8f3ee;
    --jd-green-tint: #f3f8f5;
    --jd-gold: #c5a017;
    --jd-gold-deep: #685e04;
    --jd-text: #1f2933;
    --jd-muted: #6b7280;
    --jd-border: #d7dde3;
    --jd-card: #f4f6f8;
    --jd-white: #ffffff;
    --jd-radius: 12px;
    --jd-radius-sm: 10px;
}

/* Page background */
body,
body .fruity,
#outerframeContainer,
#main-content,
.main-content {
    background-color: #eef2f0 !important;
}

/*
 * Hide LimeSurvey's default layout until the Judiciary design
 * JS has wrapped the page. Stops the old theme flashing on Next.
 */
body:not(.jd-design-ready) #outerframeContainer,
body:not(.jd-design-ready) #main-content,
body.jd-page-switching #outerframeContainer,
body.jd-page-switching #main-content,
body.jd-page-switching form#limesurvey {
    opacity: 0 !important;
}

body.jd-page-switching,
html.jd-page-switching {
    cursor: wait;
}

body.jd-page-switching::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 56px;
    bottom: 0;
    background: #eef2f0;
    z-index: 10050;
    pointer-events: none;
}

/*
 * Tighten space under the dark green header (the large gap
 * above the progress bar).
 */
body.jd-design-ready #outerframeContainer,
body.jd-design-ready #main-content,
body.jd-design-ready .main-content,
body.jd-design-ready #content,
body.jd-design-ready .container,
body.jd-design-ready .top-container,
body.jd-design-ready .survey-header,
body.jd-design-ready .jumbotron,
body.jd-design-ready .welcome,
body.jd-design-ready #welcome-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.jd-design-ready .navbar,
body.jd-design-ready #survey-nav {
    margin-bottom: 0 !important;
}

/*
 * Tighten space ABOVE the dark green header (gap at the very
 * top of the page before the Judiciary nav bar).
 */
html,
body,
body.jd-design-ready,
body.jd-design-ready.fruity {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.jd-design-ready .navbar,
body.jd-design-ready nav.navbar,
body.jd-design-ready #survey-nav,
body.jd-design-ready .navbar-fixed-top,
body.jd-design-ready .navbar-static-top,
body.jd-design-ready header,
body.jd-design-ready .top-bar,
body.jd-design-ready #top-bar,
body.jd-design-ready .brand-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

body.jd-design-ready #vue-apps-main-container,
body.jd-design-ready #beginScripts,
body.jd-design-ready .public-page,
body.jd-design-ready .wrapper,
body.jd-design-ready #wrapper,
body.jd-design-ready .site-header,
body.jd-design-ready .ls-topbar,
body.jd-design-ready .top-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Collapse empty spacer strips above the nav */
body.jd-design-ready body > div:empty,
body.jd-design-ready #outerframeContainer > div:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.jd-design-ready .survey-name,
body.jd-design-ready #surveynametext,
body.jd-design-ready h1.survey-name,
body.jd-design-ready .survey-header,
body.jd-design-ready .jumbotron,
body.jd-design-ready .aTitle,
body.jd-design-ready .survey-description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* If survey title area is empty/hidden, collapse leftover space */
body.jd-design-ready .survey-header:empty,
body.jd-design-ready .jumbotron:empty {
    display: none !important;
}

/* ---------------------------------------------------------
   HEADER — dark green + gold swoosh
   --------------------------------------------------------- */

.fruity .navbar,
.fruity nav.navbar,
.fruity #survey-nav,
#survey-nav {
    background-color: var(--jd-green-deep) !important;
    border-bottom: 3px solid var(--jd-gold-deep) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fruity .navbar::after,
#survey-nav::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -28px;
    width: 180px;
    height: 90px;
    background: radial-gradient(ellipse at center, var(--jd-gold) 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}

/* ---------------------------------------------------------
   PROGRESS BAR (injected by custom.js)
   --------------------------------------------------------- */

.jd-progress-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--jd-white);
    border-radius: var(--jd-radius);
    padding: 12px 14px;
    margin: 4px 12px 8px;
    box-shadow: 0 2px 8px rgba(22, 47, 37, 0.08);
}

.jd-progress-meta {
    min-width: 110px;
}

.jd-progress-meta .jd-progress-section {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--jd-text);
    line-height: 1.2;
}

.jd-progress-meta .jd-progress-name {
    display: block;
    font-size: 12px;
    color: var(--jd-muted);
    margin-top: 2px;
}

.jd-progress-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.jd-progress-fill {
    height: 100%;
    background: var(--jd-green);
    border-radius: 999px;
    width: 0%;
    transition: width 0.35s ease;
}

.jd-progress-pct {
    min-width: 72px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--jd-green);
    white-space: nowrap;
}

/* ---------------------------------------------------------
   INTRO + CONFIDENTIALITY CARDS (injected by custom.js)
   --------------------------------------------------------- */

.jd-intro-card,
.jd-confidential-card {
    margin: 0 12px 12px;
    border-radius: var(--jd-radius);
    padding: 16px;
}

.jd-intro-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--jd-green-soft);
}

.jd-intro-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jd-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.jd-intro-card h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--jd-green-deep);
}

.jd-intro-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--jd-muted);
}

.jd-confidential-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--jd-green-tint);
    border-left: 5px solid var(--jd-green);
}

.jd-confidential-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--jd-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.jd-confidential-card strong {
    display: block;
    color: var(--jd-green);
    font-size: 14px;
    margin-bottom: 4px;
}

.jd-confidential-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4b5563;
}

/*
 * Cover description under the survey title — keep it readable
 * and centred so the long sentence fits on mobile/desktop.
 */
body.jd-design-ready .survey-description,
body.jd-design-ready .welcome .survey-description,
body.jd-design-ready #welcome-container .survey-description,
body.jd-design-ready .welcome p,
body.jd-design-ready .jumbotron p {
    max-width: 36rem !important;
    width: 100% !important;
    margin: 8px auto 16px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    color: var(--jd-green) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

body.jd-design-ready .survey-name,
body.jd-design-ready #surveynametext,
body.jd-design-ready h1.survey-name,
body.jd-design-ready .aTitle {
    text-align: center !important;
    padding: 0 16px !important;
    max-width: 100% !important;
}

/* ---------------------------------------------------------
   COVER / LANDING PAGE LAYOUT
   Logos → Title + description → Please provide…
   --------------------------------------------------------- */

body.jd-cover-page .jd-intro-card {
    display: none !important;
}

body.jd-cover-page #jd-confidential-card,
body.jd-cover-page .jd-confidential-card,
body.jd-cover-page #jd-cover-please,
body.jd-cover-page .jd-cover-please {
    display: none !important;
}

body.jd-cover-page #jd-cover-logos,
body.jd-cover-page .jd-cover-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px 28px !important;
    margin: 16px auto 8px !important;
    padding: 12px 16px !important;
    max-width: 100% !important;
    text-align: center !important;
}

body.jd-cover-page #jd-cover-logos img,
body.jd-cover-page .jd-cover-logos img {
    max-height: 120px !important;
    width: auto !important;
    max-width: 46% !important;
    height: auto !important;
    margin: 0 !important;
}

body.jd-cover-page .survey-name,
body.jd-cover-page #surveynametext,
body.jd-cover-page h1.survey-name,
body.jd-cover-page .aTitle {
    order: 2;
    margin: 8px auto 6px !important;
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.25 !important;
    color: var(--jd-green-deep) !important;
}

body.jd-cover-page .survey-description,
body.jd-cover-page .jd-cover-please {
    text-align: center !important;
}

.jd-cover-please {
    margin: 4px auto 16px !important;
    padding: 0 16px !important;
    max-width: 36rem !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--jd-muted) !important;
    text-align: center !important;
}

body.jd-cover-page #jd-confidential-card {
    margin-top: 4px !important;
}

/* ---------------------------------------------------------
   FORM CARD WRAPPER
   --------------------------------------------------------- */

.jd-form-card {
    margin: 0 12px 20px;
    background: var(--jd-card);
    border-radius: var(--jd-radius);
    padding: 16px 14px 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.jd-form-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--jd-green-deep);
}

.jd-form-card-title .jd-doc-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--jd-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/*
 * Hide LimeSurvey language changer (“default” chip).
 * Theme wrappers: form-change-lang / lang select / changelang button.
 * Do NOT use bare .btn-default (that would hide Previous).
 */
#outerframeContainer .form-change-lang,
form#limesurvey .form-change-lang,
.form-change-lang,
.navbar .form-change-lang,
.navbar-nav .form-change-lang,
li.form-change-lang,
#lang-select,
#langselect,
#language-changer-select,
#langs-container,
.language_change_container,
select[name="lang"],
button[value="changelang"],
button.ls-language-changer-item,
.ls-language-changer-item {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}

body.jd-design-ready .group-title,
body.jd-design-ready .group-name,
body.jd-design-ready .question-group-title {
    display: none !important;
}

/*
 * Hide native LimeSurvey group description — it duplicates the
 * "Your information is confidential" card (the gray rounded
 * box under the green confidentiality card).
 */
body.jd-design-ready .group-description,
body.jd-design-ready .group-desc,
body.jd-design-ready .ls-group-description,
body.jd-design-ready .group-title-description,
body.jd-design-ready #group-description,
body.jd-design-ready .question-group-description,
body.jd-design-ready .top-container .alert:not(.jd-confidential-card),
body.jd-design-ready .group-container > .well,
body.jd-design-ready .group-container > .alert-info {
    display: none !important;
}

/* ---------------------------------------------------------
   QUESTION LABELS + HELP
   --------------------------------------------------------- */

body.jd-design-ready .question-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

body.jd-design-ready .question-title,
body.jd-design-ready .ls-label-question,
body.jd-design-ready .question-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--jd-green-deep) !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
}

body.jd-design-ready .question-help,
body.jd-design-ready .ls-questionhelp,
body.jd-design-ready .help-block {
    font-size: 12.5px !important;
    color: var(--jd-muted) !important;
    margin: 0 0 8px !important;
}

body.jd-design-ready .asterisk,
body.jd-design-ready .mandatory .asterisk {
    color: #dc2626 !important;
}

/* ---------------------------------------------------------
   INPUTS — rounded, icon prefix
   --------------------------------------------------------- */

body.jd-design-ready .answer-container input[type="text"],
body.jd-design-ready .answer-container input[type="email"],
body.jd-design-ready .answer-container input[type="number"],
body.jd-design-ready .answer-container input[type="tel"],
body.jd-design-ready .answer-container textarea,
body.jd-design-ready .answer-container select,
body.jd-design-ready .custom-searchable-dropdown-input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius-sm) !important;
    background: var(--jd-white) !important;
    color: var(--jd-text) !important;
    font-size: 15px !important;
    padding: 12px 14px 12px 44px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.jd-design-ready .custom-searchable-dropdown-wrapper,
body.jd-design-ready .jd-input-wrap,
body.jd-design-ready .answer-container {
    width: 100% !important;
    max-width: 100% !important;
    /* visible: overflow:hidden was clipping A.7 text to one letter (e.g. "S" of Supreme Court) and the dropdown list */
    overflow: visible !important;
    box-sizing: border-box !important;
}

body.jd-design-ready .custom-searchable-dropdown-input {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

body.jd-design-ready .answer-container select {
    padding-right: 36px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23004d33' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}

body.jd-design-ready .answer-container input:focus,
body.jd-design-ready .answer-container textarea:focus,
body.jd-design-ready .answer-container select:focus,
body.jd-design-ready .custom-searchable-dropdown-input:focus {
    border-color: var(--jd-green-mid) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 77, 51, 0.12) !important;
}

body.jd-design-ready .jd-api-filled input[type="text"],
body.jd-design-ready .jd-api-filled input[type="search"],
body.jd-design-ready .jd-api-filled textarea,
body.jd-design-ready .jd-api-filled select,
body.jd-design-ready .jd-api-filled .custom-searchable-dropdown-input,
body.jd-design-ready .jd-api-filled .select2-selection {
    background: #eef1f4 !important;
    background-color: #eef1f4 !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
    cursor: default !important;
    box-shadow: none !important;
    pointer-events: none !important;
    caret-color: transparent !important;
}

body.jd-design-ready .jd-api-filled .custom-searchable-dropdown-results {
    display: none !important;
}

body.jd-design-ready .jd-api-filled .jd-field-icon {
    color: #9ca3af !important;
}

body.jd-design-ready .jd-api-filled .em_mandatory,
body.jd-design-ready .jd-api-filled .ls-em-tip.em_mandatory,
body.jd-design-ready .jd-api-filled .jd-mandatory-ok,
body.jd-design-ready .jd-api-filled .jd-mandatory-ok * {
    color: #6b7280 !important;
}

/* Icon wrapper injected by JS */
.jd-input-wrap {
    position: relative;
    width: 100%;
}

.jd-input-wrap .jd-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--jd-green);
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
}

.jd-input-wrap .jd-field-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Searchable dropdown results stay above cards */
body.jd-design-ready .custom-searchable-dropdown-results {
    border-radius: 0 0 var(--jd-radius-sm) var(--jd-radius-sm) !important;
    border-color: var(--jd-border) !important;
}

/* ---------------------------------------------------------
   YES / NO — green / red split (all yes-no questions)
   --------------------------------------------------------- */

body.jd-design-ready .yes-no .btn-group,
body.jd-design-ready .yesno-button.btn-group {
    display: flex !important;
    gap: 14px !important;
    background: transparent !important;
    width: 100% !important;
}

body.jd-design-ready .yes-no .btn-group > label,
body.jd-design-ready .yesno-button.btn-group > label {
    flex: 1 1 0 !important;
    border-radius: var(--jd-radius-sm) !important;
    min-height: 72px !important;
    margin: 0 !important;
}

body.jd-design-ready .jd-hide-noanswer,
body.jd-design-ready .yes-no .btn-group > label.jd-hide-noanswer,
body.jd-design-ready .yesno-button.btn-group > label.jd-hide-noanswer {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

body.jd-design-ready table th.jd-hide-noanswer,
body.jd-design-ready table td.jd-hide-noanswer {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#jd-already-submitted-card {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    margin: 16px auto 24px !important;
    max-width: 720px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.08) !important;
}

#jd-already-submitted-card .jd-already-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #991b1b !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 14px !important;
}

#jd-already-submitted-card .jd-already-icon svg {
    width: 32px !important;
    height: 32px !important;
}

#jd-already-submitted-card h2 {
    color: #7f1d1d !important;
    font-size: 24px !important;
    margin: 0 0 8px !important;
    font-weight: 700 !important;
}

#jd-already-submitted-card p {
    color: #991b1b !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

body.jd-already-submitted #ls-button-submit,
body.jd-already-submitted button[value="movenext"],
body.jd-already-submitted button[value="movesubmit"],
body.jd-already-submitted .navigator button.btn-primary {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

body.jd-design-ready.jd-save-resume-page .navigator,
body.jd-design-ready.jd-save-resume-page .nav-buttons,
body.jd-design-ready.jd-save-resume-page #navigator-container,
body.jd-design-ready.jd-save-resume-page #ls-button-submit,
body.jd-design-ready.jd-save-resume-page #ls-button-previous {
    display: none !important;
}

body.jd-design-ready.jd-cover-page .navigator,
body.jd-design-ready.jd-cover-page .nav-buttons,
body.jd-design-ready.jd-cover-page #navigator-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.jd-design-ready.jd-cover-page #ls-button-submit,
body.jd-design-ready.jd-cover-page button[value="movenext"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.jd-design-ready.jd-save-resume-page #jd-form-card input[type="text"],
body.jd-design-ready.jd-save-resume-page #jd-form-card input[type="password"],
body.jd-design-ready.jd-save-resume-page #jd-form-card input[type="email"] {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    font-size: 16px !important;
    margin: 0 0 14px !important;
}

body.jd-save-resume-page .jd-save-now-btn {
    background: #166534 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
}

body.jd-save-resume-page .jd-return-survey {
    color: #166534 !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------
   NAVIGATOR — always visible: Previous left, Next right
   --------------------------------------------------------- */

body.jd-design-ready .navigator,
body.jd-design-ready .nav-buttons,
body.jd-design-ready #navigator-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    padding: 12px !important;
    margin: 0 !important;
    background: #eef2f0 !important;
    border: none !important;
    border-top: 1px solid var(--jd-border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    min-height: 64px !important;
}

/* Do not force navigator inner columns to break the button row */
body.jd-design-ready .navigator .row,
body.jd-design-ready .navigator [class*="col-"] {
    display: contents !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.jd-design-ready .navigator .button,
body.jd-design-ready .navigator button,
body.jd-design-ready #ls-button-previous,
body.jd-design-ready #ls-button-submit,
body.jd-design-ready .navigator .btn-primary,
body.jd-design-ready .navigator .btn-default {
    min-height: 48px !important;
    border-radius: var(--jd-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 18px !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
}

/*
 * LimeSurvey hidden internal submit (id=defaultbtn, value=default).
 * Theme marks it d-none; our nav button styles were overriding that.
 */
body.jd-design-ready #defaultbtn,
#defaultbtn.submit.d-none {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Previous — left */
body.jd-design-ready #ls-button-previous,
body.jd-design-ready .navigator .btn-default,
body.jd-design-ready button[value="moveprev"],
body.jd-design-ready button[name="move"][value="moveprev"] {
    background: var(--jd-white) !important;
    border: 1px solid var(--jd-border) !important;
    color: #4b5563 !important;
    order: 1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
}

/* Next / Save & Continue — right */
body.jd-design-ready #ls-button-submit,
body.jd-design-ready .navigator .btn-primary,
body.jd-design-ready button[name="move"][value="movenext"],
body.jd-design-ready button[value="movenext"] {
    background: var(--jd-green) !important;
    border: 1px solid var(--jd-green) !important;
    color: #fff !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    right: auto !important;
    left: auto !important;
}

body.jd-design-ready #ls-button-submit:hover,
body.jd-design-ready .navigator .btn-primary:hover,
body.jd-design-ready button[name="move"][value="movenext"]:hover {
    background: var(--jd-green-mid) !important;
}

/* Space so sticky nav does not cover last content */
body.jd-design-ready form#limesurvey,
body.jd-design-ready #main-content,
body.jd-design-ready .main-content {
    padding-bottom: 88px !important;
}

/* =========================================================
   Hide LimeSurvey NATIVE progress bar — keep only jd-progress-card
   ========================================================= */

.top-container,
.top-content,
#top-container,
div.top-container.space-col,
.fruity .top-container,
.fruity .top-content {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

body .progress:not(.jd-progress-track):not(.jd-progress-card),
body .progress-bar:not(.jd-progress-fill),
body #progress-wrapper,
body .progress-wrapper,
body .completed-wrapper,
body .ls-progress,
body .survey-progress {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* Desktop: keep the same language, slightly wider cards */
@media (min-width: 768px) {
    .jd-progress-card,
    .jd-intro-card,
    .jd-confidential-card,
    .jd-form-card {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    body.jd-design-ready .navigator,
    body.jd-design-ready .nav-buttons,
    body.jd-design-ready #jd-nav-bar {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
   MOBILE FULL-WIDTH FIX
   Content was collapsing to a narrow left column on phones.
   ========================================================= */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

@media (max-width: 767px) {

    body.jd-design-ready #outerframeContainer,
    body.jd-design-ready #main-content,
    body.jd-design-ready .main-content,
    body.jd-design-ready #content,
    body.jd-design-ready .container,
    body.jd-design-ready .container-fluid,
    body.jd-design-ready form#limesurvey,
    body.jd-design-ready form,
    body.jd-design-ready .row,
    body.jd-design-ready .top-container,
    body.jd-design-ready .public-page,
    body.jd-design-ready #wrapper,
    body.jd-design-ready .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
    }

    body.jd-design-ready .container,
    body.jd-design-ready .container-fluid,
    body.jd-design-ready #main-content,
    body.jd-design-ready #content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Force Bootstrap columns full width on phones (not navigator) */
    body.jd-design-ready .row > [class*="col-xs-"],
    body.jd-design-ready .row > [class*="col-sm-"],
    body.jd-design-ready .row > [class*="col-md-"],
    body.jd-design-ready .row > [class*="col-lg-"],
    body.jd-design-ready .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.jd-design-ready .navigator .row > [class*="col-"],
    body.jd-design-ready .nav-buttons .row > [class*="col-"],
    body.jd-design-ready #navigator-container [class*="col-"] {
        display: contents !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .jd-progress-card,
    .jd-intro-card,
    .jd-confidential-card,
    .jd-form-card {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        box-sizing: border-box !important;
    }

    body.jd-design-ready .navigator,
    body.jd-design-ready .nav-buttons,
    body.jd-design-ready #navigator-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Welcome / objective page text blocks */
    body.jd-design-ready .welcome,
    body.jd-design-ready .survey-description,
    body.jd-design-ready .group-description,
    body.jd-design-ready p,
    body.jd-design-ready img {
        max-width: 100% !important;
    }

    body.jd-design-ready img {
        height: auto !important;
    }
}/* B.7.1 - Potential Hazards */

/* YES - DARK GREEN */
#question6316 .answer-item:nth-of-type(1) {
    background-color: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

/* NO - DARK RED */
#question6316 .answer-item:nth-of-type(2) {
    background-color: #991B1B !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* White text and icons */
#question6316 .answer-item:nth-of-type(1) *,
#question6316 .answer-item:nth-of-type(2) * {
    color: #ffffff !important;
}

/* Hover */
#question6316 .answer-item:nth-of-type(1):hover {
    background-color: #14532d !important;
}

#question6316 .answer-item:nth-of-type(2):hover {
    background-color: #7f1d1d !important;
}

/* B.9.1.1 - Physical Demands */

/* YES - DARK GREEN */
#question6319 .answer-item:nth-of-type(1) {
    background-color: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

/* NO - DARK RED */
#question6319 .answer-item:nth-of-type(2) {
    background-color: #991B1B !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* White text and icons */
#question6319 .answer-item:nth-of-type(1) *,
#question6319 .answer-item:nth-of-type(2) * {
    color: #ffffff !important;
}

/* Hover */
#question6319 .answer-item:nth-of-type(1):hover {
    background-color: #14532d !important;
}

#question6319 .answer-item:nth-of-type(2):hover {
    background-color: #7f1d1d !important;
}

/* Hide LimeSurvey branding from the survey header */
.navbar-brand {
    display: none !important;
}

.navbar-brand img {
    display: none !important;
}

/* Replace LimeSurvey top-left logo with small Judiciary logo */

.navbar-brand {
    display: flex !important;
    align-items: center;
    width: 95px;
    height: 55px;
    padding: 5px 10px !important;
    margin: 0 !important;
    background-image: url('/upload/surveys/186743/images/logo1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Hide the original LimeSurvey logo */
.navbar-brand img {
    display: none !important;
}

/* B.4.1 - Financial Decisions */

/* YES - DARK GREEN */
#question6308 .answer-item:nth-of-type(1) {
    background-color: #166534 !important;
    border-color: #14532d !important;
    color: #ffffff !important;
}

/* NO - DARK RED */
#question6308 .answer-item:nth-of-type(2) {
    background-color: #991B1B !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

/* White text and icons */
#question6308 .answer-item:nth-of-type(1) *,
#question6308 .answer-item:nth-of-type(2) * {
    color: #ffffff !important;
}

/* Hover */
#question6308 .answer-item:nth-of-type(1):hover {
    background-color: #14532d !important;
}

#question6308 .answer-item:nth-of-type(2):hover {
    background-color: #7f1d1d !important;
}

/* Judiciary top navigation */
.navbar,
.navbar-default,
.navbar-inverse {
    background-color: #162f25 !important;
    border-color: #162f25 !important;
}

/* Navigation text/icons */
.navbar a,
.navbar .navbar-brand,
.navbar .nav > li > a {
    color: #ffffff !important;
}

/* Small Judiciary logo in the top navigation */
.navbar-brand {
    width: 110px !important;
    height: 55px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    background-image: url('/upload/surveys/186743/images/logo1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: transparent !important;
}

/* Hide original LimeSurvey logo */
.navbar-brand img {
    display: none !important;
}

/* Mobile navigation */
.navbar-toggle {
    border-color: rgba(255,255,255,0.7) !important;
}

.navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* Navigation bottom border */
.navbar {
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* =========================================================
   JUDICIARY TOP NAVIGATION
   ========================================================= */

/* Main top navigation */
.fruity .navbar,
.fruity nav.navbar,
.fruity #survey-nav,
#survey-nav {
    background-color: #162f25 !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 3px solid #685e04 !important;
    min-height: 55px !important;
}

/* Navigation container */
.fruity .navbar-header,
.fruity .navbar-collapse,
.fruity .navbar-default {
    background-color: #162f25 !important;
    background-image: none !important;
}

/* Navigation links */
.fruity .navbar a,
.fruity .navbar-nav > li > a,
.fruity .navbar .nav-link,
.fruity .navbar-brand {
    color: #ffffff !important;
}

/* Hover */
.fruity .navbar-nav > li > a:hover,
.fruity .navbar-nav > li > a:focus {
    background-color: #14532d !important;
    color: #ffffff !important;
}

/* Small Judiciary logo in the navigation */
.fruity .navbar-brand {
    width: 110px !important;
    height: 55px !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: url('/upload/surveys/186743/images/logo1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Hide original LimeSurvey logo */
.fruity .navbar-brand img,
.fruity .navbar-brand .logo {
    display: none !important;
}

/* Mobile hamburger */
.fruity .navbar-toggle {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.7) !important;
}

.fruity .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

/* Keep mobile header green */
@media (max-width: 767px) {
    .fruity .navbar,
    .fruity #survey-nav {
        background-color: #162f25 !important;
    }
}

/* =========================================================
   JOB ANALYSIS QUESTIONNAIRE TITLE
   ========================================================= */

.survey-name,
#surveynametext,
h1.survey-name {
    font-weight: 700 !important;
    color: #162f25 !important;
    letter-spacing: 0.2px !important;
}


/* =========================================================
   NEXT BUTTON - ALIGN WITH CONTENT BORDER
   ========================================================= */

@media (max-width: 767px) {

    body:not(.jd-design-ready) #ls-button-submit {
        position: relative !important;
        right: 14px !important;
        left: auto !important;
        margin-right: 0 !important;
    }

    body:not(.jd-design-ready) .fruity .navigator,
    body:not(.jd-design-ready) .fruity .nav-buttons {
        text-align: right !important;
        padding-right: 0 !important;
    }
}

/* =========================================================
   BOLD MAIN QUESTION/GROUP HEADINGS
   ========================================================= */

/* Main group/question headings such as B.1, B.2, B.3... */
.fruity .group-name,
.fruity .group-title,
.fruity .group-name h2,
.fruity .group-name h1,
.fruity .group-title h2,
.fruity .group-title h1,
.fruity .question-group-title {
    font-weight: 700 !important;
}

/* Keep the heading text strong on mobile as well */
@media (max-width: 767px) {
    .fruity .group-name,
    .fruity .group-title,
    .fruity .group-name h2,
    .fruity .group-name h1,
    .fruity .group-title h2,
    .fruity .group-title h1,
    .fruity .question-group-title {
        font-weight: 700 !important;
    }
}

/* =========================================================
   B.2.1 - Do not show validation red on initial display
   ========================================================= */

#question6296 .has-error,
#question6296 .is-invalid {
    box-shadow: none !important;
}

/* Keep normal input appearance */
#question6296 input[type="text"] {
    border-color: #ccc !important;
    box-shadow: none !important;
}

/* B.2.1 - Normal black text while typing */
#question6296 input[type="text"],
#question6296 textarea {
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: 400 !important;
}

/* Placeholder also normal grey */
#question6296 input[type="text"]::placeholder,
#question6296 textarea::placeholder {
    color: #777777 !important;
}

/* Prevent orange text while focused */
#question6296 input[type="text"]:focus,
#question6296 textarea:focus {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Prevent Fruity validation/focus from changing typed text */
#question6296 .form-control {
    color: #000000 !important;
}

/* =========================================================
   STANDARDIZE ALL FORM FIELDS TO MATCH B.3.1
   ========================================================= */

/* ---------------------------------------------------------
   1. ALL TEXT / SEARCH / AUTOCOMPLETE INPUTS
   --------------------------------------------------------- */

.fruity .question-container .answer-container input[type="text"],
.fruity .question-container .answer-container input[type="email"],
.fruity .question-container .answer-container input[type="number"],
.fruity .question-container .answer-container input[type="tel"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   2. AUTOCOMPLETE / SEARCH FIELD WRAPPERS
   --------------------------------------------------------- */

.fruity .question-container .answer-container .position-search,
.fruity .question-container .answer-container .position-search-container,
.fruity .question-container .answer-container .col-auto {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}


/* ---------------------------------------------------------
   3. AUTOCOMPLETE FORM CONTROLS
   --------------------------------------------------------- */

.fruity .question-container .answer-container .position-search input,
.fruity .question-container .answer-container .position-search .form-control,
.fruity .question-container .answer-container .form-control {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   4. DROPDOWNS
   --------------------------------------------------------- */

.fruity .question-container .answer-container select,
.fruity .question-container .answer-container select.form-control,
.fruity .question-container .answer-container select.form-select {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* Dropdown parent */
.fruity .question-container .answer-container select.form-control,
.fruity .question-container .answer-container select.form-select {
    flex: 1 1 auto !important;
}


/* ---------------------------------------------------------
   5. TEXTAREAS
   --------------------------------------------------------- */

.fruity .question-container .answer-container textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   6. ANSWER AREA
   --------------------------------------------------------- */

.fruity .question-container .answer-container {
    width: 100% !important;
    max-width: none !important;
}


/* ---------------------------------------------------------
   7. ANSWER ITEMS
   --------------------------------------------------------- */

.fruity .question-container .answer-item {
    width: 100% !important;
    max-width: none !important;
}


/* ---------------------------------------------------------
   8. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .fruity .question-container .answer-container input[type="text"],
    .fruity .question-container .answer-container input[type="email"],
    .fruity .question-container .answer-container input[type="number"],
    .fruity .question-container .answer-container input[type="tel"],
    .fruity .question-container .answer-container textarea,
    .fruity .question-container .answer-container select,
    .fruity .question-container .answer-container .position-search {
        width: 100% !important;
        max-width: none !important;
    }
}

/* =========================================================
   JUDICIARY JOB ANALYSIS — MOBILE DESIGN SYSTEM
   (matches attached Section A mockup)
   ========================================================= */

:root {
    --jd-green: #004d33;
    --jd-green-deep: #162f25;
    --jd-green-mid: #166534;
    --jd-green-soft: #e8f3ee;
    --jd-green-tint: #f3f8f5;
    --jd-gold: #c5a017;
    --jd-gold-deep: #685e04;
    --jd-text: #1f2933;
    --jd-muted: #6b7280;
    --jd-border: #d7dde3;
    --jd-card: #f4f6f8;
    --jd-white: #ffffff;
    --jd-radius: 12px;
    --jd-radius-sm: 10px;
}

/* Page background */
body,
body .fruity,
#outerframeContainer,
#main-content,
.main-content {
    background-color: #eef2f0 !important;
}

/*
 * Hide LimeSurvey's default layout until the Judiciary design
 * JS has wrapped the page. Stops the old theme flashing on Next.
 */
body:not(.jd-design-ready) #outerframeContainer,
body:not(.jd-design-ready) #main-content,
body.jd-page-switching #outerframeContainer,
body.jd-page-switching #main-content,
body.jd-page-switching form#limesurvey {
    opacity: 0 !important;
}

body.jd-page-switching,
html.jd-page-switching {
    cursor: wait;
}

body.jd-page-switching::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 56px;
    bottom: 0;
    background: #eef2f0;
    z-index: 10050;
    pointer-events: none;
}

/*
 * Tighten space under the dark green header (the large gap
 * above the progress bar).
 */
body.jd-design-ready #outerframeContainer,
body.jd-design-ready #main-content,
body.jd-design-ready .main-content,
body.jd-design-ready #content,
body.jd-design-ready .container,
body.jd-design-ready .top-container,
body.jd-design-ready .survey-header,
body.jd-design-ready .jumbotron,
body.jd-design-ready .welcome,
body.jd-design-ready #welcome-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.jd-design-ready .navbar,
body.jd-design-ready #survey-nav {
    margin-bottom: 0 !important;
}

/*
 * Tighten space ABOVE the dark green header (gap at the very
 * top of the page before the Judiciary nav bar).
 */
html,
body,
body.jd-design-ready,
body.jd-design-ready.fruity {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.jd-design-ready .navbar,
body.jd-design-ready nav.navbar,
body.jd-design-ready #survey-nav,
body.jd-design-ready .navbar-fixed-top,
body.jd-design-ready .navbar-static-top,
body.jd-design-ready header,
body.jd-design-ready .top-bar,
body.jd-design-ready #top-bar,
body.jd-design-ready .brand-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

body.jd-design-ready #vue-apps-main-container,
body.jd-design-ready #beginScripts,
body.jd-design-ready .public-page,
body.jd-design-ready .wrapper,
body.jd-design-ready #wrapper,
body.jd-design-ready .site-header,
body.jd-design-ready .ls-topbar,
body.jd-design-ready .top-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Collapse empty spacer strips above the nav */
body.jd-design-ready body > div:empty,
body.jd-design-ready #outerframeContainer > div:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.jd-design-ready .survey-name,
body.jd-design-ready #surveynametext,
body.jd-design-ready h1.survey-name,
body.jd-design-ready .survey-header,
body.jd-design-ready .jumbotron,
body.jd-design-ready .aTitle,
body.jd-design-ready .survey-description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* If survey title area is empty/hidden, collapse leftover space */
body.jd-design-ready .survey-header:empty,
body.jd-design-ready .jumbotron:empty {
    display: none !important;
}

/* ---------------------------------------------------------
   HEADER — dark green + gold swoosh
   --------------------------------------------------------- */

.fruity .navbar,
.fruity nav.navbar,
.fruity #survey-nav,
#survey-nav {
    background-color: var(--jd-green-deep) !important;
    border-bottom: 3px solid var(--jd-gold-deep) !important;
    position: relative !important;
    overflow: hidden !important;
}

.fruity .navbar::after,
#survey-nav::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -28px;
    width: 180px;
    height: 90px;
    background: radial-gradient(ellipse at center, var(--jd-gold) 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}

/* ---------------------------------------------------------
   PROGRESS BAR (injected by custom.js)
   --------------------------------------------------------- */

.jd-progress-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--jd-white);
    border-radius: var(--jd-radius);
    padding: 12px 14px;
    margin: 4px 12px 8px;
    box-shadow: 0 2px 8px rgba(22, 47, 37, 0.08);
}

.jd-progress-meta {
    min-width: 110px;
}

.jd-progress-meta .jd-progress-section {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--jd-text);
    line-height: 1.2;
}

.jd-progress-meta .jd-progress-name {
    display: block;
    font-size: 12px;
    color: var(--jd-muted);
    margin-top: 2px;
}

.jd-progress-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.jd-progress-fill {
    height: 100%;
    background: var(--jd-green);
    border-radius: 999px;
    width: 0%;
    transition: width 0.35s ease;
}

.jd-progress-pct {
    min-width: 72px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--jd-green);
    white-space: nowrap;
}

/* ---------------------------------------------------------
   INTRO + CONFIDENTIALITY CARDS (injected by custom.js)
   --------------------------------------------------------- */

.jd-intro-card,
.jd-confidential-card {
    margin: 0 12px 12px;
    border-radius: var(--jd-radius);
    padding: 16px;
}

.jd-intro-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--jd-green-soft);
}

.jd-intro-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jd-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.jd-intro-card h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--jd-green-deep);
}

.jd-intro-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--jd-muted);
}

.jd-confidential-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--jd-green-tint);
    border-left: 5px solid var(--jd-green);
}

.jd-confidential-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--jd-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.jd-confidential-card strong {
    display: block;
    color: var(--jd-green);
    font-size: 14px;
    margin-bottom: 4px;
}

.jd-confidential-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #4b5563;
}

/*
 * Cover description under the survey title — keep it readable
 * and centred so the long sentence fits on mobile/desktop.
 */
body.jd-design-ready .survey-description,
body.jd-design-ready .welcome .survey-description,
body.jd-design-ready #welcome-container .survey-description,
body.jd-design-ready .welcome p,
body.jd-design-ready .jumbotron p {
    max-width: 36rem !important;
    width: 100% !important;
    margin: 8px auto 16px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: center !important;
    color: var(--jd-green) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

body.jd-design-ready .survey-name,
body.jd-design-ready #surveynametext,
body.jd-design-ready h1.survey-name,
body.jd-design-ready .aTitle {
    text-align: center !important;
    padding: 0 16px !important;
    max-width: 100% !important;
}

/* ---------------------------------------------------------
   COVER / LANDING PAGE LAYOUT
   Logos → Title + description → Please provide…
   --------------------------------------------------------- */

body.jd-cover-page .jd-intro-card {
    display: none !important;
}

body.jd-cover-page #jd-cover-logos,
body.jd-cover-page .jd-cover-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px 28px !important;
    margin: 16px auto 8px !important;
    padding: 12px 16px !important;
    max-width: 100% !important;
    text-align: center !important;
}

body.jd-cover-page #jd-cover-logos img,
body.jd-cover-page .jd-cover-logos img {
    max-height: 120px !important;
    width: auto !important;
    max-width: 46% !important;
    height: auto !important;
    margin: 0 !important;
}

body.jd-cover-page .survey-name,
body.jd-cover-page #surveynametext,
body.jd-cover-page h1.survey-name,
body.jd-cover-page .aTitle {
    order: 2;
    margin: 8px auto 6px !important;
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.25 !important;
    color: var(--jd-green-deep) !important;
}

body.jd-cover-page .survey-description,
body.jd-cover-page .jd-cover-please {
    text-align: center !important;
}

.jd-cover-please {
    margin: 4px auto 16px !important;
    padding: 0 16px !important;
    max-width: 36rem !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--jd-muted) !important;
    text-align: center !important;
}

body.jd-cover-page #jd-confidential-card {
    margin-top: 4px !important;
}

/* ---------------------------------------------------------
   FORM CARD WRAPPER
   --------------------------------------------------------- */

.jd-form-card {
    margin: 0 12px 20px;
    background: var(--jd-card);
    border-radius: var(--jd-radius);
    padding: 16px 14px 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.jd-form-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--jd-green-deep);
}

.jd-form-card-title .jd-doc-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--jd-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/*
 * Hide LimeSurvey language changer (“default” chip).
 * Theme wrappers: form-change-lang / lang select / changelang button.
 * Do NOT use bare .btn-default (that would hide Previous).
 */
#outerframeContainer .form-change-lang,
form#limesurvey .form-change-lang,
.form-change-lang,
.navbar .form-change-lang,
.navbar-nav .form-change-lang,
li.form-change-lang,
#lang-select,
#langselect,
#language-changer-select,
#langs-container,
.language_change_container,
select[name="lang"],
button[value="changelang"],
button.ls-language-changer-item,
.ls-language-changer-item {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}

body.jd-design-ready .group-title,
body.jd-design-ready .group-name,
body.jd-design-ready .question-group-title {
    display: none !important;
}

/*
 * Hide native LimeSurvey group description — it duplicates the
 * "Your information is confidential" card (the gray rounded
 * box under the green confidentiality card).
 */
body.jd-design-ready .group-description,
body.jd-design-ready .group-desc,
body.jd-design-ready .ls-group-description,
body.jd-design-ready .group-title-description,
body.jd-design-ready #group-description,
body.jd-design-ready .question-group-description,
body.jd-design-ready .top-container .alert:not(.jd-confidential-card),
body.jd-design-ready .group-container > .well,
body.jd-design-ready .group-container > .alert-info {
    display: none !important;
}

/* ---------------------------------------------------------
   QUESTION LABELS + HELP
   --------------------------------------------------------- */

body.jd-design-ready .question-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

body.jd-design-ready .question-title,
body.jd-design-ready .ls-label-question,
body.jd-design-ready .question-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--jd-green-deep) !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
}

body.jd-design-ready .question-help,
body.jd-design-ready .ls-questionhelp,
body.jd-design-ready .help-block {
    font-size: 12.5px !important;
    color: var(--jd-muted) !important;
    margin: 0 0 8px !important;
}

body.jd-design-ready .asterisk,
body.jd-design-ready .mandatory .asterisk {
    color: #dc2626 !important;
}

/* ---------------------------------------------------------
   INPUTS — rounded, icon prefix
   --------------------------------------------------------- */

body.jd-design-ready .answer-container input[type="text"],
body.jd-design-ready .answer-container input[type="email"],
body.jd-design-ready .answer-container input[type="number"],
body.jd-design-ready .answer-container input[type="tel"],
body.jd-design-ready .answer-container textarea,
body.jd-design-ready .answer-container select,
body.jd-design-ready .custom-searchable-dropdown-input {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    border: 1px solid var(--jd-border) !important;
    border-radius: var(--jd-radius-sm) !important;
    background: var(--jd-white) !important;
    color: var(--jd-text) !important;
    font-size: 15px !important;
    padding: 12px 14px 12px 44px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.jd-design-ready .custom-searchable-dropdown-wrapper,
body.jd-design-ready .jd-input-wrap,
body.jd-design-ready .answer-container {
    width: 100% !important;
    max-width: 100% !important;
    /* visible: overflow:hidden was clipping A.7 text to one letter (e.g. "S" of Supreme Court) and the dropdown list */
    overflow: visible !important;
    box-sizing: border-box !important;
}

body.jd-design-ready .custom-searchable-dropdown-input {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

body.jd-design-ready .answer-container select {
    padding-right: 36px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23004d33' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}

body.jd-design-ready .answer-container input:focus,
body.jd-design-ready .answer-container textarea:focus,
body.jd-design-ready .answer-container select:focus,
body.jd-design-ready .custom-searchable-dropdown-input:focus {
    border-color: var(--jd-green-mid) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 77, 51, 0.12) !important;
}

body.jd-design-ready .jd-api-filled input[type="text"],
body.jd-design-ready .jd-api-filled input[type="search"],
body.jd-design-ready .jd-api-filled textarea,
body.jd-design-ready .jd-api-filled select,
body.jd-design-ready .jd-api-filled .custom-searchable-dropdown-input,
body.jd-design-ready .jd-api-filled .select2-selection {
    background: #eef1f4 !important;
    background-color: #eef1f4 !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
    cursor: default !important;
    box-shadow: none !important;
    pointer-events: none !important;
    caret-color: transparent !important;
}

body.jd-design-ready .jd-api-filled .custom-searchable-dropdown-results {
    display: none !important;
}

body.jd-design-ready .jd-api-filled .jd-field-icon {
    color: #9ca3af !important;
}

body.jd-design-ready .jd-api-filled .em_mandatory,
body.jd-design-ready .jd-api-filled .ls-em-tip.em_mandatory,
body.jd-design-ready .jd-api-filled .jd-mandatory-ok,
body.jd-design-ready .jd-api-filled .jd-mandatory-ok * {
    color: #6b7280 !important;
}

/* Icon wrapper injected by JS */
.jd-input-wrap {
    position: relative;
    width: 100%;
}

.jd-input-wrap .jd-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--jd-green);
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
}

.jd-input-wrap .jd-field-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Searchable dropdown results stay above cards */
body.jd-design-ready .custom-searchable-dropdown-results {
    border-radius: 0 0 var(--jd-radius-sm) var(--jd-radius-sm) !important;
    border-color: var(--jd-border) !important;
}

/* ---------------------------------------------------------
   YES / NO — green / red split (all yes-no questions)
   --------------------------------------------------------- */

body.jd-design-ready .yes-no .btn-group,
body.jd-design-ready .yesno-button.btn-group {
    display: flex !important;
    gap: 14px !important;
    background: transparent !important;
    width: 100% !important;
}

body.jd-design-ready .yes-no .btn-group > label,
body.jd-design-ready .yesno-button.btn-group > label {
    flex: 1 1 0 !important;
    border-radius: var(--jd-radius-sm) !important;
    min-height: 72px !important;
    margin: 0 !important;
}

body.jd-design-ready .jd-hide-noanswer,
body.jd-design-ready .yes-no .btn-group > label.jd-hide-noanswer,
body.jd-design-ready .yesno-button.btn-group > label.jd-hide-noanswer {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

body.jd-design-ready table th.jd-hide-noanswer,
body.jd-design-ready table td.jd-hide-noanswer {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#jd-already-submitted-card {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    margin: 16px auto 24px !important;
    max-width: 720px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.08) !important;
}

#jd-already-submitted-card .jd-already-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #991b1b !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 14px !important;
}

#jd-already-submitted-card .jd-already-icon svg {
    width: 32px !important;
    height: 32px !important;
}

#jd-already-submitted-card h2 {
    color: #7f1d1d !important;
    font-size: 24px !important;
    margin: 0 0 8px !important;
    font-weight: 700 !important;
}

#jd-already-submitted-card p {
    color: #991b1b !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

body.jd-already-submitted #ls-button-submit,
body.jd-already-submitted button[value="movenext"],
body.jd-already-submitted button[value="movesubmit"],
body.jd-already-submitted .navigator button.btn-primary {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

body.jd-design-ready.jd-save-resume-page .navigator,
body.jd-design-ready.jd-save-resume-page .nav-buttons,
body.jd-design-ready.jd-save-resume-page #navigator-container,
body.jd-design-ready.jd-save-resume-page #ls-button-submit,
body.jd-design-ready.jd-save-resume-page #ls-button-previous {
    display: none !important;
}

body.jd-design-ready.jd-cover-page .navigator,
body.jd-design-ready.jd-cover-page .nav-buttons,
body.jd-design-ready.jd-cover-page #navigator-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.jd-design-ready.jd-cover-page #ls-button-submit,
body.jd-design-ready.jd-cover-page button[value="movenext"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.jd-design-ready.jd-save-resume-page #jd-form-card input[type="text"],
body.jd-design-ready.jd-save-resume-page #jd-form-card input[type="password"],
body.jd-design-ready.jd-save-resume-page #jd-form-card input[type="email"] {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: #fff !important;
    font-size: 16px !important;
    margin: 0 0 14px !important;
}

body.jd-save-resume-page .jd-save-now-btn {
    background: #166534 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
}

body.jd-save-resume-page .jd-return-survey {
    color: #166534 !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------
   NAVIGATOR — always visible: Previous left, Next right
   --------------------------------------------------------- */

body.jd-design-ready .navigator,
body.jd-design-ready .nav-buttons,
body.jd-design-ready #navigator-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    padding: 12px !important;
    margin: 0 !important;
    background: #eef2f0 !important;
    border: none !important;
    border-top: 1px solid var(--jd-border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    min-height: 64px !important;
}

/* Do not force navigator inner columns to break the button row */
body.jd-design-ready .navigator .row,
body.jd-design-ready .navigator [class*="col-"] {
    display: contents !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.jd-design-ready .navigator .button,
body.jd-design-ready .navigator button,
body.jd-design-ready #ls-button-previous,
body.jd-design-ready #ls-button-submit,
body.jd-design-ready .navigator .btn-primary,
body.jd-design-ready .navigator .btn-default {
    min-height: 48px !important;
    border-radius: var(--jd-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 18px !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
}

/*
 * LimeSurvey hidden internal submit (id=defaultbtn, value=default).
 * Theme marks it d-none; our nav button styles were overriding that.
 */
body.jd-design-ready #defaultbtn,
#defaultbtn.submit.d-none {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Previous — left */
body.jd-design-ready #ls-button-previous,
body.jd-design-ready .navigator .btn-default,
body.jd-design-ready button[value="moveprev"],
body.jd-design-ready button[name="move"][value="moveprev"] {
    background: var(--jd-white) !important;
    border: 1px solid var(--jd-border) !important;
    color: #4b5563 !important;
    order: 1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
}

/* Next / Save & Continue — right */
body.jd-design-ready #ls-button-submit,
body.jd-design-ready .navigator .btn-primary,
body.jd-design-ready button[name="move"][value="movenext"],
body.jd-design-ready button[value="movenext"] {
    background: var(--jd-green) !important;
    border: 1px solid var(--jd-green) !important;
    color: #fff !important;
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    right: auto !important;
    left: auto !important;
}

body.jd-design-ready #ls-button-submit:hover,
body.jd-design-ready .navigator .btn-primary:hover,
body.jd-design-ready button[name="move"][value="movenext"]:hover {
    background: var(--jd-green-mid) !important;
}

/* Space so sticky nav does not cover last content */
body.jd-design-ready form#limesurvey,
body.jd-design-ready #main-content,
body.jd-design-ready .main-content {
    padding-bottom: 88px !important;
}

/* =========================================================
   Hide LimeSurvey NATIVE progress bar — keep only jd-progress-card
   ========================================================= */

.top-container,
.top-content,
#top-container,
div.top-container.space-col,
.fruity .top-container,
.fruity .top-content {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

body .progress:not(.jd-progress-track):not(.jd-progress-card),
body .progress-bar:not(.jd-progress-fill),
body #progress-wrapper,
body .progress-wrapper,
body .completed-wrapper,
body .ls-progress,
body .survey-progress {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* Desktop: keep the same language, slightly wider cards */
@media (min-width: 768px) {
    .jd-progress-card,
    .jd-intro-card,
    .jd-confidential-card,
    .jd-form-card {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    body.jd-design-ready .navigator,
    body.jd-design-ready .nav-buttons,
    body.jd-design-ready #jd-nav-bar {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
   MOBILE FULL-WIDTH FIX
   Content was collapsing to a narrow left column on phones.
   ========================================================= */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

@media (max-width: 767px) {

    body.jd-design-ready #outerframeContainer,
    body.jd-design-ready #main-content,
    body.jd-design-ready .main-content,
    body.jd-design-ready #content,
    body.jd-design-ready .container,
    body.jd-design-ready .container-fluid,
    body.jd-design-ready form#limesurvey,
    body.jd-design-ready form,
    body.jd-design-ready .row,
    body.jd-design-ready .top-container,
    body.jd-design-ready .public-page,
    body.jd-design-ready #wrapper,
    body.jd-design-ready .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
    }

    body.jd-design-ready .container,
    body.jd-design-ready .container-fluid,
    body.jd-design-ready #main-content,
    body.jd-design-ready #content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Force Bootstrap columns full width on phones (not navigator) */
    body.jd-design-ready .row > [class*="col-xs-"],
    body.jd-design-ready .row > [class*="col-sm-"],
    body.jd-design-ready .row > [class*="col-md-"],
    body.jd-design-ready .row > [class*="col-lg-"],
    body.jd-design-ready .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.jd-design-ready .navigator .row > [class*="col-"],
    body.jd-design-ready .nav-buttons .row > [class*="col-"],
    body.jd-design-ready #navigator-container [class*="col-"] {
        display: contents !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .jd-progress-card,
    .jd-intro-card,
    .jd-confidential-card,
    .jd-form-card {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        box-sizing: border-box !important;
    }

    body.jd-design-ready .navigator,
    body.jd-design-ready .nav-buttons,
    body.jd-design-ready #navigator-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Welcome / objective page text blocks */
    body.jd-design-ready .welcome,
    body.jd-design-ready .survey-description,
    body.jd-design-ready .group-description,
    body.jd-design-ready p,
    body.jd-design-ready img {
        max-width: 100% !important;
    }

    body.jd-design-ready img {
        height: auto !important;
    }
}

#jd-restored-draft-card {
    background: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin: 12px auto 18px !important;
    max-width: 720px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #14532d !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

#jd-restored-draft-card strong {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 16px !important;
    text-align: center !important;
}