*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        animation: fade 800ms;
    }
    .login-page-bg,
    .login-page-overlay {
        position: fixed;
        inset: 0;
        z-index: 0;
    }
    .login-page-bg {
        background-image: var(--login-bg-image);
        background-color: var(--login-card-bg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .login-page-overlay {
        background: var(--login-overlay);
        pointer-events: none;
    }
    #container{
        position: relative;
        z-index: 1;
        width: 99vw;
        min-height: 99vh;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        padding: 20px;
    }
    #box{
        background-color: var(--login-card-bg);
        padding: 36px 34px 28px;
        color: var(--t-field-text);
        width: 380px;
        max-width: 100%;
        border-radius: 10px;
    }
    #box hr{border-color: var(--t-divider); margin: 22px 0;}

    .field-label{font-size: 12px; color: var(--t-field-label); margin-bottom: 6px; text-align: left; display: block;}
    .field-group{margin-bottom: 16px; text-align: left; position: relative;}
    .field-group .form-control{
        padding: 10px 12px;
        height: auto;
        background-color: var(--t-field-bg);
        border: 1px solid var(--t-field-border);
        color: var(--t-field-text);
    }
    .field-group .form-control::placeholder{ color: var(--t-field-placeholder); }
    .field-group .form-control:focus{
        background-color: var(--t-field-bg);
        border-color: var(--t-field-text);
        color: var(--t-field-text);
        box-shadow: none;
    }
    .field-group .form-control:-webkit-autofill,
    .field-group .form-control:-webkit-autofill:hover,
    .field-group .form-control:-webkit-autofill:focus{
        -webkit-text-fill-color: var(--t-field-text);
        -webkit-box-shadow: 0 0 0px 1000px var(--t-field-autofill-bg) inset;
        transition: background-color 9999s ease-in-out 0s;
    }
    .password-toggle{
        position: absolute; right: 10px; top: 32px; background: none; border: none; padding: 4px;
        color: var(--t-field-label); cursor: pointer; line-height: 0;
    }
    .password-toggle:hover{color: var(--t-field-text);}

    #button_login{
        background-color: var(--t-btn-primary-bg);
        color: var(--t-btn-primary-text);
        border: 1px solid var(--t-card-border);
        width: 100%;
        padding: 10px;
        font-weight: 600;
    }
    #button_login:hover{filter: brightness(1.08);}
    .login-logo-wrap{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
        background: var(--login-logo-bg, transparent);
        border-radius: var(--login-logo-radius, 0);
        padding: var(--login-logo-pad, 0);
    }
    .login-logo-wrap img{
        width: var(--login-logo-width);
        height: auto;
        display: block;
    }
    #change_password{
        font-size: 13px;
        margin-top: 14px;
        text-align: center;
    }
    #change_password a{
        color: var(--login-link);
    }
    #recaptcha_wrap{display: flex; justify-content: center; margin-bottom: 18px; transform: scale(0.95); transform-origin: center;}

    @keyframes fade{
        from{ opacity: 0; }
        to{ opacity: 1; }
    }