/* TO BE CALLED ONLY ON SIGNUP PAGES PAGE - IT WILL OVERWRITE EXISTING CLASSES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* Top Level elements xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

body{
        background-color    : #f2f2f2;
        width               : 100vw;
        height              : 100vh;
        color               : #808080;
        padding             : 0px;
        margin              : 0px;
        overflow-x          : hidden;
}

.main_body{
        width               : 100%;
        height              : 100%;   
        overflow            : visible;
        margin              : 0px;
        padding             : 0px;
}

.main_content{
        top                 : 0px !important;
        margin              : 0px !important;
        width               : 100%;
        height              : 100%;    
        padding             : 0px;
        min-height          : auto;
        overflow            : visible;
        background-color    : #f8f8f8;
}

/* Logo container xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.logo_container{
        position        : absolute;
        top             : 0%;
        height          : calc((100vh - 550px)/2);
        width           : 100%;
}

div.logo_container img{
        position        : absolute;
        top             : 50%;        
        left            : 50%;
        transform       : translate(-50%,-50%);  
        height          : 60%;
}

/* Blue bar xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.blue_bar{
        position            : absolute;
        top                 : 50%;
        transform           : translateY(-50%);
        
        width               : 100%;
        height              : 300px;
        background-color    : #104c98;
        opacity             : 0.85;
}

/* Main form elements xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

form{
        position            : absolute;
        top                 : 50%;
        left                : 50%;
        transform           : translate(-50%,-50%);
        
        width               : 800px;
        min-width           : 800px;
        min-height          : 550px;
        
        display             : flex;
        
        background-color    : #ffffff;
        
        box-shadow          : 10px 10px 10px 10px rgba(0,0,0,0.1);
        -moz-box-shadow     : 10px 10px 10px 10px rgba(0,0,0,0.1);
        -webkit-box-shadow  : 10px 10px 10px 10px rgba(0,0,0,0.1);
        -o-box-shadow       : 10px 10px 10px 10px rgba(0,0,0,0.1);          
}

form .form_left{
        float               : left;
        width               : 35%;
        max-width           : 35%;
        background-color    : #65a4e1;
}

form .form_right{
        float               : left;
        width               : 65%;
        max-width           : 65%;
        padding             : 0px 50px;
}

div.form_left_inner{
        width               : 80%;
        margin              : 0px auto;
}

div.form_right_inner{
        position        : relative;
        top             : 50%;
        transform       : translateY(-50%);        
        width           : calc(100% - 10px);
}

/* Lower resolutions xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

@media (max-width: 1500px){
        .main_content{
                background-image    : none;
        }
}

@media (max-width: 1000px){
    
        form{
                width               : 80%;
                min-width           : auto;
                max-width           : 500px;
                min-height          : 550px;
                flex-direction      : row-reverse;
        }
    
        form .form_left{
                width   : 50px;
                max-width   : none;
        }
        
        div.form_left_inner{
                display     : none;
        }
        
        form .form_right{
                width       : calc(100% - 50px);
                max-width   : none;
        }        
}

@media (max-width: 500px){
    
        div.logo_container img{
                height       : 80px;
        }        
    
        h1{
                font-size           : 36px;
        }
    
        form{
                width               : 80%;
                min-width           : auto;
                max-width           : 500px;
                min-height          : 550px;        
        }
    
        form .form_left{
                width   : 30px;
                max-width   : none;
                
        }
        
        form .form_right{
                width       : calc(100% - 30px);
                max-width   : none;
                padding     : 0px 20px;
        }     
}

/* MINOR ELEMENTS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

h1{
        font-family         : 'Oswald', sans-serif;
        font-size           : 56px;
        text-align          : center;
        margin              : 0px 0px 10px 0px;
        color               : #032941;
}

h3{
        color               : #196798;
}

a{
        color               : #5d5b5b;
}

input[type=text], input[type=password]{
        width           : 100%;
}

input#submit{
        position        : relative;
        left            : 50%;
        transform       : translateX(-50%);
        margin          : 10px 0px;
}

div.small{
        font-size       : 15px;
}