/*********************************************/
/*************** Font Elements ***************/
/*********************************************/
@font-face{
    font-family: "Open Sans Semibold";
    src: url('/fonts/OpenSans-Semibold.ttf');
}
@font-face{
    font-family: "Open Sans Regular";
    src: url('/fonts/OpenSans-Regular.ttf');
}

/*********************************************/
/**************** Containers *****************/
/*********************************************/
html, body{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
    min-height:730px;
    min-width:300px;
}
main{
    background:rgba(0, 0, 0, 1) url("/img/backend/background.jpg") no-repeat center center/cover;
    position:relative;
    height:100%;
    font-size:24px;
}
main form{
    position:absolute;
    width:650px;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color:white;
    -webkit-box-shadow: 2px 0px 22px 0px rgba(46,45,45,0.5);
    -moz-box-shadow: 2px 0px 22px 0px rgba(46,45,45,0.5);
    box-shadow: 2px 0px 22px 0px rgba(46,45,45,0.5);
    border-radius: 10px;
    padding:50px 60px;
}
main > form > section{
    position:relative;
    text-align:center;
}
/*********************************************/
/*************** Logo Elements ***************/
/*********************************************/

main .logo-container img{
    height:100px;
}
main h1{
    font-family:"Open Sans Regular", Arial, Helvetica, sans-serif;
    font-weight:400;
    font-size: 1.15em;
    color:#2D2D2D;
    margin:40px;
}
/*********************************************/
/*************** Form Elements ***************/
/*********************************************/
.form-container{
    display:grid;
    grid-template-columns: 1fr 200px;
    grid-template-areas: 
        "username username"
        "password password"
        "auth auth" 
        ". forgot" 
        "submit submit";
    font-family: "Open Sans Semibold", Arial, Helvetica, sans-serif;
    font-weight:500;
}
.form-container > div, .email{
    display:flex;
    margin-bottom:20px;
    border:2px solid rgba(143, 143, 143, 0.6);
    border-radius:5px;
    transition:border 0.3s ease-in-out;
    }
    .form-container > div:focus-within{
        border:2px solid rgba(143, 143, 143, 1);
    }
    .form-container > .username{
        grid-area: username;
        }
        .form-container > .username img, .email > label > img{
            height: 20px !important;
        }
    .form-container > .password{
        grid-area: password;
    }
    .form-container > .auth{
        grid-area: auth;
    }
    .form-container > div > input, .email > input{
        order:2;
        padding:12px 0;
        font-size:0.58em;
        width:100%;
        border-radius:5px;
    }
    .form-container > .forgot{
        grid-area: forgot;
        display:block;
        border:0;
        text-align:right;
        color:#E65540;
        margin-top:5px;
        margin-bottom:35px;
        font-family: "Open Sans Semibold", Arial, Helvetica, sans-serif;
        font-weight:500;
        font-size:0.58em;
        }
        .form-container > div > label, .email > label{
            order:1;
            padding:12px 10px;
            margin:0;
            width:45px;
            position:relative;
            font-size:0.58em;
            }
            .form-container > div > label > img, .email > label > img{
                height:25px;
                position:absolute;
                top:50%;
                left:50%;
                transform: translate(-50%, -50%);
            }
input[type="submit"], button{
    grid-area: submit;
    background-color:#E65540;
    margin-bottom:20px;
    border-radius:5px;
    color:white;
    width:100%;
    height:100%;
    text-align:center;
    padding:5px 0;
    transition: background-color 0.2s cubic-bezier(0.33, 0.95, 0.88, 0.98);
    border: 1px solid transparent;
    }
    input[type="submit"]:hover{
        background-color:#2D2D2D;
    }
input{
    border:0;
    outline:0;
    padding:10px 5px 10px 0;
    font-size:0.65em;
}
button{
    margin-top:20px;
    font-size:0.65em;
}
/*********************************************/
/****************** Popups *******************/
/*********************************************/
.forgot-password{
    position:absolute;
    width:100%;
    height:100%;
    z-index:2;
    display:none;
    background-color:rgba(0, 0, 0, 0.5);
    font-family: "Open Sans Semibold", Arial, Helvetica, sans-serif;
    }
    .forgot-password > form > div > .alert-danger{
        margin: 0px 0 15px;
    }
    .forgot-password > form{
        width:575px;
        padding: 45px 40px;
        }
        .forgot-password > form > h2{
            font-size:0.92em;
            margin-top:0;
            color:black;
            margin-bottom:30px;
        }
        .forgot-password > form > h4{
            font-size:0.58em;
            color:#2D2D2D;
            margin-bottom:20px;
        }
        .forgot-password > form > input[type="submit"], button{
            padding:12px 0;
            margin:13px 0 0;
        }


/*********************************************/
/****************** Alerts *******************/
/*********************************************/
.alert{
    font-family: "Open Sans Semibold", Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size:0.58em;
    background-color:transparent;
    border:none;

    margin:-5px 0 20px;
    padding:0;
}

.error{
     border:2px solid #E65540 !important;
}

.alert-danger {
    color:#FF2000;
}

.alert-success {
    color: #33b535
}

/*********************************************/
/****************** Footer *******************/
/*********************************************/
h3{
    position:absolute;
    bottom:10px;
    text-align:center;
    width:100%;
    color:#9E9E9E;
    font-family: "Open Sans Semibold", Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size:0.65em;
}
h3 span{
    margin:2px 2px 0;
}

.developer-link {
    position:absolute;
    bottom:20px;
    text-align:center;
    width:100%;
    color:#fafafa;
    font-family: "Open Sans Semibold", Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size:0.65em; 
}

/*********************************************/
/*************** Media Queries ***************/
/*********************************************/
@media (max-width:770px){
    html, body{
        min-height:550px;
    }
    main{
        font-size:20px;
    }
    main form{
        width:500px;
    }
    .forgot-password form{
        width:450px;
    }
}
@media (max-width:525px){
    html, body{
        min-height:500px;
    }
    main .logo-container img{
        height:50px;
    }
    main form{
        width:300px;
        padding:30px;
    }
    .forgot-password form{
        width:275px;
        padding: 30px;
    }
}