.auth-wrapper .bg2 {
  height: 100vh;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;

}
.auth-wrapper .bg3 {
  height: 100%;
  
}

.auth-wrapper .lang {
position: absolute;
top: 30px; 
left: 40px;
}
.auth-wrapper .logout {
  position: absolute;
  top: 30px; 
  left: 90px;
  }
/* .auth-wrapper .bg2 .overlay{
  position: absolute;
  width: 100%;
      height: 100vh;

  background-image:url(../images//header_bg_overlay.png);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .5
} */




.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: #f28d1e;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}


.wrap-login .logo-centered{
  text-align: center;
  margin-bottom: 20px ; 
  z-index: 9999;
  margin: 0px auto 20px auto
}
.wrap-login .logo-centered img{
  height: 65px;
}


.logo-centered .logo-text { margin-right: 10px; display: none;}
.logo-centered .logo-text p:first-child { color: #f18a17;}
.logo-centered .logo-text p { margin-bottom: 5px; font-size: 24px; 
    color: #1b1857; font-weight: 800; margin-top: 4px;}

.custom-checkbox .custom-control-label {
  line-height: 24px;
  color: #120f4b;
  font-size: 15px;
}
.container-login  a.forget {
  line-height: 24px;
  color: #f28d1e;
  font-size: 15px;
}

.container-login  a.forget:hover {
  line-height: 24px;
  color: #120f4b;
  font-size: 15px;
}

.container-login {
width: 100%;  
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
z-index: 1; 
 margin: 20px 0;


}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #120f4b;}
input:-moz-placeholder { color: #120f4b;}
input::-moz-placeholder { color: #120f4b;}
input:-ms-input-placeholder { color: #120f4b;}


label {
margin: 0;
display: block;
}

/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}

button:hover {
cursor: pointer;
}




.wrap-login {
      position: relative;

width: 500px;
border-radius: 10px 70px 10px 70px;
overflow: hidden;
padding: 30px 40px;
background-color: #fff;
direction: rtl;

  /* background-image: url('../images//back22.jpg') */

}

.wrap-emp{ width: 100%;}


.login-form-title {
font-size: 22px;
font-weight: 700;
color: #f28d1e;
line-height: 1.2;
text-align: right;
text-transform: uppercase;
display: block;
border-right: 5px solid #120f4b;
padding-right: 10px;
margin-bottom: 20px;
}

.login-form-failed {
  font-size: 18px;
  font-weight: 700;
  color: red;
  line-height: 1.2;
  text-align: right;
  display: block;
  border-right: 5px solid #d40000;
  padding-right: 10px;
  margin-bottom: 20px;
  }
.title2{ font-size: 18px;}


/*------------------------------------------------------------------
[ Input ]*/

.login-form .input-group {
width: 100%;
position: relative;
border-bottom: 2px solid rgba(255,255,255,0.24);
margin-bottom: 25px;
}

.login-form .btn-outline-secondary i {    color: #f28d1e;}
.login-form .btn-outline-secondary:hover  i {    color: #fff;}
 .form-control {
font-size: 16px;
color: #120f4b;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
background: #fff;
padding: 0 10px 0 10px;
border: 0;

-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.06);
border-radius: 5px;
}
.login-form select.form-control { height: 45px!important}


.login-form .form-control:focus {
padding-right: 5px;
border-right: 5px solid #120f4b;
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.07);


}

.login-form .input-group .input-group-prepend .input-group-text {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #f3f3f3;
  border-color: #f3f3f3;
  color: #f28d1e;
  padding-right: 13px;
  height: 45px;
  font-size: 18px;
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.06);

}


.sso-btn{  font-size: 15px;
  color: #120f4b;     margin-top: 25px;     font-weight: 600;
}
.sso-btn:hover{ 
  color: #f28d1e;

}
.login-form-btn {
  font-size: 15px;
  color: #120f4b;
  padding: 10px 0px 12px;
  border-radius: 8px;
    margin-top: 25px;
  background: none;
  border:2px solid #f28d1e;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
    font-weight: 600;
    width: 150px;
    position: relative;
  }
  
  .login-form-btn i {
    line-height: 1.2;
    font-size: 20px;
    color: #f28d1e;
    margin-right: 4px;
    }
  
  .login-form-btn::before {
    content:'';
    position: absolute;
    background-color: #fff;
    width: 15%;
    height: 3px;
    top: -3px;
    right:8px;
    }
  
  
  
  .login-form-btn:hover {
  color: #f28d1e;
  border:2px solid #120f4b;
  
  }
  
  .per-id{ background-color: #f3f3f3; padding: 5px 10px; border-radius: 6px;}
  .per-id h2{color:#120f4b ; font-weight: 800; margin: 0; font-size: 24px; text-align: center;}
  .dropdown-menu{width: 220px;}
  .datepicker table {color: #120f4b; font-size: 14px; margin: auto auto;}
  .datepicker table tr td span.active{ background-image: linear-gradient(to bottom, #f79936, #f28d1e);}
  .datepicker table tr td span.active:hover{ background-image: linear-gradient(to bottom, #120f4b, #181461);}

  .datepicker table tr td.active.active{ background-image: linear-gradient(to bottom, #f79936, #f28d1e);}
  
  /*------------------------------------------------------------------
  [ Responsive ]*/
  @media (max-width: 960px) {
  .logo-centered .img-b{width: 300px}
  
  }
  
  
  @media (max-width: 760px) {
  .container-login {
  margin-top: 0px
  
  }
  .wrap-login .logo-centered img{
    width: 130px; 
  height: 71px;}
  .logo-centered .logo-text p { margin-bottom: 5px; font-size: 14px; margin-right: 2px;}

  .login-form-btn:first-child{ margin-left: 15px;}
  }


/* .focus-input::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;

background: #f9982f;
}

.focus-input::after {
font-family:"Font Awesome 5 Free";
font-size: 20px;
color: #fff;
content: "\f007";
display: block;
width: 100%;
position: absolute;
top: 6px;
left: 0px;
padding-left: 5px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.focus-l::after {
font-family:"Font Awesome 5 Free";

content: "\f058";

} */

/* .input:focus {
padding-left: 5px;
}

.input:focus + .focus-input::after {
top: -22px;
font-size: 18px;
}

.input:focus + .focus-input::before {
width: 100%;
}

.has-val.input + .focus-input::after {
top: -22px;
font-size: 18px;
}

.has-val.input + .focus-input::before {
width: 100%;
}

.has-val.input {
padding-left: 5px;
} */