/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#pre-main{
    display:block;
}
#log-in-screen{
    background-color:var(--background-white);
    display:block;
}
#sign-in-screen{
    background-color:var(--background-white);
}
.log-in-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-3);
    transform:translate(-50%);
    overflow:hidden;
    height:36rem;
    width:50rem;
    margin-left:50%;
    margin-top:3rem;
    margin-bottom:5rem;

    justify-content:center;
    align-items:center;
    display:flex;
}

/*--Log In Window Left Side---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.log-in-window-l{
    background-image:linear-gradient(var(--accent-blue-1), var(--accent-blue-2));
    color:var(--background-white);
    flex-shrink:0;
    height:100%;
    width:50%;
}
.log-in-text-l{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    font-size:2.5rem;
    margin-left:10%;
    margin-top:25%;
    width:80%;
}
.log-in-logo-l{
    background-image:url("../assets/Logo White.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    transform:translate(-50%);
    margin-left:50%;
    margin-top:4rem;
    aspect-ratio:1;
    width:30%;
}

/*--Log In Window Right Side--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.log-in-window-r{
    flex-shrink:0;
    height:100%;
    width:50%;
}
.log-in-title-r{
    color:var(--dark-blue);
    margin-left:10%;
    margin-top:10%;
    font-size:2rem;
    width:80%;

    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;
}

.log-in-input-holder{
    margin-bottom:3rem;
    margin-top:1.5rem;
    margin-left:10%;
    width:80%;
}
.log-in-text-r{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--dark-blue);
    width:100%;
}
input[type=text].log-in-input, input[type=password].log-in-input, input[type=email].log-in-input{
    background-color:var(--background-white);
    margin-bottom:1rem;
    width:100%;
}
.remember-me-holder{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:3rem;
    width:100%;
}
.remember-me-text{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--dark-blue);
    margin-left:0.5rem;
    font-size:0.75rem;
}
.forgot-password{
    justify-content:flex-end;
    align-items:center;
    cursor:pointer;
    display:flex;

    color:var(--dark-blue);
    font-size:0.75rem;
    width:18.25rem;
    height:3rem;

    pointer-events:none;
}
.forgot-password:hover{
    text-decoration:underline;
}
#log-in{
    width:calc(100% + 0.5rem);
}

.alternate-sign-in-divider{
    justify-content:center;
    align-items:center;
    display:flex;

    margin-left:5%;
    width:90%;
}
.alternate-sign-in-line{
    background-color:var(--border-gray-1);
    height:1px;
    width:100%;
}
.alternate-sign-in-text{
    color:var(--dark-blue);
    margin-right:0.5rem;
    margin-left:0.5rem;
    font-size:0.75rem;
    flex-shrink:0;

    justify-content:center;
    align-items:center;
    display:flex;
}
.alternate-sign-in-holder{
    justify-content:center;
    align-items:center;
    user-select:none;
    display:flex;

    margin-left:10%;
    width:80%;
}
.alternate-sign-in-icon{
    border:1px solid var(--border-gray-1);
    transform:translateY(0px);
    margin-right:0.75rem;
    margin-left:0.75rem;
    border-radius:100%;
    margin-top:1.5rem;
    aspect-ratio:1;
    width:2.5rem;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    user-select:none;
    cursor:pointer;
}
.alternate-sign-in-icon:hover{
    transform:translateY(-1px);
}
.alternate-sign-in-icon:active{
    transform:translateY(1px);
}
.sign-in-google{
    background-image:url("../assets/icons/google icon.png");
}
.sign-in-zoom{
    background-image:url("../assets/icons/zoom icon.png");
}

/*--Animations---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@keyframes fade-out-scale{
    from {opacity:1; transform:translate(-50%) scale(1);}
    to   {opacity:0; transform:translate(-50%) scale(0.9);}
}
@keyframes fade-in-scale{
    from {opacity:0; transform:translate(-50%) scale(0.9);}
    to   {opacity:1; transform:translate(-50%) scale(1);}
}

/*--Sign In Window------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.sign-in-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-3);
    transform:translate(-50%);
    overflow:hidden;
    padding:1rem;
    width:25rem;
    margin-left:50%;
    margin-top:2rem;
    margin-bottom:5rem;
}
.sign-in-window-title{
    color:var(--dark-blue);
    font-size:1.75rem;
    width:100%;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
}
.sign-in-window-form{
    transform:translate(-50%);
    margin-top:2rem;
    margin-left:50%;
    width:80%;
}
.sign-in-window-row{
    margin-bottom:0.5rem;
    width:100%;
}
.sign-in-window-row-title{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    color:var(--dark-blue);
    font-size:1.25rem;
    width:100%;
}
.sign-in-window-row-title-text{
    width:fit-content;
    flex-shrink:0;
    height:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.sign-in-window-row-title-error{
    color:var(--error);
    font-size:0.75rem;
    height:100%;
    width:100%;

    justify-content:flex-end;
    flex-wrap:wrap-reverse;
    align-items:center;
    display:none;
}
.sign-in-input{
    width:100%;
}
.sign-in-window-button-holder{
    margin-top:2rem;
    height:5rem;
    width:100%;
    left:0px;

    justify-content:space-evenly;
    align-items:center;
    display:flex;
}

/*--Password Window----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.add-password-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    width:20rem;
    left:50%;
    top:min(10rem, 20%);
}
.add-password-window-head{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;
    
    padding-bottom:1rem;
    font-size:1.5rem;
    height:2rem;
    width:100%;
}
.add-password-window-body{
    height:fit-content;
    width:100%;
}
.add-password-row{
    margin-bottom:0.5rem;
    width:100%;
}
.add-password-input{
    width:calc(100% - 2px);
}
.add-password-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;

    margin-top:3rem;
    width:100%;
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:768px) and (orientation:landscape){
    .log-in-window{
        margin-top:1rem;
        height:31rem;
    }
    .log-in-text-l{
        margin-top:15%;
    }
    .log-in-logo-l{
        margin-top:4rem;
        aspect-ratio:1;
        width:30%;
    }
    .log-in-title-r{
        margin-top:5%;
    }
    .log-in-input-holder{
        margin-bottom:0rem;
    }
}
@media only screen and (max-width:830px) and (orientation:portrait){
    .log-in-window{
        justify-content:flex-start;
        align-items:flex-start;
        flex-direction:column;
        height:36rem;
        width:25rem;
    }
    .log-in-window-l{
        display:none;
    }
    .log-in-window-r{
        flex-shrink:0;
        height:50%;
        width:100%;
    }
}