/* LOGIN page layout */
.modal-dialog.login-modal {
    position: fixed;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow-y: auto !important;
    display: flex;
    align-items: initial;
    /* CSS variables used in this style are built-in to Xeelo styles and their values (colors) are set based on current theme
    --xe-login-bg-color: var(--xe-dark-08);
    --xe-login-box-bg-color: var(--xe-white);
    --xe-login-box-box-shadow: 0px 2px 4px #2B364214;
    --xe-login-label-fg-color: var(--xe-dark-88);
    --xe-login-reset-password-btn-bg-color: var(--xe-cyan-88);
    --xe-login-text-color: var(--xe-general-text-default-color);
    --xe-login-input-border-color: var(--is-control-border-color);
    --xe-login-input-bg-color: var(--is-control-bg-color);
    --xe-login-input-fg-color: var(--is-control-fg-color);
    --xe-login-input-border-focus-color: var(--is-control-border-focus-color);
    --xe-login-input-invalid-border-color: var(--xe-red-100);
    --xe-login-forgot-pwd-link-color: var(--xe-dark-64);
    --xe-login-qrcode-border-color: var(--xe-dark-32);
    --xe-login-qrcode-bg-color: var(--is-control-bg-color);
     */
}

    .modal-dialog.login-modal > .modal-content {
        background-color: var(--xe-login-bg-color);
    }

xe-login {
    display: flex;
    flex: 1;
    flex-flow: column;
    background: url(/api/File/Xeelo/?file=AppLogoBackground);
    background-size: cover;
    overflow: auto;
}   

    xe-login > .login-container {
        display: flex;
        flex-flow: column;
    }

        xe-login > .login-container > div {
            margin: 0 auto;
        }

            xe-login > .login-container > div.login-box,
            xe-login > .login-container > div.logo {
                width: 360px;
            }

            xe-login > .login-container > div.login-box.qr-code-login {
                width: 610px;
            }
                
                xe-login > .login-container > div.login-box.qr-code-login form {
                    display: flex;
                }

            xe-login > .login-container > div.logo {
                padding-top: 48px;
                padding-bottom: 48px;
            }

    xe-login > div.footer {
        padding: 24px;
        margin: 0 auto;
    }

/* END LOGIN page layout*/

/* LOGIN page layout - responsive rules */
@media screen and (max-width: 380px) {
    xe-login {
        padding: 16px;
    }

        xe-login > .login-container div.logo {
            width: 80%;
            padding-top: 40px;
            padding-bottom: 24px;
        }

        xe-login > .login-container div.login-box {
            width: 100%;
        }
}

@media screen and (max-height: 680px) {
    xe-login > .login-container {
        flex-flow: column;
    }

        xe-login > .login-container div.logo {
            width: 250px;
        }
}

/* END LOGIN page layout - responsive rules */


/* LOGIN form layout*/
xe-login div.login-box h3 {
    font-size: 32px;
    line-height: 43px;
    color: var(--xe-login-text-color);
    margin-bottom: 16px;
    font-weight: 600;
}

xe-login div.login-box form {
    background-color: var(--xe-login-box-bg-color);
    border-radius: 4px;
    padding: 24px;
    box-shadow: var(--xe-login-box-box-shadow);
}

    xe-login div.login-box form .login-languages {
        display: flex;
        flex-flow: row;
        justify-content: center;
        margin-top: 24px;
    }

        xe-login div.login-box form .login-languages is-select {
            width: 85px;
        }

    xe-login div.login-box form .form-group > label {
        margin-bottom: 4px;
        padding-left: 8px;
        font-weight: bold;
        color: var(--xe-login-label-fg-color);
    }

    xe-login div.login-box form .form-group small {
        padding-left: 8px;
    }

        xe-login div.login-box form .form-group small > i {
            margin-right: 4px;
        }

    /* style INPUT */
    xe-login div.login-box form .form-group > input {
        border-color: var(--xe-login-input-border-color);
        background-color: var(--xe-login-input-bg-color);
        color: var(--xe-login-input-fg-color);
        padding: 8px;
        font-size: 14px;
    }

        xe-login div.login-box form .form-group > input:hover {
            border-color: var(--is-control-border-hover-color);
        }

        xe-login div.login-box form .form-group > input:focus {
            border-color: var(--xe-login-input-border-focus-color);
            box-shadow: 0px 0px 0px 1px var(--xe-login-input-border-focus-color);
        }

        xe-login div.login-box form .form-group > input.ng-touched.ng-invalid {
            border-color: var(--xe-login-input-invalid-border-color);
        }

    /* END style INPUT */

    xe-login div.login-box form .form-group is-checkbox {
        font-size: 16px;
    }

    /* style PASSWORD */
    xe-login div.login-box form .form-group > is-password.ng-invalid > .input-group-password {
        border-color: var(--xe-login-input-border-color);
    }

    xe-login div.login-box form .form-group > is-password.ng-invalid.ng-touched > .input-group-password {
        border-color: var(--xe-login-input-invalid-border-color);
    }

/* END style PASSWORD */



/* style MSAL */

xe-login .msal {
    margin-top: 16px;
    flex-flow: column;
}

    xe-login .msal .msal-user {
        display: flex;
        flex-flow: column;
    }

        xe-login .msal .msal-user > div {
            text-align: center;
            font-size: 12px;
        }

        xe-login .msal .msal-user > .msal-user-email {
            font-style: italic;
            font-size: 10px;
        }

        xe-login .msal .msal-user > .msal-user-name {
            font-weight: bold;
            font-size: 14px;
        }

        xe-login .msal .msal-user .msal-user-buttons {
            margin-top: 8px;
            display: flex;
            align-items: baseline;
        }

            xe-login .msal .msal-user .msal-user-buttons > span {
                padding: 0 4px;
            }

            xe-login .msal .msal-user .msal-user-buttons > button {
                flex: 1;
            }

/* end style MSAL */

xe-login div.login-box a.forget-password {
    cursor: pointer;
    color: var(--xe-login-forgot-pwd-link-color) !important;
}

xe-login div.login-box .form-actions {
    display: flex;
}

    xe-login div.login-box .form-actions button.xe-btn-ghost {
        margin-right: 4px;
    }

    xe-login div.login-box .form-actions button.xe-btn-success {
        flex: 1;
    }

    xe-login div.login-box .form-actions button.btn-reset-password {
        background-color: var(--xe-login-reset-password-btn-bg-color);
        border-color: var(--xe-login-reset-password-btn-bg-color);
    }

/* style QR CODE LOGIN */

xe-login div.login-box.qr-code-login form .form-content {
    width: 312px;
}

xe-login div.login-box.qr-code-login form .qr-code-login {
    padding-left: 24px;
}

    xe-login div.login-box.qr-code-login form .qr-code-login > div {
        font-weight: bold;
        margin-bottom: 4px;
        padding-left: 8px;
        color: var(--xe-login-label-fg-color);
    }

    xe-login div.login-box.qr-code-login form .qr-code-login div.qrcode {
        border-radius: 4px;
        padding: 4px;
        border: 1px solid var(--xe-login-qrcode-border-color);
        background-color: var(--xe-login-qrcode-bg-color);
    }

/* end style QR CODE LOGIN */

/* END LOGIN form layout */

/* workaround to disable chrome autocomplete styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--xe-login-text-color) !important;
}



.clear-cookies {
    display: block !important;
  }
  
  .login-box.qr-code-login::before {
    content: "Při chybě přihlášení 'An error occurred...', prosíme o vymazání cache pro tuto stránku.\A(MacOS: ⌘ + Shift + R, Windows: Ctrl + F5)";
    display: block;
    background-color: rgba(255, 255, 255, 0.2); /* průsvitný bílý podklad */
    color: #102a43; /* tmavší modrošedá – decentní, čitelná */
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 20px auto;
    white-space: pre-line; /* umožní \A jako nový řádek */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* lehký stín pro oddělení */
  }