html,
body { height: 100%; font-size: 14px; font-family: 'Open Sans', sans-serif; color: rgb(38, 50, 56, 0.5); }
body { background-color: #F9F9F9; align-items: center; width: 100%; }

@font-face { font-family: 'open_sansregular'; src: url('../fonts/openSans/opensans-regular.woff2') format('woff2'), url('../fonts/openSans/opensans-regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'open_sanssemibold'; src: url('../fonts/openSans/opensans-semibold.woff2') format('woff2'), url('../fonts/openSans/opensans-semibold.woff') format('woff'); font-weight: normal; font-style: normal; }

/*common clasess*/
.w-200 { width: 200px; }
.text-underline { text-decoration: underline; }
.bold-600 { font-weight: 600; }
.mt0 { margin-top: 0 !important; }
.mt25 { margin-top: 25px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt-20 { margin-top: -20px !important; }
.mlr-10 { margin: 0 -10px; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px !important; }
.mt50 { margin-top: 50px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb20 { margin-bottom: 20px; }
.ml20 { margin-left: 20px; }
.mr20 { margin-right: 20px !important; }
.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.plr30 { padding: 0 30px; }
.plr45 { padding: 0 45px; }
.error { color: #E01E53; font-size: 14px; }
.link-button { background: none; border: none; color: #007bff; outline: none !important; cursor: pointer; }
.input-error { border: 1px solid #E01E53 !important; }
.hide { display: none !important; }
.pos-relative { position: relative; }
.text-lowercase { text-transform: lowercase; }
.semi-bold-font { font-family: 'Open Sans'; font-weight: 700; }
.regular-font { font-family: 'Open Sans'; }
.text-center { text-align: center; }
.rotate-180 { transform: rotate(180deg); }
.cursor { cursor: pointer; }
.opacity-5 { opacity: 0.5; }
.opacity-7 { opacity: 0.7; }
.theme-color { color: #318CE7 !important; }
.error-border { border: 1px solid #E01E53 !important; }
.toaster { min-width: 330px; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 16px; border-radius: 5px; display: block; z-index: 9999; }
.form-control:disabled, .form-control[readonly] { background-color: #F9F9F9; opacity: 1; border-color: #C5CCD9; }
.password-icon { display: none; }
/* For Chrome, Safari, and similar browsers */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* For Firefox */
input[type=number] { -moz-appearance: textfield; }

/*card*/
.card { margin: 0 auto; width: 485px; border: 1px solid #EBEBEB; box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.06); border-radius: 5px; }
.card-body { padding: 40px 30px; font-family: 'Open Sans'; color: #263238; }
.card-title { color: #263238; font-size: 20px; margin-bottom: 30px; font-family: 'Open Sans'; font-weight: 600; }

/*sign up*/
.warning-section { background: #FFF9B8; padding: 10px 15px; }
.site-logo { margin: 60px 0 30px; height: 60px; }
.form-group { margin-bottom: 20px; font-size: 14px; }
.form-control { padding: 10px 15px; font-size: 14px; opacity: 1; border-radius: 3px; border-color: #C5CCD9; }
.bi-eye-slash::before { content: "\f320"; }
.position-icon { cursor: pointer; position: absolute; top: 43px; right: 25px; font-size: 17px; }
.terms-privacy-text { margin-top: 5px; font-size: 12px; }
.signup-heading { width: 20%; text-align: center; border-bottom: 1px solid #EBEBEB; line-height: 0.1em; margin: 20px auto; color: #26323880; font-size: 14px; }
.signup-heading span { background: #fff; padding: 0 10px; }
.social-media-icons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.social-login { background: #fff; border: 1px solid #EBEBEB; border-radius: 3px; font-weight: 600; width: 198px; padding: 3px 10px; color: #263238; }
.social-login img { transform: scale(0.7); margin-left: -5px; }
.new-user-link { margin-top: 35px; color: #263238; }
.get-app-section { color: #263238; margin-top: 30px; }
.input-validation-error { border-color: #E01E53 }
.validation-summary-errors { margin-bottom: 10px; }
.validation-summary-errors ul { padding: 0; list-style-type: none; text-align: left; margin-bottom: 0; }
.group-element { display: flex; flex-direction: row; justify-content: space-between; }
.btn-lg { font-size: 14px !important; }
.btn { height: 40px; }

/*otp style*/
.otp-container { width: 330px; margin: 22px auto 0; }
.otp-info-text { line-height: 28px; color: #263238B3; }
.otp { display: inline-block; width: 64px; height: 64px; text-align: center; margin-right: 20px; }
.otp:nth-child(4) { margin-right: 0; }
.otp-timer, #resend-text { color: #484848; }
.login-with-provider .otp { width: 40px; height: 40px; margin-right: 15px; }
/* Hide the number input arrows */
.otp-container input[type="number"]::-webkit-inner-spin-button,
.otp-container input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Optional: add styles to make the input field look consistent */
/* Firefox */
.otp-container input[type="number"] { -moz-appearance: textfield; }

.cssload-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; }
.cssload-container .loader-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.cssload-container .loader-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #318CE7; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }
.cssload-container .loader-fading-circle { margin: 250px auto; width: 50px; height: 50px; position: relative; }
.cssload-container .loader-fading-circle .loader-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.cssload-container .loader-fading-circle .loader-circle-second { transform: rotate(30deg); }
.cssload-container .loader-fading-circle .loader-circle-second:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.cssload-container .loader-fading-circle .loader-circle-third { transform: rotate(60deg); }
.cssload-container .loader-fading-circle .loader-circle-third:before { -webkit-animation-delay: -1s; animation-delay: -1s; }
.cssload-container .loader-fading-circle .loader-circle-fourth { transform: rotate(90deg); }
.cssload-container .loader-fading-circle .loader-circle-fourth:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.cssload-container .loader-fading-circle .loader-circle-fifth { transform: rotate(120deg); }
.cssload-container .loader-fading-circle .loader-circle-fifth:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.cssload-container .loader-fading-circle .loader-circle-sixth { transform: rotate(150deg); }
.cssload-container .loader-fading-circle .loader-circle-sixth:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.cssload-container .loader-fading-circle .loader-circle-seventh { transform: rotate(180deg); }
.cssload-container .loader-fading-circle .loader-circle-seventh:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.cssload-container .loader-fading-circle .loader-circle-eighth { transform: rotate(210deg); }
.cssload-container .loader-fading-circle .loader-circle-eighth:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.cssload-container .loader-fading-circle .loader-circle-ninth { transform: rotate(240deg); }
.cssload-container .loader-fading-circle .loader-circle-ninth:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.cssload-container .loader-fading-circle .loader-circle-tenth { transform: rotate(270deg); }
.cssload-container .loader-fading-circle .loader-circle-tenth :before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.cssload-container .loader-fading-circle .loader-circle-eleventh { transform: rotate(300deg); }
.cssload-container .loader-fading-circle .loader-circle-eleventh:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.cssload-container .loader-fading-circle .loader-circle-twelfth { transform: rotate(330deg); }
.cssload-container .loader-fading-circle .loader-circle-twelfth:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.other-login-btn { text-decoration: none !important; font-family: 'Open Sans'; font-weight: 600; width: 100%; border: 1px solid #263238; border-radius: 3px; color: #263238 !important; margin: 0 auto; height: 40px; display: block; padding: 10px; line-height: 15px; }
#google-login-link { background-image: url(../../img/login-sign-up/icon-google.png); text-decoration: none; background-repeat: no-repeat; background-size: 16px; background-position: 125px 11px; line-height: 19px; padding-left: 40px; }
#apple-login-link { background-image: url(../../img/login-sign-up/icon-google.png); text-decoration: none; background-repeat: no-repeat; background-size: 16px; background-position: 110px 11px; line-height: 19px; }

.arrow { margin-left: 10px; }
#loginCode { letter-spacing: 10px; }
.login-with-provider .otp { width: 40px; height: 40px; margin-right: 15px; }

/*Media Query*/

@media only screen and (min-width: 1440px) {
  .site-logo { height: 80px; }
}

@media only screen and (max-width: 1366px) {
  .site-logo { height: 70px; }
}

@media only screen and (max-width: 1024px) {
  .auto-overflow { height: 100vh; overflow: auto !important; }
  .site-logo { height: 65px; }
}

@media only screen and (max-width: 768px) {
  .social-login { width: 100%; margin-bottom: 10px; }
  .otp-container { width: 100%; }
  .otp { width: 45px; height: 45px; margin-right: 10px; }
  .otp-info-text { line-height: 20px; }
  .site-logo { height: 55px; }
}

@media only screen and (max-width:600px) {
  .card { width: 97%; }
  #google-login-link { background-position: 80px 11px; }
  .group-element { flex-direction: column; }
  .group-element div + div { margin-top: 20px; }
}

@media only screen and (max-width:400px) {
  #google-login-link { background-position: 30px 11px; }
}