/* ==========================================================================
   GDCE candidate portal  -  the three bars across the top, and the page frame.

   Loaded last, after style.css and mystyle.css, so it supersedes the header
   and sidebar rules in those two files without editing them:

     mystyle.css  .top-head             a blueviolet bar, 110px logos
     style.css    .aside, .main_container

   The layout:
     .util-bar    blue strip - the notification details, and the live clock
     .top-head    white masthead - crest left, three emblems right
     .titlebar    grey strip - dashboard link, who is signed in, logout
     .content_container   one centred column; there is no sidebar any more

   Colours are written out literally rather than as custom properties: white
   text sits on the blue, and a browser without var() would drop the
   background and leave white on white.
     #16233c            the blue bar
     #e8703f            the site's maroon-coral, used only as an accent
     #eef1f5            the grey bar
   ========================================================================== */

/* ================================================== the blue notice bar === */
.util-bar {
    color: #ffffff;
    background-color: #16233c;
}

/* One row, and it stays one row: nothing wraps, and if the viewport is too
   narrow for the notification the bar clips it rather than stacking. Below
   992px the rules at the foot of this file let it wrap on purpose. */
.util-bar-in {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 30px;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* The notification slides. Two identical runs sit in the track and the
   animation shifts it by exactly half its width, so the second run is where
   the first was and the loop has no gap or jump. <marquee> is not used - it
   has been obsolete for years and cannot be paused or reduced. */
.util-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

.util-track {
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    animation: util-slide 34s linear infinite;
}

/* read it at your own pace */
.util-marquee:hover .util-track,
.util-marquee:focus-within .util-track {
    animation-play-state: paused;
}

@keyframes util-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .util-track {
        animation: none;
        transform: none;
    }
}

.util-notice {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 9px;
    padding-right: 34px;      /* the breath between one run and the next */
    font-size: 11px;
    line-height: 16px;
    color: #c3ccd9;
    white-space: nowrap;
}

.util-notice b {
    font-weight: 700;
    color: #ffffff;
}

.util-tag {
    flex: 0 0 auto;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #e8703f;
    border-radius: 3px;
}

.util-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, .22);
}

/* the clock */
.util-clock {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 2px 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: .3px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
}

.util-clock i {
    font-size: 12px;
    color: #e8703f;
}

/* tabular figures, so the line does not jitter as the seconds tick */
.util-clock b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================== the header = */
.top-head {
    padding: 10px 0;
    color: #1d2430;
    background-color: #ffffff;
    background-image: none;
    border-bottom: 1px solid #e3e7ec;
}

.top-head .row {
    align-items: center;
}

/* ---- crest + wordmark, on the left ---- */
.railwayblock {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logoblock {
    flex: 0 0 auto;
    line-height: 0;
}

.logoblock img {
    height: 48px;
    width: 48px;
    padding: 2px;
    background-color: #ffffff;
    border: 1px solid #dfe4ea;
    border-radius: 50%;
    object-fit: contain;
}

.logotextblock {
    min-width: 0;
    padding: 0 0 0 11px;
    border-left: 3px solid #e8703f;
}

.logotextblock h3 {
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: .6px;
    color: #14213d;
}

.logotextblock h4 {
    margin: 0;
    padding: 0;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .3px;
    color: #e8703f;
}

.logotextblock p {
    margin: 1px 0 0;
    padding: 0;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 14px;
    color: #6b7480;
}

/* ---- the three emblems, on the right ---- */
.rightlogoblock {
    display: flex;
    justify-content: flex-end;   /* was flex-start, so they hugged the middle */
    align-items: center;
    gap: 16px;
}

.rightlogoblock img {
    height: 40px;
    width: auto;
}

/* ================================================== the grey account bar == */
.titlebar {
    background-color: #eef1f5;
    border-bottom: 1px solid #dde3ea;
}

.titlebar-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.tb-home {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 16px;
    color: #1d2430;
    background-color: #ffffff;
    border: 1px solid #d6dde5;
    border-radius: 20px;
    text-decoration: none;
    transition: border-color .14s, color .14s;
}

.tb-home:hover,
.tb-home:focus {
    color: #14213d;
    border-color: #e8703f;
    text-decoration: none;
}

.tb-home img {
    height: 12px;
    width: auto;
    margin: 0;
    border: 0;
}

.tb-home i {
    font-size: 12px;
    color: #e8703f;
}

/* ---- who is signed in ---- */
.tb-user {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
}

.tb-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .2px;
    color: #14213d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-reg {
    font-size: 11px;
    line-height: 16px;
    color: #5b6675;
    white-space: nowrap;
}

.tb-reg b {
    font-weight: 700;
    color: #14213d;
    letter-spacing: .3px;
}

/* the pending / completed note, lifted out of the old sidebar. It carries
   inline styles from the original markup, hence the !important. */
.tb-status .error,
.tb-status p {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 3px 9px !important;
    font-size: 10.5px !important;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: .3px;
    white-space: nowrap;
    color: #a8410f;
    background-color: #ffeee6;
    border: 1px solid #f4c9b4;
    border-radius: 20px;
}

/* the completed variant sets color:green inline - match the pill to it */
.tb-status p[style*="green"] {
    color: #1c7a3e !important;
    background-color: #e9f7ee;
    border-color: #b6e0c4;
}

.tb-status i {
    font-size: 11px !important;
}

.tb-logout {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 4px 13px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .3px;
    color: #ffffff;
    background-color: #c0392b;
    border: 1px solid #a5301f;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color .14s;
}

.tb-logout:hover,
.tb-logout:focus {
    color: #ffffff;
    background-color: #a5301f;
    text-decoration: none;
}

.tb-logout i {
    font-size: 12px;
}

/* ================================================== the centred page frame =
   .aside is gone, so the body is a single column. .content_container was a
   full-bleed float wrapper; it is now the page's centred measure. */
.content_container {
    display: block;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 15px 0;
}

.content_container > section,
.content_container > .content_area {
    float: none;
    width: auto;
    margin: 0;
}

.main_container {
    margin: 0 auto 28px;
    background-color: #ffffff;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    overflow: hidden;
}

/* ------------------------------------------- the "read this first" card ---
   step-2 opens with a .sbox holding one bold sentence at 16px, centred, on
   the flat #efefef the site gives every .sbox. */
.col_form_container .sbox {
    margin: 0 0 14px;
    padding: 11px 14px;
    background-color: #fff8ef;
    border: 1px solid #f0d9c4;
    border-left: 3px solid #e8703f;
    border-radius: 6px;
}

.col_form_container .sbox .bot {
    margin: 0;
}

.col_form_container .sbox label {
    display: block;
    margin: 0;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.6;
    text-align: left !important;
    color: #7c3f1d;
}

.col_form_container .sbox label strong {
    font-weight: 600;
}

.col_form_container .sbox input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: -2px;
    cursor: pointer;
    accent-color: #e8703f;
}

/* ------------------------------------------------------------- narrow ---- */
@media (max-width: 991px) {
    .logotextblock h3 { font-size: 13.5px; line-height: 18px; }
    .logotextblock h4 { font-size: 11px; }
    .logotextblock p  { font-size: 10px; }
    .logoblock img    { height: 42px; width: 42px; }

    /* the notification no longer has to hold one line */
    .util-bar-in {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 12px;
        white-space: normal;
        overflow: visible;
    }

    .util-notice {
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .top-head {
        padding: 8px 0;
    }

    .railwayblock {
        gap: 10px;
    }

    .logoblock img {
        height: 38px;
        width: 38px;
    }

    .logotextblock {
        padding-left: 9px;
    }

    .logotextblock h3 {
        font-size: 12.5px;
        line-height: 16px;
        letter-spacing: .3px;
    }

    .logotextblock h4 {
        font-size: 10.5px;
        line-height: 14px;
    }

    .logotextblock p {
        font-size: 9.5px;
        line-height: 13px;
    }

    .util-notice {
        font-size: 10.5px;
    }

    .util-sep {
        display: none;
    }

    .titlebar-in {
        gap: 6px 10px;
    }

    .tb-user {
        flex: 1 1 100%;
        order: 3;
    }

    .content_container {
        padding: 10px 10px 0;
    }
}

/* ================================================== the section headings ==
   style.css/mystyle.css make .sub_heading_1 div a 350px maroon pill pulled up
   by margin:-57px over an <hr> with 40px margins - which is why a heading such
   as PERSONAL INFORMATION sat narrow, centred and overlapping the block above
   it. Here it is a full-width card header instead.                         */
.col_form_container .sub_heading_1 {
    clear: both;
    margin: 16px 0 0;
    overflow: visible;
}

.col_form_container .sub_heading_1:first-child {
    margin-top: 0;
}

.col_form_container .sub_heading_1 hr {
    display: none;
}

.col_form_container .sub_heading_1 div {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .6px;
    text-align: left;
    text-transform: uppercase;
    color: #14213d;
    background-color: #e0e6ed;
    border: 1px solid #dde3ea;
    border-left: 3px solid #e8703f;
    border-radius: 4px 4px 0 0;
}

/* The blocks of fields under a heading are the body of that card. A section
   holds several of them, so this cannot use the adjacent-sibling selector -
   that would style only the first and leave the rest on the site's default. */
.col_form_container .row.bg-warning-light {
    margin: 0;
    /* the last field pair inside contributes its own 9px, hence the short
       bottom value - the card still reads as evenly padded */
    padding: 11px 12px 3px;
    background-color: #ffffff !important;
    border: 1px solid #dde3ea;
    border-top: 0;
}

/* consecutive blocks read as one card, divided by their own top rule */
.col_form_container .row.bg-warning-light + .row.bg-warning-light {
    border-top: 1px solid #eef1f5;
}

/* ---- the page's own title strip, above the form ---- */
.col_title {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #16233c;      /* was blueviolet */
    border-radius: 0;
}

.col_title .alignC {
    text-align: left;
}

.col_form_container {
    padding: 14px;
}

/* ====================================================== the footer ========
   Three columns on the navy, each line an icon beside its value, over a
   darker copyright strip. What was here before was two half-width blocks of
   <br>-separated text with an inline font-size:24px heading, and the e-mail
   written rrcncr[at]ncr[dot]railnet[dot]gov[dot]in - address obfuscation
   against harvesting bots, which also stopped a candidate clicking it. It is
   a real mailto: now.

   Sticky: .conatiner-box wraps the whole page including <footer>, so making
   it a full-height column and pushing the footer down with margin-top:auto
   keeps the footer at the bottom of the viewport on a short page. Step-1
   opens with every section but the first question hidden, which is why the
   footer used to land halfway up that page.
   ========================================================================== */
.conatiner-box {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.conatiner-box > footer {
    margin-top: auto;
}

footer {
    clear: both;
}

.foot-main {
    padding: 22px 0 20px;
    color: #aab3bf;
    background-color: #16233c;
    border-top: 3px solid #e8703f;
}

.foot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 34px;
}

.foot-col {
    flex: 1 1 210px;
    min-width: 0;
}

.foot-brandcol {
    flex: 1 1 290px;
}

/* ---- the crest and the wordmark ---- */
.foot-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.foot-brand img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 2px;
    background-color: #ffffff;
    border-radius: 50%;
    object-fit: contain;
}

.foot-brand b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .3px;
    color: #ffffff;
}

.foot-brand span {
    display: block;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8b98ad;
}

.foot-addr {
    display: flex;
    gap: 8px;
    margin: 13px 0 0;
    padding: 0;
    font-size: 11.5px;
    line-height: 18px;
    color: #aab3bf;
}

/* ---- a column of contact lines ---- */
.foot-col h4 {
    margin: 0 0 11px;
    padding: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.foot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.foot-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    line-height: 18px;
    color: #aab3bf;
}

.foot-list li + li {
    margin-top: 7px;
}

/* one fixed icon column, so the values line up down the block */
.foot-addr > i,
.foot-list i {
    flex: 0 0 14px;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #e8703f;
}

.foot-list a,
.foot-addr a {
    color: #d8dde6;
    text-decoration: none;
    word-break: break-word;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.foot-list a:hover,
.foot-list a:focus {
    color: #ffffff;
    text-decoration: none;
    border-bottom-color: #e8703f;
}

/* ---- the copyright strip ---- */
.foot-bar {
    padding: 9px 0;
    background-color: #101a2e;
}

.foot-bar-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
}

.foot-bar p {
    margin: 0;
    font-size: 10.5px;
    line-height: 16px;
    color: #8b98ad;
}

.foot-ref {
    letter-spacing: .4px;
    color: #6f7d93 !important;
}

@media (max-width: 767px) {
    .foot-main {
        padding: 18px 0 16px;
    }

    .foot-grid {
        gap: 18px;
    }

    .foot-col,
    .foot-brandcol {
        flex: 1 1 100%;
    }

    .foot-bar-in {
        justify-content: center;
        text-align: center;
    }

    .col_form_container {
        padding: 10px;
    }
}

/* ================================================ the form field grid ======
   Every field on step-2 is a col-md-4 label beside a col-md-8 control, two
   pairs to a row. The label column carried .bot (margin-bottom:10px) on some
   fields and not others, the controls set their own heights, and .input_large
   / .input_medium still float - so labels sat above their control and no two
   rows lined up. One flex row per pair fixes all three.

   Scoped to .col_form_container, so it reaches step-2 and step-3 alike.     */
.col_form_container .row.bg-warning-light > [class*="col-md-"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* the label/control pair */
.col_form_container .row.bg-warning-light .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;      /* the label sits on the control's centre line */
    margin: 0 0 9px;
}

.col_form_container .row.bg-warning-light .row > [class*="col-md-"] {
    margin-bottom: 0;         /* overrides the .bot some label columns carry */
    padding-left: 0;
    padding-right: 0;
}

/* label column - a fixed gutter so every control starts at the same x */
.col_form_container .row.bg-warning-light .row > .col-md-4 {
    padding-right: 10px;
}

.col_form_container .row.bg-warning-light label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    color: #3a4350;
}

/* the asterisk is set to 16px / 18px inline */
.col_form_container .red-text {
    font-size: 12px !important;
    line-height: 1;
    color: #d0342c;
}

/* ---- the controls themselves ---- */
.col_form_container .form_input {
    float: none !important;   /* .input_large / .input_medium float left */
    display: block;
    width: 100% !important;
    height: 31px;
    margin: 0;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 21px;
    color: #2f3438;
    background-color: #ffffff;
    border: 1px solid #cfd4d8;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

.col_form_container .form_input:focus {
    border-color: #e8703f;
    box-shadow: 0 0 0 2px rgba(232, 112, 63, .18);
    outline: 0;
}

/* a disabled field should read as unavailable, not as empty */
.col_form_container .form_input_disb,
.col_form_container .form_input:disabled {
    color: #8b9198;
    background-color: #f2f4f5;
}

/* these two do not belong in a 31px box */
.col_form_container textarea.form_input {
    height: auto;
    min-height: 58px;
    line-height: 1.5;
}

.col_form_container input[type="file"].form_input,
.col_form_container input[type="file"] {
    height: auto;
    padding: 5px 8px;
    font-size: 11.5px;
    line-height: 1.4;
}

/* a stray note or hint under a control */
.col_form_container .row.bg-warning-light .row > .col-md-8 > small,
.col_form_container .row.bg-warning-light .row > .col-md-8 > span:not(.red-text) {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 15px;
    color: #7a8288;
}

@media (max-width: 767px) {
    .col_form_container .row.bg-warning-light .row {
        display: block;
        margin-bottom: 11px;
    }

    .col_form_container .row.bg-warning-light .row > .col-md-4 {
        padding-right: 0;
    }

    .col_form_container .row.bg-warning-light label {
        margin-bottom: 3px;
    }
}

/* ================================================ the address section ======
   Two columns of address fields side by side, and the "same as permanent"
   tick sits on the right of the section heading rather than inside the
   correspondence column, where it lined up with neither column.            */
.col_form_container .row.bg-warning-light > .col-md-6 + .col-md-6 {
    border-left: 1px solid #eef1f5;
}

/* the heading becomes a bar with the tick pushed to its far end */
.col_form_container .sub_heading_1 div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.addr-same {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 2px 10px 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: #7c3f1d;
    background-color: #ffffff;
    border: 1px solid #f0d9c4;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.addr-same:hover {
    border-color: #e8703f;
}

/* the control itself stays focusable but the square below is what is seen */
.addr-same input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.addr-same i {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border: 1px solid #c6a98f;
    border-radius: 3px;
    transition: background-color .12s, border-color .12s;
}

.addr-same input:checked + i {
    background-color: #e8703f;
    border-color: #d0561f;
}

.addr-same input:focus-visible + i {
    outline: 2px solid #e8703f;
    outline-offset: 2px;
}

.addr-same i::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(.4);
    opacity: 0;
    transition: opacity .12s, transform .12s;
}

.addr-same input:checked + i::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

@media (max-width: 767px) {
    .col_form_container .row.bg-warning-light > .col-md-6 + .col-md-6 {
        margin-top: 12px;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid #eef1f5;
    }

    .col_form_container .sub_heading_1 div {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ============================================ the qualification tables =====
   EDUCATIONAL QUALIFICATION DETAILS and TECHNICAL QUALIFICATION DETAILS were
   1990s table markup: cellpadding=5 cellspacing=5, bgcolor on every cell,
   valign="bottom" headers and width="0" everywhere, so no column had a size
   and nothing lined up. The attributes are gone from the markup; this gives
   the two tables one modern grid.                                           */
.qual-wrap {
    margin: 0;
    overflow-x: auto;
    background-color: #ffffff;
    border: 1px solid #dde3ea;
    border-top: 0;
}

.qual-wrap > .bg-warning-light {
    margin: 0;
    padding: 0;
    background-color: #ffffff !important;
    border: 0;
}

.qual-table {
    width: 100%;
    min-width: 900px;          /* below this the wrapper scrolls instead of squashing */
    margin: 0;
    border-collapse: collapse;   /* kills the old cellspacing gaps */
    background-color: #ffffff;
    font-size: 11.5px;
}

/* ---- header row ---- */
.qual-table th {
    padding: 7px 8px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: .2px;
    text-transform: uppercase;
    text-align: left;
    vertical-align: middle;      /* was valign="bottom" */
    color: #14213d;
    background-color: #ffffff;
    border: 1px solid #dde3ea;
    border-top: 0;
}

.qual-table th u {
    text-decoration: none;
    border-bottom: 1px solid #b9c2cd;
}

.qual-table th.nw {
    white-space: nowrap;
}

/* the "upto 100 Kb / PDF only" rule used to be the tail of the last <th>,
   which made one header cell three lines deep and set the column's width.
   It is a rule about the section, not about that cell, so it now sits at the
   right-hand end of the section heading - one italic line, and the header
   cell is just the column's name. */
.qual-table th:last-child {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 10.5px;
    line-height: 14px;
    color: #14213d;
}

/* ---- body ---- */
.qual-table td {
    padding: 6px 8px;
    vertical-align: middle;
    color: #2f3438;
    background-color: #ffffff;
    border: 1px solid #e8ecf1;
}

.qual-table tbody tr:nth-child(even) td {
    background-color: #fbfcfd;
}

.qual-table tbody tr:hover td {
    background-color: #fff8f4;
}

/* Exam Passed now carries the Yes/No answer too: a tick beside the name,
   with the original <select> hidden behind it. */
.qual-table td.c-exam {
    width: 268px;
    background-color: #f7f9fb;
}

.qual-table tbody tr:nth-child(even) td.c-exam {
    background-color: #f2f5f8;
}

.qual-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.qual-name {
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    color: #14213d;
    text-align: left;
}

/* the select still posts the answer and still fires the page's own handlers -
   it is only taken out of sight. Not display:none: a hidden-but-present
   control is what keeps validationEngine and .val() reads working. */
/* The table's control style skips .qual-hidden, so these two rules never
   compete over the width. */
.qual-cell select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ---- the tick ---- */
.qual-tick {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.qual-tick input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.qual-tick i {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
    background-color: #ffffff;
    border: 1px solid #aeb5ba;
    border-radius: 4px;
    transition: background-color .12s, border-color .12s;
}

.qual-tick:hover i {
    border-color: #e8703f;
}

.qual-tick input:checked + i {
    background-color: #e8703f;
    border-color: #d0561f;
}

.qual-tick input:focus-visible + i {
    outline: 2px solid #e8703f;
    outline-offset: 2px;
}

.qual-tick i::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(.4);
    opacity: 0;
    transition: opacity .12s, transform .12s;
}

.qual-tick input:checked + i::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* matriculation is compulsory - ticked, and not up for debate */
.qual-tick.is-fixed {
    cursor: default;
}

.qual-tick.is-fixed i {
    background-color: #9aa1a7;
    border-color: #868d93;
}

/* every control in the grid is the same height and fills its cell */
.qual-table .form_input:not(.qual-hidden) {
    width: 100% !important;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 3px 7px;
    font-size: 11.5px;
    line-height: 20px;
}

.qual-table select.form_input {
    padding-right: 3px;
}

.qual-table input[readonly] {
    color: #5b6675;
    background-color: #f2f4f5;
}

/* The narrow numeric columns of the GENERAL table only - counted from the
   left, because the technical table has five columns and counting from the
   right there landed these widths on its Exam Passed column. */
.qual-general th:nth-child(5), .qual-general td:nth-child(5),
.qual-general th:nth-child(6), .qual-general td:nth-child(6),
.qual-general th:nth-child(7), .qual-general td:nth-child(7) {
    width: 88px;
}

.qual-table th:last-child,
.qual-table td:last-child {
    width: 250px;
}

/* ==================================================== the upload control ==
   The file box and, once something is stored, a green tick beside it that
   opens the file. The tick used to be a block note UNDER the box, which made
   an already-answered row two lines taller than an empty one and pushed the
   table's rows out of step with each other. One row now.                   */
.float-container {
    display: block;
    margin: 0;
    overflow: visible;
}

.float-childL {
    display: flex;
    align-items: center;
    gap: 6px;
    float: none !important;
    width: auto !important;
    min-width: 0;
}

.float-childR {
    float: none !important;
    width: auto !important;
}

.float-childR:empty {
    display: none;
}

/* the box takes the room the tick does not */
.float-childL input[type="file"] {
    flex: 1 1 auto;
    min-width: 0;
}

input[type="file"].form_input {
    width: 100% !important;
    height: auto !important;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.4;
    color: #3a4350;
    background-color: #f8fafb;
    border: 1px dashed #c3ccd6 !important;
    border-radius: 4px;
    cursor: pointer;
}

input[type="file"].form_input:hover {
    border-color: #e8703f !important;
    background-color: #fff8f4;
}

input[type="file"].form_input::-webkit-file-upload-button {
    margin: 0 8px 0 0;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    background-color: #5b6675;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

input[type="file"].form_input:hover::-webkit-file-upload-button {
    background-color: #e8703f;
}

/* ---- the cell once a document is on record ----
   Tick, the name the candidate uploaded it under, and Replace - one row. The
   file input itself is hidden while this block is present (site-ui.js pairs
   them) and Replace is what brings the picker back.                        */
.gdce-file {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 4px 3px 6px;
    background-color: #eef9f2;
    border: 1px solid #bfe3ce;
    border-radius: 5px;
}

/* the tick and the name together are the link */
.gdce-file-open {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
    color: #16713b;
}

.gdce-file-open:hover,
.gdce-file-open:focus {
    color: #0f5a2d;
    text-decoration: none;
}

.gdce-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
}

.gdce-file-open:hover .gdce-file-name {
    border-bottom-color: #16713b;
}

/* ---- the tick ----
   Drawn, not set in a font. The icon-ok glyph carries its own side bearings
   and sits on a baseline, so inside a 15px disc it always looked a shade high
   and to the left however the box was centred. Two borders rotated 45deg have
   no metrics of their own: the mark is where the numbers below put it.
   The 1px nudge is the optical centre - a tick's mass sits low-left of its
   bounding box, so a geometrically centred one reads as too high.          */
.gdce-tick {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 15px;
    height: 15px;
    background-color: #1c7a3e;
    border-radius: 50%;
}

.gdce-tick::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 7px;
    margin: -1px 0 0 0;
    border: solid #ffffff;
    border-width: 0 1.6px 1.6px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- Replace / Undo ---- */
.gdce-file-swap {
    flex: 0 0 auto;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #3a4350;
    background-color: #ffffff;
    border: 1px solid #cfd6df;
    border-radius: 3px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.gdce-file-swap:hover,
.gdce-file-swap:focus {
    color: #b93f1a;
    border-color: #e8703f;
    outline: 0;
}

/* ---- a file chosen but not yet saved ----
   Amber, and the name is no longer a link: the new file is not on the server
   until the form is posted, so opening it would show the OLD document.     */
.gdce-file.is-pending {
    background-color: #fff8ef;
    border-color: #f0d9c4;
}

.gdce-file.is-pending .gdce-file-open {
    color: #8a4a20;
    pointer-events: none;
}

.gdce-file.is-pending .gdce-tick {
    background-color: #e8703f;
}

/* an upward arrow in place of the tick - this one is going up, not done */
.gdce-file.is-pending .gdce-tick::after {
    width: 5px;
    height: 5px;
    margin: 1px 0 0 0;
    border-width: 1.6px 0 0 1.6px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.gdce-file.is-pending .gdce-file-name::after {
    content: " \2013 will replace on Save";
    font-weight: 400;
    color: #9a5c33;
}

/* ---- the input the block stands in for ----
   The block is printed AFTER its input, so there is no previous-sibling
   selector to reach for. :has() hides it before any script runs, which keeps
   the raw box from flashing; site-ui.js then adds .gdce-tucked, which is what
   actually holds - including on a browser with no :has(), where the worst
   case is the plain box showing for a moment. */
input[type="file"]:has(+ .gdce-file),
input[type="file"].gdce-tucked {
    display: none;
}

/* In the qualification tables the column is 250px, so Replace loses its word
   and keeps its outline - the title on the link still says what it all is. */
.qual-table .gdce-file {
    padding: 2px 3px 2px 5px;
    gap: 4px;
}

.qual-table .gdce-file-name {
    font-size: 10px;
}

.qual-table .gdce-file.is-pending .gdce-file-name::after {
    content: " \2013 on Save";
}

/* the "PDF, 50-100 kb" note beside an upload row */
.field-help {
    margin: 0;
    font-size: 10.5px;
    font-style: italic;
    line-height: 15px;
    color: #6b7480;
    margin-top: 3px;
}

/* ========================================= UPLOAD PHOTO / SIGNATURE ========
   Photo, signature and thumb were three stacked blocks, each an outer table
   with the file input in a 60% cell and the preview in a 40% cell. The
   markup inside a block is untouched - the scripts that check the file size
   and swap the preview still hang off it - the tables are simply laid out as
   blocks so each card reads top to bottom: title, preview, control.        */
.upl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.upl-card {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    min-width: 0;
    background-color: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    overflow: hidden;
}

.upl-card-head {
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #14213d;
    background-color: #eef1f5;
    border-bottom: 1px solid #dde3ea;
    border-left: 3px solid #e8703f;
}

.upl-card > .row {
    flex: 1 1 auto;
    margin: 0;
}

.upl-card .col-md-12 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0;
    padding: 10px 11px 11px;
}

/* the nested layout tables become blocks so the card can stack */
.upl-card table,
.upl-card tbody,
.upl-card tr,
.upl-card td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
}

/* preview first, control under it */
.upl-card > .row > .col-md-12 > table > tbody > tr {
    display: flex;
    flex-direction: column-reverse;
}

/* the spacer cell the old layout used */
.upl-card td:empty {
    display: none;
}

/* ---- the preview plate ---- */
.upl-card img {
    display: block;
    width: 100%;
    height: 150px !important;
    margin: 0 0 9px;
    padding: 5px;
    object-fit: contain;
    background-color: #f8fafb;
    border: 1px solid #e4e9ee;
    border-radius: 5px;
}

/* the size/format rule under the title */
.upl-card label {
    display: block;
    margin: 0 0 9px;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 15px;
    color: #6b7480;
}

.upl-card label strong {
    font-weight: 700;
    color: #14213d;
}

.upl-card br {
    display: none;
}

@media (max-width: 767px) {
    .upl-grid {
        display: block;
    }

    .upl-card + .upl-card {
        margin-top: 12px;
    }

    .upl-card img {
        height: 180px !important;
    }
}

/* ==========================================================================
   THE SIGN-IN PAGE  (index.php)

   One card split in two: a navy pane carrying the exam, the two steps and
   the closing date, and a white pane carrying the form. Nothing here reuses
   .col_form_container - the fields on this page are 36px, not the 31px of a
   step-2 field, and inheriting that rule set only meant fighting it on
   specificity, which is what once left the field icon over its own text.
   .auth-shell is the only scope, so these rules reach nothing else.

   Sized to sit inside one screen without scrolling: the two panes and the
   page furniture around them come to roughly 700px, so the card holds on a
   laptop viewport. Every measurement below is part of that budget - raising
   a padding or a line-height here is what pushes the page over.

     #16233c  the navy pane        #e8703f  the coral accent
     #d65127  the primary action   #dde3ea  the card edge
   ========================================================================== */

.auth-shell {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto 18px;
    background-color: #ffffff;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(20, 33, 61, .07);
    overflow: hidden;
}

/* ------------------------------------------------------- the navy pane --- */
.auth-aside {
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    min-width: 0;
    padding: 19px 20px 17px;
    color: #c3ccd9;
    background-color: #16233c;
    /* a faint coral wash from the top-left, so the pane is not a flat slab */
    background-image: radial-gradient(circle at 0% 0%, rgba(232, 112, 63, .18), transparent 62%);
}

.auth-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 9px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #e8703f;
    border-radius: 3px;
}

.auth-title {
    margin: 10px 0 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: .2px;
    color: #ffffff;
}

.auth-meta {
    margin: 6px 0 0;
    padding: 0;
    font-size: 11px;
    line-height: 16px;
    color: #8b98ad;
}

.auth-meta b {
    font-weight: 600;
    color: #c3ccd9;
}

/* ---- the two steps, as a rule you read down ---- */
.auth-steps {
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: authstep;
}

.auth-steps li {
    position: relative;
    padding: 0 0 11px 33px;
}

.auth-steps li:last-child {
    padding-bottom: 0;
}

/* the rule joining one number to the next */
.auth-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 11px;
    bottom: 3px;
    width: 1px;
    background-color: rgba(255, 255, 255, .16);
}

.auth-steps li::before {
    counter-increment: authstep;
    content: counter(authstep);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    font-size: 11px;
    font-weight: 700;
    color: #c3ccd9;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
}

/* the step this page is */
.auth-steps li.is-here::before {
    color: #ffffff;
    background-color: #e8703f;
    border-color: #e8703f;
}

.auth-steps strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 23px;
    color: #ffffff;
}

.auth-steps span {
    display: block;
    font-size: 11px;
    line-height: 16px;
    color: #8b98ad;
}

.auth-steps a {
    color: #f4a483;
    text-decoration: underline;
}

.auth-steps a:hover,
.auth-steps a:focus {
    color: #ffffff;
}

/* ---- the closing date, and the notification ---- */
.auth-aside-foot {
    margin-top: auto;
    padding-top: 15px;
}

.auth-deadline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 3px solid #e8703f;
    border-radius: 5px;
}

.auth-deadline i {
    font-size: 16px;
    color: #e8703f;
}

.auth-deadline div {
    min-width: 0;
}

.auth-deadline span {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8b98ad;
}

.auth-deadline b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.auth-doc {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 17px;
    text-decoration: none;
    color: #ffffff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 5px;
    transition: background-color .18s ease, border-color .18s ease;
}

.auth-doc:hover,
.auth-doc:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .4);
}

.auth-doc span {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-doc i {
    flex: 0 0 auto;
    font-size: 13px;
    color: #e8703f;
}

/* ------------------------------------------------------ the white pane --- */
.auth-form {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    min-width: 0;
    padding: 19px 20px 17px;
}

.auth-form-head {
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}

.auth-form-head h2 {
    margin: 0;
    padding: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 21px;
    color: #14213d;
}

.auth-form-head p {
    margin: 2px 0 0;
    padding: 0;
    font-size: 11px;
    line-height: 16px;
    color: #7a8288;
}

.auth-form form {
    margin: 13px 0 0;
}

/* ---- a field ---- */
.auth-field {
    margin-bottom: 10px;
}

.auth-field > label {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #56606d;
    text-align: left;
    float: none;
}

/* The icon is drawn in its own column on the left of the box, divided from
   the text by a hairline - it is beside what you type, never over it. */
.auth-box {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    border: 1px solid #cfd4d8;
    border-radius: 5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-box:focus-within {
    border-color: #e8703f;
    box-shadow: 0 0 0 3px rgba(232, 112, 63, .15);
}

.auth-box > .auth-ico {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #9aa3ae;
    background-color: #f7f9fb;
    border-right: 1px solid #e6eaef;
    border-radius: 4px 0 0 4px;
    transition: color .15s ease;
}

.auth-box:focus-within > .auth-ico {
    color: #e8703f;
}

/* the box owns the border and the focus ring; the input inside is bare */
.auth-shell .auth-box .form_input {
    flex: 1 1 auto;
    float: none !important;
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 36px;
    margin: 0 !important;
    padding: 7px 11px;
    font-size: 13px;
    line-height: 20px;
    color: #2f3438;
    background-color: transparent;
    border: 0;
    border-radius: 0 4px 4px 0;
    box-shadow: none;
    box-sizing: border-box;
    outline: 0;
}

.auth-shell .auth-box .form_input:focus {
    border: 0;
    box-shadow: none;
    outline: 0;
}

.auth-shell .auth-box .form_input::placeholder {
    color: #a8b0b9;
}

/* ---- the sum ---- */
/* the question is the box's own left column, in place of an icon */
.auth-box > .auth-sum-q {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: .5px;
    color: #14213d;
    background-color: #f7f9fb;
    border-right: 1px solid #e6eaef;
    border-radius: 4px 0 0 4px;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- the button ---- */
.auth-shell .submitButton {
    display: block;
    width: 100%;
    margin: 13px 0 0;
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #d65127;
    border: 1px solid #c2461f;
    border-radius: 5px;
    box-shadow: none;            /* style.css hands it a 3D drop shadow */
    cursor: pointer;
    transition: background-color .18s ease;
}

.auth-shell .submitButton:hover,
.auth-shell .submitButton:focus {
    color: #ffffff;
    background-color: #b93f1a;
    border-color: #b93f1a;
    box-shadow: none;
}

/* ---- the message the login handler puts above the fields ---- */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 11px;
    padding: 8px 11px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    color: #a8321f;
    background-color: #fdeee8;
    border: 1px solid #f2c8b9;
    border-left: 3px solid #d0342c;
    border-radius: 5px;
}

.auth-alert i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 12px;
    color: #d0342c;
}

/* ---- what sits under the button ---- */
/* one strip: the way to Step 1 on the left, the help desk under it */
.auth-new {
    margin-top: auto;
    padding-top: 14px;
}

.auth-new-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 9px 12px;
    font-size: 11.5px;
    line-height: 17px;
    color: #56606d;
    background-color: #f7f9fb;
    border: 1px solid #e6eaef;
    border-radius: 5px;
}

.auth-new-in a {
    font-weight: 700;
    color: #d65127;
    text-decoration: none;
    white-space: nowrap;
}

.auth-new-in a:hover,
.auth-new-in a:focus {
    color: #b93f1a;
    text-decoration: underline;
}

.auth-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    font-size: 10.5px;
    line-height: 16px;
    color: #8b9198;
}

.auth-help i {
    font-size: 11px;
    color: #e8703f;
}

.auth-help b {
    color: #3a4350;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- narrow ---- */
@media (max-width: 767px) {
    .auth-aside,
    .auth-form {
        flex: 1 1 100%;
        padding: 16px 15px;
    }

    .auth-title {
        font-size: 16px;
        line-height: 22px;
    }

    /* on a phone the form is what you came for - put it first */
    .auth-aside {
        order: 2;
    }

    .auth-form {
        order: 1;
    }
}

/* On a short laptop screen the page furniture is what has to give, not the
   card: the marquee bar and the footer columns tighten so the form is still
   reachable without scrolling. */
@media (min-width: 768px) and (max-height: 780px) {
    .content_container,
    section.pt-4 {
        padding-top: 12px !important;
    }

    .auth-shell {
        margin-bottom: 12px;
    }

    .foot-main {
        padding: 14px 0 12px;
    }

    .foot-grid {
        gap: 14px 30px;
    }

    .foot-addr {
        margin-top: 9px;
    }
}

/* ======================================== step-1 registration, the form ====
   The page already uses the step-2 markup (.col_title, .col_form_container,
   .row.bg-warning-light) so it inherits the card and field rules further up
   this file. What is left is its YES/NO pairs and its two buttons.

   The pairs used to be drawn by a <style> block inside registration.php, in
   a maroon (#b6411c) that appears nowhere else on the site. Those rules are
   gone from the page and restated here in the site's coral, sized to match
   .qual-tick on step-3 so a tick and a radio read as the same control.     */

#firstStep .rad-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 0 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #3a4350;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* The real input keeps its size and sits exactly under the drawn circle, so
   validationEngine still measures a real box when it places a prompt - a
   1px input would park the message in the wrong place. */
#firstStep .rad-opt input[type="radio"] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0;
    transform: translateY(-50%);
    cursor: pointer;
}

#firstStep .rad-dot {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border: 2px solid #bcc4ce;
    border-radius: 50%;
    transition: border-color .18s ease, box-shadow .18s ease;
}

#firstStep .rad-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    background-color: #e8703f;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

#firstStep .rad-opt:hover .rad-dot {
    border-color: #e8703f;
}

#firstStep .rad-opt input[type="radio"]:checked ~ .rad-dot {
    border-color: #e8703f;
}

#firstStep .rad-opt input[type="radio"]:checked ~ .rad-dot::after {
    transform: translate(-50%, -50%) scale(1);
}

#firstStep .rad-opt input[type="radio"]:checked ~ .rad-txt {
    color: #14213d;
}

#firstStep .rad-opt input[type="radio"]:focus ~ .rad-dot {
    border-color: #e8703f;
    box-shadow: 0 0 0 3px rgba(232, 112, 63, .2);
}

/* the pair lives in a bare <table>; drop the cell padding around it */
#firstStep .txt-1 {
    padding: 0;
    background: none;
}

/* date of birth is three selects on one line, not one control */
#firstStep .dob-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#firstStep .dob-row .form_input {
    flex: 1 1 0;
    width: auto !important;
    min-width: 74px;
}

/* the computed age, beside its label */
#firstStep .age-out {
    font-size: 11.5px;
    line-height: 31px;
    color: #7a8288;
}

#firstStep #displayAge {
    font-size: 12px;
    font-weight: 700;
    color: #14213d;
}

/* ---- the buttons at the foot of the form ---- */
#firstStep .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin: 0;
    padding: 14px 12px;
    background-color: #f7f9fb;
    border: 1px solid #dde3ea;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

#firstStep .form-actions .submitButton {
    min-width: 150px;
    margin: 0;
    padding: 10px 22px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #d65127;
    border: 1px solid #c2461f;
    border-radius: 5px;
    box-shadow: none !important;   /* style.css's 3D shadow */
    cursor: pointer;
    transition: background-color .18s ease;
}

#firstStep .form-actions .submitButton:hover,
#firstStep .form-actions .submitButton:focus {
    background-color: #b93f1a;
    border-color: #b93f1a;
    box-shadow: none !important;
}

/* "Back" is the quiet one - .btn_green painted it lime */
#firstStep .form-actions .btn_green {
    min-width: 0;
    color: #3a4350 !important;
    background-color: #ffffff !important;
    border: 1px solid #cfd6df !important;
    box-shadow: none !important;
}

#firstStep .form-actions .btn_green:hover,
#firstStep .form-actions .btn_green:focus {
    color: #16233c !important;
    background-color: #eef1f5 !important;
    border-color: #b9c1cb !important;
    box-shadow: none !important;
}

@media (max-width: 575px) {
    #firstStep .form-actions .submitButton {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* The blocks on step-1 are wrapped in #step-1 / #step-2 / #PWDStatus, which
   the JS shows and hides. Those wrappers break the adjacent-sibling rule that
   normally draws the hairline between one block and the next, so give every
   block its own top rule here and take it back off the one that opens a
   section - there the heading already provides the edge. */
#firstStep .row.bg-warning-light {
    border-top: 1px solid #eef1f5;
}

#firstStep .sub_heading_1 + .row.bg-warning-light {
    border-top: 0;
}

/* ============================================ step-1, a compact frame ======
   The form ran the full 1140px of .container while every field sat in a
   col-md-8 beside an empty col-md-4 - so the card was wide, two thirds of it
   was used, and a 10-digit mobile number got a 500px box. The card is capped
   here, the empty spacer columns are dropped, and a control is only as wide
   as the longest value it can hold.                                        */
.reg-page .main_container {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.reg-page .row > .col-md-12.no-padding {
    padding-left: 0;
    padding-right: 0;
}

/* the field block spans the card; the empty right-hand column goes */
#firstStep .row.bg-warning-light > .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
}

#firstStep .row.bg-warning-light > .col-md-4 {
    display: none;
}

/* tighter than step-2: this form is 14 fields, not 60 */
#firstStep .row.bg-warning-light {
    padding: 9px 12px 2px;
}

#firstStep .row.bg-warning-light .row {
    margin-bottom: 7px;
}

/* a control is sized to its content, not to its column */
#firstStep .row.bg-warning-light .row > [class*="col-md-"] > .form_input {
    max-width: 320px;
}

#firstStep .dob-row {
    max-width: 340px;
}

/* the two DOB labels are the only pair that shares a line with a value */
#firstStep .row.bg-warning-light .row > .col-md-4 {
    padding-right: 12px;
}

@media (max-width: 767px) {
    #firstStep .row.bg-warning-light .row > [class*="col-md-"] > .form_input,
    #firstStep .dob-row {
        max-width: none;
    }
}

/* ================================ the file rule in a section heading =======
   The heading is already a flex bar with space-between (the address section
   pushes its "same as permanent" tick to the far end the same way), so the
   note only has to say how it is set: one italic line, not shouting, and it
   truncates rather than pushing the heading onto a second row.             */
.col_form_container .sub_heading_1 .qual-note {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 10.5px;
    font-style: italic;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5c6673;
}

.col_form_container .sub_heading_1 .qual-note i {
    margin-right: 5px;
    font-size: 11px;
    font-style: normal;
    color: #e8703f;
}

/* narrow: the note drops under the heading and is allowed to wrap */
@media (max-width: 767px) {
    .col_form_container .sub_heading_1 .qual-note {
        flex: 1 1 100%;
        white-space: normal;
        overflow: visible;
    }
}

/* ================================================ the page's own popup =====
   Replaces the browser alert() the upload boxes used to raise. A strip under
   the header, not a modal: it never blocks the page, it carries the site's
   own colours, and it says the file name and the actual size rather than
   "localhost says". js/site-ui.js builds it.                               */
#gdce-toast {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 3000;
    display: none;
    align-items: flex-start;
    gap: 10px;
    width: -webkit-max-content;
    width: max-content;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #dde3ea;
    border-left: 4px solid #7a8288;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(20, 33, 61, .18);
    transform: translate(-50%, -14px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}

#gdce-toast.is-on {
    display: flex;
    transform: translate(-50%, 0);
    opacity: 1;
}

#gdce-toast > i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 15px;
}

.gdce-toast-msg {
    flex: 1 1 auto;
    min-width: 0;
}

.gdce-toast-x {
    flex: 0 0 auto;
    margin: -3px -4px 0 2px;
    padding: 0 5px;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #98a2b0;
    background: none;
    border: 0;
    cursor: pointer;
}

.gdce-toast-x:hover {
    color: #14213d;
}

#gdce-toast.is-error {
    color: #a8321f;
    background-color: #fdeee8;
    border-color: #f2c8b9;
    border-left-color: #d0342c;
}

#gdce-toast.is-error > i { color: #d0342c; }

#gdce-toast.is-ok {
    color: #16713b;
    background-color: #eef9f2;
    border-color: #bfe3ce;
    border-left-color: #1c7a3e;
}

#gdce-toast.is-ok > i { color: #1c7a3e; }

#gdce-toast.is-info {
    color: #24405f;
    background-color: #eef4fb;
    border-color: #c8d8ea;
    border-left-color: #16233c;
}

#gdce-toast.is-info > i { color: #16233c; }

@media (prefers-reduced-motion: reduce) {
    #gdce-toast { transition: none; }
}

@media (max-width: 575px) {
    #gdce-toast {
        top: 10px;
        max-width: calc(100vw - 20px);
        font-size: 12px;
    }
}

/* ------------------------------------------- the "still empty" banner ----
   Shown when step-2 is posted with a required document missing or refused.
   It was written with inline styles on the element; same message, drawn in
   the same terms as the popup above.                                      */
#gdce-req-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 16px;
    padding: 12px 15px;
    color: #a8321f;
    background-color: #fdeee8;
    border: 1px solid #f2c8b9;
    border-left: 3px solid #d0342c;
    border-radius: 6px;
}

#gdce-req-banner > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 16px;
    color: #d0342c;
}

.gdce-req-in {
    min-width: 0;
}

.gdce-req-head {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 19px;
}

.gdce-req-list {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #8d4030;
}

/* The photo / signature / thumb boxes put the input straight in a <td> with
   the tick after it, and the input is a full-width block - so the tick fell
   to the next line there too. Same row treatment as the qualification
   tables, without needing the markup changed. */
.upl-card td:has(> input[type="file"]) {
    display: flex;
    align-items: center;
    gap: 6px;
}

.upl-card td > input[type="file"] {
    flex: 1 1 auto;
    min-width: 0;
}

/* :has() is recent; where it is missing the tick simply sits under the box,
   which is what it did before - nothing breaks, it is only less tidy. */