html {
    background: linear-gradient(180deg, #FBFDFE 0%, #ABCDEC 100%);
    color: #555661;
    height: 100vh;
}

    html:has(.admin) {
        background: linear-gradient(180deg, #4e6d9b 0%, #FBFDFE 100%);
    }

body {
    background: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    overflow: hidden;
}

.border-top {
    border: none !important;
}

.footer .container {
    position: fixed;
    bottom: 0;
}

.panel {
    background: #FFFFFF;
    box-shadow: 0px 30px 90px rgba(19, 88, 138, 0.12);
    border-radius: 10px;
    margin: 10% auto;
    max-width: 900px;
}

    .panel .form {
        width: 50%;
    }

    .panel .help {
        top: 50%;
        width: 100%;
        text-align: right;
    }

form {
    margin-left: 8%;
    margin-right: 8%;
    color: #555661;
}

.title {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 35px;
    /* or 125% */
    color: #1A1F4D;
    padding-left: 8%;
    padding-top: 8%;
}

    .title .header {
        font-size: 28px;
        font-weight: bold;
    }

    .title .message {
        font-size: 22px;
    }

.user {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 35px;
    /* or 125% */
    color: #1A1F4D;
    top: -70px;
    position: relative;
}

    .user img {
        padding: 20px;
        width: 250px;
    }

label {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 16px;
    /* or 111% */


    color: #555661;
    margin: 5px;
}


input,
input:-webkit-autofill,
input:-webkit-autofill:focus {
    background: #F9F9FA;
    border: 1px solid #E7EAF0;
    box-sizing: border-box;
    border-radius: 5px;
    line-height: 30px;
    font-size: 18px;
    margin: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    color: #555661;
    -webkit-text-fill-color: #555661;
    box-shadow: 0 0 0 1000px #F9F9FA inset;
    -webkit-user-select: text;
}

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-animation: autofill 0s forwards;
        animation: autofill 0s forwards;
    }

    textarea:focus, input:focus {
        outline-color: #61CFF2;
    }

a {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height, or 133% */

    text-decoration-line: underline !important;
    color: #A3A4B0 !important;
}

.btn {
    width: 120px;
    height: 47px;
    border-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 0px;
    color: #FFFFFF;
    border: none;
    margin: 3px;
}

    .btn.blue {
        background: #61CFF2;
    }

    .btn.inout {
        background: #FFF;
        border: 2px solid #619BF2;
        box-sizing: border-box;
        color: #619BF2;
    }

        .btn.inout:hover {
            color: #212529;
            text-decoration: none;
        }

table {
    border-spacing: 0;
    border-collapse: 0;
}

.loginlogo {
    text-align: center;
}

    .loginlogo img {
        padding: 20px;
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 100%;
    }

.panelmode {
    width: 588px;
    height: 734px;
    background: #FFFFFF;
    box-shadow: 0px 30px 90px rgba(19, 88, 138, 0.12);
    border-radius: 10px;
    margin: 10% 10%;
}

.loginota {
    width: 500px;
    height: 650px;
    background: #FFFFFF;
    box-shadow: 0px 30px 90px rgba(19, 88, 138, 0.12);
    border-radius: 10px;
    text-align: center;
    display: inherit;
}

.modal-content.loginota button span {
    margin-right: 10px;
    top: 10px;
    position: relative;
}


@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
        font-size: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
        font-size: inherit;
    }
}

.spinmodal {
    /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */

    cursor: wait;
    display: none;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 4%, rgba(0,212,255,0) 100%);
}

.sk-circle.sk-center {
    --sk-color: #61CFF2;
    --sk-size: 100px;
}

.alert {
    position: absolute;
    bottom: 0;
    width: 100%;
}

button[type=submit][name=ok] {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

button[type=submit][name=resend] {
    width: 100%;
}

#otacode {
    text-align: center;
}


/* --- Outlook Dialog & Sidebar Optimization --- */
@media only screen and (max-width: 600px) {
    /* 1. Reset the main background to white for the new application look */
    html, body {
        background: #FFFFFF !important;
        height: auto !important;
        overflow: hidden
    }

    /* 2. Force the panel to fill the dialog width and remove the large margin */
    .panel {
        margin: 5px auto !important;
        width: 98% !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
    }

        /* 3. CRITICAL: Break the horizontal table layout into a vertical stack */
        .panel table,
        .panel tbody,
        .panel tr,
        .panel td {
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            padding: 0px 0 !important;
        }

    td.loginlogo {
        position: absolute;
        top: 0;
        left: 100px;
    }
    /* 4. Adjust the Title and Form spacing */
    .title {
        padding: 15px 0 0 0 !important;
        font-size: 24px !important;
        position: absolute;
        top: 37px;
        left: 80px;
    }

        .title .header {
            font-size: 22px !important;
        }

        .title .message {
            font-size: 14px !important;
        }

    form {
        margin: 100px 5% 0 5% !important;
    }

    /* 5. Make inputs and buttons more touch-friendly for Outlook */
    input {
        width: 100% !important;
        margin: 1px 0 !important;
        box-sizing: border-box !important;
        height: 40px;
    }

    .btn.blue {
        width: 100% !important;
        height: 40px !important;
        margin: 1px 0 !important;

    }

    /* 6. Fix the 'Help' links that were previously pushed to the right */
    .panel .help {
        text-align: center !important;
        position: static !important;
        margin-top: 15px !important;
    }

        .panel .help div {
            margin-bottom: 10px !important;
        }

    /* 7. Scale the logo so it doesn't overwhelm the small dialog */
    .loginlogo img {
        max-width: 150px !important;
        padding: 10px !important;
    }

    /* 8. Handle the One-Time Password (OTA) modal dimensions */
    .loginota {
        width: 95% !important;
        height: auto !important;
        margin: 5% auto !important;
    }

    .user {
        top: 0 !important; /* Reset the relative offset for the OTP screen */
        padding-bottom: 20px !important;
    }

    #otacode {
        width: 90% !important;
        font-size: 24px !important;
    }
}