body{
    background: url("/img/bg.jpg") fixed;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh) !important;
    max-height: calc(100vh) !important;
}

.wrapper{
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
}

@viewport{
    zoom: 1.0;
    width: device-width;
}
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

.login-container{
    background-color: rgba(88, 88, 88, 0.5);
    color: #fff;
    width: 35%;
    margin: auto;
    margin-top: 50px;
}

.login-page-container{
    left: 0px;
    margin: 0px;
    width: 70%;
    height: calc(100vh - 60px);
}

.registration-container{
    background-color: rgba(88, 88, 88, 0.3);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 70%;
    height: 100%;
}

.login-container img{
    max-height: 150px;
}

.login-container .header{
    background-color: #000;
    width: 100%;
}

.login-container small {
    font-weight: 700;
    font-size: 90%;
}

.login-container .login-area{
    padding: 15px;
    text-align: center;
}

.login-page-container .login-area{
    padding-top: 5%;
    padding-left: 25%;
    padding-right: 25%;
    text-align: center;
}


a, a:hover {
    color: #fff !important;
}

.form-container{
    margin: auto;
    width:90%;
}

.form-control, .input-group-text{
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
}

.update-container{
    margin: auto;
    width:70%;
}

@media(max-width:1366px) {
    .login-page-container{
        width: 60%;
    }

    .login-container img {
        max-height: 100px;
    }
}

@media(max-width:767px) {
    .login-container{
      width:90%;
    }

    .login-page-container{
        width: 100%;
    }
    
    .login-page-container .login-area{
        padding: 15px;
    }

    .form-container{
        width:90%;
    }

    .update-container{
        width:90%;
    }
}