/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.line-on-side {
    margin-bottom: -5px !important;
}

.validation-summary-errors ul {
    padding-inline-start: 0px !important;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
}

body {
    background: rgba(96, 196, 196, .3);
}

.expired {
    margin-top: 7%;
}

svg {
    width: 30%;
    margin: 0 5% 3vh !important;
}

.st0 {
    fill: #EFCBB4;
}

.st1 {
    fill: #FFE1CA;
}

.st2 {
    fill: #473427;
}

.st3 {
    fill: none;
    stroke: #473427;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.st4 {
    fill: #D37D42;
    stroke: #D37D42;
    stroke-miterlimit: 10;
}

.smile {
    display: none;
}

.uhoh {
    display: none;
}

path.smile {
    fill-opacity: 0;
    stroke: #000;
    stroke-width: 6;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw 7s infinite linear;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

#path {
    stroke-dasharray: 628.3185307179587;
    animation: dash 5s linear forwards;
}

@keyframes dash {
    from {
        stroke-dashoffset: 628.3185307179587;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.message {
    float: right;
    margin: 10em 10em 0 0;
    padding: 0 2em;
}

    .message h1 {
        color: #3698DC;
        font-size: 3vw !important;
        font-weight: 400;
    }

    .message p {
        color: #262C34;
        font-size: 1.3em;
        font-weight: lighter;
        line-height: 1.1em;
    }

.light {
    position: relative;
    top: -36em;
}

.light_btm {
    position: relative;
}

.light span:first-child {
    display: block;
    height: 6px;
    width: 150px;
    position: absolute;
    top: 5em;
    left: 20em;
    background: #fff;
    border-radius: 3px;
    /*   transform: rotate(40deg); */
}

.light span:nth-child(2) {
    display: block;
    height: 6px;
    width: 200px;
    position: absolute;
    top: 6em;
    left: 19em;
    background: #fff;
    border-radius: 3px;
    /*   transform: rotate(40deg); */
}

.light span:nth-child(3) {
    display: block;
    height: 6px;
    width: 100px;
    position: absolute;
    top: 7em;
    left: 24em;
    background: #fff;
    border-radius: 3px;
    /*   transform: rotate(40deg); */
}

.light_btm span:first-child {
    display: block;
    height: 6px;
    width: 150px;
    position: absolute;
    bottom: 6em;
    right: 20em;
    background: #fff;
    border-radius: 3px;
    /*   transform: rotate(40deg); */
}

.light_btm span:nth-child(2) {
    display: block;
    height: 6px;
    width: 200px;
    position: absolute;
    bottom: 7em;
    right: 21em;
    background: #fff;
    border-radius: 3px;
    /*   transform: rotate(40deg); */
}

.light_btm span:nth-child(3) {
    display: block;
    height: 6px;
    width: 100px;
    position: absolute;
    bottom: 8em;
    right: 24em;
    background: #fff;
    border-radius: 3px;
    /*   transform: rotate(40deg); */
}

.use-desktop {
    font-weight: 400;
    color: #3698DC;
    border: 1px solid white;
    height: 3.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 25px;
    line-height: 1.1em;
    font-size: 5vw;
}

.login-bg {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    .login-bg img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .login-bg:before {
        content: "";
        background: #000000ad;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 1;
    }

    .login-bg video {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
    }

.login-content .card .card-header {
    background: none;
    padding: 6px 0 0;
}

    .login-content .card .card-header img {
        max-width: 140px;
    }

.login-content {
    position: relative;
    z-index: 9;
}

    .login-content button.btn {
        background: #0ea6e6;
        border: 0;
        height: 50px;
        font-size: 16px;
        color: #fff;
    }

    .login-content .card-link {
        color: #0086c1;
    }

.icheckbox_square-blue + label {
    color: #7c7c7c;
    margin-left: 8px;
}

.login-content form .form-control-bg .form-control {
    background: none;
    border: 0;
    padding: 0px 18px 10px;
    height: auto;
    //color: #f6f6f6;
    letter-spacing: 0.5px;
}

.login-content form .form-control-bg label.lbl-text {
   // color: #cecece;
    padding: 10px 20px 0px;
    width: 100%;
    font-size: 14px;
    margin-bottom: 4px;
}

.login-content form .form-control-bg .form-control::placeholder {
    //color: #646464;
}

.login-content .form-control-position {
    top: 9px;
}

.login-content span.field-validation-error.text-danger {
    font-size: 13px;
}

.login-content button.btn:active,
.login-content .btn:hover {
    //background: #0086c1 !important;
}

html body .content {
    min-height: 100%;
}

footer.footer-dark {
    background: none;
    border: 0;
    box-shadow: none;
}

.login-content .btn.btn-block {
    font-size: 15px;
    padding: 14px 20px !important;
}

    .login-content .btn.btn-block i {
        margin-right: 10px;
    }

/* Change Autocomplete styles in Chrome*/
.login-content input:-webkit-autofill,
.login-content input:-webkit-autofill:hover,
.login-content input:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit;
    -webkit-box-shadow: 0 0 0px 1000px #13131300 inset;
    transition: background-color 999999s ease-in-out 0s;
}


.required label:after {
    font-size:14px;
}
.bg-gray {
    background-color: #f1f1f1 !important;
}
.popover-body ol li {
    list-style: auto;
    line-height: inherit;
}
footer.footer-dark{
    position:fixed;
}
@media (max-width: 766px) {
    .rolebox {
        display: block !important;
    }
}