/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./code/app_custom_encircle/cartridge/client/default/scss/login.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.login-page {
  padding: 0; }
  .login-page .user-login {
    margin: 0;
    height: 100vh; }
    .login-page .user-login .banner-section {
      padding: 0; }
      .login-page .user-login .banner-section .carousel-indicators {
        position: absolute;
        margin: 0;
        bottom: -2rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        z-index: 1;
        cursor: pointer; }
        @media (min-width: 1024px) {
          .login-page .user-login .banner-section .carousel-indicators {
            bottom: 0.625rem; } }
        .login-page .user-login .banner-section .carousel-indicators .carousel-dots {
          all: unset; }
          .login-page .user-login .banner-section .carousel-indicators .carousel-dots::marker {
            font-size: 0; }
          .login-page .user-login .banner-section .carousel-indicators .carousel-dots::before {
            content: "";
            border: 0.125rem solid #2b6777;
            border-radius: 1.875rem;
            padding: 0;
            margin: 0 0.5rem;
            display: inline-block;
            width: 0.625rem;
            height: 0.625rem;
            opacity: 1;
            background-color: #fff; }
            @media (min-width: 1024px) {
              .login-page .user-login .banner-section .carousel-indicators .carousel-dots::before {
                width: 0.75rem;
                height: 0.75rem; } }
          .login-page .user-login .banner-section .carousel-indicators .carousel-dots.active::before {
            background-color: #2b6777; }
          @media (min-width: 1024px) {
            .login-page .user-login .banner-section .carousel-indicators .carousel-dots:hover::before {
              background-color: #2b6777; } }
      .login-page .user-login .banner-section .carousel-item .login-banner-img {
        height: 100vh;
        width: 100%; }
    .login-page .user-login .login-section {
      padding: 0;
      position: relative; }
      .login-page .user-login .login-section .login-logo-img {
        width: 6.625rem; }
        @media (min-width: 768px) {
          .login-page .user-login .login-section .login-logo-img {
            width: 13.25rem; } }
      .login-page .user-login .login-section .sign-txt {
        font-size: 2rem;
        margin: 1.875rem 0 0.5rem;
        line-height: 4rem;
        font-weight: 500;
        color: #212529;
        font-family: "Noir", sans-serif; }
      .login-page .user-login .login-section .user-details {
        width: 19.75rem; }
        @media (min-width: 1024px) {
          .login-page .user-login .login-section .user-details {
            width: 26.5rem;
            padding: 0 1.5rem; } }
        .login-page .user-login .login-section .user-details .form-section {
          width: 100%;
          padding: 0 1rem; }
          @media (min-width: 1024px) {
            .login-page .user-login .login-section .user-details .form-section {
              padding: 0; } }
          .login-page .user-login .login-section .user-details .form-section .user-number {
            margin-top: 2.5rem; }
            .login-page .user-login .login-section .user-details .form-section .user-number .form-control {
              background-color: #f3f3f3;
              height: 3.25rem;
              border: 1px solid transparent;
              padding: 0.5rem 1.375rem;
              font-size: 1.125rem;
              color: #212529;
              border-radius: 0.375rem;
              -webkit-box-shadow: 0 0 0 62.5rem #f3f3f3 inset;
                      box-shadow: 0 0 0 62.5rem #f3f3f3 inset; }
              .login-page .user-login .login-section .user-details .form-section .user-number .form-control:focus {
                outline: none;
                border: 1px solid #000 !important; }
              .login-page .user-login .login-section .user-details .form-section .user-number .form-control::-webkit-input-placeholder {
                font-size: 0.75rem; }
              .login-page .user-login .login-section .user-details .form-section .user-number .form-control::-moz-placeholder {
                font-size: 0.75rem; }
              .login-page .user-login .login-section .user-details .form-section .user-number .form-control:-ms-input-placeholder {
                font-size: 0.75rem; }
              .login-page .user-login .login-section .user-details .form-section .user-number .form-control::-ms-input-placeholder {
                font-size: 0.75rem; }
              .login-page .user-login .login-section .user-details .form-section .user-number .form-control::placeholder {
                font-size: 0.75rem; }
                @media (min-width: 1024px) {
                  .login-page .user-login .login-section .user-details .form-section .user-number .form-control::-webkit-input-placeholder {
                    font-size: 1rem; }
                  .login-page .user-login .login-section .user-details .form-section .user-number .form-control::-moz-placeholder {
                    font-size: 1rem; }
                  .login-page .user-login .login-section .user-details .form-section .user-number .form-control:-ms-input-placeholder {
                    font-size: 1rem; }
                  .login-page .user-login .login-section .user-details .form-section .user-number .form-control::-ms-input-placeholder {
                    font-size: 1rem; }
                  .login-page .user-login .login-section .user-details .form-section .user-number .form-control::placeholder {
                    font-size: 1rem; } }
          .login-page .user-login .login-section .user-details .form-section .form-text {
            font-size: 0.875rem;
            color: #000;
            margin-top: 1.875rem;
            line-height: 1.5rem;
            padding: 0 0.375rem; }
            @media (min-width: 1024px) {
              .login-page .user-login .login-section .user-details .form-section .form-text {
                font-size: 1rem;
                padding: 0; } }
          .login-page .user-login .login-section .user-details .form-section .login-check {
            margin: 0.625rem 0.375rem 0.125rem; }
            @media (min-width: 1024px) {
              .login-page .user-login .login-section .user-details .form-section .login-check {
                margin: 0.625rem 0 0.125rem; } }
            .login-page .user-login .login-section .user-details .form-section .login-check .form-check.checkbox {
              padding-left: 1.875rem; }
              .login-page .user-login .login-section .user-details .form-section .login-check .form-check.checkbox input[type="checkbox"]:focus ~ .form-check-label::before {
                -webkit-box-shadow: 0 0 0 0.25rem #0d6ee640;
                        box-shadow: 0 0 0 0.25rem #0d6ee640;
                border: 1px solid #000; }
            .login-page .user-login .login-section .user-details .form-section .login-check .form-check .form-check-label {
              line-height: 1.125rem;
              padding-right: 0.375rem; }
              .login-page .user-login .login-section .user-details .form-section .login-check .form-check .form-check-label::before {
                height: 1.125rem;
                width: 1.125rem;
                margin-left: 0.25rem; }
                @media (min-width: 1024px) {
                  .login-page .user-login .login-section .user-details .form-section .login-check .form-check .form-check-label::before {
                    height: 1.5rem;
                    width: 1.5rem;
                    margin: 0; } }
              @media (min-width: 1024px) {
                .login-page .user-login .login-section .user-details .form-section .login-check .form-check .form-check-label {
                  line-height: 1.5rem;
                  padding: 0 0.75rem 0 0.25rem; } }
          .login-page .user-login .login-section .user-details .form-section .form-check.checkbox {
            padding-left: 1.875rem; }
            .login-page .user-login .login-section .user-details .form-section .form-check.checkbox .form-check-label::before {
              height: 1.125rem;
              width: 1.125rem;
              margin-left: 0.25rem; }
              @media (min-width: 1024px) {
                .login-page .user-login .login-section .user-details .form-section .form-check.checkbox .form-check-label::before {
                  height: 1.5rem;
                  width: 1.5rem;
                  margin: 0; } }
          .login-page .user-login .login-section .user-details .form-section .privacy-policy-div {
            margin: 1.875rem 0.375rem 1.25rem; }
            @media (min-width: 1024px) {
              .login-page .user-login .login-section .user-details .form-section .privacy-policy-div {
                margin: 1.875rem 0 1.25rem; } }
            .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .form-check-privacy {
              font-size: 0.875rem;
              line-height: 1.5rem;
              font-weight: 400; }
              .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .form-check-privacy .bold {
                color: #000;
                font-weight: 600;
                font-size: 0.875rem; }
              .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .form-check-privacy .form-check-label {
                line-height: 1.5rem;
                padding-left: 0.625rem; }
                .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .form-check-privacy .form-check-label::before {
                  margin-top: 0.875rem; }
                  @media (min-width: 1024px) {
                    .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .form-check-privacy .form-check-label::before {
                      margin-top: 0; } }
              .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .form-check-privacy input[type="checkbox"]:focus ~ .form-check-label::before {
                -webkit-box-shadow: 0 0 0 0.25rem #0d6ee640;
                        box-shadow: 0 0 0 0.25rem #0d6ee640;
                border: 1px solid #000; }
            .login-page .user-login .login-section .user-details .form-section .privacy-policy-div .terms-conditions-error-message .error-message {
              color: #f00;
              margin: 0.25rem 0;
              font-size: 0.875rem; }
          .login-page .user-login .login-section .user-details .form-section .mobile-number-missed .error-message,
          .login-page .user-login .login-section .user-details .form-section .communication-error-message .error-message {
            color: #f00;
            margin: 0.25rem 0;
            font-size: 0.875rem; }
          .login-page .user-login .login-section .user-details .form-section .btn-otp {
            background: -webkit-gradient(linear, left bottom, left top, from(#52ab98), to(#52ab98)), -webkit-gradient(linear, left top, right top, from(#194a50), to(#0c2431));
            background: linear-gradient(0deg, #52ab98, #52ab98), linear-gradient(90deg, #194a50 0%, #0c2431 100%);
            border-radius: 1.25rem;
            padding: 0.625rem 1.625rem;
            margin: 0 auto;
            -webkit-box-shadow: 0 0.5rem 0.875rem #00000080;
                    box-shadow: 0 0.5rem 0.875rem #00000080;
            color: #fff;
            outline: none;
            border: none;
            font-weight: 500; }
            .login-page .user-login .login-section .user-details .form-section .btn-otp:focus {
              outline: 1px solid #fff; }
          .login-page .user-login .login-section .user-details .form-section .mobile-number-missed {
            color: #f00;
            margin: 0.25rem 0;
            font-size: 0.875rem; }
          .login-page .user-login .login-section .user-details .form-section .loading-btn {
            background: #fff;
            color: #000; }
            .login-page .user-login .login-section .user-details .form-section .loading-btn:hover {
              color: #fff;
              padding: 0.625rem 1.625rem;
              background: #52ab98;
              border-radius: 1.5rem; }
      .login-page .user-login .login-section .login-otp-section {
        width: 19.75rem; }
        @media (min-width: 1024px) {
          .login-page .user-login .login-section .login-otp-section {
            width: 26.5rem; } }
        .login-page .user-login .login-section .login-otp-section .otp-sent-successfully {
          background-color: #ff5757;
          width: 15.625rem;
          position: absolute;
          margin: 0.625rem 0.625rem 0 0;
          top: 0;
          right: 0; }
          @media (min-width: 1024px) {
            .login-page .user-login .login-section .login-otp-section .otp-sent-successfully {
              width: 18.75rem;
              margin: 0; } }
          .login-page .user-login .login-section .login-otp-section .otp-sent-successfully .otp-success-msg {
            padding: 1rem; }
            .login-page .user-login .login-section .login-otp-section .otp-sent-successfully .otp-success-msg .success-img {
              height: 1.5rem;
              width: 1.5rem; }
            .login-page .user-login .login-section .login-otp-section .otp-sent-successfully .otp-success-msg .user-login-number {
              color: #fff;
              margin-left: 0.625rem; }
        .login-page .user-login .login-section .login-otp-section .otp-form-section {
          width: 100%; }
          .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-number-text {
            padding: 1.875rem 0;
            width: 100%; }
          .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-confirm-div {
            margin: 0.625rem 0 1.125rem 0; }
            .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-confirm-div .otp-input {
              background-color: #f3f3f3;
              border: 1px solid transparent;
              padding: 1.625rem 1.5rem;
              font-size: 0.875rem;
              border-radius: 0.375rem;
              -webkit-box-shadow: 0 0 0 62.5rem #f3f3f3 inset;
                      box-shadow: 0 0 0 62.5rem #f3f3f3 inset; }
              @media (min-width: 1024px) {
                .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-confirm-div .otp-input {
                  font-size: 1.125rem; } }
              .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-confirm-div .otp-input:focus {
                border: 1px solid #000; }
            .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-confirm-div .otp-error-msg {
              color: #f00;
              margin: 0.25rem 0;
              font-size: 0.875rem; }
            .login-page .user-login .login-section .login-otp-section .otp-form-section .otp-confirm-div .otp-limit-exceed {
              position: absolute;
              top: 0;
              background-color: #ff5757;
              color: #fff;
              padding: 1rem; }
          .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn {
            width: 100%;
            margin-top: 1rem; }
            .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .resend-otp,
            .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .confirm-otp {
              margin: 0 0.5rem;
              border-radius: 1.25rem;
              padding: 0.625rem 1.5rem;
              -webkit-box-shadow: 0 0.5rem 1rem #00000080;
                      box-shadow: 0 0.5rem 1rem #00000080;
              background: -webkit-gradient(linear, left bottom, left top, from(#52ab98), to(#52ab98)), -webkit-gradient(linear, left top, right top, from(#194a50), to(#0c2431));
              background: linear-gradient(0deg, #52ab98, #52ab98), linear-gradient(90deg, #194a50 0%, #0c2431 100%);
              color: #fff;
              border: 1px solid transparent;
              font-weight: 500;
              outline: none; }
              @media (min-width: 1024px) {
                .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .resend-otp,
                .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .confirm-otp {
                  margin: 0 1.5rem; } }
              .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .resend-otp:focus,
              .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .confirm-otp:focus {
                outline: 1px solid #fff; }
            .login-page .user-login .login-section .login-otp-section .otp-form-section .confirm-resend-btn .resend-otp {
              background: #fff;
              border: 1px solid #000;
              color: #000;
              -webkit-box-shadow: none;
                      box-shadow: none;
              opacity: 0.5; }
          .login-page .user-login .login-section .login-otp-section .otp-form-section .loading-btn .resend-confirm-loading-btn {
            background: -webkit-gradient(linear, left bottom, left top, from(#52ab98), to(#52ab98)), -webkit-gradient(linear, left top, right top, from(#194a50), to(#0c2431));
            background: linear-gradient(0deg, #52ab98, #52ab98), linear-gradient(90deg, #194a50 0%, #0c2431 100%);
            border-radius: 1.25rem;
            padding: 0.625rem 1.625rem;
            margin: 1.5rem auto 0;
            -webkit-box-shadow: 0 0.5rem 0.875rem #00000080;
                    box-shadow: 0 0.5rem 0.875rem #00000080;
            color: #fff;
            outline: none;
            border: none;
            font-weight: 500; }
            .login-page .user-login .login-section .login-otp-section .otp-form-section .loading-btn .resend-confirm-loading-btn:hover {
              color: #000;
              background: #fff; }
    .login-page .user-login .back-home .back-to-home {
      font-size: 1rem;
      -webkit-transition: ease-out 0.2s;
      transition: ease-out 0.2s;
      font-weight: 500;
      text-decoration: none;
      color: #000; }
      .login-page .user-login .back-home .back-to-home:hover {
        color: #fff;
        padding: 0.75rem;
        background: #52ab98;
        border-radius: 1.5rem; }