@font-face {
  font-family: 'Kabel LT Std';
  src: url('../fonts/KabelLTStd-Book.woff2') format('woff2'),
      url('../fonts/KabelLTStd-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2'),
      url('../fonts/HelveticaNeueLTStd-Roman.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Std Thin';
  src: url('../fonts/HelveticaNeueLTStd-Th.woff2') format('woff2'),
      url('../fonts/HelveticaNeueLTStd-Th.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Colors */
  --primary-color: #28a745;
  --text-green-color:#13843E;
  --secondary-color: #6c757d;
  --text-color: #ffffff;
  --text-black-color:#303030;
  --quote-bg: rgba(0, 0, 0, 0.6);


  /* Fonts */
  --font-family: 'Helvetica Neue LT Std';
  --font-size-base: 1rem;
  --font-size-small: 0.9rem;
  --font-family2:'Kabel LT Std';
  --font-family-thin:'Helvetica Neue LT Std Thin';

  /* Spacing & Radius */
  --border-radius: 0.5rem;
  --card-max-width:100%;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl:40px;
  --spacing-xxxl:48px;
  --spacing-5xl:70px;
  
}
  /* Image 
  --login-bg-image: url('../../layout/images/afdp-login.jpg');
}*/

body {
  margin: 0;
  font-family: var(--font-family);
  font-size:16px!important;
  background-color: #f8f9fa;
}
html[lang="ar"] .login-form .input-group-append{
  left: 0 !important;

}
html[lang="ar"] .login-form .input-group-append .toggle-sensitive-btn{
  position: absolute;
  left: 0;

}
.bg-image {
  /* background-image: var(--login-bg-image)!important; */
  background-size: cover;
  background-position-y: -100px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; 
}
.loginform{
  padding: 10px;
}
.quote-box {
  /* height: 370px; */
  /* height: 220px;
  overflow-y: auto;
  position: absolute;
  left: 20px;
  right: 20px;
  background: var(--quote-bg);
  backdrop-filter: blur(10px); */
  color: var(--text-color);
  /* z-index: 2;
  border-radius: 0; */
}
.quote-box br {
  display: none;
}
.card {
  max-width: var(--card-max-width);
  border-radius:none!important;
}
.card input::placeholder {
  font-style: italic;
  font-size: var(--font-size-small);
}
.login-background{
  border: 1px solid #C4C4C480;
  background: #FFFFFFCC;
  backdrop-filter: blur(60.599998474121094px);
  /* margin-bottom: 20px; */
  margin-bottom: 10px;
  padding: 30px 30px 20px;
}
.login-background .dropdown-toggle {
  font-size:14px;
  font-weight:500;
  color:#64748B;
  border: none;
  font-family: var(--font-family);
  /* width: 50%; */
}
.dropdown-menu {
  min-width: 6rem;
  margin: 0.125rem 12px 0;
  font-family: var(--font-family);
 }
 .dropdown-item {
  padding: .25rem 1rem;
 
 }
.afdp-login {
  padding: 0 var(--spacing-md);
}
h6.logo-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-black-color);
  margin: 0;
  letter-spacing: 1px;
  text-align:center;
}
.afdp-login h5 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-black-color);
  text-transform: uppercase;
}
.afdp-login p.text-muted.small {
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.afdp-login label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-black-color);
  text-transform: uppercase;
  font-family: var(--font-family);
}
.afdp-login input.form-control {
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: 4px !important;
  font-family: var(--font-family-thin); 
  border: solid 1px #D4D7E3;
  color: #383838;
  font-weight: 100;
  font-size: 18px;

}
.afdp-login input::placeholder {
  font-size: 16px;
  font-weight: 400;
  font-style: normal !important;
  color: #808080 !important;
  background: #ffffff !important;
}
.afdp-login button.btn.login {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-color);
  padding: var(--spacing-sm);
  border-radius: 4px !important;
}
.line {
  border: 0;
  background-color: #303030;
  height: 3px;
}
.overall-login-with{
  position:relative;
  margin: 30px 0;
}
.or-login {
  position: absolute;
  top: -30px;
  left: 230px;
  background: #F9FAF7;
  padding: 0 var(--spacing-md);
}
.keep-sign a {
  font-size: 12px;
  font-family: var(--font-family);
  color: var(--text-green-color);
}
.keep-sign label {
  text-transform: math-auto;
}
.keep-sign label span {
  font-size: 14px;
  font-weight: 400;
  color: #303030;
  text-transform: math-auto;
  cursor: pointer;
}
div#loginlogo {
  padding: 20px  0 10px;
}
.microsoft-btn{
  text-align: center;
}
.microsoft-btn button.btn {
  font-size: 15px;
  font-weight: 400;
  color: #303030;
  background: #ffffff;
  border-radius: 0;
}
.afdp-login input.form-control:hover{
  border: 1px solid #379f6b;
}
.login-background .dropdown-toggle:hover{
  color:#379f6b;
}
.microsoft-btn button.btn {
  font-size: 15px;
  font-weight: 400;
  color: #303030;
  padding: var(--spacing-xs) var(--spacing-xl);
  background: #ffffff;
  border: 1px solid #303030;
  border-radius: 0;
}
.microsoft-btn img {
  width: 24px;
  height: 24px;
  object-fit: cover;
}
.login-logo img{
  width:650px;
  height: 100px;
  object-fit: contain;
}
.login-bg .card{
  /*background: linear-gradient(0deg, #E6EEF8, #E6EEF8), #CFD8DC;*/
  box-shadow: -31px -10px 33px rgb(249 249 249 / 60%), 6px 8px 15px rgb(159 159 159 / 60%);
  border-radius:0px;
  border:0;
  }
/* .login-bg{
  padding: 15px 0px 0px 0px;
} */
.afdp-login p.do-you-signup {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-black-color);
}
.afdp-login p.do-you-signup a {
  color: var(--text-green-color);
}
.quote-box .fa.fa-quote-left {
  font-size: 60px;
  color: #878787;
}
p.fst-italic {
  font-size: 16px;
  font-weight: 300;
  color: #000;
  line-height: 2;
  font-style: italic;
}
.quote-box .chief {
  font-size: 14px;
  font-weight: 400;
}
.quote-box .chief strong{
  text-transform: uppercase;
}
.afdp-lang {
    display: flex;
    align-items: center;
    justify-content: end;
}
@media(max-width:1280px) and (max-height:618px){
  
}

@media(max-width:1024px){
  .overall-login-page {
    height: 100vh;
  }
  .login-right-side {
    display: flex;
  }
  .afdp-login {
    padding: 0;
  }
  /* .quote-box {
    bottom: 350px;
  } */
  .bg-image {
    background-position-y: 0px;
    background-position-x: -201px;
  }
}

@media(max-width:480px){
  .quote-box {
    display: none;
  }
}
@media (max-width: 768px) {
  .quote-box {
    /* bottom: 0px; */
    /* top: -130px; */
    left: 0;
    /* height: fit-content; */
  }
}
@media (max-width: 932px) and (orientation: landscape) {
  /* Styles for devices up to 932px wide in landscape orientation */
  /* .quote-box {
    bottom: 0px;
    top: 30px;
    left: 0;
    height: fit-content;
  } */
  .login-background .quote-text {
    display: none;
}
  .login-bg .card {
    margin-top: 0 !important;
  }
  a.btn.login-identityprovider-btn{
    margin:10px auto 10px !important;
  }
  .loginform{
    padding:10px !important;
  }
  #page-login-index div[role=main]{
    margin:0 !important;
  }
  .quote-text.mobile-horizontal{
    display: block !important;
  }
  .bg-image .login-background{
    background-image: none !important;
  }
  .bg-image {
    background-repeat: no-repeat !important;
    background-position-y: 40px !important;
    background-position-x: center !important;
    background-size: 100% 80% !important;
  }
  .bg-image .login-background {
    box-shadow: none !important;
    border: 0;
    padding: 0 !important;
    margin-top: 0 !important;
    background: transparent;
    backdrop-filter: none;
  }
}

/*---------------Old css----*/

#page-login-index div[role=main]{
height: 100%!important;
}
#region-main {
 border: none;
   background-color:#F2F7FF;
 height:100vh;
}
.form-control::placeholder {
 
 color:#90A4AE !important

}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:#90A4AE!important;
}
::placeholder {
color:#90A4AE!important;
opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#90A4AE!important;
}

::-ms-input-placeholder { /* Microsoft Edge */
color:#90A4AE!important;
}


.company-logo{
height:56px;
 margin-top: 26px;
}
#login .forgetpass{
 position: absolute;
 top:90px;
 right: 30px;
}
.login-img-bg{
background-repeat:no-repeat;
position:absolute;
height: 97.5%;
 width: 96.3%;
background: rgb(21,143,255);
background: linear-gradient(0deg, rgba(21,143,255,0.6362920168067228) 0%, rgba(21,143,255,0.5802696078431373) 35%, rgba(21,143,255,0.30015756302521013) 100%);
border-radius: 40px;
}
.login-heading{
position:relative;
display: flex;
    align-items: center;
  
}
.btn.sign-blue:hover {
  background-color: #379f6b !important;
}
.login-heading .t-arc{
position:absolute;
 top: 16px;
 right: 16px;
}
.input-group-append {
  margin-left: -1px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
}
.fa.fa-eye-slash{
  padding-top: 0;
}

.toggle-sensitive-btn:focus {
 box-shadow: none !important;
 outline: 0;
}
.text-center.ilearn-logo {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
.login-heading .b-arc{
position:absolute;
 bottom: 16px;
 left: 16px;
}
.login-heading .login-img{
 height: 96vh;
width:100%;
 object-fit: cover;
 border-radius: 40px;
}
.leadtxt{
position: absolute;
top: 30%;
padding: 14px;
color: #fff;
text-align: left;
background-color: #00000061;
width: 90%;
border-radius: 20px;
left: 5%;
}
.login-heading h1{
}
.social-login{
margin-top:10px;
color:#66BDFF;
display: none;
}
/*
.social-profile-login{
  display: none;
}*/
.social-login hr{
background-color:#66BDFF;
}

#login .forgetpass p a{
color:#546E7A;}


.btn.sign-blue{
 background-color: #66BDFF;
 padding: 10px 30px;
 border-radius: 16px;
 color: #fff;
box-shadow: 0px 0px 19px 14px rgba(195,216,235,0.55);
-webkit-box-shadow: 0px 0px 19px 14px rgba(195,216,235,0.55);
-moz-box-shadow: 0px 0px 19px 14px rgba(195,216,235,0.55);
}
.btn-white {
background:#DBF0FF;
 color: #66BDFF;
padding:16px 26px;
 border-radius: 16px !important;
 margin-bottom: 15px;
 font-weight: normal !important;
 white-space: nowrap;
background: #DBF0FF;
box-shadow: -4px -4px 12px rgba(253, 255, 255, 0.8), 4px 4px 12px rgba(187, 195, 206, 0.6);
border-radius: 16px;
}


/* Color Variables */
/* Social Icon Mixin */
/* Social Icons */
.social-icons {
display: flex;
}

.social-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 30px;
height: 30px;
margin: 0 0.5rem;
border-radius: 50%;
cursor: pointer;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 2.5rem;
text-decoration: none;
transition: all 0.15s ease;
}
.social-icon:hover {
color: #fff;
}
.social-icon:hover .tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, -150%);
}
.social-icon:active {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}
.social-icon--linkedin {
color: #fff;
}
.social-icon--linkedin .tooltip {
background: #006599;
color: #fff;
}
.social-icon--linkedin .tooltip:after {
border-top-color: #006599;
}
.social-icon--twitter {

color: #fff;
}
.social-icon--twitter .tooltip {
background: #2b97f1;
color: #fff;
}
.social-icon--twitter .tooltip:after {
border-top-color: #2b97f1;
}
.social-icon--codepen {

color: #fff;
}
.social-icon--codepen .tooltip {
background: #000;
color: #fff;
}
.social-icon--codepen .tooltip:after {
border-top-color: #000;
}
.social-icon--facebook {
color: #fff;
}
.social-icon--facebook .tooltip {
background: #3b5a9b;
color: #fff;
}
.social-icon--facebook .tooltip:after {
border-top-color: #3b5a9b;
}
.social-icon--instagram {
color: #fff;
}
.social-icon--instagram .tooltip {
background: #527fa6;
color: #fff;
}
.social-icon--instagram .tooltip:after {
border-top-color: #527fa6;
}
.social-icon--dribbble {
background: #ef5a92;
color: #fff;
}
.social-icon--dribbble .tooltip {
background: #ef5a92;
color: #fff;
}
.social-icon--dribbble .tooltip:after {
border-top-color: #ef5a92;
}
.social-icon--github {
color: #fff;
}
.social-icon--github .tooltip {
background: #4284c0;
color: #fff;
}
.social-icon--github .tooltip:after {
border-top-color: #4284c0;
}
.social-icon i {
position: relative;
top: 1px;
font-size:14px;
}


.fa {
 width: 30px;
 padding-top: 8px;
 height: 30px;

text-align: center;
text-decoration: none;
 margin: 5px 5px;
border-radius: 50%;
}
.rowpad{
padding:0px !important;
}

.fa:hover {
 opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}




.card h3{
 color: #5E5E5E;
 font-size: 24px;
 font-weight: bolder;
 text-align: center;
 letter-spacing: 2px;
}
.trainingptxt {
 font-size: 17px;
 line-height: 38px;
 padding-left: 10px;
}




/* -------new------ */

.login-wrapper{
  display: block;
}
.btn.sign-blue {
  background-color: #66BDFF;
  padding: 10px 30px;
  border-radius: 16px;
  color: #fff;
  border: 0;
  box-shadow: none;
  font-size: 15px;
}
.login-form-forgotpassword{
  float: right;
}
.toggle-sensitive-wrapper.mb-3{
  margin-bottom: 0rem !important;
  position: relative;
}
.rememberpass{
  clear: both;
}
.dropdown-toggle {
  border: 2px solid #1b3c80;
  font-family: 'SulphurPoint-Regular';
  border-radius: 6px;
  color: #1b3c80;
  display: block;
    padding: .5rem 1rem;
}
.login-languagemenu .menubar {
  justify-content: end;

}



/* --------------------- recently updated ---------------------- */


a.btn.login-identityprovider-btn {
  border-radius: 4px;
  margin: 10px 0;
  background: #13843E;
  border: 1px solid #13843E;
  color: #ffffff;
  padding: 15px;
}
.quote-text p {

  margin-bottom: 0;
}

.login-bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-text.mobile-horizontal {
  display: none;
}









@media screen and (min-width:1400px) {
  .bg-image{
    background-position-y: center;
    background-position-y: 0px;
  }
}

@media screen and (max-width: 1280px) and (max-height: 1024px) and (orientation: landscape) {
  .bg-image{
    background-position-y: center;
    background-position-x: 0 !important;
    background-image: url(../../layout/images/africa.svg) !important;
  }
}

@media screen and (min-width:1024px) and (max-width:1400px){
  .bg-image{
    background-position-y: 0px;
  }

}
@media(max-width:1024px){ 
  .login-identityproviders{
    margin-top: -15px;
  }
  .login-img-bg{
    height: 98.5%;
    width: 95.3%;
  }
  .login-logo {
    margin: 20px;
  }
  .social-login{
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* ----------------- recently updated ------------------------ */

  a.btn.login-identityprovider-btn{
    margin:20px auto;
    width: 200px;
  }

}


@media(max-width:991px){

  .toggle-sensitive-btn {
    padding-top: 10px;
  }
  .login-img-bg {
    height: 98%;
    width: 93%;
  }
    .login-bg {
      padding: 15px 0px 0px 0px;
  }
  .btn.sign-blue{
    padding: 7px 15px;
  }
  .login-signup a {
    line-height: 1.1;
    padding: 6px 0;
  }
  .rememberpass {
    margin: 20px 0 5px;
  }
}

@media only screen and (max-width: 768px) {
  #region-main {
  height:100%;
  }
  .leadtxt {
  position: absolute;
  top: 10%;
  padding: 30px 30px;
  color: #fff;
  text-align: center;
  }
  .trainingptxt {
  font-size: 14px;
  line-height: 24px;
  padding-left: 0;
  }
}

/* @media only screen and (min-width: 768px) {
  .bg-image{
    background-image: inherit !important;
  }
} */

.logintxt {
 color: #b1b4b9;
}


/* #login input[type="text"], [type="password"] {
  background-color: #9daccd;
  color: #FFFFFF;
  padding: 23px 10px;
  border-radius: 6px;
  border: none;
} */

#login input[type="checkbox"]{
 background-color: #9daccd!important;
 color: #FFFFFF;
}

ul.langnav {
 position: absolute;
 right: 60px;
 list-style: none;
 z-index: 999999;
 top: 10px;
}
.dropdown-toggle.nav-link {
 border: 2px solid #1b3c80;
 font-family: 'SulphurPoint-Regular';
 border-radius: 6px;
 color: #1b3c80;
}
.trainingheadtxt {
 font-size: 43px;
 font-family: "SulphurPoint-Regular" !important;
 color: #000;
 padding: 10px;
 padding-left: 20px;
 line-height: 56px;
 letter-spacing: 2px;
 width: 85%;
}
.card-body .note-txt{
line-height:14px;
}
.login-heading h1 {
 font-weight: 400;
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    /* .quote-text.mobile-horizontal{
      display: block;
    } */
}

@media (max-width: 767px){
  .login-bg{
    align-items: start;
  }
  .bg-image{ 
    background-image: url("../../layout/images/africa.svg") !important;
    background-repeat: no-repeat;
    background-position-y: 50px;
    background-position-x: center;
    background-size: 100% 100%;
  }
  a.btn.login-identityprovider-btn {
    margin: 45px auto 35px;
  }
  h6.logo-text {
    font-size: 12px;
  }
  .overall-login-page {
    padding: 0 10px !important;
  }
  .login-languagemenu {
    position: relative;
    left: 12px;
    top: 0px;
  }
  
  .social-login{
    margin: 20px 0;
  }
  .text-center.ilearn-logo{
    bottom: 0;
  }
  .login-identityproviders {
    /* margin-top: -26px; */
    margin-bottom: 30px;
  }
  #page-login-index .footer-popover{
    display: none;
  }
  #page-login-forgot_password .ftoggler{
    padding: 10px 15px;
    justify-content: left;
  }
  
  .login-img-bg {
    top: 15px;
    height: 98%;
    bottom: 14px;
    width: 92%;
  }
  ul.langnav {
    top: 20px;
  }
  .leadtxt {
    top: 33%;
  }
  .login-img-bg {
    border-radius: 50px;
  }
  .bg-image .login-background{
    /* background-image: url("../../layout/images/africa.svg") !important;
    background-repeat: no-repeat;
    background-position: center; */
    box-shadow: none !important;
    border: 0;
    padding: 0 !important;
    margin-top: 0 !important;
    background: transparent;
    backdrop-filter: unset;

  }
  .bg-image{
    position:inherit;
  }
  .login-logo{
    margin:0;
  }
  .afdp-login h5{
    margin-bottom:10px !important;
  }
  .afdp-login p.text-muted.small{
    margin-bottom:10px !important;
  }
  .loginform{
    padding: 0;
  }
}
/* 
@media (max-width: 768px) and (orientation: landscape) {
  .quote-box{
    bottom:-125px;
  }
} */

@media (max-width:820px){
  .leadtxt {
    top: 33%;
  }
  #page-login-index .col-sm-6.col-6.col-md-6.sign-bg {
    padding: 6px;
  }
  #page-login-index .col-sm-6.col-6.col-md-6.text-right.mt-2 {
    padding: 8px;
  }
  #login .forgetpass {
    right: 22px;
  }
}






.form-group.ey{
 position: relative;
}
.form-group.ey span{
position: absolute;
 right: 12px;
 font-size: 25px;
 top: -2px;
 opacity: 0.5;
 cursor: pointer;
}
.toggle-sensitive-wrapper.small-screens-only.input-group:not(.has-validation)>.input-group-append .toggle-sensitive-btn {
  display: block;
  background: transparent;
  border: 0;
  padding-top: 15px;
}
.login-signup a.btn {
  padding: 10px;
  font-size: 15px;
  border-radius: 15px;
 }
 
/* -------------login-popup------------ */

.login-popup h5.modal-title {
  font-weight: 600 !important;
}
.login-popup .modal-dialog{
  max-width: 500px;
  /* margin: 10px auto; */
}
.login-popup .modal-body img.img-responsive{
  width:100%;
  height: 400px;
}
.login-popup .btn-primary {
  background: #b72438;
  border-color: #b72438 !important;
}
.drop-in {
  animation: drop-in 1s ease 200ms backwards;

}
 
@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translate(0px);
  }
}
.login-popup .btn-primary:active {
  background: #E52D00 !important;
  border-color: #E52D00 !important;
}
.login-popup .modal {
  display: none;  
  position: fixed; 
  z-index: 1;      
  left: 0;
  top: 0;
  width: 100%;   
  height: 100%;    
  background-color: rgba(0, 0, 0, 0.5); 
}