body
    {
        background-image: url(../images/bg.png);
        background-size: cover;
        background-repeat: no-repeat; 
    }
    

    body .login_area
    {
        width: 450px;
        height: auto;
        padding: 20px 20px;
        background-color: rgba(255,255,255,1);
        box-shadow: 0 0 0px #242323;
        transition: all .5s linear;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);

    }
    .login_area:hover
    {
        box-shadow: 0 0 20px #242323;
    }
    .school_name
    {
        color:#1E3EB6;
        font-family: 'roboto';
        text-transform: uppercase;
        font-weight: 700;
        font-size: 2.6rem;
        margin-bottom: 18px;
        text-align: center;
    }

.login_form .form-group .form-control
{
    padding-left: 38px;
}

    .login_form .form-group
{
    position: relative;
}

.login_form .form-group .icon
{
    position: absolute;
    left: 16px;
    top: 23px;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: 5px 7px;
    width: 32px;
    height: 31px;
    background-color: #e1e0e0;
}

.login_form .form-group:nth-child(1) .icon
{
    background-image: url(../images/icon/user.png);
}

.login_form .form-group:nth-child(2) .icon
{
    background-image: url(../images/icon/envelope.png);
}


.change-psw.login_form .form-group .icon.psws
{
    background-position: 7px 7px;
}

.change-psw.login_form .form-group .icon.psws
{
    background-image: url(../images/icon/lock.png);
}

.change-psw.login_form .form-group .icon.frgt
{
    background-image: url(../images/icon/envelope.png);
}



.btn-primary
{
    background-color: #ED8019;
    color: #fff;
}

.form-control::placeholder
{
    color: #837c7c;
    font-family: 'Roboto';
    font-weight: 600;
}

.form-control::-webkit-placeholder
{
    color: #837c7c;
    font-family: 'Roboto';
    font-weight: 600;
}
.form-control::-moz-placeholder
{
    color: #837c7c;
    font-family: 'Roboto';
    font-weight: 600;
}

.logo
{
    width: auto;
    height:80px;
    text-align: center;
    margin: auto;
}

@media screen and (max-width: 767px)
{
    body .login_area
    {
        width: 95%;
    }    

}