/* ==========================================================================
   GIGW 3.0 / DBIM 3.0 theme for the public (static) pages.
   Loaded last by Views/Shared/_GigwLayout.cshtml so that it wins over the
   legacy page styles.

   To change the DBIM colour group, change only the five --gw-key* values:
     Blue      #162F6A #214AAB #5279D7 #A3BBF3 #D2DFFF   (in use)
     Burgundy  #6C1340 #A32966 #DB70A6 #EBADCC #FAEBF2
     Purple    #29136C #4729A3 #8B70DB #BDADEB #EEEBFA
     Teal      #0F5757 #2D8686 #75BDBD #A6D9D9 #D9F2F2
     Golden    #5D3E00 #916100 #DDA73A #F4D390 #FFEECC
     Red       #771D1D #A72626 #D75151 #FAAAAA #FCDADA
   ========================================================================== */


/* ---------- Tokens ---------- */
:root {
    /* DBIM primary palette: one colour group */
    --gw-key: #162F6A;        /* key colour: footer, headings, icons (white text allowed) */
    --gw-key-2: #214AAB;      /* links, hover (white text allowed) */
    --gw-key-3: #5279D7;      /* decoration only, never behind text */
    --gw-key-4: #A3BBF3;      /* light background (dark text) */
    --gw-key-5: #D2DFFF;      /* lightest background (dark text) */

    /* DBIM functional palette */
    --gw-text: #150202;       /* Deep Earthy Brown */
    --gw-text-muted: #606060;    /* Grey 03 */
    --gw-white: #FFFFFF;      /* Inclusive White */
    --gw-surface: #EBEAEA;       /* Linen */
    --gw-border: #C6C6C6;        /* Grey 01 */
    --gw-success: #198754;       /* Liberty Green */
    --gw-warning: #FFC107;
    --gw-error: #DC3545;         /* Coral Red */
    --gw-info: #0D6EFD;          /* Blue */
    --gw-grey-2: #8E8E8E;        /* Grey 02 */
    --gw-grey-3: #606060;        /* Grey 03 */
    --gw-focus: #FFC107;         /* Mustard Yellow */

    --gw-font: 'Noto Sans', 'Nirmala UI', 'Mangal', Arial, sans-serif;
    --gw-radius: 4px;
    --gw-container: 1200px;
}

/* ---------- Base typography (DBIM 4) ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.gw-body {
    margin: 0;
    font-family: var(--gw-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--gw-text);
    background: var(--gw-white);
    text-align: left;
    overflow-x: hidden;
}

/* One typeface everywhere; icon fonts keep their own family */
.gw-body *:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not([class^="flaticon"]):not([class*=" flaticon"]):not(.lg-icon):not(.glyphicon):not(code):not(pre) {
    font-family: var(--gw-font) !important;
}

:where(.gw-body) :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; line-height: 1.3; text-transform: none; }
/* Key colour for headings only where they sit on the page background, so headings inside coloured boxes keep their own colour */
:where(.gw-main) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
:where(.gw-main > .container, .gw-main > .content, .gw-page, .about-border) > :is(h1, h2, h3, h4) { color: var(--gw-key); }
:where(.gw-body) h1 { font-size: 36px; }
:where(.gw-body) h2 { font-size: 24px; }
:where(.gw-body) h3 { font-size: 20px; }
:where(.gw-body) h4 { font-size: 16px; }
:where(.gw-body) h5 { font-size: 16px; }
:where(.gw-body) h6 { font-size: 16px; }
:where(.gw-main) :is(p, li, td, th, label) { font-size: 16px; }
:where(.gw-main) p { text-align: left; }
:where(.gw-main) :is(small, .small) { font-size: 14px; }

:where(.gw-body) a { color: var(--gw-key); text-decoration: none; }
:where(.gw-body) a:hover { color: var(--gw-key-2); text-decoration: underline; }

.gw-body img { max-width: 100%; height: auto; }

/* Visible keyboard focus on every interactive element (GIGW 5.2) */
.gw-body a:focus-visible,
.gw-body button:focus-visible,
.gw-body input:focus-visible,
.gw-body select:focus-visible,
.gw-body textarea:focus-visible,
.gw-body summary:focus-visible,
.gw-body [tabindex]:focus-visible {
    outline: 3px solid var(--gw-focus) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--gw-text) !important;
}

.gw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.gw-container { width: 100%; max-width: var(--gw-container); margin: 0 auto; padding: 0 16px; }

.gw-icon { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; }

/* ---------- Skip link ---------- */
.gw-skip { position: absolute; left: 8px; top: -60px; z-index: 10000; background: var(--gw-white); color: var(--gw-key) !important; padding: 10px 16px; border: 2px solid var(--gw-key); border-radius: var(--gw-radius); font-weight: 600; transition: top .15s; }
.gw-skip:focus { top: 8px; }

/* ---------- Utility bar ---------- */
.gw-utility { background: var(--gw-key); color: var(--gw-white); font-size: 14px; }
.gw-utility .gw-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; flex-wrap: wrap; }
.gw-utility ul { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.gw-utility li { margin: 0; }
.gw-utility a, .gw-utility button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--gw-radius); color: var(--gw-white) !important; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none; }
.gw-utility a:hover, .gw-utility button:hover { background: var(--gw-key-2); text-decoration: underline; }
.gw-utility .gw-icon { width: 24px; height: 24px; flex-basis: 24px; }
.gw-utility .gw-sep { width: 1px; height: 18px; background: var(--gw-key-4); padding: 0; }

/* ---------- Brand bar: logo lockup, search, co-branding ---------- */
.gw-brand { background: var(--gw-white); border-bottom: 1px solid var(--gw-border); }
.gw-brand .gw-container { display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.gw-lockup { display: flex; align-items: center; gap: 12px; color: var(--gw-text) !important; text-decoration: none !important; min-width: 0; }
.gw-lockup img { width: 64px; height: 64px; flex: 0 0 64px; }
.gw-lockup-text { display: flex; flex-direction: column; line-height: 1.3; }
.gw-lockup-govt { font-size: 14px; font-weight: 500; color: var(--gw-text); }
.gw-lockup-dept { font-size: 20px; font-weight: 700; color: var(--gw-text); }

.gw-search { position: relative; margin-left: auto; flex: 0 1 300px; }
.gw-search form { display: flex; border-bottom: 2px solid var(--gw-key); }
.gw-search input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; background: transparent; padding: 4px 8px; font-size: 16px; color: var(--gw-text); }
.gw-search button { width: 44px; height: 40px; border: 0; background: transparent; color: var(--gw-key); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gw-search button:hover { background: var(--gw-key-5); }
.gw-search-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 1050; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--gw-white); border: 1px solid var(--gw-border); border-radius: var(--gw-radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); max-height: 320px; overflow-y: auto; }
.gw-search-results[hidden] { display: none; }
.gw-search-results a { display: block; padding: 8px 12px; color: var(--gw-text) !important; font-size: 14px; }
.gw-search-results a:hover, .gw-search-results a:focus { background: var(--gw-key-5); text-decoration: none; }
.gw-search-results .gw-search-empty { padding: 8px 12px; font-size: 14px; color: var(--gw-text); }

.gw-cobrand { display: flex; align-items: center; gap: 16px; }
.gw-cobrand img { height: 56px; width: auto; }

.gw-nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; background: var(--gw-white); color: var(--gw-key); border: 1px solid var(--gw-key); border-radius: var(--gw-radius); font-size: 16px; font-weight: 600; cursor: pointer; }
.gw-nav-toggle:hover { background: var(--gw-key-5); }

/* ---------- Main navigation ---------- */
.gw-nav { background: var(--gw-white); border-bottom: 3px solid var(--gw-key); position: relative; z-index: 1040; }
.gw-nav ul { list-style: none; margin: 0; padding: 0; }
.gw-menu { display: flex; flex-wrap: wrap; }
.gw-menu > li { position: relative; margin: 0; }
.gw-menu a, .gw-menu button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 48px; padding: 10px 14px; background: transparent; border: 0; color: var(--gw-text) !important; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none !important; cursor: pointer; }
.gw-menu > li > a, .gw-menu > li > button { border-bottom: 3px solid transparent; margin-bottom: -3px; }
.gw-menu > li > a:hover, .gw-menu > li > button:hover, .gw-menu > li > button[aria-expanded="true"], .gw-menu > li > a[aria-current="page"] { color: var(--gw-key) !important; background: var(--gw-key-5); border-bottom-color: var(--gw-key-2); }
.gw-menu .gw-caret { width: 24px; height: 24px; flex: 0 0 24px; margin: 0 -4px; fill: currentColor; transition: transform .15s; }
.gw-menu button[aria-expanded="true"] > .gw-caret { transform: rotate(180deg); }
.gw-submenu { display: none; position: absolute; left: 0; top: 100%; min-width: 260px; background: var(--gw-white); border: 1px solid var(--gw-border); border-top: 3px solid var(--gw-key-2); box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.gw-submenu.gw-open { display: block; }
.gw-submenu li { position: relative; }
.gw-submenu a, .gw-submenu button { font-weight: 500; min-height: 44px; border-bottom: 1px solid #EBEAEA; }
.gw-submenu a:hover, .gw-submenu button:hover, .gw-submenu button[aria-expanded="true"] { background: var(--gw-key-5); color: var(--gw-key) !important; }
.gw-submenu .gw-submenu { left: 100%; top: -3px; }
.gw-menu > li:nth-last-child(-n+3) > .gw-submenu { left: auto; right: 0; }
.gw-menu > li:nth-last-child(-n+3) .gw-submenu .gw-submenu { left: auto; right: 100%; }

/* ---------- Main ---------- */
.gw-main { display: block; min-height: 50vh; }
.gw-main:focus { outline: none; }

/* ---------- Buttons (DBIM 4.5): uniform size, distinct states ---------- */
.gw-body .btn { min-height: 44px; padding: 10px 20px; font-size: 16px; font-weight: 600; line-height: 1.3; border-radius: var(--gw-radius); border-width: 2px; text-transform: none; white-space: normal; }
.gw-body .btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.gw-body .btn-primary, .gw-body .btn-info, .gw-body .btn-success, .gw-body .btn-warning, .gw-body .btn-dark, .gw-btn { background: var(--gw-key) !important; border-color: var(--gw-key) !important; color: var(--gw-white) !important; }
.gw-body .btn-primary:hover, .gw-body .btn-info:hover, .gw-body .btn-success:hover, .gw-body .btn-warning:hover, .gw-body .btn-dark:hover, .gw-btn:hover { background: var(--gw-key-2) !important; border-color: var(--gw-key-2) !important; color: var(--gw-white) !important; text-decoration: none; }
.gw-body .btn-secondary, .gw-body .btn-default, .gw-body .btn-light, .gw-body .btn-outline-primary { background: var(--gw-white) !important; border-color: var(--gw-key) !important; color: var(--gw-key) !important; }
.gw-body .btn-secondary:hover, .gw-body .btn-default:hover, .gw-body .btn-light:hover, .gw-body .btn-outline-primary:hover { background: var(--gw-key-5) !important; color: var(--gw-key) !important; }
.gw-body .btn-danger { background: var(--gw-error) !important; border-color: var(--gw-error) !important; color: var(--gw-white) !important; }
.gw-body .btn-danger:hover { background: #150202 !important; border-color: #150202 !important; }
.gw-body .btn:disabled, .gw-body .btn.disabled, .gw-body .btn[disabled] { background: #C6C6C6 !important; border-color: #8E8E8E !important; color: #606060 !important; cursor: not-allowed; opacity: 1; }
.gw-body .btn-close { min-height: 0; padding: .5em; }

/* ---------- Forms ---------- */
.gw-body .form-control, .gw-body .form-select, .gw-body select.form-control { min-height: 44px; font-size: 16px; color: var(--gw-text); border: 1px solid #606060; border-radius: var(--gw-radius); }
.gw-body .form-control:focus, .gw-body .form-select:focus { border-color: var(--gw-key-2); }
.gw-body label { color: var(--gw-text); font-weight: 500; }
.gw-body .text-danger, .gw-body .field-validation-error { color: var(--gw-error) !important; }

/* ---------- Tables (DBIM 4.1.1) ---------- */
.gw-main table { max-width: 100%; }
:where(.gw-main) th { text-align: center; }
:where(.gw-main) td { text-align: left; }
.gw-main td.gw-num, .gw-main td.text-end, .gw-main td.text-right { text-align: right; }
.gw-main .table thead th, .gw-main table thead th { background: var(--gw-key); color: var(--gw-white); border-color: var(--gw-key); }
.gw-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Footer (DBIM 5.6): key colour background ---------- */
.gw-footer { background: var(--gw-key); color: var(--gw-white); margin-top: 40px; font-size: 14px; }
.gw-footer a { color: var(--gw-white) !important; text-decoration: none; }
.gw-footer a:hover { text-decoration: underline; }
.gw-footer h2 { color: var(--gw-white) !important; font-size: 16px; font-weight: 600; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gw-key-4); }
.gw-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-top: 36px; padding-bottom: 28px; }
.gw-footer ul { list-style: none; margin: 0; padding: 0; }
.gw-footer li { margin: 0 0 4px; }
.gw-footer li a { display: inline-block; padding: 4px 0; min-height: 28px; }
.gw-footer p { color: var(--gw-white); margin: 0 0 8px; font-size: 14px; }
.gw-footer-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gw-footer-lockup img { width: 56px; height: 56px; background: var(--gw-white); border-radius: 50%; padding: 2px; }
.gw-footer-lockup span { font-size: 16px; font-weight: 600; line-height: 1.35; }
.gw-contact { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.gw-social { display: flex; gap: 10px; margin-top: 12px; }
.gw-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--gw-key-4); border-radius: var(--gw-radius); }
.gw-social a:hover { background: var(--gw-key-2); }
.gw-footer-bottom { border-top: 1px solid var(--gw-key-2); padding: 16px 0; font-size: 14px; }
.gw-footer-bottom .gw-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.gw-footer-bottom p { margin: 0; font-size: 14px; }

.gw-top { position: fixed; right: 16px; bottom: 16px; z-index: 1030; width: 48px; height: 48px; display: none; align-items: center; justify-content: center; background: var(--gw-key); color: var(--gw-white); border: 2px solid var(--gw-white); border-radius: 50%; cursor: pointer; }
.gw-top.gw-show { display: inline-flex; }
.gw-top:hover { background: var(--gw-key-2); }

/* ---------- Accessibility panel ---------- */
.gw-a11y { position: fixed; top: 0; right: 0; z-index: 10001; width: 340px; max-width: 100%; height: 100%; overflow-y: auto; background: var(--gw-white); color: var(--gw-text); border-left: 3px solid var(--gw-key); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); padding: 16px; }
.gw-a11y[hidden] { display: none; }
.gw-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gw-a11y-head h2 { font-size: 20px; margin: 0; }
.gw-a11y-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--gw-white); border: 1px solid var(--gw-key); border-radius: var(--gw-radius); color: var(--gw-key); cursor: pointer; }
.gw-a11y-close:hover { background: var(--gw-key-5); }
.gw-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gw-a11y-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 10px 6px; background: var(--gw-white); border: 2px solid var(--gw-key); border-radius: var(--gw-radius); color: var(--gw-key); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }
.gw-a11y-grid button:hover { background: var(--gw-key-5); }
.gw-a11y-grid button[aria-pressed="true"] { background: var(--gw-key); color: var(--gw-white); }
.gw-a11y-grid .gw-icon { width: 32px; height: 32px; flex-basis: 32px; }
.gw-a11y-grid .gw-wide { grid-column: 1 / -1; min-height: 48px; flex-direction: row; }

/* Text size steps */
html.gw-text-1 body.gw-body { zoom: 1.1; }
html.gw-text-2 body.gw-body { zoom: 1.2; }
html.gw-text--1 body.gw-body { zoom: .9; }

/* Highlight links */
html.gw-links .gw-body a { text-decoration: underline !important; outline: 2px solid var(--gw-focus); outline-offset: 1px; }

/* Hide images */
html.gw-noimg .gw-body img, html.gw-noimg .gw-body video { visibility: hidden !important; }
html.gw-noimg .gw-body * { background-image: none !important; }

/* Dark contrast */
html.gw-contrast .gw-body, html.gw-contrast .gw-body *:not(img):not(svg):not(svg *):not(video) { background-color: #000 !important; background-image: none !important; color: #FFF !important; border-color: #FFF !important; box-shadow: none !important; text-shadow: none !important; }
html.gw-contrast .gw-body a, html.gw-contrast .gw-body a * { color: #FFC107 !important; text-decoration: underline !important; }
html.gw-contrast .gw-body button, html.gw-contrast .gw-body .btn, html.gw-contrast .gw-body input, html.gw-contrast .gw-body select, html.gw-contrast .gw-body textarea { border: 2px solid #FFF !important; color: #FFF !important; }
html.gw-contrast .gw-body svg { fill: currentColor; }
html.gw-contrast .gw-lockup img, html.gw-contrast .gw-cobrand img, html.gw-contrast .gw-footer-lockup img { background-color: #FFF !important; }

/* Loader used by the forms */
.gw-loader { position: fixed; inset: 0; z-index: 9999999; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); }
.gw-loader-box { background: var(--gw-white); color: var(--gw-text); padding: 20px 28px; border-radius: var(--gw-radius); text-align: center; max-width: 90%; }
.gw-spinner { width: 40px; height: 40px; margin: 0 auto 10px; border: 4px solid var(--gw-key-5); border-top-color: var(--gw-key); border-radius: 50%; animation: gw-spin 1s linear infinite; }
@keyframes gw-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .gw-body *, .gw-body *::before, .gw-body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Responsive (DBIM 10.2)
   ========================================================================== */
@media (max-width: 1199.98px) {
    .gw-cobrand img { height: 44px; }
    .gw-menu a, .gw-menu button { padding: 10px; font-size: 14px; }
}

@media (max-width: 991.98px) {
    .gw-brand .gw-container { flex-wrap: wrap; gap: 12px; }
    .gw-cobrand { display: none; }
    .gw-search { order: 3; flex: 1 1 100%; margin-left: 0; }
    .gw-nav-toggle { display: inline-flex; margin-left: auto; }
    .gw-nav { border-bottom-width: 0; }
    .gw-nav.gw-open { border-bottom-width: 3px; }
    .gw-nav .gw-container { padding: 0; }
    .gw-menu { display: none; flex-direction: column; }
    .gw-nav.gw-open .gw-menu { display: flex; }
    .gw-menu > li > a, .gw-menu > li > button { padding: 12px 16px; border-bottom: 1px solid #EBEAEA; margin-bottom: 0; font-size: 16px; }
    .gw-submenu, .gw-submenu .gw-submenu, .gw-menu > li:nth-last-child(-n+3) > .gw-submenu, .gw-menu > li:nth-last-child(-n+3) .gw-submenu .gw-submenu { position: static; min-width: 0; box-shadow: none; border: 0; border-left: 4px solid var(--gw-key-4); background: var(--gw-surface); }
    .gw-submenu a, .gw-submenu button { padding-left: 28px; font-size: 16px; }
    .gw-submenu .gw-submenu a { padding-left: 44px; }
    .gw-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
    body.gw-body { font-size: 16px; }
    :where(.gw-body) h1 { font-size: 24px; }
    :where(.gw-body) h2 { font-size: 24px; }
    :where(.gw-body) h3 { font-size: 20px; }
    :where(.gw-body) h4 { font-size: 16px; }
    :where(.gw-body) h5 { font-size: 16px; }
    .gw-utility .gw-container { justify-content: center; }
    .gw-utility .gw-hide-sm { display: none; }
    .gw-lockup img { width: 48px; height: 48px; flex-basis: 48px; }
    .gw-lockup-govt { font-size: 12px; }
    .gw-lockup-dept { font-size: 16px; }
    .gw-nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .gw-footer-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
    .gw-footer-bottom .gw-container { flex-direction: column; }
    .gw-main table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gw-main iframe, .gw-main video, .gw-main embed, .gw-main object { max-width: 100%; }
    .gw-main [class*="col-"] { max-width: 100%; }
}

@media print {
    .gw-utility, .gw-nav, .gw-search, .gw-nav-toggle, .gw-footer, .gw-top, .gw-a11y, .gw-skip { display: none !important; }
}

/* ==========================================================================
   Legacy page components brought in line with the DBIM palette
   ========================================================================== */
.gw-body .btn.green, .gw-body .btn.yellow, .gw-body .btn.blue, .gw-body .btn.purple, .gw-body .btn.dark,
.gw-body .fxt-btn-fill, .gw-body .footer-button-web { background: var(--gw-key) !important; border-color: var(--gw-key) !important; color: var(--gw-white) !important; }
.gw-body .btn.green:hover, .gw-body .btn.yellow:hover, .gw-body .btn.blue:hover, .gw-body .btn.purple:hover, .gw-body .btn.dark:hover,
.gw-body .fxt-btn-fill:hover, .gw-body .footer-button-web:hover { background: var(--gw-key-2) !important; border-color: var(--gw-key-2) !important; color: var(--gw-white) !important; }
.gw-body .btn.red { background: var(--gw-error) !important; border-color: var(--gw-error) !important; color: var(--gw-white) !important; }
.gw-body .fxt-btn-fill { min-height: 44px; font-size: 16px; font-weight: 600; border-radius: var(--gw-radius); cursor: pointer; }
.gw-main .btn { font-size: 16px !important; }
.gw-main .btn-sm, .gw-main .btn-xs { font-size: 14px !important; }
.gw-main .list-group-item { color: var(--gw-text); }
.gw-main .list-group-item.active, .gw-main .list-group-item.active:hover { background: var(--gw-key); border-color: var(--gw-key); color: var(--gw-white); text-transform: none; }
.gw-main a.list-group-item:hover, .gw-main .list-group-item.active_Menu { background: var(--gw-key-5); color: var(--gw-key); }
.gw-body .owl-theme .owl-controls .owl-page span { background: var(--gw-key-4); opacity: 1; }
.gw-body .owl-theme .owl-controls .owl-page.active span, .gw-body .owl-theme .owl-controls.clickable .owl-page:hover span { background: var(--gw-key); }
.gw-body .modal-header { background: var(--gw-key); color: var(--gw-white); }
.gw-body .modal-header .modal-title, .gw-body .modal-header h1, .gw-body .modal-header h2, .gw-body .modal-header h3, .gw-body .modal-header h4, .gw-body .modal-header h5 { color: var(--gw-white); }
.gw-body .modal-header .close, .gw-body .modal-header .btn-close { color: var(--gw-white); opacity: 1; text-shadow: none; min-width: 44px; min-height: 44px; }
.gw-body .modal-dialog { max-width: calc(100% - 16px); }
.gw-page { padding-top: 24px; padding-bottom: 24px; }
.gw-page h2 { margin-top: 28px; }
.gw-footer-bottom .gw-container { padding-right: 76px; }

@media (min-width: 576px) { .gw-body .modal-dialog { max-width: 500px; } .gw-body .modal-dialog.modal-lg { max-width: min(800px, calc(100% - 32px)); } }

/* Home banner and pop-ups on small screens */
.gw-main .slider-grid { z-index: auto !important; }
@media (max-width: 767.98px) {
    .gw-main .slider-grid { background: var(--gw-white); }
    .gw-main .slider-grid .owl-carousel { padding: 0; margin: 0; }
    .gw-main .slider-grid .owl-item { padding: 0; }
    .gw-main .slider-grid .item, .gw-main .slider-grid .item a { height: auto; display: block; }
    .gw-main .slider-grid img { width: 100%; height: auto !important; aspect-ratio: 16 / 7; object-fit: cover; }
    .gw-body .modal { padding: 8px !important; }
    .gw-body .modal-dialog { margin: 8px auto; }
    .gw-body .modal-body img { max-width: 100%; height: auto; }
    .gw-main .container, .gw-main .container-fluid { padding-left: 12px; padding-right: 12px; }
    .gw-main [style*="margin-left: 470px"], .gw-main [style*="margin-right: 215px"] { margin-left: 0 !important; margin-right: 0 !important; }
    .gw-main .p-5 { padding: 1rem !important; }
    .gw-main .m-5 { margin: 1rem !important; }
}
.gw-main table thead tr, .gw-main table thead th, .gw-main table.dataTable thead th { background: var(--gw-key) !important; color: var(--gw-white) !important; border-color: var(--gw-key) !important; }

/* ==========================================================================
   Applicant login / registration page (Login/Registration_Login)
   ========================================================================== */
.gw-main .gw-auth { align-items: flex-start; padding-top: 24px; }
.gw-main .gw-auth .panel01 { width: 100%; max-width: none; flex: none; padding: 0; float: none; }
.gw-main .gw-auth .panel { display: flex; flex-direction: column; background: var(--gw-white) !important; border: 1px solid var(--gw-border) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important; margin-bottom: 20px; overflow: hidden; }
.gw-main .gw-auth .panel-heading { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.gw-main .gw-auth .panel-heading.hide { display: none; }
.gw-main .gw-auth .panel-heading .panel-title, .gw-main .gw-auth .panel > h3 { margin: 0 !important; padding: 14px 20px !important; background: var(--gw-key) !important; border: 0 !important; color: var(--gw-white) !important; font-size: 20px !important; font-weight: 600; text-align: left !important; }
.gw-main .gw-auth .panel-heading:nth-child(3) { order: 1; }
.gw-main .gw-auth .panel-body { order: 2; padding: 20px !important; }
.gw-main .gw-auth .gw-forgot { order: 3; align-self: flex-start; margin: -4px 20px 16px; color: var(--gw-key-2); font-weight: 600; text-decoration: underline; }
.gw-main .gw-auth .panel-heading:nth-child(2) { order: 4; padding: 16px 20px 20px !important; border-top: 1px solid var(--gw-border) !important; }
.gw-main .gw-auth .panel-heading:nth-child(2) a { display: block; text-decoration: none; }
.gw-main .gw-auth .panel-heading:nth-child(2) .panel-title { background: var(--gw-white) !important; border: 2px solid var(--gw-key) !important; border-radius: var(--gw-radius); color: var(--gw-key) !important; font-size: 16px !important; text-align: center !important; padding: 10px 16px !important; }
.gw-main .gw-auth .panel-heading:nth-child(2) a:hover .panel-title { background: var(--gw-key-5) !important; }
.gw-main .gw-auth .form-group { margin-bottom: 16px; }
.gw-main .gw-auth label.control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.gw-main .gw-auth .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
.gw-main .gw-auth .input-group .form-control { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.gw-main .gw-auth .input-group-addon { display: flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 12px; background: var(--gw-surface); border: 1px solid #606060; color: var(--gw-key); }
.gw-main .gw-auth .input-group-addon:first-child { border-right: 0; border-radius: var(--gw-radius) 0 0 var(--gw-radius); }
.gw-main .gw-auth .input-group-addon:last-child { border-left: 0; border-radius: 0 var(--gw-radius) var(--gw-radius) 0; cursor: pointer; }
.gw-main .gw-auth .form-group > .row { align-items: center; margin: 0 -6px; flex-wrap: nowrap; }
.gw-main .gw-auth .form-group > .row > [class*="col-"] { flex: 1 1 0; width: auto; max-width: none; padding: 0 6px; margin-top: 0 !important; }
.gw-main .gw-auth .form-group > .row > [class*="col-"]:last-child { flex: 0 0 auto; }
.gw-main .gw-auth #lblCaptcha { margin: 0; }
.gw-main .gw-auth #lblCaptcha img { margin-top: 0 !important; height: 40px; width: auto; }
.gw-main .gw-auth .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; background: none; border: 0; }
.gw-main .gw-auth .form-actions .btn { float: none !important; margin-left: auto; }
.gw-main .gw-auth .rememberme { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-weight: 400; }
.gw-main .gw-auth .rememberme input { position: static; opacity: 1; width: 20px; height: 20px; margin: 0; }
.gw-main .gw-auth .rememberme span { display: none; }
.gw-main .gw-auth .portlet { background: var(--gw-white); padding: 0 !important; border: 1px solid var(--gw-border) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important; overflow: hidden; }
.gw-main .gw-auth .portlet .heading { margin: 0; padding: 0; border: 0; background: none; }
.gw-main .gw-auth .portlet .heading h3 { margin: 0 !important; padding: 14px 20px !important; background: var(--gw-key) !important; border: 0 !important; color: var(--gw-white) !important; font-size: 20px !important; }
.gw-main .gw-auth .portlet .tab-pane { height: auto !important; max-height: 560px; padding: 20px; }
.gw-main .gw-auth .portlet .tab-pane h3 { font-size: 20px; margin-top: 0; }
@media (max-width: 767.98px) {
    .gw-main .gw-auth { padding-top: 12px; }
    .gw-main .gw-auth .portlet .tab-pane { max-height: none; }
}
.gw-main .gw-auth .portlet-title { padding: 0 !important; margin: 0 !important; border: 0 !important; min-height: 0 !important; }
.gw-main .gw-auth .rememberme input { display: inline-block !important; visibility: visible !important; -webkit-appearance: auto; appearance: auto; left: auto; }
.gw-main .gw-auth .rememberme { padding-left: 0 !important; }

/* Department login page (Login/Login) */
.gw-main .login-container { padding: 32px 0; }
.gw-main .login-container .fxt-btn-fill { width: 100%; border: 2px solid var(--gw-key); }
.gw-main .login-container input.form-control { min-height: 44px; }
.gw-main .login-container .login-box { width: 100%; max-width: var(--gw-container); margin: 0 auto; padding: 0 16px; }
.gw-main .login-container .flex-div { display: flex; align-items: center; gap: 40px; }
.gw-main .login-container .name-content { flex: 1 1 0; min-width: 0; }
.gw-main .login-container .name-content .page-title { font-size: 36px; line-height: 1.3; margin: 0 0 12px; color: var(--gw-key); }
.gw-main .login-container .name-content p { font-size: 16px; line-height: 1.5; color: var(--gw-text); margin: 0; }
.gw-main .login-container form#__AjaxAntiForgeryForm { flex: 0 0 420px; max-width: 100%; height: auto !important; }
.gw-main .login-container .fxt-content { background: var(--gw-white); border: 1px solid var(--gw-border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); padding: 0 0 20px; overflow: hidden; }
.gw-main .login-container .fxt-content > h3 { margin: 0 0 20px; padding: 14px 20px; background: var(--gw-key); color: var(--gw-white); font-size: 20px; }
.gw-main .login-container .fxt-form { padding: 0 20px; }
.gw-main .login-container .input-group { display: flex; flex-wrap: nowrap; }
.gw-main .login-container .input-group .form-control { flex: 1 1 auto; min-width: 0; }
.gw-main .login-container .input-group-addon { display: flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 12px; background: var(--gw-surface); border: 1px solid #606060; color: var(--gw-key); }
@media (max-width: 991.98px) {
    .gw-main .login-container { padding: 16px 0; }
    .gw-main .login-container .flex-div { flex-direction: column-reverse; align-items: stretch; gap: 24px; }
    .gw-main .login-container form#__AjaxAntiForgeryForm { flex: 1 1 auto; width: 100%; }
    .gw-main .login-container .name-content .page-title { font-size: 24px; }
    .gw-main .login-container .name-content p { font-size: 16px; }
}
.gw-main .gw-auth .rememberme input { opacity: 1 !important; position: static !important; clip: auto !important; transform: none !important; }
.gw-main .login-container form#__AjaxAntiForgeryForm { min-width: 0; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.gw-main .login-container .fxt-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box; }
.gw-main .login-container .fxt-form, .gw-main .login-container .fxt-form form { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; }
.gw-main .login-container .fxt-form a { font-size: 16px !important; }
.gw-main .login-container .fxt-form .row { margin-left: 0; margin-right: 0; align-items: center; }

.gw-main .news-title img, .gw-main .news-title1 img { width: 25px; height: 25px; }
.gw-main .leadership-div0 h2, .gw-main .leadership-div h2 { font-size: 16px; color: var(--gw-white); }
.gw-main .leadership-div0 > h2, .gw-main .leadership-div > h2 { background: var(--gw-key); }

/* ==========================================================================
   Department login (Login/Login): two-panel card
   ========================================================================== */
.gw-main .login-container { background: var(--gw-surface) !important; padding: 40px 16px !important; min-height: 0 !important; }
.gw-main .login-container .login-box { max-width: 960px; padding: 0; background: var(--gw-white); border: 1px solid var(--gw-border); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .10); overflow: hidden; }
.gw-main .login-container .flex-div { display: flex; align-items: stretch; gap: 0; }
.gw-main .login-container .name-content { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding: 40px; background: var(--gw-key); color: var(--gw-white); }
.gw-main .login-container .name-content::before { content: ''; display: block; width: 80px; height: 80px; margin-bottom: 20px; border-radius: 50%; background: var(--gw-white) url('../images/up-logo.png') center / 72px 72px no-repeat; }
.gw-main .login-container .name-content .page-title { color: var(--gw-white); font-size: 36px; margin: 0 0 12px; }
.gw-main .login-container .name-content p { color: var(--gw-white); font-size: 16px; line-height: 1.5; }
.gw-main .login-container form#__AjaxAntiForgeryForm { flex: 0 0 440px; }
.gw-main .login-container .fxt-content { border: 0; border-radius: 0; box-shadow: none; padding: 36px 36px 28px; }
.gw-main .login-container .fxt-content > h3 { margin: 0 0 24px; padding: 0 0 10px; background: none; color: var(--gw-key); font-size: 24px; border-bottom: 3px solid var(--gw-key); display: inline-block; }
.gw-main .login-container .fxt-form { padding: 0; }
.gw-main .login-container .fxt-form label { display: block; margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--gw-text); }
.gw-main .login-container .form-group, .gw-main .login-container #divPass { margin-bottom: 18px; }
.gw-main .login-container #divPass + br { display: none; }
.gw-main .login-container .input-group .form-control { height: 48px; border: 1px solid #606060; border-radius: 0 var(--gw-radius) var(--gw-radius) 0; }
.gw-main .login-container .input-group .form-control:not(:last-child) { border-radius: 0; }
.gw-main .login-container .input-group-addon { min-width: 48px; border-radius: var(--gw-radius) 0 0 var(--gw-radius); border-right: 0; }
.gw-main .login-container .input-group-addon:last-child { border-radius: 0 var(--gw-radius) var(--gw-radius) 0; border-right: 1px solid #606060; border-left: 0; cursor: pointer; }
.gw-main .login-container .input-group-addon:last-child:hover { background: var(--gw-key-5); }
.gw-main .login-container .field-icon { position: static !important; float: none !important; margin: 0 !important; }
.gw-main .login-container .gw-captcha > .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; }
.gw-main .login-container .gw-captcha > .row > [class*="col-"] { padding: 0; max-width: none; width: auto; }
.gw-main .login-container .gw-captcha > .row > .col-md-5 { flex: 1 1 0; min-width: 0; }
.gw-main .login-container .gw-captcha > .row > .col-md-7 { flex: 0 0 auto; }
.gw-main .login-container .gw-captcha .form-control { height: 48px; font-size: 16px; }
.gw-main .login-container #lblCaptcha { display: flex; align-items: center; gap: 10px; margin: 0; }
.gw-main .login-container #lblCaptcha img { margin: 0 !important; height: 48px; width: auto; border: 1px solid var(--gw-border); border-radius: var(--gw-radius); background: var(--gw-white); }
.gw-main .login-container .gw-refresh { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--gw-key); border-radius: var(--gw-radius); color: var(--gw-key); font-size: 14px !important; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gw-main .login-container .gw-refresh:hover { background: var(--gw-key-5); text-decoration: none; }
.gw-main .login-container .fxt-btn-fill { height: 48px; margin-top: 6px; font-size: 16px; }
.gw-main .login-container .gw-login-links { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; }
.gw-main .login-container .gw-login-links > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; text-align: left !important; }
.gw-main .login-container .gw-login-links a { font-size: 16px !important; font-weight: 600; text-decoration: underline; padding: 0 !important; }
@media (max-width: 991.98px) {
    .gw-main .login-container { padding: 16px 12px !important; }
    .gw-main .login-container .flex-div { flex-direction: column-reverse; }
    .gw-main .login-container form#__AjaxAntiForgeryForm { flex: 1 1 auto; }
    .gw-main .login-container .fxt-content { padding: 24px 20px; }
    .gw-main .login-container .name-content { padding: 24px 20px; }
    .gw-main .login-container .name-content::before { width: 56px; height: 56px; background-size: 50px 50px; margin-bottom: 12px; }
    .gw-main .login-container .name-content .page-title { font-size: 20px; }
}
@media (max-width: 400px) {
    .gw-main .login-container .gw-captcha > .row { flex-wrap: wrap; }
    .gw-main .login-container .gw-captcha > .row > .col-md-5 { flex: 1 1 100%; }
}
.gw-main .login-container form#__AjaxAntiForgeryForm { flex: 0 0 440px !important; width: 440px; max-width: 100%; }
.gw-main .login-container .gw-captcha > .row { flex-wrap: wrap; gap: 10px; }
.gw-main .login-container .gw-captcha > .row > .col-md-5 { flex: 1 1 100%; }
.gw-main .login-container .gw-captcha > .row > .col-md-7 { flex: 1 1 100%; }
.gw-main .login-container #lblCaptcha { justify-content: space-between; }
@media (max-width: 991.98px) { .gw-main .login-container form#__AjaxAntiForgeryForm { flex: 1 1 auto !important; width: 100%; } }
.gw-main .login-container .name-content { flex: 1 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; }

/* ==========================================================================
   DBIM 3.0 type scale (section 4.3)
   Desktop: H1 36, H2 24, H3 20, paragraph 16 / 14, small 12
   Mobile:  H1 24, H2 20, H3 16, paragraph 14 / 12, small 10
   ========================================================================== */
:where(.gw-body) h1 { font-size: 36px; }
:where(.gw-body) h2 { font-size: 24px; }
:where(.gw-body) h3 { font-size: 20px; }
:where(.gw-body) :is(h4, h5, h6) { font-size: 16px; }
:where(.gw-main) :is(small, .small) { font-size: 12px; }
.gw-lang-mark { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--gw-white); border-radius: var(--gw-radius); font-weight: 600; line-height: 1.5; }
@media (max-width: 767.98px) {
    body.gw-body { font-size: 14px; }
    :where(.gw-body) h1 { font-size: 24px; }
    :where(.gw-body) h2 { font-size: 20px; }
    :where(.gw-body) h3 { font-size: 16px; }
    :where(.gw-body) :is(h4, h5, h6) { font-size: 14px; }
    :where(.gw-main) :is(p, li, td, th, label) { font-size: 14px; }
    :where(.gw-main) :is(small, .small) { font-size: 10px; }
    .gw-footer, .gw-footer p { font-size: 14px; }
    .gw-footer h2 { font-size: 16px; }
    .gw-footer-bottom, .gw-footer-bottom p { font-size: 12px; }
    .gw-main .gw-auth .panel-heading .panel-title, .gw-main .gw-auth .panel > h3, .gw-main .gw-auth .portlet .heading h3 { font-size: 16px !important; }
    .gw-main .login-container .fxt-content > h3 { font-size: 20px; }
}

/* ==========================================================================
   Cookie consent (DBIM 7.6.1): bottom of the page, Inclusive White background
   ========================================================================== */
.gw-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10002; background: var(--gw-white); color: var(--gw-text); border-top: 3px solid var(--gw-key); box-shadow: 0 -4px 16px rgba(0, 0, 0, .18); }
.gw-cookie[hidden] { display: none; }
.gw-cookie .gw-container { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.gw-cookie p { flex: 1 1 420px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--gw-text); }
.gw-cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gw-cookie button, .gw-cookie-dialog button.gw-btn-2, .gw-cookie-dialog button.gw-btn-1 { min-height: 44px; padding: 10px 20px; border: 2px solid var(--gw-key); border-radius: var(--gw-radius); font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.gw-btn-1 { background: var(--gw-key); color: var(--gw-white); }
.gw-btn-1:hover { background: var(--gw-key-2); border-color: var(--gw-key-2); }
.gw-btn-2 { background: var(--gw-white); color: var(--gw-key); }
.gw-btn-2:hover { background: var(--gw-key-5); }
.gw-cookie-dialog { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .8); }
.gw-cookie-dialog[hidden] { display: none; }
.gw-cookie-box { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; background: var(--gw-white); color: var(--gw-text); border-radius: 8px; padding: 24px; }
.gw-cookie-box h2 { margin: 0 0 12px; font-size: 24px; color: var(--gw-key); }
.gw-cookie-box p { font-size: 14px; margin: 0 0 12px; }
.gw-cookie-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--gw-border); }
.gw-cookie-row input { width: 24px; height: 24px; flex: 0 0 24px; margin: 2px 0 0; accent-color: var(--gw-key); }
.gw-cookie-row label { margin: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
.gw-cookie-row span { display: block; font-size: 14px; font-weight: 400; color: var(--gw-grey-3); }
.gw-cookie-box .gw-cookie-actions { margin-top: 16px; justify-content: flex-end; }
.gw-footer .gw-linklike { background: none; border: 0; padding: 4px 0; min-height: 28px; color: var(--gw-white); font: inherit; cursor: pointer; text-align: left; }
.gw-footer .gw-linklike:hover { text-decoration: underline; }
html.gw-contrast .gw-cookie-dialog { background: #000 !important; }

/* ==========================================================================
   Forms (DBIM Annexure B): labels on top of fields, required fields marked
   ========================================================================== */
.gw-main .gw-auth label.control-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--gw-text); }
.gw-req { color: var(--gw-error); font-weight: 700; }
.gw-form-note { margin: 0 0 16px; font-size: 14px; color: var(--gw-grey-3); }@media (max-width: 767.98px) {
    .gw-cookie .gw-container { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .gw-cookie p { flex: 1 1 100%; font-size: 12px; }
    .gw-cookie-actions { width: 100%; gap: 6px; }
    .gw-cookie .gw-cookie-actions button { flex: 1 1 auto; padding: 8px 10px; font-size: 14px; }
    .gw-cookie-box { padding: 16px; }
    .gw-cookie-box h2 { font-size: 20px; }
    .gw-cookie-row label { font-size: 14px; }
    .gw-cookie-row span { font-size: 12px; }
}
/* "Remember me" on the applicant login: show the real checkbox */
.gw-main .gw-auth .rememberme input[type="checkbox"] { position: static !important; opacity: 1 !important; visibility: visible !important; display: inline-block !important; width: 24px !important; height: 24px !important; min-height: 0; margin: 0 !important; z-index: auto !important; clip: auto !important; -webkit-appearance: auto !important; appearance: auto !important; accent-color: var(--gw-key); }

/* ==========================================================================
   Department login: compact, so the whole form fits on one screen without
   scrolling (also at 125% / 150% browser zoom on a laptop).
   ========================================================================== */
@media (min-width: 992px) {
    .gw-main .login-container { padding: 16px !important; }
    .gw-main .login-container .login-box { max-width: 900px; }
    .gw-main .login-container .name-content { padding: 24px 32px; }
    .gw-main .login-container .name-content::before { width: 64px; height: 64px; margin-bottom: 12px; background-size: 58px 58px; }
    .gw-main .login-container .name-content .page-title { font-size: 24px; margin-bottom: 8px; }
    .gw-main .login-container .name-content p { font-size: 14px; }
    .gw-main .login-container form#__AjaxAntiForgeryForm { flex: 0 0 420px !important; width: 420px; }
    .gw-main .login-container .fxt-content { padding: 16px 28px 14px; }
    .gw-main .login-container .fxt-content > h3 { font-size: 20px; margin: 0 0 8px; padding-bottom: 6px; border-bottom-width: 2px; }
    .gw-main .login-container .gw-form-note { margin: 0 0 8px; font-size: 12px; }
    .gw-main .login-container .fxt-form label { margin-bottom: 2px; font-size: 14px; }
    .gw-main .login-container .form-group, .gw-main .login-container #divPass { margin-bottom: 8px; }
    .gw-main .login-container .input-group .form-control, .gw-main .login-container .gw-captcha .form-control, .gw-main .login-container input.form-control { height: 40px; min-height: 40px; font-size: 16px; }
    .gw-main .login-container .input-group-addon { min-width: 40px; }
    /* captcha: box, picture and refresh on one line */
    .gw-main .login-container .gw-captcha > .row { flex-wrap: nowrap; gap: 8px; }
    .gw-main .login-container .gw-captcha > .row > .col-md-5 { flex: 1 1 0; min-width: 0; }
    .gw-main .login-container .gw-captcha > .row > .col-md-7 { flex: 0 0 auto; }
    .gw-main .login-container #lblCaptcha { gap: 8px; }
    .gw-main .login-container #lblCaptcha img { height: 40px; }
    .gw-main .login-container .gw-refresh { min-height: 40px; width: 40px; padding: 0; justify-content: center; font-size: 0 !important; gap: 0; }
    .gw-main .login-container .gw-refresh i { font-size: 16px; }
    .gw-main .login-container .fxt-btn-fill { height: 44px; margin-top: 4px; font-size: 16px; }
    .gw-main .login-container .fxt-form > form > div[style*="height:10px"] { display: none; }
    .gw-main .login-container .gw-login-links { margin-top: 8px; }
    .gw-main .login-container .gw-login-links a { font-size: 14px !important; }
    .gw-main .login-container .text-xs-center { display: none; }
}
@media (min-width: 992px) {
    /* user ID and password side by side; everything else full width */
    .gw-main .login-container form#__AjaxAntiForgeryForm { flex: 0 0 540px !important; width: 540px; }
    .gw-main .login-container .fxt-form > form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
    .gw-main .login-container .fxt-form > form > * { grid-column: 1 / -1; min-width: 0; }
    .gw-main .login-container .fxt-form > form > .form-group:not(.gw-captcha):not([style*="display:none"]) { grid-column: 1; }
    .gw-main .login-container .fxt-form > form > #divPass { grid-column: 2; }
    .gw-main .login-container .fxt-form > form > .gw-form-note { margin: 0 0 6px; }
    .gw-main .login-container .gw-captcha > .row { align-items: center; }
    .gw-main .login-container .gw-captcha > .row > [class*="col-"] { margin: 0 !important; }
    .gw-main .login-container #lblCaptcha { line-height: 0; }
    .gw-main .login-container #lblCaptcha img { display: block; }
    .gw-main .login-container .gw-captcha .form-control { max-width: none; }
    .gw-main .login-container .fxt-btn-fill { height: 44px !important; min-height: 44px; }
    .gw-main .login-container .fxt-form > form > div:not([class]):not([id]) { display: none; }
    .gw-main .login-container .fxt-content > h3 { margin-bottom: 6px; }
}
@media (min-width: 992px) {
    /* the browser drops the inner <form> tag (a form inside a form), so the fields are direct children of .fxt-form */
    .gw-main .login-container .fxt-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
    .gw-main .login-container .fxt-form > * { grid-column: 1 / -1; min-width: 0; }
    .gw-main .login-container .fxt-form > .form-group:not(.gw-captcha) { grid-column: 1; }
    .gw-main .login-container .fxt-form > #divPass { grid-column: 2; }
    .gw-main .login-container .fxt-form > .gw-form-note { margin: 0 0 6px; }
    .gw-main .login-container .fxt-form > div:not([class]):not([id]), .gw-main .login-container .fxt-form > br { display: none; }
    .gw-main .login-container .fxt-form .form-control { height: 40px !important; min-height: 40px !important; }
    .gw-main .login-container #lblCaptcha img { height: 40px !important; }
    .gw-main .login-container .gw-refresh { min-height: 40px !important; height: 40px; width: 40px; }
    .gw-main .login-container .fxt-btn-fill { height: 44px !important; min-height: 44px !important; margin-top: 2px; }
    .gw-main .login-container .form-group, .gw-main .login-container #divPass { margin-bottom: 8px !important; }
}

/* Department login: captcha box, picture and refresh button on one tidy line */
.gw-main .login-container .fxt-form .gw-captcha > .row { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; }
.gw-main .login-container .fxt-form .gw-captcha > .row > [class*="col-"] { display: flex; align-items: stretch; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; float: none !important; }
.gw-main .login-container .fxt-form .gw-captcha > .row > .col-md-5 { flex: 1 1 0 !important; min-width: 0; }
.gw-main .login-container .fxt-form .gw-captcha > .row > .col-md-7 { flex: 0 0 auto !important; }
.gw-main .login-container .fxt-form .gw-captcha .form-control { width: 100%; height: 44px !important; min-height: 44px !important; margin: 0 !important; }
.gw-main .login-container .fxt-form #lblCaptcha { display: flex !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; line-height: 0; }
.gw-main .login-container .fxt-form #lblCaptcha img { display: block; height: 44px !important; width: auto !important; max-width: 170px; margin: 0 !important; object-fit: contain; border: 1px solid var(--gw-border); border-radius: var(--gw-radius); background: var(--gw-white); }
.gw-main .login-container .fxt-form a.gw-refresh { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; overflow: hidden; font-size: 0 !important; line-height: 1 !important; border: 1px solid var(--gw-key); border-radius: var(--gw-radius); color: var(--gw-key); text-decoration: none !important; white-space: nowrap; }
.gw-main .login-container .fxt-form a.gw-refresh i { font-size: 18px !important; line-height: 1; margin: 0; }
.gw-main .login-container .fxt-form a.gw-refresh:hover { background: var(--gw-key-5); }
@media (max-width: 400px) {
    .gw-main .login-container .fxt-form .gw-captcha > .row { flex-wrap: wrap !important; }
    .gw-main .login-container .fxt-form .gw-captcha > .row > .col-md-5 { flex: 1 1 100% !important; }
}

/* ==========================================================================
   Home banner: every slide sits in the same 16:5 frame. The picture is shown
   whole (never stretched, never cropped); any spare space is a neutral band.
   ========================================================================== */
.gw-main .slider-grid { background: var(--gw-surface) !important; padding: 0 !important; }
.gw-main .slider-grid #owl-banner, .gw-main .slider-grid #owl-banner.owl-carousel { padding: 0 !important; margin: 0 !important; }
.gw-main .slider-grid #owl-banner .owl-item { padding: 0 !important; }
.gw-main .slider-grid #owl-banner .item, .gw-main .slider-grid #owl-banner .item > a { display: block !important; height: auto !important; margin: 0; padding: 0; line-height: 0; }
.gw-main .slider-grid #owl-banner .item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 5 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--gw-surface);
}
.gw-main .slider-grid .banner-overlay { display: none; }

/* ==========================================================================
   Applicant login page: captcha picture, refresh button and box on one tidy
   line, in the login card and in the "forgot password" / "create ID" pop-ups.
   ========================================================================== */
.gw-main .gw-refresh-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0 !important; margin: 0 !important; border: 1px solid var(--gw-key); border-radius: var(--gw-radius); background: var(--gw-white); color: var(--gw-key) !important; font-size: 18px; line-height: 1; text-decoration: none !important; }
.gw-main .gw-refresh-btn:hover { background: var(--gw-key-5); }
.gw-main .gw-auth label#lblCaptcha, .gw-main .modal label#lblCaptcha { display: block; margin: 0 !important; padding: 0; line-height: 0; height: 44px; }
.gw-main .gw-auth label#lblCaptcha img, .gw-main .modal label#lblCaptcha img { display: block; height: 44px !important; width: auto !important; max-width: 170px; margin: 0 !important; object-fit: contain; border: 1px solid var(--gw-border); border-radius: var(--gw-radius); background: var(--gw-white); }
.gw-main .modal div:has(> label#lblCaptcha) { display: flex !important; align-items: center; gap: 8px; }

/* login card: box | picture | refresh */
.gw-main .gw-auth .panel-body .form-group > .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; margin: 0 !important; }
.gw-main .gw-auth .panel-body .form-group > .row > [class*="col-"] { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; float: none !important; font-weight: 400 !important; }
.gw-main .gw-auth .panel-body .form-group > .row > [class*="col-"]:first-child { flex: 1 1 0 !important; min-width: 0; }
.gw-main .gw-auth .panel-body .form-group > .row > [class*="col-"]:not(:first-child) { flex: 0 0 auto !important; }

/* forgot password pop-up */
.gw-main #model_forget .modal-headers { padding: 14px 20px !important; background: var(--gw-key-5); border-bottom: 2px solid var(--gw-key); }
.gw-main #model_forget .modal-headers h2 { margin: 0; font-size: 20px; color: var(--gw-key); }
.gw-main #model_forget .modal-headers h2 i, .gw-main #model_forget .modal-headers h2 label { color: var(--gw-key); font-size: 20px; margin: 0; cursor: default; }
.gw-main #model_forget .modal-headers h2 label { font-family: var(--gw-font) !important; font-weight: 600; }
.gw-main #model_forget .modal-headers .close { float: right; width: 44px; height: 44px; margin: -8px -8px 0 0; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--gw-key); opacity: 1; cursor: pointer; }
.gw-main #model_forget .modal-body { padding: 20px; }
.gw-main #model_forget .modal-body .row { margin: 0; display: block; }
.gw-main #model_forget .modal-body .row > [class*="col-"] { float: none; width: 100%; max-width: 100%; padding: 0; margin-bottom: 14px; }
.gw-main #model_forget .modal-body .col-sm-8 > .form-group { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; width: 100%; max-width: 100%; float: none; }
.gw-main #model_forget .modal-body .col-sm-8 > .form-group > .col-sm-6 { float: none; width: auto; max-width: none; padding: 0; margin: 0; }
.gw-main #model_forget .modal-body .col-sm-8 > .form-group > .col-sm-6:first-child { order: 2; flex: 0 0 auto; }
.gw-main #model_forget .modal-body .col-sm-8 > .form-group > .col-sm-6:last-child { order: 1; flex: 1 1 0; min-width: 0; }
.gw-main #model_forget .modal-body .col-sm-4 .btn { display: block; width: 100%; margin: 0; }
.gw-main #model_forget #forget_msg:empty { display: none; }
.gw-main .gw-auth .panel-body label#lblCaptcha img { max-width: 132px; }

/* ==========================================================================
   Applicant login page on desktop: login, "create ID" and application status
   all visible on one screen. Login card on the left; instructions with the
   application-status card under them on the right. Mobile keeps one column.
   ========================================================================== */
@media (min-width: 992px) {
    .gw-main .inner-grid:has(.gw-auth) { min-height: 0 !important; padding-bottom: 16px; }
    .gw-main .gw-auth { display: grid !important; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; align-items: start; margin: 0 !important; padding-top: 12px; }
    .gw-main .gw-auth > .col-md-4, .gw-main .gw-auth .panel01 { display: contents !important; }
    .gw-main .gw-auth .panel01 > .panel { margin: 0 !important; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type { grid-column: 1; grid-row: 1 / span 2; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type { grid-column: 2; grid-row: 2; }
    .gw-main .gw-auth > .panel03 { grid-column: 2; grid-row: 1; width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }

    /* headings */
    .gw-main .gw-auth .panel-heading .panel-title, .gw-main .gw-auth .panel > h3, .gw-main .gw-auth .portlet .heading h3 { padding: 10px 16px !important; font-size: 16px !important; }

    /* login card: user ID and password side by side, then captcha, then actions */
    .gw-main .gw-auth .panel01 > .panel:first-of-type { flex-flow: row wrap; align-items: center; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type > .panel-heading:nth-child(3),
    .gw-main .gw-auth .panel01 > .panel:first-of-type > .panel-body { flex: 0 0 100%; max-width: 100%; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type > .panel-body { padding: 12px 16px 8px !important; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type fieldset > * { grid-column: 1 / -1; min-width: 0; }
    /* the hidden alert is the first <div> in the fieldset, so the user ID group is the 2nd and the password group the 3rd */
    .gw-main .gw-auth .panel01 > .panel:first-of-type fieldset > .form-group:nth-of-type(2) { grid-column: 1; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type fieldset > .form-group:nth-of-type(3) { grid-column: 2; }
    .gw-main .gw-auth .gw-form-note { margin: 0 0 6px; font-size: 12px; }
    .gw-main .gw-auth .form-group { margin-bottom: 8px !important; }
    .gw-main .gw-auth label.control-label { margin-bottom: 2px; font-size: 14px; }
    .gw-main .gw-auth .form-control { height: 40px !important; min-height: 40px !important; }
    .gw-main .gw-auth .input-group-addon { min-width: 40px; }
    .gw-main .gw-auth .panel-body label#lblCaptcha, .gw-main .gw-auth .panel-body label#lblCaptcha img { height: 40px !important; }
    .gw-main .gw-auth .panel-body label#lblCaptcha img { max-width: 150px; }
    .gw-main .gw-auth .panel-body .gw-refresh-btn { width: 40px; height: 40px; flex-basis: 40px; }
    .gw-main .gw-auth .form-actions .btn { min-height: 40px; padding: 8px 28px; }
    /* footer of the card: "forgot password" on the left, "create ID" on the right, one line */
    .gw-main .gw-auth .panel01 > .panel:first-of-type > .gw-forgot { flex: 1 1 auto; align-self: center; margin: 0 16px 12px !important; font-size: 14px; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type > .panel-heading:nth-child(2) { flex: 0 0 auto; padding: 0 16px 12px 0 !important; border-top: 0 !important; }
    .gw-main .gw-auth .panel-heading:nth-child(2) .panel-title { padding: 8px 16px !important; font-size: 14px !important; }

    /* application status: box and button on one line */
    .gw-main .gw-auth .panel01 > .panel:last-of-type > .panel-body { padding: 12px 16px !important; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type fieldset { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type fieldset > .form-group { flex: 1 1 0; min-width: 0; margin: 0 !important; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type .form-actions { flex: 0 0 auto; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type .form-actions .btn { margin: 0; white-space: nowrap; }
    .gw-main .gw-auth .panel > h3 i { margin-right: 6px; }

    /* instructions: scroll inside the card instead of pushing the page down */
    .gw-main .gw-auth .portlet .tab-pane { max-height: max(150px, calc(100vh - 470px)) !important; overflow-y: auto !important; padding: 12px 16px; }
    .gw-main .gw-auth .portlet .tab-pane h3 { font-size: 16px; margin: 0 0 6px; }
    .gw-main .gw-auth .portlet .tab-pane, .gw-main .gw-auth .portlet .tab-pane * { font-size: 14px; line-height: 1.5; }
    .gw-main .gw-auth .portlet .tab-pane br + br { display: none; }
}

/* Applicant login page: login card on the right, instructions and application status on the left */
@media (min-width: 992px) {
    .gw-main .gw-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
    .gw-main .gw-auth .panel01 > .panel:first-of-type { grid-column: 2; grid-row: 1 / span 2; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type { grid-column: 1; grid-row: 2; }
    .gw-main .gw-auth > .panel03 { grid-column: 1; grid-row: 1; }
}

/* Applicant login page: both sides the same width and the same height */
@media (min-width: 992px) {
    .gw-main .gw-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
    .gw-main .gw-auth .panel01 > .panel:first-of-type { height: 100%; align-content: flex-start; }
    .gw-main .gw-auth > .panel03 { display: flex; flex-direction: column; min-height: 0; }
    .gw-main .gw-auth > .panel03 > .portlet { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0 !important; }
    .gw-main .gw-auth > .panel03 > .portlet > .tab-content { position: relative; flex: 1 1 auto; min-height: 120px; }
    /* the instructions fill whatever height the login card gives and scroll inside it */
    .gw-main .gw-auth > .panel03 > .portlet > .tab-content > .tab-pane { position: absolute; inset: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; }
}

/* Applicant login page: instructions shown in full (no inner scroll); the two sides still match in
   width and height because the shorter side stretches to the taller one */
@media (min-width: 992px) {
    .gw-main .gw-auth { grid-template-rows: auto auto; align-items: stretch; }
    .gw-main .gw-auth > .panel03 > .portlet > .tab-content { position: static; min-height: 0; flex: 1 1 auto; }
    .gw-main .gw-auth > .panel03 > .portlet > .tab-content > .tab-pane { position: static !important; inset: auto; height: auto !important; max-height: none !important; overflow: visible !important; }
    .gw-main .gw-auth .portlet .tab-pane { max-height: none !important; overflow: visible !important; }
    /* when the left side is taller, the login card grows with it and keeps its footer line at the bottom */
    .gw-main .gw-auth .panel01 > .panel:first-of-type { height: 100%; align-content: space-between; }
    .gw-main .gw-auth .panel01 > .panel:last-of-type { align-self: end; width: 100%; }
}

/* ==========================================================================
   Pop-ups on the public pages (create login ID, forgot password, OTP,
   application status, notices): readable heading band, dimmed background,
   never cut off at the top, tidy rows.
   ========================================================================== */
.gw-body .modal { overflow-y: auto; }
.gw-body .modal.in, .gw-body .modal.show { opacity: 1; }
.gw-body .modal.in .modal-dialog, .gw-body .modal.show .modal-dialog { transform: none; }
.gw-body .modal-backdrop.in, .gw-body .modal-backdrop.show { opacity: .6; }
.gw-body .modal-dialog { margin: 24px auto !important; }
.gw-body .modal-content { border: 1px solid var(--gw-key-4); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }

.gw-body .modal-header, .gw-body .modal-headers { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; height: auto !important; min-height: 52px; padding: 10px 16px !important; background: var(--gw-key-5) !important; border: 0 !important; border-bottom: 2px solid var(--gw-key) !important; color: var(--gw-key) !important; }
.gw-body .modal-header::before, .gw-body .modal-header::after { display: none; }
.gw-body .modal-header > *, .gw-body .modal-headers > * { float: none !important; margin: 0 !important; }
.gw-body .modal-header .modal-title, .gw-body .modal-header h1, .gw-body .modal-header h2, .gw-body .modal-header h3, .gw-body .modal-header h4, .gw-body .modal-header h5,
.gw-body .modal-header label, .gw-body .modal-header i, .gw-body .modal-header span, .gw-body .modal-header div,
.gw-body .modal-headers h2, .gw-body .modal-headers label, .gw-body .modal-headers i { color: var(--gw-key) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 !important; }
.gw-body .modal-header label, .gw-body .modal-headers label { display: inline; cursor: default; font-family: var(--gw-font) !important; }
.gw-body .modal-header .close, .gw-body .modal-header .btn-close, .gw-body .modal-headers .close { order: 2; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0 !important; margin: -4px -8px -4px 0 !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--gw-radius); color: var(--gw-key) !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1 !important; opacity: 1 !important; text-shadow: none; cursor: pointer; }
.gw-body .modal-header .close:hover, .gw-body .modal-headers .close:hover { background: var(--gw-white) !important; border-color: var(--gw-key) !important; }

.gw-body .modal-body { padding: 16px 20px; color: var(--gw-text); }
.gw-body .modal-body::after { content: ''; display: block; clear: both; }
.gw-body .modal-body .panel02 { float: none; width: 100%; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.gw-body .modal-body label { margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--gw-text); }
.gw-body .modal-body .form-group { margin-bottom: 12px; }
.gw-body .modal-body .Mandatory { color: var(--gw-error) !important; font-weight: 700; }
.gw-body .modal-body .btn { white-space: nowrap; }
.gw-body .modal-body .row { align-items: flex-end; }
.gw-body .modal-footer { border-top: 1px solid var(--gw-border); padding: 12px 20px; }

/* create login ID */
.gw-main #myModal .modal-dialog { max-width: 560px; }
.gw-main #myModal .modal-body .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.gw-main #myModal .modal-body .row { margin-left: -8px; margin-right: -8px; }
.gw-main #myModal .modal-body .btn { min-height: 44px; }

@media (max-width: 575.98px) {
    .gw-body .modal-dialog { margin: 8px !important; }
    .gw-body .modal-header .modal-title, .gw-body .modal-header h1, .gw-body .modal-header h2, .gw-body .modal-header h3, .gw-body .modal-header h4, .gw-body .modal-header label, .gw-body .modal-header i, .gw-body .modal-header div, .gw-body .modal-headers h2, .gw-body .modal-headers label, .gw-body .modal-headers i { font-size: 16px !important; }
    .gw-body .modal-body { padding: 12px; }
    .gw-body .modal-body .btn { white-space: normal; }
}
.gw-body .modal-backdrop.in, .gw-body .modal-backdrop.show, body.gw-body > .modal-backdrop { opacity: .6 !important; background-color: #000 !important; }
.gw-body .modal .modal-dialog { scroll-margin-top: 24px; }
/* an open pop-up must not be shifted up 50px (that hid its heading and close button above the screen) */
.gw-body .modal.show .modal-dialog, .gw-body .modal.in .modal-dialog, .gw-body .modal[style*="display: block"] .modal-dialog, .gw-body .modal[style*="display:block"] .modal-dialog { transform: none !important; -webkit-transform: none !important; top: 0 !important; }
.gw-body .modal-header .close, .gw-body .modal-headers .close { display: inline-flex !important; align-items: center; justify-content: center; font-family: Arial, sans-serif !important; overflow: visible; }

/* ---------- Accessibility controls: invert, saturation, big cursor ---------- */
html.gw-invert { background: #FFFFFF; filter: invert(1) hue-rotate(180deg); }
html.gw-saturate { filter: grayscale(1); }
html.gw-invert.gw-saturate { filter: invert(1) hue-rotate(180deg) grayscale(1); }
html.gw-invert img, html.gw-invert video, html.gw-invert iframe { filter: invert(1) hue-rotate(180deg); }
html.gw-cursor, html.gw-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 11h-7l4 8-3 1.500-4-8-4 5z' fill='%23150202' stroke='%23FFFFFF' stroke-width='1.500' stroke-linejoin='round'/%3E%3C/svg%3E") 10 4, auto !important; }
html.gw-cursor a, html.gw-cursor a *, html.gw-cursor button, html.gw-cursor button *, html.gw-cursor [role="button"], html.gw-cursor label, html.gw-cursor select, html.gw-cursor summary, html.gw-cursor input[type="submit"], html.gw-cursor input[type="button"], html.gw-cursor input[type="checkbox"], html.gw-cursor input[type="radio"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.500a1.500 1.500 0 0 1 3 0V10l6.300 1.200a2 2 0 0 1 1.600 2.300l-1 6A3 3 0 0 1 16 22h-4.500a3 3 0 0 1-2.300-1.100L4.500 15a1.600 1.600 0 0 1 2.300-2.200L9 14.500z' fill='%23150202' stroke='%23FFFFFF' stroke-width='1.200' stroke-linejoin='round'/%3E%3C/svg%3E") 20 4, pointer !important; }
.gw-a11y { width: 360px; }
.gw-a11y-grid button { text-transform: uppercase; letter-spacing: .3px; font-size: 12px; line-height: 1.4; }
.gw-a11y-grid .gw-wide { gap: 8px; }
.gw-a11y-grid .gw-wide .gw-icon { width: 24px; height: 24px; flex-basis: 24px; }

/* Popup header a little thinner */
.gw-body .modal-header, .gw-body .modal-headers { min-height: 42px; padding: 4px 14px !important; }
.gw-body .modal-header .close, .gw-body .modal-header .btn-close, .gw-body .modal-headers .close { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; margin: 0 -6px 0 0 !important; font-size: 26px !important; }

/* Popup header: one shade darker of the same colour group (second lightest), dark text stays readable */
.gw-body .modal-header, .gw-body .modal-headers { background: var(--gw-key-4, #A3BBF3) !important; }

/* ==========================================================================
   Phone and tablet fixes found in the 375px / 768px check of every public page
   ========================================================================== */
/* Bootstrap rows pull 15px out on each side; the page gutter was 12px, so every page scrolled 3px sideways */
@media (max-width: 991.98px) {
    .gw-body .container, .gw-body .container-fluid { padding-left: 15px !important; padding-right: 15px !important; }
    .gw-body .row > .container, .gw-body .row > aside.container { max-width: 100%; }
}
/* Media and wide blocks never wider than the screen */
.gw-main iframe, .gw-main video, .gw-main embed, .gw-main object { max-width: 100%; }
@media (max-width: 991.98px) {
    .gw-main .mrgtpbt iframe, .gw-main .mrgtpbt video { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    .gw-main .org-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .gw-main .card_tran { overflow-x: auto; }
    .gw-main table.table_2 { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; }
    .gw-main img { max-width: 100%; height: auto; }
    .gw-main pre, .gw-main code { white-space: pre-wrap; word-break: break-word; }
    .gw-main td, .gw-main th, .gw-main p, .gw-main li, .gw-main a { overflow-wrap: anywhere; }
}
/* PM MITRA pages: the drop-down menu was 100% wide but started 20px in, which added a sideways scroll */
@media (max-width: 992px) {
    .navmenu ul.primary-row, .navmenu ul.secondary-row { width: auto !important; max-width: calc(100vw - 40px); box-sizing: border-box; }
}

/* Pop-ups on phones and tablets: use the screen width instead of a 55% strip */
@media (max-width: 767.98px) {
    .gw-body .modal { padding: 12px !important; }
    .gw-body .modal .modal-dialog { max-width: 100% !important; width: auto !important; margin: 8px auto !important; }
    .gw-body .modal .modal-content { max-height: calc(100vh - 40px); overflow-y: auto; }
    .gw-body .modal-headers .blinking-button img, .gw-body .modal-header .blinking-button img { height: 18px !important; max-width: 62vw !important; }
    .gw-body .modal-body { padding: 12px !important; }
    .gw-body .modal-body h2 { font-size: 20px; }
    .gw-body .modal-body h5 { font-size: 14px; line-height: 1.5; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .gw-body .modal { padding: 24px !important; }
    .gw-body .modal .modal-dialog { max-width: 82% !important; width: auto !important; }
}

/* Decorative corners (e.g. the notice-board tab) stick out a few pixels; keep them from adding a sideways scroll on phones */
@media (max-width: 991.98px) {
    .gw-main { overflow-x: hidden; overflow-x: clip; }
}

/* Notice board heading: no slanted corner pieces on either side */
.gw-body .news-title::before, .gw-body .news-title::after { content: none !important; display: none !important; }

/* Home pop-up: the "Digital Seva Connect" picture shrinks on very narrow phones so the close button always stays in view */
.gw-body #handloompopup .modal-headers .blinking-button { flex: 0 1 auto; min-width: 0; }
.gw-body #handloompopup .modal-headers .blinking-button img { max-width: 100% !important; width: auto !important; height: auto !important; max-height: 20px; }

/* Leadership cards on the home page: every card in a row is the same height and the blue name band
   always reaches the bottom, whether the name takes one line or two */
.gw-main .row > [class*="col-"] > .item.box-style { box-sizing: border-box; height: calc(100% - 30px); display: flex; flex-direction: column; }
.gw-main .item.box-style > .leadership-div0 { flex: 1 1 auto; display: flex; flex-direction: column; height: auto; }
.gw-main .item.box-style > .leadership-div0 > img { flex: 0 0 auto; align-self: center; }
.gw-main .item.box-style > .leadership-div0 > h2 { flex: 1 1 auto; margin-bottom: 0; }

/* Leadership cards (layout with .lg-row-center / .lg-card-wrap): same idea, cards of one row equal in height,
   name band stretched to the bottom */
.gw-main .lg-row-center { align-items: stretch; }
.gw-main .lg-row-center > .lg-card-wrap { display: flex; }
.gw-main .lg-card-wrap > .leadership-div0 { flex: 1 1 auto; display: flex; flex-direction: column; height: auto; min-width: 0; }
.gw-main .lg-card-wrap > .leadership-div0 > img { flex: 0 0 auto; align-self: center; }
.gw-main .lg-card-wrap > .leadership-div0 > h2 { flex: 1 1 auto; margin-bottom: 0; }

/* Close button text must never be pushed off-screen by an older theme rule */
.gw-body .modal-header .close, .gw-body .modal-headers .close, .gw-body .modal .close { text-indent: 0 !important; background-image: none !important; overflow: visible !important; }

/* ==========================================================================
   Colour theme (accessibility panel). Each theme is ONE colour group of the
   DBIM primary palette, with the manual's own values:
     Burgundy       #6C1340 #A32966 #DB70A6 #EBADCC #FAEBF2
     Purple         #29136C #4729A3 #8B70DB #BDADEB #EEEBFA
     Blue (default) #162F6A #214AAB #5279D7 #A3BBF3 #D2DFFF
     Green          #0F5757 #2D8686 #75BDBD #A6D9D9 #D9F2F2
     Chrome Yellow  #5D3E00 #916100 #DDA73A #F4D390 #FFEECC
     Cinnamon Red   #771D1D #A72626 #D75151 #FAAAAA #FCDADA
   Green keeps its darkest shade for links and hover too: white text on #2D8686
   has a contrast of 4.3:1, below the 4.5:1 that is needed.
   ========================================================================== */
html.gw-theme-burgundy { --gw-key: #6C1340; --gw-key-2: #A32966; --gw-key-3: #DB70A6; --gw-key-4: #EBADCC; --gw-key-5: #FAEBF2; }
html.gw-theme-purple   { --gw-key: #29136C; --gw-key-2: #4729A3; --gw-key-3: #8B70DB; --gw-key-4: #BDADEB; --gw-key-5: #EEEBFA; }
html.gw-theme-green    { --gw-key: #0F5757; --gw-key-2: #0F5757; --gw-key-3: #75BDBD; --gw-key-4: #A6D9D9; --gw-key-5: #D9F2F2; }
html.gw-theme-yellow   { --gw-key: #5D3E00; --gw-key-2: #916100; --gw-key-3: #DDA73A; --gw-key-4: #F4D390; --gw-key-5: #FFEECC; }
html.gw-theme-red      { --gw-key: #771D1D; --gw-key-2: #A72626; --gw-key-3: #D75151; --gw-key-4: #FAAAAA; --gw-key-5: #FCDADA; }

.gw-a11y-grid .gw-a11y-theme { grid-column: 1 / -1; padding: 10px; border: 2px solid var(--gw-key); border-radius: var(--gw-radius); }
.gw-a11y-theme h3 { margin: 0 0 8px; color: var(--gw-key); font-size: 13px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .3px; }
.gw-theme-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gw-a11y-grid .gw-a11y-theme button { min-height: 0; padding: 8px 4px; gap: 5px; border-width: 1px; font-size: 11.5px; text-transform: none; letter-spacing: 0; color: #150202; background: #FFFFFF; }
.gw-a11y-grid .gw-a11y-theme button:hover { background: var(--gw-key-5); }
.gw-a11y-grid .gw-a11y-theme button[aria-pressed="true"] { background: #FFFFFF; color: #150202; border-width: 3px; font-weight: 700; }
.gw-theme-dot { display: block; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #606060; }
.gw-a11y-theme button[aria-pressed="true"] .gw-theme-dot { box-shadow: 0 0 0 3px #150202; }

/* ---- date, day and time in the top strip ---- */
.gw-utility .gw-clock { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; color: var(--gw-white); font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.gw-utility .gw-clock .gw-icon { width: 20px; height: 20px; flex-basis: 20px; fill: currentColor; }
.gw-utility .gw-clock time { font-variant-numeric: tabular-nums; }
.gw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .gw-utility .gw-clock { flex-basis: 100%; justify-content: center; min-height: 28px; font-size: 13px; } .gw-utility ul:last-child { justify-content: center; } }