@media all {
    html {
        font-size: 100%;
    }

    body {
        background: var(--background-body-default);
        background-size: cover;
        font-size: 100%;
    }

    .auth-login-box {
        backdrop-filter: var(--backdrop-filter-default);
        background-color: var(--background-color-light-transparency);
        bottom: 0;
        margin: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .auth-login-box-inner {
        bottom: 5vh;
        position: absolute;
        width: 100%;
    }

    .panel-transparent {
        background: transparent;
        border: none;
        color: var(--white);
    }

    #lang-select {
        margin-left: auto;
        margin-right: auto;
        width: 40%;
    }

    .sso-login-button {
        color: rgb(173 173 173);
        filter: drop-shadow(0 4px 5px rgba(0 0 0 / 40%));
        height: 45px;
        margin-bottom: 15px;
        margin-top: 10px;
        transition: color 0.18s ease-out, filter 0.06s ease-out;
        width: 270px;
        will-change: color, fill;
    }

    .sso-login-button:hover {
        color: rgb(226 138 13);
        filter: drop-shadow(0 1px 3px rgba(0 0 0 / 40%));
    }

    .sso-login-button > svg {
        height: inherit;
        width: inherit;
    }

    .tnnt-aa-svg-wrapper {
        height: 0;
        overflow: hidden;
        width: 0;
    }
}

@media all and (min-width: 500px) {
    .auth-login-box {
        left: 10vw;
        width: 25rem;
    }

    .auth-login-box-inner {
        bottom: 10vh;
    }

    .login-image {
        opacity: 0.3;
        transition: opacity 0.5s ease-in-out;
    }

    .auth-login-box-inner:hover .login-image {
        opacity: 1;
    }
}
