*{padding: 0;margin: 0;}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #3e3e3e;
    -webkit-font-smoothing: antialiased;
}
a, a:focus, a:hover, button, pre {
    color: inherit;
}

.no-padding
{
    padding-left:0px;
    padding-right: 0px;
}

.main-bg-login
{
    width: 100%;
    float: left;
    height: 100vh;
    background-color: #ccc;
}


.center-box-container
{
    width: 900px;
    margin: 0 auto;
    height: 100%;
}

.formContainer
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    height: 100%;
}
.white-bg-container
{
    width: 100%;
    float: left;
    background-color: #fff;
    padding: 45px 45px;
}

.sign-in
{
    font-size: 28px;
    color: #000;
    margin-top: 0px;
}
.form-control.login-form
{
  width: 100%;
    height: 50px;
    padding-left: 15px;
    border: 1px solid #E6E6E6;
    margin-bottom: 20px;
    border-radius: 0px;
    font-size: 16px;
}
.form-div-1st
{
    margin-top: 4px;
}
.btnLogin
{
    width: 100%;
    height: 50px;
    border-radius: 0px;
    background-color: #2c2c3a;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}
.btnLogin:hover, .btnLogin:focus{
    color: #fff;
}
.forgot
{
    font-size: 16px;
    text-decoration: underline;
}

.height-full
{
    height: 100%;
}

.logo-container
{
    height: 377px;
    width: 100%;
    float: left;
    text-align: center;
    background-color: #272733;
    padding: 25px;
}
.logo-container img
{
    max-width: 100%;
}


.common-div {
    position:relative;
    width: 100%;
    float: left;
    margin-bottom: 20px;
}

input {
    border:none;
    border-bottom:3px solid #34495e;
    padding:10px 0;
    width:100%;
    float: left;
    font-size:16px;
}

input:focus{
    outline:none;
}

input:focus ~ label, input:valid ~ label  {
    top:-10px;
    font-size:12px;
    left:2px;
    color:#111;
}

label {
    position:absolute;
    top:8px;
    left:5px;
    font-size:16px;
    color:#333;
    transistion: 0.3s ease all;
    -webkit-transition:0.3s ease all;
}

.bar {
    position:relative;
    width:100%;
    float: left;
}

.bar:before, .bar:after 	{
    content:'';
    height:3px;
    width:0;
    bottom:0px;
    position:absolute;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

.caption-logo {
    color: #fff;
    margin-top: 15px;
}


.bar:before {
    left:50%;
}

.bar:after {
    right:50%;
}

input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

input:valid ~ .bar:before, input:valid ~ .bar:after{
    background:#2ecc71;
}

input:invalid ~ .bar:before, input:invalid ~ .bar:after{
    background:#e74c3c;
}

.erorr-div
{
    height:92px;
}
.erorr-message {
    position: absolute;
    left: 15px;
    bottom: 5px;
}



@media screen and (max-width: 1000px) {
    .center-box-container
    {
        width: 90%;
    }

    .logo-container
    {
        height: 377px;
    }
}

@media screen and (max-width: 767px)
{
    .center-box-container
    {
        width: 90%;
    }
    .main-bg-login
    {
        min-height: 568px;
    }
    .formContainer
    {
        display: inherit;
        justify-content: inherit;
        align-items: inherit;
        height: auto;
        width: 100%;
    }
    .height-full
    {
        height: auto;
    }
    .logo-container
    {
        height: auto;
    }
    .main-bg-login
    {
        height: auto;
        min-height: 100vh;
    }
    .center-box-container
    {
        margin-top: 80px;
        margin-bottom: 30px;
        width: 100%;
        float: left;
        padding: 0px 15px;
    }
    .white-bg-container
    {
        padding: 30px 15px;
    }
}