styles.css

.icon-marmita {
  display: inline-block;
  position: relative; }
  .icon-marmita svg {
    color: #717171;
    width: 100%;
    height: 100%; }
  .icon-marmita svg [stroke='#3F3E3E'] {
      stroke: currentColor; }
  .icon-marmita svg [fill='#3F3E3E'] {
      fill: currentColor; }
  .icon-marmita .icon-youtube-play {
    fill: #fff; }
  .icon-marmita .shadow-bg {
    opacity: 0; }

.marmita-badge {
  font-weight: 500;
  padding: 2px;
  font-size: 0.875rem;
  line-height: 1;
  text-align: right;
  vertical-align: bottom; }
  .marmita-badge .icon-marmita {
    padding: 0 5px 0 0; }
  .marmita-badge svg {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
    width: 13px;
    height: 13px; }
  .marmita-badge:hover .marmita-badge__tooltip {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
    transition: 100ms ease-in-out; }
  .marmita-badge__tooltip {
    background: #f2f2f2;
    border-radius: 4px;
    position: absolute;
    width: 100%;
    left: 0;
    display: block;
    color: #717171;
    font-weight: 300;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 8px 14px;
    z-index: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: 100ms ease-in-out; }
  .marmita-badge__tooltip::before {
      content: '';
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #f2f2f2;
      position: absolute;
      right: 4px;
      top: -5px; }

.icon-brand--white * {
  fill: #fff;
  transition: 700ms; }

.icon-brand--primary * {
  fill: #ffe115;
  transition: 700ms; }

.icon-brand--secondary * {
  fill: #f2d298;
  transition: 700ms; }

.icon-brand--gray * {
  fill: #272727;
  transition: 700ms; }

.btn {
  background: transparent;
  text-decoration: none;
  color: #ffe115;
  border: none;
  padding: 0 20px;
  border-radius: 4px;
  margin: 3px 0;
  height: 50px;
  font-weight: 500;
  transition: 100ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: default; }
  @media only screen and (min-width: 960px) {
    .btn {
      cursor: pointer; } }
  .btn > canvas {
    z-index: 1; }
  @media only screen and (min-width: 768px) {
      .btn > canvas {
        visibility: hidden; } }
  .btn .btn__label {
    font-size: 1rem;
    line-height: 1em;
    flex-grow: 1;
    position: relative;
    top: 1px;
    text-align: center; }
  .btn:focus {
    outline: transparent; }
  @media only screen and (min-width: 960px) {
    .btn:active {
      opacity: 0.8; } }
  .btn[disabled] {
    opacity: 0.5;
    cursor: no-drop;
    pointer-events: none; }
  .btn[disabled] > canvas {
      visibility: hidden; }
  .btn--default {
    background: #ffe115;
    color: #fff; }
  .btn--default svg {
      color: #fff;
      fill: #fff; }
  .btn--default[disabled] {
      background: #f37a83;
      color: #fff; }
  .btn--default[disabled] svg {
        color: #fff;
        fill: #fff; }
  .btn--default.btn--loading[disabled] {
      background: #ffe115;
      color: #f5e9da; }
  @media only screen and (min-width: 960px) {
      .btn--default:hover:enabled {
        background: #c2121f; }
      .btn--default.btn--secondary:hover:enabled {
        background: #ead1b2; }
      .btn--default.btn--facebook:hover:enabled {
        background: #33508e; }
      .btn--default.btn--white:hover:enabled {
        color: #fff;
        background: #ffe115; }
        .btn--default.btn--white:hover:enabled svg {
          color: #fff;
          fill: #fff; } }
  .btn--facebook {
    background: #4065b4;
    color: #fff; }
  .btn--facebook svg {
      color: #fff;
      fill: #fff; }
  .btn--facebook[disabled] {
      background: #869fd4;
      color: #fff;
      opacity: 1; }
  .btn--facebook.btn--loading[disabled] {
      background: #869fd4;
      color: #fff;
      opacity: 1; }
  .btn--secondary {
    background: #f5e9da;
    color: #ffe115; }
  .btn--secondary svg {
      color: #ffe115;
      fill: #ffe115; }
  .btn--gray {
    background: #a6a29f;
    color: #fff; }
  .btn--white {
    background: #fff;
    color: #ffe115; }
  .btn--white svg {
      color: #ffe115;
      fill: #ffe115; }
  .btn--transparent {
    background: transparent;
    color: #717171;
    border: 1px solid #dcdcdc; }
  @media only screen and (min-width: 960px) {
      .btn--transparent:hover:enabled {
        background: #f7f7f7; } }
  .btn--transparent--active {
      background: #f7f7f7; }
  .btn--transparent--selected {
      color: #fff;
      background: #717171; }
  @media only screen and (min-width: 960px) {
        .btn--transparent--selected:hover:enabled {
          background: #717171; } }
  .btn--link {
    background: transparent;
    color: #ffe115; }
  .btn--link svg {
      color: #ffe115;
      fill: #ffe115; }
  @media only screen and (min-width: 960px) {
      .btn--link:hover {
        text-decoration: none; } }
  .btn--link.btn--secondary {
      color: #f5e9da; }
  .btn--link.btn--secondary svg {
        color: #f5e9da;
        fill: #f5e9da; }
  .btn--link.btn--tertiary {
      color: #fed298; }
  .btn--link.btn--tertiary svg {
        color: #fed298;
        fill: #fed298; }
  .btn--link.btn--gray {
      color: #a6a29f; }
  .btn--link.btn--gray svg {
        color: #a6a29f;
        fill: #a6a29f; }
  .btn--link.btn--facebook {
      background: #fff;
      color: #4065b4; }
  .btn--link.btn--facebook svg {
        color: #4065b4;
        fill: #4065b4; }
  .btn--dark-link {
    background: transparent;
    color: #3e3e3e;
    font-size: 1rem;
    line-height: 1.25em; }
  .btn--underline {
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    border-bottom: transparent 3px solid;
    transition: 0.2s; }
  .btn--underline:hover {
      border-bottom-color: currentColor; }
  .btn.btn--iconize .btn__icon {
    width: 30px;
    height: 30px; }
  .btn.btn--iconize.btn--iconize-right {
    flex-direction: row-reverse; }
  .btn.btn--full-width {
    width: 100%; }
  .btn.btn--size-l {
    height: 60px;
    padding: 0 40px; }
  .btn.btn--size-l .btn__label {
      font-size: 1.25rem;
      line-height: 1.25em; }
  .btn.btn--size-l .btn__icon {
      -webkit-transform: scale(1.6);
              transform: scale(1.6); }
  .btn.btn--size-s {
    height: 30px;
    padding: 0 10px; }
  .btn.btn--size-s .btn__label {
      font-size: 0.875rem;
      line-height: 0.875em; }
  .btn.btn--size-s .btn__icon {
      -webkit-transform: scale(0.7);
              transform: scale(0.7); }
  .btn.btn--loading .marmita-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center; }
  .btn.btn--loading .marmita-spinner svg {
      fill: currentColor;
      top: 4px;
      position: relative; }
  .btn.btn--loading .btn__label {
    visibility: hidden; }
  .btn--filter {
    background-color: #00000000;
    color: #717171;
    border: 1px solid #dcdcdc;
    border-radius: 20px; }
  @media only screen and (min-width: 960px) {
      .btn--filter:hover:enabled {
        background-color: #f7f7f7;
        transition: 0.6s; } }
  .btn--filter--active:hover:enabled {
      background-color: #f6c1bd; }
  .btn--filter--selected {
      background-color: #fcebea;
      color: #ffe115;
      border: 1px solid #fcebea; }
  .btn--filter--selected:hover:enabled {
        background-color: #f6c1bd; }

.btn-selected {
  background: transparent;
  text-decoration: none;
  color: #3e3e3e;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  font-weight: 500;
  transition: 100ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  height: 50px; }
  .btn-selected__label {
    font-size: 0.875rem; }

.btn-icon {
  padding: 0;
  width: 40px;
  height: 40px;
  background: #ffe115;
  color: #f2d298;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 3px 5px;
  border-radius: 100%;
  outline: none;
  transition: 100ms;
  position: relative;
  overflow: hidden;
  cursor: default; }
  .btn-icon svg {
    color: #f2d298;
    fill: #f2d298; }
  @media only screen and (max-width: 767px) {
    .btn-icon {
      width: 30px;
      height: 30px;
      margin: 5px 0; } }
  @media only screen and (min-width: 960px) {
    .btn-icon {
      cursor: pointer; } }
  .btn-icon > canvas {
    z-index: 1;
    color: #ffe115; }
  @media only screen and (min-width: 768px) {
      .btn-icon > canvas {
        visibility: hidden; } }
  @media only screen and (min-width: 960px) {
    .btn-icon:hover:enabled {
      background: #c2121f;
      cursor: pointer; }
    .btn-icon:active:enabled {
      opacity: 0.9; } }
  .btn-icon .icon-marmita {
    height: 20px;
    width: 20px; }
  .btn-icon.btn-icon--secondary {
    background: #f2d298;
    color: #ffe115; }
  .btn-icon.btn-icon--secondary svg {
      color: #ffe115;
      fill: #ffe115; }
  .btn-icon.btn-icon--secondary > canvas {
      color: #4e360a; }
  @media only screen and (min-width: 960px) {
      .btn-icon.btn-icon--secondary:hover:enabled {
        background: #ecbe6b; } }
  .btn-icon.btn-icon--white {
    background: #fff;
    color: #ffe115; }
  .btn-icon.btn-icon--white svg {
      color: #ffe115;
      fill: #ffe115; }
  @media only screen and (min-width: 960px) {
      .btn-icon.btn-icon--white:hover:enabled {
        background: #e6e6e6; } }
  .btn-icon.btn-icon--gray {
    background: #fff;
    color: #272727; }
  @media only screen and (min-width: 960px) {
      .btn-icon.btn-icon--gray:hover:enabled {
        background: #0e0e0e; } }
  .btn-icon.btn-icon--transparent {
    background: transparent;
    color: #ffe115; }
  .btn-icon.btn-icon--transparent svg {
      color: #ffe115;
      fill: #ffe115; }
  @media only screen and (min-width: 960px) {
      .btn-icon.btn-icon--transparent:hover:enabled {
        background: rgba(255, 255, 255, 0.3); } }
  .btn-icon.btn-icon--transparent.btn-icon--secondary {
      color: #f2d298; }
  .btn-icon.btn-icon--transparent.btn-icon--secondary svg {
        color: #f2d298;
        fill: #f2d298; }
  .btn-icon.btn-icon--transparent.btn-icon--tertiary {
      color: #fed298; }
  .btn-icon.btn-icon--transparent.btn-icon--tertiary svg {
        color: #fed298;
        fill: #fed298; }
  .btn-icon.btn-icon--transparent.btn-icon--white {
      color: #fff; }
  .btn-icon.btn-icon--transparent.btn-icon--white svg {
        color: #fff;
        fill: #fff; }
  .btn-icon.btn-icon--transparent.btn-icon--gray {
      color: #a6a29f; }
  .btn-icon.btn-icon--transparent.btn-icon--gray svg {
        color: #a6a29f;
        fill: #a6a29f; }
  .btn-icon.btn-icon--size-s {
    width: 30px;
    height: 30px; }
  .btn-icon.btn-icon--size-s .icon-marmita {
      -webkit-transform: scale(0.8);
              transform: scale(0.8); }
  @media only screen and (min-width: 960px) {
        .btn-icon.btn-icon--size-s .icon-marmita {
          -webkit-transform: scale(1);
                  transform: scale(1); } }
  .btn-icon.btn-icon--size-l {
    width: 50px;
    height: 50px; }
  .btn-icon.btn-icon--size-l .icon-marmita {
      -webkit-transform: scale(1.5);
              transform: scale(1.5); }
  .btn-icon:disabled {
    opacity: 0.4;
    cursor: no-drop; }
  .btn-icon:disabled svg {
      color: #a6a29f;
      fill: #a6a29f; }
  .btn-icon:disabled > canvas {
      visibility: hidden; }

.btn-navigation {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  text-decoration: none;
  height: 60px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%; }
  @media only screen and (min-width: 960px) {
    .btn-navigation {
      padding: 10px 40px; }
      .btn-navigation:hover .btn-navigation__icon svg {
        color: #ffe115;
        fill: #ffe115; }
      .btn-navigation:hover .btn-navigation__icon .icon-marmita__shield-icon {
        stroke: #ffe115;
        fill: none; }
      .btn-navigation:hover .btn-navigation__label {
        color: #ffe115; } }
  .btn-navigation canvas {
    color: #a6a5a5; }
  .btn-navigation__icon {
    width: 25px;
    height: 28px;
    margin: 0 20px 0 0; }
  .btn-navigation__icon svg {
      color: #7f7f82;
      fill: #7f7f82; }
  @media only screen and (min-width: 960px) {
      .btn-navigation__icon {
        margin: 0 45px 0 0; } }
  .btn-navigation__icon svg {
      width: 24px;
      height: 24px; }
  .btn-navigation__icon .icon-marmita__shield-icon {
      stroke: #7f7f82;
      fill: none; }
  .btn-navigation__icon .counter-badge-wrapper {
      position: relative; }
  .btn-navigation__icon .counter-badge-wrapper .counter-badge-content {
        position: absolute;
        top: -34px;
        left: 14px;
        font-size: 0.625rem;
        background: #ffe115;
        color: #fff;
        height: 18px;
        text-align: center;
        border: solid 2px #fff;
        padding: 0 3px;
        line-height: 14px;
        border-radius: 18px;
        font-weight: 500; }
  .btn-navigation--counter-present .btn-navigation__icon svg {
    color: #ffe115;
    fill: #ffe115; }
  .btn-navigation--counter-present .btn-navigation__label {
    color: #ffe115; }
  .btn-navigation__label {
    font-size: 1.125rem;
    color: #717171; }
  .btn-navigation__icon-arrow {
    margin: 0 0 0 auto;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    width: 20px;
    height: 20px; }
  .btn-navigation__icon-arrow svg {
      color: #717171;
      fill: #717171; }
  @media only screen and (min-width: 960px) {
      .btn-navigation__icon-arrow {
        display: none; } }

.round-button {
  align-items: stretch;
  background: #ffffff;
  border-radius: 100%;
  border: 1px solid #f2f2f2;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  width: 48px;
  position: relative; }
  .round-button:active, .round-button:focus {
    outline: 0; }
  .round-button:hover, .round-button:active, .round-button:focus {
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16); }
  .round-button .icon-marmita {
    pointer-events: none; }
  @media only screen and (min-width: 960px) {
    .round-button {
      cursor: pointer; } }

.option-button.btn.btn--default {
  width: 100%;
  height: 56px;
  margin: 0;
  border-radius: 8px;
  padding: 20px;
  border: solid 1px #f2f2f2;
  display: inline-flex;
  color: #717171;
  background-color: transparent;
  text-transform: capitalize; }

.option-button__icon {
  display: inline-flex;
  width: 24px;
  position: relative;
  top: -1px;
  margin-right: 14px; }

.option-button__description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex-basis: 100%; }

.option-button__description-text {
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.25em;
  color: #3e3e3e;
  width: calc(100% - 0.1px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  flex-flow: nowrap column; }

.option-button__description-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }

@media only screen and (min-width: 960px) {
  .option-button.btn.btn--default {
    display: inline-flex;
    justify-content: space-between;
    min-width: 100px;
    height: 60px;
    color: #717171;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 400; }
    .option-button.btn.btn--default canvas {
      visibility: visible;
      color: #b5dbc4; }
    .option-button.btn.btn--default.checkout-payment-option--active, .option-button.btn.btn--default:hover {
      background-color: #d7ecdf;
      border-color: transparent; }
  .option-button__icon {
    margin-right: 10px; }
  .option-button__description-text :nth-child(n + 2) {
    font-weight: 100;
    font-size: 0.8125rem; }
  .option-button__check {
    padding: 0 0 0 7px; }
  .option-button .icon-marmita {
    width: 20px;
    -webkit-animation: fadeInCirc 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation: fadeInCirc 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .option-button .icon-marmita svg {
      color: #50a773;
      fill: #50a773; } }

.carousel {
  position: relative;
  width: 100%; }
  .carousel__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; }
  .carousel__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 1px; }
  .carousel__wrapper::-webkit-scrollbar {
      display: none; }
  .carousel__wrapper--dragging {
      cursor: -webkit-grabbing;
      cursor: grabbing; }
  .carousel__wrapper--dragging a {
        pointer-events: none; }
  .carousel__container {
    transition: 200ms;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content; }
  .carousel__slide {
    width: 100%; }
  .carousel__controllers {
    display: flex; }
  .carousel__controllers--hidden {
      display: none; }
  .carousel__controllers--bottom-left {
      justify-content: flex-start; }
  .carousel__controllers--bottom-left > button {
        margin: 0;
        left: 0;
        position: relative; }
  .carousel__controllers--bottom-left .carousel__controller--right {
        margin-left: 30px; }
  .carousel__controllers--bottom-right {
      justify-content: flex-end; }
  .carousel__controllers--bottom-right > button {
        position: relative; }
  .carousel__controllers--bottom-center {
      justify-content: center; }
  .carousel__controllers--bottom-center > button {
        margin: 3px 30px;
        position: relative; }
  .carousel__controller {
    position: absolute;
    background: white;
    border: 1px solid #c4c4c4;
    border-radius: 100%;
    z-index: 1;
    width: 39px;
    height: 39px; }
  @media only screen and (min-width: 960px) {
      .carousel__controller--mobile {
        display: block; } }
  .carousel__controller--left {
      left: 2px;
      top: 50%;
      -webkit-transform: rotateZ(90deg);
              transform: rotateZ(90deg); }
  .carousel__controller--left .icon-marmita {
        -webkit-transform: translate(0, 1px);
                transform: translate(0, 1px); }
  .carousel__controller--right {
      right: 2px;
      top: 50%;
      -webkit-transform: rotateZ(-90deg);
              transform: rotateZ(-90deg); }
  .carousel__controller--right .icon-marmita {
        -webkit-transform: translate(0, 2px);
                transform: translate(0, 2px); }
  .carousel__controller .icon-marmita {
      width: 18px;
      height: 18px; }
  .carousel__controller .icon-marmita svg {
        color: #3e3e3e;
        fill: #3e3e3e; }
  .carousel__controller.btn-icon:hover {
      transition: all 1s ease-in;
      background: white;
      cursor: pointer; }
  .carousel__controller.btn-icon:hover .icon-marmita svg {
        color: black;
        fill: black; }

.marmita-collapse--open .marmita-collapse__title > .icon-marmita {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg); }

.marmita-collapse--open .marmita-collapse__content {
  -webkit-animation: fadeIn 300ms;
          animation: fadeIn 300ms; }

.marmita-collapse__button {
  background: none;
  border: 0;
  color: #3f3e3e;
  font-weight: normal;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
  padding: 0; }

.marmita-collapse__title {
  align-items: center;
  display: flex;
  padding: 10px 20px;
  font-size: 1.125rem;
  position: relative;
  font-weight: bold; }

.marmita-collapse .icon-marmita {
  height: 25px;
  margin-left: 5px;
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 25px; }

.marmita-collapse .icon-marmita svg {
    color: #a6a5a5;
    fill: #a6a5a5; }

.marmita-collapse__content {
  padding: 0 20px;
  transition: 300ms cubic-bezier(0.075, 0.82, 0.165, 1); }

.marmita-counter {
  display: flex;
  align-items: center; }
  .marmita-counter__value {
    display: inline-block;
    height: 30px;
    min-width: 35px;
    line-height: 34px;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 3px 0; }
  .marmita-counter--minimal .marmita-counter__btn-decrement {
    visibility: hidden; }
  .marmita-counter--minimal .marmita-counter__value {
    visibility: hidden; }
  .marmita-counter .btn-icon {
    margin-left: 0;
    margin-right: 0; }

.marmita-image--responsive {
  width: 100%; }

.marmita-image--rounded {
  border-radius: 4px; }

.marmita-image--circle {
  border-radius: 50%; }

.marmita-minitag {
  display: inline-block;
  padding: 0 6px;
  background: #fff;
  border: 1px solid #e6e6e6;
  font-size: 0.75rem;
  border-radius: 3px;
  margin: 0 3px 0 0;
  line-height: 20px;
  height: 20px;
  text-transform: uppercase;
  font-weight: 500;
  -webkit-font-feature-settings: 'tnum';
          font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums; }
  .marmita-minitag--small {
    font-size: 0.5625rem;
    line-height: 1;
    padding: 5px 5px 3px; }
  .marmita-minitag--default {
    color: #4f4f4f; }
  .marmita-minitag--green {
    color: #50a773; }
  .marmita-minitag--primary {
    color: #ffe115; }
  .marmita-minitag--disabled {
    color: #a6a5a5; }
  .marmita-minitag--black {
    background-color: #717171;
    color: #f5f0eb;
    border: none;
    padding: 6px 6px 4px; }
  .marmita-minitag--grayscale {
    background-color: #f5f0eb;
    color: #a6a5a5; }

.marmita-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 10001; }
  .marmita-modal--theme-white {
    background: #fff; }
  .marmita-modal--theme-primary {
    background: #ffe115; }
  .marmita-modal--theme-transparent {
    background: transparent; }
  .marmita-modal--fullpage-content {
    height: 100%;
    width: 100%; }
  .marmita-modal--fullpage-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    z-index: 10001; }
  .marmita-modal--dialog-content {
    border-radius: 4px 4px 0 0;
    padding: 20px 0; }
  @media only screen and (min-width: 768px) {
      .marmita-modal--dialog-content {
        border-radius: 4px; } }
  .marmita-modal--dialog-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    z-index: 10001;
    background-color: rgba(0, 0, 0, 0.4); }
  .marmita-modal--dialog-overlay--darken {
      background-color: rgba(0, 0, 0, 0.8); }
  @media only screen and (min-width: 768px) {
    .marmita-modal--with-actions {
      padding-top: 40px; } }
  .marmita-modal__actions {
    display: flex;
    justify-content: flex-end; }
  @media only screen and (min-width: 768px) {
      .marmita-modal__actions {
        position: absolute;
        right: 0;
        top: 0; } }
  .marmita-modal__actions .btn-icon {
      margin: 0;
      cursor: pointer; }
  .marmita-modal__content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    outline: none; }
  .marmita-modal__inner-content {
    overflow-y: auto;
    height: 100%;
    width: 100%; }
  .ReactModalPortal .ReactModal__Overlay {
  transition: opacity 150ms ease-in-out;
  opacity: 0; }
  .ReactModalPortal .ReactModal__Overlay--after-open {
    opacity: 1; }
  .ReactModalPortal .ReactModal__Overlay--before-close {
    opacity: 0; }
  .marmita-modal__overlay-animation--right .ReactModal__Overlay {
  transition: opacity 150ms ease-in-out;
  opacity: 1; }
  .marmita-modal__overlay-animation--right .ReactModal__Content {
  opacity: 1;
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw); }
  .marmita-modal__overlay-animation--right .ReactModal__Content--after-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease; }
  .marmita-modal__overlay-animation--right .ReactModal__Content--before-close {
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw); }
  .marmita-modal__overlay-animation--bottom .ReactModal__Content {
  -webkit-transform: translateY(100%);
          transform: translateY(100%); }
  @media only screen and (min-width: 768px) {
    .marmita-modal__overlay-animation--bottom .ReactModal__Content {
      left: 50%;
      opacity: 0;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%, -40%);
              transform: translate(-50%, -40%);
      transition: 1000ms ease; } }
  .marmita-modal__overlay-animation--bottom .ReactModal__Content--after-open {
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
  -webkit-transform: translateY(0);
          transform: translateY(0); }
  @media only screen and (min-width: 768px) {
    .marmita-modal__overlay-animation--bottom .ReactModal__Content--after-open {
      left: 50%;
      opacity: 1;
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
      .marmita-modal__overlay-animation--bottom .ReactModal__Content--after-open.dish-modal {
        overflow-y: hidden; } }
  .marmita-modal__overlay-animation--bottom .ReactModal__Content--before-close {
  -webkit-transform: translateY(100%);
          transform: translateY(100%); }
  @media only screen and (min-width: 768px) {
    .marmita-modal__overlay-animation--bottom .ReactModal__Content--before-close {
      -webkit-transform: translate(-50%, -40%);
              transform: translate(-50%, -40%); } }

.overlay {
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9993;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  margin: auto;
  opacity: 0; }
  .overlay--visible {
    visibility: visible;
    opacity: 1;
    transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.app-shell {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px; }
  .app-shell .cancel-padding {
    left: -20px;
    position: relative;
    width: 100vw; }

.marmita-spinner--absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.marmita-spinner--center {
  display: flex;
  justify-content: center;
  margin: auto; }

.tooltip-ui-kit {
  position: relative;
  display: inline-block;
  cursor: help;
  white-space: nowrap; }
  .tooltip-ui-kit__container {
    position: absolute;
    z-index: 100;
    min-width: 200px;
    max-width: 300px;
    background: white;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 5px; }
  .tooltip-ui-kit__content {
    display: inline;
    padding: 10px; }
  .tooltip-ui-kit--right .tooltip-ui-kit__container {
    bottom: 50%;
    left: 100%;
    -webkit-transform: translate(0, 50%);
            transform: translate(0, 50%);
    margin-left: 5px; }
  .tooltip-ui-kit--left .tooltip-ui-kit__container {
    bottom: 50%;
    -webkit-transform: translate(-100%, 50%);
            transform: translate(-100%, 50%);
    margin-left: -5px; }
  .tooltip-ui-kit--top .tooltip-ui-kit__container {
    left: 50%;
    bottom: 100%;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    margin-bottom: 5px; }
  .tooltip-ui-kit--bottom .tooltip-ui-kit__container {
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
    margin-bottom: -5px; }
  .tooltip-ui-kit--inner .tooltip-ui-kit__container {
    left: 50%;
    bottom: 50%;
    -webkit-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%); }

.marmita-toastr-container {
  position: fixed;
  width: 100%;
  top: -50%;
  margin: auto;
  z-index: 10021;
  transition: 400ms;
  background: rgba(0, 0, 0, 0.9); }
  .marmita-toastr-container.marmita-toastr-container--is-visible {
    top: 0;
    transition: 600ms; }
  .marmita-toastr-container .marmita-toastr {
    padding: 15px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
  @media only screen and (min-width: 960px) {
      .marmita-toastr-container .marmita-toastr {
        width: 100%;
        max-width: 1366px !important;
        margin: auto;
        padding: 0 30px;
        justify-content: flex-start;
        width: 100%; } }
  @media only screen and (max-width: 959px) {
      .marmita-toastr-container .marmita-toastr {
        height: 60px; } }
  .marmita-toastr-container .marmita-toastr__message {
    font-size: 1rem;
    color: #fff;
    flex-grow: 2;
    max-width: 80%;
    text-align: center;
    position: relative;
    top: 2px;
    min-height: 20px; }
  @media only screen and (min-width: 960px) {
      .marmita-toastr-container .marmita-toastr__message {
        display: flex;
        align-items: center;
        min-height: 80px;
        font-size: 1.25rem; } }
  .marmita-toastr-container .marmita-toastr__icon {
    position: absolute;
    left: 15px;
    width: 30px;
    height: 30px; }
  .marmita-toastr-container .marmita-toastr__icon svg {
      width: 30px;
      height: 30px;
      fill: #fff; }
  @media only screen and (min-width: 960px) {
      .marmita-toastr-container .marmita-toastr__icon {
        position: relative;
        top: 0;
        width: auto;
        height: auto;
        margin-right: 30px; }
        .marmita-toastr-container .marmita-toastr__icon svg {
          fill: #fff;
          height: 26px;
          position: relative;
          top: 4px; } }

.toast {
  position: absolute;
  display: grid;
  grid-template-columns: 10px 1fr 33px;
  gap: 16px;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 480px;
  height: auto;
  top: 30px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  border-radius: 4px;
  padding: 9px 12px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  color: white;
  font-size: 0.875rem;
  line-height: 1.125rem;
  transition: all ease-in 150ms;
  pointer-events: none;
  z-index: 3; }
  .toast .icon-marmita {
    height: 14px;
    width: 14px;
    border-radius: 100%; }
  .toast .icon-marmita svg {
      height: 18px;
      width: 18px;
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px); }
  .toast--active {
    -webkit-animation: fadeIn 0.3s;
            animation: fadeIn 0.3s;
    pointer-events: unset; }
  .toast--success {
    background: #50a773; }
  .toast--error {
    background: #ffe115; }
  .toast .btn-icon {
    right: 0;
    background: transparent;
    opacity: 0.6;
    height: 20px; }
  .toast .btn-icon:hover {
      background: transparent; }

.marmita-scrollbox {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 145px; }
  .marmita-scrollbox--dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing; }
  .marmita-scrollbox--dragging a {
      pointer-events: none; }
  .marmita-scrollbox__wrapper {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    padding-bottom: 17px;
    box-sizing: content-box;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; }
  .marmita-scrollbox__wrapper::-webkit-scrollbar {
      display: none; }
  .marmita-scrollbox__container {
    height: 100%;
    border-radius: 5px;
    position: relative;
    display: inline-flex; }
  .marmita-scrollbox__container > * {
      margin-right: 1.25rem; }
  @media screen and (max-width: 767px) {
        .marmita-scrollbox__container > *:first-child {
          margin-left: 20px; }
        .marmita-scrollbox__container > *:last-child {
          margin-right: 20px; } }
  .marmita-scrollbox__button {
    display: none;
    position: absolute;
    top: 25%; }
  @media only screen and (min-width: 768px) {
      .marmita-scrollbox__button {
        display: block;
        top: unset;
        bottom: 0; } }
  .marmita-scrollbox__button--left {
      left: 15px; }
  @media only screen and (min-width: 768px) {
        .marmita-scrollbox__button--left {
          left: 0; } }
  .marmita-scrollbox__button--right {
      right: 15px;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }
  @media only screen and (min-width: 768px) {
        .marmita-scrollbox__button--right {
          right: 0; } }

.marmita-alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: #3e3e3e; }
  @media only screen and (min-width: 768px) {
    .marmita-alert {
      width: 500px;
      padding: 20px 50px; } }
  .marmita-alert__title {
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center; }
  @media only screen and (min-width: 768px) {
      .marmita-alert__title {
        font-size: 1.5rem;
        text-align: left; } }
  .marmita-alert__message {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: lighter;
    line-height: 18px;
    padding: 20px 40px; }
  @media only screen and (min-width: 768px) {
      .marmita-alert__message {
        font-size: 1rem;
        padding: 20px 0;
        text-align: left; } }
  .marmita-alert__message > span {
      margin-bottom: 18px; }
  .marmita-alert__message:last-child {
      margin-bottom: 0; }

.marmita-image-expandable__button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  cursor: zoom-in; }

.marmita-image-expandable__modal {
  background-color: transparent;
  border: none;
  width: auto;
  max-width: 100vw;
  height: auto;
  max-height: 100vw;
  padding: 0; }

.marmita-image-expandable__overlay {
  background-color: rgba(0, 0, 0, 0.9); }

.marmita-image-expandable__image {
  width: 100%; }

.marmita-image-expandable__modal-image {
  max-width: 100vw;
  max-height: 100vh; }

.marmita-tab__tablist-container {
  width: 100%;
  border-bottom: 1px solid #f5f0eb;
  padding: 0 20px; }
  @media only screen and (min-width: 960px) {
    .marmita-tab__tablist-container {
      padding: 0; } }
  .marmita-tab__tablist {
  display: flex;
  flex-wrap: nowrap; }
  @media only screen and (min-width: 960px) {
    .marmita-tab__tablist {
      display: inline-block; } }
  .marmita-tab__panel-container {
  overflow: hidden; }
  .marmita-tab__panel--from-left {
  -webkit-animation: slideInFromLeft 200ms;
          animation: slideInFromLeft 200ms; }
  .marmita-tab__panel--from-right {
  -webkit-animation: slideInFromRight 200ms;
          animation: slideInFromRight 200ms; }
  .marmita-tab__label {
  flex-grow: 1;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: transparent 2px solid;
  transition: 0.2s;
  color: #838282; }
  .marmita-tab__label:hover {
    border-bottom: #a6a6a6 2px solid; }
  .marmita-tab__label--active {
    border-bottom-color: currentColor;
    color: #3e3e3e; }

.marmita-error-message {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  text-align: center; }
  .marmita-error-message > * {
    max-width: 400px; }
  .marmita-error-message__title {
    font-size: 1.1em;
    margin-bottom: 10px; }
  .marmita-error-message__description {
    color: #a6a5a5; }
  .marmita-error-message__try-again {
    margin-top: 10px; }

.marmita-dropdown-menu {
  display: flex;
  position: relative;
  background-color: white;
  width: 100%; }
  .marmita-dropdown-menu__list {
    position: absolute;
    z-index: 9994;
    background-color: white;
    top: 100%;
    width: 100%;
    min-width: 255px;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.05);
    max-height: calc(6.5 * 56px);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    right: 0; }
  .marmita-dropdown-menu__list--visible {
    transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: visible;
    opacity: 1; }
  .marmita-dropdown-menu__item {
    position: relative; }
  .marmita-dropdown-menu__item:not(:first-child)::before {
      content: '';
      width: calc(100% - 40px);
      height: 0;
      display: block;
      background: transparent;
      position: absolute;
      left: 20px;
      top: 0;
      border-top: 1px solid #f5f0eb; }
  .marmita-dropdown-menu__item .btn {
      width: 100%; }
  .marmita-dropdown-menu__item .btn .btn__label {
        text-align: left;
        color: #3f3e3e;
        font-weight: lighter;
        font-size: 1em; }
  .marmita-dropdown-menu__item--alt {
    position: relative; }
  .marmita-dropdown-menu__item--alt .btn {
      height: 60px;
      width: 100%;
      padding: 0 10px;
      margin: 0; }
  .marmita-dropdown-menu__item--alt .btn::before {
        content: '';
        width: calc(100% - 30px);
        height: 0;
        display: block;
        background: transparent;
        position: absolute;
        left: 10px;
        top: 0;
        border-top: 1px solid #f5f0eb; }
  .marmita-dropdown-menu__item--alt .btn .btn__label {
        text-align: left;
        font-size: 1rem;
        color: #a6a5a5;
        line-height: 19px;
        font-weight: 400; }
  .marmita-dropdown-menu__item--alt .btn .btn__icon {
        width: 24px;
        height: 24px;
        margin-right: 10px; }
  .marmita-dropdown-menu__item--alt .btn .btn__icon svg {
          color: #a6a5a5; }
  .marmita-dropdown-menu__item--alt .btn:hover .btn__label {
        color: #595756; }
  .marmita-dropdown-menu__item--active .btn .btn__label {
    color: #595756; }
  .marmita-dropdown-menu__item--title .btn {
    padding: 18px 0 10px 14px;
    margin: 0;
    cursor: default;
    pointer-events: none; }
  .marmita-dropdown-menu__item--title .btn .btn__label {
      text-align: left;
      font-size: 1.125rem;
      color: #3f3e3e;
      line-height: 22px;
      font-weight: 500; }
  .marmita-dropdown-menu__button {
    display: flex;
    width: 100%; }
  .marmita-dropdown-menu__button .btn {
      width: 100%;
      padding: 0 0 0 30px; }
  .marmita-dropdown-menu__button .btn .btn__label {
        text-align: left;
        color: #3f3e3e; }
  .marmita-dropdown-menu__button .btn.btn--iconize .btn__icon svg {
      color: #3f3e3e;
      fill: #3f3e3e; }

.marmita-hint {
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 335px;
  background-color: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 21px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 200ms;
  border: 1px solid #F7F7F7; }
  .marmita-hint--visible {
    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 200ms;
    opacity: 1;
    visibility: visible; }
  .marmita-hint--top:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid white;
    border-radius: 3px;
    left: 50px;
    bottom: -10px; }
  .marmita-hint--bottom:before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid white;
    border-radius: 3px;
    left: 50px;
    top: -10px; }
  .marmita-hint__title {
    font-size: 1em;
    line-height: 1.375em; }
  .marmita-hint__description {
    font-size: 0.875em;
    line-height: 1.375em;
    font-weight: 100;
    color: #717171; }
  .marmita-hint__actions {
    display: flex;
    margin-top: 16px; }
  .marmita-hint__actions .btn--link {
      padding: 0 12px;
      border: 1px solid #ffe115;
      margin-right: 7.5px;
      height: 32px; }
  .marmita-hint__actions .btn--link .btn__label {
        font-size: 0.75em; }
  .marmita-hint__actions .btn--default {
      padding: 0 12px;
      margin-left: 7.5px;
      height: 32px; }
  .marmita-hint__actions .btn--default .btn__label {
        font-size: 0.75em; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.steps-router__step {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden; }

.steps-router__step--invisible {
    z-index: 0;
    visibility: hidden; }

.steps-router__step-transition--right {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  transition: -webkit-transform ease 300ms;
  transition: transform ease 300ms;
  transition: transform ease 300ms, -webkit-transform ease 300ms; }

.steps-router__step-transition--right-invisible {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: -webkit-transform 1ms ease 300ms;
  transition: transform 1ms ease 300ms;
  transition: transform 1ms ease 300ms, -webkit-transform 1ms ease 300ms; }

.steps-router__step-transition--fade {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  transition: opacity ease 300ms;
  opacity: 1; }

.steps-router__step-transition--fade-invisible {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
  transition: opacity 1ms ease 300ms 300ms, -webkit-transform 300ms ease 300ms;
  transition: opacity 1ms ease 300ms 300ms, transform 300ms ease 300ms;
  transition: opacity 1ms ease 300ms 300ms, transform 300ms ease 300ms, -webkit-transform 300ms ease 300ms; }

.steps-router__step-mount-transition--fade {
  -webkit-animation: fadeIn 300ms;
          animation: fadeIn 300ms; }

.steps-router {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.something-wrong {
  padding: 40px 0; }
  @media only screen and (max-width: 767px) {
    .something-wrong {
      border-bottom: 1px solid #f7f7f7; }
      .something-wrong:last-child {
        border-bottom: none; } }
  .something-wrong__image > svg {
    margin: 0 auto;
    display: block;
    width: 260px;
    height: 260px; }
  .something-wrong__image > svg .bg-falu-red {
      fill: #771212; }
  .something-wrong__image > svg .bg-ligth-pink {
      fill: #c599c6; }
  .something-wrong__image > svg .bg-ziggurat {
      fill: #aa85ab; }
  .something-wrong__image > svg .bg-carissma {
      fill: #f18398; }
  .something-wrong__image > svg .bg-london-hue {
      fill: #aa84ab; }
  .something-wrong__image > svg .bg-crimson {
      fill: #e4002b; }
  .something-wrong__image > svg .bg-charm {
      fill: #d2687c; }
  .something-wrong__image > svg .bg-blush {
      fill: #b75c6d; }
  .something-wrong__image > svg .something-went-wront-flip-flops-1 {
      -webkit-animation: something-went-wrong-flip 6s infinite ease-in-out;
              animation: something-went-wrong-flip 6s infinite ease-in-out; }
  .something-wrong__image > svg .something-went-wront-flip-flops-2 {
      -webkit-animation: something-went-wrong-flip-2 6s infinite ease-in-out;
              animation: something-went-wrong-flip-2 6s infinite ease-in-out; }
  .something-wrong__title, .something-wrong__text {
    text-align: center; }
  .something-wrong__title {
    color: #3e3e3e;
    font-size: 1rem;
    margin: 10px auto;
    line-height: 1.25rem;
    max-width: 280px; }
  .something-wrong__text {
    color: #717171;
    font-weight: 300;
    font-size: 0.875rem;
    margin: 0 auto;
    max-width: 280px; }
  @media only screen and (min-width: 768px) {
      .something-wrong__text {
        max-width: 320px;
        line-height: 1.125rem; } }
  .something-wrong__btn-go-back {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 40px; }
  .something-wrong__btn-go-back span {
      color: #ffffff; }
  @-webkit-keyframes something-went-wrong-flip {
  0% {
    -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px); }
  50% {
    -webkit-transform: translate(16px, 20px);
            transform: translate(16px, 20px); }
  100% {
    -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px); } }
  @keyframes something-went-wrong-flip {
  0% {
    -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px); }
  50% {
    -webkit-transform: translate(16px, 20px);
            transform: translate(16px, 20px); }
  100% {
    -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px); } }
  @-webkit-keyframes something-went-wrong-flip-2 {
  0% {
    -webkit-transform: translate(30px, 62px);
            transform: translate(30px, 62px); }
  50% {
    -webkit-transform: translate(20px, -3px);
            transform: translate(20px, -3px); }
  100% {
    -webkit-transform: translate(30px, 62px);
            transform: translate(30px, 62px); } }
  @keyframes something-went-wrong-flip-2 {
  0% {
    -webkit-transform: translate(30px, 62px);
            transform: translate(30px, 62px); }
  50% {
    -webkit-transform: translate(20px, -3px);
            transform: translate(20px, -3px); }
  100% {
    -webkit-transform: translate(30px, 62px);
            transform: translate(30px, 62px); } }

.info-card {
  background: #f7f7f7;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  padding: 16px 34px;
  text-align: center;
  width: 100%;
  margin-bottom: 20px; }
  .info-card__message {
    color: #717171;
    line-height: 1.25rem;
    font-size: 0.875rem;
    margin: 0; }

.pill-progress-bar {
  width: 100%; }
  .pill-progress-bar .pills {
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-auto-flow: column dense;
    gap: 4px; }
  .pill-progress-bar .pill {
    width: 100%;
    height: 4px;
    background: #f2f2f2;
    border-radius: 4px;
    position: relative; }
  .pill-progress-bar .pill.completed > span {
      display: block;
      height: 4px;
      width: 100%;
      position: absolute;
      background: linear-gradient(90deg, #f5a930 0%, #f8bc3a 100%);
      border-radius: 4px; }
  .pill-progress-bar .pill.last-completed > span {
      display: block;
      height: 4px;
      width: 100%;
      position: absolute;
      background: linear-gradient(90deg, #f5a930 0%, #f8bc3a 100%);
      border-radius: 4px;
      -webkit-animation: AnimateProgressBar 1s ease-out 150ms backwards;
              animation: AnimateProgressBar 1s ease-out 150ms backwards; }

.progress-bar {
  border-radius: 10px;
  background-color: #dcdcdc;
  width: 100%;
  height: 3px; }
  .progress-bar__current-progress {
    border-radius: 10px;
    background-color: #50a773;
    height: 3px;
    -webkit-animation: AnimateProgressBar 1s ease-in-out 0.5ms;
            animation: AnimateProgressBar 1s ease-in-out 0.5ms; }

@media only screen and (min-width: 960px) {
  .floating-notification {
    margin: 0;
    display: block;
    position: fixed;
    z-index: 9990;
    right: 20px;
    bottom: 20px;
    transition: bottom 250ms linear;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(90px);
            transform: translateX(90px); }
    .floating-notification--inbox-fab-visible {
      margin-right: calc(50px + 40px); }
    .floating-notification--inbox-open {
      margin-right: calc(410px + 14px); }
    .floating-notification--channel-open {
      margin-right: calc(410px + 375px + 38px); } }

.floating-notification--position {
  -webkit-animation: display-notifications 500ms linear 250ms forwards;
          animation: display-notifications 500ms linear 250ms forwards; }

.floating-notification__button-close {
  position: absolute;
  right: 0;
  top: 0; }

@-webkit-keyframes display-notifications {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(90px);
            transform: translateX(90px); }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes display-notifications {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(90px);
            transform: translateX(90px); }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

.follow-order-card {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #f5f0eb;
  color: #717171;
  display: flex;
  position: relative;
  text-decoration: none;
  width: 100vw;
  padding: 13px 20px; }
  @media only screen and (min-width: 768px) {
    .follow-order-card {
      padding: 13px 30px; } }
  @media only screen and (min-width: 960px) {
    .follow-order-card {
      background: #fff;
      border: 1px solid #dcdcdc;
      width: 400px;
      height: 80px;
      border-radius: 4px;
      padding: 18px 20px 17px;
      box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.1); } }
  .follow-order-card__icon-order {
    flex-basis: 17px;
    height: 20px;
    margin-right: 15px;
    position: relative;
    -webkit-transform: translateY(5px);
            transform: translateY(5px); }
  .follow-order-card__icon-order svg {
      color: #3e3e3e;
      fill: #3e3e3e; }
  @media only screen and (min-width: 960px) {
      .follow-order-card__icon-order {
        margin: 0 22px 0 2px;
        -webkit-transform: translateY(0);
                transform: translateY(0); } }
  .follow-order-card__icon-order::after {
      background: #ffe115;
      border-radius: 100%;
      border: 2px solid #f6f5f5;
      bottom: -3px;
      content: '';
      height: 8px;
      position: absolute;
      right: -6px;
      width: 8px; }
  .follow-order-card__title {
    font-size: 0.875rem;
    margin: 0 5px 0 0;
    color: #717171; }
  @media only screen and (min-width: 960px) {
      .follow-order-card__title {
        font-size: 1rem;
        font-weight: 300;
        margin-bottom: 7px;
        margin-top: 0; } }
  .follow-order-card__restaurant {
    color: #3e3e3e;
    font-size: 0.875rem;
    margin: 0;
    font-weight: 500; }
  @media only screen and (min-width: 960px) {
      .follow-order-card__restaurant {
        font-size: 16px; } }
  .follow-order-card__icon-arrow {
    margin-left: auto;
    -webkit-transform: translate(10px, 7px) rotate(-90deg);
            transform: translate(10px, 7px) rotate(-90deg);
    width: 28px; }
  .follow-order-card__icon-arrow svg {
      color: #a6a5a5;
      fill: #a6a5a5; }
  @media only screen and (min-width: 960px) {
      .follow-order-card__icon-arrow {
        width: 34px;
        -webkit-transform: translate(10px, 0px) rotate(-90deg);
                transform: translate(10px, 0px) rotate(-90deg); } }

.ph-highlights-carousel-item {
  width: 100%; }
  .ph-highlights-carousel-item__figure {
    width: 100%;
    height: 140px;
    margin: 0;
    border-radius: 4px; }
  @media only screen and (min-width: 768px) {
      .ph-highlights-carousel-item__figure {
        height: 200px; } }

.ph-restaurant-menu {
  padding: 20px;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee; }
  @media only screen and (min-width: 960px) {
    .ph-restaurant-menu {
      width: calc(50% - 20px);
      padding: 20px;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      margin: 30px 0 10px; } }
  @media only screen and (min-width: 960px) {
    .ph-restaurant-menu-container {
      padding: 0 30px; } }
  @media only screen and (min-width: 1248px) {
    .ph-restaurant-menu-container {
      max-width: calc(1366px - 430px);
      margin: auto; } }
  @media only screen and (min-width: 1440px) {
    .ph-restaurant-menu-container {
      padding-right: 0; } }
  .ph-restaurant-menu-container .ph-restaurant-menu-title {
    display: none;
    width: 250px;
    height: 27px;
    margin-top: 40px; }
  @media only screen and (min-width: 960px) {
      .ph-restaurant-menu-container .ph-restaurant-menu-title {
        display: flex; } }
  @media only screen and (min-width: 960px) {
    .ph-restaurant-menu-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; } }
  .ph-restaurant-menu .lines {
    width: 80%; }
  .ph-restaurant-menu .lines > * {
      margin: 5px 0; }
  .ph-restaurant-menu .lines *:nth-child(1) {
      width: 65%; }
  .ph-restaurant-menu .lines *:nth-child(2) {
      width: 75%; }
  .ph-restaurant-menu .lines *:nth-child(3) {
      width: 70%; }
  .ph-restaurant-menu .lines *:nth-child(4) {
      width: 30%;
      margin: 15px 0 0 0; }
  .ph-restaurant-menu__rect {
    width: 90px;
    height: 90px; }

.ph-cuisine-item {
  display: inline-block; }
  .ph-cuisine-item__figure {
    margin: 0;
    border-radius: 50%;
    width: 80px;
    height: 80px; }
  @media only screen and (min-width: 960px) {
      .ph-cuisine-item__figure {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        margin: 0 auto; } }
  .ph-cuisine-item__figure.ph-loading {
      border-radius: 50%; }
  .ph-cuisine-item__title {
    margin-top: 20px;
    height: 16px; }

.delivery-input-wrapper {
  flex: 0 0 1; }
  .delivery-input-wrapper__title {
    font-size: 0.875rem;
    height: 12px;
    color: #a6a5a5;
    text-transform: uppercase;
    margin: 0 0 5px 0; }
  .delivery-input {
  display: flex;
  flex-direction: row;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: #fff;
  padding: 0;
  height: 25px;
  cursor: default; }
  @media only screen and (min-width: 768px) {
    .delivery-input {
      cursor: pointer; } }
  .delivery-input__item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center; }
  .delivery-input__item:first-child {
      margin-right: 12px; }
  .delivery-input__icon-map {
    width: 20px;
    flex-shrink: 0;
    margin: 0 5px 0 0;
    display: none; }
  .delivery-input__icon-map svg {
      color: #3e3e3e;
      fill: #3e3e3e; }
  @media only screen and (min-width: 960px) {
      .delivery-input__icon-map {
        display: flex; } }
  .delivery-input__icon-arrow {
    width: 25px;
    height: 25px;
    flex-shrink: 0; }
  .delivery-input__icon-arrow svg {
      color: #ffe115;
      fill: #ffe115; }
  @media only screen and (min-width: 960px) {
      .delivery-input__icon-arrow svg {
        color: #3e3e3e;
        fill: #3e3e3e; } }
  .delivery-input__address-number {
    margin: 0 0 0 3px;
    flex-shrink: 0; }
  .delivery-input__address {
    font-size: 1rem;
    margin-left: 3px;
    color: #3e3e3e;
    display: flex;
    align-items: center;
    font-weight: 500;
    text-align: left; }
  @media only screen and (min-width: 768px) {
      .delivery-input__address {
        margin-left: 3px;
        font-size: 1rem;
        font-weight: 300;
        color: #3e3e3e; } }

.ph-restaurant-card {
  border: 1px solid #f2f2f2;
  display: grid;
  transition: 200ms;
  height: 90px;
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  width: 100%;
  grid-template-columns: 60px 1px 1fr;
  grid-template-areas: "figure divider content";
  grid-column-gap: 12px; }
  @media only screen and (min-width: 960px) {
    .ph-restaurant-card {
      height: 130px;
      grid-template-columns: 85px 1px 1fr;
      grid-column-gap: 20px;
      padding: 20px; } }
  .ph-restaurant-card:before {
    grid-area: divider;
    content: '';
    width: 1px;
    background-color: #f2f2f2; }
  .ph-restaurant-card__figure {
    grid-area: figure; }
  .ph-restaurant-card__content {
    grid-area: content;
    display: grid;
    grid-template-rows: 1fr 20px; }
  .ph-restaurant-card__header {
    width: 85%;
    height: 18px;
    margin-bottom: 6px; }
  .ph-restaurant-card__info {
    width: 65%;
    height: 14px; }
  .ph-restaurant-card__footer {
    width: 45%;
    height: 14px; }

.home-header {
  background: #fff;
  padding: 20px 20px 14px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9997;
  border-top: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); }
  .home-header .delivery-input__address {
    margin-left: 0; }
  .home-header .delivery-input-wrapper {
    flex: 1; }

.ph-waiting-steps {
  width: 100%; }
  .ph-waiting-steps .ph-step-icon {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    margin-top: 12px;
    margin-right: 12px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-steps .ph-step-icon {
        height: 24px;
        width: 24px;
        margin-right: 40px; } }
  .ph-waiting-steps .ph-step {
    display: flex; }
  .ph-waiting-steps .ph-step-items {
    width: 100%; }
  .ph-waiting-steps .ph-step-title {
    width: 35%;
    height: 15px;
    margin-bottom: 2px;
    margin-top: 12px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-steps .ph-step-title {
        height: 20px;
        margin-bottom: 2px;
        margin-top: 0; } }
  .ph-waiting-steps .ph-step-time {
    width: 15%;
    height: 13px;
    margin-bottom: 5px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-steps .ph-step-time {
        height: 18px;
        margin-bottom: 3px; } }
  .ph-waiting-steps .ph-step-description {
    width: 85%;
    height: 13px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-steps .ph-step-description {
        height: 18px;
        margin-bottom: 35px; } }
  .ph-waiting-steps .ph-step-call {
    width: 75%;
    height: 14px;
    margin-top: 25px;
    margin-bottom: 5px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-steps .ph-step-call {
        display: none; } }
  .ph-waiting-steps .ph-step-contact {
    height: 14px;
    width: 85%;
    margin-bottom: 20px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-steps .ph-step-contact {
        display: none; } }

.nav-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  min-height: 60px;
  z-index: 9997; }
  .nav-header--primary {
    background: #fff;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1); }
  .nav-header--primary .nav-header__title {
      color: #3e3e3e; }
  @media only screen and (min-width: 960px) {
      .nav-header--primary .btn-icon {
        cursor: pointer; } }
  .nav-header--primary .btn-icon .icon-marmita svg {
      color: #ffe115;
      fill: #ffe115; }
  .nav-header--fixed {
    position: fixed;
    width: 100%; }
  .nav-header--transparent {
    background: transparent; }
  .nav-header--transparent .nav-header__title {
      color: #717171; }
  .nav-header--transparent .btn-icon .icon-marmita svg {
      color: #ffe115;
      fill: #ffe115; }
  .nav-header--tertiary .nav-header__title {
    color: #fff; }
  .nav-header--tertiary .btn-icon .icon-marmita svg {
    color: #fed298;
    fill: #fed298; }
  .nav-header--with-padding {
    padding: 10px 20px; }
  .nav-header__title {
    font-size: 0.75rem;
    font-weight: 500;
    left: 0;
    margin: 0;
    padding: 2px 50px 0 50px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 0; }
  .nav-header__subtitle {
    font-size: 0.9375rem;
    font-weight: 300;
    text-transform: capitalize;
    color: #a6a6a6; }
  .nav-header .btn-icon {
    margin: 0;
    z-index: 1;
    border-radius: 0;
    height: 40px;
    width: 50px;
    left: -17px;
    padding: 0 0 0 14px; }
  .nav-header__left-button {
    justify-content: flex-start; }

.ph-waiting-restaurant-name {
  position: absolute;
  right: 0;
  top: 10px;
  width: 100%; }
  @media only screen and (min-width: 960px) {
    .ph-waiting-restaurant-name {
      bottom: 0;
      top: auto;
      padding-left: 22px; } }
  .ph-waiting-restaurant-name .ph-restaurant-title {
    width: 75%;
    height: 25px;
    margin-bottom: 2px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-restaurant-name .ph-restaurant-title {
        width: 90%;
        height: 50px;
        margin-bottom: 5px; } }
  .ph-waiting-restaurant-name .ph-restaurant-order {
    width: 35%;
    height: 14px;
    margin-bottom: 2px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-restaurant-name .ph-restaurant-order {
        width: 45%;
        height: 18px; } }
  .ph-waiting-restaurant-name .ph-step-call {
    display: none;
    width: 75%;
    height: 14px;
    margin-top: 150px;
    margin-bottom: 5px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-restaurant-name .ph-step-call {
        display: block; } }
  .ph-waiting-restaurant-name .ph-step-contact {
    display: none;
    height: 14px;
    width: 85%;
    margin-bottom: 60px; }
  @media only screen and (min-width: 960px) {
      .ph-waiting-restaurant-name .ph-step-contact {
        display: block; } }

.restaurant-info--loading {
  border-bottom: 10px solid #e6e6e6;
  border-radius: 4px 4px 0 0;
  color: #595856;
  padding: 40px 20px 0 20px;
  margin-top: 70px;
  position: relative;
  top: -5px;
  min-height: 165px;
  display: flex;
  flex-direction: column; }
  @media only screen and (min-width: 960px) {
    .restaurant-info--loading {
      border-bottom: 0;
      border-radius: 0;
      padding: 0;
      margin: 30px 0 0;
      top: 0; } }
  @media only screen and (min-width: 1248px) {
    .restaurant-info--loading {
      max-width: calc(1366px - 430px);
      margin: auto;
      margin-top: 30px; } }
  @media only screen and (min-width: 960px) {
    .restaurant-info--loading-wrapper {
      padding: 0 30px; } }
  @media only screen and (min-width: 1248px) {
    .restaurant-info--loading-wrapper {
      padding-right: 0; } }
  .restaurant-info--loading .ph-loading {
    margin: 0 0 10px 0; }
  .restaurant-info--loading .restaurant-info__title {
    width: 50%; }
  .restaurant-info--loading .restaurant-info__logo {
    border-radius: 100%; }
  .restaurant-info--loading .restaurant-info__link-more {
    margin: 30px 0 0;
    width: 50px; }
  .restaurant-info__subtitle--loading {
  width: 60%;
  height: 25px; }

.search-targeted {
  position: absolute;
  background: #fff;
  border: 1px solid #f7f7f7;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  left: 17px;
  right: 9px;
  padding: 20px 30px; }
  .search-targeted__title {
    font-size: 16px;
    margin: 0 0 10px; }
  .search-targeted .search-targeted__options .search-targeted__option {
    font-size: 14px; }
  .search-targeted .search-targeted__options .search-targeted__option .btn {
      color: #a6a6a6;
      font-weight: initial;
      height: 40px;
      padding: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
  .search-targeted .search-targeted__options .search-targeted__option .btn:focus, .search-targeted .search-targeted__options .search-targeted__option .btn:hover, .search-targeted .search-targeted__options .search-targeted__option .btn:active {
        color: #717171; }
  .search-targeted .search-targeted__options .search-targeted__option .btn:focus svg,
        .search-targeted .search-targeted__options .search-targeted__option .btn:focus path, .search-targeted .search-targeted__options .search-targeted__option .btn:hover svg,
        .search-targeted .search-targeted__options .search-targeted__option .btn:hover path, .search-targeted .search-targeted__options .search-targeted__option .btn:active svg,
        .search-targeted .search-targeted__options .search-targeted__option .btn:active path {
          fill: #717171;
          color: #717171; }
  .search-targeted .search-targeted__options .search-targeted__option .icon-marmita {
      width: 20px;
      margin: 0 5px 0 0; }
  @media only screen and (min-width: 375px) {
        .search-targeted .search-targeted__options .search-targeted__option .icon-marmita {
          margin: 0 15px 0 0; } }
  .search-targeted .search-targeted__options .search-targeted__option .icon-marmita svg,
      .search-targeted .search-targeted__options .search-targeted__option .icon-marmita path {
        fill: #a6a6a6;
        color: #a6a6a6; }
  .search-targeted__text {
    color: #3e3e3e;
    white-space: nowrap;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis; }
  @media only screen and (min-width: 334px) and (max-width: 359px) {
      .search-targeted__text {
        max-width: 100px; } }
  @media only screen and (min-width: 360px) and (max-width: 400px) {
      .search-targeted__text {
        max-width: 130px; } }
  @media only screen and (min-width: 420px) and (max-width: 499px) {
      .search-targeted__text {
        max-width: 160px; } }
  @media only screen and (min-width: 500px) and (max-width: 767px) {
      .search-targeted__text {
        max-width: 200px; } }
  @media only screen and (min-width: 768px) and (max-width: 960px) {
      .search-targeted__text {
        max-width: 400px; } }
  @media only screen and (min-width: 960px) and (max-width: 1248px) {
      .search-targeted__text {
        max-width: 100px; } }
  @media only screen and (min-width: 1248px) {
      .search-targeted__text {
        max-width: 160px; } }
  .search-targeted__text-dot {
    width: 5px;
    background-color: #3e3e3e;
    border-radius: 50%;
    height: 5px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px; }
  @media only screen and (min-width: 375px) {
      .search-targeted__text-dot {
        margin: 0 10px; } }

.ph-address-btn {
  height: 78px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  min-height: 80px;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "icon title" "icon subtitle";
  gap: 0 10px; }
  .ph-address-btn__icon {
    grid-area: icon;
    height: 30px;
    width: 30px;
    justify-self: center;
    align-self: center;
    border-radius: 4px; }
  .ph-address-btn__title {
    grid-area: title;
    height: 16px;
    align-self: end;
    width: 60%;
    border-radius: 4px; }
  .ph-address-btn__subtitle {
    grid-area: subtitle;
    height: 12px;
    margin-top: 10px;
    width: 80%;
    border-radius: 4px; }

.search-input {
  width: 100%; }
  @media only screen and (min-width: 960px) {
    .search-input {
      max-width: 450px;
      min-width: 370px;
      padding: 0 9px 0 17px;
      position: relative; } }
  .search-input__icon-search {
    width: 24px;
    height: 24px; }
  .search-input__icon-search svg {
      color: #ffe115;
      fill: #ffe115; }
  @media only screen and (min-width: 960px) {
      .search-input__icon-search {
        width: 26px;
        height: 26px;
        left: 20px;
        top: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        pointer-events: none; }
        .search-input__icon-search svg {
          color: #414143;
          fill: #414143; } }
  .search-input__form {
    display: grid;
    grid-template: 1fr / 1fr;
    height: 40px;
    position: relative; }
  @media only screen and (min-width: 960px) {
      .search-input__form {
        height: 100%; } }
  .search-input .btn {
    padding: 0 0 0 10px;
    margin: 0; }
  .search-input .btn-visibility--hidden {
      visibility: hidden; }
  .search-input__field-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background-color: #f6f5f5;
    padding: 0 5px 0 12px;
    border-radius: 4px;
    margin-right: 0;
    width: 100%;
    position: relative; }
  @media only screen and (min-width: 960px) {
      .search-input__field-wrapper {
        padding: 0; } }
  .search-input__field {
    width: 100%;
    height: 100%;
    padding-left: 12px;
    border: none;
    font-size: 1rem;
    background-color: transparent; }
  @media only screen and (min-width: 960px) {
      .search-input__field {
        display: flex;
        height: 50px;
        padding-left: 53px;
        padding-right: 0;
        border: 1px solid #f2f2f2;
        line-height: 1.25em;
        font-weight: 300;
        background: #f7f7f7;
        border-radius: 4px; } }
  .search-input__field::-webkit-input-placeholder {
      color: #a6a6a5;
      margin: 0;
      font-weight: 400;
      font-size: 1rem; }
  .search-input__field:-ms-input-placeholder {
      color: #a6a6a5;
      margin: 0;
      font-weight: 400;
      font-size: 1rem; }
  .search-input__field::-ms-input-placeholder {
      color: #a6a6a5;
      margin: 0;
      font-weight: 400;
      font-size: 1rem; }
  .search-input__field::placeholder {
      color: #a6a6a5;
      margin: 0;
      font-weight: 400;
      font-size: 1rem; }
  @media only screen and (min-width: 960px) {
        .search-input__field::-webkit-input-placeholder {
          font-weight: 300; }
        .search-input__field:-ms-input-placeholder {
          font-weight: 300; }
        .search-input__field::-ms-input-placeholder {
          font-weight: 300; }
        .search-input__field::placeholder {
          font-weight: 300; } }
  .search-input__field:focus::-webkit-input-placeholder {
      opacity: 0; }
  @media only screen and (min-width: 960px) {
    .search-input__erase-button {
      background: transparent;
      border: none;
      margin: 0;
      padding: 10px;
      position: absolute;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%); } }

.restaurant-cart-footer__info > * {
  height: 32px;
  line-height: 32px;
  font-weight: 300; }

.restaurant-cart-footer__info-description {
  color: #717171; }

.restaurant-cart-footer__green-text {
  color: #50a773; }

.restaurant-cart-footer__button-wrapper--hide {
  display: none; }

.restaurant-cart-footer__delivery-fee-info {
  width: 20px;
  height: 20px;
  border-radius: 100%; }

.restaurant-cart-footer__delivery-fee-info .btn__label {
    top: 2px; }

.restaurant-cart-footer__delivery-fee-info::before {
    content: '';
    height: 17px;
    width: 17px;
    border-radius: 100%;
    display: block;
    background: transparent;
    position: absolute;
    border: 1px solid #a6a5a5; }

.restaurant-cart-footer__total {
  font-weight: 500; }

.restaurant-cart-footer__total .restaurant-cart-footer__info-description {
    color: #3f3e3e; }

.restaurant-cart-footer__loading {
  text-align: center;
  margin: 20px 0; }

.restaurant-cart-header {
  margin: 0 30px;
  padding: 20px 0; }
  .restaurant-cart-header__pretitle {
    color: #717171;
    font-weight: 300;
    font-size: 0.875rem; }
  .restaurant-cart-header__title {
    margin: 8px 0 0 0;
    font-size: 1.375rem;
    font-weight: 500; }
  .restaurant-cart-header__link {
    height: 25px;
    padding: 0;
    margin-top: 8px;
    font-size: 0.875rem; }
  .restaurant-cart-header__link .btn__label {
      text-align: left; }

.promotional-tag {
  color: #2e6788;
  display: flex;
  font-size: 0.75rem;
  font-weight: normal;
  margin: 5px 0; }
  .promotional-tag .icon-marmita {
    margin-right: 3px;
    width: 12px; }
  .promotional-tag .icon-marmita svg {
      color: #2e6788;
      fill: #2e6788; }

.address-invalid-dialog {
  padding: 20px;
  width: 400px; }
  .address-invalid-dialog__address, .address-invalid-dialog__text {
    font-size: 1.125rem;
    line-height: 1.375em; }
  .address-invalid-dialog__text {
    margin-top: 0;
    color: #a6a5a5;
    margin-left: 15px; }
  .address-invalid-dialog__title {
    font-size: 1.375rem;
    font-weight: 500;
    color: #595756; }
  .address-invalid-dialog__address {
    color: #595756;
    text-transform: capitalize; }
  @media only screen and (max-width: 767px) {
    .address-invalid-dialog {
      width: 100%; } }
  .address-invalid-wrapper {
  display: flex;
  align-items: flex-start; }
  .address-invalid-from__icon svg {
  color: #a6a5a5;
  fill: #a6a5a5; }
  .address-invalid-to__icon svg {
  color: #ffe115;
  fill: #ffe115; }
  .address-invalid-from__icon,
.address-invalid-to__icon {
  background: #fff;
  padding: 2px;
  width: 28px;
  height: 28px; }
  .address-invalid-from svg,
.address-invalid-to svg {
  width: 24px;
  height: 24px; }
  .address-invalid-from + .address-invalid-to .address-invalid-to__icon {
  position: relative;
  z-index: 0; }
  .address-invalid-from + .address-invalid-to .address-invalid-to__icon::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 35px;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    background: #f5e9da; }

.dish-quick-add__button {
  display: inline-block; }
  .dish-quick-add__button--hidden {
    display: none; }
  .dish-quick-add__counter {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  width: 0; }
  .dish-quick-add__counter--opened {
    width: 100px;
    visibility: visible;
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .dish-quick-add__counter .marmita-counter {
    background: #fff;
    border: 0.5px solid #f2f2f2;
    bottom: 16px;
    width: 100px;
    justify-content: space-evenly;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08); }

.restaurant-cart-item {
  font-size: 1rem;
  font-size: 500; }
  .restaurant-cart-item__description {
    margin: 0.5em 0;
    line-height: 1.4; }
  .restaurant-cart-item__description :last-child {
      font-weight: 500; }
  .restaurant-cart-item__garnish, .restaurant-cart-item__obs {
    font-size: 0.875rem;
    font-weight: 300;
    color: #717171;
    margin: 0.5em 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word; }
  .restaurant-cart-item__garnish > span:not(:first-child) {
    margin-left: 5px; }
  .restaurant-cart-item__buttons-wrapper {
    display: flex;
    align-items: center; }
  .restaurant-cart-item__buttons-wrapper .dish-quick-add {
      margin-left: auto; }
  .restaurant-cart-item__button {
    height: 100%;
    font-size: 0.875rem;
    padding: 0;
    width: 70px;
    margin-right: 10px; }
  .restaurant-cart-item__button .btn__label {
      text-align: left; }

.restaurant-cart-items-list {
  overflow-y: auto; }

@-webkit-keyframes sticky-display-progress {
  0% {
    max-height: 0;
    padding-top: 0; }
  100% {
    max-height: 50px;
    padding-top: 10px; } }

@keyframes sticky-display-progress {
  0% {
    max-height: 0;
    padding-top: 0; }
  100% {
    max-height: 50px;
    padding-top: 10px; } }

@-webkit-keyframes sticky-display-completed {
  0%, 90% {
    max-height: 50px;
    padding-top: 10px; }
  100% {
    max-height: 0;
    padding-top: 0; } }

@keyframes sticky-display-completed {
  0%, 90% {
    max-height: 50px;
    padding-top: 10px; }
  100% {
    max-height: 0;
    padding-top: 0; } }

.delivery-discount-with-min-order {
  padding: 12px 0;
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1rem;
  position: relative; }

@media only screen and (max-width: 959px) {
    .delivery-discount-with-min-order {
      margin-top: 10px; }
      .delivery-discount-with-min-order::before {
        content: '';
        width: calc(100% - 40px);
        height: 0;
        display: block;
        background: transparent;
        position: absolute;
        left: 20px;
        top: 0;
        border-top: 1px solid #f5f0eb; }
      .delivery-discount-with-min-order:before {
        width: 100%;
        left: 0; } }

@media only screen and (min-width: 960px) {
    .delivery-discount-with-min-order {
      padding: 36px 32px 32px 32px;
      background-color: #f7f7f7;
      font-weight: 300;
      font-size: 1rem;
      line-height: 1.25rem; } }

.delivery-discount-with-min-order .icon-marmita {
    display: none; }

.delivery-discount-with-min-order strong {
    color: #2e6788; }

.delivery-discount-with-min-order__progress {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background-color: #dcdcdc;
    position: relative; }

@media only screen and (min-width: 960px) {
      .delivery-discount-with-min-order__progress {
        height: 5px;
        border-radius: 5px; } }

.delivery-discount-with-min-order__progress-value {
    position: absolute;
    height: 3px;
    border-radius: 3px;
    background-color: #2e6788;
    transition: all 300ms ease;
    width: 0; }

@media only screen and (min-width: 960px) {
      .delivery-discount-with-min-order__progress-value {
        height: 5px;
        border-radius: 5px; } }

.delivery-discount-with-min-order__message {
    text-align: center;
    height: 1rem;
    margin-bottom: 8px;
    overflow: hidden;
    color: #717171; }

@media only screen and (min-width: 960px) {
      .delivery-discount-with-min-order__message {
        text-align: left;
        height: 1.25rem;
        margin-bottom: 12px; } }

.delivery-discount-with-min-order__message p {
      margin: 0;
      overflow: hidden;
      transition: all 300ms ease; }

.delivery-discount-with-min-order__message > :first-child {
      max-height: 9000px;
      opacity: 1;
      visibility: visible; }

.delivery-discount-with-min-order__message > :last-child {
      max-height: 0;
      opacity: 0;
      visibility: hidden; }

.delivery-discount-with-min-order__message--completed > :first-child {
    max-height: 0;
    opacity: 0;
    visibility: hidden; }

.delivery-discount-with-min-order__message--completed > :last-child {
    max-height: 9000px;
    opacity: 1;
    visibility: visible; }

.delivery-discount-with-min-order--completed strong {
    color: #50a773; }

.delivery-discount-with-min-order--completed .delivery-discount-with-min-order__progress-value {
    background-color: #50a773; }

.delivery-discount-with-min-order--description-only {
    background-color: #f7f7f7;
    padding: 10px 14px;
    border-radius: 4px;
    margin: 0 0 10px 0; }

.delivery-discount-with-min-order--description-only:before {
      display: none; }

.delivery-discount-with-min-order--menu {
    background-color: #f7f7f7;
    padding: 10px 14px;
    border-radius: 4px;
    margin: 0 0 10px 0; }

.delivery-discount-with-min-order--menu p {
      text-align: left; }

.delivery-discount-with-min-order--menu .icon-marmita {
      display: inline-flex;
      height: 11.5px;
      width: 11.5px;
      -webkit-transform: translateY(2px);
              transform: translateY(2px);
      margin-right: 8px; }

.delivery-discount-with-min-order--menu .icon-marmita svg {
        color: #2e6788;
        fill: #2e6788; }

@media only screen and (min-width: 960px) {
      .delivery-discount-with-min-order--menu {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content; } }

.delivery-discount-with-min-order--menu:before {
      display: none; }

.delivery-discount-with-min-order--sticky {
    display: none;
    overflow: hidden;
    margin: 0;
    max-height: 0;
    padding: 0; }

.delivery-discount-with-min-order--sticky p {
      margin: 0 14px;
      text-align: center; }

.delivery-discount-with-min-order--is-sticky {
    display: block;
    -webkit-animation: sticky-display-progress 200ms linear 250ms forwards;
            animation: sticky-display-progress 200ms linear 250ms forwards; }

.delivery-discount-with-min-order--completed-sticky {
    display: block;
    max-height: 50px;
    padding-top: 10px;
    -webkit-animation: sticky-display-completed 2000ms linear 250ms forwards;
            animation: sticky-display-completed 2000ms linear 250ms forwards; }

.delivery-discount-with-min-order__min-order-description {
    display: flex;
    flex-direction: row; }

.delivery-discount-with-min-order__min-order-description p {
      margin: 0; }

.delivery-discount-with-min-order__min-order-description strong {
      color: #2e6788; }

.delivery-discount-with-min-order__min-order-description .icon-marmita {
      display: inline-flex;
      height: 11.5px;
      width: 11.5px;
      -webkit-transform: translateY(2px);
              transform: translateY(2px);
      margin-right: 8px; }

.delivery-discount-with-min-order__min-order-description .icon-marmita svg {
        color: #2e6788;
        fill: #2e6788; }

.experimental-feature::before {
  content: 'EF';
  width: 12px;
  font-size: 9px;
  color: #fff;
  background: #f90;
  position: absolute;
  padding: 5px 10px 3px;
  border-radius: 10px;
  text-transform: uppercase;
  transition: 0.4s;
  z-index: 99999999;
  white-space: nowrap; }

.experimental-feature:hover::before {
  content: 'experimental feature';
  width: 114px; }

.experimental-feature + * {
  border: 1px solid #f7990257;
  border-radius: 5px; }

.voucher-animation > svg {
  width: 40px;
  height: 40px; }

.checkout-voucher {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  align-items: center;
  height: 80px;
  margin: 0 20px;
  line-height: 16px;
  border-top: 1px solid #dcdcdc;
  cursor: pointer; }
  @media only screen and (min-width: 960px) {
    .checkout-voucher {
      border-bottom: none;
      margin: 0 30px; } }
  .checkout-voucher__voucher-icon {
    width: 34px;
    height: 34px; }
  .checkout-voucher__description {
    display: flex;
    flex-direction: column;
    margin-left: 12px; }
  .checkout-voucher__title {
    font-size: 1rem;
    color: #3e3e3e;
    margin: 0 0 4px 0; }
  .checkout-voucher__subtitle {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 100;
    line-height: 1.25rem;
    color: #717171; }
  .checkout-voucher__icon-wrapper {
    position: relative; }
  .checkout-voucher__icon-wrapper .icon-marmita svg {
      width: 40px;
      height: 40px; }
  .checkout-voucher__chevron-icon {
    display: flex;
    width: 100%;
    height: 100%;
    stroke: #ffe115;
    stroke-width: 2px;
    justify-content: flex-end;
    align-items: center; }
  .checkout-voucher__chevron-icon svg {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
      width: 12px; }
  .checkout-voucher__chevron-icon path {
      fill: #ffe115; }
  .checkout-voucher__animated-icon {
    position: absolute;
    opacity: 1;
    top: -22px; }

.voucher-guide {
  background-color: #f7f7f7;
  border-radius: 0 0 4px 4px;
  padding: 12px;
  margin: 0 20px;
  display: grid;
  grid-template-areas: 'title action' 'progress action';
  grid-template-columns: 1fr -webkit-min-content;
  grid-template-columns: 1fr min-content;
  grid-gap: 5px 16px; }
  @media only screen and (min-width: 960px) {
    .voucher-guide {
      margin: 0 30px 18px; } }
  .voucher-guide__content-title {
    display: grid;
    align-items: center;
    grid-template: 1fr / 1fr 70px;
    grid-auto-columns: auto;
    grid-auto-flow: column dense;
    padding: 0 0 6px; }
  .voucher-guide__title {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #717171;
    grid-area: title; }
  .voucher-guide__complete-order {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #ffe115;
    text-decoration: none;
    text-align: right;
    grid-area: action;
    align-self: center; }
  .voucher-guide__progress {
    grid-area: progress;
    width: 100%; }

@-webkit-keyframes z-1-movement {
  0% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px); }
  50% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px); }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px); } }

@keyframes z-1-movement {
  0% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px); }
  50% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px); }
  100% {
    -webkit-transform: translate(0, 0px);
            transform: translate(0, 0px); } }

@-webkit-keyframes z-2-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(5px, 10px);
            transform: translate(5px, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes z-2-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(5px, 10px);
            transform: translate(5px, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@-webkit-keyframes z-3-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(-5px, 12px);
            transform: translate(-5px, 12px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes z-3-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(-5px, 12px);
            transform: translate(-5px, 12px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.restaurant-cart {
  display: flex;
  flex-flow: nowrap column;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 430px;
  background-color: #fff;
  color: #3f3e3e; }

@media only screen and (min-width: 1248px) {
    .restaurant-cart {
      width: 430px; } }

.restaurant-cart__warning {
    background-color: #f7f7f7;
    color: #4d4d4d;
    padding: 30px;
    font-weight: 300;
    line-height: 1.4; }

.restaurant-cart__line {
    border-top: #dcdcdc solid 1px;
    margin: 0 30px;
    padding: 12px 0 16px; }

.restaurant-cart__justify {
    display: flex;
    flex-flow: row nowrap; }

.restaurant-cart__justify > * {
      flex-grow: 1; }

.restaurant-cart__justify > :last-child {
      min-width: 80px;
      text-align: right; }

.restaurant-cart__loading, .restaurant-cart__empty {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    text-align: center;
    height: 100%; }

.restaurant-cart__empty {
    color: #dcdcdc; }

.restaurant-cart__empty .restaurant-card-empty-icon {
      height: 270px;
      width: auto;
      margin: 0 auto 32px auto; }

.restaurant-cart__empty .restaurant-cart__empty--large {
      font-size: 1rem;
      color: #3e3e3e;
      font-weight: 500; }

.restaurant-cart__empty .restaurant-cart__empty--small {
      font-size: 0.875rem;
      font-weight: 400;
      color: #717171;
      margin: 10px 0 0 0; }

.restaurant-cart__empty .animated-svg .z-1 {
      -webkit-transform-origin: top center;
              transform-origin: top center;
      -webkit-animation: z-1-movement 4.5s infinite;
              animation: z-1-movement 4.5s infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out; }

.restaurant-cart__empty .animated-svg .z-2 {
      -webkit-transform-origin: bottom center;
              transform-origin: bottom center;
      -webkit-animation: z-2-movement 6s infinite;
              animation: z-2-movement 6s infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out; }

.restaurant-cart__empty .animated-svg .z-3 {
      -webkit-transform-origin: bottom center;
              transform-origin: bottom center;
      -webkit-animation: z-3-movement 5s infinite;
              animation: z-3-movement 5s infinite;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out; }

.restaurant-cart .restaurant-cart-items-list {
    max-height: 60vh; }

.placeholder-order-card {
  border-bottom: 2px solid #f6f5f5;
  padding: 20px 0;
  display: grid;
  align-items: flex-start;
  justify-content: center;
  grid-template: 1fr / 70px 1fr;
  margin: 0 0 20px; }
  .placeholder-order-card-wrapper {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 20px;
    margin: 0 0 20px; }
  @media only screen and (max-width: 959px) {
    .placeholder-order-card:first-child {
      padding: 0 0 20px; } }
  .placeholder-order-card__restaurant-name {
    height: 10px; }
  .placeholder-order-card__order-details {
    margin: 10px 0;
    height: 20px; }
  .placeholder-order-card__order-status {
    margin: 10px 0; }
  .placeholder-order-card__follow-order {
    height: 20px; }
  .placeholder-order-card__date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 50px;
    height: 48px;
    padding: 5px;
    background-color: #f2f2f2;
    border-radius: 4px; }

.goback {
  background-color: transparent;
  border: none;
  color: #a6a6a6;
  cursor: pointer;
  font-size: 1rem;
  padding: 0; }
  .goback__icon {
    width: 20px;
    fill: #a6a6a6;
    vertical-align: middle;
    margin-right: 4px; }

.notification-overlay {
  background: rgba(0, 0, 0, 0.7);
  color: #fff; }
  .notification-overlay .marmita-modal__inner-content {
    display: none;
    max-width: 500px; }
  @media only screen and (min-width: 960px) {
      .notification-overlay .marmita-modal__inner-content {
        display: block; } }
  .notification-overlay__title {
    font-size: 1.875rem; }
  .notification-overlay__subtitle {
    font-size: 1.25rem;
    font-weight: 100; }

.placeholder-order-details-wrapper {
  width: 100%;
  padding: 0 20px; }
  .placeholder-order-details-wrapper .goback {
    display: none; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details-wrapper {
      margin: 20px auto;
      width: 470px;
      padding-top: 40px; }
      .placeholder-order-details-wrapper .goback {
        display: block; } }
  .placeholder-order-details__order-title {
  height: 16px;
  margin: 14px 0 8px 0;
  width: 60%; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__order-title {
      height: 40px;
      margin: 10px 0; } }
  .placeholder-order-details__see-menu {
  width: 25%;
  height: 16px;
  margin-bottom: 36px;
  display: none; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__see-menu {
      display: block; } }
  .placeholder-order-details__order-delivery {
  width: 85%;
  height: 16px;
  margin-bottom: 10px; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__order-delivery {
      width: 35%; } }
  .placeholder-order-details__order-delivery--date {
    width: 40%;
    display: none; }
  @media only screen and (min-width: 960px) {
      .placeholder-order-details__order-delivery--date {
        display: block; } }
  .placeholder-order-details__items-container {
  border-bottom: 1px solid rgba(196, 196, 196, 0.2);
  border-top: 1px solid rgba(196, 196, 196, 0.2);
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__items-container {
      padding: 25px 0;
      border-bottom: 1px solid #c4c4c4;
      border-top: 1px solid #c4c4c4; } }
  .placeholder-order-details__items-description {
  width: 60%;
  height: 16px; }
  .placeholder-order-details__items-value {
  width: 15%;
  height: 16px; }
  .placeholder-order-details__pricing-wrapper {
  padding: 10px 0;
  border-bottom: 0;
  margin-bottom: 25px; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__pricing-wrapper {
      padding: 15px 0;
      border-bottom: 1px solid rgba(196, 196, 196, 0.2); } }
  .placeholder-order-details__pricing-container {
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row; }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__pricing-container {
      padding: 10px 0; } }
  .placeholder-order-details__pricing-subtotal-title {
  width: 20%;
  height: 16px; }
  .placeholder-order-details__pricing-subtotal-value {
  width: 18%;
  height: 16px; }
  .placeholder-order-details__pricing-delivery-title {
  width: 25%;
  height: 16px; }
  .placeholder-order-details__pricing-delivery-value {
  width: 15%;
  height: 16px; }
  .placeholder-order-details__pricing-total-title {
  width: 12%;
  height: 16px; }
  .placeholder-order-details__pricing-total-value {
  width: 20%;
  height: 16px; }
  .placeholder-order-details__info-container {
  padding: 20px;
  border-top: 10px solid rgba(196, 196, 196, 0.2);
  width: 100vw;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px); }
  @media only screen and (min-width: 960px) {
    .placeholder-order-details__info-container {
      border: none;
      padding: 0;
      margin-bottom: 25px;
      width: 100%;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  .placeholder-order-details__info-delivery-title {
  width: 25%;
  height: 16px;
  margin-bottom: 8px; }
  .placeholder-order-details__info-delivery-value {
  width: 70%;
  height: 16px; }
  .placeholder-order-details__info-order-title {
  width: 20%;
  height: 16px;
  margin-bottom: 8px; }
  .placeholder-order-details__info-order-value {
  width: 12%;
  height: 16px; }
  .placeholder-order-details__info-date-title {
  width: 25%;
  height: 16px;
  margin-bottom: 8px; }
  .placeholder-order-details__info-date-value {
  width: 35%;
  height: 16px; }
  .placeholder-order-details__info-payment-title {
  width: 30%;
  height: 16px;
  margin-bottom: 8px; }
  .placeholder-order-details__info-payment-value {
  width: 25%;
  height: 16px; }
  .placeholder-order-details__follow-container {
  padding: 20px 0;
  border-top: 1px solid rgba(196, 196, 196, 0.2);
  margin-top: 25px; }
  .placeholder-order-details__follow-button {
  height: 50px; }

.notification-permission {
  display: grid;
  min-width: 320px;
  grid-template-columns: 42px 1fr;
  padding: 12px 0 11px 24px;
  position: relative;
  border: 1px solid #f7f7f7;
  overflow: hidden;
  height: 110px;
  opacity: 1;
  transition: all 300ms ease-out; }
  @media only screen and (min-width: 960px) {
    .notification-permission {
      max-width: 345px; } }
  .notification-permission--gray {
    background-color: #f7f7f7; }
  .notification-permission--hidden {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    opacity: 0.5; }
  .notification-permission__illustration {
    overflow: visible;
    align-self: center; }
  .notification-permission-center {
    display: grid;
    margin: 0 13px 0 15px; }
  .notification-permission-center__title {
      font-size: 0.875rem;
      margin-bottom: 10px;
      font-weight: 500;
      color: #3e3e3e; }
  .notification-permission-center__subtitle {
      font-size: 0.75rem;
      margin-bottom: 12px;
      color: #717171; }
  .notification-permission-center__button {
      font-size: 0.875rem;
      color: #ffe115; }
  .notification-permission-center__button.btn {
        width: 40px;
        height: 20px; }
  .notification-permission__close-button {
    display: block;
    width: 15px;
    height: 15px;
    padding: 0;
    top: 10px;
    right: 10px;
    position: absolute; }
  .notification-permission__close-button.btn.btn--iconize .icon-marmita.btn__icon {
      width: 15px;
      height: 15px; }
  .notification-permission__close-button.btn.btn--iconize .icon-marmita svg {
      fill: #a6a6a6;
      stroke: #a6a6a6;
      stroke-width: 2; }
  .notification-permission .phone-chat-ballon__ballon {
    -webkit-animation: phone-chat-ballon-animation 2s infinite linear alternate;
            animation: phone-chat-ballon-animation 2s infinite linear alternate;
    -webkit-transform-origin: center;
            transform-origin: center; }
  .notification-permission .phone-chat-ballon__ifood {
    -webkit-animation: phone-chat-ballon-ifood-animation 2s infinite linear alternate;
            animation: phone-chat-ballon-ifood-animation 2s infinite linear alternate;
    -webkit-transform-origin: center;
            transform-origin: center; }
  .notification-permission .phone-chat-ballon__alert {
    -webkit-animation: phone-chat-ballon-alert-animation 2s infinite linear alternate;
            animation: phone-chat-ballon-alert-animation 2s infinite linear alternate;
    -webkit-transform-origin: center;
            transform-origin: center; }
  @-webkit-keyframes phone-chat-ballon-ifood-animation {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(-2px, -1px);
            transform: translate(-2px, -1px); } }
  @keyframes phone-chat-ballon-ifood-animation {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(-2px, -1px);
            transform: translate(-2px, -1px); } }
  @-webkit-keyframes phone-chat-ballon-animation {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  100% {
    -webkit-transform: translate(-1px, -1px) rotate(-3deg);
            transform: translate(-1px, -1px) rotate(-3deg); } }
  @keyframes phone-chat-ballon-animation {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  100% {
    -webkit-transform: translate(-1px, -1px) rotate(-3deg);
            transform: translate(-1px, -1px) rotate(-3deg); } }
  @-webkit-keyframes phone-chat-ballon-alert-animation {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  100% {
    -webkit-transform: translate(-2px, -2px) rotate(0);
            transform: translate(-2px, -2px) rotate(0); } }
  @keyframes phone-chat-ballon-alert-animation {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0); }
  100% {
    -webkit-transform: translate(-2px, -2px) rotate(0);
            transform: translate(-2px, -2px) rotate(0); } }

.search-placeholder__tab {
  height: 50px; }

.search-placeholder__restaurants {
  display: block; }

@media only screen and (min-width: 768px) {
    .search-placeholder__restaurants {
      display: grid;
      grid-template: 1fr / 1fr 1fr 1fr;
      grid-gap: 20px; } }

.user-menu-items {
  min-width: 320px; }
  @media only screen and (min-width: 960px) {
    .user-menu-items {
      padding: 0 0 40px 0; } }
  .user-menu-items__name {
    font-weight: 500;
    font-size: 1.5625rem;
    line-height: 31px;
    letter-spacing: -1px;
    padding: 30px 40px 20px; }
  .user-menu-items__notification .notification-permission {
    margin: 0 auto; }
  @media only screen and (min-width: 375px) and (max-width: 960px) {
    .user-menu-items__notification {
      padding: 12px 20px; } }

.placeholder-online-payment-list {
  display: grid;
  grid-row-gap: 16px;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
  margin-top: 60px; }
  .placeholder-online-payment-list__card {
    grid-template-columns: 24px 1fr 22px;
    padding: 14px 20px;
    display: grid;
    grid-gap: 34px;
    align-items: center; }
  .placeholder-online-payment-list__card .card-brand {
      height: 15px;
      padding: 0; }
  .placeholder-online-payment-list__card .info {
      display: grid;
      grid-template-rows: repeat(2, 18px);
      grid-gap: 5px; }
  .placeholder-online-payment-list .cta {
    display: none; }
  @media only screen and (min-width: 1248px) {
    .placeholder-online-payment-list {
      margin-top: 0; }
      .placeholder-online-payment-list__card {
        padding: 32px;
        grid-template-columns: 40px 1fr 82px; }
        .placeholder-online-payment-list__card .card-brand {
          height: 33px; }
        .placeholder-online-payment-list__card .info {
          grid-template-rows: repeat(2, 27.5px); }
      .placeholder-online-payment-list .cta {
        display: initial;
        height: 50px;
        width: 100%; } }

.floating-box {
  position: relative; }
  .floating-box::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 11px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: none; }
  .floating-box__wrapper {
    visibility: hidden;
    min-width: 322px;
    background: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    position: absolute;
    z-index: 0;
    opacity: 0;
    padding: 0;
    right: auto;
    pointer-events: none; }
  .floating-box__wrapper.floating-box__wrapper--left {
      left: 0;
      -webkit-transform: translateY(-5px);
              transform: translateY(-5px); }
  .floating-box__wrapper.floating-box__wrapper--right {
      right: 0; }
  .floating-box__wrapper.floating-box__wrapper--visible {
      transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
      z-index: 9994;
      pointer-events: initial; }
  .floating-box__button {
    background: none;
    border: none;
    font-size: 1rem;
    color: #3e3e3e;
    font-weight: 300;
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
    align-items: center;
    cursor: pointer;
    border-radius: 4px; }
  .floating-box__button--has-notifications {
      position: absolute;
      left: 12px;
      top: -5px; }
  .floating-box__button:hover {
      color: #ffe115; }
  .floating-box__button:hover .icon-marmita {
        margin: 0 5px 0 0; }
  .floating-box__button:hover .icon-marmita svg {
          color: #ffe115;
          fill: #ffe115; }
  .floating-box__button .icon-marmita {
      width: 20px;
      margin: 0 5px 0 0;
      height: 23px; }
  .floating-box__button .icon-marmita svg {
        color: #3e3e3e;
        fill: #3e3e3e; }

.placeholder-offline-payment-list {
  display: grid;
  padding: 0 16px;
  margin-top: 66px;
  grid-auto-flow: row;
  grid-gap: 16px; }
  .placeholder-offline-payment-list__option {
    height: 54px;
    min-width: 100px;
    width: 100%; }
  @media only screen and (min-width: 960px) {
    .placeholder-offline-payment-list {
      grid-gap: 20px;
      grid-template-columns: 1fr 1fr;
      grid-auto-flow: initial;
      padding: 0;
      margin-top: 0; }
      .placeholder-offline-payment-list__option {
        height: 57.5px; } }

.header-cart {
  display: flex;
  align-items: center;
  position: relative; }
  .header-cart__icon {
    margin: 0 5px 0 0; }
  .header-cart__ammount {
    position: absolute;
    left: 10px;
    top: 13px;
    border-radius: 100%;
    height: 17px;
    width: 19px;
    background: #ffe115;
    color: #fff;
    border: 2px solid #fff;
    font-size: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center; }
  .header-cart__label--wide {
    position: relative;
    top: 1px; }
  .header-cart--has-items {
    color: #ffe115; }
  .header-cart--has-items .header-cart__icon svg {
      fill: #ffe115; }

.placeholder-online-payment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
  grid-row-gap: 33px;
  grid-column-gap: 10px;
  margin: 24px 20px 30px; }
  .placeholder-online-payment__input {
    display: grid;
    height: 48.19px; }
  .placeholder-online-payment__input--small {
      margin-bottom: 50px; }
  .placeholder-online-payment__input--full {
      grid-column-start: 1;
      grid-column-end: 3; }
  @media only screen and (min-width: 960px) {
    .placeholder-online-payment {
      grid-column-gap: 10px;
      grid-row-gap: 31.3px;
      margin: 9px 0 30.33px; }
      .placeholder-online-payment__input {
        height: 40px; }
        .placeholder-online-payment__input--small {
          margin-bottom: 0; } }

.responsive-header {
  display: none;
  position: -webkit-sticky;
  position: sticky;
  flex-direction: column;
  width: 100vw;
  height: 80px;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #dcdcdc;
  top: 0;
  z-index: 9997;
  padding: 0; }
  .responsive-header--static {
    position: relative; }
  @media only screen and (min-width: 960px) {
    .responsive-header {
      display: flex; } }
  .responsive-header__container {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    max-width: 1366px !important;
    margin: auto;
    padding: 0 30px; }
  @media only screen and (min-width: 960px) {
      .responsive-header__container {
        padding: 0 20px 0 30px; } }
  .responsive-header__logo {
    display: flex;
    align-items: center;
    cursor: pointer; }
  .responsive-header__logo .btn-icon {
      border-radius: 0;
      width: 87px;
      height: 66px; }
  .responsive-header__logo .btn-icon .icon-marmita {
        width: 100%;
        height: 100%; }
  .responsive-header__logo .btn-icon .icon-marmita svg {
          color: #ffe115;
          fill: #ffe115; }
  .responsive-header .btn.btn--link svg {
    color: #3e3e3e;
    fill: #3e3e3e; }
  .responsive-header .btn.btn--link:hover [class*='__label'] {
    color: #ffe115; }
  .responsive-header .btn.btn--link:hover svg {
    color: #ffe115;
    fill: #ffe115; }
  .responsive-header .btn.btn--iconize .btn__icon {
    border-radius: 0;
    width: 23px;
    height: 23px; }
  .responsive-header__button {
    width: inherit;
    padding: 0;
    min-width: 50px;
    cursor: pointer;
    display: flex; }
  .responsive-header__button .icon-marmita {
      width: 25px;
      height: 25px;
      margin: 0 5px 0 0; }
  .responsive-header__button .btn__label {
      display: none;
      font-size: 1rem;
      margin-left: 3px;
      color: #3e3e3e;
      font-weight: 300; }
  @media only screen and (min-width: 1248px) {
        .responsive-header__button .btn__label {
          display: flex; } }
  .responsive-header__button .floating-box__label {
      display: none; }
  @media only screen and (min-width: 1248px) {
        .responsive-header__button .floating-box__label {
          display: block; } }
  .responsive-header .header-cart__label--wide {
    display: none; }
  @media only screen and (min-width: 1248px) {
      .responsive-header .header-cart__label--wide {
        display: flex; } }
  .responsive-header__bag ~ .floating-box__wrapper .restaurant-cart {
    max-height: 80vh; }
  .responsive-header__bag ~ .floating-box__wrapper .restaurant-cart__empty {
      padding: 40px 0; }
  .responsive-header__wrapper-links {
    display: flex;
    flex-direction: row;
    align-items: center; }
  @media only screen and (min-width: 1248px) {
      .responsive-header__wrapper-links > * {
        margin: 0 0 0 20px; } }

.form-input {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 4px 0;
  margin: 5px 0 5px;
  z-index: 0;
  min-height: 73px; }
  .form-input .form-input__label.form-input__label--has-value .label__name, .form-input .form-input__field:focus + .label__name {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    font-size: 1rem; }
  @media only screen and (min-width: 960px) {
      .form-input .form-input__label.form-input__label--has-value .label__name, .form-input .form-input__field:focus + .label__name {
        font-size: 0.875rem;
        -webkit-transform: translateY(-23px);
                transform: translateY(-23px);
        background: #fff;
        z-index: 1;
        padding: 5px; } }
  .form-input .form-input__label {
    background: transparent;
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: column;
    color: #a6a6a6;
    position: relative; }
  @media only screen and (min-width: 960px) {
      .form-input .form-input__label {
        padding: 0; } }
  .form-input .form-input__label .label__name {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 20px;
      margin: auto;
      display: flex;
      align-items: center;
      -webkit-transform: translateY(7px);
              transform: translateY(7px);
      transition: 200ms;
      font-size: 1.375rem; }
  @media only screen and (min-width: 960px) {
        .form-input .form-input__label .label__name {
          font-size: 1rem;
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          left: 21px; } }
  .form-input .form-input__label .field__border {
      transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
      height: 2px;
      width: 0;
      margin: auto;
      display: block;
      background: #dcdcdc;
      position: relative;
      top: -2px;
      z-index: 1; }
  @media only screen and (min-width: 960px) {
        .form-input .form-input__label .field__border {
          display: none; } }
  .form-input .form-input__field {
    border: none;
    color: #3e3e3e;
    background: transparent;
    height: 40px;
    font-weight: 500;
    outline: none;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    z-index: 1;
    width: 100%;
    font-size: 1.375rem; }
  @media only screen and (min-width: 960px) {
      .form-input .form-input__field {
        font-size: 1rem;
        border-radius: 4px;
        border: 1px solid #dcdcdc;
        padding: 13px 20px;
        height: auto;
        line-height: 20px; } }
  .form-input .form-input__field:focus + .label__name + .field__border {
      width: 100%; }
  .form-input .form-input__field:-webkit-autofill {
      box-shadow: 0 30px 0 0 transparent inset; }
  .form-input .form-input__field[disabled] {
    opacity: 0.4; }
  .form-input .form-input__error {
    font-size: 0.75rem;
    margin: 4px 0 0 0;
    color: #b42b2b; }
  .form-input.form-input--invalid .form-input__field {
    border-color: #b42b2b; }
  .form-input.form-input--invalid .field__border {
    background: #b42b2b; }
  .form-input.form-input--tertiary .form-input__field {
    border-color: #fed298;
    color: #fff; }
  .form-input.form-input--tertiary .field__border {
    background: #fed298; }
  .form-input.form-input--tertiary .form-input__label {
    color: #fed298; }
  .form-input.form-input--tertiary .form-input__error {
    color: #fff; }
  .form-input.form-input--tertiary.form-input--invalid .form-input__field {
    border-color: #fff; }
  .form-input.form-input--tertiary.form-input--invalid .field__border {
    background: #fff; }
  .form-input__help-text {
    color: #717171;
    font-size: 11px;
    margin-top: 5px; }

.form-input-without-border {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 4px 0 8px;
  z-index: 0;
  width: 80%;
  margin: 5px auto 16px; }
  .form-input-without-border .form-input-without-border__label.form-input-without-border__label--has-value .label__name, .form-input-without-border .form-input-without-border__field:focus + .label__name {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
    font-size: 1rem; }
  @media only screen and (min-width: 960px) {
      .form-input-without-border .form-input-without-border__label.form-input-without-border__label--has-value .label__name, .form-input-without-border .form-input-without-border__field:focus + .label__name {
        font-size: 0.875rem;
        -webkit-transform: translateY(-23px);
                transform: translateY(-23px);
        background: #fff;
        z-index: 1;
        padding: 5px; } }
  @media only screen and (max-width: 767px) {
    .form-input-without-border {
      width: 100%; } }
  .form-input-without-border .form-input-without-border__label {
    background: transparent;
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: column;
    color: #a6a6a6;
    position: relative; }
  @media only screen and (min-width: 960px) {
      .form-input-without-border .form-input-without-border__label {
        padding: 0; } }
  .form-input-without-border .form-input-without-border__label .label__name {
      display: none; }
  .form-input-without-border .form-input-without-border__label .field__border {
      transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
      height: 2px;
      width: 0;
      margin: auto;
      display: block;
      background: #dcdcdc;
      position: relative;
      top: -2px;
      z-index: 1; }
  @media only screen and (min-width: 960px) {
        .form-input-without-border .form-input-without-border__label .field__border {
          display: none; } }
  .form-input-without-border__field {
    border: 0;
    letter-spacing: 20px;
    font-size: 40px;
    text-align: center;
    color: #3e3e3e;
    background: transparent;
    font-weight: 500;
    outline: none;
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 5px 20px;
    line-height: 1;
    border-bottom: 1px solid #f5f0eb; }
  .form-input-without-border__field:focus + .label__name + .field__border {
      width: 100%; }
  @media only screen and (max-width: 767px) {
      .form-input-without-border__field {
        height: 70px;
        font-size: 32px; } }
  .form-input-without-border__field:focus + .form-input-without-border__erase-button {
      transition: visibility;
      transition-delay: 50ms;
      visibility: visible; }
  .form-input-without-border__field:-webkit-autofill {
      box-shadow: 0 30px 0 0 transparent inset; }
  .form-input-without-border .form-input-without-border__field[disabled] {
    opacity: 0.4; }
  .form-input-without-border .form-input-without-border__error {
    font-size: 0.75rem;
    margin: 4px 0 0 0;
    color: #b42b2b; }
  .form-input-without-border.form-input-without-border--invalid .form-input-without-border__field {
    border-color: #b42b2b; }
  .form-input-without-border.form-input-without-border--invalid .field__border {
    background: #b42b2b; }
  .form-input-without-border.form-input-without-border--tertiary .form-input-without-border__field {
    border-color: #fed298;
    color: #fff; }
  .form-input-without-border.form-input-without-border--tertiary .field__border {
    background: #fed298; }
  .form-input-without-border.form-input-without-border--tertiary .form-input-without-border__label {
    color: #fed298; }
  .form-input-without-border.form-input-without-border--tertiary .form-input-without-border__error {
    color: #fff; }
  .form-input-without-border.form-input-without-border--tertiary.form-input-without-border--invalid .form-input-without-border__field {
    border-color: #fff; }
  .form-input-without-border.form-input-without-border--tertiary.form-input-without-border--invalid .field__border {
    background: #fff; }
  .form-input-without-border__erase-button {
    position: absolute;
    right: -20px;
    margin-top: -5px;
    transition: visibility;
    transition-delay: 50ms;
    visibility: hidden; }
  @media only screen and (min-width: 960px) {
      .form-input-without-border__erase-button {
        right: 0;
        margin-top: 3px;
        cursor: pointer; } }
  .form-input-without-border__erase-button .icon-marmita {
      width: 25px; }
  .form-input-without-border__erase-button .icon-marmita svg {
        color: #fed298;
        fill: #fed298; }

.native-select {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 4px 0;
  margin: 5px 0 10px; }
  .native-select .native-select__label.native-select__label--has-value .label__name, .native-select .native-select__label .is-focused + .label__name {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
    font-size: 0.875rem; }
  @media only screen and (min-width: 960px) {
      .native-select .native-select__label.native-select__label--has-value .label__name, .native-select .native-select__label .is-focused + .label__name {
        -webkit-transform: translateY(-20px);
                transform: translateY(-20px); } }
  .native-select .native-select__field {
    background-color: white;
    height: 40px;
    border: none;
    border-bottom: 1px solid lightgray;
    font-weight: 500;
    font-size: 1.375rem;
    color: #3e3e3e;
    width: 100%; }
  @media only screen and (min-width: 960px) {
      .native-select .native-select__field {
        font-size: 1rem;
        border-radius: 4px;
        border: 1px solid #dcdcdc;
        padding: 13px 20px;
        height: 48px; } }
  .native-select.native-select--invalid .native-select__field {
    border-bottom: 1px solid #b42b2b; }
  @media only screen and (min-width: 960px) {
      .native-select.native-select--invalid .native-select__field {
        border-color: #b42b2b; } }
  .native-select.native-select--invalid .label__name {
    color: #b42b2b; }
  .native-select.native-select--tertiary .native-select__label {
    color: #fed298; }
  .native-select.native-select--tertiary .Select-input {
    color: #fff; }
  .native-select .native-select__label {
    background: transparent;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    color: #a6a6a6;
    position: relative; }
  .native-select .native-select__label .label__name {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 20px;
      font-size: 1.375rem;
      margin: auto;
      display: flex;
      align-items: center;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      transition: 200ms; }
  @media only screen and (min-width: 960px) {
        .native-select .native-select__label .label__name {
          background: #fff;
          font-size: 1rem;
          left: 10px;
          padding: 0 13px; } }
  .native-select .native-select__error {
    font-size: 0.75rem;
    margin: 4px 0 0 0;
    color: #b42b2b; }

.marmita-checkbox {
  transition: all 100ms;
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
  width: 24px;
  height: 24px;
  background-color: transparent;
  z-index: 0; }
  .marmita-checkbox:hover {
    background-color: transparent; }
  .marmita-checkbox::before, .marmita-checkbox::after {
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: transparent;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 4px; }
  .marmita-checkbox::before {
    transition: border 100ms;
    z-index: -2;
    border-style: solid; }
  .marmita-checkbox::after {
    transition: all 100ms;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0); }
  .marmita-checkbox__input {
    cursor: inherit;
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0; }
  .marmita-checkbox__icon {
    transition: all 200ms;
    -webkit-transform: scale(0) translateY(3px);
            transform: scale(0) translateY(3px); }
  .marmita-checkbox__icon svg {
      width: 28px;
      height: 28px;
      display: inline-flex; }
  .marmita-checkbox--primary::before {
    transition-delay: 130ms;
    border: 2px solid #a6a5a5; }
  .marmita-checkbox--primary::after {
    background: #ffe115; }
  .marmita-checkbox--primary .marmita-checkbox__icon svg {
    color: #fff;
    fill: #fff; }
  .marmita-checkbox--tertiary::before {
    transition-delay: 130ms;
    border: 2px solid #fed298; }
  .marmita-checkbox--tertiary::after {
    background: #fed298; }
  .marmita-checkbox--tertiary .marmita-checkbox__icon svg {
    color: #ffe115;
    fill: #ffe115; }
  .marmita-checkbox--checked.marmita-checkbox--primary::before {
    transition-delay: 0;
    border-color: #a6a5a5; }
  .marmita-checkbox--checked.marmita-checkbox--primary::after {
    transition-delay: 200ms;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1); }
  .marmita-checkbox--checked.marmita-checkbox--tertiary {
    background: #fed298; }
  .marmita-checkbox--checked.marmita-checkbox--tertiary::before {
      transition-delay: 0;
      border-color: #fed298; }
  .marmita-checkbox--checked.marmita-checkbox--tertiary::after {
      transition-delay: 200ms;
      -webkit-transform: translate(-50%, -50%) scale(1);
              transform: translate(-50%, -50%) scale(1); }
  .marmita-checkbox--checked .marmita-checkbox__icon {
    transition-delay: 250ms;
    -webkit-transform: scale(1) translateY(3px);
            transform: scale(1) translateY(3px); }
  .marmita-checkbox--disabled {
    cursor: not-allowed;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    opacity: 0.4; }
  .marmita-checkbox--small {
    width: 20px;
    height: 20px; }
  .marmita-checkbox--small.marmita-checkbox--checked.marmita-checkbox--primary::before {
      border-width: 10px; }
  .marmita-checkbox--normal {
    width: 24px;
    height: 24px; }
  .marmita-checkbox--normal.marmita-checkbox--checked.marmita-checkbox--primary::before {
      border-width: 12px; }

.simple-checkbox {
  transition: all 100ms;
  border-radius: 5px;
  color: inherit;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
  width: 24px;
  height: 24px;
  background-color: transparent;
  z-index: 0; }
  .simple-checkbox:hover {
    background-color: transparent; }
  .simple-checkbox::before, .simple-checkbox::after {
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: transparent;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 4px; }
  .simple-checkbox::before {
    transition: border 100ms;
    z-index: -2;
    border-style: solid; }
  .simple-checkbox::after {
    transition: all 100ms;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0); }
  .simple-checkbox__input {
    cursor: inherit;
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0; }
  .simple-checkbox__icon {
    transition: all 200ms;
    -webkit-transform: scale(0) translateY(3px);
            transform: scale(0) translateY(3px); }
  .simple-checkbox__icon svg {
      width: 28px;
      height: 28px;
      display: inline-flex; }
  .simple-checkbox--primary::before {
    transition-delay: 130ms;
    border: 2px solid #a6a5a5; }
  .simple-checkbox--primary::after {
    background: #ffe115; }
  .simple-checkbox--primary .simple-checkbox__icon svg {
    color: #fff;
    fill: #fff; }
  .simple-checkbox--tertiary::before {
    transition-delay: 130ms;
    border: 2px solid #fed298; }
  .simple-checkbox--tertiary::after {
    background: #fed298; }
  .simple-checkbox--tertiary .simple-checkbox__icon svg {
    color: #ffe115;
    fill: #ffe115; }
  .simple-checkbox--checked.simple-checkbox--primary::before {
    transition-delay: 0;
    border-color: #a6a5a5; }
  .simple-checkbox--checked.simple-checkbox--primary::after {
    transition-delay: 200ms;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1); }
  .simple-checkbox--checked.simple-checkbox--tertiary {
    background: #fed298; }
  .simple-checkbox--checked.simple-checkbox--tertiary::before {
      transition-delay: 0;
      border-color: #fed298; }
  .simple-checkbox--checked.simple-checkbox--tertiary::after {
      transition-delay: 200ms;
      -webkit-transform: translate(-50%, -50%) scale(1);
              transform: translate(-50%, -50%) scale(1); }
  .simple-checkbox--checked .simple-checkbox__icon {
    transition-delay: 250ms;
    -webkit-transform: scale(1) translateY(3px);
            transform: scale(1) translateY(3px); }
  .simple-checkbox--disabled {
    cursor: not-allowed;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    opacity: 0.4; }
  .simple-checkbox--small {
    width: 20px;
    height: 20px; }
  .simple-checkbox--small.simple-checkbox--checked.simple-checkbox--primary::before {
      border-width: 10px; }
  .simple-checkbox--normal {
    width: 24px;
    height: 24px; }
  .simple-checkbox--normal.simple-checkbox--checked.simple-checkbox--primary::before {
      border-width: 12px; }

.marmita-radio {
  transition: all 100ms;
  color: inherit;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  padding: 0;
  outline: none;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
  width: 24px;
  height: 24px;
  background-color: transparent;
  z-index: 0; }
  .marmita-radio:hover {
    background-color: transparent; }
  .marmita-radio::before, .marmita-radio::after {
    box-sizing: border-box;
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: transparent;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 50%; }
  .marmita-radio__input {
    cursor: inherit;
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 2; }
  .marmita-radio::after {
    transition: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: hidden; }
  .marmita-radio--primary::before {
    z-index: 0;
    background: #f5f0eb; }
  .marmita-radio--primary::after {
    border: 0 solid #ffe115;
    background: transparent;
    z-index: 1; }
  .marmita-radio--checked::after {
    border-width: 6px;
    visibility: visible; }
  .marmita-radio--disabled {
    cursor: not-allowed;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
    opacity: 0.4; }
  .marmita-radio--small {
    width: 20px;
    height: 20px; }
  .marmita-radio--normal {
    width: 24px;
    height: 24px; }

.marmita-fullpage-select-list {
  min-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; }
  .marmita-fullpage-select-list__wrapper {
    height: 100%;
    overflow-y: scroll; }
  .marmita-fullpage-select-list__empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    word-break: break-all;
    padding: 0 20px 50px 20px;
    color: #fff;
    height: 100%; }
  .marmita-fullpage-select-list__empty__title {
      font-size: 0.9375rem;
      font-weight: 500;
      margin-bottom: 0; }
  .marmita-fullpage-select-list__empty__message {
      font-size: 0.75rem;
      margin-top: 0; }
  .marmita-fullpage-select-list__item {
    justify-content: flex-start;
    margin: 0; }
  .marmita-fullpage-select-list__item .btn__label {
      flex-grow: 0;
      color: #fed298;
      font-size: 1.25rem;
      font-weight: 500; }
  .marmita-fullpage-select-searcher {
  display: inline-flex;
  min-width: 100%;
  position: absolute;
  top: 0px;
  height: 50px;
  padding: 10px 20px 0;
  align-items: flex-end;
  background-color: #ffe115;
  z-index: 10010; }
  .marmita-fullpage-select-searcher__icon {
    margin-right: 10px;
    height: 24px;
    width: 34px; }
  .marmita-fullpage-select-searcher__icon svg {
      color: #fed298;
      fill: #fed298; }
  .marmita-fullpage-select-searcher__input {
    display: flex;
    border: none;
    color: #fff;
    background: transparent;
    height: 100%;
    outline: none;
    border-bottom: 2px solid #fed298;
    width: 90%; }
  @media only screen and (min-width: 375px) {
      .marmita-fullpage-select-searcher__input {
        font-size: 1.375rem; } }
  .marmita-fullpage-select-searcher__input:-webkit-autofill {
      box-shadow: 0 30px 0 0 transparent inset; }
  .marmita-fullpage-select-searcher__button {
    height: 30px;
    padding: 10px;
    margin-left: 10px; }
  .marmita-fullpage-select-searcher__button .btn__label {
      color: #fed298; }

.marmita-fullpage-select-input {
  position: relative;
  background: transparent;
  border: none;
  width: 100%;
  padding: 0;
  overflow: hidden; }
  .marmita-fullpage-select-input :first-child {
    pointer-events: none; }
  .marmita-fullpage-select-input__icon {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 35px;
    right: 0;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg); }
  .marmita-fullpage-select-input__icon svg {
      color: #dcdcdc;
      fill: #dcdcdc; }
  .marmita-fullpage-select-input__icon--light svg {
      color: #fed298;
      fill: #fed298; }
  @media only screen and (min-width: 375px) {
      .marmita-fullpage-select-input__icon {
        width: 20px;
        height: 20px; } }
  @media only screen and (min-width: 960px) {
      .marmita-fullpage-select-input__icon {
        top: 25px; } }

.marmita-toggle {
  cursor: pointer;
  display: inline-block;
  height: 26px;
  position: relative;
  width: 44px; }
  .marmita-toggle__checkbox {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1; }
  .marmita-toggle__checkbox:checked + .marmita-toggle__slider {
      background: #ffe115; }
  .marmita-toggle__checkbox:checked + .marmita-toggle__slider::before {
        background: #fff;
        -webkit-transform: translateX(85%);
                transform: translateX(85%); }
  .marmita-toggle__slider {
    background: #d3d2d2;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    transition: all 200ms linear; }
  .marmita-toggle__slider::before {
      background: #fff;
      border-radius: 100%;
      bottom: 2px;
      content: '';
      height: 22px;
      left: 2px;
      position: absolute;
      transition: all 200ms linear;
      width: 22px; }
  .marmita-toggle__slider--disabled {
      opacity: 0.4; }

.simple-form-input {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 4px 0;
  margin: 5px 0 5px;
  z-index: 0;
  min-height: 73px; }
  .simple-form-input .simple-form-input__label--has-value .label__name, .simple-form-input__label--has-value .simple-form-input .label__name, .simple-form-input .simple-form-input__field:focus + .label__name {
    -webkit-transform: translateY(-23px);
            transform: translateY(-23px);
    font-size: 0.875rem;
    background: #fff;
    z-index: 1;
    padding: 5px; }
  .simple-form-input__label {
    background: transparent;
    display: flex;
    flex-direction: column;
    color: #a6a6a6;
    position: relative;
    padding: 0; }
  .simple-form-input__label .label__name {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 20px;
      margin: auto;
      display: flex;
      align-items: center;
      -webkit-transform: translateY(0);
              transform: translateY(0);
      transition: 200ms;
      font-size: 1rem;
      left: 14px; }
  .simple-form-input__field {
    color: #3e3e3e;
    background: transparent;
    font-weight: 500;
    outline: none;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    position: relative;
    padding: 13px 20px;
    height: auto;
    z-index: 1;
    width: 100%;
    font-size: 1rem;
    line-height: 20px; }
  .simple-form-input__field:focus + .label__name + .field__border {
      width: 100%; }
  .simple-form-input__field:-webkit-autofill {
      box-shadow: 0 30px 0 0 transparent inset; }
  .simple-form-input__field[disabled] {
    opacity: 0.4; }
  .simple-form-input__error {
    font-size: 0.75rem;
    margin: 4px 0 0 0;
    color: #ffe115; }
  .simple-form-input--invalid .simple-form-input__field {
    border-color: #ffe115; }
  .simple-form-input--invalid .label__name {
    color: #ffe115; }
  .simple-form-input--invalid .field__border {
    background: #ffe115; }

.ifood-box-code {
  margin: 10px 0 24px; }
  @media only screen and (min-width: 960px) {
    .ifood-box-code {
      margin: 0; } }
  .ifood-box-code__title {
    display: block;
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.875rem;
    color: #3e3e3e;
    font-weight: 500; }

.pwa-banner-install {
  background: #f7f7f7;
  max-width: 960px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 50px 1fr;
  padding: 16px 10px;
  grid-column-gap: 16px;
  grid-template-areas: 'icon title' 'icon subtitle' 'icon buttons'; }
  @media only screen and (min-width: 960px) {
    .pwa-banner-install {
      display: none; } }
  .pwa-banner-install--white {
    background: #fff; }
  .pwa-banner-install__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    padding: 0 0 0 6px; }
  .pwa-banner-install__icon svg {
      width: 50px;
      height: 120px; }
  .pwa-banner-install__title {
    grid-area: title;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #3e3e3e;
    font-weight: 500;
    line-height: 1.375rem; }
  .pwa-banner-install__subtitle {
    grid-area: subtitle;
    display: flex;
    align-items: center;
    color: #717171;
    font-size: 0.875rem;
    font-weight: 300; }
  .pwa-banner-install-buttons {
    grid-area: buttons;
    display: flex;
    align-items: center; }
  .pwa-banner-install-buttons__dismiss {
      color: #717171;
      padding: 5px 10px;
      position: relative;
      left: -10px;
      height: 30px; }
  .pwa-banner-install-buttons__dismiss .btn__label {
        font-size: 0.75rem;
        font-weight: normal; }
  @media only screen and (min-width: 375px) {
          .pwa-banner-install-buttons__dismiss .btn__label {
            font-size: 0.875rem; } }
  .pwa-banner-install-buttons__add {
      height: 36px; }
  .pwa-banner-install-buttons__add .btn__label {
        font-size: 0.875rem; }
  .pwa-banner-install .svg-flying-ballon__cartoon {
    -webkit-animation: ease-in-out banner-cartoon-flying 3s infinite alternate;
            animation: ease-in-out banner-cartoon-flying 3s infinite alternate; }
  .pwa-banner-install .svg-flying-ballon__shadow {
    -webkit-animation: ease-in-out banner-cartoon-shadow 3s infinite alternate;
            animation: ease-in-out banner-cartoon-shadow 3s infinite alternate; }
  .pwa-banner-install--large {
    grid-template-areas: 'icon' 'title ' 'subtitle' 'buttons';
    grid-template-columns: 1fr;
    padding: 20px 10px 15px;
    grid-column-gap: 16px; }
  .pwa-banner-install--large .pwa-banner-install__icon {
      justify-content: center;
      padding: 0; }
  .pwa-banner-install--large .pwa-banner-install__icon svg {
        height: 136px;
        width: 61px;
        padding: 0 0 0 5px; }
  .pwa-banner-install--large .pwa-banner-install__title {
      width: 170px;
      margin: 12px auto;
      text-align: center; }
  .pwa-banner-install--large .pwa-banner-install__subtitle {
      width: 252px;
      margin: 0 auto;
      text-align: center; }
  .pwa-banner-install--large .pwa-banner-install-buttons {
      margin: 6px 0 0 0;
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center; }
  .pwa-banner-install--large .pwa-banner-install-buttons__add {
        margin: 12px 0;
        width: 215px; }
  .pwa-banner-install--large .pwa-banner-install-buttons__dismiss {
        left: 0; }
  @-webkit-keyframes banner-cartoon-flying {
  0% {
    -webkit-transform: rotate(2deg) translateY(-9px);
            transform: rotate(2deg) translateY(-9px); }
  100% {
    -webkit-transform: rotate(-2deg) translateY(0);
            transform: rotate(-2deg) translateY(0); } }
  @keyframes banner-cartoon-flying {
  0% {
    -webkit-transform: rotate(2deg) translateY(-9px);
            transform: rotate(2deg) translateY(-9px); }
  100% {
    -webkit-transform: rotate(-2deg) translateY(0);
            transform: rotate(-2deg) translateY(0); } }
  @-webkit-keyframes banner-cartoon-shadow {
  0% {
    opacity: 0.4;
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(3px);
            transform: translateX(3px); } }
  @keyframes banner-cartoon-shadow {
  0% {
    opacity: 0.4;
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(3px);
            transform: translateX(3px); } }

.payment-action {
  border-top: 1px solid #f5f0eb;
  padding: 20px;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 9990; }
  .payment-action .btn {
    width: 100%; }

@media only screen and (max-width: 959px) {
  .payment-type-selection {
    padding-bottom: 10px; } }

.payment-type-selection .selection-type {
  display: flex;
  align-items: center;
  height: 40px;
  overflow: hidden;
  padding: 0 20px 0 0;
  position: relative; }

.payment-type-selection .selection-type canvas {
    color: #a6a5a5; }

.payment-type-selection .selection-type__label {
    display: block;
    flex-grow: 2;
    font-size: 0.9375rem;
    color: #3f3e3e; }

@media only screen and (min-width: 960px) {
  .payment-type-selection {
    display: flex;
    padding-top: 18px; }
    .payment-type-selection .selection-type {
      flex-direction: row-reverse;
      padding: 0 40px 0 0; }
      .payment-type-selection .selection-type .marmita-radio {
        margin-right: 10px; } }

.payment-info {
  padding: 20px 0; }
  .payment-info__wrapper {
    text-align: left; }
  .payment-info__title {
    border-bottom: 1px solid #f5f0eb;
    color: #3f3e3e;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    padding: 0 20px 20px; }
  .payment-info__button {
    display: flex;
    font-weight: normal;
    height: 60px;
    margin: 0;
    justify-content: space-between;
    padding: 0 20px;
    width: 100%; }
  .payment-info__button canvas {
      color: #a6a5a5; }
  @media only screen and (max-width: 767px) {
      .payment-info__button {
        font-size: 1rem; } }
  .payment-info .line-separator {
    width: 100%;
    display: block;
    border-bottom: 1px solid #f5f0eb; }
  @media only screen and (max-width: 767px) {
      .payment-info .line-separator:first-child {
        margin: 10px 0; }
      .payment-info .line-separator:last-child {
        border-bottom: 0;
        margin: 0 0 10px; } }
  .payment-info__item {
    text-align: left; }
  .payment-info__item-title {
    color: #3f3e3e;
    display: block;
    font-size: 1rem; }
  .payment-info__item-title:last-child {
      margin-bottom: 0; }
  .payment-info__item-required {
    display: inline-block; }
  .payment-info__item-detail, .payment-info__item-required {
    color: #a6a29f;
    font-size: 0.9375rem;
    text-align: left;
    margin-top: 8px;
    font-weight: 300; }
  .payment-info__item-detail {
    display: block;
    text-transform: capitalize;
    margin-right: 5px; }
  @media only screen and (max-width: 767px) {
      .payment-info__item-detail {
        margin-right: 0; } }
  .payment-info__item-detail-payment {
      display: inline-block; }
  .payment-info__action {
    color: #ffe115;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center; }
  .payment-info__action .icon-marmita {
      margin-right: 10px; }
  .payment-info__action img {
      display: inline-block;
      margin-right: 15px;
      width: 24px;
      position: relative;
      top: -1px; }
  .payment-info__card-dots {
    font-size: 0.75rem; }

.payment-dialog {
  padding: 20px 24px;
  max-width: 450px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; }
  @media only screen and (min-width: 560px) {
    .payment-dialog {
      padding: 20px 50px; } }
  @media only screen and (max-width: 559px) {
    .payment-dialog {
      text-align: center; } }
  .payment-dialog__title {
    font-size: 1.125rem;
    line-height: 1.875rem;
    margin: 0 0 12px;
    font-weight: 500;
    color: #3e3e3e; }
  @media only screen and (min-width: 560px) {
      .payment-dialog__title {
        font-size: 1.5rem; } }
  .payment-dialog__subtitle {
    font-size: 1rem;
    line-height: 1.25rem;
    color: #717171;
    margin: 0 0 12px; }
  .payment-dialog__subtitle span {
      color: #3e3e3e; }
  .payment-dialog__button-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 30px; }
  .payment-dialog__confirm {
    margin: 0 0 10px; }
  @media only screen and (max-width: 559px) {
    .payment-dialog__modal .marmita-modal__actions {
      margin-right: 10px; } }

.payment-card-actions {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  grid-column-gap: 14px; }
  @media only screen and (max-width: 374px) {
    .payment-card-actions {
      grid-template-columns: repeat(2, 18px);
      grid-column-gap: 10px; } }
  @media only screen and (min-width: 768px) {
    .payment-card-actions {
      grid-template-columns: repeat(2, 24px);
      grid-column-gap: 34px; } }

.payment-card {
  background: none;
  padding: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border: 1px solid #dcdcdc;
  align-items: center;
  border-radius: 8px;
  transition: all 200ms ease-in-out; }
  .payment-card:not(.payment-card--disabled):not(.payment-card--selected):hover {
    color: #3e3e3e;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-color: transparent; }
  .payment-card--selected {
    border-color: #ffe115; }
  .payment-card--disabled {
    cursor: default; }
  .payment-card--disabled:hover {
      border-color: #dcdcdc; }
  .payment-card--disabled .payment-card__alias,
    .payment-card--disabled .payment-card__number {
      color: #a6a6a6; }
  .payment-card--disabled .payment-card__brand::before {
      content: '';
      background: #fff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      opacity: 0.8;
      bottom: 0; }
  .payment-card__brand {
    width: 24px;
    height: 15px;
    display: grid;
    align-items: center; }
  .payment-card .icon-marmita--more-dots path,
  .payment-card .icon-marmita--pen path,
  .payment-card .icon-marmita--trash path {
    fill: #ffe115;
    color: #ffe115; }
  .payment-card__more-options {
    width: 36px;
    height: 36px;
    transition: all 200ms ease-in-out;
    -webkit-transform-origin: left;
            transform-origin: left; }
  .payment-card__actions-container {
    transition: all 200ms ease-in-out;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px); }
  .payment-card__container {
    display: grid;
    grid-template-columns: 24px 1fr 58px;
    padding: 14px 20px;
    grid-gap: 14px;
    max-width: 830px;
    align-items: center; }
  .payment-card__container--has-kebab {
      grid-template-columns: 24px 1fr 22px; }
  .payment-card__container--open-actions {
      grid-template-columns: 58px 1fr 22px; }
  .payment-card__container--open-actions .payment-card__more-options {
        -webkit-transform-origin: left;
                transform-origin: left;
        transition: all 200ms ease-in-out;
        -webkit-transform: rotate(-90deg) translate(-12px, 12px);
                transform: rotate(-90deg) translate(-12px, 12px); }
  .payment-card__container--open-actions .payment-card__actions-container {
        -webkit-transform: translateX(0px);
                transform: translateX(0px); }
  .payment-card__additional-text {
    color: #717171;
    background: #f2f2f2;
    font-size: 0.75rem;
    height: 30px;
    line-height: 30px;
    padding-left: 30px;
    font-weight: 300; }
  .payment-card__alias {
    margin: 0 0 5px;
    font-size: 0.875rem;
    color: #3e3e3e; }
  .payment-card__number {
    margin: 0;
    line-height: 20px;
    color: #717171;
    font-size: 0.875rem;
    font-weight: 100; }
  .payment-card .tooltip-ui-kit__container {
    display: none; }
  .payment-card button {
    cursor: pointer;
    align-self: start;
    width: 22px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent; }
  @media only screen and (max-width: 374px) {
    .payment-card button {
      width: 18px;
      height: 18px; }
    .payment-card__container {
      grid-gap: 10px;
      grid-template-columns: 24px 1fr 46px; }
      .payment-card__container--has-kebab {
        grid-template-columns: 24px 1fr 18px; }
      .payment-card__container--open-actions {
        grid-template-columns: 46px 1fr 18px; } }
  @media only screen and (min-width: 768px) {
    .payment-card button {
      width: 24px;
      height: 24px; }
    .payment-card .icon-marmita--pen:hover,
    .payment-card .icon-marmita--trash:hover {
      -webkit-transform: scale(1.05);
              transform: scale(1.05); }
      .payment-card .icon-marmita--pen:hover path,
      .payment-card .icon-marmita--trash:hover path {
        color: #c41835;
        fill: #c41835; }
    .payment-card .tooltip-ui-kit {
      cursor: pointer; }
      .payment-card .tooltip-ui-kit__container {
        display: initial;
        min-width: initial;
        padding: 5px 10px;
        max-width: initial;
        color: white;
        background-color: rgba(113, 113, 113, 0.8); }
      .payment-card .tooltip-ui-kit__content {
        padding: 0px; }
    .payment-card__container {
      padding: 32px;
      grid-gap: 34px;
      grid-template-columns: 40px 1fr 82px; }
      .payment-card__container--has-kebab {
        grid-template-columns: 40px 1fr 24px; }
      .payment-card__container--open-actions {
        grid-template-columns: 82px 1fr 24px; }
    .payment-card__brand {
      width: 40px;
      height: 33px; }
    .payment-card__additional-text {
      font-size: 0.875rem;
      line-height: 30px; }
    .payment-card__alias {
      margin: 0 0 5px;
      font-size: 1rem; }
    .payment-card__number {
      font-size: 1rem;
      line-height: 20px; } }

.payment-states {
  height: calc(100vh - 180px);
  display: grid;
  grid-template-rows: auto -webkit-max-content;
  grid-template-rows: auto max-content;
  justify-items: center;
  align-content: center; }
  .payment-states__illustration {
    grid-row-start: 1;
    width: 240px;
    height: 250px; }
  @media (max-height: 500px) {
      .payment-states__illustration {
        width: 140px;
        height: 150px; } }
  .payment-states__illustration div {
      display: grid;
      align-items: center;
      height: 100%; }
  .payment-states__illustration div svg {
        height: 100%;
        width: 100%; }
  .payment-states .payment-states-texts {
    display: grid;
    justify-items: center;
    grid-row-gap: 8px; }
  .payment-states .payment-states-texts__title {
      margin: 50px 0 0 0;
      color: #3f3e3e;
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.375em; }
  @media (max-height: 600px) {
        .payment-states .payment-states-texts__title {
          margin: 20px 0 0 0; } }
  .payment-states .payment-states-texts__description {
      margin: 0;
      color: #717171;
      font-weight: 300;
      font-size: 0.875rem;
      line-height: 1.25em;
      text-align: center;
      max-width: 312px; }
  .payment-states .payment-states-texts__cta {
      position: fixed;
      bottom: 0;
      left: 0;
      margin: 0 20px 52px 20px;
      width: calc(100% - 40px); }
  @media only screen and (min-width: 960px) {
    .payment-states {
      grid-template-columns: 370px 342px;
      grid-column-gap: 50px;
      height: auto;
      align-items: center; }
      .payment-states__illustration {
        grid-row-start: initial;
        width: 330px;
        height: 340px; }
      .payment-states .payment-states-texts {
        grid-row-gap: 16px;
        justify-items: initial; }
        .payment-states .payment-states-texts__title {
          font-weight: 500;
          font-size: 1.25rem;
          line-height: 1.625em; }
        .payment-states .payment-states-texts__description {
          font-weight: 300;
          font-size: 1rem;
          line-height: 1.25em;
          text-align: left; }
        .payment-states .payment-states-texts__cta {
          position: initial;
          margin: 64px 0 0 0;
          width: 300px; } }

.online-payment-list {
  display: grid;
  grid-row-gap: 16px;
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content; }
  @media only screen and (max-width: 959px) {
    .online-payment-list {
      padding: 60px 0 100px 0; } }
  .online-payment-list__card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    height: 90px;
    width: 100%;
    left: 0;
    background: white;
    border-top: 2px solid #f5f0eb;
    z-index: 10000; }
  @media only screen and (min-width: 960px) {
      .online-payment-list__card-wrapper {
        display: block;
        position: static;
        border: none; } }
  .online-payment-list__btn-new-card {
    width: calc(100% - 40px);
    border: 1px solid #dcdcdc;
    transition: all 200ms ease-in-out;
    max-width: 600px; }
  @media only screen and (min-width: 960px) {
      .online-payment-list__btn-new-card {
        width: 100%;
        margin: 0 auto;
        max-width: 100%; } }
  .online-payment-list__btn-new-card:hover {
      border-color: #ffe115; }

.card-brand {
  display: grid;
  grid-row-gap: 40px; }
  .card-brand__header {
    display: grid;
    padding: 0 16px;
    grid-template-columns: 30px 1fr 30px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9997;
    background: white; }
  .card-brand__header h1 {
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1em;
      margin: 0;
      text-transform: uppercase;
      text-align: center;
      align-items: center;
      display: grid;
      color: #3e3e3e; }
  .card-brand__header .card-brand-header__icon {
      margin-left: 0;
      display: grid; }
  .card-brand__container {
    display: grid;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    grid-row-gap: 16px;
    overflow-y: auto;
    padding-right: 11px;
    padding-left: 16px;
    margin-right: 5px; }
  .card-brand__container::-webkit-scrollbar-track {
      border-radius: 50px;
      background-color: transparent; }
  .card-brand__container::-webkit-scrollbar {
      width: 4px;
      background-color: transparent; }
  .card-brand__container::-webkit-scrollbar-thumb {
      border-radius: 50px;
      background-color: #dcdcdc; }
  .card-brand__container .option-button.card-brand__option-button {
      height: 60px;
      background: white;
      width: 100%; }
  .card-brand__container .option-button.card-brand__option-button .option-button__description-text {
        text-transform: none;
        font-weight: 400;
        color: #717171;
        margin-left: 14px; }
  .card-brand__container .option-button.card-brand__option-button .option-button__icon {
        margin: 0 10px; }
  .card-brand__container .option-button.card-brand__option-button:hover {
        background: #f7f7f7; }
  .card-brand__container .option-button.card-brand__option-button .icon-marmita {
        height: 40px;
        width: 40px;
        display: grid;
        align-items: center;
        justify-content: center; }
  .card-brand__container .option-button.card-brand__option-button .icon-marmita svg {
          width: 32px;
          height: 24px; }
  @media only screen and (min-width: 768px) {
    .card-brand {
      padding: 30px 0 30px 40px; }
      .card-brand__header {
        position: initial;
        padding-left: 0;
        padding-right: 40px;
        grid-template-columns: repeat(3, 1fr); }
        .card-brand__header h1 {
          text-transform: none;
          font-weight: 400;
          font-size: 1.125rem;
          line-height: 1.375em; }
      .card-brand__container {
        height: 390px;
        padding-right: 35px;
        padding-left: 0; }
        .card-brand__container .option-button.card-brand__option-button {
          height: 80px; }
          .card-brand__container .option-button.card-brand__option-button .btn__label {
            font-size: 1rem;
            line-height: 1.125em;
            margin-left: 20px; } }

.card-type {
  display: grid;
  grid-row-gap: 40px;
  padding: 0; }
  .card-type h1 {
    height: 22px;
    font-weight: 500;
    align-items: center;
    display: grid;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.375em;
    text-align: center;
    color: #3e3e3e; }
  .card-type__container {
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 1px; }
  .card-type__container .card-type-container {
      height: 60px;
      background: white;
      margin: 0; }
  .card-type__container .btn__label {
      margin: 0;
      display: grid;
      font-weight: 400;
      align-items: center;
      color: #717171;
      font-size: 0.875rem;
      line-height: 1.125em;
      margin-left: 20px;
      text-align: start !important; }
  .card-type .btn.btn--iconize .btn__icon {
    height: 40px;
    width: 40px; }
  .card-type .icon-marmita {
    background: #f2f2f2;
    border-radius: 40px;
    display: grid;
    align-items: center;
    justify-content: center; }
  .card-type .icon-marmita--market svg path, .card-type .icon-marmita--payment-type-alt svg path {
      color: #3e3e3e;
      fill: #3e3e3e; }
  .card-type .icon-marmita svg {
      width: 20px;
      height: 20px;
      color: #3e3e3e; }
  .card-type .icon-marmita svg g {
        fill: #3e3e3e; }
  @media only screen and (min-width: 768px) {
    .card-type {
      grid-row-gap: 70px;
      padding: 30px 40px 0; }
      .card-type h1 {
        height: 46px;
        font-weight: 400; }
      .card-type__container {
        grid-row-gap: 16px; }
        .card-type__container .card-type-container {
          height: 80px;
          border: 1px solid #f2f2f2;
          border-radius: 8px; }
          .card-type__container .card-type-container:hover {
            background: #f7f7f7; }
        .card-type__container .btn__label {
          font-size: 1rem;
          line-height: 1.125em; } }

.dynamic-card-container {
  -webkit-perspective: 335px;
          perspective: 335px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.dynamic-card {
  width: 335px;
  height: 208px;
  margin: 0 auto;
  position: relative;
  transition: all 350ms ease-in-out;
  transition-delay: 150ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: left;
          transform-origin: left; }

.dynamic-card--flipped {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: translateX(100%) rotateY(180deg);
            transform: translateX(100%) rotateY(180deg); }

.dynamic-card__front {
    width: 335px;
    height: 208px;
    left: -1px;
    position: absolute;
    margin: 0 auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 8px 20px 20px;
    display: grid;
    background-color: white;
    grid-template-rows: repeat(3, 1fr);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }

.dynamic-card__front .dynamic-card-front__header {
      display: grid;
      grid-template-columns: 40px -webkit-max-content -webkit-min-content auto;
      grid-template-columns: 40px max-content min-content auto;
      grid-column-gap: 12px;
      align-content: start;
      align-items: center; }

.dynamic-card__front .dynamic-card-front__header .icon-marmita {
        justify-self: center;
        width: auto;
        height: 40px; }

.dynamic-card__front .dynamic-card-front__header p {
        margin: 0;
        color: white;
        font-weight: 300;
        font-size: 0.75rem;
        line-height: initial; }

.dynamic-card__front .dynamic-card-front__number {
      display: grid;
      align-content: center;
      margin: 0;
      font-weight: 300;
      font-size: 1.125rem;
      line-height: 1.375em;
      letter-spacing: 0.05em;
      color: white; }

.dynamic-card__front .dynamic-card-front__footer {
      display: grid;
      grid-template-columns: auto auto;
      grid-column-gap: 10px;
      align-content: end;
      align-items: center; }

.dynamic-card__front .dynamic-card-front__footer p {
        margin: 0;
        font-weight: 300;
        font-size: 0.875rem;
        line-height: 1.375em;
        color: white; }

.dynamic-card__front .dynamic-card-front__footer .dynamic-card-front-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }

.dynamic-card__front .dynamic-card-front__footer .dynamic-card-front-expiration {
        display: grid;
        justify-content: end; }

.dynamic-card__front--clipped {
      box-shadow: initial;
      -webkit-clip-path: ellipse(488px 427px at -147% -147%);
              clip-path: ellipse(488px 427px at -147% -147%); }

.dynamic-card__front--default .dynamic-card-front__header .icon-marmita {
      width: 20px;
      height: 40px; }

@media (max-height: 373px), (max-width: 375px) {
        .dynamic-card__front--default .dynamic-card-front__header .icon-marmita {
          transition: all 350ms ease-in-out;
          width: 15px;
          height: 15px; } }

.dynamic-card__front--sodexo .dynamic-card-front__header p, .dynamic-card__front--alelo .dynamic-card-front__header p, .dynamic-card__front--baricompras .dynamic-card-front__header p, .dynamic-card__front--cooper .dynamic-card-front__header p, .dynamic-card__front--ticket .dynamic-card-front__header p, .dynamic-card__front--valecard .dynamic-card-front__header p, .dynamic-card__front--vr .dynamic-card-front__header p, .dynamic-card__front--va .dynamic-card-front__header p, .dynamic-card__front--default .dynamic-card-front__header p {
      color: #3e3e3e; }

.dynamic-card__front--sodexo .dynamic-card-front__number, .dynamic-card__front--alelo .dynamic-card-front__number, .dynamic-card__front--baricompras .dynamic-card-front__number, .dynamic-card__front--cooper .dynamic-card-front__number, .dynamic-card__front--ticket .dynamic-card-front__number, .dynamic-card__front--valecard .dynamic-card-front__number, .dynamic-card__front--vr .dynamic-card-front__number, .dynamic-card__front--va .dynamic-card-front__number, .dynamic-card__front--default .dynamic-card-front__number {
      color: #3e3e3e; }

.dynamic-card__front--sodexo .dynamic-card-front__footer p, .dynamic-card__front--alelo .dynamic-card-front__footer p, .dynamic-card__front--baricompras .dynamic-card-front__footer p, .dynamic-card__front--cooper .dynamic-card-front__footer p, .dynamic-card__front--ticket .dynamic-card-front__footer p, .dynamic-card__front--valecard .dynamic-card-front__footer p, .dynamic-card__front--vr .dynamic-card-front__footer p, .dynamic-card__front--va .dynamic-card-front__footer p, .dynamic-card__front--default .dynamic-card-front__footer p {
      color: #3e3e3e; }

.dynamic-card__front--default {
      background-image: url("/static/images/cards/default.svg");
      background-size: cover; }

.dynamic-card__front--ifood {
      background-image: url("/static/images/cards/ifood-card.svg");
      background-size: cover; }

.dynamic-card__front--alelo {
      background: linear-gradient(237.89deg, #C6EC58 9.3%, #A3CB32 71.03%); }

.dynamic-card__front--elo {
      background: linear-gradient(242.04deg, #333232 8.77%, #262626 92.86%); }

.dynamic-card__front--greencard {
      background: linear-gradient(61.96deg, #558E65 23.72%, #76B187 87.25%); }

.dynamic-card__front--visa {
      background: linear-gradient(242.32deg, #207FB6 9.41%, #075989 90.63%); }

.dynamic-card__front--amex {
      background: linear-gradient(222.64deg, #51BAE8 8.91%, #007EC3 58.73%); }

.dynamic-card__front--diners {
      background: linear-gradient(59.75deg, #1573B8 27.08%, #248AD5 93.66%); }

.dynamic-card__front--goodcard {
      background: linear-gradient(61.27deg, #1B4A96 16.33%, #3A6EC4 93.71%); }

.dynamic-card__front--hipercard {
      background: linear-gradient(55.95deg, #AD0F17 28.6%, #D01F34 87.35%); }

.dynamic-card__front--mastercard {
      background: linear-gradient(242.04deg, #5A5A5A 8.77%, #343434 92.86%); }

.dynamic-card__front--baricompras, .dynamic-card__front--ticket, .dynamic-card__front--valecard, .dynamic-card__front--cooper, .dynamic-card__front--vr, .dynamic-card__front--va, .dynamic-card__front--sodexo {
      background: linear-gradient(61.27deg, #E4E4E4 16.34%, #FFFFFF 64.52%); }

.dynamic-card__front--verdecard {
      background: linear-gradient(229.29deg, #0DBC5E 9.09%, #009E49 48.31%); }

.dynamic-card__front--branded {
      transition: all 750ms;
      box-shadow: initial;
      -webkit-clip-path: ellipse(488px 427px at 0% 0%);
              clip-path: ellipse(488px 427px at 0% 0%); }

.dynamic-card__back {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
    background-color: white;
    width: 335px;
    height: 208px;
    position: absolute;
    margin: 0 auto;
    border-radius: 10px;
    padding-top: 26px;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }

.dynamic-card__back .dynamic-card-back__magnetic-tape {
      width: calc(100% - 0.1px);
      height: 48px;
      background: rgba(0, 0, 0, 0.9); }

.dynamic-card__back .dynamic-card-back__csc {
      background: white;
      text-align: right;
      border-radius: 6px;
      margin: 20px 53px 0 22px;
      line-height: 1.375em;
      padding: 5px 10px;
      font-weight: 300;
      font-size: 0.875rem;
      color: #3f3e3e;
      height: 30px; }

.dynamic-card__back--default {
      background-image: url("/static/images/cards/default.svg");
      background-size: cover; }

.dynamic-card__back--ifood {
      background-image: url("/static/images/cards/ifood-card.svg");
      background-size: cover; }

.dynamic-card__back--alelo {
      background: linear-gradient(237.89deg, #C6EC58 9.3%, #A3CB32 71.03%); }

.dynamic-card__back--elo {
      background: linear-gradient(242.04deg, #333232 8.77%, #262626 92.86%); }

.dynamic-card__back--greencard {
      background: linear-gradient(61.96deg, #558E65 23.72%, #76B187 87.25%); }

.dynamic-card__back--visa {
      background: linear-gradient(242.32deg, #207FB6 9.41%, #075989 90.63%); }

.dynamic-card__back--amex {
      background: linear-gradient(222.64deg, #51BAE8 8.91%, #007EC3 58.73%); }

.dynamic-card__back--diners {
      background: linear-gradient(59.75deg, #1573B8 27.08%, #248AD5 93.66%); }

.dynamic-card__back--goodcard {
      background: linear-gradient(61.27deg, #1B4A96 16.33%, #3A6EC4 93.71%); }

.dynamic-card__back--hipercard {
      background: linear-gradient(55.95deg, #AD0F17 28.6%, #D01F34 87.35%); }

.dynamic-card__back--mastercard {
      background: linear-gradient(242.04deg, #5A5A5A 8.77%, #343434 92.86%); }

.dynamic-card__back--baricompras, .dynamic-card__back--ticket, .dynamic-card__back--valecard, .dynamic-card__back--cooper, .dynamic-card__back--vr, .dynamic-card__back--va, .dynamic-card__back--sodexo {
      background: linear-gradient(61.27deg, #E4E4E4 16.34%, #FFFFFF 64.52%); }

.dynamic-card__back--verdecard {
      background: linear-gradient(229.29deg, #0DBC5E 9.09%, #009E49 48.31%); }

@media (max-height: 373px), (max-width: 375px) {
    .dynamic-card {
      transition: all 350ms ease-in-out;
      width: 230px;
      height: 126px; }
      .dynamic-card__front {
        padding: 12px;
        width: 230px;
        height: 126px; }
        .dynamic-card__front .dynamic-card-front__header {
          grid-template-columns: 15px -webkit-max-content -webkit-min-content auto;
          grid-template-columns: 15px max-content min-content auto;
          grid-column-gap: 12px; }
          .dynamic-card__front .dynamic-card-front__header .icon-marmita {
            width: auto;
            height: 15px; }
          .dynamic-card__front .dynamic-card-front__header p {
            font-size: 0.625rem; }
        .dynamic-card__front .dynamic-card-front__number {
          font-size: 0.875rem; }
        .dynamic-card__front .dynamic-card-front__footer p {
          font-size: 0.75rem; }
      .dynamic-card__back {
        width: 230px;
        height: 126px; }
        .dynamic-card__back .dynamic-card-back__magnetic-tape {
          height: 24px; }
        .dynamic-card__back .dynamic-card-back__csc {
          margin: 20px 16px;
          line-height: initial;
          font-size: 0.75rem;
          color: #3f3e3e;
          height: 20px; } }

.payment-method-form__header {
  display: grid;
  margin: 14px 16px;
  grid-template-columns: 30px 1fr 30px; }
  .payment-method-form__header h1 {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1em;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    align-items: center;
    display: grid;
    color: #3e3e3e; }
  .payment-method-form__container {
  display: grid;
  grid-template-rows: -webkit-min-content 80px 50px;
  grid-template-rows: min-content 80px 50px;
  grid-row-gap: 20px; }
  @media only screen and (max-width: 374px) {
    .payment-method-form__container {
      grid-row-gap: 12px; } }
  @media only screen and (max-width: 767px) {
    .payment-method-form__container .btn--default {
      margin: 0;
      border-radius: 0; }
      .payment-method-form__container .btn--default[disabled] {
        background: #f2f2f2;
        opacity: 1; }
        .payment-method-form__container .btn--default[disabled] .btn__label {
          color: #a6a6a6; } }
  .payment-method-form__container .payment-method-form-container-buttons .payment-method-form-container__continue {
    width: 100vw; }
  .payment-method-form__container .payment-method-form-container-buttons .payment-method-form-container__continue--done {
      display: none;
      visibility: hidden; }
  .payment-method-form__container .payment-method-form-container-buttons .payment-method-form-container__submit {
    display: none;
    visibility: hidden;
    width: 100vw; }
  .payment-method-form__container .payment-method-form-container-buttons .payment-method-form-container__submit--done {
      display: initial;
      visibility: initial; }
  .payment-method-form__form-container {
  display: grid;
  background: white;
  position: relative;
  width: 100vw; }
  .payment-method-form__form-container .smaller-fields, .payment-method-form__form-container .form-input {
    padding: 0;
    position: absolute;
    width: calc(100vw - 32px);
    margin: 0 auto;
    left: 0;
    max-width: 343px;
    right: 0; }
  .payment-method-form__form-container .form-input {
    display: none; }
  .payment-method-form__form-container .form-input--active-input {
      display: initial; }
  .payment-method-form__dynamic-cards {
  display: grid;
  grid-auto-columns: -webkit-max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-row-start: 1;
  align-content: center;
  z-index: -1;
  transition: all 350ms ease-in-out;
  align-items: center; }
  .payment-method-form__dynamic-cards--editing {
    -webkit-transform: translateX(-100vw);
            transform: translateX(-100vw); }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container {
    width: 100vw; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper {
      display: grid;
      align-content: center;
      justify-content: center;
      width: 100vw;
      grid-column-start: 1;
      grid-row-gap: 10px; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .disclaimer {
        width: 287px;
        font-weight: 300;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #717171;
        margin: 0 auto;
        justify-self: center;
        grid-column-start: 1; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .brands {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: -webkit-min-content;
        grid-auto-columns: min-content;
        grid-column-gap: 8px;
        justify-content: center; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .not-accepted-disclaimer {
        max-width: 343px;
        background: #f7f7f7;
        border: 1px solid #dcdcdc;
        box-sizing: border-box;
        border-radius: 8px;
        margin: 0 16px; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .not-accepted-disclaimer p {
          margin: 0;
          padding: 16px;
          font-weight: 300;
          font-size: 0.875rem;
          line-height: 1.25em;
          text-align: center;
          color: #717171; }
  @media only screen and (max-width: 374px) {
          .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .not-accepted-disclaimer {
            margin: 0 8px; }
            .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .not-accepted-disclaimer p {
              padding: 8px; } }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__cards {
      display: grid;
      grid-template-columns: repeat(2, 100vw);
      transition: all 150ms ease-in-out;
      align-items: center; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__cards--document {
        -webkit-transform: translateX(-100vw);
                transform: translateX(-100vw); }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__separator {
      display: none; }
  @media only screen and (min-width: 768px) {
  .payment-method-form {
    padding: 30px 0 16px;
    height: initial; }
    .payment-method-form__header {
      padding: 0 40px;
      grid-template-columns: repeat(3, 1fr);
      margin-bottom: 0; }
      .payment-method-form__header h1 {
        text-transform: none;
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.375em; }
    .payment-method-form__container {
      grid-row-gap: 10px;
      grid-template-columns: auto 400px;
      padding: 30px 10px 10px 0;
      height: initial;
      grid-template-rows: initial; }
      .payment-method-form__container .payment-method-form-container-buttons {
        display: initial;
        padding-left: 30px;
        position: initial; }
        .payment-method-form__container .payment-method-form-container-buttons .payment-method-form-container__continue {
          visibility: hidden;
          display: none; }
        .payment-method-form__container .payment-method-form-container-buttons .payment-method-form-container__submit {
          display: initial;
          visibility: initial;
          position: initial;
          padding-left: 30px;
          width: 320px; }
    .payment-method-form__form-container {
      grid-row-gap: 10px;
      width: 350px;
      padding: 0 10px 0 30px; }
      .payment-method-form__form-container .smaller-fields, .payment-method-form__form-container .form-input {
        width: initial;
        margin: 0;
        position: initial;
        display: initial; }
      .payment-method-form__form-container .form-input {
        min-height: 83px; }
      .payment-method-form__form-container .smaller-fields {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px; }
    .payment-method-form__dynamic-cards {
      grid-auto-columns: initial;
      grid-row-start: initial;
      grid-auto-flow: initial;
      grid-template-rows: 250px auto;
      grid-row-gap: 20px; }
      .payment-method-form__dynamic-cards--editing {
        -webkit-transform: initial;
                transform: initial; }
      .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container {
        width: initial;
        display: grid;
        grid-template-columns: 28px 345px 28px;
        align-content: center; }
        .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper {
          width: auto;
          grid-column-start: initial; }
          .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .disclaimer {
            margin: 0 auto; }
          .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .brands {
            display: none; }
          .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__disclaimer-wrapper .not-accepted-disclaimer {
            margin: 0 50px; }
        .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__cards {
          grid-template-columns: repeat(2, 350px);
          grid-column-gap: 50px; }
          .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__cards--document {
            grid-column-gap: 32px;
            -webkit-transform: translateX(-382px);
                    transform: translateX(-382px); }
        .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__separator {
          display: initial;
          background: linear-gradient(89.06deg, #FFFFFF 29.65%, rgba(255, 255, 255, 0) 105.86%);
          z-index: 1;
          height: 250px; }
          .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__separator--right {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg); } }
  @media only screen and (min-width: 960px) {
  .payment-method-form__container {
    grid-template-columns: auto 445px;
    padding: 30px 10px 10px 60px; }
    .payment-method-form__container .payment-method-form-container-buttons {
      padding-left: 0; }
  .payment-method-form__form-container {
    padding: 0; }
    .payment-method-form__form-container .form-input {
      min-height: 73px; }
  .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container {
    grid-template-columns: 50px 345px 50px; }
    .payment-method-form__dynamic-cards .payment-method-form-dynamic-cards-container__cards--document {
      -webkit-transform: translateX(-395px);
              transform: translateX(-395px); }
  .payment-method-form .payment-method-form-container__submit {
    padding-left: 0 !important;
    width: 350px !important; } }
  @media (max-height: 373px) {
  .payment-method-form__container {
    height: 100%;
    grid-template-rows: -webkit-min-content 55px 40px;
    grid-template-rows: min-content 55px 40px;
    grid-row-gap: 4px; }
  .payment-method-form .form-input .form-input__field:focus + .label__name, .payment-method-form .form-input .form-input__label.form-input__label--has-value .label__name {
    -webkit-transform: translateY(-14px);
            transform: translateY(-14px);
    font-size: 0.625rem; }
  .payment-method-form .form-input .form-input__label {
    height: 40px; }
    .payment-method-form .form-input .form-input__label .label__name {
      font-size: 0.75rem; }
  .payment-method-form .payment-method-form-container__continue {
    height: 40px; } }
  .payment-method-form .payment-method-form-brands__card-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 25px;
  width: 29px; }
  .payment-method-form .payment-method-form-brands__card-item img {
    max-width: 100%;
    max-height: 100%; }

.payment-method-form-modal {
  height: 407px;
  width: 100vw;
  padding: 50px 0;
  transition: all 300ms !important; }
  .payment-method-form-modal--brand, .payment-method-form-modal--form {
    height: 100%;
    padding: 16px 0; }
  .payment-method-form-modal--form {
    padding: 0; }
  .payment-method-form-modal--form .steps-router {
      height: 100vh;
      overflow-y: scroll; }
  @media only screen and (min-width: 768px) {
        .payment-method-form-modal--form .steps-router {
          overflow-y: initial;
          height: 100%; } }
  .payment-method-form-modal--form .steps-router__step::-webkit-scrollbar {
        display: none; }
  @media only screen and (min-width: 768px) {
    .payment-method-form-modal {
      width: 593px;
      height: 615px;
      padding: 16px 0; }
      .payment-method-form-modal--form {
        width: 750px;
        height: 705px; } }
  @media only screen and (min-width: 960px) {
    .payment-method-form-modal--form {
      width: 855px;
      height: 650px; } }
  .payment-method-form-modal .marmita-modal__inner-content-scroll {
    width: 100%;
    height: 100%; }
  .payment-method-form-modal .steps-router__step {
    overflow-y: auto; }
  .payment-method-form-modal .steps-router__step::-webkit-scrollbar-track {
      border-radius: 50px;
      background-color: transparent; }
  .payment-method-form-modal .steps-router__step::-webkit-scrollbar {
      width: 4px;
      background-color: transparent; }
  .payment-method-form-modal .steps-router__step::-webkit-scrollbar-thumb {
      border-radius: 50px;
      background-color: #dcdcdc; }

.payment-cash-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 20px; }
  .payment-cash-modal__title {
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center; }
  .payment-cash-modal__message {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: lighter;
    line-height: 18px;
    padding: 20px 40px 0;
    text-align: center; }
  .payment-cash-modal__actions {
    display: flex;
    justify-content: space-between;
    margin-top: 30px; }
  .payment-cash-modal__button {
    display: flex;
    flex: 1; }
  .payment-cash-modal__button:first-of-type {
      margin-right: 10px; }
  .payment-cash-modal__button:last-of-type {
      margin-left: 10px; }
  .payment-cash-modal__input-container {
    font-size: 1.375rem;
    color: #a6a5a5;
    font-weight: bold;
    display: flex;
    align-items: baseline;
    justify-content: center; }
  .payment-cash-modal__input-container .form-input {
      width: 110px; }
  .payment-cash-modal__input-container .form-input .form-input__field {
        text-align: center; }
  .payment-cash-modal__currency {
    padding-right: 5px; }

.offline-payment-list {
  padding: 0 16px;
  margin-bottom: 20px; }
  .offline-payment-list__options {
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    grid-row-gap: 16px;
    display: grid; }
  .offline-payment-list__category-title {
    margin-top: 16px;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.125em;
    color: #3e3e3e; }
  @media only screen and (min-width: 960px) {
    .offline-payment-list {
      padding: 0; }
      .offline-payment-list__options {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px; }
      .offline-payment-list__category-title {
        display: none; } }

.cart-bar {
  height: 50px;
  width: 100%;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  overflow: hidden; }
  .cart-bar--with-home-button {
    height: 70px; }
  @media only screen and (min-width: 960px) {
    .cart-bar {
      display: none; } }
  .cart-bar__wrapper {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    transition: -webkit-transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 300ms; }
  .cart-bar__wrapper--new-item {
      transition: none;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
  .cart-bar__container {
    display: flex;
    height: 50px;
    width: 100%;
    padding: 20px;
    position: relative;
    justify-content: space-between;
    align-items: center; }
  .cart-bar__container > span {
      display: table;
      vertical-align: baseline; }
  .cart-bar__bag {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
  .cart-bar__bag .icon-marmita {
      height: 21px;
      width: 21px; }
  .cart-bar__bag .icon-marmita svg {
        fill: #ffffff; }
  .cart-bar__amount {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16px;
    min-width: 16px;
    font-size: 0.5rem;
    background-color: #fff;
    color: #ffe115;
    border: 2px solid #ffe115;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: -7px;
    padding: 2px 0 0 0; }
  .cart-bar__title {
    position: absolute;
    width: 100%;
    left: 0;
    font-size: 0.8125rem; }
  .cart-bar__cost {
    font-size: 0.875rem; }

.delivery-info {
  display: grid;
  max-height: 100px;
  min-height: 60px; }
  .delivery-info__address {
    color: #fff;
    display: flex;
    padding: 2px 20px 20px; }
  .delivery-info__address .icon-marmita {
      position: absolute;
      left: 0;
      top: -2px;
      width: 25px; }
  .delivery-info__address .icon-marmita svg {
        color: #fed298;
        fill: #fed298; }
  .delivery-info__street-name {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding-left: 35px;
    position: relative; }
  .delivery-info__complement {
    font-size: 0.9375rem;
    margin: 0 0 5px 0;
    padding-left: 35px; }
  .delivery-info__change-address-button {
    background: none;
    border: 0;
    color: #fed298;
    display: inline-block;
    margin-left: auto;
    text-decoration: none; }
  .delivery-info__description {
    display: grid;
    align-items: center; }

.order-receipt__wrapper {
  align-items: center;
  justify-content: space-between;
  display: flex;
  position: relative; }
  .order-receipt__wrapper .form-input {
    flex-grow: 1;
    margin: 5px 0; }
  .order-receipt__wrapper .form-input__field[disabled] {
    opacity: 0.4; }
  .order-receipt__wrapper .marmita-toggle {
    margin-left: 10px;
    top: -8px; }
  @media only screen and (min-width: 1248px) {
      .order-receipt__wrapper .marmita-toggle {
        position: absolute;
        right: 20px;
        top: 20px; } }
  @media only screen and (min-width: 320px) {
      .order-receipt__wrapper .marmita-toggle__slider--checked::before {
        left: -1px; } }
  .order-receipt__dialog {
  margin: 0;
  font-size: 0.875rem;
  color: #ffe115;
  font-style: italic; }
  .order-receipt__submit-button {
  margin-top: 30px; }

.order-receipt-modal {
  padding: 0 20px; }

.cvv-disclaimer-dialog {
  padding: 20px; }
  .cvv-disclaimer-dialog__title {
    color: #3f3e3e;
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-align: center; }
  .cvv-disclaimer-dialog__description {
    color: #a6a5a5;
    font-size: 1rem;
    line-height: 22px;
    margin: 0 0 10px 0;
    text-align: center; }
  .cvv-disclaimer-dialog__icon {
    display: block;
    margin: 0 auto 20px;
    max-width: 48px; }

.checkout-card-form__flex {
  display: flex; }
  .checkout-card-form__flex .form-input {
    flex: 1; }
  .checkout-card-form__flex .form-input:first-child {
    margin-right: 10px; }
  @media only screen and (max-width: 767px) {
    .checkout-card-form__flex {
      height: 115px; } }
  .checkout-card-form__card-container {
  align-items: center;
  display: flex; }
  .checkout-card-form__card-container .form-input {
    flex: 1;
    margin-right: 10px; }
  .checkout-card-form__question-button {
  background: none;
  border-radius: 100%;
  border: 1px solid #a6a29f;
  color: #a6a29f;
  font-size: 0.6875rem;
  height: 18px;
  line-height: 7px;
  padding: 5px;
  text-align: center;
  width: 18px;
  align-self: center;
  bottom: 8px;
  margin-left: 10px;
  position: relative; }
  .checkout-card-form__brand-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 25px;
  width: 29px;
  -webkit-animation: fadeIn 300ms;
          animation: fadeIn 300ms; }
  .checkout-card-form__brand-icon img {
    max-width: 100%;
    max-height: 100%; }
  .checkout-card-form__input-icon {
  height: 20px;
  width: 15px; }
  @media only screen and (min-width: 960px) and (max-width: 1248px) {
  .checkout-card-form {
    max-width: 90%; } }
  @media only screen and (min-width: 960px) {
  .checkout-card-form .order-receipt__wrapper {
    position: relative; }
    .checkout-card-form .order-receipt__wrapper .marmita-toggle {
      position: absolute;
      right: 20px;
      top: 20px; } }
  @media only screen and (max-width: 959px) {
  .checkout-card-form .btn[type='submit'] {
    width: 100%; } }

.debit-disclaimer-dialog {
  padding: 20px; }
  .debit-disclaimer-dialog__title {
    color: #3f3e3e;
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-align: center; }
  .debit-disclaimer-dialog__description {
    color: #a6a5a5;
    font-size: 1rem;
    line-height: 22px;
    margin: 0 0 10px 0;
    text-align: center; }
  .debit-disclaimer-dialog__icon {
    display: block;
    margin: 0 auto 20px;
    max-width: 48px; }

.online-payment__debit-disclaimer {
  color: #a6a29f;
  font-size: 0.9375rem;
  margin: 0 auto 20px;
  text-align: center;
  width: 200px; }

.online-payment__cards-list {
  display: flex;
  justify-content: space-around;
  margin: 0 auto 20px;
  max-width: 180px; }

.online-payment__card-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 25px;
  width: 29px; }

.online-payment__card-item img {
    max-width: 100%;
    max-height: 100%; }

.online-payment__question-button {
  background: none;
  border-radius: 100%;
  border: 1px solid #a6a29f;
  color: #a6a29f;
  font-size: 0.6875rem;
  height: 18px;
  line-height: 7px;
  padding: 5px;
  text-align: center;
  width: 18px;
  margin-left: 5px; }

.address-icon {
  justify-content: center;
  width: 100%;
  display: none; }
  @media only screen and (max-width: 767px) {
    .address-icon--mobile {
      display: flex; } }
  @media only screen and (min-width: 768px) {
    .address-icon--desktop {
      display: flex; } }
  @-webkit-keyframes ballon-1-animation {
  0% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px); }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px); } }
  @keyframes ballon-1-animation {
  0% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px); }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px); } }
  @-webkit-keyframes ballon-2-animation {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }
  @keyframes ballon-2-animation {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }
  @-webkit-keyframes plant-animation {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0); }
  50% {
    -webkit-transform: rotatez(5deg);
            transform: rotatez(5deg); }
  100% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0); } }
  @keyframes plant-animation {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0); }
  50% {
    -webkit-transform: rotatez(5deg);
            transform: rotatez(5deg); }
  100% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0); } }
  .address-icon #ballon-1 {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-animation: ballon-1-animation 6s infinite;
            animation: ballon-1-animation 6s infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  .address-icon #ballon-2 {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-animation: ballon-2-animation 6s infinite;
            animation: ballon-2-animation 6s infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  .address-icon #plant-1 {
    -webkit-transform-origin: 150px 90px;
            transform-origin: 150px 90px;
    -webkit-animation: plant-animation 5s infinite;
            animation: plant-animation 5s infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  .address-icon #plant-2 {
    -webkit-transform-origin: 76px 89px;
            transform-origin: 76px 89px;
    -webkit-animation: plant-animation 4s infinite;
            animation: plant-animation 4s infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }

.address-list {
  display: grid;
  grid-auto-rows: auto;
  gap: 10px; }
  @media only screen and (min-width: 768px) {
    .address-list {
      width: 100%; } }
  @media only screen and (min-width: 768px) {
    .address-list__search-button {
      display: none; } }

.loop-schedule {
  padding: 26px 20px; }
  @media only screen and (min-width: 768px) {
    .loop-schedule {
      padding: 26px 0; } }
  .loop-schedule__title {
    color: #3e3e3e;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -1px;
    margin: 0 0 10px; }
  @media only screen and (min-width: 768px) {
      .loop-schedule__title {
        font-size: 1.5rem; } }
  .loop-schedule__sub-title {
    display: block;
    font-size: 0.875rem;
    color: #717171;
    padding: 0 0 20px;
    font-weight: 400; }
  @media only screen and (min-width: 768px) {
      .loop-schedule__sub-title {
        font-size: 1rem; } }
  .loop-schedule__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 110px));
    grid-gap: 16px;
    min-height: 52px; }
  .loop-schedule__btn-selected--checked {
    border: 1px solid #ffe115;
    color: #ffe115;
    transition: 0.4s ease-in-out; }

.address-login {
  display: grid;
  grid-template-rows: 20px 20px 50px;
  grid-row-gap: 5px;
  text-align: center;
  align-self: end; }
  @media only screen and (max-width: 374px) {
    .address-login {
      grid-template-rows: 20px 40px 50px; } }
  .address-login__title {
    font-size: 1rem;
    line-height: 20px;
    font-weight: 400;
    color: #595756; }
  .address-login__description {
    color: #a6a5a5;
    font-size: 0.875rem;
    line-height: 17px;
    font-weight: 300; }
  .address-login .btn {
    margin: 0; }

.loop-schedule-placeholder {
  padding: 26px 20px; }
  @media only screen and (min-width: 768px) {
    .loop-schedule-placeholder {
      padding: 26px 0; } }
  .loop-schedule-placeholder__title {
    background-color: #e6e6e6;
    width: 100%;
    margin: 0 0 10px;
    display: block;
    height: 30px; }
  @media only screen and (min-width: 768px) {
      .loop-schedule-placeholder__title {
        width: 300px; } }
  .loop-schedule-placeholder__sub-title {
    display: block;
    background-color: #e6e6e6;
    padding: 0 0 20px;
    width: 95%; }
  @media only screen and (min-width: 768px) {
      .loop-schedule-placeholder__sub-title {
        width: 290px; } }
  .loop-schedule-placeholder__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 110px));
    grid-gap: 16px;
    min-height: 52px; }
  .loop-schedule-placeholder .btn-selected {
    display: block;
    width: 109px;
    height: 51px;
    margin: 16px 0;
    background-color: #e6e6e6; }

.address-options__container {
  align-self: flex-start;
  background: #ffe115;
  display: flex;
  opacity: 0;
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 10px;
  z-index: 2; }
  @media only screen and (min-width: 960px) {
    .address-options__container {
      align-self: center;
      background: transparent; }
      .address-options__container .btn-icon svg {
        color: #ffe115;
        fill: #ffe115; } }
  .address-options__container .btn-icon {
    -webkit-animation: fadeIn 0.3s ease 1 forwards;
            animation: fadeIn 0.3s ease 1 forwards;
    cursor: pointer;
    margin: 0 18px 0 0;
    width: 25px; }
  .address-options__container .btn-icon:last-child {
      margin-right: 0; }

.loop-schedule-container {
  padding: 20px;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .loop-schedule-container {
      padding: 40px; } }
  .loop-schedule-container__title {
    font-size: 1.125rem;
    line-height: 1.375rem;
    color: #3e3e3e;
    font-weight: 500;
    margin: 0 0 10px; }
  @media only screen and (min-width: 768px) {
      .loop-schedule-container__title {
        font-size: 1.125rem;
        line-height: 1.625rem; } }
  .loop-schedule-container__description {
    color: #717171;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 300;
    margin: 0 auto 30px; }
  @media only screen and (min-width: 768px) {
      .loop-schedule-container__description {
        max-width: 500px; } }
  @media only screen and (min-width: 320px) {
      .loop-schedule-container__description {
        font-size: 1rem;
        line-height: 1.375rem;
        max-width: 90%; } }
  .loop-schedule-container__btn {
    color: #ffe115;
    background: none;
    padding: 0 0 0 4px;
    height: auto; }
  .loop-schedule-container__btn:hover:enabled {
      background: none;
      color: #c2121f;
      transition: 0.5s ease-in-out; }

.address-delivery-bar {
  max-width: 100%;
  padding: 0 20px;
  text-align: left;
  height: 65px;
  display: flex;
  justify-content: center;
  flex-direction: column; }
  .address-delivery-bar__title {
    color: #fed298;
    font-size: 0.9375rem;
    margin: 0 0 1px 0; }
  .address-delivery-bar__address {
    color: #f6f5f5;
    font-size: 1.125rem;
    margin: 0; }

.address-list-step {
  position: relative;
  display: grid;
  min-height: 100%;
  width: 100%;
  background-color: white;
  grid-row-gap: 20px;
  grid-auto-rows: -webkit-min-content auto;
  grid-auto-rows: min-content auto; }
  @media only screen and (max-width: 559px) {
    .address-list-step--with-return-button {
      grid-auto-rows: 40px -webkit-min-content auto;
      grid-auto-rows: 40px min-content auto; } }
  .address-list-step--centralize-content {
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content; }
  .address-list-step__container {
    display: grid;
    grid-row-gap: 20px;
    grid-auto-rows: 40px 54px -webkit-min-content auto;
    grid-auto-rows: 40px 54px min-content auto;
    opacity: 0;
    height: 0;
    overflow: hidden; }
  .address-list-step__container--authenticated {
      grid-auto-rows: -webkit-min-content;
      grid-auto-rows: min-content; }
  .address-list-step__container--visible {
      height: auto;
      opacity: 1;
      overflow: visible; }
  .address-list-step__title {
    color: #3e3e3e;
    font-size: 1.125rem;
    line-height: 22px;
    text-align: center; }
  .address-list-step__back-btn {
    margin-top: 10px; }
  @media only screen and (min-width: 768px) {
      .address-list-step__back-btn {
        display: none; } }

.voucher-rules-modal {
  width: 100%;
  height: 560px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  color: #3e3e3e; }
  @media only screen and (min-width: 768px) {
    .voucher-rules-modal {
      width: 600px;
      height: 100%; } }
  .voucher-rules-modal .marmita-modal__inner-content {
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    position: relative;
    padding: 0; }
  @media only screen and (min-width: 768px) {
      .voucher-rules-modal .marmita-modal__inner-content {
        height: 612px; } }
  .voucher-rules-modal__overlay {
    background-color: rgba(113, 113, 113, 0.9);
    z-index: 10001; }
  .voucher-rules-modal .marmita-modal__actions {
    position: relative; }
  .voucher-rules-modal__container {
    height: 100%;
    position: relative;
    color: #3e3e3e;
    padding: 32px; }
  @media only screen and (min-width: 768px) {
      .voucher-rules-modal__container {
        padding: 10px 70px; } }
  .voucher-rules-modal__icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 32px;
    display: block; }
  .voucher-rules-modal__icon .dash-icon-voucher {
      -webkit-animation: animation-voucher 5s ease-in-out infinite;
              animation: animation-voucher 5s ease-in-out infinite; }
  @media only screen and (min-width: 768px) {
      .voucher-rules-modal__icon {
        width: 94px;
        height: 94px; } }
  .voucher-rules-modal__title {
    font-size: 1.125rem;
    line-height: 1.375rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 0 0 8px;
    color: #3e3e3e; }
  @media only screen and (min-width: 768px) {
      .voucher-rules-modal__title {
        font-size: 1.5rem;
        line-height: 1.875rem; } }
  .voucher-rules-modal__short-description {
    padding: 0 0 24px;
    text-align: center;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #3e3e3e; }
  @media only screen and (min-width: 768px) {
      .voucher-rules-modal__short-description {
        font-size: 1rem;
        line-height: 1.25rem; } }
  .voucher-rules-modal__btn-see-merchants {
    width: 100%;
    display: grid;
    font-size: 0.875rem;
    line-height: 1.125rem;
    text-align: center;
    font-weight: 500;
    margin: 0 0 24px;
    padding: 0;
    text-decoration: unset;
    border-radius: 4px;
    color: #ffffff; }
  @media only screen and (min-width: 768px) {
      .voucher-rules-modal__btn-see-merchants {
        padding: 16px 0;
        margin: 0 0 32px;
        font-size: 1rem;
        line-height: 1.25rem; } }
  .voucher-rules-modal__btn-see-merchants:hover:enabled {
      color: #ffffff;
      background: #c2121f; }
  .voucher-rules-modal__title-rules {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 500;
    padding: 0 0 8px;
    display: block; }
  .voucher-rules-modal__rules {
    list-style: disc;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 300;
    color: #717171; }
  @-webkit-keyframes animation-voucher {
  0% {
    -webkit-transform: skew(-1deg);
            transform: skew(-1deg); }
  50% {
    -webkit-transform: skew(2deg);
            transform: skew(2deg); }
  100% {
    -webkit-transform: skew(-1deg);
            transform: skew(-1deg); } }
  @keyframes animation-voucher {
  0% {
    -webkit-transform: skew(-1deg);
            transform: skew(-1deg); }
  50% {
    -webkit-transform: skew(2deg);
            transform: skew(2deg); }
  100% {
    -webkit-transform: skew(-1deg);
            transform: skew(-1deg); } }

.voucher-container {
  width: 100%;
  max-width: 1366px !important;
  margin: auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  grid-gap: 30px;
  padding: 20px 40px; }
  @media only screen and (min-width: 960px) {
    .voucher-container {
      padding: 20px 30px 20px 50px;
      grid-template-columns: repeat(3, minmax(266px, 380px)); } }
  .voucher-card {
  background-color: white;
  width: 100%;
  padding: 0;
  border: 1px solid #f7f7f7;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px; }
  @media only screen and (min-width: 960px) {
    .voucher-card {
      display: inline-grid;
      grid-template: 'header' 'shortDescription' 'restaurantButton' 'infos' 'rules' 'footer';
      min-height: 190px;
      max-height: 384px; } }
  .voucher-card--disabled {
    color: #717171; }
  .voucher-card--disabled .voucher-card__title {
      color: #a6a6a6; }
  .voucher-card__header {
    position: relative;
    display: grid;
    grid-area: header;
    grid-template: 1fr / 32px 1fr 24px;
    grid-column-gap: 16px;
    padding: 20px; }
  @media only screen and (min-width: 1248px) {
      .voucher-card__header {
        grid-template-columns: 50px 1fr;
        grid-auto-flow: column dense;
        grid-column-gap: 28px;
        padding: 24px 40px; } }
  .voucher-card__icon {
    width: 32px;
    height: 32px; }
  @media only screen and (min-width: 1248px) {
      .voucher-card__icon {
        width: 50px;
        height: 50px; } }
  .voucher-card__title {
    font-size: 1rem;
    color: #3e3e3e;
    margin: 0;
    display: flex;
    align-items: center; }
  @media only screen and (min-width: 1248px) {
      .voucher-card__title {
        font-size: 1.125rem; } }
  .voucher-card__radio {
    display: flex;
    align-items: center; }
  .voucher-card__short-description {
    display: grid;
    grid-area: shortDescription;
    padding: 0 20px 20px;
    color: #717171;
    font-size: 0.875rem;
    font-weight: 300; }
  @media only screen and (min-width: 1248px) {
      .voucher-card__short-description {
        padding: 0 40px 24px; } }
  .voucher-card__infos {
    display: grid;
    grid-area: infos;
    grid-template: 1fr / 50% 50%;
    padding: 0 20px 12px; }
  @media only screen and (min-width: 1248px) {
      .voucher-card__infos {
        padding: 0 40px 12px; } }
  .voucher-card__terms {
    background-color: #ffffff;
    color: #ffe115;
    font-size: 0.875rem;
    font-weight: 500;
    border: 0;
    text-align: left;
    padding: 0;
    cursor: pointer; }
  .voucher-card__expiration-date {
    color: #a6a6a6;
    font-size: 0.875rem;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
  .voucher-card__block {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: grid;
    grid-area: footer;
    padding: 10px 20px;
    text-align: center;
    background-color: #f7f7f7;
    color: #717171;
    font-size: 0.75rem; }
  @media only screen and (min-width: 1248px) {
      .voucher-card__block {
        padding: 20px 40px; } }
  .voucher-card__cta-container {
    display: grid;
    grid-area: restaurantButton;
    min-height: 60px;
    padding: 0 20px 20px 20px; }
  .voucher-card__restaurants-link {
    border: 1px solid #ffe115;
    height: 40px;
    background: transparent;
    color: #ffe115;
    width: 100%; }
  .voucher-card__restaurants-link:hover {
      background: #ffe115;
      color: #fff; }
  .voucher-footer {
  display: grid;
  grid-area: footer;
  padding: 10px 20px;
  text-align: center;
  background-color: #f7f7f7;
  color: #717171;
  font-size: 0.875rem; }
  @media only screen and (min-width: 1248px) {
    .voucher-footer {
      min-height: 50px;
      padding: 20px 40px; } }
  .voucher-footer__block {
    display: grid;
    align-items: center;
    grid-area: footer;
    padding: 10px 20px;
    background-color: #f7f7f7;
    color: #717171;
    font-size: 0.875rem;
    grid-template: 1fr / 20px 1fr; }
  @media only screen and (min-width: 1248px) {
      .voucher-footer__block {
        padding: 20px 40px;
        min-height: 50px; } }
  @media only screen and (min-width: 768px) {
      .voucher-footer__block {
        padding: 10px 40px; } }
  .voucher-footer__available {
    display: flex;
    align-items: center;
    justify-content: center; }
  .voucher-footer__icon-block {
    width: 12px;
    display: inline-flex; }
  .voucher-footer__text-block {
    display: inline-flex;
    align-items: center;
    font-size: 0.75em; }

.voucher-slim-card {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 12px 16px;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  height: 80px;
  width: 100%;
  cursor: default; }
  @media only screen and (min-width: 960px) {
    .voucher-slim-card {
      cursor: pointer; } }
  .voucher-slim-card__icon {
    width: 34px;
    height: 34px; }
  .voucher-slim-card__header {
    padding-left: 12px;
    display: flex;
    flex-direction: column; }
  .voucher-slim-card__cta {
    margin-left: auto; }
  .voucher-slim-card__cta > button {
      border: 0;
      padding: 0;
      margin-right: 0;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg); }
  .voucher-slim-card__cta > button > .icon-marmita {
        height: 15px;
        width: 15px; }
  .voucher-slim-card__cta > button > .icon-marmita path {
          fill: #ffe115; }
  .voucher-slim-card__title {
    font-size: 1rem;
    color: #3e3e3e;
    margin: 0;
    display: flex;
    align-items: center;
    padding-bottom: 5px; }
  .voucher-slim-card__short-description {
    color: #717171;
    font-size: 0.75rem; }
  @media only screen and (min-width: 375px) {
      .voucher-slim-card__short-description {
        font-size: 0.875rem; } }
  .voucher-slim-card__expiration-date {
    color: #a6a6a6;
    font-size: 0.875rem;
    text-align: right; }

.loyalty-details-modal .marmita-modal__actions {
  position: relative; }

.loyalty-details {
  height: 100%;
  position: relative;
  color: #3e3e3e;
  padding: 32px 20px; }

@media only screen and (min-width: 768px) {
    .loyalty-details {
      padding: 10px 70px; } }

.loyalty-details__steps-wrapper {
    margin: 0 0 24px;
    height: 60px;
    padding: 0 20px;
    border: 1px solid #f2f2f2;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }

.loyalty-details__steps {
    display: flex;
    justify-content: space-between;
    width: 100%; }

.loyalty-details__steps p {
      display: flex;
      flex-direction: column;
      align-self: flex-end;
      margin: 0 0 6px 0;
      font-size: 0.625rem;
      line-height: 0.875rem;
      color: #a6a6a6; }

.loyalty-details__box-icon svg {
    width: 24px;
    height: 24px; }

.loyalty-details__nav-header {
    padding: 20px;
    display: flex;
    align-items: center; }

.loyalty-details-nav-header__button {
    margin: 0;
    width: 18px;
    height: 18px; }

.loyalty-details-nav-header__title {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #3e3e3e;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    width: 100%; }

.loyalty-details-modal {
    width: 100%;
    height: 100vh;
    display: flex;
    margin: 0 auto;
    align-items: center;
    color: #3e3e3e; }

@media only screen and (min-width: 768px) {
      .loyalty-details-modal {
        width: 650px; } }

.loyalty-details-modal .marmita-modal__inner-content {
      background: white;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      position: relative;
      padding: 0; }

@media only screen and (min-width: 768px) {
        .loyalty-details-modal .marmita-modal__inner-content {
          height: 612px; } }

.loyalty-details-modal__overlay {
      background-color: rgba(113, 113, 113, 0.9);
      z-index: 10001; }

.loyalty-details__logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: block;
    border-radius: 60px;
    border: 1px solid #dcdcdc; }

@media only screen and (min-width: 768px) {
      .loyalty-details__logo {
        width: 74px;
        height: 74px; } }

.loyalty-details__title {
    font-size: 1.25rem;
    line-height: 1.5625rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 0 0 10px;
    color: #3e3e3e; }

@media only screen and (min-width: 768px) {
      .loyalty-details__title {
        font-size: 1.5rem;
        line-height: 1.875rem; } }

.loyalty-details__description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
    margin: 0;
    padding: 0 0 24px;
    font-weight: 100;
    color: #3e3e3e; }

@media only screen and (min-width: 768px) {
      .loyalty-details__description {
        font-weight: normal;
        font-size: 1rem; } }

.loyalty-details__btn-see-menu {
    width: 100%;
    display: block;
    font-size: 1rem;
    line-height: 1.25rem;
    text-align: center;
    font-weight: 500;
    margin: 0 0 32px;
    padding: 20px;
    background-color: #ffe115;
    text-decoration: unset;
    border-radius: 4px;
    color: #ffffff; }

.loyalty-details__btn-see-menu:hover:enabled {
      color: #ffffff;
      background: #c2121f; }

.loyalty-details-rules {
    padding-left: 20px; }

.loyalty-details-rules__title {
      font-size: 1rem;
      line-height: 1.375rem;
      font-weight: 500;
      margin: 0; }

.loyalty-details-rules__item {
      list-style: disc;
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 300;
      color: #717171; }

.loyalty-details-rules > :nth-child(odd) {
      padding-top: 10px;
      padding-bottom: 10px; }

.address-search-step {
  position: relative;
  display: grid;
  min-height: 100%;
  width: 100%;
  background-color: white;
  grid-row-gap: 20px;
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content; }
  .address-search-step__title {
    color: #3e3e3e;
    font-size: 1.125rem;
    line-height: 22px;
    text-align: center;
    display: none; }
  @media only screen and (min-width: 768px) {
      .address-search-step__title {
        display: block; } }
  .address-search-step__results {
    padding-top: 5px; }
  .address-search-step .btn-address {
    border-bottom: 1px solid #f7f7f7; }
  .address-search-step .no-results {
    display: grid;
    margin-bottom: auto;
    grid-row-gap: 5px;
    text-align: center; }
  @media only screen and (min-width: 768px) {
      .address-search-step .no-results {
        padding-top: 40px;
        margin: auto;
        width: 40%; } }
  .address-search-step .no-results__description {
      color: #a6a5a5;
      font-size: 0.875rem;
      line-height: 20px;
      font-weight: 300; }
  .address-search-step .no-results .btn {
      margin: 0; }
  .address-search-step .marmita-error-message {
    justify-content: center; }

.address-map-step__no-api {
  height: 100%;
  position: relative;
  display: grid;
  align-items: center;
  justify-content: center; }

.address-map-step__powered-by {
  display: none; }

.address-map-step__complete-form {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  background: linear-gradient(0deg, white 94%, rgba(255, 255, 255, 0.2) 100%);
  justify-content: center;
  align-items: end;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  padding-top: 40px;
  height: calc(100% - 90px); }

.address-map-step__complete-form--active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; }

.address-map-step__complete-form--active ~ .address-maps__map {
      height: 150px; }

.address-map-step__complete-form--active ~ .address-maps__map .address-maps-header {
        background: transparent; }

.address-map-step__complete-form--active .address-map-step__powered-by {
      display: block;
      position: absolute;
      top: -20px;
      right: 20px; }

.address-map-step__complete-form--active .address-map-step__powered-by svg {
        height: 14px;
        width: 116px; }

.address-modal {
  height: 100%;
  padding: 0; }
  @media only screen and (min-width: 768px) {
    .address-modal {
      height: calc(100vh - 100px);
      max-height: 584px;
      width: 694px; } }
  .address-modal .marmita-modal__inner-content {
    display: grid; }
  .address-modal .btn-address {
    margin: 0; }
  .address-modal-overlay > .ReactModal__Content--after-open {
  border-radius: 0; }
  @media only screen and (min-width: 768px) {
    .address-modal-overlay > .ReactModal__Content--after-open {
      top: 80px;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      border-radius: 4px; } }

.btn-address {
  width: 100%;
  min-height: 40px;
  padding: 15px;
  border: 0;
  position: relative;
  color: #717171;
  background: transparent;
  overflow: hidden;
  text-decoration: none;
  transition: all 200ms ease-in-out;
  height: auto;
  opacity: 1;
  visibility: visible;
  cursor: pointer; }
  .btn-address button {
    border: 0;
    background: transparent; }
  @media only screen and (min-width: 768px) {
      .btn-address button {
        cursor: pointer; } }
  .btn-address--full-size {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute; }
  .btn-address--disabled {
    pointer-events: none;
    cursor: wait;
    opacity: 0.5; }
  @media only screen and (min-width: 768px) {
    .btn-address:hover, .btn-address:active {
      color: #3e3e3e; }
      .btn-address:hover .btn-address__icon--right, .btn-address:active .btn-address__icon--right {
        fill: #3e3e3e; }
      .btn-address:hover .icon-marmita--location path[stroke='#3e3e3e'], .btn-address:hover .icon-marmita--house path[stroke='#3e3e3e'], .btn-address:hover .icon-marmita--coffee-cup path[stroke='#3e3e3e'], .btn-address:hover .icon-marmita--synchronize-arrow path[stroke='#3e3e3e'], .btn-address:active .icon-marmita--location path[stroke='#3e3e3e'], .btn-address:active .icon-marmita--house path[stroke='#3e3e3e'], .btn-address:active .icon-marmita--coffee-cup path[stroke='#3e3e3e'], .btn-address:active .icon-marmita--synchronize-arrow path[stroke='#3e3e3e'] {
        stroke: #3e3e3e; }
      .btn-address:hover .icon-marmita--location path[fill='#3e3e3e'], .btn-address:hover .icon-marmita--house path[fill='#3e3e3e'], .btn-address:hover .icon-marmita--coffee-cup path[fill='#3e3e3e'], .btn-address:hover .icon-marmita--synchronize-arrow path[fill='#3e3e3e'], .btn-address:active .icon-marmita--location path[fill='#3e3e3e'], .btn-address:active .icon-marmita--house path[fill='#3e3e3e'], .btn-address:active .icon-marmita--coffee-cup path[fill='#3e3e3e'], .btn-address:active .icon-marmita--synchronize-arrow path[fill='#3e3e3e'] {
        fill: #3e3e3e; }
      .btn-address:hover .icon-marmita--location .shadow-bg, .btn-address:hover .icon-marmita--house .shadow-bg, .btn-address:hover .icon-marmita--coffee-cup .shadow-bg, .btn-address:hover .icon-marmita--synchronize-arrow .shadow-bg, .btn-address:active .icon-marmita--location .shadow-bg, .btn-address:active .icon-marmita--house .shadow-bg, .btn-address:active .icon-marmita--coffee-cup .shadow-bg, .btn-address:active .icon-marmita--synchronize-arrow .shadow-bg {
        opacity: 0.2; } }
  .btn-address .icon-marmita svg path,
  .btn-address .icon-marmita svg g {
    transition: all 200ms ease-in-out; }
  .btn-address--default {
    border-radius: 8px;
    border: 1px solid #f2f2f2; }
  @media only screen and (min-width: 768px) {
      .btn-address--default:hover, .btn-address--default:active {
        color: #3e3e3e;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 4px 16px rgba(0, 0, 0, 0.08);
        border-color: transparent; } }
  .btn-address--simple .icon-marmita path[stroke='#3e3e3e'] {
    stroke: #a6a6a6; }
  .btn-address--simple .icon-marmita path[fill='#3e3e3e'] {
    fill: #a6a6a6; }
  .btn-address--simple .btn-address__info--description {
    color: #a6a6a6; }
  .btn-address--is-active {
    border-color: #ffe115;
    color: #3e3e3e; }
  .btn-address--is-active .btn-address__icon--right {
      fill: #3e3e3e; }
  .btn-address--is-active .icon-marmita--location path[stroke='#3e3e3e'], .btn-address--is-active .icon-marmita--house path[stroke='#3e3e3e'], .btn-address--is-active .icon-marmita--coffee-cup path[stroke='#3e3e3e'], .btn-address--is-active .icon-marmita--synchronize-arrow path[stroke='#3e3e3e'] {
      stroke: #3e3e3e; }
  .btn-address--is-active .icon-marmita--location path[fill='#3e3e3e'], .btn-address--is-active .icon-marmita--house path[fill='#3e3e3e'], .btn-address--is-active .icon-marmita--coffee-cup path[fill='#3e3e3e'], .btn-address--is-active .icon-marmita--synchronize-arrow path[fill='#3e3e3e'] {
      fill: #3e3e3e; }
  .btn-address--is-active .icon-marmita--location .shadow-bg, .btn-address--is-active .icon-marmita--house .shadow-bg, .btn-address--is-active .icon-marmita--coffee-cup .shadow-bg, .btn-address--is-active .icon-marmita--synchronize-arrow .shadow-bg {
      opacity: 0.2; }
  .btn-address--is-open-actions .btn-address__icon--left {
    margin-right: 20px;
    width: 90px;
    min-width: 90px; }
  .btn-address--is-open-actions .icon-marmita--more-dots {
    fill: #ffe115; }
  .btn-address--is-open-actions .btn-address__icon-actions {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  .btn-address--is-open-actions .btn-address__icon-action path {
    color: #ffe115;
    fill: #ffe115; }
  .btn-address--is-open-actions .btn-address__icon-action:hover {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  .btn-address--is-open-actions .btn-address__icon-action:hover path {
      color: #c41835;
      fill: #c41835; }
  .btn-address__description {
    font-size: 0.88rem;
    line-height: 20px; }
  .btn-address__container {
    display: flex; }
  .btn-address__info {
    gap: 4px;
    display: grid;
    text-align: left;
    align-content: center;
    flex-grow: 1;
    transition: all 200ms ease-in-out;
    word-break: break-word; }
  .btn-address__info--description {
      line-height: 18px;
      font-size: 14px;
      font-weight: 100; }
  .btn-address__icon--left {
    display: grid;
    align-self: center;
    width: 50px;
    transition: all 200ms ease-in-out;
    min-width: 50px;
    max-height: 40px; }
  .btn-address__icon--left .icon-marmita {
      height: 25px;
      width: 25px; }
  .btn-address__icon--right {
    width: 35px;
    min-width: 35px;
    height: 35px;
    padding: 0 5px;
    display: flex;
    align-content: start;
    -webkit-transform: translate(10px);
            transform: translate(10px);
    fill: #a6a6a6; }
  .btn-address__icon--right button {
      height: 25px; }
  .btn-address__delete-confirmation {
    opacity: 0;
    visibility: hidden;
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 0;
    transition: all 200ms ease; }
  .btn-address__delete-confirmation .icon-marmita {
      height: 30px;
      width: 30px;
      transition: -webkit-transform 200ms ease;
      transition: transform 200ms ease;
      transition: transform 200ms ease, -webkit-transform 200ms ease; }
  .btn-address__delete-confirmation .icon-marmita svg path,
      .btn-address__delete-confirmation .icon-marmita svg g {
        transition: none; }
  .btn-address__delete-confirmation .icon-marmita--error:hover {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); }
  .btn-address__delete-confirmation .icon-marmita--error:hover svg {
          color: #ffe115;
          fill: #ffe115; }
  .btn-address__delete-confirmation .icon-marmita--confirm:hover {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); }
  .btn-address__delete-confirmation .icon-marmita--confirm:hover svg {
          color: #50a773;
          fill: #50a773; }
  .btn-address__icon-actions {
    grid-gap: 0 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    transition: all 200ms ease-in-out; }
  .btn-address__icon-actions--delete-confirming .btn-address__delete-confirmation {
      display: flex;
      visibility: visible;
      opacity: 1;
      height: 40px; }
  .btn-address__icon-actions--delete-confirming .btn-address--btn-actions {
      opacity: 0;
      height: 0; }
  .btn-address--btn-actions {
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 40px;
    transition: all 200ms ease; }
  .btn-address--hidden {
    height: 0;
    min-height: 0;
    padding: 0 15px;
    opacity: 0; }
  .btn-address--display-none {
    display: none; }

.address-step-shell {
  height: 100%;
  padding: 20px 0;
  overflow-y: scroll;
  scrollbar-color: #dcdcdc transparent;
  background-color: white; }
  .address-step-shell::-webkit-scrollbar-track {
    border-radius: 50px;
    background-color: transparent; }
  .address-step-shell::-webkit-scrollbar {
    width: 4px;
    background-color: transparent; }
  .address-step-shell::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: #dcdcdc; }
  @media only screen and (min-width: 1248px) {
    .address-step-shell {
      padding: 30px 0; } }
  .address-step-shell > div {
    padding: 0 20px; }
  @media only screen and (min-width: 1248px) {
      .address-step-shell > div {
        padding: 0 30px; } }

.address-search-input {
  position: relative;
  width: 100%; }
  .address-search-input--sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1; }
  .address-search-input--sticky::after {
      content: '';
      width: calc(100% + 40px);
      height: 100px;
      top: -22px;
      left: -40px;
      background-color: white;
      position: absolute;
      z-index: -1; }
  @media only screen and (min-width: 768px) {
        .address-search-input--sticky::after {
          left: -20px; } }
  .address-search-input--sticky::before {
      content: '';
      position: absolute;
      bottom: -22px;
      width: calc(100% + 40px);
      height: 22px;
      left: -40px;
      box-shadow: 0px 5px 7px 0px rgba(255, 255, 255, 0.9);
      z-index: -1; }
  @media only screen and (min-width: 768px) {
        .address-search-input--sticky::before {
          left: -20px; } }
  .address-search-input__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 26px;
    height: 26px;
    margin: 0; }
  .address-search-input__icon svg {
      color: #ffe115;
      fill: #ffe115; }
  @media only screen and (min-width: 768px) {
      .address-search-input__icon {
        left: 25px; } }
  .address-search-input__field {
    display: flex;
    height: 54px;
    width: 100%;
    padding: 5px 35px 5px 50px;
    border: 1px solid #f2f2f2;
    font-size: 1rem;
    line-height: 1.25em;
    font-weight: 300;
    background: #f7f7f7;
    border-radius: 4px; }
  .address-search-input__field::-webkit-input-placeholder {
      color: #a6a6a5;
      font-size: 1rem;
      font-weight: 300; }
  .address-search-input__field:-ms-input-placeholder {
      color: #a6a6a5;
      font-size: 1rem;
      font-weight: 300; }
  .address-search-input__field::-ms-input-placeholder {
      color: #a6a6a5;
      font-size: 1rem;
      font-weight: 300; }
  .address-search-input__field::placeholder {
      color: #a6a6a5;
      font-size: 1rem;
      font-weight: 300; }
  @media only screen and (min-width: 768px) {
      .address-search-input__field {
        padding: 5px 35px 5px 70px; } }
  .address-search-input__erase-button {
    background: transparent;
    border: none;
    margin: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  .address-search-input__button {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: text; }
  .address-search-input__powered-by {
    position: absolute;
    bottom: -25px;
    right: 0; }
  .address-search-input__powered-by svg {
      height: 14px;
      width: 116px; }

.restaurant-rating {
  color: #e7a74e;
  line-height: 0;
  font-size: 0.9375rem;
  flex-shrink: 0;
  height: auto;
  min-width: 40px; }
  .restaurant-rating .icon-marmita {
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0;
    position: relative;
    top: -1px; }
  .restaurant-rating .icon-marmita svg {
      color: #e7a74e;
      fill: #e7a74e; }
  .restaurant-rating .icon-marmita svg {
      width: 100%;
      height: 100%; }
  .restaurant-rating--no-rating {
    color: #c4c4c4; }
  .restaurant-rating--no-rating .icon-marmita svg {
      color: #c4c4c4;
      fill: #c4c4c4; }
  .restaurant-rating__button {
    padding-left: 0;
    padding-right: 0;
    margin: 0; }
  .restaurant-rating__rating-wrapper {
    position: absolute;
    right: 0;
    top: 0; }
  @media only screen and (min-width: 960px) {
      .restaurant-rating__rating-wrapper {
        position: initial;
        right: inherit;
        top: inherit; } }
  .restaurant-rating__rating-count {
    margin: 0 0 0 10px;
    color: #a6a6a6;
    font-weight: 300;
    font-size: 1rem;
    display: none; }
  @media only screen and (min-width: 768px) {
      .restaurant-rating__rating-count {
        display: inline-block; } }

.voucher-badge {
  padding: 8px;
  color: #2e6788;
  background-color: #eef3f5;
  border-radius: 0 0 4px 4px;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  display: inline-flex;
  align-items: center;
  width: 100%; }
  .voucher-badge .icon-marmita {
    margin-right: 6px;
    height: 12px;
    width: 12px; }
  .voucher-badge .icon-marmita svg {
      color: #2e6788;
      fill: #2e6788; }
  .voucher-badge__description {
    height: 12px; }
  @media only screen and (min-width: 960px) {
    .voucher-badge .icon-marmita {
      margin-right: 6px;
      height: 14px;
      width: 14px; } }

.address-maps-message {
  opacity: 0;
  visibility: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 172px;
  height: 60px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, calc(-50% - 80px)) scale(0.7);
          transform: translate(-50%, calc(-50% - 80px)) scale(0.7);
  background-color: white;
  border-radius: 4px;
  padding: 12px 16px;
  text-align: center;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  transition: all ease-in 50ms;
  pointer-events: none; }
  .address-maps-message:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    bottom: -9px;
    position: absolute; }
  .address-maps-message--active {
    opacity: 1;
    visibility: 1;
    -webkit-transform: translate(-50%, calc(-50% - 80px)) scale(1);
            transform: translate(-50%, calc(-50% - 80px)) scale(1); }
  .address-maps-message__title {
    color: #272727;
    font-size: 0.875rem;
    line-height: 1.125rem; }
  .address-maps-message__subtitle {
    color: #717171;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: lighter; }

.restaurant-card {
  display: grid;
  height: 90px;
  padding: 12px;
  border-radius: 4px;
  width: 100%;
  grid-template-columns: 60px 1px 1fr;
  grid-template-rows: 1fr 20px;
  grid-template-areas: 'figure divider title' 'figure divider content';
  grid-column-gap: 12px; }
  .restaurant-card--with-voucher {
    border-radius: 4px 4px 0 0; }
  .restaurant-card__wrapper {
    border: 1px solid #f2f2f2;
    transition: 200ms;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    border-radius: 4px;
    text-decoration: none; }
  .restaurant-card__wrapper:hover {
      border: 1px solid #dbdad9; }
  @media only screen and (min-width: 960px) {
    .restaurant-card {
      height: 130px;
      grid-template-columns: 85px 1px 1fr;
      grid-column-gap: 20px;
      padding: 20px;
      cursor: pointer; } }
  .restaurant-card:before {
    grid-area: divider;
    content: '';
    width: 1px;
    background-color: #f2f2f2; }
  .restaurant-card h3 {
    grid-area: title;
    margin: 0;
    padding: 0; }
  .restaurant-card .restaurant-card__info, .restaurant-card .restaurant-card__footer {
    font-weight: 300;
    color: #717171;
    font-size: 0.875rem;
    line-height: 0.9375rem; }
  @media only screen and (min-width: 960px) {
      .restaurant-card .restaurant-card__info, .restaurant-card .restaurant-card__footer {
        font-size: 0.875rem;
        line-height: 1.0625rem; } }
  @media only screen and (max-width: 374px) {
      .restaurant-card .restaurant-card__info, .restaurant-card .restaurant-card__footer {
        font-size: 0.6875rem; } }
  .restaurant-card__status {
    position: absolute;
    margin: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #fff;
    border-radius: 4px;
    width: 54px;
    height: 54px; }
  @media only screen and (min-width: 960px) {
      .restaurant-card__status {
        font-size: 1rem;
        width: 85px;
        height: 85px; } }
  .restaurant-card__figure {
    grid-area: figure;
    background: #fff;
    overflow: hidden;
    position: relative;
    height: 100%;
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .restaurant-card__figure .restaurant-card__img-logo {
      width: 54px;
      height: 54px;
      border-radius: 4px;
      transition: 200ms;
      -o-object-fit: contain;
         object-fit: contain; }
  @media only screen and (min-width: 960px) {
        .restaurant-card__figure .restaurant-card__img-logo {
          width: 85px;
          height: 85px; } }
  .restaurant-card__figure .restaurant-card__img-cover {
      height: 100%;
      width: 100%; }
  .restaurant-card__header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;
    padding: 0 0 2px; }
  @media only screen and (min-width: 960px) {
      .restaurant-card__header {
        padding: 0 0 10px; } }
  .restaurant-card__header .restaurant-name {
      color: #3e3e3e;
      font-size: 0.875rem;
      line-height: 0.875rem;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      height: 18px; }
  @media only screen and (min-width: 960px) {
        .restaurant-card__header .restaurant-name {
          font-size: 1rem;
          line-height: 1rem; } }
  .restaurant-card__info {
    width: 100%;
    display: flex; }
  .restaurant-card__info .restaurant-rating {
      font-size: 0.75rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      line-height: 9px; }
  .restaurant-card__info .restaurant-rating svg {
        color: #e7a74e;
        fill: #e7a74e; }
  @media only screen and (min-width: 960px) {
        .restaurant-card__info .restaurant-rating {
          font-size: 0.875rem; } }
  .restaurant-card__info .restaurant-rating .icon-marmita {
        height: 10px;
        width: 10px;
        position: relative;
        margin: 0 5px 0 0;
        top: -1px; }
  @media only screen and (min-width: 960px) {
          .restaurant-card__info .restaurant-rating .icon-marmita {
            height: 12px;
            width: 12px;
            margin: 0 5px 0 0; } }
  .restaurant-card__info .restaurant-rating svg {
        height: 13px; }
  .restaurant-card__footer {
    align-items: center;
    margin: 0;
    width: 100%;
    display: flex; }
  .restaurant-card__super {
    height: 18px; }
  .restaurant-card__super .icon-marmita {
      position: relative;
      top: -3px;
      padding: 0; }
  .restaurant-card__super .icon-marmita svg {
        color: #e0040b;
        fill: #e0040b; }
  .restaurant-card .restaurant-card__mini-tag {
    margin: 0 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .restaurant-card .restaurant-card__mini-tag-icon {
      margin: 0 5px 0 2px;
      display: flex;
      max-width: 12px; }
  @media (min-width: 768px) {
        .restaurant-card .restaurant-card__mini-tag-icon svg {
          width: 14px; } }
  .restaurant-card .restaurant-card__mini-tag.green {
      color: #50a773; }
  .restaurant-card .restaurant-card__mini-tag.focused {
      background-color: #f6f5f5;
      padding: 2px 3px;
      border-radius: 4px;
      margin: 0; }

.address-maps-toast {
  opacity: 0;
  position: absolute;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 16px;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 480px;
  height: auto;
  top: 30px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  background-color: #EF5753;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  color: white;
  font-size: 0.875rem;
  line-height: 1.125rem;
  transition: all ease-in 150ms; }
  .address-maps-toast .icon-marmita {
    height: 14px;
    width: 14px;
    background-color: white;
    border-radius: 100%; }
  .address-maps-toast .icon-marmita svg {
      color: #ff7383;
      fill: #ff7383; }
  .address-maps-toast .icon-marmita svg {
      height: 18px;
      width: 18px;
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px); }
  .address-maps-toast--active {
    opacity: 1; }

.restaurant-menu-search {
  position: relative;
  width: 100%; }
  .restaurant-menu-search input::-webkit-input-placeholder {
    text-align: left;
    color: #717171;
    opacity: 0.7;
    font-size: 1rem; }
  .restaurant-menu-search input:-ms-input-placeholder {
    text-align: left;
    color: #717171;
    opacity: 0.7;
    font-size: 1rem; }
  .restaurant-menu-search input::-ms-input-placeholder {
    text-align: left;
    color: #717171;
    opacity: 0.7;
    font-size: 1rem; }
  .restaurant-menu-search input::placeholder {
    text-align: left;
    color: #717171;
    opacity: 0.7;
    font-size: 1rem; }
  .restaurant-menu-search .icon-marmita {
    position: absolute;
    left: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 26px;
    height: 26px;
    pointer-events: none; }
  .restaurant-menu-search .icon-marmita svg {
      color: #B1B1B1;
      fill: #B1B1B1; }
  .restaurant-menu-search__field {
    display: flex;
    height: 40px;
    width: 99%;
    padding-left: 55px;
    border: none;
    border-radius: 4px;
    font-size: 1rem; }
  .restaurant-menu-search .btn-icon {
    position: absolute;
    top: 0;
    right: 20px; }
  .restaurant-menu-search .btn-icon > canvas {
      color: #3e3e3e; }
  .restaurant-menu-search .btn-icon .icon-marmita--close {
      left: 0;
      height: 30px;
      width: 30px; }

.category-tag__label {
  color: #3f3e3e;
  border: 1px solid #f5f0eb;
  padding: 7px 10px;
  border-radius: 20px;
  transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: default; }
  @media only screen and (min-width: 960px) {
    .category-tag__label {
      cursor: pointer; } }
  .category-tag__label:hover {
    background: #f7f7f7; }
  .category-tag__input {
  display: none; }
  .category-tag__input:checked + label {
    padding: 7px 10px;
    color: #ffe115;
    background-color: #fcebea;
    border: 1px solid #fcebea;
    transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 20px; }
  .category-tag__input:checked + label:hover {
      background: #f6c1bd; }

.address-maps-header {
  position: absolute;
  width: 100%;
  display: grid;
  top: 0;
  left: 0;
  grid-template-columns: 50px 1fr 50px;
  padding: 27px 20px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.8) 25%, white 100%); }
  @media only screen and (min-width: 768px) {
    .address-maps-header {
      padding: 30px; } }
  .address-maps-header__description {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center; }
  .address-maps-header__title {
    font-size: 0.8125rem;
    color: #595756; }
  @media only screen and (min-width: 768px) {
      .address-maps-header__title {
        font-size: 1rem; } }
  .address-maps-header__title--placeholder {
      width: 160px;
      height: 16px;
      margin-bottom: 5px; }
  .address-maps-header__subtitle {
    font-size: 0.6875rem;
    color: #A6A6A6; }
  @media only screen and (min-width: 768px) {
      .address-maps-header__subtitle {
        font-size: 0.875rem; } }
  .address-maps-header__subtitle--placeholder {
      width: 250px;
      height: 14px; }
  .address-maps-header__back-btn {
    margin-left: 11px; }

.categories-list__form {
  display: flex;
  flex-direction: column;
  height: calc(100% - 57px); }
  .categories-list__form > .categories-list__content {
    overflow-y: auto;
    width: calc(100% - 8px);
    scrollbar-color: #dcdcdc transparent;
    margin: 10px 0 0;
    padding: 20px 30px; }
  .categories-list__form > .categories-list__content::-webkit-scrollbar-track {
      border-radius: 50px;
      background-color: transparent; }
  .categories-list__form > .categories-list__content::-webkit-scrollbar {
      width: 4px;
      background-color: transparent; }
  .categories-list__form > .categories-list__content::-webkit-scrollbar-thumb {
      border-radius: 50px;
      background-color: #dcdcdc; }
  .categories-list__form > .categories-list__content .category-filter__name {
      display: inline-flex;
      position: relative;
      margin: 0 5px 10px 0px; }
  @media only screen and (min-width: 960px) {
        .categories-list__form > .categories-list__content .category-filter__name {
          cursor: pointer; } }
  .categories-list__form > .categories-list__content .marmita-collapse__content {
      display: none; }
  .categories-list__form > .categories-list__content .marmita-collapse__title {
      padding: 10px 0;
      color: #ffe115;
      font-weight: normal;
      font-size: 1rem; }
  .categories-list__form > .categories-list__content .marmita-collapse--open .marmita-collapse__content {
      padding: 0;
      display: block; }
  .categories-list__form > .categories-list__content .marmita-collapse--open .marmita-collapse__title {
      padding: 0;
      display: none; }
  .categories-list__form > .categories-list__content .marmita-collapse--open .marmita-collapse__button {
      display: none; }
  .categories-list__form .restaurant-menu-search {
    border-bottom: 1px solid #f1f1f1; }
  .categories-list__form .restaurant-menu-search > .icon-marmita {
      left: 28px; }
  .categories-list__form .restaurant-menu-search > .restaurant-menu-search__field {
      height: 50px;
      padding-left: 65px; }

.address-maps__container {
  height: 100%;
  position: relative;
  transition: height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.address-maps__map {
  height: 100%;
  position: relative;
  transition: height 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.address-maps__pin {
  position: absolute;
  width: 36px;
  height: 44px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, calc(-50% - 15px));
          transform: translate(-50%, calc(-50% - 15px)); }

.address-maps__pin svg {
    color: #ffe115;
    fill: #ffe115; }

.address-maps__pin svg {
    -webkit-transform: translateX(-0.3px);
            transform: translateX(-0.3px);
    transition: -webkit-transform ease-in 150ms;
    transition: transform ease-in 150ms;
    transition: transform ease-in 150ms, -webkit-transform ease-in 150ms; }

.address-maps__pin:after {
    content: '';
    display: block;
    position: absolute;
    width: 11px;
    height: 5px;
    border-radius: 100%;
    bottom: 0;
    left: 50%;
    z-index: -1;
    -webkit-transform: translate(-50%, -3px);
            transform: translate(-50%, -3px);
    background-color: #3E3E3E;
    opacity: 0.3; }

.address-maps__pin--active svg {
    color: #3E3E3E;
    fill: #3E3E3E; }

.address-maps__pin--active svg {
    -webkit-transform: translate(-0.5px, -5px);
            transform: translate(-0.5px, -5px); }

.address-maps__geo:after {
  content: '';
  display: block;
  position: absolute;
  width: 13px;
  height: 13px;
  background-color: #557AFF;
  border: 3px solid #FFFFFF;
  border-radius: 100%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.address-maps__geo:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100%;
  z-index: -1;
  width: 43px;
  height: 43px;
  background-color: rgba(85, 122, 255, 0.1);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.address-maps__focus-button {
  position: absolute;
  right: 25px;
  bottom: 130px;
  width: 52px;
  height: 52px;
  margin: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  transition: all ease-in 150ms;
  cursor: pointer; }

.address-maps__focus-button .icon-marmita {
    width: 24px;
    height: 24px; }

.address-maps__focus-button .icon-marmita svg {
      color: #3f3e3e;
      fill: #3f3e3e; }

.address-maps__focus-button:hover {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); }

.address-maps__focus-button:hover .icon-marmita svg {
      color: #3e3e3e;
      fill: #3e3e3e; }

.address-maps__submit {
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: calc(100% - 40px);
  max-width: 375px;
  transition: all ease-in 150ms;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); }

.address-maps__submit[disabled] {
    background: #F2F2F2;
    color: #A6A6A6;
    opacity: 1; }

.slider__title {
  font-size: 1.125rem;
  color: #3f3e3e; }

.slider__label {
  font-size: 0.875rem;
  color: #a6a5a5; }

.slider__value {
  color: #3e3e3e;
  font-size: 0.875rem;
  line-height: 1.25rem; }

.slider .slider-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 2px;
  width: 100%;
  background: #f1f1f1;
  outline: none; }

.slider .slider-input__fill {
    height: 2px;
    background-color: #ffe115;
    position: relative;
    -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
    pointer-events: none; }

.slider .slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  background: #ffe115;
  border-radius: 100%;
  border: none;
  cursor: -webkit-grab;
  cursor: grab;
  transition: 200ms cubic-bezier(0.075, 0.82, 0.165, 1); }

.slider .slider-input::-webkit-slider-thumb:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }

.slider .slider-input::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }

.slider .slider-input::-webkit-slider-thumb:focus {
    border-color: 0;
    box-shadow: none; }

.slider .slider-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ffe115;
  border: none;
  cursor: grab;
  transition: 200ms cubic-bezier(0.075, 0.82, 0.165, 1); }

.slider .slider-input::-moz-range-thumb:hover {
    transform: scale(1.2); }

.slider .slider-input::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.2); }

.slider .slider-input::-moz-range-thumb:focus {
    border-color: 0;
    box-shadow: none; }

.complete-address {
  margin: 0 auto;
  color: #3f3e3e;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 560px));
  grid-template-rows: -webkit-max-content;
  grid-template-rows: max-content;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scrollbar-color: #dcdcdc transparent; }
  .complete-address::-webkit-scrollbar-track {
    border-radius: 50px;
    background-color: transparent; }
  .complete-address::-webkit-scrollbar {
    width: 4px;
    background-color: transparent; }
  .complete-address::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: #dcdcdc; }
  @media only screen and (min-width: 768px) {
    .complete-address {
      padding: 20px 20px 60px 20px; } }
  .complete-address__address-info {
    margin-bottom: 20px; }
  @media only screen and (min-width: 768px) {
      .complete-address__address-info {
        display: flex;
        align-items: baseline; } }
  .complete-address__street-label {
    margin: 0 0 5px;
    color: #3f3e3e;
    font-size: 0.83562rem; }
  @media only screen and (min-width: 768px) {
      .complete-address__street-label {
        font-size: 1rem;
        margin: 0 10px 0 0; } }
  .complete-address__state-label {
    margin: 0;
    font-size: 0.83562rem;
    color: #a6a5a5; }
  @media only screen and (min-width: 768px) {
      .complete-address__state-label {
        font-size: 0.875rem; } }
  .complete-address__form .label__name {
    font-size: 0.75rem !important; }
  .complete-address__form .form-input__field {
    font-size: 0.9375rem; }
  .complete-address__form .native-select__field {
    font-size: 0.9375rem; }
  .complete-address--city-state {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-gap: 14px; }
  .complete-address--district-street {
    display: grid;
    grid-template-columns: 1fr; }
  @media only screen and (min-width: 768px) {
      .complete-address--district-street {
        grid-template-columns: 30% 1fr;
        grid-gap: 14px; } }
  .complete-address--number-complement {
    display: grid;
    grid-template-columns: 125px 1fr;
    grid-gap: 14px; }
  @media only screen and (min-width: 768px) {
      .complete-address--number-complement {
        margin-bottom: 15px; } }
  @media only screen and (min-width: 768px) {
    .complete-address--reference-point {
      margin-bottom: 20px; } }
  .complete-address--favorites {
    margin-bottom: 15px; }
  @media only screen and (min-width: 768px) {
      .complete-address--favorites {
        margin-bottom: 40px;
        max-width: 350px; } }
  .complete-address--favorites p {
      color: #3f3e3e;
      margin: 0 0 16px;
      font-size: 0.875rem; }
  .complete-address--favorites .btn {
      background: #f2f2f2;
      border-radius: 4px;
      font-size: 0.875rem;
      height: 40px;
      border: 0;
      font-weight: 400; }
  .complete-address--favorites .btn .icon-marmita {
        width: 20px;
        height: 20px;
        margin-right: 10px; }
  .complete-address--favorites path[fill='#3e3e3e'] {
      fill: #717171; }
  .complete-address--favorites path[stroke='#3e3e3e'] {
      stroke: #717171; }
  .complete-address--favorites-btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px; }
  .complete-address--favorites-btn .btn__label {
      flex-grow: initial; }
  .complete-address__favorite.btn {
    position: relative; }
  .complete-address__favorite.btn::before, .complete-address__favorite.btn::after {
      pointer-events: none;
      width: 100%;
      height: 100%;
      z-index: 1;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      -webkit-transform: scale(0);
              transform: scale(0);
      border-radius: 0;
      transition: border-radius 100ms ease 100ms, -webkit-transform 200ms ease;
      transition: transform 200ms ease, border-radius 100ms ease 100ms;
      transition: transform 200ms ease, border-radius 100ms ease 100ms, -webkit-transform 200ms ease; }
  .complete-address__favorite.btn::before {
      border-bottom: 1px solid #ffe115;
      border-left: 1px solid #ffe115;
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%; }
  .complete-address__favorite.btn::after {
      border-top: 1px solid #ffe115;
      border-right: 1px solid #ffe115;
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%; }
  .complete-address__favorite--active.btn {
    color: #ffe115; }
  .complete-address__favorite--active.btn::after, .complete-address__favorite--active.btn::before {
      -webkit-transform: scale(1);
              transform: scale(1);
      border-radius: 4px; }
  .complete-address__favorite--active,
  .complete-address__favorite--active path {
    transition: all 300ms ease-in-out; }
  .complete-address__favorite--active path[fill='#3e3e3e'] {
    fill: #ffe115; }
  .complete-address__favorite--active path[stroke='#3e3e3e'] {
    stroke: #ffe115; }
  .complete-address--save-btn {
    margin-bottom: 30px; }

.delivery-filter {
  position: relative;
  padding: 0 30px; }
  .delivery-filter__label {
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 15px 0;
    width: 100%; }
  @media only screen and (min-width: 960px) {
      .delivery-filter__label {
        cursor: pointer; } }
  .delivery-filter__label-text {
    color: #717171;
    font-size: 1em; }
  .delivery-filter .slider {
    padding: 10px 0; }

.address-number__form {
  display: grid;
  grid-row-gap: 20px;
  grid-template-rows: 22px 74px 20px 50px;
  width: 100%;
  margin: auto; }
  @media only screen and (min-width: 1248px) {
    .address-number__form {
      grid-row-gap: 40px;
      grid-template-rows: 22px 65px 20px 50px; } }
  .address-number__form button {
    margin: 0; }
  .address-number__form .form-input {
    padding: 0;
    margin: 0;
    min-height: 0; }
  .address-number__address-info {
  display: grid;
  grid-row-gap: 2px; }
  .address-number__address-info p {
    margin: auto; }
  .address-number__address-info .street-name {
    color: #717171;
    font-size: 1rem;
    line-height: 22px; }
  .address-number__address-info .district {
    color: #a6a6a6;
    font-size: 0.875rem;
    line-height: 20px; }
  .address-number__input {
  width: 110px;
  margin: auto; }
  .address-number__empty-number {
  color: #A6A6A5;
  font-size: 0.75rem;
  line-height: 16px;
  margin: auto; }
  .address-number__checkbox-label {
  display: grid;
  grid-template-columns: 140px 20px;
  grid-column-gap: 15px;
  margin: auto; }

@media only screen and (min-width: 768px) {
  .highlights-carousel {
    padding: 0 20px; } }

@media only screen and (min-width: 960px) {
  .highlights-carousel {
    width: 100%;
    max-width: 1366px !important;
    margin: auto;
    padding: 0 30px; } }

.highlights-carousel__container {
  display: flex;
  flex-direction: column; }

.highlights-carousel a {
  text-decoration: none; }

.highlights-carousel__figure {
  height: 140px;
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: 4px; }

@media only screen and (min-width: 768px) {
    .highlights-carousel__figure {
      height: 200px; } }

.highlights-carousel__figure img {
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transform: none;
            transform: none; }

@media only screen and (min-width: 960px) {
      .highlights-carousel__figure img {
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -webkit-transform: none;
                transform: none; } }

.highlights-carousel__wrapper {
  width: 100%;
  padding: 0;
  margin-bottom: 20px; }

@media only screen and (min-width: 960px) {
    .highlights-carousel__wrapper {
      margin-bottom: 64px; } }

.highlights-carousel .carousel__controller--left {
  -webkit-transform: translateY(-32px) rotateZ(90deg);
          transform: translateY(-32px) rotateZ(90deg); }

@media only screen and (min-width: 768px) {
    .highlights-carousel .carousel__controller--left {
      -webkit-transform: translateY(-18px) rotateZ(90deg);
              transform: translateY(-18px) rotateZ(90deg); } }

@media only screen and (min-width: 960px) {
    .highlights-carousel .carousel__controller--left {
      left: -25px; } }

.highlights-carousel .carousel__controller--right {
  -webkit-transform: translateY(-32px) rotateZ(-90deg);
          transform: translateY(-32px) rotateZ(-90deg); }

@media only screen and (min-width: 768px) {
    .highlights-carousel .carousel__controller--right {
      -webkit-transform: translateY(-18px) rotateZ(-90deg);
              transform: translateY(-18px) rotateZ(-90deg); } }

@media only screen and (min-width: 960px) {
    .highlights-carousel .carousel__controller--right {
      right: -25px; } }

.address-number {
  z-index: 2;
  position: absolute;
  opacity: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: -webkit-min-content;
  grid-template-rows: min-content;
  grid-row-gap: 5px;
  background-color: white;
  transition: top 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  @media only screen and (min-width: 768px) {
    .address-number {
      grid-row-gap: 0; } }
  .address-number--visible {
    top: 0;
    opacity: 1; }
  .address-number__back-btn {
    width: 26px;
    height: 26px;
    margin: 0;
    margin-top: 24px; }
  .address-number__form-wrapper {
    display: grid;
    grid-template-rows: 22px;
    grid-row-gap: 20px;
    text-align: center;
    margin-bottom: auto; }
  @media only screen and (min-width: 768px) {
      .address-number__form-wrapper {
        grid-template-rows: 44px;
        width: 330px;
        margin: auto; } }
  .address-number__title {
    color: #3e3e3e;
    font-size: 1rem;
    line-height: 22px;
    margin: auto; }

.address-search-list {
  display: grid;
  grid-auto-rows: auto;
  gap: 10px; }
  .address-search-list .ph-address-btn {
    border: none;
    border-bottom: 1px solid #f7f7f7; }
  .address-search-list__not-found .btn-address__info--label {
    color: #ffe115; }
  .address-search-list .btn-address--simple {
    border-color: transparent; }
  .address-search-list .btn-address--simple::before, .address-search-list .btn-address--simple::after {
      pointer-events: none;
      width: 100%;
      height: 100%;
      z-index: 1;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      -webkit-transform: scale(0);
              transform: scale(0);
      border-radius: 0;
      transition: border-radius 100ms ease 900ms, -webkit-transform 1000ms ease;
      transition: transform 1000ms ease, border-radius 100ms ease 900ms;
      transition: transform 1000ms ease, border-radius 100ms ease 900ms, -webkit-transform 1000ms ease; }
  .address-search-list .btn-address--simple::before {
      border-bottom: 1px solid #ffe115;
      border-left: 1px solid #ffe115;
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%; }
  .address-search-list .btn-address--simple::after {
      border-top: 1px solid #ffe115;
      border-right: 1px solid #ffe115;
      -webkit-transform-origin: 100% 0%;
              transform-origin: 100% 0%; }
  .address-search-list .btn-address--is-active::after, .address-search-list .btn-address--is-active::before {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-radius: 4px; }

.address-set-confirmation {
  display: none;
  opacity: 0;
  height: 0;
  grid-template-columns: minmax(auto, 350px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 300ms ease;
  overflow: hidden; }
  .address-set-confirmation--visible {
    opacity: 1;
    display: grid;
    height: auto; }
  .address-set-confirmation__title {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1.375rem;
    margin-bottom: 20px;
    font-weight: 300; }
  @media only screen and (min-width: 768px) {
      .address-set-confirmation__title {
        font-size: 1.125rem;
        margin-bottom: 56px; } }
  @media only screen and (min-width: 768px) {
      .address-set-confirmation__title--name {
        font-weight: 500; } }
  .address-set-confirmation__subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: lighter;
    margin-bottom: 40px; }
  @media only screen and (min-width: 768px) {
      .address-set-confirmation__subtitle {
        margin-bottom: 46px; } }
  .address-set-confirmation__accept-btn {
    margin-bottom: 20px; }

.filter-dropdown {
  position: relative; }
  .filter-dropdown__floating-box {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 420px;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0px;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    visibility: hidden;
    width: 400px;
    z-index: 0; }
  .filter-dropdown__floating-box--visible {
      opacity: 1;
      -webkit-transform: translateY(66px);
              transform: translateY(66px);
      transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      visibility: visible;
      z-index: 9994; }
  .filter-dropdown__footer {
    height: 50px;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding: 0 10px; }
  .filter-dropdown__footer .btn {
      margin: 0; }
  .filter-dropdown__btn {
    height: 40px;
    margin-bottom: 0;
    margin-top: 0; }
  .filter-dropdown__btn--visible {
      z-index: 9994;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05); }
  .filter-dropdown__clear-button {
    color: #3e3e3e; }
  .filter-dropdown .btn--transparent {
    transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .filter-dropdown .marmita-checkbox {
    background: #f2f2f2; }
  .filter-dropdown .marmita-checkbox::before {
      content: none; }
  .filter-dropdown .btn .btn__label {
    font-size: 1rem;
    line-height: normal;
    font-weight: normal; }

.channel-floating {
  position: fixed;
  visibility: hidden;
  background: #fff;
  border: 1px solid #f7f7f7;
  box-sizing: border-box;
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  height: 536px;
  width: 375px;
  top: auto;
  left: auto;
  right: calc(410px + 20px + 20px);
  bottom: calc(20px - 10px);
  overflow: hidden; }
  .channel-floating--visible {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3D(0, -10px, 0);
            transform: translate3D(0, -10px, 0);
    pointer-events: initial;
    z-index: 9996;
    transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.payment-options {
  position: relative; }
  .payment-options__label {
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 15px 0;
    width: 100%; }
  @media only screen and (min-width: 960px) {
      .payment-options__label {
        cursor: pointer; } }
  .payment-options__main-list {
    max-height: 360px;
    opacity: 0;
    overflow-y: auto;
    padding: 0 30px;
    position: absolute;
    top: 0;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
    transition: 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    width: 100%; }
  .payment-options__main-list--visible {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
  .payment-options__text {
    color: #717171;
    font-size: 1em; }
  .payment-options__button {
    align-items: center;
    background: none;
    border-bottom: 1px solid #f1f1f1;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: #717171;
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 15px 0;
    width: 100%; }
  .payment-options__button .icon-marmita {
      width: 14px; }
  .payment-options__sub-options {
    opacity: 0;
    -webkit-transform: translateX(400px);
            transform: translateX(400px);
    transition: 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    position: absolute;
    width: 100%; }
  .payment-options__sub-options--visible {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
  .payment-options__sub-options__list {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-color: #dcdcdc transparent;
    padding: 0 20px 0 30px;
    margin: 8px 8px 0 0; }
  .payment-options__sub-options__list::-webkit-scrollbar-track {
      border-radius: 50px;
      background-color: transparent; }
  .payment-options__sub-options__list::-webkit-scrollbar {
      width: 4px;
      background-color: transparent; }
  .payment-options__sub-options__list::-webkit-scrollbar-thumb {
      border-radius: 50px;
      background-color: #dcdcdc; }
  .payment-options__sub-options-header {
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 50px; }
  .payment-options__sub-options-back {
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    top: 3px;
    z-index: 1; }
  .payment-options__sub-options-back .icon-marmita {
      pointer-events: none;
      width: 32px; }
  .payment-options__sub-options-back .icon-marmita svg {
        color: #3e3e3e;
        fill: #3e3e3e; }
  .payment-options__sub-options-title {
    color: #3e3e3e;
    font-size: 1em;
    position: absolute;
    text-align: center;
    width: 100%; }

.channel-modal {
  z-index: 9998;
  pointer-events: initial;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  min-height: 100%; }

.filter-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  top: 2px;
  padding: 2px 4px 0 4px;
  border-radius: 19px;
  border: none;
  background: #fff;
  color: #ffe115;
  font-size: 0.6875rem;
  line-height: 0.6875rem;
  font-weight: 400; }

.back-button {
  margin: 0;
  border-radius: 0;
  height: 2.8125rem;
  width: 3.125rem;
  left: -18px;
  display: block; }
  @media (min-width: 768px) {
    .back-button {
      display: none; } }

.quick-filter__wrapper {
  display: inline-flex;
  align-items: center;
  flex-flow: row nowrap;
  background: #f2f2f2;
  color: #717171;
  border-radius: 20px;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.125rem;
  height: 40px; }
  .quick-filter__wrapper--active {
    background-color: #fcebea;
    color: #ffe115; }
  .quick-filter__wrapper--active:hover:enabled {
      background-color: #f6c1bd; }
  @media only screen and (min-width: 768px) {
    .quick-filter__wrapper {
      background: white;
      font-size: 1em;
      border-radius: 20px;
      border: 1px solid #dcdcdc;
      padding: 10px 20px; }
      .quick-filter__wrapper:hover {
        background-color: #f7f7f7;
        transition: 0.6s; }
      .quick-filter__wrapper--active {
        background-color: #fcebea;
        color: #ffe115;
        border: 1px solid #fcebea; }
        .quick-filter__wrapper--active:hover {
          background-color: #f6c1bd; } }
  .quick-filter__main-button, .quick-filter__clear-button {
  background: none;
  border: none;
  color: inherit;
  height: 100%; }
  .quick-filter__main-button {
  padding: 0 8px;
  cursor: pointer; }
  .quick-filter__main-button--clear-spacing {
    padding: 0 4px 0 12px; }
  .quick-filter__clear-button {
  display: inline-flex;
  align-items: center;
  flex-flow: row nowrap;
  padding: 0 8px 0 4px; }
  .quick-filter__clear-icon {
  width: 1em;
  height: 1em; }

.close-button {
  display: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: #ffe115;
  height: 100%;
  padding: 8px;
  background: transparent;
  border: none; }
  @media (min-width: 768px) {
    .close-button {
      display: block; } }

.filter-screen-button__wrapper {
  display: flex;
  align-items: center; }

.filter-screen-button__icon {
  width: 1em;
  height: 1em; }

.filter-screen-button__label {
  display: inline-block;
  margin: 0 4px; }

@-webkit-keyframes pink-pan-lip-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(6deg) translate(3px, 8px);
            transform: rotateZ(6deg) translate(3px, 8px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@keyframes pink-pan-lip-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(6deg) translate(3px, 8px);
            transform: rotateZ(6deg) translate(3px, 8px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@-webkit-keyframes pink-pan-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(1deg) translate(-1px, 0);
            transform: rotateZ(1deg) translate(-1px, 0); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@keyframes pink-pan-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(1deg) translate(-1px, 0);
            transform: rotateZ(1deg) translate(-1px, 0); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@-webkit-keyframes purple-pan-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(1deg) translate(-1px, 0);
            transform: rotateZ(1deg) translate(-1px, 0); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@keyframes purple-pan-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(1deg) translate(-1px, 0);
            transform: rotateZ(1deg) translate(-1px, 0); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@-webkit-keyframes white-pan-movement {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
  50% {
    -webkit-transform: scaleY(1.07);
            transform: scaleY(1.07); }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

@keyframes white-pan-movement {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }
  50% {
    -webkit-transform: scaleY(1.07);
            transform: scaleY(1.07); }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

@-webkit-keyframes pink-purple-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -14px);
            transform: translate(0, -14px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes pink-purple-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -14px);
            transform: translate(0, -14px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@-webkit-keyframes z-1-movement {
  0% {
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px); }
  50% {
    -webkit-transform: translate(-2px, 32px);
            transform: translate(-2px, 32px); }
  100% {
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px); } }

@keyframes z-1-movement {
  0% {
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px); }
  50% {
    -webkit-transform: translate(-2px, 32px);
            transform: translate(-2px, 32px); }
  100% {
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px); } }

@-webkit-keyframes z-2-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(4px, 12px);
            transform: translate(4px, 12px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes z-2-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(4px, 12px);
            transform: translate(4px, 12px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@-webkit-keyframes z-3-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(4px, 10px);
            transform: translate(4px, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes z-3-movement {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(4px, 10px);
            transform: translate(4px, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.animated-pans svg {
  width: 255px; }

@media only screen and (min-width: 960px) {
    .animated-pans svg {
      width: 300px; } }

.animated-pans .pink-pan-lip {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: pink-pan-lip-movement 5s infinite;
          animation: pink-pan-lip-movement 5s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .pink-pan {
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-animation: pink-pan-movement 5s infinite;
          animation: pink-pan-movement 5s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .purple-pan,
.animated-pans .purple-inside {
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-animation: purple-pan-movement 4.7s infinite;
          animation: purple-pan-movement 4.7s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .white-pan,
.animated-pans .white-inside {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: white-pan-movement 5s infinite;
          animation: white-pan-movement 5s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .pink-purple {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: pink-purple-movement 5s infinite;
          animation: pink-purple-movement 5s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .z-1 {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: z-1-movement 5s infinite;
          animation: z-1-movement 5s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .z-2 {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: z-2-movement 4.7s infinite;
          animation: z-2-movement 4.7s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.animated-pans .z-3 {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: z-3-movement 4.4s infinite;
          animation: z-3-movement 4.4s infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

.recipient-img {
  flex: 0;
  min-height: 2.5rem;
  min-width: 2.5rem;
  max-height: 2.5rem;
  max-width: 2.5rem;
  border-radius: 50%;
  margin-right: 1rem;
  background-color: #dcdcdc;
  overflow: hidden; }

.slider-distance {
  max-height: 270px;
  padding: 0 20px; }
  .slider-distance .slider {
    padding: 0 0 50px;
    min-height: 40px; }
  .slider-distance__title {
    font-size: 1.125rem;
    line-height: 1.375rem;
    color: #3e3e3e;
    text-align: center;
    font-weight: 500;
    margin: 0;
    padding-bottom: 8px; }
  .slider-distance__description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #717171;
    text-align: center;
    font-weight: 300;
    display: block;
    padding-bottom: 24px; }
  .slider-distance__range {
    color: #3e3e3e;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: right;
    display: grid;
    grid-template-columns: 1fr 1fr; }
  .slider-distance__range-min {
      justify-content: flex-start;
      display: flex; }
  .slider-distance__range-max {
      color: #a6a6a6;
      display: flex;
      justify-content: flex-end; }

.cuisines-list {
  padding: 20px 0 0; }
  @media only screen and (min-width: 768px) {
    .cuisines-list {
      width: 100%;
      max-width: 1366px !important;
      margin: auto;
      padding: 0 30px;
      margin-bottom: 64px;
      margin-top: 20px; } }
  .cuisines-list__header {
    display: grid;
    grid-template: 1fr / 1fr 60px;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 20px 20px 10px;
    padding: 0 20px 26px; }
  @media only screen and (min-width: 768px) {
      .cuisines-list__header {
        padding: 20px 0 0 0; } }
  .cuisines-list__title {
    color: #3f3e3e;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    width: calc(100% - 60px);
    margin: 0; }
  @media only screen and (min-width: 768px) {
      .cuisines-list__title {
        padding: 0 0 16px;
        font-size: 1.25rem;
        line-height: 1.5625rem; } }
  .cuisines-list__big-title {
    display: none;
    color: #595756;
    font-size: 2rem;
    font-weight: 500;
    margin: 0; }
  @media only screen and (min-width: 768px) {
      .cuisines-list__big-title {
        display: block; } }
  .cuisines-list__container {
    min-height: 140px; }
  .cuisines-list__container .restaurant-simple-item {
      width: 120px; }
  @media only screen and (min-width: 768px) {
      .cuisines-list__container {
        padding: 0 30px; } }
  .cuisines-list__button {
    justify-content: flex-end;
    padding-right: 0; }
  .cuisines-list .cuisine-item {
    display: inline-block;
    text-align: center;
    transition: color 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); }
  .cuisines-list .cuisine-item a {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
  .cuisines-list .cuisine-item a:hover .cuisine-item__title {
        color: #3e3e3e; }
  .cuisines-list .cuisine-item__figure {
      margin: 0;
      border-radius: 10%;
      width: 80px;
      height: 80px;
      overflow: hidden;
      position: relative;
      z-index: 1; }
  @media only screen and (min-width: 960px) {
        .cuisines-list .cuisine-item__figure {
          width: 110px;
          height: 110px; } }
  .cuisines-list .cuisine-item__figure img {
        position: absolute;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        z-index: 0;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; }
  @media only screen and (min-width: 960px) {
        .cuisines-list .cuisine-item__figure {
          margin: 0 auto; } }
  .cuisines-list .cuisine-item__title {
      text-align: center;
      margin-top: 20px;
      display: block;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.125rem;
      color: #717171; }
  .cuisines-list .carousel__slide {
    display: grid;
    justify-content: center; }
  .cuisines-list .carousel__controller--left {
    -webkit-transform: translateY(-40px) rotateZ(90deg);
            transform: translateY(-40px) rotateZ(90deg); }
  @media only screen and (min-width: 960px) {
      .cuisines-list .carousel__controller--left {
        left: -25px; } }
  .cuisines-list .carousel__controller--right {
    -webkit-transform: translateY(-40px) rotateZ(-90deg);
            transform: translateY(-40px) rotateZ(-90deg); }
  @media only screen and (min-width: 960px) {
      .cuisines-list .carousel__controller--right {
        right: -25px; } }

.channel-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 66px;
  width: 100%;
  background: #fff;
  padding: 10px 20px;
  z-index: 1; }
  .channel-header__title {
    font-weight: 500;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 0;
    color: #3f3e3e;
    display: flex;
    align-items: center;
    padding: 0px 16px 0px 56px;
    font-size: 0.75rem; }
  @media (min-width: 768px) {
      .channel-header__title {
        font-size: 1.125rem;
        padding: 16px 50px 16px 24px; } }
  .channel-header__recipient {
    display: flex;
    flex-direction: column; }
  .channel-header__recipient h1,
    .channel-header__recipient p {
      text-align: left; }
  .channel-header__recipient h1 {
      font-size: 0.875rem;
      line-height: 1.0625rem;
      margin-top: 0;
      margin-bottom: 0.125rem;
      color: #3f3e3e; }
  .channel-header__recipient p {
      margin: 0;
      font-size: 0.6875rem;
      line-height: 0.875rem;
      color: #a6a5a5; }
  .channel-header__left-slot, .channel-header__right-slot {
    z-index: 1; }

.sort-buttons__wrapper {
  padding: 0 20px; }

.sort-buttons__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; }

.sort-buttons__title {
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #3e3e3e;
  text-align: center;
  font-weight: 500;
  margin: 0;
  padding-bottom: 8px; }

.sort-buttons__item {
  background: none;
  border: none; }

.sort-button__wrapper {
  font-size: 0.75rem;
  color: #717171;
  display: flex;
  flex-flow: nowrap column;
  justify-content: center;
  align-items: center; }

.sort-button__wrapper--active {
    color: #ffe115; }

.sort-button__wrapper--active .sort-button__img-container {
      background-color: #fcebea;
      border-color: transparent; }

.sort-button__img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
  border: #f2f2f2 solid 1px;
  border-radius: 50%;
  margin-bottom: 12px;
  cursor: pointer; }

.admin-message {
  position: relative;
  color: #717171;
  font-size: 0.875rem;
  line-height: 1.25rem;
  max-width: 17.5rem;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  text-align: center;
  background: rgba(234, 29, 44, 0.1);
  border-radius: 1.5rem; }
  .admin-message__title {
    font-weight: bold;
    font-style: italic;
    margin-bottom: 0.125rem; }
  .admin-message__message {
    font-size: 0.75rem;
    line-height: 1rem; }

.quick-sort-label__wrapper {
  display: flex;
  align-items: center; }

.quick-sort-label__label {
  margin: 0 4px; }

.message-status {
  display: block;
  position: absolute;
  fill: #a6a5a5;
  bottom: 0.625rem;
  right: 0.625rem;
  height: 0.5rem;
  width: 0.5rem; }

.merchant-type-select__title {
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #3e3e3e;
  text-align: center;
  font-weight: 500;
  margin: 0;
  padding-bottom: 8px; }

.merchant-type-select__select {
  display: flex;
  flex-flow: nowrap row;
  justify-content: space-between;
  padding: 12px 20px;
  position: relative; }

.merchant-type-select__label {
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: #717171;
  font-weight: 300; }

.merchant-type-select__button {
  margin: 12px 20px 0;
  width: calc(100% - 40px); }

.user-message {
  overflow: hidden;
  margin: 1rem 0 1rem auto;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 1.5625rem 1.5625rem 0.125rem 1.5625rem;
  position: relative;
  color: #717171;
  padding: 1rem 1rem 1.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-width: 4rem;
  max-width: 15.625rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; }
  .user-message__sent-at {
    color: #a6a5a5;
    font-size: 0.625rem;
    line-height: 0.75rem;
    position: absolute;
    bottom: 0.5rem;
    right: 1.5rem; }
  .user-message--received {
    margin: 1rem auto 1rem 0;
    background: #f2f2f2;
    border: none;
    border-radius: 1.5625rem 1.5625rem 1.5625rem 0.125rem; }

.quick-filter-list__wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  height: 2.5rem;
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 0 0 0 20px; }
  @media only screen and (min-width: 768px) {
    .quick-filter-list__wrapper {
      overflow-x: unset;
      margin: 0;
      padding: 0; } }
  .quick-filter-list__wrapper::after {
    content: '';
    display: block;
    min-width: 20px; }
  .quick-filter-list__wrapper .marmita-scrollbox__container > * {
    margin: 0 10px; }
  .quick-filter-list__wrapper .marmita-scrollbox__container > *:first-child {
      margin-left: 0; }
  .quick-filter-list__wrapper .marmita-scrollbox__container > *:last-child {
      margin-right: 0; }
  @media only screen and (min-width: 768px) {
  .quick-filter-list__modal {
    width: 600px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    padding: 40px; } }

@-webkit-keyframes shimmer {
  0% {
    background: #f2f2f2; }
  100% {
    background: #dcdcdc; } }

@keyframes shimmer {
  0% {
    background: #f2f2f2; }
  100% {
    background: #dcdcdc; } }

.file-message {
  padding: 0;
  width: 11.25rem;
  max-height: 11.25rem; }

.file-message .user-message__sent-at {
    color: #fff; }

.file-message .message-status {
    fill: #fff; }

.file-message--failed .user-message__sent-at {
    color: #a6a5a5; }

.file-message--failed .message-status {
    fill: #a6a5a5; }

.file-message__content {
    background: #f2f2f2;
    display: block;
    min-height: 5rem; }

.file-message__content--pending {
      height: 11.25rem;
      -webkit-animation: shimmer 1000ms ease alternate infinite;
              animation: shimmer 1000ms ease alternate infinite; }

.file-message__content--failed {
      height: 11.25rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }

.file-message__img {
    display: block;
    height: auto;
    width: 100%; }

.desktop-filters {
  padding: 0 20px;
  display: grid;
  justify-content: space-between;
  margin-bottom: 26px; }
  @media only screen and (min-width: 960px) {
    .desktop-filters {
      width: 100%;
      max-width: 1366px !important;
      margin: auto;
      padding: 0 30px;
      margin-bottom: 32px; } }
  .desktop-filters__clear-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1em;
    color: #ffe115;
    height: 50px;
    padding: 0 20px;
    justify-self: end; }
  .desktop-filters__clear-btn:hover {
      text-decoration: none; }
  .desktop-filters__content {
    display: flex;
    align-items: center; }
  .desktop-filters__content > * {
      margin-right: 20px; }
  .desktop-filters__content > *:last-child {
        margin-right: 0; }

.messages {
  padding: 1.375rem;
  padding-top: 66px;
  padding-bottom: 56px;
  overflow-y: auto;
  min-height: calc(100% - 56px); }
  @media (min-width: 768px) {
    .messages {
      padding-top: calc(66px + 0.5rem);
      padding-bottom: 0.5rem;
      height: calc(100% - 56px); } }
  .messages__date {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #a6a29f; }
  .messages__closed-warning {
    color: #a6a29f;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: center; }

.mobile-sorter-item {
  position: relative; }
  .mobile-sorter-item .btn--default {
    background-color: transparent;
    color: #a6a5a5;
    height: 50px;
    margin: 0;
    justify-content: flex-start;
    font-size: 0.9375em;
    font-weight: 400; }
  .mobile-sorter-item .btn--default .btn__icon {
      margin-right: 10px;
      width: 24px;
      height: 24px; }
  .mobile-sorter-item .btn--default svg {
      color: #a6a5a5;
      fill: #a6a5a5; }
  .mobile-sorter-item--selected .btn--default {
    color: #595756; }
  .mobile-sorter-item:first-child::before {
    content: '';
    width: calc(100% - 40px);
    height: 0;
    display: block;
    background: transparent;
    position: absolute;
    left: 20px;
    top: 0;
    border-top: 1px solid #f5f0eb; }
  .mobile-sorter-item::after {
    content: '';
    width: calc(100% - 40px);
    height: 0;
    display: block;
    background: transparent;
    position: absolute;
    left: 20px;
    bottom: 0;
    border-top: 1px solid #f5f0eb; }
  .mobile-sorter-item__radio {
    position: absolute;
    right: 20px;
    height: 24px;
    width: 24px;
    border-radius: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background-color: #f5f0eb;
    border: 0 solid #ffe115;
    transition: 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .mobile-sorter-item__radio--selected {
      background-color: #f5f0eb;
      border-width: 6px;
      transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.media-upload {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 1.125rem;
  border-radius: 0;
  height: 56px;
  width: 56px; }
  .media-upload__input {
    display: none; }
  @media (min-width: 768px) {
    .media-upload {
      cursor: pointer; } }
  .media-upload__icon svg {
    width: 1.25rem; }

.mobile-sorter {
  display: flex;
  flex-direction: column; }

.user-input {
  position: -webkit-sticky;
  position: sticky;
  padding: 1.125rem 3.5rem 1.125rem 3.5rem;
  border-top: 1px solid #f5f0eb;
  height: 56px;
  width: 100%;
  background: #fff;
  bottom: 50px; }
  .user-input--hidden-media {
    padding-left: 1.125rem; }
  @media (min-width: 768px) {
    .user-input {
      bottom: 0; } }
  .user-input__text-field {
    padding: 0;
    border: none;
    color: #717171;
    width: 100%; }
  .user-input__text-field::-webkit-input-placeholder {
      color: #a6a5a5; }
  .user-input__text-field:-ms-input-placeholder {
      color: #a6a5a5; }
  .user-input__text-field::-ms-input-placeholder {
      color: #a6a5a5; }
  .user-input__text-field::placeholder {
      color: #a6a5a5; }
  .user-input__send {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0 1.125rem;
    border-radius: 0;
    height: 56px;
    width: 56px; }
  .user-input__send svg {
      width: 1.25rem; }

.error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 64px 20px; }
  .error-state__title {
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 400;
    margin: 0; }
  @media only screen and (min-width: 1248px) {
      .error-state__title {
        font-size: 1.125rem;
        line-height: 1.5rem; } }
  .error-state__description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 300;
    color: #717171;
    margin: 8px auto 32px auto;
    max-width: 340px; }
  @media only screen and (min-width: 1248px) {
      .error-state__description {
        font-size: 1rem;
        line-height: 1.375rem; } }
  .error-state__illustration {
    margin-bottom: 36px; }

.mobile-filters {
  padding: 0; }
  .mobile-filters .quick-filter-list__wrapper {
    margin-top: 0;
    margin-bottom: 20px; }
  @media only screen and (min-width: 768px) {
    .mobile-filters {
      padding: 20px; } }
  .mobile-filters .marmita-modal__content {
    min-height: 100vh; }
  .mobile-filters__group-wrapper {
    position: relative; }
  .mobile-filters__group .delivery-filter {
    padding: 0 20px; }
  .mobile-filters__group .restaurant-menu-search > .icon-marmita {
    left: 20px; }
  .mobile-filters__group .restaurant-menu-search > .restaurant-menu-search__field {
    padding-right: 20px; }
  .mobile-filters__group .payment-options__main-list {
    padding: 0 20px;
    position: absolute;
    max-height: none; }
  .mobile-filters__group .payment-options__main-list--visible {
    display: block;
    position: relative; }
  .mobile-filters__group .payment-options__sub-options--visible {
    position: relative; }
  .mobile-filters__group .payment-options__sub-options__list {
    max-height: none; }
  .mobile-filters__group .categories-list__content {
    padding: 10px 20px; }
  .mobile-filters__group-title {
    color: #3f3e3e;
    font-weight: 500;
    font-size: 1.125em;
    line-height: 1.375em;
    padding: 30px 20px 12px 20px; }
  .mobile-filters__action {
    display: flex;
    padding: 20px;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background-color: white;
    border-top: 1px solid #f1f1f1; }
  .mobile-filters__action button:not(:last-child) {
      margin-bottom: 10px; }
  .mobile-filters__action--clear {
      padding-right: 5px;
      width: 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .mobile-filters__action--clear-visible {
      width: 100%;
      opacity: 1;
      visibility: visible; }
  .mobile-filters__action--submit {
      width: 100%; }
  .mobile-filters__action--submit-padded {
      padding-left: 5px; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  height: 100%; }
  .empty-state__image {
    display: block;
    width: 11.8125rem;
    height: auto; }
  .empty-state__title, .empty-state__text {
    padding: 0 20px;
    text-align: center; }
  .empty-state__title {
    font-size: 1.25rem;
    margin-top: 2.625rem;
    margin-bottom: 0;
    color: #3f3e3e; }
  .empty-state__text {
    margin-top: 1rem;
    color: #a6a5a5;
    line-height: 1.375rem; }

@-webkit-keyframes cow-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(0.5deg) translate(2px, 3px);
            transform: rotateZ(0.5deg) translate(2px, 3px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@keyframes cow-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(0.5deg) translate(2px, 3px);
            transform: rotateZ(0.5deg) translate(2px, 3px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@-webkit-keyframes restaurant-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(1deg) translate(-1px, 2px);
            transform: rotateZ(1deg) translate(-1px, 2px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@keyframes restaurant-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(1deg) translate(-1px, 2px);
            transform: rotateZ(1deg) translate(-1px, 2px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@-webkit-keyframes ship-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(3deg) translate(1px, -1px);
            transform: rotateZ(3deg) translate(1px, -1px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

@keyframes ship-movement {
  0% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); }
  50% {
    -webkit-transform: rotateZ(3deg) translate(1px, -1px);
            transform: rotateZ(3deg) translate(1px, -1px); }
  100% {
    -webkit-transform: rotateZ(0) translate(0, 0);
            transform: rotateZ(0) translate(0, 0); } }

.restaurant-empty-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px; }

.restaurant-empty-list__title {
    font-size: 16px;
    line-height: 18px;
    margin-top: 30px; }

.restaurant-empty-list__description {
    font-size: 14px;
    line-height: 20px;
    font-weight: lighter;
    color: #717171;
    text-align: center; }

.restaurant-empty-list .animated-svg svg {
    width: 180px; }

@media only screen and (min-width: 960px) {
      .restaurant-empty-list .animated-svg svg {
        width: 240px; } }

.order-channels-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1.25rem 0;
  width: 100%;
  border-bottom: 1px solid #f2f2f2; }
  .order-channels-header__details {
    flex: 1;
    overflow: hidden; }
  .order-channels-header__details h3, .order-channels-header__details p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
  .order-channels-header__details h3 {
      margin: 0;
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.375rem;
      color: #3f3e3e; }
  .order-channels-header__details p {
      margin: 0;
      font-weight: 300;
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: #a6a5a5; }

.restaurants-list__header, .restaurants-list__empty, .restaurants-list__error {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 12px; }

.restaurants-list__empty {
  justify-content: center; }

@media only screen and (min-width: 768px) {
  .restaurants-list__error-wrapper {
    width: 100%;
    max-width: 1366px !important;
    margin: auto;
    padding: 0 30px; } }

.restaurants-list__header {
  padding: 0 20px; }

@media only screen and (min-width: 960px) {
    .restaurants-list__header {
      width: 100%;
      max-width: 1366px !important;
      margin: auto;
      padding: 0 30px;
      padding-top: 20px; } }

.restaurants-list__header .title {
    padding: 20px 0 0;
    font-size: 1.125rem;
    color: #414143;
    line-height: 1;
    font-weight: 400;
    margin: 0; }

@media only screen and (min-width: 768px) {
      .restaurants-list__header .title {
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: -1px; } }

@media only screen and (min-width: 960px) {
      .restaurants-list__header .title {
        padding: 0 0 32px; } }

.restaurants-list__header-space {
    padding-top: 0; }

.restaurants-list__header-space .title {
      padding: 20px 0; }

@media only screen and (min-width: 960px) {
        .restaurants-list__header-space .title {
          padding: 0 0 32px; } }

.restaurants-list__error {
  padding: 5px 20px;
  color: #a6a5a5; }

@media only screen and (min-width: 768px) {
    .restaurants-list__error {
      padding: 5px 0; } }

.restaurants-list__error-header {
  padding: 5px 20px; }

@media only screen and (min-width: 768px) {
    .restaurants-list__error-header {
      padding: 5px 0; } }

.restaurants-list__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; }

@media only screen and (min-width: 560px) {
    .restaurants-list__container {
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }

@media only screen and (min-width: 960px) {
    .restaurants-list__container {
      gap: 32px; } }

.restaurants-list .marmita-spinner {
  margin: 20px 0; }

.dish-card__tag {
  display: inline;
  font-size: 0.75rem;
  color: #2E6788;
  font-weight: lighter;
  line-height: 1rem; }
  .dish-card__tag .icon-marmita {
    margin-right: 5px;
    width: 10px;
    height: 10px;
    -webkit-transform: translateY(1px);
            transform: translateY(1px); }
  .dish-card__tag svg {
    fill: #2E6788; }
  .dish-card--vertical .dish-card__tag {
  display: none; }
  @media only screen and (min-width: 560px) {
    .dish-card--vertical .dish-card__tag {
      display: inline; } }
  .dish-card--vertical .dish-card__tag--mini {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 6px; }
  @media only screen and (min-width: 560px) {
      .dish-card--vertical .dish-card__tag--mini {
        display: none; } }
  .dish-card--vertical .dish-card__tag--mini .dish-card__tag-description {
      display: none; }
  .dish-card--vertical .dish-card__tag--mini .icon-marmita {
      margin-right: 0; }

.dish-card__price {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: #3e3e3e; }
  .dish-card__price--original {
    position: relative;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #717171;
    text-decoration: line-through;
    margin-left: 5px; }
  @media only screen and (min-width: 1248px) {
      .dish-card__price--original {
        font-size: 0.875rem; } }
  .dish-card__price--discount {
    color: #50a773; }
  .dish-card--vertical .dish-card__price {
  padding: 10px 20px; }
  @media only screen and (max-width: 767px) {
    .dish-card--vertical .dish-card__price {
      font-size: 0.875rem;
      line-height: 1.125rem;
      padding: 6px 12px; } }

.dish-card__delivery {
  display: none;
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: lighter;
  padding-top: 12px;
  color: #717171;
  border-top: 1px dashed rgba(166, 166, 166, 0.2); }

.dish-card--vertical .dish-card__delivery {
  display: inline;
  padding: 10px 20px; }

@media only screen and (max-width: 767px) {
    .dish-card--vertical .dish-card__delivery {
      padding: 7px 12px;
      font-size: 0.75rem;
      line-height: 1.125rem; } }

@media only screen and (max-width: 767px) {
  .dish-card--vertical .dish-card__delivery-time {
    display: none; } }

.dish-card--vertical .dish-card__delivery-fee--free {
  color: #50a773; }

.dish-card__image {
  width: 100px;
  height: 75px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
  align-self: flex-start; }
  @media only screen and (min-width: 375px) {
    .dish-card__image {
      width: 120px;
      height: 90px; } }
  @media only screen and (min-width: 768px) {
    .dish-card__image {
      width: 146px;
      height: 146px; } }
  .dish-card__image--red {
    background-color: #f8ddca; }
  .dish-card__image--green {
    background-color: #daeebf; }
  .dish-card__image--blue {
    background-color: #d2e8f5; }
  .dish-card__image-placeholder {
  background-image: url("https://static-images.ifood.com.br/image/upload/webapp/dishes/dish-image-placeholder.png?v=8.47.1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  .dish-card--vertical .dish-card__image {
  grid-area: image;
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 0 0; }
  @media only screen and (min-width: 768px) {
    .dish-card--vertical .dish-card__image {
      height: 157px; } }

.dish-card-wrapper {
  position: relative; }
  .dish-card-wrapper .dish-quick-add {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex; }
  .dish-card {
  position: relative;
  display: grid;
  min-height: 147px;
  width: 100%;
  background: #ffffff;
  padding: 20px;
  text-decoration: none;
  transition: 200ms;
  overflow: hidden; }
  @media only screen and (max-width: 742px) {
    .dish-card {
      position: relative; }
      .dish-card::after {
        content: '';
        width: calc(100% - 40px);
        height: 0;
        display: block;
        background: transparent;
        position: absolute;
        left: 20px;
        bottom: 0;
        border-top: 1px solid #f5f0eb; } }
  @media only screen and (min-width: 743px) {
    .dish-card {
      padding: 15px;
      height: 178px;
      min-width: 320px;
      border: 1px solid #f2f2f2;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
      border-radius: 4px; }
      .dish-card:hover {
        border: 1px solid #dbdad9; } }
  .dish-card--has-image {
    grid-template-columns: 1fr 100px;
    grid-gap: 15px; }
  @media only screen and (min-width: 375px) {
      .dish-card--has-image {
        grid-template-columns: 1fr 120px; } }
  @media only screen and (min-width: 768px) {
      .dish-card--has-image {
        grid-template-columns: 1fr 146px;
        grid-gap: 15px; } }
  .dish-card .dish-card__container-image {
    position: relative; }
  .dish-card--sold-out .dish-card__sold-out {
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.39);
    display: flex;
    align-items: center;
    justify-content: center; }
  .dish-card__info {
    display: grid;
    grid-template-rows: 1fr 20px;
    margin: 0; }
  .dish-card__info--top {
      margin-bottom: 23px; }
  @media only screen and (min-width: 768px) {
        .dish-card__info--top {
          margin-bottom: 0; } }
  .dish-card__description {
    display: grid;
    color: #3e3e3e;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    margin-top: 0; }
  @media only screen and (min-width: 768px) {
      .dish-card__description {
        font-size: 1.125rem;
        line-height: 1.5rem; } }
  .dish-card__details {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: lighter;
    color: #717171;
    word-break: break-word; }
  @media only screen and (min-width: 560px) {
      .dish-card__details {
        font-size: 0.875rem;
        line-height: 1.25rem; } }
  .dish-card__tags {
    flex-shrink: 0;
    margin: 6px 0; }
  .dish-card__tags .marmita-minitag {
      white-space: nowrap;
      background-color: transparent;
      font-size: 0.625rem; }
  @media only screen and (min-width: 768px) {
        .dish-card__tags .marmita-minitag {
          font-size: 0.75rem; } }
  .dish-card__closed-overlay {
    position: absolute;
    width: 100%;
    height: 104px;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: #ffffff; }
  @media only screen and (min-width: 560px) {
      .dish-card__closed-overlay {
        height: 157px; } }
  .dish-card__restaurant-logo {
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 100%;
    left: 6px;
    top: 6px; }
  @media only screen and (min-width: 560px) {
      .dish-card__restaurant-logo {
        width: 50px;
        height: 50px;
        left: 10px;
        top: 10px; } }
  .dish-card--vertical {
    min-width: 160px;
    height: 264px;
    grid-template: 'image' 104px 'info' 1fr;
    grid-gap: 11px;
    border: 1px solid #f2f2f2;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0; }
  @media only screen and (min-width: 560px) {
      .dish-card--vertical {
        min-width: 222px;
        height: 380px;
        grid-template: 'image' 157px 'info' 1fr;
        grid-gap: 28px; } }
  .dish-card--vertical::after {
      display: none; }
  .dish-card--vertical .dish-card__info {
      display: grid;
      grid-area: info;
      padding: 0;
      grid-auto-rows: 30px;
      grid-template-rows: 1fr; }
  @media only screen and (min-width: 768px) {
        .dish-card--vertical .dish-card__info {
          grid-auto-rows: 36px; } }
  .dish-card--vertical .dish-card__info--top {
        margin-bottom: 5px;
        height: 80px;
        padding: 0 12px; }
  @media only screen and (min-width: 768px) {
          .dish-card--vertical .dish-card__info--top {
            margin-bottom: 23px;
            padding: 0 20px; } }
  .dish-card--vertical .dish-card__description {
      font-size: 0.875rem;
      line-height: 1.25rem;
      margin-bottom: 9px; }
  @media only screen and (min-width: 768px) {
        .dish-card--vertical .dish-card__description {
          font-size: 1.125rem;
          line-height: 1.5rem;
          margin-bottom: 9px; } }
  .dish-card--vertical .dish-card__details {
      display: grid;
      font-size: 0.75rem;
      line-height: 1rem; }
  @media only screen and (min-width: 560px) {
        .dish-card--vertical .dish-card__details {
          font-size: 0.875rem;
          line-height: 1.25rem; } }

.dish-card-placeholder {
  position: relative;
  display: grid;
  min-height: 147px;
  width: 100%;
  background: #ffffff;
  padding: 20px;
  grid-template-columns: 1fr 100px;
  grid-gap: 15px; }
  @media only screen and (max-width: 767px) {
    .dish-card-placeholder {
      position: relative; }
      .dish-card-placeholder::after {
        content: '';
        width: calc(100% - 40px);
        height: 0;
        display: block;
        background: transparent;
        position: absolute;
        left: 20px;
        bottom: 0;
        border-top: 1px solid #f5f0eb; } }
  @media only screen and (min-width: 375px) {
    .dish-card-placeholder {
      grid-template-columns: 1fr 120px; } }
  @media only screen and (min-width: 768px) {
    .dish-card-placeholder {
      padding: 15px;
      height: 178px;
      min-width: 320px;
      border: 1px solid #f2f2f2;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      grid-template-columns: 1fr 146px;
      grid-gap: 15px; } }
  .dish-card-placeholder__info {
    display: grid;
    grid-template-rows: 1fr 20px;
    margin: 0; }
  .dish-card-placeholder__info--top {
      margin-bottom: 23px; }
  .dish-card-placeholder__description {
    display: grid;
    margin-bottom: 9px;
    height: 20px;
    width: 80%; }
  @media only screen and (min-width: 768px) {
      .dish-card-placeholder__description {
        height: 24px; } }
  .dish-card-placeholder__details {
    display: grid;
    height: 16px;
    width: 95%;
    margin-bottom: 5px; }
  .dish-card-placeholder__details:last-child {
      width: 75%; }
  @media only screen and (min-width: 560px) {
      .dish-card-placeholder__details {
        height: 18px; } }
  .dish-card-placeholder__image {
    width: 100px;
    height: 75px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 4px;
    pointer-events: none;
    align-self: flex-start; }
  @media only screen and (min-width: 375px) {
      .dish-card-placeholder__image {
        width: 120px;
        height: 90px; } }
  @media only screen and (min-width: 768px) {
      .dish-card-placeholder__image {
        width: 146px;
        height: 146px; } }
  .dish-card-placeholder__price {
    height: 18px;
    width: 30%; }
  .dish-card-placeholder__delivery {
    display: none;
    padding-top: 12px;
    border-top: 1px dashed rgba(166, 166, 166, 0.2); }
  .dish-card-placeholder__delivery--content {
      display: block;
      height: 14px;
      width: 55%; }
  .dish-card-placeholder--vertical {
    min-width: 160px;
    height: 264px;
    grid-template: 'image' 104px 'info' 1fr;
    grid-gap: 11px;
    border: 1px solid #f2f2f2;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0; }
  @media only screen and (min-width: 560px) {
      .dish-card-placeholder--vertical {
        min-width: 222px;
        height: 380px;
        grid-template: 'image' 157px 'info' 1fr;
        grid-gap: 20px; } }
  .dish-card-placeholder--vertical::after {
      display: none; }
  .dish-card-placeholder--vertical .dish-card-placeholder__info {
      display: grid;
      grid-area: info;
      padding: 0;
      grid-auto-rows: 30px;
      grid-template-rows: 1fr; }
  @media only screen and (min-width: 768px) {
        .dish-card-placeholder--vertical .dish-card-placeholder__info {
          grid-auto-rows: 36px; } }
  .dish-card-placeholder--vertical .dish-card-placeholder__info--top {
        margin-bottom: 5px;
        height: 80px;
        padding: 0 12px; }
  @media only screen and (min-width: 768px) {
          .dish-card-placeholder--vertical .dish-card-placeholder__info--top {
            margin-bottom: 23px;
            padding: 0 20px; } }
  .dish-card-placeholder--vertical .dish-card-placeholder__description {
      margin-bottom: 9px; }
  @media only screen and (min-width: 768px) {
        .dish-card-placeholder--vertical .dish-card-placeholder__description {
          margin-bottom: 9px; } }
  .dish-card-placeholder--vertical .dish-card-placeholder__image {
      grid-area: image;
      width: 100%;
      height: 100%;
      border-radius: 4px 4px 0 0; }
  @media only screen and (min-width: 768px) {
        .dish-card-placeholder--vertical .dish-card-placeholder__image {
          height: 157px; } }
  .dish-card-placeholder--vertical .dish-card-placeholder__price {
      margin: 10px 20px; }
  @media only screen and (max-width: 767px) {
        .dish-card-placeholder--vertical .dish-card-placeholder__price {
          height: 16px;
          margin: 6px 12px; } }
  .dish-card-placeholder--vertical .dish-card-placeholder__delivery {
      display: inline;
      padding: 10px 20px; }
  @media only screen and (max-width: 767px) {
        .dish-card-placeholder--vertical .dish-card-placeholder__delivery {
          padding: 7px 12px; } }

.see-more__button {
  padding: 0;
  margin: 0; }

.channel-item {
  cursor: pointer;
  padding: 1rem 0;
  border-bottom: 1px solid #f2f2f2; }
  .channel-item__infos, .channel-item__description {
    position: relative;
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: #a6a5a5; }
  .channel-item__chat-type, .channel-item__message {
    margin-right: 2.5rem; }
  .channel-item__sent-at, .channel-item__unread {
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0; }
  .channel-item__chat-type {
    margin-bottom: 0.5rem;
    color: #3f3e3e; }
  .channel-item__message {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .channel-item__unread {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 50%;
    min-height: 1.125rem;
    min-width: 1.125rem;
    background: #ffe115;
    color: white; }

.order-channels {
  margin-bottom: 1.5rem; }

.dish-tooltip__container {
  display: inline-block;
  width: calc(100% - 40px);
  position: absolute;
  z-index: 100;
  background: #3e3e3e;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 20px;
  bottom: 100%; }
  @media only screen and (min-width: 960px) {
    .dish-tooltip__container {
      max-width: 360px; } }
  .dish-tooltip__container:before {
    content: '';
    display: block;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: -5px;
    left: 20px;
    border-radius: 5px;
    background: #3e3e3e; }
  .dish-tooltip__content {
  font-size: 0.875rem;
  color: #fff; }

.channel-list {
  padding: 1rem;
  overflow-y: auto;
  height: 100%; }

.dish-action .dish-tooltip {
  align-items: center;
  background: #fff;
  border-top: 2px solid #f5f0eb;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px;
  height: 100px;
  width: 100%;
  z-index: 30;
  position: absolute; }

.dish-action__add-button {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.875rem; }

@media only screen and (min-width: 560px) {
    .dish-action__add-button {
      flex-direction: row; } }

.dish-action__remove-text {
  width: 100%;
  text-align: center; }

.dish-action__update-wrapper, .dish-action__add-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%; }

@media only screen and (min-width: 960px) {
    .dish-action__update-wrapper, .dish-action__add-wrapper {
      justify-content: flex-end; } }

.dish-action__update-wrapper .btn.btn--full-width,
  .dish-action__update-wrapper .btn--default, .dish-action__add-wrapper .btn.btn--full-width,
  .dish-action__add-wrapper .btn--default {
    width: 100%;
    margin: 0;
    text-align: center; }

@media only screen and (min-width: 960px) {
      .dish-action__update-wrapper .btn.btn--full-width,
      .dish-action__update-wrapper .btn--default, .dish-action__add-wrapper .btn.btn--full-width,
      .dish-action__add-wrapper .btn--default {
        width: 240px;
        max-width: 240px; } }

.dish-action__toastr-cta {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent; }

.dish-action__remove-button {
  border: 1px solid #f5f0eb; }

.dish-action__counter {
  display: inline-flex;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  margin-right: 10px; }

@media only screen and (min-width: 960px) {
    .dish-action__counter {
      margin-right: 15px; } }

.tab-navigation {
  padding-top: 60px;
  padding-bottom: 50px; }
  @media (min-width: 768px) {
    .tab-navigation {
      padding-bottom: 0;
      height: 100%; } }
  .tab-navigation .marmita-tab__tablist-container {
    position: fixed;
    padding: 0;
    background: #fff;
    z-index: 1; }
  .tab-navigation .marmita-tab__tablist {
    height: 46px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center; }
  .tab-navigation .marmita-tab__tablist button {
      flex: 1; }
  .tab-navigation .marmita-tab__label--active {
    color: #ffe115;
    border-bottom-color: #ffe115; }
  .tab-navigation .marmita-tab__panel-container {
    padding-top: 46px; }
  @media (min-width: 768px) {
      .tab-navigation .marmita-tab__panel-container {
        height: inherit; } }
  .tab-navigation .marmita-tab__panel {
    height: 100%; }
  .tab-navigation__item {
    padding: 0.875rem; }
  .tab-navigation__item--container {
      font-size: 0.75rem;
      line-height: 1rem;
      text-transform: uppercase;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      margin: auto;
      display: flex; }
  .tab-navigation__badge {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 50%;
    background: #ffe115;
    margin-top: 0;
    margin-left: 0.125rem;
    margin-bottom: auto; }

.dish-restaurant {
  border: 1px solid rgba(63, 62, 62, 0.1);
  margin: 0;
  padding: 10px;
  width: 100%;
  overflow: visible;
  background: transparent;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  text-decoration: none; }
  @media only screen and (min-width: 960px) {
    .dish-restaurant {
      padding: 11px 20px; } }
  .dish-restaurant__delivery-time, .dish-restaurant__name {
    font-size: 0.75rem;
    font-weight: 400;
    text-decoration: none;
    line-height: 1; }
  .dish-restaurant__name {
    color: #ffe115;
    display: flex;
    align-items: center; }
  .dish-restaurant__delivery-time {
    color: #717171; }
  .dish-restaurant .icon-marmita {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    min-width: 16px;
    height: 16px;
    width: 16px;
    margin: 0 4px 0 0; }
  .dish-restaurant .icon-marmita svg {
      color: #ffe115;
      fill: #ffe115; }

.inbox-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  min-height: 60px;
  z-index: 9997;
  background: #fff;
  padding: 10px 20px; }
  .inbox-header__title {
    font-weight: 500;
    left: 0;
    margin: 0;
    padding: 2px 50px 0 50px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 0;
    color: #3f3e3e;
    text-transform: uppercase;
    font-size: 0.75rem; }
  @media (min-width: 768px) {
      .inbox-header__title {
        font-size: 1.125rem;
        text-transform: initial; } }
  .inbox-header__left-slot, .inbox-header__right-slot {
    z-index: 1; }

.cart-shuffle-alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px; }
  @media only screen and (min-width: 960px) {
    .cart-shuffle-alert {
      padding: 20px 50px;
      max-width: 480px; } }
  .cart-shuffle-alert__title {
    font-size: 1.5rem;
    line-height: 1.875rem;
    font-weight: 500;
    color: #3e3e3e;
    margin-bottom: 14px; }
  .cart-shuffle-alert__subtitle {
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: #3e3e3e;
    margin-bottom: 50px; }

.store-closed-alert {
  display: flex;
  flex-direction: column;
  background: white;
  max-width: 450px;
  border-radius: 4px;
  padding: 0 50px;
  margin: 0 auto; }
  .store-closed-alert__title {
    font-size: 1.5rem;
    color: #3e3e3e;
    font-weight: 500; }
  .store-closed-alert__description {
    font-size: 1rem;
    color: #717171; }
  .store-closed-alert__button {
    margin-top: 40px;
    margin-bottom: 18px; }

.payment-methods-modal .online-payment,
.payment-methods-modal .payment-methods-modal__online-button {
  padding: 0 20px; }

.checkout-payment-tabs {
  display: grid;
  grid-template-rows: 50px auto;
  grid-row-gap: 24px; }
  .checkout-payment-tabs__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); }
  .checkout-payment-tabs__buttons--three-tabs {
      grid-template-columns: 1fr 1fr 60px; }
  .checkout-payment-tabs__tab {
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0; }
  .checkout-payment-tabs__tab .btn__label {
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 1.25em;
      color: #a6a6a6; }
  .checkout-payment-tabs__tab--active {
      border-color: currentColor !important; }
  .checkout-payment-tabs__tab--active .btn__label {
        color: #ffe115; }
  .checkout-payment-tabs__offline-title {
    width: 287px;
    margin: auto;
    margin-bottom: 32px;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.25em;
    text-align: center;
    color: #a6a6a6; }
  .checkout-payment-tabs__panel {
    width: 100%;
    max-width: 500px;
    margin: auto; }
  .checkout-payment-tabs__pci-panel {
    position: relative;
    max-width: 500px; }
  .checkout-payment-tabs__pci-panel .payment-method-list {
      padding: 0 16px; }
  .checkout-payment-tabs__pci-panel .payment-method-list:last-child {
        margin-bottom: 50px; }
  .checkout-payment-tabs__pci-panel .payment-method-list::-webkit-scrollbar {
        display: none; }
  .checkout-payment-tabs .payment-states {
    height: calc(100vh - 136px);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 32px; }
  .checkout-payment-tabs .payment-states__illustration {
      align-self: end; }
  .checkout-payment-tabs .payment-states .payment-states-texts {
      grid-template-rows: repeat(2, -webkit-min-content) 1fr;
      grid-template-rows: repeat(2, min-content) 1fr; }
  .checkout-payment-tabs .payment-states .payment-states-texts p {
        padding: 0 10px; }
  .checkout-payment-tabs .payment-states .payment-states-texts__cta {
        align-self: end;
        margin-bottom: 50px; }
  @media only screen and (min-width: 960px) {
    .checkout-payment-tabs {
      max-width: 560px; }
      .checkout-payment-tabs__offline-title {
        display: none; }
      .checkout-payment-tabs__panel {
        max-width: initial;
        margin: 0; }
      .checkout-payment-tabs__tab {
        text-transform: initial; }
        .checkout-payment-tabs__tab .btn__label {
          font-size: 1.125rem; }
      .checkout-payment-tabs__buttons {
        grid-gap: 24px;
        grid-template-columns: 140px 150px; }
        .checkout-payment-tabs__buttons--three-tabs {
          grid-template-columns: 140px 150px 60px; }
      .checkout-payment-tabs .payment-method-list {
        overflow-y: auto;
        height: 300px; }
        .checkout-payment-tabs .payment-method-list__btn-new-card {
          margin-bottom: 10px; }
      .checkout-payment-tabs__pci-panel .payment-method-list {
        padding: 0; }
      .checkout-payment-tabs__pci-panel:after {
        position: absolute;
        content: '';
        bottom: 0px;
        max-width: 500px;
        width: 100%;
        height: 10px;
        background: linear-gradient(0deg, white -50%, rgba(255, 255, 255, 0.2) 100%); }
      .checkout-payment-tabs .payment-states {
        grid-template-columns: 250px 223px;
        grid-column-gap: 20px;
        height: 300px;
        grid-template-rows: initial; }
        .checkout-payment-tabs .payment-states .payment-states-texts {
          grid-row-gap: 8px; }
          .checkout-payment-tabs .payment-states .payment-states-texts p {
            padding: 0; }
          .checkout-payment-tabs .payment-states .payment-states-texts__title {
            font-size: 1.125rem;
            line-height: 1.375em; }
          .checkout-payment-tabs .payment-states .payment-states-texts__description {
            font-size: 0.875rem;
            line-height: 1.25em; }
          .checkout-payment-tabs .payment-states .payment-states-texts__cta {
            align-self: initial;
            margin-bottom: initial;
            margin-top: 18px;
            width: 250px; }
        .checkout-payment-tabs .payment-states__illustration {
          width: 223px;
          height: 210px; } }

.delivery-method-tooltip {
  width: 100%;
  height: 300px;
  box-shadow: 0px -2px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: "SulSans", Helvetica, sans-serif; }
  @media (min-width: 768px) {
    .delivery-method-tooltip {
      width: 475px;
      height: auto; } }
  .delivery-method-tooltip__top-border {
    width: 40px;
    height: 4px;
    background: #dcdcdc;
    border-radius: 2.5px; }
  .delivery-method-tooltip__image-container {
    margin: 20px 0 10px 0;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .delivery-method-tooltip__image {
    height: 100%;
    width: auto; }
  .delivery-method-tooltip__text-container {
    width: 90%;
    text-align: center; }
  @media (min-width: 768px) {
      .delivery-method-tooltip__text-container {
        width: 68%; } }
  .delivery-method-tooltip__title {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 22px;
    margin: 0 0 8px 0;
    color: #3e3e3e; }
  @media (min-width: 768px) {
      .delivery-method-tooltip__title {
        font-size: 1rem; } }
  .delivery-method-tooltip__description {
    font-weight: 300;
    text-align: center;
    font-size: 0.875rem;
    line-height: 20px;
    color: #717171;
    margin: 0; }
  .delivery-method-tooltip__button {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 18px;
    color: #ffe115;
    background: none;
    border: none;
    margin: 35px 0;
    font-family: "SulSans", Helvetica, sans-serif;
    cursor: pointer; }
  .delivery-method-tooltip__button:focus {
      outline: none; }

.delivery-method-button {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SulSans", Helvetica, sans-serif;
  cursor: pointer;
  border-radius: 4px;
  position: relative; }
  @media (min-width: 768px) {
    .delivery-method-button {
      height: 78px;
      border: solid 1px #dcdcdc; }
      .delivery-method-button--selected {
        border-color: #ffe115; } }
  .delivery-method-button__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; }
  @media (min-width: 768px) {
      .delivery-method-button__container {
        width: 92%; } }
  .delivery-method-button__area {
    display: flex;
    width: 50%;
    height: 100%; }
  .delivery-method-button__area--column-alignment {
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      height: 65%; }
  @media (min-width: 768px) {
        .delivery-method-button__area--column-alignment {
          height: 70%; } }
  .delivery-method-button__area--row-alignment {
      align-items: center;
      flex-direction: row;
      justify-content: flex-end; }
  .delivery-method-button__title-container {
    align-items: center;
    display: flex; }
  .delivery-method-button__title {
    font-size: 0.875rem;
    line-height: 20px;
    margin: 0;
    color: #3e3e3e; }
  .delivery-method-button__title--disabled {
      color: #a6a6a6; }
  @media (min-width: 768px) {
      .delivery-method-button__title {
        font-size: 1rem; } }
  .delivery-method-button__help-icon {
    color: #a6a6a6;
    border: solid 1.2px #a6a6a6;
    border-radius: 100%;
    width: 13px;
    height: 12px;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 3px;
    margin: 0 0 4px 12px; }
  @media (min-width: 768px) {
      .delivery-method-button__help-icon {
        height: 13px; } }
  .delivery-method-button__time {
    padding-top: 4px;
    font-weight: 1;
    font-size: 0.75rem;
    line-height: 16px;
    margin: 0;
    color: #3e3e3e; }
  .delivery-method-button__time--disabled {
      color: #a6a6a6; }
  @media (min-width: 768px) {
      .delivery-method-button__time {
        font-size: 0.875rem;
        line-height: 18px; } }
  .delivery-method-button__price {
    margin: 0 16px 0 0;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 18px;
    color: #3e3e3e; }
  .delivery-method-button__price--free {
      color: #50a773; }
  .delivery-method-button__price--disabled {
      color: #a6a6a6; }
  @media (min-width: 768px) {
      .delivery-method-button__price {
        font-size: 1rem;
        line-height: 22px; } }
  @media (min-width: 768px) {
      .delivery-method-button__price {
        margin: 0; } }
  .delivery-method-button__radio {
    -webkit-appearance: none;
    margin: 0;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: #f2f2f2;
    border-color: #f2f2f2;
    cursor: pointer; }
  .delivery-method-button__radio:focus {
      outline: none; }
  .delivery-method-button__radio--selected {
      border: solid 6px #ffe115;
      background-color: #ffffff; }
  @media (min-width: 768px) {
      .delivery-method-button__radio {
        display: none; } }

.days-carousel {
  display: block; }
  .days-carousel .day-button {
    font-family: "SulSans", Helvetica, sans-serif;
    align-items: center;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #f2f2f2;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 69px;
    justify-content: center;
    padding: 12px;
    text-align: center;
    width: 69px;
    position: relative; }
  @media only screen and (min-width: 960px) {
      .days-carousel .day-button {
        cursor: pointer; } }
  .days-carousel .day-button:focus {
      outline: 0; }
  .days-carousel .day-button:focus__title {
        color: #ffe115; }
  .days-carousel .day-button--unavailable .day-button__title,
    .days-carousel .day-button--unavailable .day-button__number {
      color: #dcdcdc; }
  .days-carousel .day-button--selected {
      border: 1px solid #ffe115; }
  .days-carousel .day-button--selected .day-button__title {
        color: #ffe115; }
  .days-carousel .day-button__title {
      color: #a6a6a6;
      font-size: 0.875rem;
      line-height: 26px;
      width: 100%; }
  .days-carousel .day-button__number {
      color: #3e3e3e;
      font-size: 1.25rem;
      font-weight: 500;
      width: 100%; }

.scheduling-modal {
  font-family: "SulSans", Helvetica, sans-serif;
  box-sizing: border-box;
  padding: 0 16px; }
  @media (min-width: 768px) {
    .scheduling-modal {
      padding: 13px 33px;
      max-height: 80vh;
      min-width: 550px; } }
  .scheduling-modal__header {
    box-sizing: border-box;
    height: 45px;
    margin-bottom: 24px;
    padding: 10px 0;
    position: relative; }
  .scheduling-modal__header .toast {
      position: absolute;
      top: 5px;
      max-width: 100%;
      width: 95%; }
  @media (min-width: 768px) {
      .scheduling-modal__header {
        height: auto;
        margin-bottom: 29px;
        padding: 0; }
        .scheduling-modal__header .toast {
          top: -10px; } }
  .scheduling-modal__back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: end; }
  .scheduling-modal__title {
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    line-height: 27px;
    color: #3e3e3e; }
  @media (min-width: 768px) {
      .scheduling-modal__title {
        font-size: 1.125rem;
        line-height: 22px;
        text-transform: initial;
        font-weight: normal; } }
  .scheduling-modal__days {
    margin-bottom: 52px; }
  @media (min-width: 768px) {
      .scheduling-modal__days {
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 32px;
        margin-bottom: 27px; } }
  .scheduling-modal__section {
    margin-bottom: 28px; }
  .scheduling-modal__section:last-child {
      margin-bottom: 95px; }
  @media (min-width: 768px) {
        .scheduling-modal__section:last-child {
          margin-bottom: 0; } }
  .scheduling-modal__section .delivery-method-button {
      margin-bottom: 0; }
  @media (min-width: 768px) {
        .scheduling-modal__section .delivery-method-button {
          margin-bottom: 13px; } }
  .scheduling-modal__section .delivery-method-button:last-child {
        margin-bottom: 0; }
  .scheduling-modal__section-title {
    color: #3e3e3e;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 22px;
    margin: 0 0 12px 0; }
  @media (min-width: 768px) {
      .scheduling-modal__section-title {
        margin-bottom: 25px; } }
  .scheduling-modal__actions {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    left: 0;
    box-shadow: inset 0px 1px 0px #f2f2f2;
    padding: 20px;
    background: #fff;
    box-sizing: border-box; }
  @media (min-width: 768px) {
      .scheduling-modal__actions {
        position: relative;
        padding: 20px 0; } }
  .scheduling-modal__submit-btn {
    width: 100%;
    font-size: 0.875rem; }

.garnish-choices__header {
  padding: 12px 20px 10px;
  display: block;
  background: #f2f2f2;
  z-index: 20;
  position: -webkit-sticky;
  position: sticky;
  top: 0; }
  @media only screen and (min-width: 960px) {
    .garnish-choices__header {
      padding: 12px 40px 10px; } }
  .garnish-choices__header::after {
    content: ' ';
    position: relative;
    display: block;
    width: 100%;
    left: 0;
    top: 9px;
    height: 1px;
    background-color: #f5f0eb; }
  .garnish-choices__label {
  position: relative;
  width: 100%;
  display: block; }
  .garnish-choices__label::after {
    content: ' ';
    position: relative;
    display: block;
    width: calc(100% - 40px);
    left: 20px;
    height: 1px;
    background-color: #f7f7f7; }
  .garnish-choices__label:last-child::after {
    display: none; }
  @media only screen and (min-width: 960px) {
      .garnish-choices__label:last-child::after {
        display: block; } }
  .garnish-choices__choice--is-fulfilled {
  width: 16px;
  height: 11px;
  margin-right: 6px; }
  .garnish-choices__choice--is-fulfilled svg {
    color: #50a773;
    fill: #50a773; }
  .garnish-choices__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px; }
  @media only screen and (min-width: 960px) {
    .garnish-choices__content {
      padding: 16px 40px; } }
  .garnish-choices__content .marmita-radio {
    margin-right: 2px; }
  .garnish-choices__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .garnish-choices__option-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.27;
  color: #3f3e3e;
  width: 77%;
  font-weight: 100; }
  .garnish-choices__option-details {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.2;
  font-weight: 300;
  color: #717171;
  display: block;
  padding: 0 20px 0 0;
  overflow-wrap: break-word; }
  .garnish-choices__option-price {
  margin: 0.625rem 0 0 0;
  display: block;
  color: #ffe115;
  font-size: 0.875rem;
  font-weight: 500; }
  .garnish-choices__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25em;
  font-weight: 500;
  color: #3f3e3e; }
  .garnish-choices__title-desc {
    font-weight: 100;
    font-size: 0.875rem;
    line-height: 17px;
    display: block;
    color: #717171; }
  .garnish-choices__tags {
  display: inline-block;
  margin-left: 5px; }

.inbox-floating {
  position: fixed;
  visibility: hidden;
  background: #fff;
  border: 1px solid #f7f7f7;
  box-sizing: border-box;
  box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  height: 615px;
  width: 410px;
  top: auto;
  left: auto;
  right: 20px;
  bottom: calc(20px - 10px);
  overflow: hidden; }
  .inbox-floating--visible {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3D(0, -10px, 0);
            transform: translate3D(0, -10px, 0);
    pointer-events: initial;
    z-index: 9996;
    transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.dish-garnishes {
  padding: 0;
  width: 100%; }

.inbox-modal {
  z-index: 9998;
  pointer-events: initial;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  min-height: 100%; }
  .inbox-modal .marmita-modal__inner-content-scroll {
    height: calc(100% - 50px); }

.dish-observation-form {
  display: block;
  margin-bottom: 15px;
  padding: 0 20px; }
  @media only screen and (min-width: 960px) {
    .dish-observation-form {
      padding: 0 40px; } }
  .dish-observation-form__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 20px 0 10px; }
  .dish-observation-form__label {
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
    color: #717171; }
  .dish-observation-form__counter {
    color: #a6a6a6;
    font-weight: 100;
    font-size: 0.875rem; }
  .dish-observation-form__textarea {
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    margin-bottom: 10px;
    font-size: 1rem;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    color: #717171;
    font-weight: 400;
    resize: none;
    height: calc(3.2em + 20px);
    min-height: calc(3.2em + 20px);
    padding: 10px; }
  @media only screen and (min-width: 960px) {
      .dish-observation-form__textarea {
        height: calc(4em + 40px);
        min-height: calc(4em + 40px);
        padding: 20px; } }
  .dish-observation-form__textarea::-webkit-input-placeholder {
      color: #a6a6a6;
      opacity: 1;
      font-weight: 100; }
  .dish-observation-form__textarea:-ms-input-placeholder {
      color: #a6a6a6;
      opacity: 1;
      font-weight: 100; }
  .dish-observation-form__textarea::-ms-input-placeholder {
      color: #a6a6a6;
      opacity: 1;
      font-weight: 100; }
  .dish-observation-form__textarea::placeholder {
      color: #a6a6a6;
      opacity: 1;
      font-weight: 100; }

.chat-fab {
  cursor: pointer;
  position: -webkit-sticky;
  position: sticky;
  float: right;
  bottom: calc(16px + 50px);
  right: 16px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #ffe115;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08), 0px 0px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9995; }
  .chat-fab--cart-bar {
    bottom: calc(16px + 50px + 3.125rem); }
  @media only screen and (min-width: 960px) {
      .chat-fab--cart-bar {
        bottom: 34px; } }
  @media (min-width: 768px) {
    .chat-fab {
      bottom: 34px;
      right: 34px; } }
  .chat-fab__icon {
    height: 1.375rem;
    width: 1.25rem; }
  .chat-fab__icon svg {
      color: #fff;
      fill: #fff; }
  .chat-fab__count {
    position: absolute;
    height: 1rem;
    width: 1rem;
    top: 0;
    right: 0;
    color: #ffe115;
    background: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center; }

.dish-content {
  height: calc(100% - 100px);
  padding-bottom: 100px; }
  .dish-content__wrapper-container {
    display: flex;
    flex-direction: column;
    padding: 0 0 16px;
    margin: 0 0 16px 0; }
  .dish-content__container {
    padding: 0 20px; }
  @media only screen and (min-width: 960px) {
      .dish-content__container {
        padding: 0 40px; } }
  @media only screen and (max-width: 959px) {
    .dish-content__title-wrapper > div > div:first-child {
      padding-bottom: 0 !important; } }
  .dish-content__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #3e3e3e;
    background: #fff;
    z-index: 30;
    width: 100%;
    padding: 2px 40px;
    left: 0 !important; }
  .dish-content__title--sticky {
      border-bottom: 1px solid #f2f2f2;
      padding-bottom: 25px; }
  @media only screen and (max-width: 959px) {
      .dish-content__title {
        border-bottom: none;
        position: relative !important;
        top: initial !important;
        left: initial !important;
        width: auto !important;
        padding: 2px 20px;
        margin: 20px 0 0; } }
  .dish-content__img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    max-width: 100%;
    max-height: 150px;
    overflow: hidden;
    border-radius: 4px;
    margin: 16px 0 18px; }
  .dish-content__img-container .marmita-image-expandable__button {
      overflow: hidden;
      border-radius: 4px; }
  @media only screen and (min-width: 960px) {
      .dish-content__img-container {
        margin-top: 0; } }
  .dish-content__img {
    max-width: 100%; }
  .dish-content__details {
    font-size: 0.875rem;
    margin: 10px 0 0;
    font-weight: 300;
    line-height: 1.22;
    color: #717171; }
  .dish-content__container-price {
    margin-top: 12px;
    font-size: 0.875rem;
    color: #3e3e3e; }
  .dish-content__price, .dish-content__price-min {
    margin-bottom: 10px;
    color: #3e3e3e;
    font-size: 1rem; }
  .dish-content__discount-price {
    color: #50a773;
    margin-bottom: 10px; }
  .dish-content__original-price {
    position: relative;
    font-size: 0.75rem;
    color: #dbdad9;
    text-decoration: line-through;
    margin-left: 6px; }
  @media only screen and (min-width: 960px) {
    .dish-content .dish-restaurant {
      margin-top: 15px; } }
  @media only screen and (min-width: 960px) {
    .dish-content__restaurant {
      order: 1; } }
  .dish-warnings {
  color: #a6a6a6;
  font-size: 0.9375rem;
  margin-top: 15px; }
  .dish-warnings__title {
    margin-bottom: 10px;
    font-weight: 500; }
  .dish-warnings__item {
    display: inline-block;
    font-weight: 300; }

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */ }
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }
sub {
  bottom: -0.25em; }
sup {
  top: -0.5em; }
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

.order-violation-modal {
  background-color: white;
  text-align: center;
  padding: 20px;
  border-radius: 4px; }
  .order-violation-modal__title {
    font-size: 1.25rem;
    font-weight: 500; }
  .order-violation-modal__message {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 22px; }
  .order-violation-modal__button {
    width: 100%; }
  @media only screen and (min-width: 560px) {
      .order-violation-modal__button {
        width: auto; } }

.dish {
  overflow-y: auto;
  height: calc(100% - 100px);
  position: relative;
  z-index: 0;
  width: 100%; }
  @media only screen and (min-width: 768px) {
    .dish {
      position: absolute; } }
  @media only screen and (min-width: 960px) {
    .dish {
      height: calc(100% - 138px); } }
  .dish__container {
    height: calc(100% - 70px); }
  @media only screen and (min-width: 960px) {
      .dish__container {
        height: 100%; } }
  .dish__heading-wrapper {
    overflow-y: auto;
    height: calc(100% - 100px);
    position: relative; }
  .dish__loop-text {
    height: 64px;
    border-radius: 4px;
    color: #3e3e3e;
    bottom: 100px;
    right: 0;
    display: flex;
    font-size: 0.875rem;
    padding: 23px 14px;
    margin: 0 20px 15px;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12); }
  @media only screen and (min-width: 768px) {
      .dish__loop-text {
        position: absolute; } }
  @media only screen and (min-width: 960px) {
      .dish__loop-text {
        width: 370px;
        margin: auto 20px 12px auto; } }

@font-face {
  font-family: 'SulSans';
  src: url("/static/fonts/SulSans-Light.woff2") format("woff2"), url("/static/fonts/SulSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'SulSans';
  src: url("/static/fonts/SulSans-Medium.woff2") format("woff2"), url("/static/fonts/SulSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'SulSans';
  src: url("/static/fonts/SulSans-Regular.woff2") format("woff2"), url("/static/fonts/SulSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'SulSans';
  src: url("/static/fonts/SulSans-Bold.woff2") format("woff2"), url("/static/fonts/SulSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'SulSans';
  src: url("/static/fonts/SulSans-BoldItalic.woff2") format("woff2"), url("/static/fonts/SulSans-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap; }
html {
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  height: 100%; }
.scroll-smooth {
  scroll-behavior: smooth; }
::-moz-selection {
  /* Code for Firefox */
  color: #fff;
  background: #ffe115; }
::selection {
  color: #fff;
  background: #ffe115; }
body {
  font-family: "SulSans", Helvetica, sans-serif;
  overflow-x: hidden;
  font-size: 16px;
  height: 100%;
  scroll-behavior: auto; }
* {
  box-sizing: border-box; }
.headers--desktop {
  display: none; }
@media only screen and (min-width: 960px) {
    .headers--desktop {
      display: block; } }
.headers--mobile {
  display: block;
  min-height: 60px; }
@media only screen and (min-width: 960px) {
    .headers--mobile {
      display: none; } }
:focus {
  outline: 0; }
a {
  cursor: default; }
@media only screen and (min-width: 960px) {
    a {
      cursor: pointer; } }
ul {
  margin: 0;
  padding: 0; }
ul > li {
    list-style: none; }
.main-layout {
  transition: 500ms;
  background: #fff;
  overflow: hidden;
  padding: 0 0 50px; }
.main-layout.main-layout--full-primary {
    min-height: 100vh;
    background: #ffe115; }
@media only screen and (min-width: 960px) {
    .main-layout {
      padding: 0; } }
.main-layout--with-home-button {
    padding: 0 0 70px; }
.with-padding {
  padding: 0 20px; }
.page-wrapper .nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; }
.page-wrapper .nav-header ~ * {
    margin-top: 70px; }
b,
strong {
  font-weight: bold; }
.accessibility-hide {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  display: block;
  text-indent: -999999px; }
.ph-loading {
  -webkit-animation-duration: 2s !important;
          animation-duration: 2s !important;
  -webkit-animation-fill-mode: forwards !important;
          animation-fill-mode: forwards !important;
  -webkit-animation-iteration-count: infinite !important;
          animation-iteration-count: infinite !important;
  -webkit-animation-timing-function: linear !important;
          animation-timing-function: linear !important;
  -webkit-animation-name: placeholderAnimate !important;
          animation-name: placeholderAnimate !important;
  background: #3e3e3e;
  background: linear-gradient(to right, #f3f3f3 2%, #e9e8e8 18%, #f3f3f3 33%) !important;
  background-size: 1300px !important;
  border-radius: 2px;
  min-height: 10px; }
.ph-loading--lighten {
    opacity: 0.6; }
.display-none {
  display: none; }
@media only screen and (min-width: 960px) {
  .desktop-container {
    width: 100%;
    max-width: 1366px !important;
    margin: auto;
    padding: 0 30px; } }
.app-container {
  padding: 20px; }
@media only screen and (min-width: 960px) {
    .app-container {
      padding: 0; } }

@media only screen and (min-width: 960px) {
  .dish-modal {
    width: 580px;
    height: 80vh;
    border-radius: 4px; }
    .dish-modal__overlay {
      background-color: rgba(113, 113, 113, 0.9);
      z-index: 10001; }
    .dish-modal.ReactModal__Content .dish-modal.ReactModal__Content__overlay {
      -webkit-transform: none;
              transform: none;
      background-color: rgba(113, 113, 113, 0); }
    .dish-modal.ReactModal__Content--after-open .dish-modal.ReactModal__Content--after-open__overlay {
      background-color: rgba(113, 113, 113, 0); }
    .dish-modal--loop {
      height: 496px; } }

.dish-modal__spinner {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  height: calc(100% - 38px); }

.dish-modal__header .nav-header {
  margin: 0 0 20px; }

.dish-modal__header .nav-header__right-button {
    display: none; }

@media only screen and (min-width: 960px) {
    .dish-modal__header .nav-header {
      justify-content: flex-end;
      padding: 6px 6px 0;
      min-height: auto;
      height: auto; }
      .dish-modal__header .nav-header__right-button {
        display: block;
        width: 32px;
        height: 32px;
        cursor: pointer;
        padding: 0; }
        .dish-modal__header .nav-header__right-button:hover .icon-marmita svg {
          color: #3e3e3e;
          fill: #3e3e3e; }
        .dish-modal__header .nav-header__right-button .icon-marmita {
          width: 32px;
          height: 32px;
          -webkit-transform: scale(1);
                  transform: scale(1); }
          .dish-modal__header .nav-header__right-button .icon-marmita svg {
            color: #717171;
            fill: #717171; }
          .dish-modal__header .nav-header__right-button .icon-marmita svg {
            transition: fill 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); }
      .dish-modal__header .nav-header__left-button, .dish-modal__header .nav-header__title {
        display: none; } }

.dish-modal--loading .marmita-modal__inner-content-scroll {
  height: 100%; }

@media only screen and (min-width: 768px) {
  .dish-modal--loop .marmita-modal__inner-content > div {
    height: 100%; } }

.dish-modal--loop .marmita-modal__inner-content {
  padding-bottom: 150px; }

.footer {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 30px; }
  @media only screen and (min-width: 960px) {
    .footer {
      width: 100%;
      max-width: 1366px !important;
      margin: auto;
      padding: 0 30px;
      margin-top: 50px; } }
  .footer__links-list {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(16, -webkit-min-content);
    grid-template-rows: repeat(16, min-content);
    grid-auto-flow: column;
    gap: 24px;
    margin-bottom: 24px; }
  @media only screen and (min-width: 560px) {
      .footer__links-list {
        grid-template-rows: repeat(8, -webkit-min-content);
        grid-template-rows: repeat(8, min-content);
        grid-auto-flow: column; } }
  @media only screen and (min-width: 960px) {
      .footer__links-list {
        grid-template-rows: repeat(6, -webkit-min-content);
        grid-template-rows: repeat(6, min-content);
        gap: 30px;
        margin-bottom: 30px; } }
  @media only screen and (min-width: 1248px) {
      .footer__links-list {
        grid-template-rows: repeat(4, -webkit-min-content);
        grid-template-rows: repeat(4, min-content); } }
  .footer__section {
    border-top: 1px solid #dcdcdc;
    padding: 40px 0 10px; }
  .footer__title {
    letter-spacing: -1px;
    font-size: 1.25rem;
    color: #3e3e3e;
    margin-bottom: 24px;
    font-weight: 500;
    margin-top: 0; }
  @media only screen and (min-width: 960px) {
      .footer__title {
        margin-bottom: 30px; } }
  .footer__subtitle {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.22;
    margin-top: 0;
    margin-bottom: 30px;
    color: #3e3e3e; }
  .footer__row {
    display: flex;
    flex-flow: row wrap; }
  .footer__column {
    flex-basis: 100%;
    margin-bottom: 30px; }
  @media only screen and (min-width: 560px) {
      .footer__column {
        flex-basis: 50%; } }
  @media only screen and (min-width: 768px) {
      .footer__column {
        flex-basis: 25%; } }
  .footer__text-link,
  .footer a.footer__text-link {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.22;
    color: #717171;
    transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none; }
  @media only screen and (min-width: 960px) {
      .footer__text-link,
      .footer a.footer__text-link {
        cursor: pointer; } }
  .footer__text-link:hover,
    .footer a.footer__text-link:hover {
      color: #3e3e3e; }
  .footer__social {
    display: inline-flex;
    margin-left: -12px;
    margin-top: -5px; }
  .footer__social-icon {
    width: 30px;
    transition: fill 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    margin-right: 20px;
    border-radius: 0; }
  .footer__social-icon .icon-marmita {
      width: 26px;
      height: auto; }
  .footer__social-icon.btn-icon.btn-icon--transparent svg {
      color: #717171;
      fill: #717171; }
  .footer__social-icon.btn-icon.btn-icon--transparent svg,
    .footer__social-icon.btn-icon.btn-icon--transparent path {
      transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .footer__social-icon:hover.footer__social-icon:hover.btn-icon.btn-icon--transparent svg {
      color: #3e3e3e;
      fill: #3e3e3e; }
  .footer__copyright-text {
    display: grid;
    align-items: center;
    grid-gap: 0 20px;
    grid-template-columns: 50px 1fr;
    grid-template-areas: 'logo-link company-copy' 'logo-link company-info'; }
  .footer__copyright-text a {
      flex-basis: 64px;
      margin-right: 20px;
      min-width: 50px;
      grid-area: logo-link; }
  .footer__copyright-text p {
      width: 100%;
      font-size: 0.6875rem;
      line-height: 1.35;
      font-weight: 300;
      color: #717171;
      margin: 0; }
  @media only screen and (min-width: 960px) {
        .footer__copyright-text p {
          font-size: 0.8125rem; } }
  .footer__copyright-text svg {
      color: #ffe115;
      fill: #ffe115; }
  .footer__company-informations {
    margin: 10px 0 0 0;
    font-size: 0.625rem;
    grid-area: company-info; }
  .footer__company-copyright {
    grid-area: company-copy; }
  .footer__section--about {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0 24px; }
  .footer__section--about .footer__column {
      margin-bottom: 20px; }
  @media only screen and (min-width: 560px) {
      .footer__section--about {
        grid-template-columns: repeat(2, 1fr); } }
  @media only screen and (min-width: 960px) {
      .footer__section--about {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-bottom: 0; }
        .footer__section--about .footer__column {
          margin-bottom: 0; } }
  @media only screen and (min-width: 1248px) {
      .footer__section--about {
        grid-template-columns: repeat(4, 1fr); } }
  .footer__section--about .footer__links-list {
      grid-template-rows: auto;
      grid-auto-flow: row;
      grid-template-columns: 1fr;
      padding-bottom: 0; }
  .footer__section--copyright {
    display: grid;
    grid-template-columns: auto;
    gap: 20px;
    padding: 40px 0; }
  @media only screen and (min-width: 768px) {
      .footer__section--copyright {
        gap: 30px; } }
  @media only screen and (min-width: 960px) {
      .footer__section--copyright {
        grid-auto-columns: -webkit-min-content;
        grid-auto-columns: min-content;
        grid-template-columns: repeat(auto-fit, minmax(10px, auto));
        gap: 16px; } }
  .footer__section--copyright .footer__row {
      align-items: center; }
  @media only screen and (min-width: 960px) {
        .footer__section--copyright .footer__row {
          flex-wrap: nowrap;
          justify-content: space-between; } }
  .footer__section--copyright .footer__text-link {
      display: inline-block;
      width: 100%;
      margin: 10px 0; }
  .footer__section--cities {
    display: grid;
    grid-template-areas: 'title see-more' 'list list'; }
  .footer__section--cities a.footer__text-link.footer__see-more {
      color: #ffe115;
      justify-self: end;
      margin-top: 0.2rem;
      font-weight: normal; }
  .footer__section--cities .footer__links-list {
      grid-area: list;
      grid-template-rows: repeat(19, -webkit-min-content);
      grid-template-rows: repeat(19, min-content);
      grid-auto-columns: 1fr; }
  @media only screen and (min-width: 560px) {
        .footer__section--cities .footer__links-list {
          grid-template-rows: repeat(10, -webkit-min-content);
          grid-template-rows: repeat(10, min-content); } }
  @media only screen and (min-width: 960px) {
        .footer__section--cities .footer__links-list {
          grid-template-rows: repeat(7, -webkit-min-content);
          grid-template-rows: repeat(7, min-content); } }
  @media only screen and (min-width: 1248px) {
        .footer__section--cities .footer__links-list {
          grid-template-rows: repeat(5, -webkit-min-content);
          grid-template-rows: repeat(5, min-content); } }

.jobs-header {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  background-color: #ffffff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 105; }
  .jobs-header--transparent {
    position: absolute;
    background-color: rgba(0, 0, 0, 0); }
  .jobs-header--white {
    background-color: #ffffff;
    box-shadow: inset 0 -1px 0 #dcdcdc; }
  .jobs-header-background {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none; }
  .jobs-header-background--block {
    display: block; }
  @media only screen and (min-width: 960px) {
  .jobs-header-container {
    width: 100%;
    max-width: 1366px !important;
    margin: auto;
    padding: 0 30px; } }
  .jobs-header-nav {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 110;
  cursor: pointer;
  padding: 16px 20px; }
  @media only screen and (min-width: 960px) {
    .jobs-header-nav {
      padding: 16px 0;
      background-color: inherit; } }
  .jobs-header-nav .icon-brand {
    width: 100px;
    height: 50px;
    margin: auto;
    transition: 200ms; }
  .jobs-header-nav__menu {
    max-width: 24px;
    display: grid;
    cursor: pointer; }
  @media only screen and (min-width: 960px) {
      .jobs-header-nav__menu {
        display: none; } }
  .jobs-header-items {
  display: none;
  width: 70%; }
  @media only screen and (min-width: 960px) {
    .jobs-header-items {
      display: flex; } }
  @media only screen and (min-width: 1248px) {
    .jobs-header-items {
      width: 60%; } }
  .jobs-header-items__item {
    display: block;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25rem;
    text-decoration: none;
    padding: 22px 0;
    color: #3f3e3e; }
  @media only screen and (min-width: 960px) {
      .jobs-header-items__item {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: right;
        flex: 1;
        padding: 15px 0; } }
  @media only screen and (min-width: 960px) {
      .jobs-header-items__item--transparent {
        color: #ffffff; } }
  @media only screen and (min-width: 960px) {
      .jobs-header-items__item--white {
        color: #3f3e3e; } }
  .jobs-header-items__item--active {
      color: #ffe115; }
  .jobs-header-items-box {
  z-index: 110;
  background-color: #ffffff;
  position: absolute;
  width: 100%;
  padding: 15px;
  display: none; }
  .jobs-header-items-box--block {
    display: block; }

body.test-user .checkout-payment__submit,
body.test-user .payment-action .btn,
body.test-user .restaurant-cart-footer__button {
  background-color: #50a773 !important; }

body.test-user .desktop-checkout__header {
  background-color: #50a773 !important; }

body.test-user .desktop-checkout__header .btn-icon:hover {
    background-color: #50a773 !important; }

body.test-user .desktop-checkout__header .icon-marmita svg {
    color: #fff;
    fill: #fff; }

body.test-user .desktop-checkout__header .icon-marmita svg > path {
    fill: white !important; }

.page-not-found {
  padding: 20px;
  padding-bottom: 0;
  height: calc(100vh - 50px);
  display: grid;
  grid-template-rows: auto -webkit-min-content;
  grid-template-rows: auto min-content; }
  @media only screen and (min-width: 1248px) {
    .page-not-found {
      height: 100vh;
      max-width: 1366px !important;
      padding: 0;
      padding-left: 70px;
      margin: auto;
      grid-template-columns: 450px auto; } }
  .page-not-found__actions {
    display: grid;
    width: 210px;
    grid-template-rows: repeat(4, minmax(-webkit-min-content, -webkit-max-content));
    grid-template-rows: repeat(4, minmax(min-content, max-content));
    grid-row-gap: 10px;
    letter-spacing: -1px;
    z-index: 1; }
  .page-not-found__actions svg {
      width: 87px;
      height: 46px;
      margin-bottom: 20px; }
  @media only screen and (min-width: 768px) {
      .page-not-found__actions {
        grid-row-gap: 25px;
        width: 450px; }
        .page-not-found__actions svg {
          margin-top: 50px; } }
  .page-not-found__title {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 40px;
    color: #3e3e3e; }
  @media only screen and (min-width: 768px) {
      .page-not-found__title {
        font-size: 4.375rem;
        line-height: 70px; } }
  .page-not-found__subtitle {
    font-size: 1.125rem;
    line-height: 22px;
    font-weight: 300;
    color: #3e3e3e; }
  @media only screen and (min-width: 768px) {
      .page-not-found__subtitle {
        font-size: 1.625rem;
        line-height: 35px; } }
  .page-not-found__button {
    margin: 0;
    width: 180px;
    height: 50px; }
  .page-not-found__button .btn__label {
      letter-spacing: -1px;
      font-weight: 500; }
  @media only screen and (min-width: 768px) {
      .page-not-found__button {
        width: 224px;
        height: 60px; }
        .page-not-found__button .btn__label {
          font-size: 1.25rem;
          line-height: 1.0625em; } }
  .page-not-found__illustration-wrapper {
    justify-self: end; }
  .page-not-found__illustration {
    position: absolute;
    top: 212px;
    width: auto;
    max-width: 100vw;
    height: calc(100vh - 212px);
    right: -50px; }
  @media only screen and (min-width: 768px) {
      .page-not-found__illustration {
        top: 326px;
        height: calc(100vh - 326px); } }
  @media only screen and (min-width: 1248px) {
      .page-not-found__illustration {
        right: initial;
        max-height: 925px;
        position: relative;
        top: -10vh;
        height: 120vh; } }

.static-wrapper {
  width: 100%;
  padding: 20px;
  margin: auto; }
  @media only screen and (min-width: 960px) {
    .static-wrapper {
      width: 100%;
      margin: auto;
      padding: 0 30px;
      max-width: 900px; } }
  .static-wrapper a {
    text-decoration: none;
    color: #ffe115; }
  .static-wrapper a:hover {
      cursor: pointer; }
  @media only screen and (min-width: 960px) {
    .static-wrapper .nav-header {
      display: none; } }
  .static-content {
  color: #717171; }
  .static-content__title {
    font-size: 1.625rem;
    color: #ffe115;
    margin: 20px 0;
    text-align: center;
    font-weight: 500; }
  .static-content__subtitle {
    font-size: 1.125rem;
    text-align: center;
    font-weight: 500; }
  .static-content__section-title {
    font-size: 1.125rem;
    color: #ffe115;
    font-weight: 700;
    line-height: 27px;
    margin: 25px 0 0 0; }
  .static-content__section-subtitle {
    font-size: 1rem;
    color: #ffe115;
    font-weight: 500;
    margin: 25px 0 0 0; }
  .static-content__text {
    font-weight: 300;
    margin-bottom: 15px;
    line-height: 29px;
    display: block;
    text-align: justify; }
  .static-content__text--bold {
      font-weight: bold; }
  .static-content__subsection {
    font-size: 1rem;
    color: #ffe115; }
  .static-content__important {
    color: #ffe115; }
  .static-content__list {
    padding-left: 20px;
    margin-bottom: 20px; }
  .static-content__list li {
      font-weight: 300;
      line-height: 29px;
      text-align: justify;
      list-style: initial;
      display: list-item; }
  .static-content__subsection-number {
    margin-right: 10px;
    font-weight: 300;
    font-style: italic; }
  .static-content__nav-policy {
    margin: 20px 0; }
  .static-content__nav-policy li {
      margin: 0 0 15px; }
  .static-content__nav-link {
    color: #ffe115; }
  .static-content__table-policy {
    font-size: 0.9375rem;
    border: 1px solid #f5f0eb; }
  .static-content__table-policy td,
    .static-content__table-policy th {
      border: 1px solid #f5f0eb; }
  .static-content img {
    width: 100%;
    max-width: 90%;
    margin: 20px auto;
    display: block; }
  .static-content__image-header {
    width: 200px;
    margin: 60px auto 0; }