.login{
    width: 100%;
    display: flex;
    height: 100vh;
    align-items: anchor-center;
    box-sizing: border-box;

    .login-container{
        width: 100%;
        padding: 1rem;
        box-sizing: border-box;

        .logo{
            text-align: center;

            img{
                max-width: 25rem;
                width: 100%;
            }
        }
    
        .container{
            width: fit-content;
            margin: 0 auto;
            max-width: 100%;

            h3{
                font-size: var(--giant-size);
                font-weight: var(--large-weight);
                color: #000;
                margin: 2rem 0;
            }

            form{
                display: flex;
                flex-direction: column;
                width: 25rem;
                max-width: 100%;

                label{
                    font-size: var(--small-size);
                    font-weight: var(--medium-weight);
                    color: var(--app-color-3);
                    margin-bottom: 0.25rem;
                }
                > input,
                .input-container > input{
                    border-radius: 0.2rem;
                    border: 0.1rem solid var(--app-color-1);
                    font-size: var(--medium-size);
                    font-weight: var(--regular-weight);
                    padding: 0.5rem;
                    margin-bottom: 1.5rem;
                    width: 100%;
                    box-sizing: border-box;
                }
                .input-container > input{
                    margin-bottom: unset;
                }
                input[type="submit"]{
                    font-size: var(--regular-size);
                    font-weight: var(--medium-weight);
                    color: var(--app-color-7);
                    background-color: var(--app-color-6);
                    cursor: pointer;
                    width: 100%;
                    padding: 0.75rem 0;
                    border-radius: 0.2rem;
                    border: 0.1rem solid var(--app-color-6);
                }
                input[type="submit"]:hover{
                    background-color: var(--app-color-6-hover);
                }
                div.input-container{
                    margin-bottom: 1.5rem;
                    display: block;
                    width: 100%;
                    position: relative;
                }
                div.uppercase-info{
                    margin-top: -2rem;
                    margin-bottom: 1.5rem;
                    color: var(--app-color-2);
                    font-size: var(--regular-size);
                    font-weight: var(--regular-weight);
                    display: none;
                }
                .toggle-password{
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    display: flex;
                    align-items: anchor-center;
                    padding: 0 0.5rem;
                    cursor: pointer;
                    border-top-right-radius: 0.2rem;
                    border-bottom-right-radius: 0.2rem;

                    svg:first-child{
                        display: inline;
                    }
                    svg:last-child{
                        display: none;
                    }
                    svg{
                        pointer-events: none;
                    }
                }
                .toggle-password.show{
                    svg:first-child{
                        display: none;
                    }
                    svg:last-child{
                        display: inline;
                    }
                }
                .toggle-password:hover{
                    background-color: var(--app-color-1);
                }
            }
            form.uppercase{
                div.uppercase-info{
                    display: block;
                }
            }
            form.error{
                > input,
                .input-container > input{
                    border-color: #FF4F3C;
                }
                .submit-container{
                    > div{
                        color: #850D00;
                        margin-bottom: 1rem;
                        display: flex;
                        align-items: anchor-center;
                    }
                    svg{
                        margin-right: 1rem;
                    }
                }
            }
        }
    }
}
body:not(.mobile){
    display: flex;
    height: 100vh;

    .background{
        width: 50%;
        position: relative;

        .filter{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: inset 0 0 0 1000px rgba(0, 123, 196, 0.4);
            z-index: 999;
        }

        .img{
            width: 100%;
            height: 100%;            
            background-image: url(../img/login.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    .login{
        width: 50%;
    }
}