@font-face {
    font-display: swap;
    font-family: ZEISS Frutiger Next;
    src: local("ZEISS Frutiger Next"),url(https://zeiss.azureedge.net/ZEISSFrutigerNextUI-Reg-72f70b.woff2) format("woff")
}

@font-face {
    font-display: swap;
    font-family: ZEISS Frutiger Next;
    font-weight: 300;
    src: local("ZEISS Frutiger Next"),url(https://zeiss.azureedge.net/ZEISSFrutigerNextUI-Light-772b6f.woff2) format("woff")
}

@font-face {
    font-display: swap;
    font-family: ZEISS Frutiger Next;
    font-weight: 500;
    src: local("ZEISS Frutiger Next"),url(https://zeiss.azureedge.net/ZEISSFrutigerNextUI-Medium-187a01.woff2) format("woff")
}

@font-face {
    font-display: swap;
    font-family: ZEISS Frutiger Next;
    font-weight: 700;
    src: local("ZEISS Frutiger Next"),url(https://zeiss.azureedge.net/ZEISSFrutigerNextUI-Bold-c9daaf.woff2) format("woff")
}

:root {
    --sizes__content-area: 100%;
    --sizes__logo: 32px;
    --sizes__benefit-icon: 12px;
    --sizes__input: 42px;
    --sizes__button: 32px;
    --sizes__error-icon: 16px;
    --sizes__content-max-width: none;
    --sizes__background-image-max-width: 102.5vw;
    --layout__margins--xxs: 2px;
    --layout__margins--xs: 4px;
    --layout__margins--s: 8px;
    --layout__margins--m: 16px;
    --layout__margins--l: 24px;
    --layout__margins--xl: 32px;
    --layout__margins--xxl: 72px;
    --typo__font-family: "ZEISS Frutiger Next","Helvetica Neue",Helvetica,Arial,sans-serif;
    --typo__font-size--xs: 9px;
    --typo__line-height--xs: 12px;
    --typo__font-size--s: 12px;
    --typo__line-height--s: 18px;
    --typo__font-size--m: 14px;
    --typo__font-size--l: 21px;
    --typo__line-height--m: 20px;
    --typo__font-size--xl: 24px;
    --typo__line-height--xl: 30px;
    --typo__font-weight--medium: 400;
    --typo__font-weight--bold: 500;
    --typo__font-weight--black: 700;
    --main__background-color: #fff;
    --text__color--primary: #32373e;
    --text__color--secondary: #606a76;
    --button__color--primary: #fff;
    --button__surface--primary: #0072ef;
    --button__border--primary: #0072ef;
    --button__hover-color--primary: #fff;
    --button__hover-surface--primary: #0052aa;
    --button__hover-border--primary: #0052aa;
    --button__focus-color--primary: #fff;
    --button__focus-surface--primary: #00346c;
    --button__focus-border--primary: #00346c;
    --button__color--secondary: #0072ef;
    --button__surface--secondary: transparent;
    --button__border--secondary: #0072ef;
    --button__hover-color--secondary: #fff;
    --button__hover-surface--secondary: #0052aa;
    --button__hover-border--secondary: #0052aa;
    --button__focus-color--secondary: #fff;
    --button__focus-surface--secondary: #00346c;
    --button__focus-border--secondary: #00346c;
    --link__color--primary: #0072ef;
    --link__hover-color--primary: #0052aa;
    --link__focus-color--primary: #00346c;
    --link__color--secondary: #727272;
    --link__hover-color--secondary: var(--text__color--primary);
    --link__focus-color--secondary: #00346c;
    --link__underline-color--default: currentColor;
    --form__input-surface: hsla(0,0%,100%,0);
    --form__input-border-color--hover: hsla(0,0%,100%,0);
    --form__input-surface--focus: #ecf0f4;
    --form__input-surface--error: hsla(0,99%,74%,.2);
    --form__input-border-color: #c2cdd6;
    --form__input-border-color--hover: #32373e;
    --form__input-border-color--focus: #c2cdd6;
    --form__input-border-color--error: #e71e1e;
    --button__border-width--default: 1px;
    --button__border-radius--default: 3px;
    --button__padding--default: 6px 0;
    --link__underline-width--default: 1px;
    --divider__border-color: #c2cdd6;
    --divider__width: 1px;
    --form__input-border-width: 1px;
    --form__input-line-height: 22px;
    --form__input-font-size: var(--typo__font-size--s);
    --form__input-border-radius: 0;
    --form__input-padding--top: 4px;
    --form__input-padding--side: 4px;
    --form__input-padding: var(--form__input-padding--top) var(--form__input-padding--side);
    --alert__background-color: #fff;
    --alert__border-radius: 8px;
    --alert__type-indicator-width: 4px;
    --alert__box-shadow: 0px 4px 16px rgba(25,25,25,.16);
    --transition__timing--default: 0.3s;
    --z-index__background-image: -1;
    --z-index__logo: 3;
    --z-index__alert: 14;
    --z-index__visually-hidden: -1000
}

body {
    color: var(--color-text--color);
    font-family: var(--typo__font-family);
    font-size: var(--typo__font-size--s);
    font-weight: var(--typo__font-weight--medium);
    letter-spacing: .5px;
    line-height: var(--typo__line-height--s);
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100%
}

* {
    box-sizing: border-box
}

.login-page__visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    z-index: var(--z-index__visually-hidden)
}

.login-page__logo-layout {
    margin-bottom: var(--layout__margins--l)
}

.login-page__page-layout {
    align-items: flex-start;
    background: var(--main__background-color);
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    padding: 0 var(--layout__margins--m)
}

.login-page__content-layout {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: var(--layout__margins--xxl) 0 var(--layout__margins--xl);
    width: 100%
}

.login-page__background-layout {
    display: none
}

.zeiss-login__layout--section {
    margin-bottom: var(--layout__margins--m)
}

.zeiss-login__layout--page-title {
    margin-bottom: calc(var(--layout__margins--m) + 3px)
}

.login-page__register, .login-page__reset-password, .zeiss-login__auth-choice-connector .login-page__listofservices {
    margin-bottom: var(--layout__margins--m)
}

.login-page__reset-password {
    text-align: center
}

.zeiss-login__auth-choice-connector {
    align-items: center;
    display: flex
}

.zeiss-login__auth-choice-connector-text {
    color: var(--text__color--secondary);
    display: flex;
    flex: 0 0 auto;
    font-size: var(--typo__font-size--m);
    line-height: var(--typo__line-height--m);
    padding: 0 var(--layout__margins--xs)
}

.zeiss-login__auth-choice-connector:after, .zeiss-login__auth-choice-connector:before {
    background: var(--divider__border-color);
    content: "";
    display: flex;
    flex: 0 1 50%;
    height: var(--divider__width)
}

.login-page__main {
    display: flex;
    flex-direction: column;
    max-width: var(--sizes__content-max-width);
    width: 100%
}

.login-page__background-image {
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 100% 60%;
    padding: 0;
    width: 100%
}

.login-page__logo {
    display: inline-block;
    height: var(--sizes__logo);
    width: var(--sizes__logo)
}

    .login-page__logo[href=""] {
        cursor: default;
        pointer-events: none
    }

.login-page__logo-image {
    height: 100%;
    width: 100%
}

.login-page__logo:focus {
    outline: 2px solid var(--link__focus-color--primary);
    outline-offset: var(--layout__margins--xxs)
}

.login-page__topline {
    color: var(--text__color--primary);
    font-size: var(--typo__font-size--s);
    font-weight: var(--typo__font-weight--bold);
    margin: 0;
    margin-bottom: var(--layout__margins--s);
    text-transform: uppercase
}

.login-page__main-title {
    color: var(--text__color--primary);
    font-size: var(--typo__font-size--l);
    font-weight: var(--typo__font-weight--black);
    line-height: var(--typo__line-height--xl);
    margin: 0
}

.login-page__footer {
    margin-top: var(--layout__margins--xl);
    max-width: var(--sizes__content-max-width);
    width: 100%
}

.login-page__footer-links {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0
}

.login-page__footer-link {
    display: inline-flex;
    margin: 0;
    padding: 0
}

    .login-page__footer-link:not(:last-child):after {
        content: "|";
        display: inline-block;
        margin: 0 .5ch
    }

.zeiss-login__benefits {
    color: var(--text__color--secondary);
    list-style: none;
    margin: 0;
    padding: 0
}

.zeiss-login__benefit {
    align-items: center;
    display: flex;
    list-style-type: none;
    margin-bottom: var(--layout__margins--s)
}

    .zeiss-login__benefit:before {
        background-image: url(https://zeisscdnblob.blob.core.windows.net/cdn/loginPages/MyZeiss/prod/assets/benefit-icon.svg);
        content: "";
        display: flex;
        height: var(--sizes__benefit-icon);
        margin-right: var(--layout__margins--s);
        width: var(--sizes__benefit-icon)
    }

    .zeiss-login__benefit:last-child {
        margin-bottom: 0
    }

.zeiss-login__ZEISScustomer {
    color: var(--text__color--secondary);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--typo__font-size--m);
    line-height: var(--typo__line-height--m);
    text-align: center;
}

.login-page__link {
    outline: none;
    text-decoration: none
}

    .login-page__link .login-page__link-text {
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 var(--link__underline-width--default);
        display: inline-block;
        position: relative;
        transition: background-size var(--transition__timing--default) ease-out
    }

    .login-page__link:focus .login-page__link-text, .login-page__link:hover .login-page__link-text {
        background-size: 100% var(--link__underline-width--default);
        transition-delay: 0s
    }

.login-page__link--primary {
    color: var(--link__color--primary);
    font-weight: var(--typo__font-weight--bold)
}

    .login-page__link--primary .login-page__link-text {
        background-image: linear-gradient(to bottom,var(--link__color--primary) 0,var(--link__color--primary) 100%)
    }

    .login-page__link--primary:hover .login-page__link-text {
        color: var(--link__hover-color--primary)
    }

    .login-page__link--primary:hover .login-page__link-text {
        background-image: linear-gradient(to bottom,var(--link__hover-color--primary) 0,var(--link__hover-color--primary) 100%)
    }

    .login-page__link--primary:focus .login-page__link-text {
        color: var(--link__focus-color--primary)
    }

    .login-page__link--primary:focus .login-page__link-text {
        background-image: linear-gradient(to bottom,var(--link__focus-color--primary) 0,var(--link__focus-color--primary) 100%)
    }

.login-page__link--secondary {
    color: var(--link__color--secondary)
}

    .login-page__link--secondary .login-page__link-text {
        background-image: linear-gradient(to bottom,var(--link__color--secondary) 0,var(--link__color--secondary) 100%)
    }

    .login-page__link--secondary:hover {
        color: var(--link__hover-color--secondary)
    }

        .login-page__link--secondary:hover .login-page__link-text {
            background-image: linear-gradient(to bottom,var(--link__hover-color--secondary) 0,var(--link__hover-color--secondary) 100%)
        }

    .login-page__link--secondary:focus {
        color: var(--link__focus-color--secondary)
    }

        .login-page__link--secondary:focus .login-page__link-text {
            background-image: linear-gradient(to bottom,var(--link__focus-color--secondary) 0,var(--link__focus-color--secondary) 100%)
        }

.floatl{
    float: left;
}

.floatr{
    float: right;
}

.validation-error{
    color: red;
}

#api #createAccount, #api #next, #api .accountButton.firstButton, .login-page__button {
    border: var(--button__border-width--default) solid;
    border-radius: var(--button__border-radius--default);
    cursor: pointer;
    display: block;
    font-family: var(--typo__font-family--default);
    font-size: var(--typo__font-size--s);
    font-weight: var(--typo__font-weight--bold);
    letter-spacing: .02em;
    line-height: var(--typo__line-height--s);
    outline: none;
    overflow: hidden;
    padding: var(--button__padding--default);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    width: 100%
}

    #api #next:after {
        color: var(--button__color--primary);
        font-family: var(--typo__font-family--default);
        font-size: var(--typo__font-size--s);
        font-weight: var(--typo__font-weight--bold);
        line-height: var(--typo__line-height--s)
    }

#api .buttons .login::after {
    content: 'Login';
}

#api .buttons .reset::after {
    content: 'Reset Password';
}

#api .buttons .send-otp::after {
    content: 'Send Code';
}

#api .buttons .continue-otp::after {
    content: 'Continue';
}

#api #register-section a:after {
    display: none
}

#api #next, .login-page__button--primary {
    background: var(--button__surface--primary);
    border-color: var(--button__surface--primary);
    color: var(--button__color--primary)
}

    #api #next:hover, .login-page__button--primary:hover {
        background: var(--button__hover-surface--primary);
        border-color: var(--button__hover-surface--primary);
        color: var(--button__color--primary)
    }

    #api #next:focus, .login-page__button--primary:focus {
        background: var(--button__focus-surface--primary);
        border-color: var(--button__focus-surface--primary);
        color: var(--button__color--primary)
    }

#api #createAccount, #api .social .accountButton.firstButton, .login-page__button--secondary {
    background: var(--button__surface--secondary);
    border-color: var(--button__border--secondary);
    color: var(--button__color--secondary)
}

    #api #createAccount:hover, #api .social .accountButton.firstButton:hover, .login-page__button--secondary:hover {
        background: var(--button__hover-surface--secondary);
        border-color: var(--button__hover-border--secondary);
        color: var(--button__hover-color--secondary)
    }

    #api #createAccount:focus, #api .social .accountButton.firstButton:focus, .login-page__button--secondary:focus {
        background: var(--button__focus-surface--secondary);
        border-color: var(--button__focus-border--secondary);
        color: var(--button__focus-color--secondary)
    }

    #api .social .accountButton.firstButton:after {
        color: var(--button__color--secondary)
    }

    #api .social .accountButton.firstButton:hover:after {
        color: var(--button__hover-color--secondary)
    }

    #api .social .accountButton.firstButton:focus:after {
        color: var(--button__focus-color--secondary)
    }

    #api #createAccount:focus, #api .accountButton.firstButton:focus, .login-page__button--secondary:focus {
        background: var(--button__focus-surface--secondary);
        border-color: var(--button__focus-border--secondary);
        color: var(--button__focus-color--secondary)
    }

#api .create p {
    display: flex;
    font-size: 0
}

#api #forgotPassword, #api .create, #api .divider, #api .localAccount .intro, #api .social .intro, .linklist.section {
    display: none
}

#api .buttons #next, #api .entry-item:first-child label, #api .entry-item:nth-child(2) label, #api .social .accountButton.firstButton {
    color: transparent;
    font-size: 0;
    width: 100%
}

#api .buttons #next, #api .social .accountButton.firstButton {
    position: relative
}

    #api .accountButton.firstButton:after, #api .buttons #next:after, #api .entry-item:first-child label:after, #api .entry-item:nth-child(2) label:after {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    #api .accountButton.firstButton:after, #api .buttons #next:after {
        align-items: center;
        display: flex;
        font-size: var(--typo__font-size--s);
        justify-content: center
    }

.zeiss-login__layout--form {
    padding-bottom: var(--layout__margins--m);
    position: relative
}

#api .social {
    bottom: 0;
    height: auto;
    position: absolute;
    width: 100%
}

#api .options {
    position: static
}

#api .create, #api .divider, #api .entry {
    margin-bottom: var(--layout__margins--m)
}

#api input:-webkit-autofill, #api input:-webkit-autofill:active, #api input:-webkit-autofill:focus, #api input:-webkit-autofill:hover {
    mix-blend-mode: darken
}

#api .entry-item {
    left: calc(var(--form__input-padding--side)*-1);
    padding: 0 var(--form__input-padding--side);
    position: relative;
    width: calc(100% + var(--form__input-padding--side)*2)
}

#api div.password-label {
    display: block
}

#api .entry-item label:after {
    color: var(--text__color--secondary);
    display: block;
    font-size: var(--typo__font-size--xs);
    line-height: var(--typo__line-height--xs)
}

#api .entry-item:after {
    background: var(--form__input-border-color);
    content: "";
    height: var(--form__input-border-width);
    left: var(--form__input-padding--side);
    position: absolute;
    top: calc(var(--sizes__input) - var(--layout__margins--xs) - var(--form__input-border-width));
    width: calc(100% - var(--form__input-padding--side)*2);
    z-index: 3
}

#api .entry-item:hover:after {
    background: var(--form__input-border-color--hover)
}

#api .entry-item:focus-within:after {
    background: var(--form__input-border-color--focus)
}

#api input {
    border: 0;
    border-radius: var(--form__input-border-radius);
    color: var(--text__color--primary);
    display: block;
    font-family: var(--typo__font-family);
    font-size: var(--typo__font-size--s);
    font-weight: var(--typo__font-weight--medium);
    height: auto;
    left: calc(var(--form__input-padding--side)*-1);
    line-height: var(--form__input-line-height);
    outline: 4px solid transparent;
    padding: var(--form__input-padding);
    position: relative;
    width: 100%;
    width: calc(100% + var(--form__input-padding--side)*2);
    z-index: 2;
    letter-spacing:0.1em;
}

#api .entry-item {
    --tmp__input-surface--value: hsla(0,0%,100%,0);
    --tmp__input-surface--no-value: #fff
}

    #api .entry-item:focus-within {
        --tmp__input-surface--value: rgba(236,240,244,0);
        --tmp__input-surface--no-value: #ecf0f4
    }

    #api .entry-item label {
        position: absolute;
        top: calc(var(--form__input-padding--top) - 1px);
        z-index: 1
    }

#api input {
    background-color: var(--tmp__input-surface--no-value);
    padding-top: calc(var(--typo__line-height--xs) + var(--form__input-padding--top));
    transition: background-color var(--transition__timing--default)
}

    #api input:not(:placeholder-shown) {
        background-color: var(--tmp__input-surface--value)
    }

#api .entry-item:focus:before {
    background-color: var(--form__input-surface--focus);
    content: "";
    height: var(--sizes__input);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#api .entry-item {
    background: none;
    margin-bottom: calc(var(--layout__margins--m) - 2px)
}

    #api .entry-item + .entry-item {
        margin-bottom: calc(var(--layout__margins--l) - var(--form__input-padding--top)*1.5)
    }

#api div.entry-item input:focus::-webkit-input-placeholder, #api div.entry-item input:not(:focus)::-webkit-input-placeholder {
    color: var(--text__color--secondary);
    font-size: var(--typo__font-size--s);
    font-weight: var(--typo__font-weight--medium);
    position: static;
    transition: none
}

#api .entry-item {
    display: flex;
    flex-direction: column
}

    #api .entry-item .error {
        height: auto;
        order: 3
    }

        #api .entry-item .error > p {
            color: var(--form__input-border-color--error);
            margin: 0;
            padding: 0
        }

        #api .entry-item .error:before {
            background: var(--form__input-surface--error);
            content: "";
            display: block;
            height: var(--sizes__input);
            left: 0;
            pointer-events: none;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 3
        }

        #api .entry-item .error:after {
            background: var(--form__input-border-color--error);
            content: "";
            height: var(--form__input-border-width);
            left: var(--form__input-padding--side);
            position: absolute;
            top: calc(var(--sizes__input) - var(--layout__margins--xs) - var(--form__input-border-width));
            width: calc(100% - var(--form__input-padding--side)*2);
            z-index: 4
        }

#api .error.pageLevel {
    margin: 0;
    padding: 0
}

    #api .error.pageLevel p {
        color: var(--form__input-border-color--error);
        font-size: var(--typo__font-size--s);
        margin: 0 0 var(--layout__margins--l);
        position: relative;
        width: 100%
    }



@media (min-width:768px) {
    :root {
        --sizes__content-max-width: 272px;
        --alert__max-width: 320px
    }
}

@media (min-width:1024px) {
    :root {
        --sizes__content-area: 41.8125vw;
        --sizes__logo: 48px
    }

    .login-page__page-layout {
        align-items: center;
        padding: 0;
        width: var(--sizes__content-area)
    }

    .login-page__content-layout {
        margin: var(--layout__margins--xl) 0
    }

    .login-page__logo-layout {
        position: fixed;
        right: 30px;
        top: 30px;
        z-index: var(--z-index__logo)
    }

    .login-page__background-layout {
        align-items: flex-start;
        display: flex;
        height: 100%;
        justify-content: center;
        overflow: hidden;
        position: fixed;
        right: 0;
        top: 0;
        width: var(--sizes__background-image-max-width);
        z-index: var(--z-index__background-image)
    }
}

@media (min-width:1280px) {
    :root {
        --layout__margins--xs: 4px;
        --layout__margins--s: 8px;
        --layout__margins--m: 16px;
        --layout__margins--l: 24px;
        --layout__margins--xl: 40px;
        --sizes__content-max-width: 325px;
        --typo__line-height--m: 24px
    }

    .login-page__logo-layout {
        right: 54px;
        top: 54px
    }

    .zeiss-login__layout--page-title {
        margin-bottom: calc(var(--layout__margins--l) + 3px)
    }
}

@media (prefers-reduced-motion) {
    :root {
        --transition__timing--default: 0s
    }
}

@media (min-aspect-ratio:2) {
    :root {
        --sizes__background-image-max-width: 85vw
    }
}

@media (min-aspect-ratio:2.25) {
    :root {
        --sizes__background-image-max-width: calc(100vw - var(--sizes__content-area))
    }
}

@media (min-aspect-ratio:3) {
    .login-page__logo-layout {
        right: 30px;
        top: 30px
    }
}

.announcement {
    color: var(--button__color--primary);
    background-color: var(--button__surface--primary);
    border-color: var(--button__surface--primary);
    padding: 2px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 50px;
    font-size: var(--typo__font-size--s);
    font-family: var(--typo__font-family--default)
}