body {
  font-family: 'montserrat-300';
  background: #F9F9F9;
}

/*=============================================
=            Global Styling           =
=============================================*/

.montserrat-300 {
  font-family: 'montserrat-300';
}

.montserrat-500 {
  font-family: 'montserrat-500';
}

.montserrat-600 {
  font-family: 'montserrat-600';
}

.montserrat-700 {
  font-family: 'montserrat-700';
}

.montserrat-800 {
  font-family: 'montserrat-800';
}

.montserrat-900 {
  font-family: 'montserrat-900';
}

.orange-color{
  color: #FF9110;
}

.light-red-color {
  color: #F26047;
}

.green-color{
  color: #0D6E61;
}

/* custom radio btn */
.akueb--radio--container {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 20px;
}

/* Hide the browser's default radio button */
.akueb--radio--container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.akueb--radio--checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  border: 2px solid #e4e4e4;
}

/* On mouse-over, add a grey background color */
.akueb--radio--container:hover input ~ .akueb--radio--checkmark {
  background-color: #e4e4e4;
}

/* When the radio button is checked, add a blue background */
.akueb--radio--container input:checked ~ .akueb--radio--checkmark {
  background-color: #0D6E61;
  border-color: #0D6E61;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.akueb--radio--checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.akueb--radio--container input:checked ~ .akueb--radio--checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.akueb--radio--container .akueb--radio--checkmark:after {
    top: 3px;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: white;
}
/* custom radio btn */

.default-ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
}

.container-fluid.cf-plr{
    padding: 0 30px;
}

.h1-title{
      font-size: 2.8rem;
      font-family: 'montserrat-700';
}


/* loader */

.loader-overlay {
 background: rgba(0, 0, 0, 0.7);
 position: fixed;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 999999999;
 width: 100%;
 height: 3000px;
 text-align: center;
 margin-top: 0px;
 overflow: hidden;
 top: 0
}

.loader,
.loader:before,
.loader:after {
 background: #ffffff;
 -webkit-animation: load1 1s infinite ease-in-out;
 animation: load1 1s infinite ease-in-out;
 width: 1em;
 height: 4em;
}

.loader {
 color: #ffffff;
 text-indent: -9999em;
 margin: 250px auto;
 position: relative;
 font-size: 11px;
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-animation-delay: -0.16s;
 animation-delay: -0.16s;
}

 .loader:before,
 .loader:after {
  position: absolute;
  top: 0;
  content: '';
 }

 .loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
 }

 .loader:after {
  left: 1.5em;
 }

@-webkit-keyframes load1 {
 0%, 80%, 100% {
  box-shadow: 0 0;
  height: 4em;
 }

 40% {
  box-shadow: 0 -2em;
  height: 5em;
 }
}

@keyframes load1 {
 0%, 80%, 100% {
  box-shadow: 0 0;
  height: 4em;
 }

 40% {
  box-shadow: 0 -2em;
  height: 5em;
 }
}

/* loader */

/*=============================================
=            Global Styling           =
=============================================*/

/*=============================================
=            Signin page            =
=============================================*/

/* ***************************************************  */
/* ***************************************************  */

.nflpy-header{
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.nflpy-logo{
  width: 300px;
}

.nflpy-header-nav ul {
  display: flex;
}

.nflpy-header-nav ul li {
  padding-right: 25px;
}

.nflpy-header-nav ul li a img{
   width: 50px;
   margin-bottom: 8px;
}

.nflpy-header-nav ul li a{
  text-align: center;
  display: inline-block;
  font-family: 'montserrat-600';
  font-size: 1rem;
  color: #000000;
  text-decoration: none;
}

.nflpy-header-nav ul li a:hover {
  color: #0D6E61;
}

.nflpy-slider-wrapper{
  padding-top: 25px;
  padding-bottom: 25px;
}

.nflpy-slider-wrapper.nflpy-slider-wrapper-public .nflpy-left-content {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    height: calc(100vh - 133px);
    align-items: unset;
    padding-top: 100px;
}

.nflpy-left-content {
    background: url(../images/pak-map.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: calc(100vh - 162px);
    /* display: flex !important; */
    align-items: center;
    position: relative;
    padding-top: 80px;
}

.nflpy-left-content-text h3{
   font-family: 'montserrat-600';
   font-size: 1.15rem;
   color: #0D6E61;
}

.nflpy-form-card{
  width: 380px;
  margin: 0 auto;
  margin-top: 85px;
}

.nflpy-form-card.nflpy-form-card-signup {
    width: 390px;
}

.lsp-forgot-box .btn-link {
  font-family: 'montserrat-500';
  font-size: 0.90rem;
}

.lsp-forgot-box .btn-link:hover {
  text-decoration: none;
  color: #17897A;
}

.nflpy-left-content-detail ul {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.nflpy-left-content-detail ul li:nth-child(1) p{
  background: #FFC52F;
}

.nflpy-left-content-detail ul li:nth-child(2) p{
  background: #FF9110;
}

.nflpy-left-content-detail ul li:nth-child(3) p{
  background: #F26047;
}

.nflpy-left-content-detail ul li p {
    font-size: 1.25rem;
    color: #ffffff;
    font-family: 'montserrat-700';
    margin: 0 auto;
    padding: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    border-radius: 100px;
    line-height: 44px;
}

.nflpy-left-content-detail ul li img {
    width: 200px;
    margin: 0 auto;
    margin: 0px 0;
}

.nflpy-left-content-detail ul li h4{
  font-size: 1.10rem;
  text-align: center;
  color: #0D6E61;
  font-family: 'montserrat-700';
}

.nflpy-left-content-detail p.green-color.text-center {
  background: #0D6E61;
  color: #ffffff;
  padding: 2px 25px;
  display: inline-block;
  margin-bottom: 30px;
}

.pompak-logo{
  width: 120px;
  margin: 0 auto;
  position: absolute;
  top: -95px;
  left: 34%;
}

.step-line{
  width: 389px;
  margin: 0 auto;
  position: absolute;
  left: 30%;
  top: 12px;
}

.nflpy-card-bottom-text ul,
.pompak-downlaod-wrapper ul {
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 10px;
}

.nflpy-card-bottom-text ul li{
  padding-right: 7px;
  padding-left: 7px;
}

.nflpy-card-bottom-text ul li a{
  font-size: 1rem;
  color: #4F4F4F;
  text-decoration: none;
}

.nflpy-card-bottom-text ul li a:hover {
  color: #0D6E61;
}

.pompak-downlaod-wrapper ul li a img{
  width: 180px;
  padding-left: 5px;
  padding-right: 5px;
}

.pompak-downlaod-wrapper{
  background: #EBEBEB;
  padding-top: 35px;
  padding-bottom: 35px;
}

.pompak-features-wrapper{
  background: #0D2147;
  padding-top: 35px;
  padding-bottom: 35px;
}

.wrapper-main-title{
  font-size: 2rem;
  font-family: 'montserrat-700';
  color: #ffffff;
  text-align: center;
  margin-bottom: 70px;
  margin-top: 30px;
}

.pompak-feature img {
  width: 250px;
  margin: 0 auto;
}

.pompak-feature h3{
  font-size: 1.2rem;
  font-family: 'montserrat-700';
  color: #ffffff;
  margin: 0;
}

.pompak-feature p {
  font-size: 0.9rem;
  color: #ffffff;
  padding: 10px 100px;
}

.nflpy-footer-wrapper{
  background: #ffffff;
  padding-top: 25px;
  padding-bottom: 25px;
}

.nflpy-footer-wrapper p{
  font-size: 1.2rem;
  font-family: 'montserrat-600';
  text-align: center;
  color: #2E2E2E;
  margin: 0;
}

.nflp-y-login-box {
    padding-top: 25px;
}

.nibaf--sytem-req-modal .modal-header {
    background: #4f616b !important;
    color: #fff;
}

.nibaf--sytem-req-modal .modal-header .close.close--adamjee {
    color: #fff;
}

.nibaf--sytem-req-modal .modal-body .table-system tr th {
    background: #17897A !important;
    color: #fff !important;
    border: 0;
}


/* ***************************************************  */
/* ***************************************************  */
.nflpy-form-card .nflpy-card {
    border: none;
    border-radius: 30px;
    padding: 0px 5px;
    box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 10%);
    background: #ffffff;
    opacity: 0.95;
    z-index: 11;
}

.nflpy-form-card .social {
  font-family: 'montserrat-700';
  font-size: 1.25rem;
  color: #05966F;
  padding-top: 25px;
  display: block;
  padding-bottom: 5px;
}

.nflpy-form-card .ico-social {
  background: #ccc;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  color: #fff;
}

.nflpy-form-card .lss-form-label {
  font-size: 1rem;
  color: #000000;
  margin-bottom: 5px;
}

.nflpy-form-card .akueb-form-input {
  font-family: 'montserrat-300';
  border-color: #e0e0e0;
  border-radius: 3px;
  height: 48px;
}

.nflpy-form-card .form-control:focus {
  outline: 0;
  box-shadow: none;
  border-color: #0D6E61;
}

.nflpy-form-card .form-control::-webkit-input-placeholder {
  /* Edge */
  font-family: 'montserrat-300';
  color: #8f8f8f;
}

.nflpy-form-card .form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-family: 'montserrat-300';
  color: #8f8f8f;
}

.nflpy-form-card .form-control::placeholder {
  font-family: 'montserrat-300';
  color: #8f8f8f;
}

.nflpy-form-card .lss-error-message {
  color: #e1262c;
  font-size: 0.8rem;
}

.akueb-form-btns a.btn,
.akueb-form-btns input.btn,
.akueb-form-btns button.btn {
  font-size: 1.15rem;
  border-radius: 3px;
  height: 48px;
  color: #ffffff;
  letter-spacing: 0.03rem;
  line-height: 30px;
  text-transform: capitalize !important;
  letter-spacing: 1px;
  font-family: 'montserrat-600';
}

.btn-filled {
  background-color: #0D6E61;
  border-color: #0D6E61;
}

.btn-filled:hover {
  background-color: #17897A;
  border-color: #17897A;
}

.btn-not-filled {
  background-color: transparent;
  border: 2px solid;
  border-color: #0D6E61;
  color: #0D6E61 !important;  
}

.btn-not-filled:hover {
  background-color: #0D6E61;
  border-color: #0D6E61;
  color: #ffffff !important;
}

.btn-filled.focus,
.btn-filled:focus,
.btn-not-filled.focus,
.btn-not-filled:focus {
  outline: 0;
  box-shadow: none;
}

.lss-link-btn {
  font-size: 0.9rem;
  color: #545353;
}

.lss-link-btn:hover {
  color: #0D6E61;
}

.custom-control-label{
  font-size: 0.9rem;
  font-family: 'montserrat-500';
}

.nflpy-custom-control .custom-control-label::before {
  top: 0.12rem;
 width: 1rem;
 height: 1rem;
  background-color: transparent;
  border: 1px solid #c4c4c4;
}

.nflpy-custom-control .custom-control-label::after {
  top: -3px;
  left: -27px;
  width: 22px;
  height: 26px;
  border-color: #0D6E61;
}

.nflpy-custom-control
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #0D6E61;
  border: 1px solid #0D6E61;
}
/*=====  End of Signin page  ======*/

/*=============================================
=            forgot password page            =
=============================================*/



/*=====  End of forgot password page  ======*/

/*=============================================
=            signup page            =
=============================================*/

/*=====  End of signup page  ======*/

/*===================================================
= = = = =  Media Queries/Mobile Break Point = = = = =
=================================================== */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

  .nflpy-logo {
    width: 170px;
  }
  .container-fluid.cf-plr {
    padding: 0 15px;
  }
  .nflpy-form-card .social {
    font-size: 1.15rem;
  }
   .nflpy-form-card.nflpy-form-card-signup .social {
        padding-top: 5px;
   }
  .nflpy-form-card, .nflpy-form-card.nflpy-form-card-signup {
    width: 100%;
    margin: 0 auto;
    margin-top: 85px;
  }
  .nflpy-form-card.nflpy-form-card-signup {
    margin-top: 0px !important;
  }
  .pompak-logo {
    width: 95px;
    top: -60px;
    left: 37%;
  }
  .nflpy-form-card .nflpy-card{
    padding: 0px 0px;
  }
  .nflpy-form-card {
    margin-top: 55px;
  }
  .nflpy-header-nav ul li a{
    font-size: 0.90rem;
  }
  .nflpy-header-nav ul li a img{
    width: 40px;
    margin-bottom: 8px;
  }
  .nflpy-header-nav ul li {
    padding-left: 15px;
    padding-right: 0;
  }
  .pompak-downlaod-wrapper ul li a img{
    width: 120px;
  }
  .wrapper-main-title {
    margin-bottom: 30px;
    margin-top: 10px;
  }
  .pompak-feature img {
    width: 200px;
  }
  .pompak-feature p {
    margin-bottom: 30px;
  }
  .nflpy-footer-wrapper p {
    font-size: 1rem;
    padding: 0 15px;
  }

}

/*  Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .nflpy-logo {
    width: 180px;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .nflpy-card-bottom-text ul li a {
    font-size: 0.9rem;
  }
    .custom-control-label {
        font-size: 0.80rem;
        
    }
    .lsp-forgot-box .btn-link {
        font-size: 0.80rem;
        padding-top: 4px;
    }
 .nflpy-form-card {
   width: 100%;
   margin-top: 85px;
 }
 .pompak-feature p {
   padding: 10px 50px;
 }

 .nflpy-form-card.nflpy-form-card-signup {
    width: 100%;
}

}
/*===================================================
= = = = =  Media Queries/Mobile Break Point = = = = =
=================================================== */
.has-error .help-block {
    color: #cc1a16 !important;
    font-size: 13px !important;
}
