body.background {
    height: 100vh;
}

body.background main {
    margin: 0 !important;
    height: 100%;
}

body.background main .container {
    height: 100%;
}

.fixed-background {
    background: url("../../img/balloon-lg.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.background .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.auth-card {
    display: flex;
    flex-direction: row;
    box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
}

.card {
    border: initial;
    background: #fff;
    border-radius: .1rem;
    box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
}

.rounded .card.auth-card {
    border-top-left-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
}

.rounded .card {
    border-radius: .75rem;
}

.rounded .auth-card .image-side {
    border-top-left-radius: .75rem;
    border-bottom-left-radius: .75rem;
}

.auth-card .image-side {
    width: 40%;
    background: url("../../img/balloon.jpg") no-repeat center top;
    background-size: cover;
    padding: 80px 40px;
}

.auth-card .form-side {
    width: 60%;
    padding: 80px;
}

.bootstrap-tagsinput,
.form-control {
    border-radius: .1rem;
    outline: initial !important;
    box-shadow: initial !important;
    font-size: calc(.8rem + var(--font-size-increment));
    padding: .5rem 1.3rem;
    line-height: 1;
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #3a3a3a;
    border-color: #d7d7d7;
    height: calc(2em + .8rem);
}

.has-float-label label,
.has-float-label > span,
.has-top-label label,
.has-top-label > span {
    color: rgba(58, 58, 58, .7);
}

.has-float-label label::after,
.has-float-label > span::after {
    background: #fff;
}

.has-float-label label::after,
.has-float-label > span::after {
    content: " ";
    display: block;
    position: absolute;
    height: 5px;
    top: 3px;
    left: -0.2em;
    right: -0.2em;
    z-index: -1;
}

.logo-single {
    display: flex;
    /*justify-content: center;*/
    margin-bottom: 30px;
    flex-direction: column;
    /*align-items    : center;*/
}

.logo-single img {
    height: auto;
    width: 200px;
}

.logo-single span {
    font-weight: 700;
    color: var(--gray);
}

.white {
    color: #fff !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3;
}

.btn {
    border-radius: 50px;
    outline: initial !important;
    box-shadow: none !important;
    box-shadow: initial !important;
    font-size: calc(.8rem + var(--font-size-increment));
    padding: .5rem 1.25rem .5rem 1.25rem;
    transition: background-color box-shadow .1s linear;
}

.logIcon {
    position: absolute;
    bottom: 13px;
    left: .6em;
    font-size: calc(10px + var(--font-size-increment));
    color: var(--blue);
}

.btn-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15), 0 1px 3px 1px rgba(0, 0, 0, .15) !important;
    transition: background-color box-shadow .1s linear;
}

.btn-group-lg > .btn,
.btn-group-sm > .btn,
.btn-lg {
    border-radius: 50px;
}

.btn-group-lg > .btn,
.btn-lg {
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .05rem;
    padding: .75rem 2.6rem .6rem 2.6rem;
}

.btn-primary {
    background-color: var(--primaryBlue) !important;
    border-color: var(--primaryBlue) !important;
    color: #fff;
    transition: all .5s ease;
}

.btn-primary:hover {
    background-color: var(--primaryBlueHover) !important;
    border-color: var(--primaryBlueHover) !important;
}

.mw-error-login {
    background: var(--gray);
    border-radius: 5px;
    padding: 5px 10px;
    margin-top: 15px;
}


@media (max-width: 991px) {
    .rounded .card.auth-card {
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
        border-bottom-right-radius: .75rem;
        border-bottom-left-radius: .75rem;
    }

    .rounded .auth-card .image-side {
        border-bottom-right-radius: initial;
        border-bottom-left-radius: initial;
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
    }

    .auth-card .image-side {
        width: 100%;
        padding: 60px;
    }

    .auth-card .form-side {
        width: 100%;
        padding: 60px;
    }

    .auth-card {
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .auth-card {
        flex-direction: column;
    }

    .auth-card .image-side {
        padding: 35px 30px;
    }

    .auth-card .form-side {
        padding: 35px 30px;
    }

    .auth-card .logo-single {
        margin-bottom: 20px;
    }
}