@import "variables.css";
@import "../fonts/AllianzNeo/AllianzNeo.css";

body.allianz {
    font-family: Allianz Neo, sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-primary-color);
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;

}

body.allianz .inverse {
    color: var(--white);
}

.container-fluid {
    padding: 0;
}

.allianz .color-red,
.allianz .has-error.help-block {
    color: var(--validation-red) !important;
}

.allianz .has-success.help-block {
    color: var(--green-2);
}

.allianz .color-light-blue {
    color: var(--primary);
}

.allianz header {
    background: var(--blue-2);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--white-transparent-20);
    height: 97px;
}

.allianz a {
    color: var(--text-primary-color);
    font-style: normal;
    font-weight: 700;
    text-decoration-line: underline;
}

.allianz label.color-red {
    color: var(--validation-red);
}

.allianz h1.login-verify-email-title {
    text-align: left;
    padding-bottom: 0;
}

.allianz h1.login-verify-email-subtitle {
    text-align: left;
    margin-left: 64px;
    padding-top: 0;
}

.allianz .falcon-header img.logo-image {
    height: 32px;
    width: auto;
}

.allianz h1 {

    font-family: Allianz Neo, sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 600;
    line-height: 80px;
    letter-spacing: -0.8px;
    padding: 64px 0 48px 0;
    margin: 0;
}

.allianz p {
    text-align: left;
}

.allianz #kc-reset-password-form {
    padding: 32px 0;
}

.allianz #change-email-instructions {
    color: var(--text-primary-color);
    font-family: Allianz Neo, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.allianz .falcon-header,
.allianz .falcon-content,
.allianz .falcon-button-content,
.allianz .email-verify-content,
.allianz .falcon-footer .entrust-section,
.allianz .falcon-footer .trademark-section,
.allianz .confetti {
    max-width: var(--grid-max-width);
    width: 100%;
    position: relative;
    display: block;
    padding-left: 64px;
    padding-right: 64px;
    margin: 0 auto;
}

.allianz .falcon-header,
.allianz .falcon-content,
.allianz .falcon-button-content,
.allianz .email-verify-content,
.allianz .confetti {
    padding-right: calc(max(min(100%, var(--grid-max-width)) - (var(--grid-width) + 64px), 64px));
}

.allianz .falcon-title {
    width: 100%;
    padding-left: 64px;
    margin: 0 auto;
    position: relative;
    display: block;
    max-width: var(--grid-max-width);
}

.allianz .falcon-footer {
    color: var(--text-primary-color);
    font-family: Allianz Neo, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.allianz .falcon-footer .entrust-section {
    display: flex;
    flex-direction: row;
    padding-top: 32px;
    padding-bottom: 32px;
    gap: 16px;
    align-items: center;
}

.allianz .falcon-footer .entrust-section-text {
    display: flex;
    flex-direction: column;
    margin: auto 0;
}

.allianz .falcon-footer .entrust-section-link {
    margin: 0 16px 0 0;
}

.allianz .falcon-footer .entrust-section-title {
    color: var(--text-primary-color);
    font-family: Allianz Neo, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

.allianz .falcon-footer .entrust-section-description {
    line-height: 24px;
}

.allianz .falcon-footer .entrust-section #allianz-logo-olympics {
    justify-content: end;
}

.allianz .falcon-footer .trademark-section {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    padding-bottom: 16px;
}

.allianz .falcon-footer .trademark-section .links {
    display: flex;
    flex-direction: row;
    padding-bottom: 16px;
}

.allianz .falcon-footer .trademark-section  .trademark-wording .trademark-copyright-bottom {
    display: inline;
    font-weight: 600;
    line-height: 24px;
}

.allianz .falcon-footer .falcon-footer-divider,
.allianz .falcon-footer .falcon-footer-divider-bottom {
    border-top: 1px solid var(--blue-9);
    width: 100%;
}

.allianz .falcon-content {
    margin-bottom: var(--spacing-xl);
    min-height: calc(100vh - 459px);
}

.allianz .falcon-verify-email-content .falcon-content {
    min-height: calc(100vh - 604px);
}

.allianz .content {
    width: 100%;
}

.allianz .text-secondary {
    color: var(--text-secondary-color);
    font-family: Allianz Neo, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: 0.32px;
}

.allianz .text-field {
    display: flex;
    height: 52px;
    padding: var(--text-field-padding);
    align-items: center;
    border-radius: var(--btn-corner-radius);
    border: 1px solid var(--blue-4);
    background: var(--white);
    color: var(--text-primary-color);
}

.allianz .falcon-input-form {
    display: grid;
    gap: 8px;
}

.allianz .falcon-input-container {
    display: grid;
    padding: var(--spacing-xl) 0;
    gap: var(--spacing-m);
}

.allianz .falcon-input-container label {
    color: var(--text-primary-color);
    font-family: Allianz Neo, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.allianz .text-field-password-container {
    position: relative;
    height: 52px;
}

.allianz .text-field,
.allianz .text-field-password-container {
    &:not(.email-code) {
        width: 320px;
    }
    &.email-code {
        width: 100px;
    }
}

.allianz .text-field-password-container.small {
    width: 200px;
}

.allianz .text-field-password-container a.show-hide-password {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 16px;
}

.allianz .text-field.validation-error-border {
    border: 1px solid var(--validation-red);
}

.allianz .text-sub-title {
    color: var(--text-secondary-color);
    font-family: Allianz Neo, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: 0.32px;
    text-transform: uppercase;
}

.allianz .sub-header {
    display: grid;
    gap: var(--spacing-l);
}

.allianz .login-form {
    display: grid;
    padding: var(--spacing-xl) 0;
    gap: var(--spacing-s);
}

.allianz .login-form-fields {
    display: grid;
    gap: var(--spacing-l);
}

.allianz .login-links {
    display: grid;
    gap: var(--spacing-l);
}

.allianz .login-buttons {
    display: grid;
    gap: var(--spacing-xl);
}

.allianz .login-button-or {
    align-items: center;
    text-align: center;
    color: var(--blue-3);
    display: flex;
    width: 320px;
    font-family: Allianz Neo, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    letter-spacing: 0.32px;
    text-transform: uppercase;
}

.allianz .login-button-or:before,
.allianz .login-button-or:after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--blue-9);
}

.allianz .login-button-or:not(:empty):before {
    margin-right: var(--spacing-s);
}

.allianz .login-button-or:not(:empty):after {
    margin-left: var(--spacing-s);
}

.allianz .green-tick-before {
    font-family: Allianz Neo, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 130% */
}


.allianz .green-tick-before:before {
    display: inline-flex;
    content: url('../images/green-tick.svg');
    width: 16.281px;
    height: 12px;
    margin: 5px 7px 5px 5px;
}

.allianz .text-field-password-container .tooltip-text {
    visibility: hidden;
    width: 100%;
    background-color: white;
    color: var(--text-primary-color);
    text-align: left;
    border-radius: 6px;
    padding: 10px 0 0;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: calc(100% + 7px);
    opacity: 0;
    transition: opacity 0.3s;
    border: 1px solid #00838F;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}

.allianz .text-field-password-container .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 9px 0 9px;
    border-color: white transparent transparent transparent;
}

.allianz .text-field-password-container .tooltip-text::before {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 9px 0 9px;
    border-color: green transparent transparent transparent;
}

.allianz .text-field-password-container .falcon-form-input:focus + .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.allianz .already-have-account {
    text-align: left;
    margin: 10px 0;
}

.allianz .falcon-verify-email-content .verify-email-content {
    position: relative;
}

.allianz .falcon-verify-email-content .verify-email-content .confetti {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--white);
    background-image: url('../images/Allianz_Confetti_Explosion.gif');
    background-size: cover;
}

.allianz .falcon-verify-email-content .verify-email-content .falcon-content {
    margin-bottom: 0;
}

.allianz .falcon-verify-email-content .verify-email-content .falcon-content .falcon-container {
    padding: 10px 0 100px;
}

.allianz .falcon-verify-email-content .falcon-content {
    position: relative;
}

.allianz #versionDisplayContainer {
    position: fixed;
    bottom: 0;
    right: 0;
    opacity: .5;
    margin: 6px;
    font-size: 10px;
    pointer-events: none;
}

.allianz .kc-message {
    color: var(--yellow-2);
    padding-left: 32px;
}

.allianz .kc-message:before {
    content: url('../images/warning.svg');
    width: 24px;
    height: 24px;
    position: absolute;
    margin-left: -32px;
}

@media screen and (max-width: 767px) {
    .allianz .falcon-header img.logo-image {
        height: 47px;
    }

    .allianz .falcon-title {
        padding: 0 24px !important;
    }

    .allianz .falcon-header {
        width: 100%;
        padding: 0 24px !important;
    }

    .allianz #kc-error-message {
        padding-left: 24px;
        padding-right: 24px;
    }

    .allianz .already-have-account {
        text-align: left;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .allianz .falcon-footer .entrust-section-link {
        margin: 0 auto 16px auto;
    }

    .allianz .falcon-footer .trademark-section .links {
        flex-direction: column;
    }

    .allianz .falcon-footer .trademark-section .links a {
        padding: 5px 0 !important;
    }

    .allianz .falcon-footer .falcon-footer-divider-bottom {
        display: none;
    }

    .allianz .falcon-content {
        min-height: calc(100vh - 430px);
    }

    .allianz .falcon-header,
    .allianz .falcon-content,
    .allianz .falcon-button-content,
    .allianz .email-verify-content,
    .allianz .falcon-footer .entrust-section,
    .allianz .falcon-footer .trademark-section,
    .allianz .confetti {
        width: 100%;
        padding: 0 24px;
    }

    .allianz .falcon-footer .entrust-section {
        flex-direction: column;
        margin-bottom: 16px;
        padding: 24px 24px 0 24px;
    }

    .allianz .falcon-footer .entrust-section #allianz-logo-olympics {
        justify-content: center;
    }

    .allianz .text-field,
    .allianz .text-field-password-container {
        width: 100%;
    }

    .allianz .login-button-or {
        width: 100%;
    }
}



@media (min-width: 704px) and (max-width: 992px) {
    .allianz .falcon-header,
    .allianz .falcon-content,
    .allianz .falcon-button-content,
    .allianz .email-verify-content,
    .allianz .falcon-footer .entrust-section,
    .allianz .falcon-footer .trademark-section,
    .allianz .confetti {
        width: 100%;
        padding: 0 48px;
    }

    .allianz .falcon-footer .entrust-section {
        padding: 32px 48px;
    }

    .allianz .falcon-footer .trademark-section {
        padding: 16px 48px 0;
    }
}

@media (min-width: 767px) and (max-width: 1312px) {
    .allianz .falcon-header,
    .allianz .falcon-content,
    .allianz .email-verify-content,
    .allianz .falcon-footer .entrust-section,
    .allianz .falcon-footer .trademark-section,
    .allianz .confetti {
        width: 100%;
    }

    .allianz .falcon-footer .trademark-section {
        padding-top: 16px;
    }

    .allianz .falcon-footer .entrust-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}


@media (max-width: 767px) {
    .allianz h1 {
        font-family: Allianz Neo, sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: 32px;
        letter-spacing: -0.005em;
        text-align: left;
        padding: 56px 0 48px 0;
        margin: 0;
    }
}

.allianz .login-verify-email-text {
    word-wrap: anywhere;
}

.allianz .falcon-signUp {
    text-align: start !important;
}

.allianz .falcon-email-instructions {
    text-align: start !important;
}

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

.allianz #kc-error-message {
    min-height: 300px;
    max-width: var(--grid-max-width);
    width: 100%;
    position: relative;
    display: block;
    padding-left: 64px;
    padding-right: 64px;
    margin: 0 auto;
}

.allianz #kc-error-message .instruction {
    font-family: Allianz Neo, sans-serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 600;
    line-height: 80px;
    letter-spacing: -0.8px;
    padding: 64px 0 48px 0;
    margin: 0;
}

@media (max-width: 767px) {
    .allianz #kc-error-message .instruction {
        font-family: Allianz Neo, sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: 32px;
        letter-spacing: -0.005em;
        text-align: left;
        padding: 56px 0 48px 0;
        margin: 0;
    }
}

.allianz #kc-logout-confirm {
    max-width: var(--grid-max-width);
    width: 100%;
    position: relative;
    display: block;
    padding: 64px;
    margin: 0 auto;
}

.allianz .falcon-footer .entrust-section #allianz-logo-olympics {
    justify-content: end;
}

.allianz .register-button-container div {
    margin-top: 40px;
}