*,::after,::before {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root {
    --header-height:5rem;
    --first-color:#ffffff;
    --first-color-dark:#C5705D;
    --first-color-light:#CFC5B0;
    --first-color-light-two:#FAF7F0;
    --text-color:#352A23;
    --text-color-light:#6D5546;
    --text-color-dark:#050505;
    --body-font:"Bitter",serif;
    --text-font:"Quicksand",sans-serif;
    --text-font-two:"BIZ UDPMincho",serif;
    --normal-font-size:1.05rem;
    --medium-font-size:0.90rem;
    --small-font-size:0.85rem;
    --smaller-font-size:0.60rem;
    --font-regular:100;
    --font-medium:200;
    --font-semi-bold:400;
    --font-bold:700;
    --mb-1:0.5rem;
    --mb-2:1rem;
    --mb-3:1.5rem;
    --mb-4:2rem;
    --mb-5:2.5rem;
    --mb-6:3rem;
    --mb-7:5rem;
    --z-normal:1;
    --z-tooltip:10;
    --z-fixed:10000;
}
.reset{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
}
.right{
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url("../img/bgsection.webp");
    background-size:cover;
    background-repeat:no-repeat;
    overflow:auto;
}
.login-container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.login-container h2{
    text-align:left;
    font-family:var(--text-font);
    color:var(--text-color);
    text-align:center;
}
#error-container-forgot {
    padding:10px 0;
    margin:5px 0;
    background-color:var(--first-color-dark);
    color:var(--first-color);
    text-align:left;
    display:none;
    font-family:var(--text-font);
    text-align:center;
    color:var(--first-color);
}
.form-group{
    position:relative;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    justify-content:center;
}
.form-group label{
    font-family:var(--text-font);
    font-weight:var(--font-bold);
    color:var(--text-color-light);
}
.form-group input{
    border:none;
    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
}
.form-group input:focus{
    border:1px solid var(--first-color-dark);
    outline: none;
}
#toggle{
    position:absolute;
    width:30px;
    height:30px;
    top:55%;
    right:5px;
}
.btn-login{
    width:100%;
    border:none;
    font-family:var(--text-font);
    color:var(--first-color);
    background-color:var(--first-color-dark);
    cursor:pointer;
}
.links{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.links a{
    font-family:var(--text-font);
    font-weight:var(--font-bold);
    color:var(--text-color-light);
    outline-color:var(--first-color-dark);
}
.registered{
    float:right;
}
@media screen and (min-width: 1366px) {
    .login-container h2{ 
        padding:20px;
    }
    #error-container-forgot{
        width:25%;
    }
    .forgotForm{
        width:25%;
    }
    .form-group label{
        padding:10px 0;
        font-size:var(--medium-font-size);
    }
    .form-group input{
        padding:10px;
        font-size:var(--medium-font-size);
    }
    .btn-login{
        margin:15px 0;
        padding:10px 20px;
        font-size:1.1rem;
        outline:1px solid var(--first-color-dark);
    }
}
@media screen and (max-width: 1365px) {
    .login-container h2{
        padding:20px;
    }
    #error-container-forgot{
        width:25%;
    }
    .forgotForm{
        width:25%;
    }
    .form-group label{
        padding:10px 0;
        font-size:var(--medium-font-size);
    }
    .form-group input{
        padding:10px;
        font-size:var(--medium-font-size);
    }
    .btn-login{
        margin:15px 0;
        padding:10px 20px;
        font-size:1.1rem;
        outline:1px solid var(--first-color-dark);
    }
}
@media screen and (max-width: 950px) {
    .login-container{
        width:50%;
    }
    #error-container-forgot{
        width:100%;
    }
    .forgotForm{
        width:100%;
    }
}
@media screen and (max-width: 600px){
    .login-container{
        width:80%;
    }
    #error-container-forgot{
        width:100%;
    }
    .forgotForm{
        width:100%;
    }
}