/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_storefront_core/cartridge/client/default/scss/login.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* stylelint-disable */
/* stylelint-enable */
/*
 * Set up a screen-wide ::before element behind its parent, to apply a colored background on a block.
 *
 * Usage :
 * .block {
 *    @include full-screen-background;
 *
 *    position: relative;
 * }
 */
/*
Usage

.block {
    @include arrow(right,red,5px,auto,auto,0,0,auto,-5px);

    width: 50px;
    height: 50px;
    position: relative;
}
*/
/*
Usage
    @include ratio-holder(364/300)
    Height/Width
*/
/* Mixin to cut off the rest of one-line (default) or multiline text with dots */
/* A small function allowing skipping base64 encoding
** and simply pasting the SVG markup right in the CSS.
** @author Jakob Eriksen
** @link http://codepen.io/jakob-e/pen/doMoML
** @param {String} $svg - SVG image to encode
** @return {String} - Encoded SVG data uri
*/
/* Replace substring 'fillColor' to real color from variables */
/**
 * Mixin to add icon as pseudo-element.
 */
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable */
/*md

# Icons

## Icons example:

```html_example

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">account:</span>
    <i class="fi fi--account" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-down:</span>
    <i class="fi fi--arrow-down" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-left:</span>
    <i class="fi fi--arrow-left" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-right:</span>
    <i class="fi fi--arrow-right" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-up:</span>
    <i class="fi fi--arrow-up" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">back-to-top:</span>
    <i class="fi fi--back-to-top" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">bag:</span>
    <i class="fi fi--bag" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">bin:</span>
    <i class="fi fi--bin" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">checkbox:</span>
    <i class="fi fi--checkbox" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">checkbox-checked:</span>
    <i class="fi fi--checkbox-checked" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">close:</span>
    <i class="fi fi--close" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">heart:</span>
    <i class="fi fi--heart" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">language:</span>
    <i class="fi fi--language" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">location:</span>
    <i class="fi fi--location" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">minus:</span>
    <i class="fi fi--minus" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">money:</span>
    <i class="fi fi--money" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">phone:</span>
    <i class="fi fi--phone" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">plus:</span>
    <i class="fi fi--plus" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">share:</span>
    <i class="fi fi--share" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">track-order:</span>
    <i class="fi fi--track-order" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">whatsapp:</span>
    <i class="fi fi--whatsapp" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">alert:</span>
    <i class="fi fi--alert" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">card:</span>
    <i class="fi fi--card" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">check:</span>
    <i class="fi fi--check" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">download:</span>
    <i class="fi fi--download" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">eye:</span>
    <i class="fi fi--eye" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">facebook:</span>
    <i class="fi fi--facebook" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">filter:</span>
    <i class="fi fi--filter" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">gift:</span>
    <i class="fi fi--gift" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">instagram:</span>
    <i class="fi fi--instagram" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">link:</span>
    <i class="fi fi--link" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">logout:</span>
    <i class="fi fi--logout" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">mail:</span>
    <i class="fi fi--mail" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">menu:</span>
    <i class="fi fi--menu" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">pay:</span>
    <i class="fi fi--pay" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">pinterest:</span>
    <i class="fi fi--pinterest" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">radio:</span>
    <i class="fi fi--radio" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">radio-checked:</span>
    <i class="fi fi--radio-checked" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">search:</span>
    <i class="fi fi--search" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">tag:</span>
    <i class="fi fi--tag" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">twitter:</span>
    <i class="fi fi--twitter" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">wishlist-filled:</span>
    <i class="fi fi--wishlist-filled" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">youtube:</span>
    <i class="fi fi--youtube" aria-hidden="true"></i>
</div>

```
*/
:root {
  --icon--account: "";
  --icon--arrow-down: "";
  --icon--arrow-left: "";
  --icon--arrow-right: "";
  --icon--arrow-up: "";
  --icon--back-to-top: "";
  --icon--bag: "";
  --icon--bin: "";
  --icon--checkbox: "";
  --icon--checkbox-checked: "";
  --icon--close: "";
  --icon--heart: "";
  --icon--language: "";
  --icon--location: "";
  --icon--minus: "";
  --icon--money: "";
  --icon--phone: "";
  --icon--plus: "";
  --icon--share: "";
  --icon--track-order: "";
  --icon--whatsapp: "";
  --icon--alert: "";
  --icon--card: "";
  --icon--check: "";
  --icon--download: "";
  --icon--eye: "";
  --icon--facebook: "";
  --icon--filter: "";
  --icon--gift: "";
  --icon--instagram: "";
  --icon--link: "";
  --icon--logout: "";
  --icon--mail: "";
  --icon--menu: "";
  --icon--pay: "";
  --icon--pinterest: "";
  --icon--radio: "";
  --icon--radio-checked: "";
  --icon--search: "";
  --icon--tag: "";
  --icon--twitter: "";
  --icon--wishlist-filled: "";
  --icon--youtube: "";
}

.b-login__modal-head {
  display: none;
}
[data-login-type=phone] .b-login__modal-head.b-login__modal-head--phone {
  display: block;
}
[data-login-type=email] .b-login__modal-head.b-login__modal-head--email {
  display: block;
}
.b-login__form-group {
  display: none;
}
[data-login-type=phone] .b-login__form-group.b-login__form-group--phone {
  display: block;
}
[data-login-type=email] .b-login__form-group.b-login__form-group--email {
  display: block;
}
.b-login__title {
  font-size: 1rem;
  line-height: 2.125rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .b-login__title {
    font-size: 1.125rem;
    line-height: 2.8125rem;
  }
}
.b-login__email-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
}
.b-login__link {
  font-weight: 600;
}
.b-login__link:active, .b-login__link:focus {
  text-decoration: underline;
}
.b-login__link-text {
  display: none;
}
[data-login-type=phone] .b-login__link-text.b-login__link-text--phone {
  display: inline;
}
[data-login-type=email] .b-login__link-text.b-login__link-text--email {
  display: inline;
}
.b-login__submit {
  margin-top: 1rem;
}
.b-login__icon.b-login__icon--phone {
  -webkit-transform: translateY(-50%) rotate(0);
          transform: translateY(-50%) rotate(0);
}
@media (min-width: 768px) {
  .b-login .wrapper-narrow__content {
    border-radius: 12px;
  }
}

@media (min-width: 1024px) {
  .b-otp {
    text-align: center;
  }
}
.b-otp__submit {
  margin-top: 2rem;
}
@media (min-width: 1024px) {
  .b-otp .modal-content {
    min-height: 21.5625rem;
  }
}
.b-otp .modal-title.b-login__modal-title {
  margin-bottom: 1.5rem;
}
.b-otp .invalid-feedback {
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .b-otp .b-login__modal-info {
    margin-bottom: 2rem;
  }
}
@media (max-width: 1023.98px) {
  .b-otp .modal-dialog.mobile-bottom {
    height: var(--window-height, 100%);
  }
}

.b-forgot-password__form-group {
  display: none;
}
[data-login-type=phone] .b-forgot-password__form-group.b-forgot-password__form-group--phone {
  display: block;
}
[data-login-type=email] .b-forgot-password__form-group.b-forgot-password__form-group--email {
  display: block;
}
@media (min-width: 1024px) {
  .b-forgot-password.modal .modal-content {
    position: relative;
  }
  .b-forgot-password.modal .modal-header {
    position: absolute;
    right: 0;
    left: 0;
  }
  .b-forgot-password.modal .modal-body {
    padding: 4rem;
  }
  .b-forgot-password.modal .b-login__modal-info {
    margin-bottom: 2rem;
  }
}