/* Applicant screens only. Keep legacy field geometry, visibility and print layout. */
@media screen {
    .application-flow {
        --app-blue: #004986;
        --app-ink: #24364b;
        --app-muted: #687789;
        --app-line: #dce3eb;
    }
    .application-flow #wrap .attention,
    .application-flow #wrap .attention2,
    .application-flow #wrap section.writeResume h1.h1 {
        padding-left: 0;
        color: var(--app-ink);
        font-size: 22px;
        line-height: 1.5;
        margin-bottom: 22px;
        font-weight: 600;
    }
    .application-flow #wrap .recruitNoticeTitle {
        color: var(--app-ink);
        font-size: 28px;
        line-height: 1.5;
        font-weight: 600;
        letter-spacing: -.6px;
    }
    .application-flow nav#tab {
        padding: 6px;
        margin: 28px 0 36px;
        border: 1px solid var(--app-line);
        border-radius: 10px;
        background: #f4f7fa;
    }
    .application-flow nav#tab > div > button {
        height: 54px;
        line-height: 52px;
        padding: 0 16px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 7px;
        color: var(--app-muted);
        font-weight: 500;
    }
    .application-flow nav#tab > div > button[onclick] { cursor: pointer; }
    .application-flow nav#tab > div > button[onclick]:hover { background: #e7eef5; color: var(--app-blue); }
    .application-flow nav#tab > div.active > button {
        background: var(--app-blue);
        border-color: var(--app-blue);
        color: #fff;
        box-shadow: 0 2px 6px rgba(0, 73, 134, .12);
    }
    .application-flow nav#tab > div.active > button::after { content: none; }
    .application-flow #wrap .div-info,
    .application-flow #wrap .div-info2,
    .application-flow #wrap .div-info3,
    .application-flow #wrap .div-info4 {
        background: #fff;
        border: 1px solid var(--app-line);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(32, 52, 75, .04);
    }
    .application-flow #wrap .div-info p,
    .application-flow #wrap .div-info2 p,
    .application-flow #wrap .div-info3 p { color: var(--app-muted); }
    .application-flow #wrap section.writeResume > .subject,
    .application-flow #wrap section.writeResume > .wrapCollege > .wrapSubject > .subject { border-bottom-color: #edf0f4; }
    .application-flow #wrap section.writeResume label.h2,
    .application-flow #wrap section.writeResume h2.h2 { color: #35465a; font-weight: 500; }
    .application-flow #wrap input.text,
    .application-flow #wrap label.select > select,
    .application-flow #wrap textarea.textarea,
    .application-flow .modal-body input.text {
        border: 1px solid #cdd6e0;
        border-radius: 6px;
        background-color: #fff;
        color: var(--app-ink);
        transition: border-color .15s, box-shadow .15s;
    }
    .application-flow #wrap input.text::placeholder,
    .application-flow #wrap textarea.textarea::placeholder { color: #8591a0; }
    .application-flow #wrap label.select::after {
        content: "";
        top: 14px;
        right: 12px;
        bottom: auto;
        width: 7px;
        height: 7px;
        padding: 0;
        border-right: 1.5px solid #687789;
        border-bottom: 1.5px solid #687789;
        border-radius: 0;
        transform: rotate(45deg);
        pointer-events: none;
    }
    .application-flow #wrap input.text:focus,
    .application-flow #wrap label.select > select:focus,
    .application-flow #wrap textarea.textarea:focus,
    .application-flow .modal-body input.text:focus {
        border-color: var(--app-blue);
        outline: 2px solid transparent;
        box-shadow: 0 0 0 3px rgba(0, 73, 134, .12);
    }
    .application-flow #wrap input.text[readonly] { background-color: #f2f6fa; color: #52657a; }
    .application-flow #wrap input.text:disabled,
    .application-flow #wrap label.select > select:disabled {
        background-color: #f3f5f8;
        border-color: #e0e5eb;
        color: #788595;
    }
    .application-flow #wrap textarea.textarea { padding: 14px 16px; line-height: 1.8; resize: vertical; }
    .application-flow #wrap .wrapGuide { color: var(--app-muted); line-height: 1.8; }
    .application-flow #wrap .limitLength { color: var(--app-muted); font-size: 13px; }
    .application-flow #wrap .limitLength b { color: var(--app-blue); }
    .application-flow #wrap .title > .title { color: var(--app-ink); font-weight: 500; }
    .application-flow #wrap .div-info-additional {
        padding: 14px 18px;
        background: #f4f7fa;
        border-radius: 8px;
        color: #35465a;
    }
    .application-flow #wrap .self-introduction-item + .self-introduction-item {
        margin-top: 28px;
    }
    .application-flow #wrap .self-introduction-item + .self-introduction-item::before {
        content: "";
        display: block;
        margin-left: 10px;
        margin-bottom: 8px;
        border-top: 1px solid var(--app-line);
    }
    .application-flow #wrap .div-info-additional label { line-height: 1.8; }
    .application-flow #wrap input[type="radio"],
    .application-flow #wrap input[type="checkbox"] { accent-color: var(--app-blue); }
    /* Colors need !important to override the existing recruit.css button rules. */
    .application-flow #wrap .btn,
    .application-flow .appsite-modal .btn {
        border-radius: 6px;
        background: var(--app-blue) !important;
        color: #fff;
        border: 1px solid var(--app-blue);
        font-weight: 500;
    }
    .application-flow #wrap .btn:hover,
    .application-flow .appsite-modal .btn:hover { background: #003b6d !important; color: #fff; }
    .application-flow #wrap .btn.btn-ng,
    .application-flow #wrap .btn.btnPreStep,
    .application-flow .appsite-modal .btn.btn-ng {
        background: #f1f5f9 !important;
        color: #354f69;
        border: 1px solid #cdd9e5 !important;
    }
    .application-flow #wrap .btn.btn-ng:hover,
    .application-flow #wrap .btn.btnPreStep:hover,
    .application-flow .appsite-modal .btn.btn-ng:hover { background: #e4edf5 !important; color: var(--app-blue); }
    .application-flow #wrap .btn:disabled { opacity: .5; cursor: not-allowed; }
    .application-flow #wrap .btn-big { border-radius: 8px; }
    .application-flow #wrap button:focus-visible,
    .application-flow #wrap a:focus-visible,
    .application-flow .appsite-modal button:focus-visible { outline: 3px solid #699dc8; outline-offset: 3px; }
    .application-flow #wrap table.no-hover { border-color: var(--app-line); }
    .application-flow #wrap table.no-hover th { background: #f2f6fa; color: #354f69; border-color: var(--app-line); }
    .application-flow #wrap table.no-hover td { border-color: #e7edf3; }
    .application-flow #wrap .step6 {
        padding: 64px 24px;
        margin-bottom: 40px;
        border: 1px solid var(--app-line);
        border-radius: 12px;
        background: #f6f9fc;
        color: var(--app-ink);
    }
    .application-flow .modal-content { border: 1px solid var(--app-line); border-radius: 12px; }
    .application-lookup #wrap .span.text:empty { display: none; }
    /* The lookup form must remain usable in its existing narrow popup window. */
    @media (max-width: 768px) {
        .application-lookup #wrap .form_agree { display: block; }
        .application-lookup #wrap { width: 100%; }
        .application-lookup .fh5co-hero-intro { left: 20px; right: 20px; width: auto; }
        .application-lookup .fh5co-hero-intro h2 { font-size: 28px; word-break: keep-all; }
        .application-lookup #wrap section.writeResume > .subject { padding: 16px 0; }
        .application-lookup #wrap section.writeResume label.h2 {
            position: static;
            display: block;
            width: auto;
            padding: 0;
            margin-bottom: 8px;
        }
        .application-lookup #wrap .span.per30,
        .application-lookup #wrap .span.per40 { width: calc(100% - 10px); }
        .application-lookup #wrap .span.mobile { width: calc(33.333% - 10px); }
        .application-lookup #wrap .in-span > .span:not([class*="per"]) { max-width: calc(100% - 10px); }
        .application-lookup #wrap input.text { max-width: 100%; }
        .application-lookup #wrap .authNum { margin-top: 8px; }
        .application-lookup #wrap .btn-set { white-space: normal; }
    }
    @media (prefers-reduced-motion: reduce) {
        .application-flow #wrap input.text,
        .application-flow #wrap label.select > select,
        .application-flow #wrap textarea.textarea { transition: none; }
    }
}