@import url('colors.css');
@import url('fonts.css');

body {
    margin: 0;
    display: flex;
    height: 100svh;
    width: 100svw;
    background-color: var(--gray-20);
}

.LoginContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    & .Login {
        width: calc(90% - 60px);
        max-width: 400px;
        padding: 30px;
        background-color: var(--font-light);
        border-radius: 5px;
        display: block;
        justify-content: center;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

        & .MessageError {
            background-color: darkred;
            position: absolute;            
            height: fit-content;
            width: calc(100% - 30px);
            padding: 10px;
            top: 80%;
            z-index: -1;
            left: 0; 
            right: 0; 
            margin-inline: auto;
            color: var(--font-light);
            font-family: 'Outfit';
            font-size: 0.9rem;
            font-weight: 500;
            border-radius: 0 0 5px 5px;
            text-align: center;
            transition: all 0.3s;
            line-height: 90%;
            
            &.Open {
                top: 100%;
            }
        }

        & form {
            width: 100%;
            font-family: "NotoSans-Regular";

            & .ImgCont {
                
                display: flex;
                justify-content: center;

                & img {
                    height: 60px;
                    margin-bottom: 15px;
                    margin: auto;
                }
            }

            & h1 {
                font-family: "Montserrat";
                text-align: center;
                font-size: 1.3rem;
                margin: 15px 0;
            }

            & .CustomInput {
                display: grid;
                grid-template-columns: 1;
                margin-bottom: 10px;
                position: relative;

                & label {
                    font-weight: 600;
                    font-size: 0.9rem;
                    color: var(--gray-60);
                }

                & input {
                    width: auto;
                }

                & #Password {
                    padding: 0 38px 0 10px;
                }

                & img {
                    position: absolute;
                    right: 10px;
                    bottom: 3px;
                    height: 28px;
                    width: 28px;
                    cursor: pointer;
                }
            }

            & input {
                height: 35px;
                border-radius: 5px;
                border: 0;
                padding: 0 10px;
                font-size: 1rem;
                width: 100%;
                font-family: "NotoSans-Regular";
                box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
                outline: 0;
                transition: all 0.3s;

                &:focus {
                    background-color: var(--gray-10);
                }
            }

            & #SubmitButton {
                margin-top: 10px;
                font-weight: 600;
                height: 35px;
                font-size: 1rem;
                cursor: pointer;
                border: 0;
                border-radius: 5px;
                font-family: "NotoSans-Regular";
                background-color: var(--contrast-30);
                color: var(--font-light);
                transition: all 0.3s;
                width: 100%;

                &:hover {
                    background-color: var(--contrast-50);
                }
            }

            & .Bottom {
                margin-top: 15px;
                display: flex;
                justify-content: space-between;

                & span {
                    max-width: 70%;
                    color: var(--gray-70);
                    font-size: 0.8rem;
                    font-weight: 500;
                    line-height: 90%;
                }
            }
        }
    }
}