/** GLOBAL CLASSES **/

body {
    font-family: 'Open Sans', sans-serif;
    color: #424242;
}

.img-fluid {
    max-width: 100% !important;
    height: auto;
}

.form-control:focus {
    box-shadow: none;
}


.fa-eye-slash:before {
    content: "\f070";
    font-weight: 300 !important;
    font-size: 18px !important;
    cursor: pointer;
}

/** Login 14 start **/

/* GOOGLE SIGN IN BUTTON */
.googleSignIn {
    border: none;
    border-radius: 2px;
    background-color: #4285f4;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 0 1px 0 rgba(0, 0, 0, 0.12);
    padding: 1px;
    color: #FFF;
    margin-bottom: 14px;
  }
  .googleSignIn:hover {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
  }
  .googleSignIn:active {
    background: #3367D6;
  }

  .googleSignIn__text {
    padding: 11px;
    font-family: "Roboto";
    font-size: 15px;
    letter-spacing: 0.2px;
    text-align: left;
    white-space: nowrap;
  }
  .btn-login-text {
    padding: 11px;
    font-family: "Roboto";
    font-size: 15px;
    letter-spacing: 0.2px;
    text-align: left;
    white-space: nowrap;
    color: #fff !important;
  }

.btn-login{
    border: none;
    border-radius: 2px;
    background-color: #ffbc49 !important;
    border-color: #ffbc49 !important;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 0 1px 0 rgba(0, 0, 0, 0.12);
    padding: 10px;
    color: #fff !important;
    margin-bottom: 14px;
}


.login-14 {
    z-index: 999;
    /* background: url(../img/img-42.jpg) top left repeat; */
    background-size: cover;
    min-height: 100vh;
}


.login-14 .info h1 {
    color: #fff;
    margin-bottom: 30px;
    font-family: 'Jost', sans-serif;
    font-size: 50px;
}

.login-14 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Jost', sans-serif;
}

.login-14 .form-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    z-index: 999;
}

.login-14 .form-section a{
    text-decoration: none;
    color: #16a34a;
}

.login-14 .form-inner {
    max-width: 430px;
    width: 100%;
    margin: 0 15px;
    text-align: center;
    padding: 24px;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.login-14 .bg-img {
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    z-index: 999;
}

.login-14 .info .animated-text{
    margin-bottom: 30px!important;
}

.login-14 .info .animated-text, .infoCont {
    max-width: 100%;
    display: table;
    border-spacing: 2px;
    margin: auto;
}

.login-14 .info #username {
    display: table-row;
}

.login-14 .info .char1, .char2, .char3, .char4, .char5, .char6, .char7, .char8 {
    -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 50px;
    font-weight: 600;
    box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
    display: table-cell;
    margin: 5px!important;
}

.login-14 .info .char-color{
    background-image: linear-gradient(to bottom, #211297, #170e5d)!important;
    border-radius: 3px;
    width: 55px;
    height: 55px;
    color: #dbdbdb;
}

.login-14 .info .username {
    margin: auto;
    max-width: 100%;
    display: table-cell;
    padding: 40px;
    border-radius: 5px;
    -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
    text-align: center;
    font-size: 15px;
    background-image: linear-gradient(to bottom, #211297, #170e5d);
    box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
    color: #dbdbdb;
}

@-webkit-keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0deg);
        -webkit-transform-origin: top;
        opacity: 1;
    }
}

.login-14 .info {
    z-index: 999;
}

.login-14 .form-section .extra-login {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
}

.login-14 .form-section .extra-login::before {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    height: 1px;
    background: #e4e4e4;
    content: "";
}

.login-14 .form-section .extra-login > span {
    width: auto;
    float: none;
    display: inline-block;
    padding: 1px 20px;
    z-index: 1;
    position: relative;
    font-size: 14px;
    color: #535353;
    text-transform: capitalize;
    background: #fff;
}

.login-14 .form-section p {
    color: #535353;
    margin-bottom: 13px;
    font-size: 15px;

}

.login-14 .form-section p a {
    color: #ffbc49 ;
}

.login-14 .form-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.login-14 .form-section .thembo {
    margin-left: 4px;
}

.login-14 .form-section h3 {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 400;
    color: #040404;
}

.login-14 .form-section .form-group {
    margin-bottom: 25px;
}

.login-14 .form-section .form-box {
    position: relative;
}

.login-14 .form-section .form-control {
    padding: 14.5px 20px;
    font-size: 14px;
    outline: none;
    color: #535353;
    border-radius: 5px;
    border: 1px solid #dadadae8;
    background: #fff;
}

.login-14 .form-section img {
    margin-bottom: 5px;
    height: 40px;
}

.login-14 .form-section .form-box i {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 23px;
    color: #777575;
}

.login-14 .form-section .checkbox .terms {
    margin-left: 3px;
}

.login-14 .form-section .terms {
    margin-left: 3px;
}

.login-14 .form-section .form-check {
    /* float: left; */
    margin-bottom: 0;
    padding-left: 0px;
    font-size: 13px;
    color: #535353;
}

.login-14 .form-section .form-check .form-check-input {
    margin-left: -25px;
}

.login-14 .form-check-input:focus {
    border-color: #211297;
    outline: 0;
    box-shadow: none;
}

.login-14 .form-check-input:checked {
    background-color: #211297;
    border-color: #211297!important;
}

.login-14 .form-section .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    vertical-align: top;
    position: absolute;
    border: 1px solid #c5c3c3;
    border-radius: 3px;
}

.login-14 .form-section a.forgot-password {
    font-size: 13px;
    color: #16a34a;
}

.login-14 .logo img {
    margin-bottom: 2px;
    height: 48px;
}

.login-14 .info {
    max-width: 800px;
}

.login-14 .info h1 {
    margin-bottom: 20px;
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
}

.login-14 .info p {
    line-height: 28px;
    color: #535353;
}

.login-14 .btn-theme {
    position: relative;
    display: inline-block;
    width: 100%;
    color: #ffffff;
    overflow: hidden;
    overflow: hidden;
    text-transform: capitalize;
    display: inline-block;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    font-family: 'Jost', sans-serif;
    border-radius: 3px;
    border: none;
}

.login-14 .btn-theme:hover {
    color: #fff;
}

.login-14 .btn-theme:hover::before {
    left: 0%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.login-14 .btn-theme:before {
    position: absolute;
    content: '';
    left: 96%;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    transform: skewX(-25deg);
}

.login-14 .btn-theme span {
    position: relative;
    z-index: 1;
}

.login-14 .btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: none;
}

.login-14 .btn-lg{
    padding: 0 50px;
    line-height: 55px;
}

.login-14 .btn-md{
    padding: 0 45px;
    line-height: 50px;
}

.login-14 .btn{
    box-shadow: none!important;
}

.login-14 .btn-primary {
    background: #ffbc49 ;
}

.login-14 .btn-theme:before{
    background: #ffbc49 ;
}

.login-14 .form-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.login-14 .social-list {
    padding: 0;
    text-align: center;
}

.login-14 .social-list li {
    display: inline-block;
}

.login-14 .social-list li a {
    margin: 1px;
    font-size: 14px;
    font-weight: 500;
    width: 110px;
    height: 40px;
    line-height: 40px;
    border-radius: 0;
    display: inline-block;
    text-align: center;
    color: #fff;
    margin-bottom: 5px;
}

.login-14 .social-list li a:hover {
    text-decoration: none;
}

.login-14 .facebook-bg {
    background: #4867aa;
}

.login-14 .facebook-bg:hover {
    background: #3d5996;
}

.login-14 .twitter-bg {
    background: #33CCFF;
}

.login-14 .twitter-bg:hover {
    background: #56d7fe;
}

.login-14 .google-bg {
    background: #db4437;
}

.login-14 .google-bg:hover {
    background: #dc4e41;
}

:root{
    --animation-duration:1s;
    --bounce-height:calc(205px - 100vh);
}

.login-14 {
    overflow: hidden;
}

.login-14 #suport{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align:center;
}

.login-14 #smash{
    animation-name: smash;
    animation-duration: var(--animation-duration);
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: bottom;
}

.login-14 #translateShadow,#rotateImg,#light{
    border-radius: 50%;
    display:inline-block;
    width: 200px;
    height: 200px;
}

.login-14 #light{
    background-image:  radial-gradient(circle at 20% 20%, rgba(255, 221, 179,.7),rgba(255, 221, 179,.5) 10%, transparent 30% ,rgba(83,42,0,.8) 85%);
    position:absolute;
    z-index: 1;
}

.login-14 #translateShadow{
    animation-name: translateShadow;
    animation-duration: var(--animation-duration);
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.login-14 #rotateImg{
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-19.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3	c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0	c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 	C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 	c-18.4-14.5-37.3-19.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 	c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 	c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 	l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 	c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 	C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 	c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 	c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z 	 M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 	l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 	c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 	c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
    background-color: darkorange;
    background-size: 100%;
    animation-name: rotateImg;
    animation-duration: calc(var(--animation-duration) * 5.3);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes translateShadow {
    0% {transform: translateY(0) ;box-shadow: 40px 40px  10px #444466}
    100% {transform: translateY(var(--bounce-height));box-shadow:40px 350px  250px #444466}
}

@keyframes smash{
    0% {transform: scaleY(.7)}
    15%  {transform: scaleY(1)}
}

@keyframes rotateImg {
    100% {transform:rotate(360deg)}
}

@media (max-width: 992px) {
    .login-14 .bg-img {
        display: none;
    }

    .login-14 .form-section {
        padding: 30px 0;
    }

    .login-14 .form-inner {
        padding: 40px 30px;
    }
}
/** Login 14 end **/

.type
    {
        position: relative;
        width: 32%;
        height: 45px;
        z-index: 1;
        display: inline-block;
        text-align: center;
    }

  .type label
  {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-family: 'Jost', sans-serif;
    color: rgb(101, 101, 101);
    line-height: 44px;
    pointer-events: none;
  }
.type input[type=radio]
{
    position: absolute;
    /* background-color: rgb(245,245,245); */
    top: 0;
    left: 0;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: 0.5s all ease;
    border-radius: 5px;
    border: 1px solid #dadadae8;

}
.type input[type=radio]:checked::before
{
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: #484747;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: -5px;
    right: 0px;
    background-color: rgb(249 216 94);
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.type input[type=radio]:checked
{
    border: solid 2px rgb(0 173 84 / 85%);
    color: rgb(249 216 94);
    background-color: #fff;

}

.fa-eye:before {
    content: "\f06e";
    font-size: 18px;
}


/* popup start */
.popup {
    display: none;
    position: absolute; /* Use fixed positioning */
    padding: 10px;
    width: 420px;
    margin-left: -16px;
    height: 484px;
    top: 14%;
    margin-top: 30px;
    background: #FFF;
    z-index: 20;
}

#popup:after, #popup:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5); /* Semi-transparent background */
    z-index: -2;
}

#popup:before {
    background: #FFF;
    z-index: -1;
}

/* popup end */

/* otp start */

.container header {
    height: 150px;
    width: 150px;
    margin: auto;
    background-image: url(../img/sample-01.gif);
    background-size: cover;
    background-position: center;
}

.otp-form .input-field {
  flex-direction: row;
  column-gap: 10px;
}
.otp-form .input-field input {
  height: 50px;
  width: 43px;
  border-radius: 6px;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  border: 1px solid #dadadae8;
}
.otp-form .input-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.otp-form  .input-field input::-webkit-inner-spin-button,
.otp-form  .input-field input::-webkit-outer-spin-button {
  display: none;
}


.resend {
    font-size: 13px !important;
    text-align: right;
  }

  /* otp end */



  @media (max-width: 1024px) {

    .popup {
        display: none;
        position: absolute;
        padding: 10px;
        width: 396px;
        /* left: 50%; */
        margin-left: -16px;
        height: 484px;
        top: 15%;
        margin-top: 30px;
        background: #FFF;
        /* border: 3px solid #F04A49; */
        z-index: 20;
    }
}

@media (max-width: 768px) {
    .popup {
        display: none;
        position: absolute;
        padding: 10px;
        width: 387px;
        /* left: 50%; */
        margin-left: -16px;
        height: 516px;
        top: 15%;
        margin-top: 30px;
        background: #FFF;
        /* border: 3px solid #F04A49; */
        z-index: 20;
    }
}



@media only screen and (min-width: 1446px) and (max-width: 2399px) {
    .popup {
        display: none;
        position: absolute;
        padding: 10px;
        width: 416px;
        /* left: 50%; */
        margin-left: -16px;
        height: 484px;
        top: 11%;
        margin-top: 30px;
        background: #FFF;
        /* border: 3px solid #F04A49; */
        z-index: 20;
    }

}

@media (max-width: 428px) {
    .popup {
        display: none;
        position: absolute;
        padding: 10px;
        width: 345px;
        /* left: 50%; */
        margin-left: -16px;
        height: 484px;
        top: 14%;
        margin-top: 30px;
        background: #FFF;
        /* border: 3px solid #F04A49; */
        z-index: 20;
    }

}

@media (max-width: 384px) {
    .popup {
        display: none;
        position: absolute;
        padding: 10px;
        width: 296px;
        /* left: 50%; */
        margin-left: -16px;
        height: 484px;
        top: 14%;
        margin-top: 30px;
        background: #FFF;
        /* border: 3px solid #F04A49; */
        z-index: 20;
    }

}

.get-otp {
    background: #16a34a;
    padding: 8px 12px 8px 15px !important;
    /* padding: 13px 12px 11px 15px; */
    border: none;
    color: #fff;
    border-radius: 4px;
    line-height: 25px;
}

.iti input, .iti input[type=text], .iti input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 33px !important;
    margin-right: 0;
}


/* register otp */

.ap-otp-input{
    border: 1px solid #dadadae8;
    border-radius: 5px;
    width: 17%;
    height: 50px;
    margin: 4px;
    text-align: center;
}

.ap-otp-input:focus{
    outline: none !important;
    border: 2px solid #16a34a;
    transition: 0.12s ease-in;
}

.reg-resend {
    font-size: 13px !important;
    text-align: left;
    padding: 8px 0px 0px 8px;
}
/* register otp */

@media only screen and (min-width: 748px) and (max-width: 1024px) {
    .iti input, .iti input[type=text], .iti input[type=tel] {
        position: relative;
        z-index: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-right: 22px !important;
        margin-right: 0;
    }
    .ap-otp-input {
        border: 1px solid #dadadae8;
        border-radius: 5px;
        width: 19%;
        height: 44px;
        margin: 4px;
        text-align: center;
    }
}

@media only screen and (min-width: 480px) and (max-width: 896px) {
    .iti input, .iti input[type=text], .iti input[type=tel] {
        position: relative;
        z-index: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-right: 30px !important;
        margin-right: 0;
    }
    .ap-otp-input {
        border: 1px solid #dadadae8;
        border-radius: 5px;
        width: 19%;
        height: 44px;
        margin: 4px;
        text-align: center;
    }
}

@media (max-width: 428px) {
    .get-otp {
        background: #16a34a;
        padding: 13px 12px 11px 15px;
        border: none;
        color: #fff;
        border-radius: 4px;
        line-height: 25px;
        float: right;
        margin-top: 10px;
        margin-bottom: 10px;
        position: relative;
    }
    .ap-otp-input {
        border: 1px solid #dadadae8;
        border-radius: 5px;
        width: 19%;
        height: 44px;
        margin: 4px;
        text-align: center;
    }
}

@media (max-width: 385px) {
    .get-otp {
        background: #16a34a;
        padding: 13px 12px 11px 15px;
        border: none;
        color: #fff;
        border-radius: 4px;
        line-height: 25px;
        float: right;
        margin-top: 10px;
        margin-bottom: 10px;
        position: relative;
    }
    .ap-otp-input {
        border: 1px solid #dadadae8;
        border-radius: 5px;
        width: 19%;
        height: 44px;
        margin: 4px;
        text-align: center;
    }
}

.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}
.success-message {
    color: green !important;
    font-size: 12px !important;
    margin-top: 5px !important;
}