@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
}

* {
outline: none;
}

body.blank {
font-family: "Open Sans", sans-serif;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    background-color: #f8f8f8;
    color: #676a6c;
}

.btn {

border-radius: 0;
font-family: "Open Sans", sans-serif;
}

.form-control {
border-radius: 0;
}

.form-control:focus {
box-shadow: none;
border-color: var(--telco-primary1-color) !important;
}

.login-telco-logo {
    width: 260px;
    height: 140px;
    background-image: var(--bg-image1);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
}

.top-space-login-logo {
    padding-top: 111px;
}

.no-border {
border: none;
}

/*Log in Page CSS*/
.clr {
clear: both;
width: 100%;
}

.clr_5 {
clear: both;
height: 5px;
width: 100%;
}

.clr_10 {
clear: both;
height: 10px;
width: 100%;
}



.clr_15 {
clear: both;
height: 15px;
width: 100%;
}

.clr_20 {
clear: both;
height: 20px;
width: 100%;
}

.clr_25 {
clear: both;
height: 25px;
width: 100%;
}

.clr_30 {
clear: both;
height: 30px;
width: 100%;
}

.clr_35 {
clear: both;
height: 35px;
width: 100%;
}

/*Loader Animation Start*/
/*#region LOGIN / REGISTER / FORGET PASSWORD */
.without-auth-struct .fleet-manager {
font-size: 34px;
font-weight: normal;
color: #fff;
margin: 3px 0 0px 0;
padding: 0;
line-height: inherit;
}

.without-auth-struct .fleet-manager h2 {
margin: 20px 0 0 0;
}

.btn-secondary {
font-weight: 500;
}

.without-auth-struct .login-error-msg {
display: inline-block;
margin-left: 5px;
font-weight: 700;
margin-bottom: 5px;
max-width: 100%;
}

.without-auth-struct .forgot-pwd-or-reg {
margin-top: 15px;
}

#progressBar {
    height: 15px;
    position: relative;
    margin-bottom: 11px;
    border-radius: 20px;
}

    #progressBar > div {
        height: 100%;
        text-align: right;
        line-height: 22px;
        width: 0;
        box-sizing: border-box;
        border-radius: 20px;
    }

.progress,
.progress-bar {
border-color: #ff4e3b;
}
/*Loader Animation Start*/
#progressBar {
background-color: var(--progress-bar-bg-color);
}

#progressBar > div {
background-color: var(--progress-bar-animation-bg);
}

.without-auth-struct .fleet-manager {
font-size: 34px;
font-weight: normal;
color: #fff;
margin: 12px 0 0px 0;
padding: 0;
line-height: inherit;
}

#progressBar .text-remaining {
position: absolute;
right: 0;
bottom: -20px;
white-space: nowrap;
font-size: 12px;
width: 100%;
}
/* ERROR & LOGIN & LOCKSCREEN*/
.middle-box {
width: 100%;
z-index: 100;
margin: 0 auto; 
}

.middle-box-error {
max-width: 450px;
z-index: 100;
margin: 100px auto 0;
padding: 20px;
background-color: #fff;
border: 1px solid #eee;
}

.middle-box-error .alert-content {
display: block;
padding: 15px 0;
}

.middle-box-error .footer-btn-cont {
padding: 20px 0 0 0;
border-top: 1px solid #eee;
text-align: right;
}

.lockscreen.middle-box {
width: 200px;
padding-top: 110px;
}

.loginColumns {
max-width: 800px;
margin: 0 auto;
padding: 100px 20px 20px 20px;
}

.passwordBox {
max-width: 460px;
margin: 0 auto;
padding: 100px 20px 20px 20px;
}

.logo-name {
color: #e6e6e6;
font-size: 180px;
font-weight: 800;
letter-spacing: -10px;
margin-bottom: 0;
}

.wrapper .middle-box {
margin-top: 140px;
}

.lock-word {
z-index: 10;
position: absolute;
top: 110px;
left: 50%;
margin-left: -470px;
}

.lock-word span {
font-size: 100px;
font-weight: 600;
color: #e9e9e9;
display: inline-block;
}

.lock-word .first-word {
margin-right: 160px;
}
/*#endregion*/

#progressBar .text-remaining {
position: absolute;
right: 0;
bottom: -20px;
white-space: nowrap;
font-size: 12px;
width: 100%;
}
/*Loader Animation end*/
.login-banner-container {
width: 100%;
padding-top: 90px;
box-shadow: 0px 2px 0.2em #ccc;
}

.login-container {   
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

:root {
--input-padding-x: 15px;
--input-padding-y: 14px;
}

.form-label-group {
    position: relative;
  /*  margin-bottom: 5px;*/
  /* margin-bottom: 11px;*/
    text-align: left;
}

.form-label-group > input.form-control-2, .form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
}

/*.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
font-size: 14px;
width: 100%;
margin-bottom: 0;
line-height: 18px;
color: #999;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
font-weight: normal;
}*/
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
font-size: 14px;
        /*width: 100%;*/
margin-bottom: 0;
line-height: 18px;
color: #999;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
font-weight: normal;
}

.form-label-group input::-webkit-input-placeholder {
color: transparent;
}

.form-label-group input:-ms-input-placeholder {
color: transparent;
}

.form-label-group input::-ms-input-placeholder {
color: transparent;
}

.form-label-group input::-moz-placeholder {
color: transparent;
}

.form-label-group input::placeholder {
color: transparent;
}

.form-label-group input.form-control-2:not(:placeholder-shown), .form-label-group input.form-control-2:focus {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input.form-control-2:not(:placeholder-shown) ~ label, .form-label-group input.form-control-2:focus + label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
pointer-events: none;
color: #999999;
}

.form-control-2 {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 13px;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 1px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    outline: none;
    border-radius: 5px;
}

.form-control-2:focus {
border-color: var(--focus-border-color);
}

.btn-xl {
padding: 14px 14px 15px;
}



/*--- Login Css Nitin ---*/
.form-qual .input-group-text {
background-color: var(--telco-primary1-color);
padding: 10px 11px;
color: #fff;
font-size: 17px;
border-radius: 0px;
border-radius: 6px 0px 0px 5px;
height: 42px;
border: 1px solid var(--telco-primary1-color);
}

.form-control-2 {
outline: none;
background-color: var(--gray-form-bg-color);
height: 42px;
border-radius: 0px 6px 6px 0px;
border: 1px solid var(--white-border-color);
}

.form-label-group > label {
letter-spacing: 0;
font-weight: 400;
font-size: 14px;
color: #999;
}

.form-label-group > label {
top: 2px;
}

.form-label-group {
width: 100%;
}

.forgot-psw-text {
    color: #827d7d;
    font-weight: 500;
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 1px;
    /*margin-top: -21px;
     margin-bottom: 21px;*/
}

.forgot-psw-text a {
text-transform: capitalize;
color: #545454;
font-size: 12px;
font-weight: 400;
}

.clr_10 {
height: 0px;
}

span#txt-email-passcode-error {
    height: 0px;
    display: block;
}

span#txt-phone-passcode-error {
    text-align: right;
    display: block;
    height: 0px;
    margin-right: -9px;
}

span.text-danger.field-validation-error {
    text-align: left;
    height: 0px;
    display: block;
    margin-left: -2px;
}

.btn-primary {
    color: #ffffff;
    background-color: var(--login-btn-bg-color);
    border-color: var(--login-btn-bg-color);
    padding: 13px 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    border-radius: 5px;
    width: 100%;
    margin-top: 24px;
}

.bill-title h2 {
font-size: 21px;
font-weight: 700;
margin-bottom: 28px;
}

.shapes-position-right {
position: absolute;
right: 0;
}

.pointer-shapes {
width: 190px;
height: 40px;
position: relative;
background: var(--telco-primary1-color);
transform: rotate(320deg);
top: 13px;
}

.pointer-shapes::before {
content: "";
position: absolute;
left: -19px;
bottom: 0;
width: 0;
height: 0;
border-right: 20px solid var(--telco-primary1-color);
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

/*--- Shapes 2 Css ---*/
.shapes-position-bottom {
width: 190px;
height: 40px;
position: relative;
background: var(--telco-primary1-color);
}

.shapes-position-bottom {
position: absolute;
bottom: 0;
background: var(--telco-primary1-color);
transform: rotate(329deg);
bottom: 49px;
left: -40px;
}

.pointer-shapes-bottom-01:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

.pointer-shapes-bottom-01:before {
content: "";
position: absolute;
right: -19px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid var(--telco-primary1-color);
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}

.hexagon-shape {
width: 100px;
height: 57.735px;
background: var(--telco-primary1-color);
position: relative;
}

.hexagon-shape::before {
content: "";
position: absolute;
top: -28.8675px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 28.8675px solid var(--telco-primary1-color);
}

.hexagon-shape::after {
content: "";
position: absolute;
bottom: -28.8675px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 28.8675px solid var(--telco-primary1-color);
}

.crical-top {
position: absolute;
left: 5%;
top: 3%;
}

.crical-shape {
width: 100px;
height: 100px;
background-color: var(--telco-primary1-color);
border-radius: 50%;
position: relative;
}

.crical-shape:before {
position: absolute;
content: "";
left: 80px;
background-color: var(--telco-primary1-color);
width: 50px;
height: 50px;
border-radius: 50%;
top: 124px;
}

.crical-top-bottom {
position: absolute;
right: 5%;
bottom: 3%;
}

.crical-shape-bottom {
width: 100px;
height: 100px;
background-color: var(--telco-primary1-color);
border-radius: 50%;
position: relative;
}

.crical-shape-bottom::after {
position: absolute;
content: "";
right: 80px;
background-color: var(--telco-primary1-color);
width: 50px;
height: 50px;
border-radius: 50%;
top: -74px;
}

.form-control-2:focus {
border-color: var(--focus-border-color);
}

.bill-360-logo img {
width: 32%;
margin: 14px 0px 34px 0px;
}

#sendToLogin .form-control {
outline: none;
background-color: #fff;
height: 52px;
border-radius: 0px;
border: 1px solid #D8D8D8;
color: #999;
font-size: 14px;
font-weight: 400;
}

p#replceMsg {
text-decoration: none;
color: #676a6c;
font-size: 13px;
font-weight: 400;
margin-bottom: 17px;
width: 82%;
margin: 0 auto 11px auto;
}

/*--- Forgot Password ---*/

#forgotPassword .form-control {
outline: none;
background-color: #fff;
height: 47px;
border-radius: 0px;
border: 1px solid var(--white-border-color);
border: 1px solid #D8D8D8;
color: #999;
margin-bottom: 8px;
font-size: 13px;
font-weight: 400;
}

    #forgotPassword .form-control:focus {
        border-color: var(--telco-primary1-color);
        box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
    }

.btn-primary:hover {
color: #ffffff;
background-color: var(--login-btn-bg-hover-color);
border-color: var(--login-btn-bg-hover-color);
}

.btn:focus-visible {
    color: #ffffff;
    background-color: var(--btn-hover-bg-color);
    border-color: #fd1900;
    box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
}

.btn-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5);
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: #ffffff;
    background-color: var(--login-btn-bg-hover-color);
    border-color: var(--login-btn-bg-hover-color);
    box-shadow: none;
}

.text-danger.validation-summary-errors ul li {
list-style: none;
}

/*.has-error .form-control, .has-error .form-control-2 {
    border-color: #ed5565;
    background-color: #fef0f0;
    color: #ed5565;
}

    .has-error .form-control, .has-error .form-control-2 + label {
        color: #ed5565;
    }*/

#forgotPassword p.text-center a {
color: #545454;
font-weight: 400;
margin-top: 22px;
display: inline-block;
margin-bottom: 0px;
font-size: 12px;
}

#forgotPassword p.text-center {
margin-bottom: 0px;
}

.top-title-info h3 {
margin: 0px 0px 11px 0px;
font-size: 15px;
color: #545454;
font-weight: 500;
}

.top-title-info small {
text-decoration: none;
text-transform: capitalize;
color: #545454;
font-size: 12px;
font-weight: 400;
padding-bottom: 22px;
display: inline-block;
}

.ResetPassword #forgotPassword .form-control {
margin-bottom: 16px;
}

.top-title-info p a {
color: var(--link-color);
}

label.ss-questions {
font-weight: 500;
font-size: 15px;
font-weight: bold;
margin-bottom: 14px;
}

.form-control::placeholder {
color: #a59c9c;
}

/*Log in Page CSS end*/

/*--- Login Page New Css Start Here ---*/
.login-left-content {
background-color: var(--logon-left-bg-color);
width: 48%;
padding: 30px 65px 30px 65px;
vertical-align: top;
border-radius: 15px 0px 0px 15px;
min-height: 380px;
position: relative;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px 5px #0000000F;
}

.login-right-content {
text-align: center;
width: 48%;
padding: 30px 30px 30px 30px;
background-color: #F8F8F8;
border: 1px solid #D8D8D8;
box-shadow: 0px 0px 10px 5px #0000000F;
border-radius: 0px 15px 15px 0px;
min-height: 380px;
box-sizing: border-box;
}

.bill-title p {
text-decoration: none;
color: #545454;
font-size: 12px;
font-weight: 400;
margin-bottom: 29px;
}

.form-control-2 {
outline: none;
background-color: #fff;
height: 52px;
border-radius: 5px;
border: 1px solid var(--white-border-color);
border: 1px solid #D8D8D8;
color: #999;
    
}

.pwrd-by-invia img {
width: 31%;
width: 30%;
position: absolute;
bottom: 14px;
left: 0;
right: 0;
margin: auto;
}

.password-reset p {
text-transform: capitalize;
color: #545454;
font-size: 12px;
font-weight: 400;
}

/*--- Login Page New Css End Here ---*/


/*--- LOgin Css New  ---*/
.without-auth-struct .logo {
background-color: var(--logon-top-bg-color);
height: 365px;
width: 100%;
}

.without-auth-struct .logo .pwrd-by-invia {
margin-top: 92px;
height: 14px;
}

.without-auth-struct .logo img {
height: 80px;
margin-top: 105px;
}

.loginscreen.middle-box {
width: 400px;
}

.middle-box {
max-width: 400px;
z-index: 100;
margin: 0 auto;
padding-top: 80px;
}

p.receive-psw {
font-size: 13px;
color: #676a6c;
}

p.receive-psw a {
text-transform: uppercase;
font-weight: 600;
color: var(--login-btn-bg-color);
}
/*-- Responsive Css Here --*/
@media(max-width: 820px) {
.crical-shape {
width: 80px;
height: 80px;
}

.crical-shape:before {
width: 40px;
height: 40px;
left: 70px;
top: 84px;
}

.crical-shape-bottom {
width: 80px;
height: 80px;
}

.crical-shape-bottom::after {
width: 40px;
height: 40px;
top: -45px;
right: 77px;
}

.pointer-shapes {
width: 158px;
}

.shapes-position-bottom {
width: 158px;
}

.loginscreen.middle-box {
width: 372px;
}
}

@media(max-width: 576px) {

.crical-shape {
width: 57px;
height: 57px;
}

.crical-shape:before {
width: 30px;
height: 30px;
left: 49px;
top: 54px;
}

.crical-shape-bottom {
width: 57px;
height: 57px;
}

.crical-shape-bottom::after {
width: 30px;
height: 30px;
top: -32px;
right: 39px;
}

.shapes-position-bottom {
width: 103px;
bottom: 32px;
}

.pointer-shapes {
width: 108px;
top: -4px;
}
}

@media(max-width: 375px) {
.loginscreen.middle-box {
width: 322px;
}
}


.resnd-pass {
    background-color: #dedede;
    color: #191919;
    border: none;
    padding: 15px 6px;
    background-color: #dedede;
    margin-right: 4px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    width: 188px;
    display: inline-masonry;
    border-radius: 5px;
    margin-top: 25px;
}
    .resnd-pass:hover {
        background-color: #dedede !important;
        border-color: #dedede !important;
        color: #191919 !important;
    }

    .resnd-pass:focus {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }