@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900";

@font-face {
    font-family: 'Avenir Next';
    src: url("/public/css/fonts/AvenirNextLTPro-Regular.otf"); /* File to be stored at your site */
}
html{
    height: 100%;
    width: 100%;
}

body{
    font-family: "Avenir Next","Lato",corbel,calibri,arial;
    background-repeat: inherit;
    background-color:white;
    /*background-image: url( /public/images/backgrounds/background_ecompany.jpg);*/
    background-position: center center;
    background-size:  100% auto;
    margin:0px;
    padding:0px;
    background: #f9f9f9;
}

section#login{
    display: block !important;
    width:100%;
    background: linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.9)) ,url(/public/images/backgrounds/login_background_1.jpg) bottom no-repeat;
    background-size: 100% auto , 100% auto;
    background-position:center 60% , center 60%;
    
    background-image:url( '/public/images/backgrounds/header/header_background_1.jpg' );
    background-size:  100% auto;
    background-position:top center;
    background-repeat: no-repeat;
    
    padding:25vh 0px 0px 0px;
}

section#login nav{
    margin:0vh auto auto auto;
    padding:0px;
    box-sizing: border-box;
    background:white;
    width:50%;
}

section#login nav ul{
    margin:auto;
    border-bottom: 1px solid rgba(255,255,255,0.7);
    display:table;
}

section#login nav ul li{
    float:right;
    list-style:none;
    padding:.5em 1em .5em 1em;
    color:white;
    font-size:10pt;
    color: rgba(255,255,255,0.9);
    box-sizing:border-box;
}

section#login nav ul li a{
    color: #0e508b;
    text-decoration:none;
    opacity:0.8;
}

section#login nav ul li.selected{
    border-bottom: 1px solid #0e508b;
}

section#login nav ul li.selected a{
    font-weight:bold;
    color: #0e508b;
    opacity:1;
}

section#login article{
    display:table;
    width:50%;
    height:50vh;
    margin:0px auto auto auto;
    background-color: white;
    /*box-shadow: 0px 0px 36px 6px rgba(0,0,0,0.1);*/
    padding:2em 5em;
    box-sizing:border-box;
}

section.login-form{
    box-sizing: border-box;
    display: block;
    width:50%;
    border-right:1px solid #ddd; 
    display:table-cell;
    padding: 5em 5em 0px 0em;
}

section.register-form{
    box-sizing: border-box;
    display: block;
    width:50%;
    border-right:1px solid #ddd;
    display:table-cell;
    padding: 0em 3em 0px 0em;
}

article #logo-container{
    display:table-cell;
    background-image: url( /public/images/logos/logo_company.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:70% auto;
}

section.login-form form{
}

section.login-form form label{

}

section.login-form .error-text{
    color:red;
    
}

section.login-form form input{
    width:100%;
    padding: 1em 1em;
    box-sizing:border-box;
    margin: 0px 0px 2em 0px;
    border:0px;
    border-bottom:1px solid #666;
    background:white;
    outline: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

section.login-form form input::focus{
    border-bottom:2px solid #666;
}

section.login-form form div.form-submit {
}

section.login-form form div.form-submit input{
    border:0px;
    background:#666;
    color:white;
    text-transform:uppercase;
    /* width:50%; */
    margin:2em auto auto auto;
    display:table;
    padding:1em;
    cursor: pointer;
}

div.standart-checkbox-holder{
    display:table;
    width:100%;
    margin:auto;
    float:left;
    padding:0px 0px 1em 0px;
    box-sizing:border-box;
    text-align:center;
}

section.login-form form  div.standart-checkbox-holder > input{
    width:auto;
    padding:1em;
    box-sizing:border-box;
    margin:0px 0px 0em 0px;
    border:0px;
    border-bottom:1px solid #666;
    background:white;
    outline: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    cursor:pointer;
}

section.forgot-password-form{
    width:100%;
    clear: both;
    display: table;
    float:none;
    border: 0px;
}

div.standart-checkbox-holder label{
    margin:0px .2em;
}

#company-version{
    text-align:center;
    padding:5em 0px;
    color:#333;
    font-weight:bold;
    font-size:9pt;
}

#privacy-section{
    position:fixed;
    width:100%;
    height:100vh;
    display: table;
    z-index: 2000;
    background:rgba(0,0,0,0.8);
}

#privacy-section div#approval-field{
    background:rgba(255,255,255,.9);
    width:50%;
    margin:25vh auto;
    display: table;
    box-sizing: border-box;
    padding:2em 1em;
}

#privacy-section div#approval-field #approval-button{
    background:rgba(50,50,50,.9);
    width:50%;
    margin:auto;
    display: table;
    box-sizing: border-box;
    padding:1em;
    text-align:center;
    text-transform:uppercase;
    color:white;
    cursor:pointer;
}

#privacy-section div#approval-field a{
    color:rgba(10,10,10,.9);
    font-weight: bold;
    text-decoration: none;
}

#privacy-section div#approval-field a:hover{
    text-decoration: underline;
}

#privacy-section div#approval-field #approval-button:hover{
    background:rgba(10,10,10,.9);
}

/*Message*/
section#system-message{
    position:absolute;
    top:.5em;
    right:.5em;
    width:auto;
    z-index: 2000;
    padding:.1em 2em;
    border-radius: .3em;
    box-shadow: 1px 1px 3px 0px #333;
}

section#system-message.system-message-success{
    background:green;
    color:white;
}
section#system-message.system-message-error{
    background:red;
    color:white;
}

/* Debuging */
.content-context-menu{
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    display: none;
    position: absolute;
    font-size: 4px;
    cursor: pointer;
}

.content-context-menu ul{
    display: none;
    position: absolute;
    border:1px solid #ccc;
    margin:0px;
    padding:0px;
}

.content-context-menu ul li{
    font-size:8pt;
    color:#222;
    background:white;
    padding:.3em 3em;
    border-bottom: 1px solid #ccc;
    text-align: center;
    text-transform: lowercase;
    list-style: none;
}

.content-context-menu ul li:hover{
    background:#ccc;
}


.content-context-menu:hover > ul{
    display: table;
}


section.register-form form .standart-form-delimeter p {
    color: #333;
    text-align: center;
    text-transform: uppercase;
    padding:1em 0px;
}

.form-content .system-content-container .form-element-container .no-label-required{
    color:red;
    position: absolute;
    margin:1em 0px 0px -1em;
}

.form-content .system-content-container .form-element-container{
    display: table;
    width:100%;
}

.forgot-paragraph,
.register-paragraph{
    text-align: center;
    padding:.3em .5em 0em .5em;
    box-sizing: border-box;
}

.forgot-paragraph a,
.register-paragraph a{
    text-decoration: none;
}

@media (max-width: 900px) {

    #privacy-section div#approval-field{
        width:100%;
        height:100vh;
        margin:0px auto;
    }
    
    article {
        width: 100%;
    }
    
    section.login-form{
        float:right;
        width:100%;
        display: table;
        border:0px;
        padding:0px;
    }
    
    #logo-container{
        display: none !important;
    }
    header#login-header{
        background-size:auto 100% ;    
    }
    
    header#login-header ul {
        width: 100%;
        border:0px;
        padding:0px;
    }
    
    header#login-header ul li{
        width: 100%;
        text-align: center;
    }
    
    div.standart-checkbox-holder {
        width: 100%;
        text-align: center;
    }
    
}