/* ==========================================================================
   PT Sans / PT Serif (ParaType, SIL OFL - licence in content/fonts). Served
   from the site, not a CDN: no third-party request per visitor. The subsets
   carry unicode-range, so a Cyrillic reader never downloads the Latin files.
   ========================================================================== */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSans-400-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSans-400-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSans-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSans-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSans-700-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSans-700-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSans-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSans-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSerif-400-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSerif-400-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSerif-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/content/fonts/PTSerif-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSerif-700-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSerif-700-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSerif-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/PTSerif-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Responsive and visual refresh layer.

   Loaded last, after site.css and bootstrap.css, so it wins without any of
   them being edited. Nothing here changes markup order, wording or behaviour:
   the same elements are shown in the same sequence, only fluid instead of
   fixed and with the existing palette tidied up.

   Palette is unchanged and is declared once here so the rest of the file
   stops repeating literals.
   ========================================================================== */

:root {
    --ink: #4e5a62; /* body text */
    --bar: #02387d; /* navigation bar - the institutional navy of the emblem */
    --ink-soft: #6b767d;
    --link: #0069b4;   /* darkened from #007ed9: 4.2 contrast on white was under the 4.5 minimum */
    --link-hover: #f3b200;
    --primary: #02387d;      /* actions, matching the bar */
    --primary-dark: #012a5e;
    --surface: #ffffff;
    --canvas: #d7e4f5;       /* page ground */
    --canvas-deep: #aecaec;  /* under the bar, where the wash starts */
    --canvas-soft: #eaf1fb;  /* where it ends, at the foot of the page */
    --rule: #c2d2e6;
    --rule-soft: #d6e1f0;
    /* A hairline instead of a float: the register of a printed form. */
    --shadow: 0 0 0 1px var(--rule-soft);
    --radius: 2px;
    --gutter: 20px;
    --page-max: 990px;
    --tint: #f2f6fc;         /* panel ground, one step off the surface */
    --captcha-w: 206px;      /* the 200px picture the server draws, plus its frame */
    --captcha-gap: 10px;
    --captcha-field: 150px;
    --ok: #1c6b3f;          /* an answer, not a brand colour: the same in every theme */
    --ok-bg: #eef6f0;
    --ok-rule: #bcdcc7;
    --bad: #a02c1d;         /* darker than the plain red it replaces, which measured 4.0 */
    --bad-bg: #fdf1ef;
    --bad-rule: #f0cdc6;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
    /* 'open sans' was declared but never loaded, so this silently fell back to
       Tahoma. A system stack renders natively and costs no request. */
    font-family: 'PT Sans', -apple-system, "Segoe UI", Roboto, Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--canvas) !important;
    -webkit-text-size-adjust: 100%;
}

/* The wrapper each layout puts around everything carried min-width:1000px
   inline; the layouts now use this class instead. */
/* Titles in the serif of the pair: the register of a printed document. */
h1, h2, h3, h4, h5, h6,
.page > p[style*="text-align:center"],
.page > div[style*="text-align:center"] > div {
    font-family: 'PT Serif', Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: .2px;
}

.app-shell {
    min-width: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Carries the wash rather than body, so it spans the full page whatever the
       content height. The deep tone is held to 150px first: above that it sits
       behind the masthead, where none of it would be seen. */
    background-image: linear-gradient(180deg,
        var(--canvas-deep) 0,
        var(--canvas-deep) 150px,
        var(--canvas) 55%,
        var(--canvas-soft) 100%);
}

.app-shell > footer {
    margin-top: auto;
}

.app-shell > br {
    display: none;
}

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

/* Underlining every link permanently is what dated the page most. Keep the
   colours, move the underline to hover. */
a, a:visited {
    text-decoration: none !important;
    color: var(--link);
    transition: color .15s ease;
}

a:hover, a:focus {
    text-decoration: underline !important;
    color: var(--link-hover) !important;
}

/* Bootstrap rings every clicked link; :focus-visible below keeps it for the keyboard. */
a:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Same specificity as the a:focus reset above, so the keyboard ring survives it. */
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Navy masthead, ending on the bar's own colour so the two read as one block.
   Possible only with the white-on-transparent lockups set below. */
header {
    height: auto;
    background-color: var(--bar);
    background-image: linear-gradient(180deg, #05499a 0%, #02387d 55%);
}

/* Signed-in strip now sits on navy. */
header > div[style*="float:right"] {
    color: #ffffff;
}

header > div[style*="float:right"] a {
    color: #ffd89a !important;
}

/* The class name comes from a resource (logoRu / logoKg / logoEn / logoFr /
   logoKk), which is how the language switch changes the image. */
/* White-on-transparent versions; logoRu.png / logoKg.png are kept as they were. */
.logoRu {
    background-image: url(/content/logoRu-white.png);
}

.logoKg {
    background-image: url(/content/logoKg-white.png);
}

.logoEn {
    background-image: url(/content/logoEn.png);
}

.logoFr {
    background-image: url(/content/logoFr.png);
}

.logoKk {
    background-image: url(/content/logoKk.png);
}

.logoRu, .logoKg, .logoEn, .logoFr, .logoKk {
    height: 84px;
    max-width: 760px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* content-box so the phone padding below actually insets the image. */
    background-origin: content-box;
}

/* The English and French names are the longest, so those lockups are wider;
   the extra room keeps them the same height as the rest. */
.logoEn, .logoFr {
    max-width: 980px;
}

/* Kyrgyz ornament, unrolled from the ring on the ministry's own emblem rather
   than drawn from scratch, so the motif is the institution's own. Sits between
   the masthead and the menu; negative margins undo the bar's gutter. */
.header_menu::before {
    content: "";
    display: block;
    height: 16px;
    margin: 0 calc(var(--gutter) * -1);
    background: #02387d url(/content/ornament-gold.png) repeat-x center / auto 16px;
}

.header_menu {
    height: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 0 var(--gutter);
    background-color: var(--bar);
}

/* Row of menu entries. The markup keeps its order; only the mechanism changes
   from float to flex so it can wrap and align. */
.header_menu > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    /* Centred as a group; margin-left:auto on .lang is blocked by the reset above. */
    justify-content: center;
    gap: 2px 6px;
    /* 1260px is where the tightened band below ends, so the widest row (French,
       ~1196px) still fits on one line at every width that uses full-size type. */
    max-width: 1260px;
    margin: 0 auto;
    /* Vertical padding, not height: the entry pills must never end up flush
       against the top or bottom edge of the bar. */
    min-height: 40px;
    padding: 4px 0;
}

/* The box carries the hover tint and active pill, so the icon is inside it. */
.header_menu > div > div {
    float: none !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 7px;
}

.header_menu > div > div:not(.lang) {
    padding: 0 10px;
    border-radius: 2px;
    transition: background-color .12s ease;
}

.header_menu > div > div:not(.lang):hover {
    background-color: rgba(255, 255, 255, .14);
}

/* The section being shown: the same pairing as the side menu, so both read alike. */
.header_menu > div > div.nav-on,
.header_menu > div > div.nav-on:hover {
    background-color: #d3e0f2;
}

.header_menu > div > div.nav-on > a,
.header_menu > div > div.nav-on > a:hover,
.header_menu > div > div.nav-on > a:focus {
    color: var(--bar) !important;
    font-weight: 600;
    background-color: transparent;
}

.header_menu > div > div.nav-on .mi {
    color: var(--bar);
    opacity: 1;
}

.header_menu a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #ffffff;
    white-space: nowrap;
}

/* Stretched link: the whole box is clickable, not just the label. */
.header_menu > div > div:not(.lang) {
    position: relative;
}

.header_menu > div > div:not(.lang) > a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Horizontal padding moved to the box above; the link keeps only the vertical
   part so the pill hugs icon and text together. */
.header_menu > div > div > a {
    padding-left: 0;
    padding-right: 0;
}

/* No background: the box above draws it. :hover only, so nothing sticks after a click. */
.header_menu a:hover {
    color: var(--link-hover) !important;
    text-decoration: none !important;
}

/* Drops Bootstrap's dotted a:focus ring. */
.header_menu a:focus {
    outline: none;
    text-decoration: none !important;
}

/* Keyboard focus only. */
.header_menu a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}

.header_menu img {
    flex: none;
}

/* Inline icons replace the 16px bitmaps: they inherit the link colour, follow its
   hover, and stay sharp on high-density screens. */
.header_menu .mi {
    width: 18px;
    height: 18px;
    flex: none;
    /* The icon sits beside the link, not inside it, so it does not inherit the
       link colour - without this it would be drawn in the bar's own colour. */
    color: #ffffff;
    opacity: .8;
}

.header_menu a:hover .mi,
.header_menu a:focus .mi {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Language dropdown
   -------------------------------------------------------------------------- */

.lang {
    position: relative;
    margin-left: auto;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 2px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.lang-btn:hover {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .45);
}

.lang-btn .mi { width: 16px; height: 16px; opacity: .9; }
/* Not ".caret": Bootstrap owns that name and draws a border triangle over it. */
.lang-btn .lang-caret { width: 12px; height: 12px; transition: transform .15s ease; }
.lang.is-open .lang-btn .lang-caret { transform: rotate(180deg); }

.lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    min-width: 168px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-shadow: 0 3px 10px rgba(30, 41, 51, .14);
}

.lang.is-open .lang-menu {
    display: block;
}

.header_menu .lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 2px;
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
}

.header_menu .lang-menu a:hover {
    background-color: #f2f4f5;
    color: var(--ink) !important;
    text-decoration: none !important;
}

.lang-menu img {
    width: 18px;
    height: auto;
    border-radius: 2px;
}

/* Theme picker: same pill, icon only, so the bar keeps the width it was measured at. */
.theme-pick {
    margin-left: 4px;
}

.theme-pick .lang-btn {
    gap: 5px;
    padding: 8px 9px;
}

.theme-dot {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(30, 41, 51, .28);
}

.theme-dot-blue {
    background: linear-gradient(135deg, #05499a, #012a5e);
}

.theme-dot-silver {
    background: linear-gradient(135deg, #ffffff, #c9d0d8);
}

.theme-dot-graphite {
    background: linear-gradient(135deg, #4a5560, #232a31);
}

.theme-dot-bronze {
    background: linear-gradient(135deg, #b07a5c, #7d4a34);
}

/* Split dot: the entry that follows whatever the site is configured with. */
.theme-dot-auto {
    background: linear-gradient(135deg, #05499a 0 50%, #d3d9e0 50% 100%);
}

/* Marks the entry in force, so three options do not read as three buttons. */
.lang-menu a.theme-on {
    font-weight: 600;
}

.lang-menu a.theme-on::after {
    content: "\2713";
    margin-left: auto;
    padding-left: 10px;
    opacity: .65;
}


/* Signed-in strip above the menu. */
header > div[style*="float:right"] {
    float: none !important;
    margin: 0 auto !important;
    padding: 6px var(--gutter);
    max-width: 1180px;
    text-align: right;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Menu toggle - hidden until the narrow breakpoint
   -------------------------------------------------------------------------- */

.nav-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.nav-toggle:hover {
    background-color: rgba(255, 255, 255, .12);
}

.nav-toggle-bars {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
    display: inline-block;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* ==========================================================================
   Menu bar, light variant. Applies only when the bar carries .bar-light,
   which _Header.cshtml decides; without it the navy bar above stands.
   ========================================================================== */

.header_menu.bar-light {
    background-color: #ffffff;
    box-shadow: inset 0 -1px 0 #d7dde5;
}

.header_menu.bar-light a,
.header_menu.bar-light > div > div > a {
    color: #02387d;
}

.header_menu.bar-light .mi {
    color: #02387d;
    opacity: .75;
}

.header_menu.bar-light > div > div:not(.lang):hover {
    background-color: #e9eef5;
}

.header_menu.bar-light a:hover {
    color: #02387d !important;
}

.header_menu.bar-light a:focus-visible {
    outline-color: #02387d;
}

/* Current section: navy pill, the reverse of the light bar around it. */
.header_menu.bar-light > div > div.nav-on,
.header_menu.bar-light > div > div.nav-on:hover {
    background-color: #02387d;
}

.header_menu.bar-light > div > div.nav-on > a,
.header_menu.bar-light > div > div.nav-on > a:hover,
.header_menu.bar-light > div > div.nav-on > a:focus {
    color: #ffffff !important;
}

.header_menu.bar-light > div > div.nav-on .mi {
    color: #ffffff;
    opacity: 1;
}

.header_menu.bar-light .lang-btn {
    border-color: rgba(2, 56, 125, .28);
    color: #02387d;
}

.header_menu.bar-light .lang-btn:hover {
    background-color: #e9eef5;
    border-color: rgba(2, 56, 125, .45);
}

.header_menu.bar-light .nav-toggle {
    color: #02387d;
}

.header_menu.bar-light .nav-toggle:hover {
    background-color: #e9eef5;
}

/* ==========================================================================
   THEME: silver. Chosen by the Web.config key SiteTheme; the blue look above
   is what shows without it. Restores the photo on the home page and steps the
   masthead and pages through shades of grey instead of navy.
   ========================================================================== */

/* Dark lockups again: the white ones would vanish on a light masthead.
   logoRu.png has an opaque white ground, which showed as a block on the
   gradient, so a transparent copy of it is used instead. */
.theme-silver .logoRu {
    background-image: url(/content/logoRu-dark.png);
}

.theme-silver .logoKg {
    background-image: url(/content/logoKg-dark.png);
}

.theme-silver .logoEn {
    background-image: url(/content/logoEn-dark.png);
}

.theme-silver .logoFr {
    background-image: url(/content/logoFr-dark.png);
}

.theme-silver .logoKk {
    background-image: url(/content/logoKk-dark.png);
}

.theme-silver header {
    background-color: #f4f6f8;
    background-image: linear-gradient(180deg, #ffffff 0%, #eef1f4 30%, #e2e6ec 55%);
}

.theme-silver .header_menu::before {
    background-color: #e2e6ec;
    background-image: url(/content/ornament-dark.png);
}

.theme-silver header > div[style*="float:right"] {
    color: var(--ink);
}

.theme-silver header > div[style*="float:right"] a {
    color: var(--link) !important;
}

/* Menu bar: the next step down, so the masthead reads as layered. */
.theme-silver .header_menu,
.theme-silver .header_menu.bar-light {
    background-color: #d8dde4;
    background-image: linear-gradient(180deg, #dfe4ea 0%, #ccd3dc 100%);
    box-shadow: inset 0 -1px 0 #b9c1cb;
}

.theme-silver .header_menu a,
.theme-silver .header_menu > div > div > a {
    color: #3b464f;
}

.theme-silver .header_menu .mi {
    color: #3b464f;
    opacity: .75;
}

.theme-silver .header_menu a:hover {
    color: #1f2a33 !important;
}

.theme-silver .header_menu > div > div:not(.lang):hover {
    background-color: rgba(255, 255, 255, .55);
}

.theme-silver .header_menu > div > div.nav-on,
.theme-silver .header_menu > div > div.nav-on:hover {
    background-color: #ffffff;
}

.theme-silver .header_menu > div > div.nav-on > a,
.theme-silver .header_menu > div > div.nav-on > a:hover,
.theme-silver .header_menu > div > div.nav-on > a:focus {
    color: #1f2a33 !important;
}

.theme-silver .header_menu > div > div.nav-on .mi {
    color: #1f2a33;
    opacity: 1;
}

.theme-silver .header_menu .lang-btn {
    border-color: rgba(59, 70, 79, .3);
    color: #3b464f;
}

.theme-silver .header_menu .lang-btn:hover {
    background-color: rgba(255, 255, 255, .6);
}

.theme-silver .header_menu .nav-toggle {
    color: #3b464f;
}

/* Pages: the same stepping, in grey. */
.theme-silver.app-shell {
    background-image: linear-gradient(180deg,
        #cfd5dd 0,
        #cfd5dd 150px,
        #e3e7ec 55%,
        #f5f7f9 100%);
}

.theme-silver footer {
    background-color: #e8ebef;
    border-top-color: #cbd2da;
}

/* Home page: the photograph returns, and the drawn hero steps aside. bgRu.png and
   bgKg.png are the same 876px file; hero-hd.jpg is it resampled to 1920 and
   sharpened, so the browser is not left to stretch it more than twofold. */
.theme-silver .mainRu,
.theme-silver .mainKg {
    background-image: url(/content/hero-hd.jpg);
    background-size: cover;
    background-position: center center;
    background-color: #dfe4ea;
}

/* No warm halo over a photograph; the emblem alone carries the mark. */
.theme-silver .mainRu::before,
.theme-silver .mainKg::before {
    display: none;
}

/* Tucked into the corner and drained of colour, so it reads as a silver mark
   rather than the navy-and-gold badge the blue theme uses. */
.theme-silver .mainRu::after,
.theme-silver .mainKg::after {
    filter: grayscale(1) brightness(1.06) contrast(.92)
            drop-shadow(0 6px 16px rgba(255, 255, 255, .75));
}

/* Side menu and hero rows follow the grey. */
.theme-silver .menu_list li.menu_list_active,
.theme-silver .menu_list li.menu_list_active:hover {
    background-color: #dde2e8;
    border-left-color: #5b6773;
}

.theme-silver .menu_list li.menu_list_active a,
.theme-silver .menu_list li:hover > a:only-child {
    color: #2b353d !important;
}

.theme-silver .menu_list li:hover {
    background-color: #eef1f4;
    border-left-color: #c3ccd4;
}

.theme-silver .mainRu > span a:hover, .theme-silver .mainKg > span a:hover,
.theme-silver .mainRu > span a:focus, .theme-silver .mainKg > span a:focus {
    background-color: #dde2e8;
    border-left-color: #5b6773;
    color: #2b353d !important;
}

/* Rules follow each theme now that borders carry the structure. */
.theme-silver {
    --rule: #c7ccd4; --rule-soft: #dde1e7;
    --primary: #4a5666; --primary-dark: #363f4c;
    --link: #3f5a73; --link-hover: #2b3f52;
    --tint: #f4f5f7;
}

.theme-graphite {
    --rule: #b6bcc4; --rule-soft: #d3d8dd;
    --primary: #2f3841; --primary-dark: #1e252c;
    --link: #41586b; --link-hover: #2b3a46;
    --tint: #f3f4f6;
}

.theme-bronze {
    --rule: #d8c3b4; --rule-soft: #e8d8cc;
    --primary: #7d4a34; --primary-dark: #5f3626;
    --link: #8a5230; --link-hover: #63391f;
    --tint: #faf5f1;
}

/* ==========================================================================
   THEME: graphite
   ========================================================================== */

.theme-graphite header {
    background-color: #2f3841;
    background-image: linear-gradient(180deg, #4a5560 0%, #2f3841 55%);
}

.theme-graphite .header_menu::before {
    background-color: #2f3841;
    background-image: url(/content/ornament-light.png);
}

.theme-graphite header > div[style*="float:right"] a {
    color: #ffd89a !important;
}

.theme-graphite .header_menu,
.theme-graphite .header_menu.bar-light {
    background-color: #f2f4f6;
    background-image: linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.theme-graphite .header_menu a,
.theme-graphite .header_menu > div > div > a {
    color: #2f3841;
}

.theme-graphite .header_menu .mi {
    color: #2f3841;
    opacity: .75;
}

.theme-graphite .header_menu a:hover {
    color: #2f3841 !important;
}

.theme-graphite .header_menu > div > div:not(.lang):hover {
    background-color: #e6e9ed;
}

.theme-graphite .header_menu > div > div.nav-on,
.theme-graphite .header_menu > div > div.nav-on:hover {
    background-color: #2f3841;
}

.theme-graphite .header_menu > div > div.nav-on > a,
.theme-graphite .header_menu > div > div.nav-on > a:hover,
.theme-graphite .header_menu > div > div.nav-on > a:focus {
    color: #ffffff !important;
}

.theme-graphite .header_menu > div > div.nav-on .mi {
    color: #ffffff;
    opacity: 1;
}

.theme-graphite .header_menu .lang-btn,
.theme-graphite .header_menu .nav-toggle {
    color: #2f3841;
    border-color: rgba(0, 0, 0, .22);
}

.theme-graphite.app-shell {
    background-image: linear-gradient(180deg, #c9cfd6 0, #c9cfd6 150px, #dfe3e8 55%, #f3f5f7 100%);
}

.theme-graphite footer {
    background-color: #e6e9ed;
}

.theme-graphite .mainRu,
.theme-graphite .mainKg {
    background-image: url(/content/hero-hd-graphite.jpg);
    background-size: cover;
    background-position: center center;
}

.theme-graphite .mainRu::before,
.theme-graphite .mainKg::before {
    display: none;
}

.theme-graphite .mainRu::after,
.theme-graphite .mainKg::after {
    filter: grayscale(1) brightness(1.35) contrast(.9) drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
}

.theme-graphite .menu_list li.menu_list_active,
.theme-graphite .menu_list li.menu_list_active:hover {
    background-color: #dde1e6;
    border-left-color: #2f3841;
}

.theme-graphite .menu_list li.menu_list_active a,
.theme-graphite .menu_list li:hover > a:only-child,
.theme-graphite .mainRu > span a:hover, .theme-graphite .mainKg > span a:hover {
    color: #2f3841 !important;
}

.theme-graphite .menu_list li:hover,
.theme-graphite .mainRu > span a:hover, .theme-graphite .mainKg > span a:hover {
    background-color: #dde1e6;
    border-left-color: #2f3841;
}

/* ==========================================================================
   THEME: bronze
   ========================================================================== */

.theme-bronze header {
    background-color: #7d4a34;
    background-image: linear-gradient(180deg, #a8714f 0%, #7d4a34 55%);
}

.theme-bronze .header_menu::before {
    background-color: #7d4a34;
    background-image: url(/content/ornament-gold.png);
}

.theme-bronze header > div[style*="float:right"] a {
    color: #ffd89a !important;
}

.theme-bronze .header_menu,
.theme-bronze .header_menu.bar-light {
    background-color: #f7f1ec;
    background-image: linear-gradient(180deg, #ffffff 0%, #f7f1ec 100%);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.theme-bronze .header_menu a,
.theme-bronze .header_menu > div > div > a {
    color: #6c3f2c;
}

.theme-bronze .header_menu .mi {
    color: #6c3f2c;
    opacity: .75;
}

.theme-bronze .header_menu a:hover {
    color: #6c3f2c !important;
}

.theme-bronze .header_menu > div > div:not(.lang):hover {
    background-color: #f0e3da;
}

.theme-bronze .header_menu > div > div.nav-on,
.theme-bronze .header_menu > div > div.nav-on:hover {
    background-color: #7d4a34;
}

.theme-bronze .header_menu > div > div.nav-on > a,
.theme-bronze .header_menu > div > div.nav-on > a:hover,
.theme-bronze .header_menu > div > div.nav-on > a:focus {
    color: #ffffff !important;
}

.theme-bronze .header_menu > div > div.nav-on .mi {
    color: #ffffff;
    opacity: 1;
}

.theme-bronze .header_menu .lang-btn,
.theme-bronze .header_menu .nav-toggle {
    color: #6c3f2c;
    border-color: rgba(0, 0, 0, .22);
}

.theme-bronze.app-shell {
    background-image: linear-gradient(180deg, #e6d3c6 0, #e6d3c6 150px, #f1e6dd 55%, #faf6f2 100%);
}

.theme-bronze footer {
    background-color: #f0e4db;
}

.theme-bronze .mainRu,
.theme-bronze .mainKg {
    background-image: url(/content/hero-hd-bronze.jpg);
    background-size: cover;
    background-position: center center;
}

.theme-bronze .mainRu::before,
.theme-bronze .mainKg::before {
    display: none;
}

.theme-bronze .mainRu::after,
.theme-bronze .mainKg::after {
    /* grayscale first, then tint: sepia on its own leaves the navy showing. */
    filter: grayscale(1) sepia(.95) saturate(2.4) hue-rotate(-12deg) brightness(1.02)
            drop-shadow(0 6px 16px rgba(255, 255, 255, .5));
}

.theme-bronze .menu_list li.menu_list_active,
.theme-bronze .menu_list li.menu_list_active:hover {
    background-color: #efe0d5;
    border-left-color: #7d4a34;
}

.theme-bronze .menu_list li.menu_list_active a,
.theme-bronze .menu_list li:hover > a:only-child,
.theme-bronze .mainRu > span a:hover, .theme-bronze .mainKg > span a:hover {
    color: #7d4a34 !important;
}

.theme-bronze .menu_list li:hover,
.theme-bronze .mainRu > span a:hover, .theme-bronze .mainKg > span a:hover {
    background-color: #efe0d5;
    border-left-color: #7d4a34;
}

/* Panel menus follow the theme; without this they stayed on the global blue. */
.theme-silver .mainRu > span a,
.theme-silver .mainKg > span a,
.theme-silver .menu_list li > a:only-child {
    color: #3b464f;
}

.theme-silver .mainRu > span .mi,
.theme-silver .mainKg > span .mi,
.theme-silver .menu_list li .mi {
    color: #3b464f;
    opacity: .8;
}

/* Panel menus follow the theme; without this they stayed on the global blue. */
.theme-graphite .mainRu > span a,
.theme-graphite .mainKg > span a,
.theme-graphite .menu_list li > a:only-child {
    color: #2f3841;
}

.theme-graphite .mainRu > span .mi,
.theme-graphite .mainKg > span .mi,
.theme-graphite .menu_list li .mi {
    color: #2f3841;
    opacity: .8;
}

/* Panel menus follow the theme; without this they stayed on the global blue. */
.theme-bronze .mainRu > span a,
.theme-bronze .mainKg > span a,
.theme-bronze .menu_list li > a:only-child {
    color: #7d4a34;
}

.theme-bronze .mainRu > span .mi,
.theme-bronze .mainKg > span .mi,
.theme-bronze .menu_list li .mi {
    color: #7d4a34;
    opacity: .8;
}

/* The personal-area sub-navigation sets the old bar colour inline. */
div[style*="background-color: #4e5a62"] {
    background-color: var(--bar) !important;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Page containers - same widths on a wide screen, fluid below
   -------------------------------------------------------------------------- */

.page {
    width: 100%;
    max-width: 960px;
    margin: 28px auto;
    padding: 22px;
    background-color: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left;
}

.page_center {
    width: 100%;
    max-width: var(--page-max);
    margin: 40px auto 20px;
    padding: 0 var(--gutter);
}

/* Floated beside .page_text on wide screens, stacked below the breakpoint. */
.menu_list {
    width: 100%;
    max-width: 380px;
    margin-top: 0;
    padding: 6px 6px 6px 0;
    background-color: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Padding on the row, not the link; the transparent border reserves the active marker. */
.menu_list li {
    position: relative;
    margin-bottom: 2px;
    padding: 9px 14px;
    border-left: 4px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: background-color .12s ease, border-color .12s ease;
}

/* :only-child: the last row is the button and keeps its own size. */
.menu_list li > a:only-child {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* Whole row clickable; :only-child keeps it off the button row. */
.menu_list li > a:only-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Keyboard focus only, no ring after a mouse click. */
.menu_list li > a:focus {
    outline: none;
}

.menu_list li > a:focus-visible {
    outline: 2px solid var(--bar);
    outline-offset: 3px;
}

.menu_list li:hover {
    background-color: #e6edf8;
    border-left-color: #a9bfdd;
}

/* No row tint behind the call-to-action button. */
.menu_list li:has(> a:nth-child(2)):hover {
    background-color: transparent;
    border-left-color: transparent;
}

/* Beats the global amber a:hover. :only-child keeps it off the button row. */
.menu_list li:hover > a:only-child,
.menu_list li:hover > a:only-child:focus {
    color: var(--bar) !important;
    text-decoration: none !important;
}

/* Active row; qualified so it outranks the border shorthand above. */
.menu_list li.menu_list_active,
.menu_list li.menu_list_active:hover {
    background-color: #d3e0f2;
    border-left-color: var(--bar);
}

.menu_list li.menu_list_active a,
.menu_list_active a {
    color: var(--bar);
    font-weight: 700;
}

.page_text {
    width: 100%;
    max-width: 590px;
    margin-top: 0;
    padding: 20px;
    background-color: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.rounded {
    border-radius: var(--radius);
}

/* Own formatting context, so the panel fills what the menu's float leaves. */
@media (min-width: 768px) {
    .page_text {
        float: none !important;
        width: auto;
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.mainRu, .mainKg {
    height: auto;
    min-height: 420px;
    margin-top: 0;
    padding: 40px var(--gutter);
    display: flex;
    align-items: flex-start;
    /* Fills whatever the shell has left, so no grey band appears under it. */
    flex: 1 1 auto;
    /* The same photograph as the silver theme, put through a navy duotone, with
       the gradient left underneath so the edges of the frame stay in the palette. */
    position: relative;
    background-color: var(--bar);
    background-image:
        url(/content/hero-hd-blue.jpg),
        linear-gradient(158deg, #1a63bd 0%, #0b4a9c 34%, #02387d 72%, #012c62 100%);
    background-size: cover, auto;
    background-position: center center, 0 0;
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
}

/* Halo behind the emblem, so the badge reads as lit rather than pasted on. */
.mainRu::before, .mainKg::before {
    content: "";
    position: absolute;
    right: calc(3% - 60px);
    bottom: calc(5% - 60px);
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,
        rgba(250, 205, 135, .30) 0%,
        rgba(250, 205, 135, .12) 40%,
        rgba(250, 205, 135, 0) 68%);
    pointer-events: none;
}

/* Emblem in its own colours: it is a filled badge, so a silhouette reads as a disc. */
.mainRu::after, .mainKg::after {
    content: "";
    position: absolute;
    right: 3%;
    bottom: 5%;
    width: 300px;
    height: 300px;
    background: url(/content/mvd-emblem-lg.png) center / contain no-repeat;
    filter: saturate(1.3) brightness(1.2) drop-shadow(0 12px 26px rgba(0, 10, 36, .55));
    opacity: .62;
    pointer-events: none;
}

.mainRu > span, .mainKg > span {
    margin: 0 !important;
    width: 100%;
    max-width: 440px;
    padding: 22px 26px 22px 18px;
    background: #ffffff;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(0, 20, 55, .16), 0 2px 6px rgba(0, 20, 55, .12);
    line-height: 1.4;
}

/* The page's real navigation; <br> hidden since the links are blocks. */
.mainRu > span br, .mainKg > span br {
    display: none;
}

/* Header icons at hero size; inside the link, so they follow its colour. */
.mainRu > span .mi, .mainKg > span .mi {
    width: 26px;
    height: 26px;
    flex: none;
    opacity: .75;
}

.mainRu > span a:hover .mi, .mainKg > span a:hover .mi {
    opacity: 1;
}

.mainRu > span a, .mainKg > span a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-left: 4px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: background-color .12s ease, border-color .12s ease;
}

/* Beats the global amber a:hover. */
.mainRu > span a:hover, .mainKg > span a:hover,
.mainRu > span a:focus, .mainKg > span a:focus {
    background-color: #d3e0f2;
    border-left-color: var(--bar);
    color: var(--bar) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.service_card {
    float: none;
    width: 100%;
    max-width: 300px;
    margin: 0 10px 10px 0;
    padding: 16px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input, select, textarea {
    max-width: 100%;
    font-family: inherit;
    font-size: 14px;
}

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
select,
textarea,
.sel {
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 40px;
    padding: 8px 12px;
    text-indent: 0;
    line-height: 1.4;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(2, 56, 125, .16);
}

label {
    font-weight: 600;
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Buttons

   The same style string is repeated inline across several views. Those inline
   rules still apply; these selectors give them a consistent, modern finish
   without any view having to change.
   -------------------------------------------------------------------------- */

input[type="submit"],
input[type="button"][style*="#1f63cf"],
button[type="submit"],
.btn-style,
a[style*="#1f63cf"] {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    min-height: 40px;
    padding: 10px 20px !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

/* Cancel sits beside the primary action: same shape, quieter weight, so the
   pair reads as one control group rather than a button next to a stray link. */
input[type="submit"] + a,
input[type="button"][style*="#1f63cf"] + a,
button[type="submit"] + a,
.btn-style + a,
a[style*="#1f63cf"] + a {
    display: inline-block;
    min-height: 40px;
    margin-left: 6px;
    padding: 10px 20px;
    background-color: transparent;
    color: var(--primary) !important;
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

input[type="submit"] + a:hover,
input[type="button"][style*="#1f63cf"] + a:hover,
button[type="submit"] + a:hover,
.btn-style + a:hover,
a[style*="#1f63cf"] + a:hover {
    background-color: var(--canvas-soft);
    border-color: var(--primary);
    color: var(--primary) !important;
    text-decoration: none !important;
}

input[type="submit"]:hover,
input[type="button"][style*="#1f63cf"]:hover,
button[type="submit"]:hover,
.btn-style:hover,
a[style*="#1f63cf"]:hover {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* The action pair shares the width of the fields above it, so their left and
   right edges line up instead of the buttons stopping short. */
#btn_container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

/* Each starts at its own label width and then grows to fill the row, so a long
   translation is never clipped; if the pair no longer fits, cancel wraps under. */
#btn_container > input,
#btn_container > a {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Tables - never force the page wider than the screen
   -------------------------------------------------------------------------- */

table {
    max-width: 100%;
}

.gs-table thead th {
    background-color: #eef0f1;
    color: var(--ink);
}

.gs-table td, .gs-table th {
    border-top: 1px solid var(--rule-soft);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
    float: none;
    width: 100%;
    margin-top: 40px;
    padding: 16px var(--gutter);
    border-top: 1px solid var(--rule);
    font-size: 11px;
    /* Full ink, not --ink-soft: at 11px on the themes' tinted footers the soft
       grey measured 3.7-3.9 against white, under the 4.5 minimum. */
    color: var(--ink);
    background-color: var(--surface);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* Tightened here; past this the bar folds onto a tidy second row, icons kept. */
@media (min-width: 768px) and (max-width: 1259px) {
    .header_menu {
        padding: 0 10px;
    }

    .header_menu > div {
        gap: 4px 3px;
    }

    .header_menu > div > div:not(.lang) {
        padding: 0 5px;
    }

    .header_menu a {
        gap: 6px;
        padding: 8px 4px;
        font-size: 12px;
        letter-spacing: 0;
    }

    .header_menu .mi {
        width: 16px;
        height: 16px;
    }

    .lang-btn {
        gap: 6px;
        padding: 7px 10px;
        font-size: 12px;
    }

    /* One step above the bar, not two. */
    .menu_list li > a:only-child {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .page_text {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    /* Stacked from the same width as the drawer. */
    .menu_list {
        max-width: 100%;
        float: none !important;
    }

    /* Same inset as .page_center above it, so the two cards line up. */
    .page_text {
        float: none !important;
        width: auto;
        max-width: none;
        margin: 14px var(--gutter) 0;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Collapsed by default; the toggle adds .is-open on the row. */
    .header_menu > div {
        display: none;
    }

    .header_menu > div.is-open {
        display: flex;
        /* Row-wrap rather than column: the entries are width:100% so each still
           takes its own line, while the two auto-width pills share the last. */
        flex-flow: row wrap;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 8px;
    }

    .header_menu > div.is-open > div,
    .header_menu > div.is-open > a {
        width: 100%;
    }

    .header_menu > div.is-open a {
        width: 100%;
        padding: 11px 12px;
        font-size: 13px;
    }

    /* Flush box so the pills span the full drawer width. */
    .header_menu > div.is-open > div:not(.lang) {
        padding: 0;
    }

    /* Icons always shown in the drawer. */
    .header_menu > div > div:not(.lang) > .mi {
        display: block;
        margin-left: 12px;
    }

    .header_menu > div.is-open > .lang {
        margin-left: 0;
        width: auto;
    }

    .header_menu > div.is-open > .theme-pick {
        margin-left: 0;
    }

    .lang-menu {
        right: auto;
        left: 0;
    }

    /* Padding keeps the lockup off the screen edges; the height offsets it. */
    .logoRu, .logoKg, .logoEn, .logoFr, .logoKk {
        height: 62px;
        padding: 6px 14px;
    }

    .page {
        margin: 20px auto;
        padding: 18px;
        border-radius: 2px;
    }

    .page_center {
        margin-top: 20px;
    }


    .mainRu, .mainKg {
        min-height: 320px;
        padding: 22px 14px;
    }

    .mainRu > span, .mainKg > span {
        font-size: 12pt !important;
        padding: 10px 10px 10px 8px;
    }

    /* Smaller and below the panel, not behind it. */
    .mainRu::before, .mainKg::before {
        width: 240px;
        height: 240px;
        right: calc(6% - 35px);
        bottom: -20px;
    }

    .mainRu::after, .mainKg::after {
        width: 170px;
        height: 170px;
        right: 6%;
        bottom: 16px;
    }

    .service_card {
        max-width: 100%;
        margin-right: 0;
    }

    input[type="text"],
    input[type="password"],
    input[type="tel"],
    input[type="email"],
    select,
    textarea,
    .sel {
        max-width: 100%;
    }

    /* Wide content scrolls inside its own box instead of widening the page. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .logoRu, .logoKg, .logoEn, .logoFr, .logoKk {
        height: 54px;
        padding: 5px 12px;
    }

    .page {
        padding: 14px;
    }

}

/* ==========================================================================
   Inner pages: registration forms, request and certificate tables, tabs.

   These carry their widths inline (style="width: 300px"), which no stylesheet
   can outrank without !important - hence its use below, scoped to the narrow
   breakpoint only so the desktop layout is left exactly as it was.
   ========================================================================== */

/* jQuery UI tabs used by the request and certificate lists. */
#tabs {
    border: 0;
    background: transparent;
    padding: 0;
}

#tabs > ul {
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 4px;
}

#tabs > ul .aTab {
    padding: 4px 2px;
}

/* Search box above the lists. */
input[type="search"], .form-control {
    width: 100%;
    max-width: 320px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    border-radius: 2px;
}

/* Password strength indicator sits under its field and shares its width. */
#password_meter {
    display: block;
    max-width: 320px;
    border-radius: 2px;
}

@media (max-width: 767px) {
    /* Inline widths on form controls give way; the fields fill the column. */
    input[style*="width"],
    select[style*="width"],
    textarea[style*="width"],
    #password_meter,
    input[type="search"],
    .form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fixed viewport-height boxes grow with their content instead of clipping. */
    div[style*="60vh"],
    div[style*="65vh"],
    div[style*="70vh"] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Float-based columns in the request forms become full-width rows. */
    div[style*="float:left"],
    div[style*="float: left"],
    div[style*="float:right"],
    div[style*="float: right"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Bootstrap's container is only padding at this width. */
    .container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   Phone lockups. The desktop lockup is one long row, so on a ~336px box the
   name drops to 8-9px type; these stack it under the big word instead, which
   lands every language around 12-14px. Placed last so this also wins over the
   480px block above.
   ========================================================================== */
@media (max-width: 767px) {
    /* Both halves of the action pair span the card and stack, so they read as one
       block; only Cancel matched before, which left the pair mismatched. */
    input[type="submit"],
    input[type="button"][style*="#1f63cf"],
    button[type="submit"],
    .btn-style,
    a[style*="#1f63cf"] {
        width: 100% !important;
        display: block;
    }

    input[type="submit"] + a,
    input[type="button"][style*="#1f63cf"] + a,
    button[type="submit"] + a,
    .btn-style + a,
    a[style*="#1f63cf"] + a {
        display: block;
        width: 100%;
        margin: 8px 0 0;
    }

    /* The desktop lockup, stretched to the full width instead of capped: the
       height follows each one's own ratio, so nothing is left empty around it. */
    .logoRu, .logoKg, .logoEn, .logoFr, .logoKk {
        height: auto;
        max-width: none;
        padding: 0;
        margin: 6px 0 4px;
    }

    .logoRu { aspect-ratio: 901 / 100; }
    .logoKg { aspect-ratio: 1081 / 124; }
    .logoKk { aspect-ratio: 2240 / 248; }
    .logoEn { aspect-ratio: 2320 / 200; }
    .logoFr { aspect-ratio: 2320 / 200; }

    /* Finer here: at 16px the band would take a sixth of the masthead. */
    .header_menu::before {
        height: 11px;
        background-size: auto 11px;
    }
}

/* --------------------------------------------------------------------------
   Verify pages - the form beside the guide that shows where the barcode is

   Applicants keep entering the barcode of the criminal record certificate on
   the apostille form, so the empty half of the card is used to show which
   corner of which document the number comes from.
   -------------------------------------------------------------------------- */

.verify-split {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-start;
}

.verify-result {
    clear: both;
}

/* The captcha picture is a fixed 200px image the server draws - the one control
   that cannot be resized - so it sets the column width. Standing alone it would
   pin the column at 206px, which is too narrow for the action pair; sharing its
   row with its own field widens the column to a workable size, and every field
   and button below follows it onto the same two verticals. */
.verify-form {
    flex: 0 0 auto;
    width: calc(var(--captcha-w) + var(--captcha-gap) + var(--captcha-field));
    max-width: 100%;
}

.verify-form input[type="text"],
.verify-form input[type="tel"],
.verify-form input[type="password"],
.verify-form #btn_container {
    max-width: 100%;
}

/* The basis, not the min-width, decides when the pair wraps: kept low so the
   panel stays beside the form down to about 480px of screen, which is as far as
   two usable columns fit once the form is pinned to the captcha's 206px. */
.barcode-guide {
    flex: 1 1 195px;
    min-width: 190px;
    padding: 15px 18px 13px;
    background-color: var(--tint);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
}

.bg-head {
    margin-bottom: 11px;
    font-family: 'PT Serif', Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.bg-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.bg-doc {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 330px;
    height: auto;
    color: var(--primary);   /* the parts that point are drawn in currentColor */
}

.bg-steps {
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
    padding-left: 17px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink);
}

.bg-steps li {
    margin-bottom: 7px;
}

.bg-steps li:last-child {
    margin-bottom: 0;
}


.d-paper { fill: #fff; stroke: var(--rule); stroke-width: 1; }
.d-soft { fill: var(--rule); }
.d-mid { fill: var(--ink-soft); }
.d-ink { fill: var(--ink); }
.d-hair { fill: var(--rule-soft); }
.d-ring { fill: none; stroke: currentColor; stroke-width: 1.6; }
.d-flash { fill: currentColor; }
.d-lead { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 4; }

.d-halo {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transform-box: fill-box;
    transform-origin: center;
}

.bg-doc .t-code { font-size: 6px; }
.bg-doc .t-num { font-size: 4.9px; font-weight: 700; }
.bg-doc .t-code2 { font-size: 9px; }
.bg-doc .t-num2 { font-size: 9.6px; font-weight: 700; letter-spacing: .4px; }
/* The certificate is drawn landscape: a narrower blow-up card, and a wider,
   shorter box than the portrait apostille one, so it gets more of the panel. */
.bg-doc-rec { flex-basis: 250px; max-width: 360px; }
.bg-doc-rec .t-num2 { font-size: 7.6px; letter-spacing: .2px; }
.bg-doc-rec .t-num { font-size: 4.4px; }

/* Enough movement to point at something, not enough to compete with the form. */
@keyframes bg-halo {
    0% { opacity: .6; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(1.16); }
}

@keyframes bg-march {
    to { stroke-dashoffset: -18; }
}

@keyframes bg-flash {
    0%, 100% { opacity: .1; }
    50% { opacity: .3; }
}

.bg-halo { animation: bg-halo 2.6s ease-out infinite; }
.bg-lead { animation: bg-march 1.6s linear infinite; }
.bg-flash { opacity: .1; animation: bg-flash 2.6s ease-in-out infinite; }

/* A visitor who has asked for no movement still needs to be told which corner to
   look at. Stopping the animations left the ring invisible and the number band at
   the 0.1 it rests on, so two of the three cues disappeared and only the arrow
   remained. Here they are held still and visible instead of being switched off. */
@media (prefers-reduced-motion: reduce) {
    .bg-lead { animation: none; }

    .bg-halo {
        animation: none;
        opacity: .45;
        transform: none;
    }

    .bg-flash {
        animation: none;
        opacity: .22;
    }
}

/* --------------------------------------------------------------------------
   The answer to a check - a result, not a validation error
   -------------------------------------------------------------------------- */

/* No width of its own: the block fills .verify-result, so its right edge lands on
   the guide panel's on a wide screen and on the column's once they stack. */
.verify-note,
.verify-result .validation-summary-errors {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

.verify-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.verify-note--ok {
    color: var(--ok);
    background-color: var(--ok-bg);
    border-color: var(--ok-rule);
}

.vn-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex: none;
    fill: currentColor;
}

.vn-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.vn-rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    color: var(--ink);
}

.vn-rows b {
    font-weight: 600;
}

/* The second half of a packed value: an answer in prose, not an identifier. */
.vn-note {
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

.verify-result .validation-summary-errors {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--bad);
    background-color: var(--bad-bg);
    border-color: var(--bad-rule);
}

/* The helper writes the list itself, so the icon is attached to the box. */
.verify-result .validation-summary-errors::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.7a8.3 8.3 0 1 0 0 16.6 8.3 8.3 0 0 0 0-16.6zM9.1 5.2h1.8v6.6H9.1zm0 8.2h1.8v1.8H9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.7a8.3 8.3 0 1 0 0 16.6 8.3 8.3 0 0 0 0-16.6zM9.1 5.2h1.8v6.6H9.1zm0 8.2h1.8v1.8H9.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.verify-result .validation-summary-errors ul {
    margin: 0;
    padding: 0;
}

.verify-result .validation-summary-errors ul li {
    margin: 0;
    color: inherit;   /* Site.css paints these plain red */
}

/* Nothing to show: the helper still emits an empty box. */
.verify-result .validation-summary-valid {
    display: none;
}

/* --------------------------------------------------------------------------
   Waiting for an answer

   The overlay was absolute inside the page and the spinner was pinned by its
   top-left corner at 50%/50%, which put it below and right of the middle. It is
   fixed to the viewport now and genuinely centred, over a light scrim so it is
   clear the page is working.
   -------------------------------------------------------------------------- */

.div_skin {
    position: fixed;
    z-index: 1100;   /* above the sticky header, which sits at 1000 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .8);
}

/* Stays positioned: the blades inside are absolute and sized in percentages, so
   they would otherwise resolve against the overlay and fill the screen. */
.div_skin .skin_pos {
    position: relative;
    top: auto;
    left: auto;
    width: 96px;
    height: 96px;
    margin: 0;
}

/* The library paints its blades near-transparent black; they take the theme's
   colour here, and enough of it to read against the scrim.

   Only the animation NAME is replaced. The turning is an illusion built from a
   different animation-delay on each blade, and the `animation` shorthand would
   reset every one of them to zero - leaving nine blades blinking in unison. */
.div_skin .spin > * {
    background: var(--primary);
    box-shadow: none;
    animation-name: spin-blade;
}

@keyframes spin-blade {
    0% { opacity: .22; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .div_skin .spin > * {
        animation: none;
        opacity: .6;
    }
}

/* Both verify pages open with the same card drawing; the apostille one carries
   the menu's seal on top of it, so the two are told apart at a glance. */
.verify-hero {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.hero-seal {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 46px;
    height: 46px;
    padding: 8px;
    color: var(--primary);
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   The browser challenge that replaces the picture

   Deliberately quiet: it is not something the visitor has to act on, only a sign
   that the form is ready. It settles while the barcode is being typed.
   -------------------------------------------------------------------------- */

.pow-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.pow-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--rule);
    border-top-color: var(--primary);
    animation: pow-turn .7s linear infinite;
}

@keyframes pow-turn {
    to { transform: rotate(360deg); }
}

.pow-ready .pow-dot {
    border-color: var(--ok);
    background-color: var(--ok);
    animation: none;
}

.pow-ready {
    color: var(--ok);
}

/* No scripts, so the challenge can never be answered; say so plainly. */
.pow-blocked {
    color: var(--bad);
}

#btn_container > input[disabled] {
    opacity: .55;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .pow-dot { animation: none; }
}

/* --------------------------------------------------------------------------
   Captcha - the helper emits a bare image, a refresh link and an input
   -------------------------------------------------------------------------- */

.captcha-box {
    display: grid;
    grid-template-columns: var(--captcha-w) var(--captcha-field);
    column-gap: var(--captcha-gap);
    grid-template-areas:
        "lbl  lbl"
        "img  hint"
        "img  inp"
        "ref  ref";
}

/* The helper separates its pieces with line breaks; as grid items they would
   each take a cell. */
.captcha-box br {
    display: none;
}

.captcha-box > label:not(.captcha-hint) {
    grid-area: lbl;
    display: block;
}

.captcha-hint {
    grid-area: hint;
    align-self: end;
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-soft);
}

#CaptchaImage0 {
    grid-area: img;
    display: block;
    margin-top: 5px;
    padding: 2px;
    background-color: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* The link carries a fresh random id on every render, so it is matched by the
   image it points at instead. */
a[href="#CaptchaImage0"] {
    grid-area: ref;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 6px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1;
    color: var(--ink-soft);
    text-decoration: none;
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: color .15s ease, border-color .15s ease;
}

a[href="#CaptchaImage0"]::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: currentColor;
    transition: transform .4s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A8 8 0 1 0 19.73 14h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A8 8 0 1 0 19.73 14h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

a[href="#CaptchaImage0"]:hover {
    color: var(--link);
    border-color: var(--link);
}

a[href="#CaptchaImage0"]:hover::before {
    transform: rotate(-180deg);
}

#CaptchaInputText0 {
    grid-area: inp;
    align-self: start;
    max-width: 100%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    /* The card is decoration; shrinking it and closing the gap under the title
       lifts the guide by about seventy pixels, which is most of a phone's fold. */
    .verify-head {
        margin-bottom: 8px !important;
    }

    .verify-head br {
        display: none;
    }

    .verify-hero img {
        width: 112px !important;
    }

    .hero-seal {
        right: -6px;
        bottom: -6px;
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    /* The view spaces its fields with line breaks, and an empty line costs a full
       20px here. The labels carry the break themselves instead, and the two gaps
       that are wanted are set deliberately. */
    .verify-form label {
        display: block;
    }

    .verify-form br {
        display: none;
    }

    .verify-form .captcha-box,
    .verify-form #btn_container {
        margin-top: 14px;
    }

    .verify-split {
        gap: 16px;
    }

    .barcode-guide {
        padding: 13px 12px 11px;
    }

    .bg-body {
        gap: 10px;
    }

    .bg-steps {
        padding-left: 15px;
        font-size: 12px;
    }

    /* Label beside value leaves the value a thin ribbon at this width, so the
       label takes a line of its own and the answer gets the full card. */
    .vn-rows {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vn-rows > span {
        margin-top: 8px;
    }

    .vn-rows > span:first-child {
        margin-top: 0;
    }

    /* Once the panel does drop under the form, it is alone on its line. */
    .barcode-guide .bg-doc {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Once the panel no longer fits beside the form it drops under it and would
   otherwise stretch to the whole card, standing wider than the fields above.
   The card holds screen minus 62px of padding and border; the pair needs
   366 + 16 of gap + the panel's 195 basis = 577, so they separate at 639px.
   Below that the panel takes the form's width and their edges line up again. */
@media (max-width: 638px) {
    /* max-width, not width: on a flex item the flex-basis wins over width, so
       only the clamp actually holds it back from filling the line. */
    .barcode-guide {
        max-width: calc(var(--captcha-w) + var(--captcha-gap) + var(--captcha-field));
    }

    /* The column no longer fills the card here, so it is centred instead of
       sitting against the left edge with all of the slack on the right. The
       certificate page has no split to centre, so the column carries it too. */
    .verify-split {
        justify-content: center;
    }

    .verify-form {
        margin-left: auto;
        margin-right: auto;
    }

    .verify-result {
        max-width: calc(var(--captcha-w) + var(--captcha-gap) + var(--captcha-field));
        margin-left: auto;
        margin-right: auto;
    }
}

/* Under about 430px the 366px row no longer fits the card. Splitting it would
   leave roughly 110px for the field, so the picture takes a row of its own and
   is stretched to the card instead - which reads better than the cramped pair
   and keeps every element on the same two edges. */
@media (max-width: 429px) {
    .verify-form {
        width: 100%;
    }

    .barcode-guide,
    .verify-result {
        max-width: none;
    }

    .captcha-box {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "lbl"
            "img"
            "ref"
            "hint"
            "inp";
    }

    #CaptchaImage0 {
        width: 100%;
    }
}


/* ==========================================================================
   SMALL AND OLD MACHINES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Short viewports. On a 1366x768 laptop the verify pages measure 829px against
   768 of window, so they always open scrolled and the footer sits below the
   fold. The rhythm is trimmed by viewport HEIGHT, not width: a wide but short
   screen has exactly this problem, and a tall one has none of it.

   Measured on the apostille page: card margins 28+28, card padding 30+30,
   heading margin 20, hero 111. The values below give back about 90px, which
   clears the 61px shortfall with room for the taller Kyrgyz masthead.

   Held to 768px and wider on purpose: phones are short too, but they already
   have their own band, and without this guard the hero would be pulled back up
   from the 112px it is given there.
   -------------------------------------------------------------------------- */
@media (max-height: 820px) and (min-width: 768px) {
    .page {
        margin-top: 14px;
        margin-bottom: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* The margin is written inline on the element, so it takes precedence. */
    .verify-head {
        margin-bottom: 12px !important;
    }

    .verify-hero img {
        width: 132px !important;
    }

    .hero-seal {
        right: -6px;
        bottom: -6px;
        width: 36px;
        height: 36px;
        padding: 6px;
    }
}

/* --------------------------------------------------------------------------
   Flex gap on EdgeHTML and Internet Explorer.

   Neither engine implements gap on a flex container: the declaration is
   dropped and the items end up touching - the form against the guide panel,
   every icon against its label. The margins below restore the same spacing.

   Testing with @supports (gap: 1px) would not work: EdgeHTML answers yes,
   because it does support gap on grid, while still ignoring it on flex.
   -ms-ime-align is understood by EdgeHTML 12-18 and by nothing else; the
   high-contrast media query is the equivalent for IE 10 and 11, which does
   not understand @supports at all. No other browser reads either block, so
   the layout everywhere else is untouched.
   -------------------------------------------------------------------------- */
@supports (-ms-ime-align: auto) {

    /* form to guide panel - the 26px that .verify-split asks for */
    .verify-form {
        margin-right: 26px;
        margin-bottom: 26px;
    }

    /* drawing to numbered steps inside the guide - the 10px 16px of .bg-body */
    .bg-doc {
        margin-right: 16px;
        margin-bottom: 10px;
    }

    /* icon to label: menu links, language and theme buttons, captcha refresh */
    .header_menu a > .mi,
    .lang-btn > .mi,
    .verify-note > .mi,
    a[href="#CaptchaImage0"] > .mi {
        margin-right: 7px;
    }

    /* the state dot in front of the security check message */
    .pow-dot {
        margin-right: 8px;
    }

    /* the pair of buttons under the form */
    #btn_container > input {
        margin-right: 8px;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    /* form to guide panel - the 26px that .verify-split asks for */
    .verify-form {
        margin-right: 26px;
        margin-bottom: 26px;
    }

    /* drawing to numbered steps inside the guide - the 10px 16px of .bg-body */
    .bg-doc {
        margin-right: 16px;
        margin-bottom: 10px;
    }

    /* icon to label: menu links, language and theme buttons, captcha refresh */
    .header_menu a > .mi,
    .lang-btn > .mi,
    .verify-note > .mi,
    a[href="#CaptchaImage0"] > .mi {
        margin-right: 7px;
    }

    /* the state dot in front of the security check message */
    .pow-dot {
        margin-right: 8px;
    }

    /* the pair of buttons under the form */
    #btn_container > input {
        margin-right: 8px;
    }
}


/* ==========================================================================
   LANDMARKS AND HEADINGS
   ========================================================================== */

/* The page title used to be a div or a paragraph. It is a heading now, so a screen
   reader can announce what the page is and a search engine has something to weigh
   the body against. These values are the ones it was rendering with before, taken
   from the page: 14px, weight 700, no margin of its own. */
.page h1,
.verify-head h1 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: inherit;
}

/* main only names a region; it must not become a box of its own inside the shell.

   The shell is a flex column and the hero of the home page asks to fill whatever is
   left of it. Wrapping the body in main put an element between the two, and the hero
   stopped at its own minimum with a grey band under it. main therefore grows in the
   shell and is a column itself, so what it holds stretches exactly as it did before. */
main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Read by a screen reader, never seen. Not display:none, which would remove it
   from the reading order as well. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Out of sight until the first press of Tab, then a plain button at the top left.
   Anyone using a keyboard would otherwise walk the whole menu on every page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background-color: #1f3c66;
    font-size: 14px;
}

/* a:focus outweighs a single class, and this link is only ever shown while it is
   focused - so its own colours have to be stated with the same weight. */
.skip-link,
.skip-link:visited,
.skip-link:hover,
.skip-link:focus {
    color: #fff !important;
    text-decoration: none !important;
}

.skip-link:focus {
    left: 0;
}