:root {
    /* colors from Coolblue Blueprint */
    --orange: #ff6600;
    --fact-blue: #285dab;
    --darkblue: #285dab;
    --coolblue-blue: #0090e3;
    --light-blue: #cce9f9;
    --silver-blue: #F2F7FC;
    --silver: #BBBBBB;
    --gray: #666666;
    --white: #FFFFFF;
    --green: #00B900;
    --gandalf: #DDDDDD;
    --coolblue-black: #111;
    --green-darkened: #090;
    --green-faded: #bfe5bf;

    /* variables from coolblue.nl design system */
    --color-citrusyellow: #fff9e6;
    --color-melonyellow: #ffae00;
    --color-lightpink: #ffe5e5;
    --color-scarletred: #e50000;
    --color-peppermint: #e0f6e0;
    --color-winterblue: #8dc8ea;
    --color-springblue: #40acea;

    --border-radius: 4px;

    --sizing-2: 0.8rem;
    --sizing-11: 4.4rem;
    --sizing-13: 5.2rem;

    /* typography */
    --font-size-base: 1.3rem;
    --font-size-label: 1.4rem;
    --font-size-intro: 1.6rem;
    --font-size-heading-1: 2rem;
    --font-size-heading-1-large: 2.8rem;
    --font-size-heading-2: 1.6rem;
    --font-size-heading-2-large: 1.8rem;
    --font-size-heading-3: 1.5rem;
    --font-size-heading-4: 1.4rem;
    --font-size-heading-5: var(--font-size-base);

    --line-height-body: 1.5;
    --line-height-title: 1.25;
    --line-height-heading: 1.25;

    --font-weight-regular: 400;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    --color-text-default: var(--coolblue-black);
    --color-text-disabled: var(--silver);
    --color-text-heading: var(--coolblue-black);
    --color-text-heading-alternative: var(--darkblue);
    --color-text-secondary: var(--gray);

    --font-family-opensans: Open Sans,Arial,Helvetica,Verdana,sans-serif;
    --font-family-dobra-slab-medium: DobraSlabMedium,Georgia,Times New Roman,Times,"Droid Serif",serif;
    --font-family-dobra-slab-book: DobraSlabBook,Georgia,Times New Roman,Times,"Droid Serif",serif;
    --font-family-avenir-black: AvenirBlack,Arial,Helvetica,Verdana,sans-serif;

    --fact-slogan-font-size-fact: 3.6rem;
    --fact-slogan-letter-spacing-fact: -0.9px;
    --fact-slogan-font-color-fact: var(--fact-blue);
    --fact-slogan-font-weight-fact: 900;
    --fact-slogan-font-color-dot: var(--orange);
    --fact-slogan-font-size-slogan: 2.8rem;
    --fact-slogan-letter-spacing-slogan: -0.7px;
    --fact-slogan-font-color-slogan: var(--coolblue-blue);
    --fact-slogan-font-weight-slogan: 400;

    /* icons */
    --icon-sizing-3: 1.2rem;
    --icon-sizing-4: 1.6rem;
    --icon-sizing-5: 2rem;

    --spacing-icon-margin-3: 1.5em;

    --icon-chevron: url('data:image/svg+xml,<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" focusable="false" width="12" height="12" alt="arrow left"><path fill="currentColor" d="M21.6 7.5a5 5 0 0 0-7 7L24 24l-9.5 9.5a5 5 0 1 0 7.1 7l13-12.9A5 5 0 0 0 36 24a5 5 0 0 0-1.5-3.6l-12.9-13Z"/></svg>');
    --icon-check-circle-green: url('data:image/svg+xml;utf8,<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48" focusable="false" data-ds-component="icon"><path fill="%2300B900" d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"></path><path fill="%23FFF" d="M30.632 16.158a3 3 0 1 1 4.736 3.684l-10.47 13.462a2.995 2.995 0 0 1-.94.818 2.994 2.994 0 0 1-1.276.373 2.993 2.993 0 0 1-2.337-.907L12.38 25.62a3 3 0 1 1 4.242-4.242l5.597 5.597 8.414-10.818Z"></path></svg>');
    --icon-exclamation-yellow: url('data:image/svg+xml;utf8,<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 32 32" focusable="false" data-ds-component="icon"><path fill="%23ffae00" d="M31.7 26.7L18 3C17 1.6 15 1.6 14 3L.3 26.7c-.8 1.4.2 3.2 1.9 3.2h27.6c1.7 0 2.7-1.8 2-3.2z"></path><path fill="%23fff" d="M18 18a2 2 0 1 1-4 0v-6a2 2 0 1 1 4 0v6zM18 24a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"></path></svg>');
    --icon-cross-circle-red: url('data:image/svg+xml;utf8,<svg viewBox="0 0 99 99" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="49.5" cy="49.5" r="49.5" fill="%23e50000"></circle><path fill="%23FFF" transform="rotate(45 49.5 49.5)" d="M49.5 21c-3 0-5.5 2.3-5.5 5.2V44H26.2c-3 0-5.2 2.6-5.2 5.5 0 3 2.3 5.5 5.2 5.5H44v17.8c0 3 2.6 5.2 5.5 5.2 3 0 5.5-2.3 5.5-5.2V55h17.8c3 0 5.2-2.6 5.2-5.5 0-3-2.3-5.5-5.2-5.5H55V26.2c0-3-2.6-5.2-5.5-5.2z"></path></svg>');

    /* spacing */
    --spacing-vertical-1: 0.4rem;
    --spacing-vertical-2: 0.8rem;
    --spacing-vertical-3: 1.2rem;
    --spacing-vertical-4: 1.6rem;
    --spacing-vertical-5: 2rem;
    --spacing-vertical-6: 2.4rem;
    --spacing-vertical-8: 3.2rem;

    --spacing-horizontal-1: 0.4rem;
    --spacing-horizontal-2: 0.8rem;
    --spacing-horizontal-3: 1.2rem;
    --spacing-horizontal-4: 1.6rem;
    --spacing-horizontal-5: 2rem;
    --spacing-horizontal-6: 2.4rem;
    --spacing-horizontal-7: 2.8rem;
    --spacing-horizontal-8: 3.2rem;

    --spacing-inset-3: 1.2rem;
    --spacing-inset-4: 1.6rem;
    --spacing-section: var(--spacing-vertical-4);
    --spacing-footer-links: var(--spacing-horizontal-6);

    /* design */
    --header-height: var(--sizing-11);
    --footer-height: 50px;

    /* logo */
    --logo-height: var(--header-height);
    --logo-width: calc(var(--header-height)*1.55556);

    /* animations */
    --animation-slow: 1s;

    /* notifications */
    --notice-color-border: var(--coolblue-blue);
    --notice-color-background: var(--silver-blue);

    /* inputs */
    --input-border-color: var(--gandalf);
    --input-border-color-focus: var(--coolblue-blue);
    --input-height: 4rem;
    --input-padding: 1rem 0.8rem;

    /* buttons */
    --button-background-color: var(--green);
    --button-background-color-loading: var(--green-faded);
    --button-background-color-active: #009600;
    --button-font-family: var(--font-family-opensans);
    --button-height: 4.8rem;
    --button-shador-color: var(--green-darkened);
    --button-shador-color-active: #005e00;
    --button-padding: 1.3rem 1.6rem 1.4rem 1.6rem;

    --button-secondary-background-color: var(--white);
    --button-secondary-background-color-loading: var(--white);
    --button-secondary-color: var(--coolblue-blue);
    --button-secondary-color-loading: var(--color-text-disabled);
    --button-secondary-border-color: var(--color-winterblue);
    --button-secondary-border-color-active: var(--color-springblue);
    --button-secondary-border-color-loading: var(--gandalf);
    --button-secondary-shadow-color: var(--color-winterblue);
    --button-secondary-shadow-color-active: var(--color-springblue);

    /* password strength */
    --password-strength-text-color: var(--gray);
    --password-strength-divider-color: var(--gandalf);
    --password-strength-bar-color: var(--green);
    --password-strength-bar-height: var(--font-size-base);
}

@media (max-width:500px) { /* mobile */
    :root {
        --fact-slogan-font-size-fact: 2.0rem;
        --fact-slogan-letter-spacing-fact: -0.5px;
        --fact-slogan-font-size-slogan: 1.6rem;
        --fact-slogan-letter-spacing-slogan: -0.4px;
    }
}

/* open-sans-regular - latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
      local("Open Sans Regular"),
      local("OpenSans-Regular"),
      url("https://assets.coolblue.nl/fonts/open-sans-v14-latin-regular.woff2") format("woff2"),
      url("https://assets.coolblue.nl/fonts/open-sans-v14-latin-regular.woff") format("woff");
  }

  /* open-sans-600 - latin */
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src:
      local("Open Sans SemiBold"),
      local("OpenSans-SemiBold"),
      url("https://assets.coolblue.nl/fonts/open-sans-v14-latin-600.woff2") format("woff2"),
      url("https://assets.coolblue.nl/fonts/open-sans-v14-latin-600.woff") format("woff");
  }

  /* open-sans-700 - latin */
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
      local("Open Sans Bold"),
      local("OpenSans-Bold"),
      url("https://assets.coolblue.nl/fonts/open-sans-v14-latin-700.woff2") format("woff2"),
      url("https://assets.coolblue.nl/fonts/open-sans-v14-latin-700.woff") format("woff");
  }

  @font-face {
    font-family: AvenirBlack;
    src:
      local("Avenir-Black"),
      local("AvenirBlack"),
      url("https://assets.coolblue.nl/fonts/aebl____-webfont.woff2") format("woff2"),
      url("https://assets.coolblue.nl/fonts/aebl____-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
  }

  @font-face {
    font-family: DobraSlabBook;
    src:
      local("DobraSlab-Book"),
      local("DobraSlabBook"),
      url("https://assets.coolblue.nl/fonts/dobraslab-book-webfont.woff2") format("woff2"),
      url("https://assets.coolblue.nl/fonts/dobraslab-book-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    src:
      local("DobraSlab-Medium"),
      local("DobraSlabMedium"),
      url(https://assets.coolblue.nl/fonts/dobraslab-medium-webfont.woff2) format("woff2"),
      url(https://assets.coolblue.nl/fonts/dobraslab-medium-webfont.woff) format("woff");
    font-family:DobraSlabMedium;
    font-style:normal;
    font-weight:500;
    font-display:swap;
  }

  @supports (font-variation-settings: normal) {
    @font-face {
      font-family: "Open Sans";
      font-style: normal;
      font-weight: 400 700;
      font-stretch: 100%;
      font-display: swap;
      src:
        url("https://assets.coolblue.nl/fonts/opensans-variablefont-400-700.woff2") format("woff2 supports variations"),
        url("https://assets.coolblue.nl/fonts/opensans-variablefont-400-700.woff2") format("woff2-variations");
      unicode-range:
        U+0000-00FF,
        U+0131,
        U+0152-0153,
        U+02BB-02BC,
        U+02C6,
        U+02DA,
        U+02DC,
        U+2000-206F,
        U+2074,
        U+20AC,
        U+2122,
        U+2191,
        U+2193,
        U+2212,
        U+2215,
        U+FEFF,
        U+FFFD;
    }
  }

@keyframes is-loading {
    0% {
        left:0;
        width:0
    }
    50% {
        left:0;
        width:100%
    }
    to {
        left:100%;
        width:0
    }
}

/* globals and resets */
* {
    box-sizing: border-box;
    font-family: var(--font-family-opensans);
    padding: 0;
    margin: 0;
}

/* Fundamentals */
html {
    font-size: 62.5%;
    text-size-adjust: none;
}

body {
    padding: 0;
    margin: 0;
    color: var(--color-text-default);
    line-height: var(--line-height-body);
    font-size: var(--font-size-base);
    font-family: var(--font-family-opensans);
}

a, .link {
    color: var(--coolblue-blue);
    text-decoration: none;
}

a:hover, .link:hover {
    text-decoration: underline;
}

/* grid */
.grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-columns: none;
}
    .gap--2 { gap: var(--spacing-horizontal-2); }
    .gap--4 { gap: var(--spacing-horizontal-4); }

    @media only screen and (min-width: 1024px) {
        .gap--8\@md { gap: var(--spacing-horizontal-8); }
        .gap--6\@md { gap: var(--spacing-horizontal-6); }
        .gap--4\@md { gap: var(--spacing-horizontal-4); }
        .gap--2\@md { gap: var(--spacing-horizontal-2); }
    }

    .grid > *, /* fall back to rows only */
    .grid > .col--12 {
        grid-column: 1;
    }

/* ui features */
body.ui-minimal {
    --header-height: 0;
}
    body.ui-minimal .hide\@minimal { display: none; }


/* Notifications */
.notice {
    background-color: var(--notice-color-background);
    border: 1px solid var(--notice-color-border);
    border-radius: var(--border-radius);
    display: grid;
    gap: var(--spacing-horizontal-1);
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    grid-template-columns: none;
    padding: var(--spacing-inset-3) var(--spacing-inset-3) var(--spacing-inset-3) calc(var(--spacing-inset-3) + var(--icon-sizing-4) + var(--spacing-horizontal-2));
    position: relative;
}

    .notice::before {
        display: block;
        position: absolute;
        width: var(--icon-sizing-4);
        height: var(--icon-sizing-4);
        top: var(--spacing-inset-3);
        left: var(--spacing-inset-3);
    }

    .notice__title {
        display: block;
        position: relative;
        font-style: normal;
        font-weight: bold;
        line-height: 125%;
    }

    .notice__body {
        display: block;
        line-height: 146%;
    }

.notice--success {
    --notice-color-background: var(--cb-notice-warning-color-background, var(--color-peppermint));
    --notice-color-border: var(--cb-notice-warning-color-border, var(--green));
}
    .notice--success::before {
        content: var(--icon-check-circle-green);
    }

.notice--warning {
  --notice-color-background: var(--cb-notice-warning-color-background, var(--color-citrusyellow));
  --notice-color-border: var(--cb-notice-warning-color-border, var(--color-melonyellow));
}
    .notice--warning::before {
        content: var(--icon-exclamation-yellow);
    }

.notice--critical {
  --notice-color-background: var(--cb-notice-critical-color-background, var(--color-lightpink));
  --notice-color-border: var(--cb-notice-critical-color-border, var(--color-scarletred));
}
    .notice--critical::before {
        content: var(--icon-cross-circle-red);
    }

.notice:empty { display: none; }

/* Identity provider */
@media (max-width:500px) { /* mobile */
    footer { background: var(--coolblue-blue); }
    footer a, footer .safe_login { color: var(--white); }
}

main {
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: var(--spacing-horizontal-4);
}

    @media only screen and (min-width: 1024px) {
        main {
            padding-top: var(--spacing-horizontal-8);
        }
    }

header {
    background: var(--coolblue-blue);
    height: var(--header-height);
    position: fixed;
    left: 0; top: 0; right: 0;
    text-align: center;
}
    .header__logo {
        display: inline-block;
        height: var(--logo-height);
        width: var(--logo-width);
    }

footer {
    align-items: center;
    display: flex;
    height: var(--footer-height);
    justify-content: center;
    text-align: center;
    width: 100vw;
}
    footer > a {

    }

h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
}

h1 {
    color: var(--darkblue);
    font-family: var(--font-family-dobra-slab-medium);
    font-size: var(--font-size-heading-1);
    margin-bottom: var(--spacing-vertical-2);
    font-weight: var(--font-weight-bold);
}

h2, h3, h4, h5, h6 {
    color: var(--color-text-heading);
    font-family: var(--font-family-opensans);
    margin-bottom: var(--spacing-vertical-1);
}

form { background: var(--white); }
fieldset { border: 0; padding: 0; }
legend { display: none; }

label {
    display: block;
    font-weight: var(--font-weight-semi-bold);
}

input:not([type="submit"]):not([type="checkbox"]) {
    display: block;
    margin-top: 0.4rem;
    width: 100%;
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius);
    padding: var(--input-padding);
    height: var(--input-height);
}
    input:not([type="submit"]):not([type="checkbox"]):focus {
        border-color: var(--input-border-color-focus);
        outline: none;
    }

    input:not([type="submit"]):not([type="checkbox"]).is-invalid {
        background-color: var(--cb-notice-critical-color-background, var(--color-lightpink));
        border-color: var(--cb-notice-critical-color-border, var(--color-scarletred));
    }

    input:not([type="submit"]):not([type="checkbox"]):valid {
        border-bottom-color: var(--green);
    }

input.with-icon:valid {
    background-image: url('../images/check.svg');
    background-position: right var(--sizing-2) center;
    background-repeat: no-repeat;
    background-size: var(--icon-sizing-3) var(--icon-sizing-3);
    padding-right: calc(var(--spacing-horizontal-2) + var(--icon-sizing-3) + var(--spacing-horizontal-2));
}

    /* Keep password managers in mind */
    input.with-icon:valid[data-dashlane-rid] { /* dashlane */
        background-position: right calc(var(--sizing-2) + 16px) center;
        padding-right: calc(var(--spacing-horizontal-2) + var(--icon-sizing-3) + var(--spacing-horizontal-2) + 16px);
    }

.input--error {
    color: var(--color-scarletred);
    font-weight: normal;
    padding-top: var(--spacing-horizontal-1);
}

button:hover { cursor: pointer; }

.button {
    background: var(--button-background-color);
    border: 0;
    border-radius: var(--border-radius);
    color: var(--white);
    font-weight: var(--font-weight-bold);
    font-family: var(--button-font-family);
    padding: var(--button-padding);
    width: 100%;
    height: var(--button-height);
    outline: none;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 var(--button-shador-color);
    text-align: center;
}
    .button:hover,
    .button:focus {
        --button-background-color: var(--button-background-color-active);
        --button-shador-color: var(--button-shador-color-active);
        cursor: pointer;
    }

    .button.button-secondary {
        background: var(--button-secondary-background-color);
        border: 1px solid var(--button-secondary-border-color);
        color: var(--button-secondary-color);
        box-shadow: inset 0 -1px 0 0 var(--button-secondary-shadow-color);
    }
        .button.button-secondary:hover,
        .button.button-secondary:focus {
            --button-secondary-border-color: var(--button-secondary-border-color-active);
            --button-secondary-shadow-color: var(--button-secondary-shadow-color-active);
        }

button.link {
    text-decoration: none;
    background-color: initial;
    border: 0;
    cursor: pointer;
    display: contents;
    font-family: Open Sans,Arial,Helvetica,Verdana,sans-serif;
    font-size: inherit;
    font-weight: normal; /* iOS forces bold rendering of buttons */
    overflow: hidden;
}

show-password {
    display: block; /* inherited from input */
    position: relative;
}
    show-password .show-password--button {
        position: absolute;
        right: var(--spacing-horizontal-2);
        top: 0;
        height: var(--input-height);

        border: 0;
        background: none;
        color: var(--coolblue-blue);
        cursor: pointer;
    }

form.loading button[type="submit"]:not([form]).button,
button[type="submit"].button.loading {
    background: var(--button-background-color-loading);
    box-shadow: none;
    cursor: wait;
    position: relative;
}
    form.loading button[type="submit"]:not([form]).button:after,
    button[type="submit"].button.loading:after {
        animation: is-loading var(--animation-slow) infinite;
        background-color: var(--button-background-color);
        content: "";
        display: block;
        height: var(--border-radius);
        left: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 1rem;
    }

button[type="submit"].button-secondary.loading {
    background-color: var(--button-secondary-background-color-loading);
    border-color: var(--button-secondary-border-color-loading);
    color: var(--button-secondary-color-loading);
}
    button[type="submit"].button-secondary.loading:after {
        background-color: var(--button-secondary-border-color-loading);
    }

a.link__icon {
    display: inline-block;
    vertical-align: middle;
}

a.link__icon::before {
    content: "";
    display: inline-block;
    height: 1em;
    width: 1em;
    background: currentColor;
    -webkit-mask-size: cover;
    mask-size: cover;
}

    a.link__icon.link__continue::before {
        -webkit-mask-image: var(--icon-chevron);
        mask-image: var(--icon-chevron);
        transform: translatey(0.15em)
    }

    a.link__icon.link__back::before {
        -webkit-mask-image: var(--icon-chevron);
        mask-image: var(--icon-chevron);
        transform: translatey(0.15em) rotate(180deg);
    }

.link__change-email {
    margin-left: var(--spacing-horizontal-2);
}

.label__password {
    display: flex;
    justify-content: space-between;
}

.safe_login svg{
  display: inline-block;
  height: var(--icon-sizing-4);
  vertical-align: middle;
  width: var(--icon-sizing-4);
  fill: inherit;
  margin-top: -3px;
  color: inherit;
}

.safe_login {
  display: inline-block;
  color: var(--color-text-secondary);
}

.email_exists_subtitle{
    color: var(--color-text-secondary)
}

.hidden {
    display: none;
}

.divider {
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: row;
}
    .divider:before, .divider:after{
        content: "";
        flex: 1 1;
        border-bottom: 1px solid;
        border-color: var(--silver);
        margin: auto;
    }
    .divider:before {
        margin-right: var(--spacing-horizontal-2);
    }
    .divider:after {
        margin-left: var(--spacing-horizontal-2);
    }

@media (min-width: 501px) { /* tablet & desktop */
    :root {
      --header-height: var(--sizing-13);
      --spacing-section: var(--spacing-vertical-6);
      --spacing-footer-links: var(--spacing-horizontal-8);
    }

    main {
        margin: var(--header-height) auto 0;
        width: 500px;
    }

    h1 {
        font-size: var(--font-size-heading-1-large);
    }

    h2 {
        font-size: var(--font-size-heading-2-large);
    }
}

cb-email-exists,
cb-login,
cb-register { display: block; }


@media (min-width: 501px) { /* tablet & desktop */
    .recaptcha * {
        margin: 0 0 0 auto;
    }
}

.recaptcha{
    display: flex;
    justify-self: left;
}

.password-strength {
    color: var(--password-strength-text-color);
    margin-top: var(--spacing-horizontal-1);
}
    .password-strength__body {
        display: flex;
        gap: var(--spacing-horizontal-2);
    }
        .password-strength__title {
            flex: initial;
        }
        .password-strength__meter {
            align-items: center;
            display: flex;
            flex: auto;
            font-size: var(--password-strength-bar-height);
            position: relative;
        }
        .password-strength__step {
            display: inline-block;
            height: fit-content;
            width: 25%;
            z-index: 2;
        }
        .password-strength__step:not(:last-child) {
            border-right: 1px solid var(--password-strength-divider-color);
        }
        .password-strength__bar {
            background: var(--password-strength-bar-color);
            position: absolute;
            z-index: 1;
        }
    .password-strength__tip {
        margin-top: var(--spacing-horizontal-1);
    }

*[data-hidden] {
    width: 0px;
    height: 0px;
    overflow: hidden;
}
    /* Some password managers still try to add icons */
    [data-hidden] [data-dashlanecreated] {
        display: none !important;
    }

a.feedback {
  background-color: var(--orange);
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
  user-select: none;
  padding: 3px;
}

@media (max-width:500px) {
    cb-login-code {
        --ni-total-width: calc(100vw - 30px);
    }
}

@media (min-width:501px) {
    cb-login-code {
        --ni-total-width: 500px;
    }
}