@media (max-width: 850px) {
    .tile--large {
        max-width: 514px !important;
    }
}

@media (max-width: 1440px) and (min-width: 851px) {
    .tile--large {
        max-width: 640px !important;
    }
}

@media (min-width: 1441px) {
    .tile--large {
        max-width: 880px !important;
    }
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100% !important;
}

body {
    width: 100%;
    height: 100vh;
    display: block;
    background-color: var(--background-color);
    margin: 0px !important;
    font-family: "Weissenhof Grotesk", Arial, sans-serif !important;
    font-weight: var(--body-font-m-weight);
    color: var(--body-font-m-color);
    font-size: var(--body-font-m-size);
    line-height: var(--body-font-m-line-height);
}

html,
main {
    width: 100%;
    height: calc(100vh - var(--logo-header-height));
    display: block;
    background-color: var(--background-color);
    margin: 0px !important;
    font-family: "Weissenhof Grotesk", Arial, sans-serif !important;
    font-weight: var(--body-font-m-weight);
    color: var(--body-font-m-color);
    font-size: var(--body-font-m-size);
    line-height: var(--body-font-m-line-height);
}

.container {
    max-width: 100% !important;
}

.logo-header {
    background-color: var(--logo-header-background-color);
    height: var(--logo-header-height);
    padding: var(--logo-header-padding);
    background-image: url(/images/brocacef-logo.svg);
    background-repeat: no-repeat;
    background-position: 0;
    background-origin: content-box;
}

.heading-l {
    font-weight: var(--headling-l-font-weight);
    color: var(--headling-l-color);
    font-size: var(--headling-l-font-size);
    line-height: var(--headling-l-line-height);
    text-box: trim-both cap alphabetic;
    margin-bottom: 0px;
}

.heading-m {
    font-weight: var(--headling-m-font-weight);
    color: var(--headling-m-color);
    font-size: var(--headling-m-font-size);
    line-height: var(--headling-m-line-height);
    text-box: trim-both cap alphabetic;
    margin-bottom: 0px;
}

.body-font-m {
    font-weight: var(--body-font-m-weight);
    color: var(--body-font-m-color);
    font-size: var(--body-font-m-size);
    line-height: var(--body-line-m-height);
    margin-bottom: 0px;
}

.body-font-l {
    font-weight: var(--body-font-l-weight);
    color: var(--body-font-l-color);
    font-size: var(--body-font-l-size);
    line-height: var(--body-line-l-height);
    margin-bottom: 0px;
}

.bold {
    font-weight: 700 !important;
}

.link-text {
    font-size: var(--link-text-font-size);
    font-weight: var(--link-text-font-weight);
    font-style: var(--link-text-font-style);
    line-height: var(--link-text-font-line-height);
    color: var(--link-text-font-color);
    text-box: trim-both cap alphabetic;
    text-decoration: none;
    /* Add this margin to make the focus highlighting work on mozilla firefox */
    margin-left: 1px;
}

.tile {
    width: auto;
    max-width: 400px;
    height: fit-content;
    padding: 32px;
    background-color: #ffffff;
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 8px;
    /* Firefox 1-3.6 */
    -moz-border-radius: 8px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 8px;
}

.tile.tile-grey {
    border: none;
    background: var(--grey-tile-color);
}

.space-64 {
    margin-top: 64px !important;
}

.space-32 {
    margin-top: 32px !important;
}

.space-24 {
    margin-top: 24px !important;
}

.space-16 {
    margin-top: 16px !important;
}

.space-8 {
    margin-top: 8px !important;
}

.space-6 {
    margin-top: 6px !important;
}
.bottom-space-100 {
    margin-bottom: 100px !important;
}

.button {
    display: flex;
    flex-direction: row;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    height: 56px !important;
    border: 0px;
    max-width: 174px;
    padding: var(--button-padding);
    gap: 8px;
    align-self: stretch;
    text-align: center;
    font-size: var(--cta-font-size);
    line-height: var(--cta-line-height);
    font-weight: var(--cta-font-weight);
    font-stretch: normal;
    font-style: var(--cta-font-stye);
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 8px;
    /* Firefox 1-3.6 */
    -moz-border-radius: 8px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 8px;
    user-select: text;
    cursor: pointer;
}

.button.call2action {
    min-width: 150px;
    max-width: 100%;
    background-color: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
}

.button.call2action:hover {
    background-color: var(--benu-hover-blue) !important;
}

.button.cancel {
    background: transparent;
    background-color: transparent;
    color: var(--button-cancel-text-color);
    max-width: 100%;
    text-decoration: none !important;
}

.cancel-link {
    margin-right: 1px;
}

.link-button {
    border: none;
    cursor: pointer;
    font-size: var(--cta-font-size);
    font-weight: var(--cta-font-weight);
    font-stretch: normal;
    font-style: var(--cta-font-stye);
    color: var(--cta-font-color-blue);
    background-image: url(/images/icon-arrow-primary.svg);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 0;
    background-color: transparent;
    padding: 0px 0px 0px 32px;
    text-box: trim-both cap alphabetic;
}

.two-factor-cooldown {
    border: none;
    cursor: pointer;
    font-size: var(--cta-font-size);
    font-weight: var(--cta-font-weight);
    font-stretch: normal;
    font-style: var(--cta-font-stye);
    color: var(--secondary-color);
    background-image: url(/images/icon-arrow-secondary.svg);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 0;
    padding-left: 32px;
    text-box: trim-both cap alphabetic;
}

label {
    width: 100%;
}

.text-input {
    height: 56px;
    width: 100%;
    border: 2px solid var(--input-border-color);
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: var(--input-border-radius);
    /* Firefox 1-3.6 */
    -moz-border-radius: var(--input-border-radius);
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: var(--input-border-radius);
    padding: 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    display: flex;
    background-color: var(--input-border-radius);
    font-weight: var(--body-font-m-weight);
    color: var(--body-font-m-color);
    font-size: var(--body-font-m-size);
    line-height: var(--body-line-m-height);
}

input[type='password'] {
    font-family: Verdana;
    font-size: 1.25em;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

:focus-visible {
    outline: none;
}

.phone-input-box:focus-within {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.button:focus-visible {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.link-button:focus-within {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.password-eye:focus-within {
    outline: var(--accessibility-outline) !important;
    border-radius: var(--input-border-radius);
}

.text-input:not(.phone-input):focus-within {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.button-link:focus-within {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.link:focus-within {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.link-text:focus-within {
    outline: var(--accessibility-outline) !important;
    outline-offset: var(--accessibility-offset) !important;
    border-radius: var(--input-border-radius);
}

.contact-icon {
    height: 24px;
    width: 24px;
    margin-right: 6px;
}

.password-eye-box {
    display: flex;
    float: right;
}

.password-eye {
    background-color: var(--input-background-color);
    outline: none;
    border: none;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.password-eye-icon {
    height: 24px;
    width: 24px;
}

.password-eye-text {
    font-size: var(--body-font-s-size);
    font-weight: var(--body-font-s-weight);
    line-height: var(--body-line-s-height);
    color: var(--body-font-s-color);
}

.mail-link {
    margin-left: 32px;
    text-decoration: none;
    font-weight: var(--body-font-m-weight);
    color: var(--body-font-m-color);
    font-size: var(--body-font-m-size);
    line-height: var(--body-line-m-height);
    display: inline-block;
}

.text-align-right {
    text-align: right;
}

.w-100 {
    width: 100%;
}

.validation-error {
    color: var(--error-color) !important;
    margin-top: 4px;
}

.input-validation-error {
    border: 2px solid var(--error-color) !important;
    color: var(--error-color) !important;
}

::placeholder {
    color: var(--placeholder-color);
    font-weight: var(--body-font-m-weight);
    font-size: var(--body-font-m-size);
    line-height: var(--body-line-m-height);
}

.country-code {
    border: none;
    background-color: transparent;
    color: var(--benu-royal-blue);
    margin-left: 16px;
    font-weight: 280;
}

.phone-input-box {
    border: 2px solid var(--input-border-color);
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: var(--input-border-radius);
    /* Firefox 1-3.6 */
    -moz-border-radius: var(--input-border-radius);
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: var(--input-border-radius);
}

.phone-input {
    border: none;
}

.password-validations {
    width: 100%;
    height: fit-content;
    padding: 24px 24px 12px 24px;
    background-color: #ffffff;
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 8px;
    /* Firefox 1-3.6 */
    -moz-border-radius: 8px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 8px;
    border: none;
    background: var(--grey-tile-color);
}