/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/loginPopup.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.login-pop-modal.show .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0; }

.login-modal {
  width: 75%;
  max-width: 100%;
  margin: 3.125rem auto; }
  @media (min-width: 768px) {
    .login-modal {
      width: 44%; } }
  .login-modal .sign-in-sign-up {
    height: 0; }
  .login-modal .modal-header {
    border-bottom: 0; }
    .login-modal .modal-header .modal-close {
      position: absolute;
      right: 0;
      top: 0;
      color: #3333332b;
      font-size: 0.875rem;
      line-height: 1.375rem;
      padding: 1.25rem;
      background: transparent;
      border: 0; }
      .login-modal .modal-header .modal-close:focus {
        outline: none; }
      .login-modal .modal-header .modal-close .close-icon {
        color: #757575;
        font-size: 1.75rem;
        line-height: 0.875rem;
        font-weight: 300; }
        .login-modal .modal-header .modal-close .close-icon:hover {
          color: #000; }
  .login-modal .otp-modal-body {
    padding: 0 1.875rem; }
    .login-modal .otp-modal-body .otp-form-section {
      margin: 0 auto; }
      .login-modal .otp-modal-body .otp-form-section .otp-number-text {
        margin-bottom: 1rem; }
        .login-modal .otp-modal-body .otp-form-section .otp-number-text .otp-send,
        .login-modal .otp-modal-body .otp-form-section .otp-number-text .mobile-number {
          font-size: 0.875rem;
          line-height: 1rem;
          font-weight: 500;
          color: #212529; }
          @media (min-width: 1024px) {
            .login-modal .otp-modal-body .otp-form-section .otp-number-text .otp-send,
            .login-modal .otp-modal-body .otp-form-section .otp-number-text .mobile-number {
              font-size: 1rem;
              line-height: 1.125rem; } }
      .login-modal .otp-modal-body .otp-form-section .otp-confirm-div {
        margin-bottom: 2.25rem; }
        .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otp-input-label {
          font-size: 1rem;
          line-height: 1.125rem;
          font-weight: 500;
          color: #212529; }
          @media (min-width: 1024px) {
            .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otp-input-label {
              font-size: 1.125rem;
              line-height: 1.375rem; } }
        .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otpfields {
          margin: 0.625rem 0; }
          .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otpfields .otp-input-field {
            height: 2rem;
            width: 1.375rem;
            font-size: 1rem;
            font-weight: bold;
            color: #000;
            margin: 0.125rem;
            padding: 0.125rem;
            border: 2px solid #55525c;
            border-radius: 0.375rem;
            outline: none;
            background: #fff;
            -webkit-transition: all 0.1s;
            transition: all 0.1s; }
            .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otpfields .otp-input-field.otp-input-third {
              margin-right: 0.625rem; }
            .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otpfields .otp-input-field:focus {
              -webkit-box-shadow: 0 0 0.125rem 0.125rem #2b6777;
                      box-shadow: 0 0 0.125rem 0.125rem #2b6777; }
            @media (min-width: 1024px) {
              .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otpfields .otp-input-field {
                width: 2.625rem;
                padding: 0.625rem;
                font-size: 1.375rem; } }
        .login-modal .otp-modal-body .otp-form-section .otp-confirm-div .otp-error-msg {
          font-size: 1rem;
          color: #f00;
          margin: 0.25rem 0; }
      .login-modal .otp-modal-body .otp-form-section .confirm-resend-btn {
        margin-top: 1rem; }
        .login-modal .otp-modal-body .otp-form-section .confirm-resend-btn .resend-otp {
          background: #2b6777;
          padding: 0.5rem 1rem;
          color: #fff;
          font-size: 0.875rem;
          font-weight: 600;
          line-height: 0.75rem;
          border: 1px solid #2b6777;
          outline: none;
          min-height: 2rem; }
          @media (min-width: 1024px) {
            .login-modal .otp-modal-body .otp-form-section .confirm-resend-btn .resend-otp {
              line-height: 1.625rem; } }
          .login-modal .otp-modal-body .otp-form-section .confirm-resend-btn .resend-otp:hover {
            background: #fff;
            color: #2b6777; }
  .login-modal .modal-footer {
    margin-top: auto;
    padding: 1.875rem;
    border: none; }
    .login-modal .modal-footer .close-btn {
      border: 1px solid #ccc;
      background: #eee;
      cursor: pointer;
      color: #333;
      font-weight: 600;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      line-height: 1.375rem; }
      .login-modal .modal-footer .close-btn:hover {
        background: #e1e1e1; }