.mui-container {
    max-width: 100vw;
}

.mui-textfield > input, .mui-textfield > input:active, .mui-textfield > input:focus, .mui-textfield > input:hover {
    font-size: 3rem;
    height: 4rem;
}

.mui-textfield{
    margin-bottom: 40px;
    
}

/* .mui-textfield > input ~ label{
    font-size: 2.2rem;
} */

.mui-textfield > input:focus{
    border-color: var(--turquoise);
}

.mui-textfield > input:focus ~ label{
    color: rgba(0,0,0,.5);
    font-size: 1.3rem;
}

#loader-container{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-white);
    width: 100vw
}

.login-container{
    height: 100vh;
    padding: 70px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-white);
    width: 100vw;
}

.mui-panel{
    width: 100%;
    height: 300px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#login{
    width: 100%;
}

.login-btn, .login-btn:hover,.mui-btn:active, .mui-btn:focus, .mui-btn:hover{
    background-color: var(--turquoise);
    border: solid 1px var(--turquoise);
    border-radius: 4px;
    color: var(--white);
    font-size: 3rem;
    height: 58px;
    width: 220px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#js-login-response{
    opacity: 0;
    font-size: 1.2rem;
}

.wrong-login-info{
    opacity: 1;
    color: var(--red);
    font-size: 1.2rem;
}