/* animation helpers */

.enter {
  transition-duration: 384ms;
  transition-timing-function: var(--venia-global-anim-in);
}

.exit {
  transition-duration: 192ms;
  transition-timing-function: var(--venia-global-anim-out);
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

.visible {
  opacity: 1;
  visibility: visible;
}

/* module */
.switchers {
  border-bottom: 1px solid var(--primary-border-color);
}
.root {
  composes: exit hidden;
  background-color: white;
  bottom: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  left: 0;
  max-width: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transform: translate3d(-100%, 0, 0);
  transition-property: opacity, transform, visibility;
  width: 100%;
  z-index: 3;
  min-height: 100vh;
  height: 100%;
}
.header svg {
  stroke: var(--primary-dark-color) !important;
}
.root_open {
  composes: root enter visible;
  box-shadow: var(--primary-box-shadow);
  transform: translate3d(0, 0, 0);
}

.header {
  align-content: center;
  background-color: var(--primary-light-color);
  box-shadow: var(--primary-box-shadow);
  display: grid;
  grid-auto-columns: 3.5rem;
  grid-auto-flow: column;
  grid-auto-rows: 3.5rem;
  grid-template-columns: 3.5rem 1fr 3.5rem;
  height: 3.75rem;
  position: sticky;
  z-index: 1;
  top: 0;
}

.body {
  composes: exit visible;
  overflow: auto;
  transition-property: opacity, visibility;
  height: calc(100vh - 53px);
  padding-bottom: 80px;
}
/* login wrap */
.mob_nav_cust_details {
  padding: 15px 20px 20px 20px;
  background: linear-gradient(
    to right,
    var(--primary-base-color),
    var(--primary-border-color)
  );
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav_cust_wrap {
  flex: 0 0 100%;
  display: inline-flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.nav_cust_wrap > span {
  width: 50px;
  height: 50px;
  background: var(--primary-light-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-right: 20px;
  box-shadow: var(--primary-box-shadow);
  font-family: 'Karla-Medium';
  color: var(--primary-dark-color);
}
.signout_btn {
  background: var(--primary-dark-color);
  padding: 7px 10px;
  color: var(--primary-light-color);
  font-family: 'Karla-Medium';
  width: 100px;
  border-radius: 3px;
  max-height: 37px;
}
.nav_signin_wrap {
  flex: 0 0 100%;
}
.nav_signin_wrap button {
  width: 100%;
}
.arrow_right {
}
.arrow_right_img {
  vertical-align: middle;
  filter: invert(1);
  transform: rotate(-90deg);
}
.signin_text {
  display: inline-flex;
  color: var(--primary-light-color);
  font-family: 'Karla-Medium';
  font-size: 16px;
  text-decoration: underline;
}
.divider {
  display: inline-flex;
  margin: 0 10px;
  width: 5px;
  height: 5px;
  background: var(--primary-light-color);
  border-radius: 50%;
}
.switchers {
}
.body_masked {
  composes: body enter hidden;
}

.modal {
  composes: exit hidden;
  background-color: white;
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 3.5rem;
  transform: translate3d(-100%, 0, 0);
  transition-property: opacity, transform, visibility;
}

.modal_open {
  composes: modal enter visible;
  transform: translate3d(0, 0, 0);
}
.modal_open div[class='text-right'] {
  display: none;
}
.footer {
  display: none;
}

/* rtl */
body[class='rtl_view'] .arrow_right_img {
  transform: rotate(90deg);
}
body[class='rtl_view'] .root {
  right: 0;
  left: unset;
  transform: translate3d(100%, 0, 0);
}
body[class='rtl_view'] .root_open {
  transform: translate3d(0, 0, 0);
}