/***/
.flex-c {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.flex-c-c,
.fullsizeBtn,
.btnCart .countItem-btnCart,
.topTitle-modal,
.productList .restoInfo > span,
.modalUi,
.modalUi .box-modalUi .box-modalUi-close,
.modalUi .box-modalUi .box-modalUi-buttons,
.modalUi .box-modalUi .box-modalUi-buttons .back,
.modalUi .box-modalUi .box-modalUi-buttons .next,
.modalUi .box-modalUi .box-modalUi-counter,
.modalUi .box-modalUi .box-modalUi-counter .btn-counter,
.modal-edit .modal-base-buttons,
.modal-cart .modal-base-buttons,
.modal-base .modal-base-buttons,
.modal-edit .modal-base-buttons .back,
.modal-cart .modal-base-buttons .back,
.modal-base .modal-base-buttons .back,
.modal-edit .modal-base-buttons .next,
.modal-cart .modal-base-buttons .next,
.modal-base .modal-base-buttons .next,
.user-card-list .user-card-card,
.modal-edit .itemOptions .optionList > div .checkboxOption,
.modal-edit .itemOptions .optionList > div .multipleOption,
.modal-edit .buttonsOptions .prev,
.modal-edit .buttonsOptions .next,
.modal-edit .itemInfo .expand,
.modal-edit .itemInfo .close,
.itemCartContent .mainItem .countItemCart,
.finaliseStepComponent .clickableItemList .clickableInStep,
.profilContainer .topTitle-profil,
.profilContainer .topTitle-profil .back-modal,
.profilContainer .topTitle-profil .settingprofil-topTitle-modal,
.profilContainer .btn-profil,
.itemOrderHistory .title-itemOrderHistory,
.itemOrderHistory .img-itemOrderHistory,
.qrscan-container .closeqrscan {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.flex-c-c--w,
.finaliseStepComponent .clickableItemList {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-c-c-col {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-c-c-col-w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-c-fs,
.profilContainer .titlePart-topTitle-modal,
.profilContainer .linkPart-topTitle-modal {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.flex-c-fs-col {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-c-fs--w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-c-fe,
.hotel .itemResto .tags,
.resto .itemResto .tags {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.flex-c-sb,
.btnCart,
.appbar,
.hotel .itemResto .textInfo .infoLiv,
.resto .itemResto .textInfo .infoLiv,
.profilContainer .itemPart-topTitle-modal,
.itemOrderHistory .command-itemOrderHistory {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.flex-c-sb--w,
.flexCSb-W {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-c-sa,
.userNavBar,
.modal-edit .btnGrp {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.flex-c-sa--w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-c-sa-col,
.login {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-c-sa-colr {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.flex-c-sb-col,
.hotel .itemHostel .infoItem,
.resto .itemHostel .infoItem {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-fs {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.flex-fs-fs {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.flex-fs-fs--w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-fs-sa--w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-fs-sb,
.hotel .itemResto .textInfo,
.resto .itemResto .textInfo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.flex-fs-fs-col {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-fs-sb-r-w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-fs-c {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
}
.flex-fs-c--w {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-fs-c-col {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-fe-c-col {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
/**
 * Global Reset of all HTML Elements
 *
 * Resetting all of our HTML Elements ensures a smoother
 * visual transition between browsers. If you don't believe me,
 * try temporarily commenting out this block of code, then go
 * and look at Mozilla versus Safari, both good browsers with
 * a good implementation of CSS. The thing is, all browser CSS
 * defaults are different and at the end of the day if visual
 * consistency is what we're shooting for, then we need to
 * make sure we're resetting all spacing elements.
 *
 */
html,
body {
  border: 0;
  font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video,
i {
  border: 0;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cit,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
table caption,
table th,
table td {
  text-align: left;
  vertical-align: middle;
}
button {
  cursor: pointer;
}
a img {
  border: 0;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus {
  outline: 0;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway.eot');
  src: url('fonts/Raleway.woff2') format(woff2);
  src: url('fonts/Raleway.woff') format(woff);
  src: url('fonts/Raleway.ttf') format("truetype");
  src: url('fonts/Raleway.svg#svgFontName') format('svg');
  font-weight: 'normal';
  font-style: '';
}
@font-face {
  font-family: 'RalewayBold';
  src: url('fonts/Raleway.eot');
  src: url('fonts/Raleway.woff2') format(woff2);
  src: url('fonts/Raleway.woff') format(woff);
  src: url('fonts/Raleway.ttf') format("truetype");
  src: url('fonts/Raleway.svg#svgFontName') format('svg');
  font-weight: 'bold';
  font-style: '';
}
@font-face {
  font-family: 'JosefinSans';
  src: url('fonts/Josefin_Sans.eot');
  src: url('fonts/Josefin_Sans.woff2') format(woff2);
  src: url('fonts/Josefin_Sans.woff') format(woff);
  src: url('fonts/Josefin_Sans.ttf') format("truetype");
  src: url('fonts/Josefin_Sans.svg#svgFontName') format('svg');
  font-weight: 'normal';
  font-style: '';
}
@font-face {
  font-family: 'JosefinSansBold';
  src: url('fonts/Josefin_Sans.eot');
  src: url('fonts/Josefin_Sans.woff2') format(woff2);
  src: url('fonts/Josefin_Sans.woff') format(woff);
  src: url('fonts/Josefin_Sans.ttf') format("truetype");
  src: url('fonts/Josefin_Sans.svg#svgFontName') format('svg');
  font-weight: 'bold';
  font-style: '';
}
@font-face {
  font-family: 'JosefinSans';
  src: url('fonts/Josefin_Sans/JosefinSans-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'JosefinSansLight';
  src: url('fonts/Josefin_Sans/JosefinSans-Light.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'JosefinSansBold';
  src: url('fonts/Josefin_Sans/JosefinSans-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway/Raleway-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'RalewayBold';
  src: url('fonts/Raleway/Raleway-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}
/* user bottom nav bar height */
/**
 food category badges
 */
/** IOS FIXES */
body {
  /** Padds top of body so camera does not overlay content */
  padding-top: constant(safe-area-inset-top);
  /* iOS 11.0 */
  padding-top: env(safe-area-inset-top);
  /* iOS 11.2 */
}
.full-padding {
  padding: 8px;
}
.side-padding {
  padding: 0 8px;
}
.topbottom-padding {
  padding: 8px 0;
}
.in-scan-qr.app-container {
  background-image: none;
  background-color: transparent;
}
.icon-badge {
  position: relative;
}
.icon-badge .badge {
  position: relative;
  display: inline-block;
  margin-left: -12px;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  font-size: 12px;
  background-color: #4caf50;
  color: #FFFFFF;
  line-height: 14px;
  text-align: center;
}
.app-container {
  height: 100%;
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.app {
  height: 100%;
  width: 100%;
  /**
    * prevents scollable to take more than vmax
   */
  overflow: hidden;
  font-size: 14px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  border-width: 0;
  margin: 0;
  font-family: "JosefinSans", sans-serif;
}
.app * {
  font-family: "JosefinSans", sans-serif;
}
/*********************************************************************
CLASS DEFAULT
*********************************************************************/
.defaultInput {
  width: 100%;
  background-color: rgba(240, 240, 240, 0.3);
  border-radius: 4px;
  color: #fff;
  height: 45px;
  border: none;
  padding: 0 1rem;
}
.defaultInput.inputContainer > input {
  color: #fff;
  height: 45px;
  border: none;
  background-color: transparent;
}
.defaultInput::placeholder,
.defaultInput > input::placeholder {
  color: lightgray;
}
.defaultInput.black {
  background-color: white;
  color: #2B2B2B;
  border: 1px solid #2B2B2B;
}
.defaultLittleButton {
  color: #fff;
  font-size: 0.9em;
  line-height: 1em;
  text-decoration: none;
  border: none;
  background: rgba(240, 240, 240, 0.3);
  border-radius: 50px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.defaultLittleButton.center {
  margin-left: auto;
  margin-right: auto;
}
.defaultButton {
  background: #006691;
  width: 100%;
  border-radius: 25px;
  color: #FFFFFF;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  min-height: 55px;
  line-height: 55px;
  display: block;
}
.defaultButton.center {
  margin-left: auto;
  margin-right: auto;
}
.defaultButton.smallText {
  font-size: 12px;
}
.defaultButton.active {
  background-color: #4caf50;
  color: #FFFFFF;
}
.fullsizeBtn {
  width: 100%;
  background: #191919;
  color: white;
  height: 60px;
  border: none;
  font-size: 16px;
  font-family: "JosefinSans", sans-serif;
  z-index: 1000;
}
.fullsizeBtn[disabled] {
  background: #dedede !important;
  color: #8a8a8a;
}
.btnCart {
  width: 100%;
  background: #afd687;
  color: white;
  height: 60px;
  border: none;
  font-size: 16px;
  padding: 0 8px;
}
.btnCart .countItem-btnCart {
  width: 30px;
  height: 30px;
  background: white;
  color: #191919;
}
.btnCart .price-btnCart {
  font-size: 14px;
  font-weight: lighter;
}
.topTitle-modal {
  background: #e8e8e8;
  position: relative;
  height: 60px;
}
.topTitle-modal .back-modal {
  font-weight: lighter;
  position: absolute;
  left: 10px;
  font-size: 20px;
  color: #2B2B2B;
}
.topTitle-modal .name-topTitle-modal {
  font-size: 20px;
  color: #2B2B2B;
}
.topTitle-modal.blue {
  background: #006691;
}
.topTitle-modal.blue .name-topTitle-modal {
  color: white;
}
/*********************************************************************
END CLASS DEFAULT
*********************************************************************/
.scrolled-250 .appbar {
  box-shadow: none;
}
.appbar {
  background: #FFF;
  width: 100%;
  box-shadow: 0 0 30px -10px black;
  padding: 0 1rem;
  height: 45px;
}
.appbar.active input {
  padding-left: 5%;
}
.appbar .qrBtn {
  width: 30px;
  font-size: 22px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
}
.appbar .title {
  line-height: 45px;
  font-size: 20px;
  overflow-x: auto;
  max-height: 45px;
  flex-grow: 1;
  overflow-y: hidden;
  white-space: nowrap;
}
.hotel .inputContainer input {
  display: flex;
  flex: 1;
}
@media (min-width: 300px) {
  .itemHostel {
    width: calc(50% - (8px / 2));
  }
}
.hotel .categories,
.resto .categories {
  z-index: 1;
  box-shadow: -1px 5px 5px 0px #00000045;
}
.hotel.ordering .categories,
.resto.ordering .categories {
  margin: 0;
  box-shadow: none;
}
.hotel.ordering .categoriesContainer > div,
.resto.ordering .categoriesContainer > div,
.hotel.ordering .categoriesContainer .titleCat,
.resto.ordering .categoriesContainer .titleCat {
  padding-left: 8px;
  padding-right: 8px;
}
.hotel.ordering .categoriesContainer.subCategory .titleCat,
.resto.ordering .categoriesContainer.subCategory .titleCat {
  font-size: 16px;
}
.hotel.ordering .categoriesContainer.subCategory > div,
.resto.ordering .categoriesContainer.subCategory > div {
  padding: 0px;
}
.hotel .listContainer,
.resto .listContainer {
  padding: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hotel .itemHostel,
.resto .itemHostel {
  height: 250px;
  position: relative;
  overflow: hidden;
  background: #FFF;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 8px;
}
.hotel .itemHostel img,
.resto .itemHostel img {
  padding-top: 1px;
  max-width: 100%;
  width: 100%;
  height: 40%;
  object-fit: scale-down;
  display: block;
}
.hotel .itemHostel .infoItem,
.resto .itemHostel .infoItem {
  padding-top: 10px;
  height: 60%;
  flex-wrap: wrap;
}
.hotel .itemHostel .infoItem .name,
.resto .itemHostel .infoItem .name {
  font-size: 14px;
  line-height: 16px;
  width: 100%;
  background-color: #006691;
  min-height: 48px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: #FFFFFF;
}
.hotel .itemHostel .infoItem .description-wrapper,
.resto .itemHostel .infoItem .description-wrapper {
  flex-grow: 1;
  display: flex;
  align-content: center;
}
.hotel .itemHostel .infoItem .description,
.resto .itemHostel .infoItem .description {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  padding-left: 2px;
  font-size: 12px;
  line-height: 14px;
}
.hotel .itemHostel .infoItem .description .street,
.resto .itemHostel .infoItem .description .street {
  text-align: justify;
}
.hotel .itemHostel .infoItem .description .street-code,
.resto .itemHostel .infoItem .description .street-code {
  display: flex;
}
.hotel .itemResto,
.resto .itemResto {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 8px;
}
.hotel .itemResto.resto-closed,
.resto .itemResto.resto-closed {
  filter: grayscale(1);
}
.hotel .itemResto .typeRestoItem,
.resto .itemResto .typeRestoItem {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #006691;
  color: #FFF;
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.hotel .itemResto .status,
.resto .itemResto .status {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FFF;
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.hotel .itemResto .status.open,
.resto .itemResto .status.open {
  color: #4caf50;
}
.hotel .itemResto .status.close,
.resto .itemResto .status.close {
  color: #FC4444;
}
.hotel .itemResto img,
.resto .itemResto img {
  max-width: 100%;
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.hotel .itemResto .imgPlaceHolder,
.resto .itemResto .imgPlaceHolder {
  max-width: 100%;
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.hotel .itemResto .textInfo,
.resto .itemResto .textInfo {
  height: 50%;
  padding: 0.6rem;
  background: #FFF;
  position: relative;
  flex-direction: column;
}
.hotel .itemResto .textInfo .name,
.resto .itemResto .textInfo .name {
  font-weight: bold;
  color: #333049;
  line-height: 16px;
  width: 65%;
}
.hotel .itemResto .textInfo .description,
.resto .itemResto .textInfo .description {
  height: 50%;
  color: #8a98ba;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hotel .itemResto .textInfo .infoLiv,
.resto .itemResto .textInfo .infoLiv {
  width: 100%;
  color: #555555;
}
.hotel .itemResto .textInfo .infoLiv .deliveryFees,
.resto .itemResto .textInfo .infoLiv .deliveryFees,
.hotel .itemResto .textInfo .infoLiv .payementMethodList,
.resto .itemResto .textInfo .infoLiv .payementMethodList {
  font-size: 10px;
}
.hotel .itemResto .textInfo .infoLiv .payementMethodList,
.resto .itemResto .textInfo .infoLiv .payementMethodList {
  text-align: right;
}
.hotel .itemResto .tags,
.resto .itemResto .tags {
  font-size: 8px;
  width: 35%;
  flex-wrap: wrap;
}
.hotel .itemResto .tags p,
.resto .itemResto .tags p {
  background: #006691;
  color: white;
  border-radius: 20px;
  padding: 2px 5px;
  margin: 0 3px 3px 0;
}
.hotel .itemResto .openHours,
.resto .itemResto .openHours {
  position: absolute;
  top: 35%;
  right: 8px;
  background: #FFF;
  font-size: 2.5vw;
  border-radius: 100px;
  padding: 4px 8px;
}
.hotel .categories,
.resto .categories {
  width: 100%;
  background-color: #FFF;
  padding: 8px 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  transition: padding 0.2s;
}
.hotel .categories .catList,
.resto .categories .catList {
  overflow-y: visible;
  overflow-x: auto;
  display: flex;
}
.hotel .categories .categorieInList,
.resto .categories .categorieInList {
  border-radius: 20px;
  position: relative;
  margin: 0 2px;
  background-color: #363636;
  color: #EBEBEB;
  font-size: 14px;
  padding: 0 8px;
  height: 32px;
  line-height: 35px;
  text-transform: uppercase;
  font-weight: bold;
}
.hotel .categories .categorieInList:hover,
.resto .categories .categorieInList:hover {
  background-color: #EBEBEB;
  color: #363636;
}
.hotel .categories .categorieInList a,
.resto .categories .categorieInList a {
  text-decoration: none;
  color: white;
}
.hotel .categories .categorieInList.active,
.resto .categories .categorieInList.active {
  background: #EBEBEB;
  color: #363636;
}
.hotel .categories .categorieInList.active a,
.resto .categories .categorieInList.active a {
  color: #363636;
}
.keyboard-visible .userNavBar {
  visibility: hidden;
}
.userNavBar {
  z-index: 1;
  background: #FFFFFF;
  box-shadow: 0 3px 6px #00000099;
  height: 45px;
}
.userNavBar .link-userNavBar:not(:last-child):after {
  content: "";
  width: 2px;
  background-color: rgba(240, 240, 240, 0.3);
  height: 80%;
  right: 0px;
  position: absolute;
  top: 10%;
}
.userNavBar .link-userNavBar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  position: relative;
  flex: 1;
  color: black;
  text-decoration: none;
}
.userNavBar .link-userNavBar p {
  margin-top: 2px;
  font-size: 8px;
  color: black;
}
.productList {
  background: #ffffff;
}
.productList .restoInfo {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
}
.productList .restoInfo img {
  max-width: 100%;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.productList .restoInfo .restoName {
  padding: 4px 8px;
  font-size: 20px;
  color: #333049;
  font-weight: bold;
}
.productList .restoInfo > span {
  position: absolute;
  top: 2%;
  left: 2%;
  font-size: 22px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.productList .productsContainer .categoriesContainer {
  margin-bottom: 10px;
}
.productList .productsContainer .categoriesContainer .categorySpacer {
  border-bottom: 1px solid #363636;
  padding: 0 16px;
}
.productList .productsContainer .categoriesContainer.subCategory {
  border-bottom: none;
}
.productList .productsContainer .categoriesContainer .titleCat {
  font-size: 22px;
  margin-bottom: 5px;
  color: #333049;
}
.productList .productsContainer .categoriesContainer .productItem {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -2px 2px 6px 0px rgba(0, 0, 0, 0.16);
  border: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.productList .productsContainer .categoriesContainer .productItem .containerProductItem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
}
.productList .productsContainer .categoriesContainer .productItem .containerTitleProductItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.productList .productsContainer .categoriesContainer .productItem .productName {
  font-size: 16px;
  color: #000;
  line-height: 16px;
}
.productList .productsContainer .categoriesContainer .productItem .productDesc {
  font-size: 0.75rem;
  line-height: 0.9rem;
  color: #909090;
  margin: 6px auto;
}
.productList .productsContainer .categoriesContainer .productItem .productPrice {
  font-size: 12px;
  text-align: left;
  color: #575757;
  line-height: 16px;
}
.productList .productsContainer .categoriesContainer .productItem img {
  max-width: 5rem;
  width: 100%;
  height: 5rem;
  object-fit: contain;
  border-radius: 5px;
}
.modalUi {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  z-index: 1001;
}
.modalUi .box-modalUi {
  position: relative;
  z-index: 1001;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 4px;
  overflow: hidden;
}
.modalUi .box-modalUi .box-modalUi-card {
  min-width: 250px;
  width: auto;
}
.modalUi .box-modalUi .box-modalUi-close {
  position: absolute;
  right: 0;
  height: 60px;
  width: 60px;
  font-size: 2em;
  background: #FC4444;
  color: #FFFFFF;
}
.modalUi .box-modalUi .box-modalUi-close:hover {
  background-color: rgba(252, 68, 68, 0.8);
  color: #FFFFFF;
}
.modalUi .box-modalUi .box-modalUi-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  line-height: 2rem;
  min-height: 60px;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.0125em;
  padding: 8px;
  background: #e0e0e0;
}
.modalUi .box-modalUi.blue .box-modalUi-title {
  background: #006691;
  color: white;
}
.modalUi .box-modalUi .box-modalUi-text {
  padding: 16px 8px;
  font-size: 0.875rem;
  font-weight: 400;
}
.modalUi .box-modalUi .box-modalUi-buttons {
  height: 60px;
}
.modalUi .box-modalUi .box-modalUi-buttons .back,
.modalUi .box-modalUi .box-modalUi-buttons .next {
  border: none;
  width: 100%;
  height: 100%;
}
.modalUi .box-modalUi .box-modalUi-buttons .back {
  background: #006691;
  color: #FFF;
}
.modalUi .box-modalUi .box-modalUi-buttons .back:hover {
  background: #006691;
  color: #FFF;
}
.modalUi .box-modalUi .box-modalUi-buttons .next:not(disabled) {
  background: #4caf50;
  color: #FFFFFF;
}
.modalUi .box-modalUi .box-modalUi-buttons .next:not(disabled):hover {
  background: #4caf50;
  color: #FFFFFF;
}
.modalUi .box-modalUi .box-modalUi-counter {
  padding: 0 20px 24px;
}
.modalUi .box-modalUi .box-modalUi-counter .nb-counter {
  width: 100px;
  font-size: 3em;
  line-height: 64px;
  text-align: center;
}
.expanded .price-itemOrderHistory {
  visibility: hidden;
}
.payplug-in-progress {
  display: flex;
  flex: 1;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  color: #4caf50;
}
.payplug-in-progress iframe {
  width: 100%;
  height: 100%;
}
.payplug-in-progress-text {
  font-size: large;
  color: white;
}
.modal-edit,
.modal-cart,
.modal-base {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
  background-color: white;
  z-index: 1000;
}
.modal-edit .product-description,
.modal-cart .product-description,
.modal-base .product-description {
  padding: 8px;
}
.modal-edit .modal-base-buttons,
.modal-cart .modal-base-buttons,
.modal-base .modal-base-buttons {
  height: 60px;
}
.modal-edit .modal-base-buttons .back,
.modal-cart .modal-base-buttons .back,
.modal-base .modal-base-buttons .back,
.modal-edit .modal-base-buttons .next,
.modal-cart .modal-base-buttons .next,
.modal-base .modal-base-buttons .next {
  width: 100%;
  height: 100%;
}
.modal-edit .modal-base-buttons .back,
.modal-cart .modal-base-buttons .back,
.modal-base .modal-base-buttons .back {
  background: #006691;
  color: #FFF;
}
.modal-edit .modal-base-buttons .back:hover,
.modal-cart .modal-base-buttons .back:hover,
.modal-base .modal-base-buttons .back:hover {
  background: #006691;
  color: #FFF;
}
.modal-edit .modal-base-buttons .next,
.modal-cart .modal-base-buttons .next,
.modal-base .modal-base-buttons .next {
  background: #4caf50;
  color: #FFFFFF;
}
.modal-edit .modal-base-buttons .next:hover,
.modal-cart .modal-base-buttons .next:hover,
.modal-base .modal-base-buttons .next:hover {
  background: #4caf50;
  color: #FFFFFF;
}
.show-more {
  min-height: 10vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #4caf50;
  color: #FFFFFF;
}
.show-more:hover {
  background: #4caf50;
  color: #FFFFFF;
}
.cartMovable img.cardMovableImgContainer {
  position: absolute;
  visibility: hidden;
}
/**
 user credit card list
*/
.user-card-list {
  display: flex;
  flex-direction: column;
}
.user-card-list .title {
  background: #F2F2F2;
  color: #a79494;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  padding-left: 8px;
}
.user-card-list .user-card-card {
  margin: 8px;
  border: 1px solid #006691;
  color: #006691;
  height: 50px;
  font-size: 18px;
  border-radius: 4px;
  padding: 8px;
}
.user-card-list .user-card-card.selected {
  color: #fff;
  background: #006691;
}
.user-card-list .user-card-label {
  padding: 8px;
  text-align: left;
  flex-grow: 1;
}
.user-card-list .user-card-btn {
  display: flex;
  padding: 8px;
}
@keyframes cart-item-added {
  0% {
    background-color: #2196f3;
    background-size: 0%;
  }
  100% {
    background-color: #6eb9f7;
    background-position: center;
    background-size: 100%;
    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center / 15000%;
  }
}
@keyframes move-to-cart {
  0% {
    position: absolute;
    visibility: visible;
    left: 50%;
    top: 50%;
    z-index: 1000;
    opacity: 1;
  }
  100% {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
    width: 0px;
    height: 0px;
    transform: translateY(50vh);
    opacity: 0;
  }
}
.cartAdded img.cardMovableImgContainer {
  pointer-events: none;
  user-select: none;
  animation: move-to-cart 1s;
}
.btnCart {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.btnCart:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(0, 0);
  opacity: 0.2;
  transition: 0s;
}
.btnCart.animAdd:after {
  transform: scale(10, 10);
  transition: transform 0.5s, opacity 1s;
  opacity: 0;
}
.delivery {
  display: flex;
  align-content: space-between;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  padding: 8px;
}
.delivery .container-delivery .container-delivery-text {
  padding: 8px;
  text-align: left;
  background: #e6e6e6;
}
.delivery .container-delivery select {
  width: 100%;
  height: 32px;
}
.modal-edit .itemOptions {
  display: flex;
  flex-direction: column;
}
.modal-edit .itemOptions .titleOption {
  padding: 8px/2 8px;
  background: #F4F4F4;
}
.modal-edit .itemOptions .titleOption p {
  font-size: 22px;
  color: #555555;
}
.modal-edit .itemOptions .optionList {
  display: flex;
  flex-direction: column;
}
.modal-edit .itemOptions .optionList .activeOption {
  background: rgba(76, 175, 80, 0.2);
}
.modal-edit .itemOptions .optionList > div {
  padding: 0 8px;
  min-height: 50px;
  flex-grow: 1;
  position: relative;
  font-size: 22px;
  border-bottom: 1px solid #f4f4f4;
}
.modal-edit .itemOptions .optionList > div .checkboxOption {
  border-radius: 100%;
  width: 22px;
  height: 22px;
  font-size: 22px;
  border: 2px solid #DDD;
}
.modal-edit .itemOptions .optionList > div .checkboxOption:after {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 100%;
}
.modal-edit .itemOptions .optionList > div .checkboxOption.selected {
  border-color: #4caf50;
}
.modal-edit .itemOptions .optionList > div .checkboxOption.selected:after {
  background: #4caf50;
}
.modal-edit .buttonsOptions {
  height: 50px;
}
.modal-edit .buttonsOptions .prev,
.modal-edit .buttonsOptions .next {
  width: 50%;
  height: 100%;
}
.modal-edit .buttonsOptions .prev {
  background: #e4e4e4;
}
.modal-edit .buttonsOptions .next {
  background: #4caf50;
  color: #FFFFFF;
}
.modal-edit .buttonsOptions .next:hover {
  background: #4caf50;
  color: #FFFFFF;
}
.modal-edit .itemInfo {
  z-index: 1;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.modal-edit .itemInfo .expand {
  position: absolute;
  top: 2%;
  right: 2%;
  font-size: 22px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.5);
}
.modal-edit .itemInfo .close {
  position: absolute;
  top: 2%;
  left: 2%;
  font-size: 22px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.5);
}
.modal-edit .itemInfo.expanded img {
  max-width: 100%;
  width: 100%;
  height: unset;
  object-fit: cover;
}
.modal-edit .itemInfo img {
  max-width: 100%;
  width: 100%;
  height: 10vh;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.modal-edit .itemInfo .textItemInfo {
  padding: 4px 8px;
}
.modal-edit .itemInfo .textItemInfo .titleItemInfo,
.modal-edit .itemInfo .textItemInfo .priceItemInfo {
  color: #333049;
}
.modal-edit .itemInfo .textItemInfo .titleItemInfo {
  font-size: 20px;
  font-weight: bold;
}
.modal-edit .itemInfo .textItemInfo .priceItemInfo {
  font-size: 16px;
}
.modal-edit .btnGrp {
  width: 100%;
  margin: 16px auto;
}
.modal-edit .btnGrp .btnInEdit {
  width: 30%;
  height: 32px;
  border: none;
  font-size: 2em;
  border-radius: 10px;
}
.modal-edit .btnGrp .btnInEdit.next {
  background: #3e3e3e;
  color: #FFF;
}
.containerCart {
  height: calc(100% - 120px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.itemCartSlidableContainer {
  border-bottom: 1px solid #F2F2F2;
  color: #2B2B2B;
}
.itemCartSlidableContainer > div {
  transition: left 0.4s;
}
.itemCartSlidableContainer .deleteItem {
  background: #FC4444;
  color: #FFFFFF;
  border: none;
  height: 100%;
  font-size: 16px;
  width: 100px;
}
.itemCartSlidableContainer .deleteItem:hover {
  background-color: rgba(252, 68, 68, 0.8);
  color: #FFFFFF;
}
.itemCartSlidableContainer .editItem {
  background: #006691;
  color: #FFF;
  border: none;
  height: 100%;
  font-size: 16px;
  width: 100px;
}
.itemCartSlidableContainer .editItem:hover {
  background-color: #006691;
  color: #FFF;
}
.itemCartSlidableContainer .itemCartContent {
  background-color: white;
  padding: 8px;
}
.itemCartSlidableContainer .itemCartContent:after {
  content: "";
  width: 5px;
  position: absolute;
  right: 2px;
  height: 80%;
  top: 10%;
  background-color: #F2F2F2;
  border-radius: 50px;
}
.itemCartContent {
  padding: 8px;
}
.itemCartContent .mainItem .countItemCart {
  background: #F2F2F2;
  width: 30px;
  height: 30px;
  font-size: 16px;
}
.itemCartContent .mainItem .nameItemCart {
  margin-left: 10px;
  font-size: 16px;
}
.itemCartContent .mainItem .priceItemCart {
  font-size: 18px;
  width: 80px;
  text-align: right;
}
.itemCartContent .optionItemCart {
  padding-left: 40px;
}
.itemCartContent .optionItemCart .nameOptionItemCart {
  margin-left: 5px;
}
.itemCartContent .optionItemCart .countOptionItemCart,
.itemCartContent .optionItemCart .nameOptionItemCart,
.itemCartContent .optionItemCart .priceOptionItemCart {
  font-size: 15px;
  font-family: "JosefinSansLight", serif;
}
.totalCart {
  padding: 8px;
  background: #006691;
  color: #FFF;
  font-size: 22px;
  width: 100%;
  height: 60px;
}
.finaliseStepComponent {
  height: calc(100% - 180px);
  overflow: scroll;
}
.finaliseStepComponent.payment {
  text-align: center;
}
.finaliseStepComponent .clickableItemList .clickableInStep {
  margin: 10px;
  border: none;
  border-radius: 100%;
  font-size: 1em;
  height: 64px;
  width: 64px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}
.finaliseStepComponent .paymentItem {
  height: 150px;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  margin: 10px;
}
.finaliseStepComponent .paymentItem.selected {
  border: 2px solid #4caf50;
}
.finaliseStepComponent .paymentItem div {
  color: white;
  text-align: center;
  padding: 0 10px;
}
.finaliseStepComponent .paymentItem img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.profilContainer {
  height: 100%;
  background: white;
}
.profilContainer .topTitle-profil {
  position: relative;
  height: 60px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  z-index: 10;
}
.profilContainer .topTitle-profil .back-modal {
  font-weight: lighter;
  position: absolute;
  left: 10px;
  font-size: 20px;
  color: #2B2B2B;
  width: 40px;
  height: 40px;
}
.profilContainer .topTitle-profil .name-topTitle-modal {
  font-size: 20px;
  color: #2B2B2B;
}
.profilContainer .topTitle-profil .settingprofil-topTitle-modal {
  position: absolute;
  right: 10px;
  width: 40px;
  height: 40px;
}
.profilContainer .container-delivery.valid .titlePart-topTitle-modal {
  background-color: #afd687;
  color: white;
}
.profilContainer .titlePart-topTitle-modal {
  background: #F2F2F2;
  color: #a79494;
  font-size: 16px;
  height: 50px;
  padding: 0 20px;
}
.profilContainer .itemPart-topTitle-modal {
  font-size: 16px;
  height: 50px;
  padding: 0 20px;
  text-decoration: none;
  color: #2B2B2B;
}
.profilContainer .itemPart-topTitle-modal .tokenActiveLanguage {
  color: #4caf50;
  display: none;
}
.profilContainer .itemPart-topTitle-modal.active .tokenActiveLanguage {
  display: block;
}
.profilContainer .linkPart-topTitle-modal {
  color: #5663FF;
  font-size: 16px;
  height: 50px;
  padding: 0 20px;
}
.profilContainer .inputProfil {
  height: 50px;
  padding: 0px 10px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 5px;
  opacity: 1;
  color: #555555;
  font-size: 16px;
  border: none;
  margin: 8px 0px;
}
.profilContainer select.inputProfil {
  line-height: 50px;
}
.profilContainer a.btn-profil {
  text-decoration: underline;
}
.profilContainer .btn-profil {
  border: 1px solid #006691;
  color: #006691;
  height: 50px;
  font-size: 18px;
  border-radius: 4px;
}
.profilContainer .btn-profil.btn-full {
  color: #fff;
  background: #006691;
  border-radius: 0;
}
.profilContainer input:disabled {
  color: gray;
}
.itemOrderHistory {
  border-radius: 4px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  margin: 8px;
}
.itemOrderHistory .name-token {
  line-height: 14px;
  height: 10px;
}
.itemOrderHistory .tokenOnGoingOrder {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: grey;
  margin-right: 10px;
}
.itemOrderHistory .tokenOnGoingOrder.processing {
  background-color: #006691;
}
.itemOrderHistory .tokenOnGoingOrder.delivery {
  background-color: orange;
}
.itemOrderHistory .tokenOnGoingOrder.delivered {
  background-color: green;
}
.itemOrderHistory .tokenOnGoingOrder.canceled {
  background-color: red;
}
.itemOrderHistory .title-itemOrderHistory {
  position: relative;
  margin-top: -56px;
  height: 56px;
}
.itemOrderHistory .title-itemOrderHistory p {
  color: white;
}
.itemOrderHistory .img-itemOrderHistory {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 56px;
  background-color: rgba(0, 0, 0, 0.7);
}
.itemOrderHistory .img-itemOrderHistory:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  opacity: 0.4;
}
.itemOrderHistory .img-itemOrderHistory p {
  color: white;
}
.itemOrderHistory .date-itemOrderHistory {
  font-family: "JosefinSansLight", serif;
}
.login {
  padding: 0 8px;
  height: 100vh;
}
.login img {
  max-width: 150px;
}
.qrscan-container {
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.qrscan-container .closeqrscan {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  background: white;
  position: absolute;
  top: 10px;
  right: 10px;
}
.md-10 {
  margin: 10px;
}
.md-9 {
  margin: 9px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-9 {
  margin-bottom: 9px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-9 {
  margin-top: 9px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-9 {
  margin-left: 9px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-9 {
  margin-right: 9px;
}
.w-100 {
  width: 100%;
}
.mr-auto {
  margin-right: auto;
}
.ml-auto {
  margin-left: auto;
}
.text-center {
  text-align: center;
}
.langselect .vs__dropdown-menu {
  padding-left: 0px;
  min-width: 75px;
}
.langselect .vs__dropdown-option {
  padding-left: 0px;
}
.login .vti__input::placeholder {
  color: lightgray !important;
}
.login .vti__input {
  padding: 0px;
  color: white;
}
.vue-tel-input {
  padding-right: 0px;
  border: none !important;
}
.vue-tel-input.inverted {
  flex-direction: row-reverse;
}
.vue-tel-input.inverted .vti__dropdown,
.vue-tel-input.inverted .vti__dropdown-list {
  max-width: 90vw;
  color: #2B2B2B;
  border-radius: 4px;
}
.vue-tel-input.inverted .vti__input {
  background-color: transparent;
}
.vue-tel-input.inverted .vti__input::placeholder {
  color: lightgray;
}
.vue-tel-input.inverted .vti__input:focus {
  outline: 0;
}
.vue-tel-input.inverted .vti__dropdown-list {
  right: -1px;
  left: unset;
}
.vue-tel-input:focus-within {
  box-shadow: none !important;
}
.countrySelectorHeader {
  position: absolute;
  left: 8px;
  top: 8px;
  float: left;
}
.chip {
  border-radius: 10px;
  padding: 2px 5px;
  background-color: rgba(0, 0, 0, 0.15);
}
.chip.small {
  font-size: smaller;
}
.scrolled-250 .ordering .categories {
  z-index: 1;
  position: fixed;
  left: 0px;
  right: 0px;
  box-shadow: -1px 5px 5px 0px #00000045;
  padding: 8px/2 0;
  top: 45px;
}
.scroll-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-content {
  display: flex;
  overflow: auto;
  flex-direction: column;
  flex: 1;
}
.scroll-static-elem {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.scroll-scroll-elem {
  display: flex;
  flex-grow: 1;
  overflow-y: scroll;
  flex-direction: column;
}
.scroll-scroll-nested-elem {
  overflow-y: auto;
  flex-grow: 1;
  flex-direction: column;
}
.scroll-scroll-nested-elem .scroll-scroll-elem {
  height: 100%;
}
.cae-row {
  display: flex;
  flex-direction: row;
}
.cae-col {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  flex-direction: column;
}
.cae-router-link {
  text-decoration: none;
}
/**
  Center CGU/CGV links until the line is not full
 */
.summary-cgu-links {
  display: flex;
  align-content: space-around;
}
.summary-cgu-links .summary-cgu-links-btn {
  text-align: center;
  flex-grow: 1;
}
/* Ripple effect */
.ripple {
  background-position: center;
  background-color: #fff;
  transition: background 0.8s;
}
.ripple:hover {
  background: #fff radial-gradient(circle, transparent 1%, #fff 1%) center / 15000%;
}
.ripple:active {
  background-color: #bbd4f5;
  background-size: 100%;
  transition: background 0s;
}
#vrouter,
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
#vrouter:after,
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  -webkit-animation: spin 1.2s linear infinite;
  -moz-animation: spin 1.2s linear infinite;
  animation: spin 1.2s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.waiting-for-ipn {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;
  background-color: #2B2B2B;
}
.app-version {
  font-size: 10px;
  color: #d2bdbd;
  text-align: left;
}
.app-version.absolute {
  position: absolute;
  left: 8px;
  bottom: 8px;
}
.topTitle-modal-container {
  flex-direction: row;
}
.topTitle-modal-container .topTitle-modal {
  flex-grow: 1;
}
.topTitle-modal-container .topTitle-modal-close {
  background-color: #FC4444;
  color: #FFFFFF;
  height: 100%;
  width: 60px;
  height: 60px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.topTitle-modal-container .topTitle-modal-close:hover {
  background-color: rgba(252, 68, 68, 0.8);
  color: #FFFFFF;
}
#vrouter {
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.caeLink {
  color: #333049;
  text-decoration: none;
}