/* ----- variables ----- */
/*
:root{
    --main_color:rgb(40, 40, 40);
    --second_color:white;
    --third_color:rgb(200, 200, 200);
    --fourth_color:rgb(55, 55, 55); 
    --red:rgb(255, 82, 82);
    --main_font: 'Montserrat', sans-serif;
    --main_font_color:whitesmoke;
    --title_size: 25px;
    --title_weight:100;
    --text_size:14px;
}
*/
:root{
    --main_color:rgb(240, 240, 240);
    --second_color:rgb(40, 40, 40);
    --fourth_color:rgb(220, 220, 220);
    --third_color:rgb(55, 55, 55); 
    --red:rgb(201, 72, 72);
    --main_font: 'Montserrat', sans-serif;
    --main_font_color:rgb(15, 15, 15);
    --title_size: 25px;
    --title_weight:100;
    --text_size:14px;
}

/* -------------------------- */

/* ----- GENERAL --------- */
*{

    margin:0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}
body{
    background-color: var(--main_color);
    color:var(--third_color);
    width: 100%;
    height: calc(100vh -120px);
    font-family: var( --main_font);
    font-size: var(--text_size);    
}

header{   
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    height: 60px;
    top:0;   
}

input:focus{   
    outline: none;
}


/* -----------HEADER & LOGO-------- */


#logo{
    width: 100%;
    position: fixed;
    top:0;
    margin-top: 60px; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding:5px;
    height: 140px;
}

.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    height: 100%; 
}

/* -----------ELENCO ORDINI-------- */

#login_container{

    height: 500px;
    margin-top: 200px;
    width:100%; 
    display: flex;
    justify-content: center;
    align-items: center; 
}

.login_box{

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 300px;
    height: 300px;
}



.login_button{
    width: 150px;
    height: 40px;
    padding:10px;
    background-color: var(--fourth_color);
    margin:20px 5px;
    border-top:none;
    border-right:none;
    border-left:none;
    border-bottom: solid 1px var(--red);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .9em;
    color:var(--third_color);
    cursor: pointer;

}


 .login_button:hover{
    color:var(--red);
    background-color: rgba(200, 200, 200, .2);
    margin:20px 5px;
    border-bottom: solid 1px var(--red);
    outline: none;
   
 }

.title{
    width: 100%;
    background-color:var(--fourth_color);
    color:var(--red);
    border-bottom: solid 1px var(--red); 
    text-align: center;  
    margin: 0 10px;
}
#messages{

    text-align: center;
}



input[type="button"], input[type="submit"]{
    padding:5px;
    background-color: var(--fourth_color);
    margin:0 10px;
    color: var(--third_color) ;
    box-shadow: none;
    border: none;
    cursor: pointer;
 }


/* // ------- SCROLLBAR----   */

/* width */
::-webkit-scrollbar {
width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
background: var(--third_color);
}

/* Handle */
::-webkit-scrollbar-thumb {
background:var(--fourth_color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {

background: var(--red);
}