.container{
}
@media only screen and (min-width: 0px) and (max-width: 992px) {
    .container{
        width: 100%;
        max-width: 100%;
    }
}

.login {


    background-image: url('/web/images/login.jpg');

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-size: cover;

    background-position: center;

}

.login:after {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.6);

    z-index: 2;
    display: block;
    content: " ";
}


@media only screen and (min-width: 0px) and (max-width: 992px) {

    .login {

        background: none;
    }
    .login:after{

        background: none;

    }
}

.login-box {

    position: relative;

    z-index: 3;

    background: rgba(255, 255, 255, 1);
    background-image: url('/web/images/login.jpg');
    background-size: contain;


    box-shadow: 0 3px 25px 0 rgba(47, 56, 68, 0.22);
    border: none;

    margin: 10vh 0;

    border-radius: 4px;
}

.login-box form{
    background: white;
    padding: 50px !important;
    margin-left: 25vw;

    min-height: 470px;

}

.login-box form [type=submit]{
    border-radius: 20px;

    border: none;

    padding: 4px 16px;
}

@media only screen and (min-width: 0px) and (max-width: 992px) {
    .login-box {
        margin: 0 -15px;
        width: calc( 100% + 30px );
        height: 100vh;

        background: none;
    }
    .login-box form{
        margin-left: 0;
    }
}

.floating-label {
    position: relative;
    margin-bottom: 1.5rem;

}

.floating-label > input {
    background: transparent;
    padding-left: 0;
    padding-right: 0;

    text-indent: 0 !important;
    border-radius: 0;

    border-left-color: transparent !important;
    border-right-color: transparent !important;;
    border-top-color: transparent !important;;
}

.floating-label > input:focus{
    box-shadow: none !important;
}
.floating-label > label,
.floating-label > input:placeholder-shown + label {
    position: absolute;
    top: 0;
    padding: 12px 0;
    transition: all 600ms;
    opacity: 0.5;

    width: 100%;
}

.floating-label > .form-control.is-invalid{
    border-bottom-color: red !important;
}
.floating-label > .form-control:focus + label,
.floating-label > .form-control:not(:placeholder-shown) + label {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;

    padding-bottom: 0;
}

.floating-label > .form-control:focus + label {
    color: #0078d7 !important;

}

.floating-label > input:-webkit-autofill + label,
.floating-label > .form-control:not(:placeholder-shown) + label {
    color: silver;
}