/* ZFP GROUP sign-in (ADFS web theme) in ZFP Design, @zfp-akademie-a-s/zfp-design.
   Values are its tokens (src/tokens/colors.ts). ADFS generates the markup; this file only
   restyles it, and script/onload.js sets the texts and the invalid-field state.
   Layout: ADFS's branding panel on the left in the dark sidebar's espresso with the dark logo,
   the form on white beside it. Fonts and logo are data: URIs at the
   end of this file, so ADFS serves no extra files. */

:root {
    /* ZFP Design has one theme, light: browsers keep their own controls light and don't
       auto-darken the page (Chrome's Auto Dark Theme, Samsung Internet, Opera) */
    color-scheme: only light;
    --text-primary: #201A17;
    --text-secondary: #707070;
    --placeholder: #878787;
    --border: #E8E8E8;
    --border-strong: #CFCFCF;
    --background-secondary: #F5F5F5;
    --brand-primary: #ED6E04;
    --primary-hover: #D66203;
    --brand-medium: #B85300;
    --danger: #F32121;
    --font: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-heading: "Roboto Slab", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    min-height: 100%;
    background: #FFFFFF;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#noScript { margin: 16px; }

/* ADFS's footer ("© 2018 Microsoft") and header logo aren't used: the panel draws the logo */
#footer, #footerPlaceholder { display: none; }
#companyLogo { display: none; }

.hidden { display: none; }
.clear { clear: both; }
.groupMargin, .fieldMargin, .sectionMargin, .submitMargin { margin: 0; }

/* Heading: h2, Roboto Slab bold 24/28. Line heights are relative to the text and controls have
   no fixed height, so everything grows with the text (text-only zoom, larger default fonts) */
#loginMessage, #openingMessage, #idp_SignInThisSiteStatusLabel {
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.17;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Fields: label above (14px medium, 4px gap), 40px field at 16px text (7px padding, 1.5 line
   height, 1px border), 8px radius, 16px between fields */
#userNameInputLabel, #passwordInputLabel, #oldPasswordInputLabel, #newPasswordInputLabel, #confirmNewPasswordInputLabel {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.43;
    font-weight: 500;
}
#userNameArea, #passwordArea, #oldPasswordArea, #newPasswordArea, #confirmNewPasswordArea { margin-bottom: 16px; }

input.text, select {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 2.5em; /* 40px; for browsers that ignore an input's line height */
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--text-primary);
    font: 400 16px/1.5 var(--font);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input.text::placeholder { color: var(--placeholder); opacity: 1; }
input.text:hover, select:hover { border-color: var(--text-secondary); }
input.text:focus, select:focus { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
input.text.invalid { border-color: var(--danger); }
input.text.invalid:focus { box-shadow: inset 0 0 0 1px var(--danger); }
/* The select draws ZFP Design's chevron-down (textSecondary) in place of the browser's arrow,
   8px in from the right edge, so the chevron lines up with the text's 14px padding */
select {
    padding-right: 40px;
    -webkit-appearance: none;
    appearance: none;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E") right 8px center / 24px no-repeat;
    cursor: pointer;
}
/* disabled: primaryDisabled fill, textDisabled text, no hover */
select:disabled { background-color: #F5F5F5; color: #9E9E9E; border-color: var(--border); cursor: default; }
.fullWidth, .fullWidthIndent { width: 100%; }
/* Show/hide password (onload.js adds it to each password field): a small icon button inside the
   field's end, 4px in from the border, with ZFP Design's 20px eye in textSecondary; the text stops
   short of it. Edge's own reveal button is hidden, so there is one eye */
.passwordField { position: relative; display: block; }
.passwordField input.text { padding-right: calc(2em + 12px); }
.passwordField input::-ms-reveal { display: none; }
.passwordToggle {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    width: 2em; /* 32px; grows with the field under text-only zoom */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.passwordToggle:hover { background: var(--background-secondary); color: var(--text-primary); }
.passwordToggle:focus-visible { outline: 2px solid var(--brand-medium); outline-offset: 0; }
.passwordToggle svg { display: block; width: 1.25em; height: 1.25em; }

/* Buttons: 40px at 14px text (10px padding, 20px line), 12px radius, 14px medium label in sentence case; primary is the one orange fill */
span.submit, input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 2.86em; /* 40px; for browsers that ignore an input's line height */
    padding: 10px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-primary);
    color: #FFFFFF;
    font: 500 14px/1.43 var(--font);
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s;
}
span.submit:hover, input[type="submit"]:hover { background: var(--primary-hover); }
span.submit:focus-visible, input[type="submit"]:focus-visible, a:focus-visible,
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-medium);
    outline-offset: 2px;
}
#submissionArea { margin-top: 24px; }

/* Secondary button: white with the field border, darker on hover */
#cancelButton {
    margin-top: 12px;
    background: #FFFFFF;
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding-top: 9px;
    padding-bottom: 9px;
}
#cancelButton:hover { background: #FFFFFF; border-color: var(--text-primary); }

/* Links: small orange text is brandMedium (4.9:1), underlined on hover */
a { color: var(--brand-medium); font-weight: 500; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Error: the error alert (tint, border, red icon), its text in textPrimary */
#error {
    margin-bottom: 24px;
    padding: 8px 12px 8px calc(20px + 1.43em); /* 12px, the icon (one line, 20px at 14px text), 8px */
    border: 1px solid #FBB4AB;
    border-radius: 8px;
    background: #FFEDEA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F32121' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E") 12px 8px / 1.43em no-repeat;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.43;
}
/* no message, no box: #error always holds the #errorText span, so it is never :empty itself.
   ADFS's checkError() hides it too, but only once the script after the form has run */
#error:not(:has(#errorText:not(:empty))) { display: none; }
.error { color: inherit; }

/* What sits under the form: the password reset and help links, or the password rules */
#introduction {
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.43;
}
#introduction p + p { margin-top: 4px; }
/* the links are 17px tall: an invisible layer makes each about 40px to tap, without moving the
   layout or the focus ring */
#introduction a { position: relative; }
#introduction a::after { content: ''; position: absolute; top: -12px; bottom: -12px; left: -4px; right: -4px; }
#authOptions .groupMargin { margin: 0; }

/* Change password: the rules are an info alert */
#updatePasswordArea #introduction {
    margin: 0 0 16px;
    padding: 8px 12px 8px calc(20px + 1.43em); /* 12px, the icon (one line, 20px at 14px text), 8px */
    border: 1px solid #CFE6FF;
    border-radius: 8px;
    background: #EAF3FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F80ED' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='8' r='.5' fill='%232F80ED'/%3E%3C/svg%3E") 12px 8px / 1.43em no-repeat;
    color: var(--text-primary);
}

/* IdP-initiated sign-on and sign-out: radios with labels, the site picker, the buttons */
/* each radio beside its label, which wraps in its own column; the radio sits on the first line
   (1px down at 16px text) and the site picker takes the next row */
#idpSignonArea .fieldMargin { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
#idpSignonArea .fieldMargin input[type="radio"] { flex: none; margin-top: 0.0625em; }
#idpSignonArea .fieldMargin label { flex: 1 1 0; min-width: 0; }
#idpSignonArea .fieldMargin select { flex: 0 0 100%; }
/* signed in: a divider sets the sign-out options apart, and "Odhlásit" is the secondary button,
   so the view keeps one orange button ("Přihlásit se" to another site) */
#idp_SignOutPanel { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
#idp_SignOutButton { background: #FFFFFF; color: var(--text-primary); border: 1px solid var(--border); padding-top: 9px; padding-bottom: 9px; }
#idp_SignOutButton:hover { background: #FFFFFF; border-color: var(--text-primary); }
#idpSignonArea label { font-size: 14px; line-height: 1.43; vertical-align: middle; }
#idpSignonArea select { margin-top: 8px; }
#idpSignonArea .submitMargin { margin-top: 24px; }
input[type="radio"], input[type="checkbox"] {
    font-size: inherit;
    width: 1.125em; /* 18px beside 16px text */
    height: 1.125em;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--brand-primary);
}

#signoutArea { min-height: 0; }

/* Layout: the panel and the form */

#fullPage { display: flex; min-height: 100vh; }

#brandingWrapper {
    display: flex;
    flex: 0 0 40%;
    max-width: 560px;
    background: #1A110F;
}
/* #branding fills the panel as its flex item: a height of 100% wouldn't resolve in the phone
   layout's 112px band. It is an ID selector, so it beats ADFS's .illustrationClass and the
   illustration is never loaded */
#branding { flex: 1 1 auto; background: var(--zfp-logo-dark) center / 176px auto no-repeat; }

#contentWrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}
#content { width: 100%; max-width: 360px; }
#header { display: none; }

@media (max-width: 800px) {
    #fullPage { flex-direction: column; }
    #brandingWrapper { flex: 0 0 112px; max-width: none; }
    #branding { background-size: auto 48px; }
    #contentWrapper { align-items: flex-start; padding-top: 40px; }
}
/* Windows contrast themes (forced colors): the system's colours replace ours, and background
   colours and box shadows go. What they carried gets a system-coloured line instead */
@media (forced-colors: active) {
    /* the panel keeps its espresso: the logo's white and light grey need the dark ground */
    #brandingWrapper { forced-color-adjust: none; }
    /* buttons lose the fill that made them buttons: a border instead (it comes out of the padding) */
    span.submit, input[type="submit"] {
        border: 1px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    /* a field's focus was a colour and a box shadow: an outline instead */
    input.text:focus, select:focus { outline: 2px solid Highlight; outline-offset: 2px; }
    /* an invalid field was a red border: a 2px border instead (the extra 1px comes out of the padding) */
    input.text.invalid { border-width: 2px; padding: 6px 13px; }
    .passwordField input.text.invalid { padding-right: calc(2em + 11px); }
}
/* a short window too (200 % zoom on a laptop, 400 % anywhere): a slimmer band leaves the form
   most of the height */
@media (max-width: 800px) and (max-height: 500px) {
    #brandingWrapper { flex-basis: 56px; }
    #branding { background-size: auto 32px; }
    #contentWrapper { padding-top: 24px; }
}

/* Fonts (Roboto 400 and 500, Roboto Slab 700; Apache 2.0) and the ZFP Group logo for dark
   backgrounds (the packages' zfp-group-dark.svg). The fonts hold only what Czech and Slovak text
   needs: basic Latin, the Czech, Slovak and German letters, common punctuation and symbols. Any
   other character is drawn in the next font of --font / --font-heading. The fonts are files in
   fonts/, which the ADFS admin registers, because ADFS's Content-Security-Policy blocks data:
   fonts (data: images are allowed). ADFS won't serve .woff2 files either, so each
   fonts/<name>.woff2 is registered and linked as fonts/<name>.png; browsers don't check a
   font's content type. Until they are registered, the fallback fonts are used. */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin.png) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A7,U+00A9,U+00AB,U+00B0,U+00BB,U+00C1,U+00C4,U+00C9,U+00CD,U+00D3-00D4,U+00D6-00D7,U+00DA,U+00DC-00DD,U+00DF,U+00E1,U+00E4,U+00E9,U+00ED,U+00F3-00F4,U+00F6,U+00FA,U+00FC-00FD,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-500-latin.png) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A7,U+00A9,U+00AB,U+00B0,U+00BB,U+00C1,U+00C4,U+00C9,U+00CD,U+00D3-00D4,U+00D6-00D7,U+00DA,U+00DC-00DD,U+00DF,U+00E1,U+00E4,U+00E9,U+00ED,U+00F3-00F4,U+00F6,U+00FA,U+00FC-00FD,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-slab-700-latin.png) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A7,U+00A9,U+00AB,U+00B0,U+00BB,U+00C1,U+00C4,U+00C9,U+00CD,U+00D3-00D4,U+00D6-00D7,U+00DA,U+00DC-00DD,U+00DF,U+00E1,U+00E4,U+00E9,U+00ED,U+00F3-00F4,U+00F6,U+00FA,U+00FC-00FD,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin-ext.png) format("woff2");unicode-range:U+010C-010F,U+011A-011B,U+0139-013A,U+013D-013E,U+0147-0148,U+0154-0155,U+0158-0159,U+0160-0161,U+0164-0165,U+016E-016F,U+017D-017E}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-500-latin-ext.png) format("woff2");unicode-range:U+010C-010F,U+011A-011B,U+0139-013A,U+013D-013E,U+0147-0148,U+0154-0155,U+0158-0159,U+0160-0161,U+0164-0165,U+016E-016F,U+017D-017E}
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-slab-700-latin-ext.png) format("woff2");unicode-range:U+010C-010F,U+011A-011B,U+0139-013A,U+013D-013E,U+0147-0148,U+0154-0155,U+0158-0159,U+0160-0161,U+0164-0165,U+016E-016F,U+017D-017E}
:root{--zfp-logo-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 75'%3E%3Cpath fill='%23FFFFFF' d='M2.31253 5.30029V11.3053H15.1278L1.19482 30.5766V35.4327H24.9881V29.4276H9.98334L24.1001 9.89599V5.30029H2.31253Z'/%3E%3Cpath fill='%23FFFFFF' d='M30.1324 5.30029H51.3075V10.9683H37.4052V18.4286H50.3582V23.6677H37.4052V35.4327H30.1324V5.30029Z'/%3E%3Cpath fill='%23FFFFFF' d='M65.1639 21.324H67.6443C72.2376 21.324 73.7686 18.9802 73.7686 16.1614C73.7686 13.3428 72.5285 10.953 68.6242 10.953H65.1639V21.324ZM57.83 5.30029H69.6195C76.4328 5.30029 81.3171 9.26791 81.3171 16.0236C81.3171 21.952 76.4328 26.9308 67.3841 26.9308H65.1639V35.4634H57.83V5.30029Z'/%3E%3Cpath fill='%23D6D6D6' d='M0 59.9431C0 50.5986 5.34354 45.1144 15.0354 45.1144C17.9118 44.987 20.7798 45.5106 23.4258 46.6463L22.2162 49.9859C19.9244 49.1833 17.5094 48.7892 15.0813 48.8215C9.37033 48.8215 4.47082 51.8854 4.47082 59.5448C4.47082 67.2044 9.61532 70.789 15.7704 70.789C17.05 70.7623 18.3253 70.6291 19.5827 70.3907V59.9891H23.9617V73.0715C21.0926 74.0383 18.0775 74.4997 15.0507 74.4348C5.58851 74.4502 0 68.8128 0 59.9431Z'/%3E%3Cpath fill='%23D6D6D6' d='M38.0023 59.2537C42.3354 59.2537 45.1372 57.7984 45.1372 53.8154C45.1372 49.8325 43.1469 48.4537 39.0128 48.4537H34.4195V59.177L38.0023 59.2537ZM44.8005 68.9353L40.0999 62.4553C39.3246 62.5698 38.5412 62.621 37.7574 62.6085H34.389V73.531H30.0253V44.9917H39.8091C45.566 44.9917 49.6081 47.6879 49.6081 53.6163C49.659 55.2904 49.1862 56.9388 48.2557 58.3311C47.3252 59.7234 45.9834 60.7904 44.4176 61.3831L48.5363 66.7907C49.9848 68.7105 52.069 70.0518 54.4158 70.5743L53.4511 73.9139C51.7304 73.778 50.0615 73.2606 48.5653 72.3996C47.0691 71.5385 45.7831 70.3551 44.8005 68.9353Z'/%3E%3Cpath fill='%23D6D6D6' d='M80.1225 59.208C80.1225 52.8813 76.6316 48.0864 69.9561 48.0864C62.9896 48.0864 59.667 52.8813 59.667 59.1315C59.667 65.3815 62.867 70.4675 69.6803 70.4675C76.9378 70.4675 80.1378 65.5961 80.1378 59.2693L80.1225 59.208ZM55.3033 59.2693C55.3033 50.323 61.2593 44.6855 70.3388 44.6855C79.9081 44.6855 84.5627 50.9664 84.5627 59.3459C84.5627 68.1696 79.0508 74.0521 69.5732 74.0521C60.3867 74.0521 55.3033 68.0931 55.3033 59.2693Z'/%3E%3Cpath fill='%23ED6E04' d='M89.3705 61.9501V45.1758H96.3063V61.705C96.3063 66.025 98.2814 68.4301 102.63 68.4301C106.978 68.4301 108.953 65.9024 108.953 60.8624V45.1758H115.675V60.985C115.675 70.881 108.999 73.9908 102.63 73.9908C96.2605 73.9908 89.3857 71.1108 89.3857 61.9348'/%3E%3Cpath fill='%23ED6E04' d='M89.4775 0V43.031L102.614 29.872L115.629 43.0157V0H89.4775Z'/%3E%3Cpath fill='%23ED6E04' d='M128.75 60.2187H131.092C135.364 60.2187 136.88 58.0128 136.88 55.3779C136.88 52.743 135.716 50.5525 132.042 50.5525H128.75V60.2187ZM121.86 45.1602H132.93C139.33 45.1756 143.922 48.8981 143.922 55.1482C143.922 60.709 139.33 65.3966 130.832 65.3966H128.75V73.5309H121.86V45.1602Z'/%3E%3C/svg%3E")}