/* login  */
/* Created By Krunal Wankhede  */
body { overflow: hidden; /* background: linear-gradient(to left,#311803 0%,#6e3405 20%,#6e3405 40%,#102d5e 60%,#0b2249 80%,#3f1f06 100%);background: linear-gradient(to right,#010a11,#032c4f); animation: bodycolor linear 40s infinite alternate; background-size: 200% 200%; background-position: 100% 0%;  background: url(../images/vaani-login-bg.jpg) no-repeat; background-position: center; background-size: 100%;*/background: linear-gradient(to right,#010a11,#032c4f);}
/* @keyframes bodycolor {
    0% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
} */
/* canvas {display: block; position: fixed; top: 0; z-index: -1;} */
.form-box{height: 100vh;}
.form-container{background-color: #FFF; border: 1px solid #E3E3E3; border-radius: 10px;}
.logo{margin-bottom: 30px;}
/* .btn-primary, .btn-primary:not(:disabled):not(.disabled):active{background-color: #ea7f24; border-color: #d06d1a;}
.btn-primary:hover, .btn-primary:focus{background-color: #d06d1a; border-color: #ea7f24;} */
.btn{padding: 8px 20px; transition: all ease .4s;}
.btn-primary{background: #0084FF; border-color: #06559f;}
.btn-primary:hover{background-color: #086ecc; border-color: #0e4477;}

.form-group{position: relative;margin-bottom: 25px;}
/* .form-label{position: absolute;top: 7px;margin: auto;padding: 0px;left: 14px;color: #7e7e7e;background: #ffffff;font-weight: 400!important;z-index: 0;transition: all ease .4s; pointer-events: none;} */
.form-label{color: #747474;}
/* .form-control:focus ~ .form-label, .form-control:valid ~ .form-label{top: -14px;left: 5px;font-size: 12px;color: #000;font-weight: 700!important;padding: 1px 10px;border-radius: 4px;} */

.icon{background-image: url("../img/hang-up.png");background-repeat: no-repeat;background-size: 3%;height: 10px;}

#moveIcons {position: absolute; z-index: -1; width: 100%; height: 900px; top: 0;}
#moveIcons div {min-height: 1100px; width: 120%; position: absolute;}

@keyframes telephony {
    0%{
        background-position: 38px 38px;
    }
    25%{
        background-position: 57px 28px;
    }
    50%{
        background-position: 74px 38px;
    }
    75%{
        background-position: 56px 48px;
    }
    100%{
        background-position: 38px 38px;
    }
}
#moveIcons div.telephony {animation: telephony linear 3s infinite both; background: url(../img/telephony.png);}

@keyframes callcenter {
    0%{
        background-position: 92px 38px;
    }
    25%{
        background-position: 57px 60px;
    }
    50%{
        background-position: 19px 38px;
    }
    75%{
        background-position: 57px 21px;
    }
    100%{
        background-position: 92px 38px;
    }
}
#moveIcons div.callcenter {background: url(../img/callcenter.png); animation: callcenter linear 10s infinite both;}

@keyframes bot {
    0%{
        background-position: 55px 12px;
    }
    25%{
        background-position: 110px 43px;
    }
    50%{
        background-position: 55px 72px;
    }
    75%{
        background-position: 1px 43px;
    }
    100%{
        background-position: 55px 12px;
    }
}
/* #moveIcons div.bot {background: url(../img/bot.png); animation: bot linear 8s infinite both;} */
.col-sm-4{padding-left: 15px; padding-right: 15px;}

/*! Loading  */
#LoadingBox{position:fixed;left:0;top:0; bottom: 0; z-index:1111;width:100%;height:100%;color:var(--main-font-color);background:rgba(20,27,45,.5);text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center; display: none;}
#LoadingBox .logo-wrap{/*width:200px;*/position:relative;}
#LoadingBox .logo-wrap img{width:80px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -40px;}

/* old login UI added  */
#particles-js {
    width: 100%;
    height: 110vh;
    position: fixed;
    top: 0;
    left: 0;
}
.submit {
    cursor: pointer;
    width: auto;
    background: url(../../views/site/login/img/login.png) no-repeat center;
    background-size: contain;
    color: transparent;
    width: 140px;
    height: 100px;
    border: 0;
}
.form-control{
    width: 100%;
    background: rgba(255,255,255,.5);
    height: 40px;
    border-radius: 10px;
    margin-bottom: 30px;
    outline: 0;
    text-align: center;
    border: 0;
    padding: 0;
    font-size: 16px;
}
.form-control::placeholder{color:#000}