@import "theme.css";

body {
    background-color: var(--color-bg-primary);
    font-family: Roboto;
}

.loginBox{
    position: absolute;
    width: 350px;
    height: 455px;
    z-index: 15;
    top: 25%;
    left: 50%;
    margin: -150px 0 0 -250px;
    border-radius:10px;
    background-color: var(--color-bg-primary_2);
}

.loginHeader{
    height:150px;
    width:100%;
    border-radius: 75px;
    text-align: center;
    display: block;
}

.iconSpan{
    width: 100%;
}

.iconSpan i {
    font-size: 100px;
    margin-top:10px;
    color: var(--color-gray-300);
}

.loginLabel{
    width:100%;
    margin-top:-30px;
    text-align: center;
}

.loginLabel label{
    color: var(--color-gray-300);
    font-size: 16px;
    font-weight: 400;
    margin-top:12px;
    margin-left:10px;
}

.loginForm{
    margin-left:20px;
    margin-right:20px;
    margin-top:30px;
}

.login-button{
    width:100%;
    height:35px;
    text-align: center;
    border:none;
    background-color: var(--color-bg-button-primary);
    color: white;
}

.login-button:hover {
    background-color: var(--color-bg-button-primary-hover);
}


.link_decoration a:link {
    color: var(--color-gray-300);
}

.link_decoration a:visited {
    color: var(--color-gray-300);
}


.login_button:hover {
    background-color: var(--color-gray-500);
}

.poapp_cp {
    text-align: center;
    font-size:10px;
    color: var(--color-gray-400);
    margin-top:40px;
}


.link_decoration {
    font-size:11px;
    text-decoration: none;
    color: var(--color-gray-400);
}

.link_decoration:visited {
    color: var(--color-gray-400);
}

.theme-button {
    background: none;
    height:40px;
    width:40px;
    border: none;
    border-radius: 51%;
    margin-top: 15px;
}

.theme-button:hover {
    border: 1px solid var(--color-gray-200);
}

.theme-button i {
    font-size:25px;
    color: var(--color-gray-200);
}

.username_login {
    background-color: var(--color-bg-secondary);
    height: 30px;
    width: 100%;
    color: var(--color-bg-input-text);

}
    

.password_login {
    background-color: var(--color-bg-secondary);
    color: var(--color-bg-input-text);
    height: 30px;
    width: 100%;
}

.horizontal_rule {
    margin-left: 25px; 
    margin-right: 25px;
    margin-top:-10px;
    margin-bottom:10px;
    border: 1px solid var(--color-gray-400);
}

label[for=username_login] {
    color: var(--color-gray-300);
    font-size:12px;

}

label[for=password_login] {
    color: var(--color-gray-300);
    font-size:12px;
}

input {
    box-sizing: border-box;
    border: 3px solid var(--color-bg-borders);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=text]:focus {
    border:3px solid var(--color-bg-primary);
    color: var(--color-bg-input-text);
    font-weight: 900;
}

input[type=password]:focus {
    border:3px solid var(--color-bg-primary);
    font-weight: 900;
}

.password-container {
    position: relative;
}

.password-container input {
    width: 100%;
    box-sizing: border-box;
}

.password-container .toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-bg-borders);
}