:root {
    --form-padding : 2rem;
    --padding-top  : 4rem;
}

body {
    background-color : var(--color-itp-blue);
}

.login-bg {
    position         : relative;
    height           : 100dvh;
    background-color : var(--color-itp-blue);
    align-content    : center;
}

.panorama-logo {
    position : absolute;
    width    : 20rem;
    top      : 0;
    margin   : 4rem;
}

.panorama-logo:hover {
    cursor : pointer;
}

.form-error-container {
    --error-color : #ff0028;
    display       : flex;
    align-items   : center;
    gap           : 1rem;
    margin-bottom : 1rem;

    .form-error-icon {
        height : 20px;
        width  : 20px;
        stroke : var(--error-color);
    }

    .form-error-message {
        font                  : var(--font-small);
        font-feature-settings : var(--font-features);
        color                 : var(--error-color);
    }
}

.login-container {
    width            : var(--var-login-width);
    margin-inline    : auto;
    padding          : 4rem;
    border-radius    : var(--var-panel-border-radius);
    background-color : white;
    box-shadow       : 0 2px 24px -4px rgba(0, 0, 0, 0.2);

}

.login-card {
    padding-block  : 1rem;
    display        : flex;
    flex-direction : column;
    gap            : 2rem;

    .title-container {

        .title-header {

            display         : flex;
            justify-content : space-between;
            align-items     : center;

            .title {
                margin-bottom : 1rem;
            }
        }

        .subtitle {
            font      : var(--font-small);
            max-width : 24ch;
        }

    }

    #loginform {
        display        : flex;
        flex-direction : column;
        gap            : 1rem;

        .login-username {
            display         : flex;
            align-items     : center;
            justify-content : space-between;
        }

        .login-password {
            display         : flex;
            align-items     : center;
            justify-content : space-between;
        }

        label {
            font        : var(--font-small);
            display     : flex;
            align-items : center;
            gap         : 2rem;
        }

        .login-username label,
        .login-password label {
            display : none;
        }

        input {
            width                 : 100%;
            font                  : var(--font-small);
            font-feature-settings : var(--font-features);
            border                : 1px solid var(--color-grey-light-bright);
            border-radius         : calc(var(--var-input-height) / 2);
            height                : var(--var-input-height);
            padding-inline        : var(--form-padding);
            background-color      : var(--color-grey-light-bright);
        }

        input:hover {
            border : 1px solid var(--color-grey-light);
        }

        input:focus, input:focus-visible {
            border-color : var(--color-itp-blue);
            outline      : none;
        }

        .login-remember {

            label {
                height : var(--var-input-height);
            }

            input {

                --size       : 2rem;

                height       : var(--size);
                width        : var(--size);
                accent-color : black;
            }
        }

        .login-submit {
            align-self : flex-end;

            input {
                font             : var(--font-button);
                border           : none;
                background-color : black;
                color            : white;
                padding-inline   : 6rem;
                /*width            : 100%;*/
                /*max-width        : 160px;*/
            }

            input:hover:not(:active) {
                cursor           : pointer;
                background-color : var(--color-itp-blue);
            }

            input:active {
                cursor           : pointer;
                background-color : black;
            }
        }
    }

    .forgot-password {
        font : var(--font-small);
    }

    .forgot-password:hover {
        cursor : pointer;

        a {
            color : var(--color-itp-blue);
        }
    }
}

@media (max-width : 768px) {
    .panorama-logo {
        transform : translateX(-50%);
        left      : 50%;
        margin    : 4rem 0 0;
    }
}