/*** LOGIN PAGE ***/

.login-page {
    height: 100vh;
    width: 100vw;
}

.login-page .login-page-blur {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    max-height: 100vh;
    max-width: 100vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background: rgba(245, 245, 245, 0.2);
    backdrop-filter: blur(5px);
}

.login-page .center-block.out-login {
    /*display: flex;*/
    /*flex-direction: column;*/
    align-items: center;
    padding: 0px;
    /*gap: 0 40px;*/
    width: calc(100vw - 40px);
    height: inherit;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: all 0.0s linear;
    margin: 0 20px;
}

    .login-page .center-block.out-login .render-block,
    .login-page .center-block.out-login .render-block .content-block {
        width: 100%;
        max-width: calc(100vw - 40px);
        /*height: 100%;*/
        position: relative;
    }

    .login-page .center-block.out-login .render-block {
        height: calc(100vh - var(--first-top-block-height) - var(--first-top-block-height));
    }

/* Form */

.login-page .content-block .sign-in-form {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    align-items: center;
    padding: 20px;
    gap: 20px;
    /*width: 380px;*/
    /* max-height: 70vh; */
    max-width: calc(100vw - 40px);
    left: calc(50% - 380px / 2);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    border-radius: 10px;
    position: static;
    margin-top: 80px;
    /* transform: translate(0, -50%);*/
}

    .login-page .content-block .sign-in-form .title {
        font-weight: 800;
        font-size: 28px;
        line-height: 35px;
        color: #000000;
    }

    .login-page .content-block .sign-in-form .dx-popup-draggable.dx-popup-title {
        radius: 10px; /* TODO */
        padding: 30px, 50px, 30px, 50px;
        gap: 30px;
    }

/* Form: TextBox + Label */

.login-page .sign-in-form form .dx-texteditor-label .dx-label > span {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #000000;
}

.dx-editor-outlined.dx-texteditor-label-outside .dx-label span {
    text-align: start;
    top: -30px;
}

.login-page .sign-in-form form .dx-texteditor-container input {
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: var(--color-logo-red);
    padding: 5px 15px;
}

.login-page .sign-in-form form .dx-texteditor-container .dx-placeholder { /* input text : placeholder */
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #646464;
    padding: 5px 5px;
    margin: 0;
    height: 40px;
    /*display: none;*/
}

/*.login-page .sign-in-form form .dx-texteditor-container > input::placeholder {*/ /* input text : placeholder */
/*font-style: italic;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #646464;
    padding: 0 5px 0 5px;
    height: 25px;
}*/

.login-page .dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 0;
    margin-top: 20px;
}

.login-page .sign-in-form form .dx-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #646464;
    font-style: italic;
}

/* Form: Button */

.login-page .sign-in-form form .dx-texteditor-container .dx-texteditor-buttons-container {
    min-width: 45px;
}

    .login-page .sign-in-form form .dx-texteditor-container .dx-texteditor-buttons-container .dx-button-content > img {
        width: 40px;
        height: 40px;
        -webkit-margin-end: 0;
        margin-inline-end: 0;
        -webkit-margin-start: 0;
        margin-inline-start: 0;
    }

.dx-texteditor-buttons-container > .dx-button.dx-button-has-icon:not(.dx-button-has-text) > .dx-button-content {
    padding: 0;
}

.login-page .sign-in-form form .dx-form-group-content .dx-texteditor-container .dx-texteditor-buttons-container > .dx-button {
    margin-top: 0;
    margin-bottom: 0;
    -webkit-margin-start: 0;
    margin-inline-start: 0;
    -webkit-margin-end: 0;
    margin-inline-end: 0;
    width: 45px;
    height: 40px;
}

/* CheckBox */

.login-page .sign-in-form form .dx-field-item-content.dx-field-item-content-location-right {
    display: flex;
    justify-content: space-between;
    width: inherit;
}

.login-page .sign-in-form form .dx-checkbox-container .dx-checkbox-icon {
    width: 18px;
    height: 18px;
}

.login-page .sign-in-form form .dx-checkbox-container .dx-checkbox-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    -webkit-padding-start: 10px;
    padding-inline-start: 10px;
    margin-right: auto;
}

.login-page .sign-in-form form .checkboxLink {
    margin: 0;
    white-space: nowrap;
    display: inline-block;
    width: 114px;
    height: 18px;
    font-style: normal;
    font-weight: 800;
    font-size: 14px;
    line-height: 18px;
    text-decoration-line: underline;
    color: #646464;
}

.login-page .sign-in-form form .dx-checkbox.dx-checkbox-checked.dx-state-hover .checkboxLink,
.login-page .sign-in-form form .dx-checkbox.dx-checkbox-checked.dx-state-active .checkboxLink {
    color: var(--color-logo-red);
}

/* submit */

.login-page .sign-in-form form .dx-button-content .dx-button-text {
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: #FFFFFF;
}

/* ForgottenPasswordPopup */

.forgotten-password-popup .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 30px 30px 30px;
    gap: 20px;
    isolation: isolate;
    /*height: 100%;*/
    height: auto;
    width: auto;
}

    .forgotten-password-popup .content .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 10px;
        width: 362px;
        max-width: 90vw;
        height: auto;
    }

        .forgotten-password-popup .content .info .info-text {
            font-weight: 700;
            font-size: 18px;
            line-height: 23px;
            text-align: start;
            color: #000000;
            text-indent: 0px;
        }

    .forgotten-password-popup .content .content-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 20px;
        background: var(--color-logo-red);
        border-radius: 5px;
        border-style: none;
        border-color: none;
        width: 360px;
        max-width: 90vw;
        height: 50px;
        min-height: 50px;
    }

        .forgotten-password-popup .content .content-button .content-button-text {
            font-weight: 800;
            font-size: 18px;
            line-height: 23px;
            text-align: center;
            color: #FFFFFF;
        }