@charset "UTF-8";
:root {
  --header-height: 3.5rem; /* alto del header */
  --header-height-rest: 3rem; /* alto del header */
  --padding: 1rem; /* padding principal */
  --background-page: #fff; /* color de fondo de la pagina */
  --background-header: #fff; /* color de fondo del header */
  --background-1-color: #f3a71b;
  --border-color: #74796e; /* color de borde */
  --link-color: #395E79; /* color de enlaces */
  --error-color: rgb(143, 61, 61); /* color de error o alerta */
  --text-1-color: #1a1c19; /* color de texto 1 */
  --text-2-color: #3b3c39; /* color de texto 1 */
  --font-small: .92rem; /* texto pequeño */
  --font-small2: .95rem; /* texto pequeño */
  --font-little: .82rem; /* texto pequeño */
  --font-normal: 1rem;
  --font-subtitle: 1.2rem; /* texto mediano */
  --font-subtitle2: 1.4rem; /* texto mediano 2 */
  --font-title: 1.5rem; /* texto pequeño */
  --font-grand: 2rem; /* texto grande */
  --currency: "XAF"; /* divisa */
  --font-currency: .8rem; /* tamaño de divisa */
  --banner-img-width-size: 18rem; /* Tamaño de la imagen del banner */
  --banner-img-height-size: 18rem; /* Tamaño de la imagen del banner */
  --circle-size: .4rem; /* tamaño del circulito para las listas */
}
@media screen and (min-width: 768px) {
  :root {
    --padding: 2rem; /* padding principal */
    --font-subtitle: 1.2rem; /* texto pequeño */
    --font-title: 2rem; /* texto pequeño */
    --font-grand: 3rem;
    --banner-img-width-size: 30rem; /* Tamaño de la imagen del banner */
    --banner-img-height-size: 30rem; /* Tamaño de la imagen del banner */
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --banner-img-width-size: 32rem; /* Tamaño de la imagen del banner */
    --banner-img-height-size: 32rem; /* Tamaño de la imagen del banner */
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --font-title: 2rem; /* texto pequeño */
    --font-grand: 4rem; /* texto grande */
    --banner-img-width-size: 32rem; /* Tamaño de la imagen del banner */
    --banner-img-height-size: 32rem; /* Tamaño de la imagen del banner */
  }
}

/* trade */
/* pay */
/* usado en btn-2 */
.btn-1, .btn-2 {
  display: inline-block;
  height: max-content;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  transition: transform 0.3s ease;
  cursor: pointer;
}
.btn-1.bold, .btn-2.bold {
  font-weight: 600;
}
.btn-1:active, .btn-2:active {
  transform: scale(0.98);
}

.btn-1 {
  background: #D79F38;
  color: #fff;
}
.btn-1:hover {
  opacity: 0.8;
}

.btn-2 {
  background: #74796e;
  color: #fff;
}
.btn-2:hover {
  opacity: 0.8;
}

.btn {
  display: inline-block;
  height: max-content;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 0.2rem;
  padding: 0.4rem 0.7rem;
  font-size: var(--font-small);
  transition: transform 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.98);
}
.btn:hover {
  opacity: 0.8;
}

.btn-1--demo {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border-radius: 0.3rem;
  font-size: var(--font-normal);
  font-weight: bold;
  transition: all 0.3s;
}
.btn-1--demo .icon {
  width: 1rem;
  height: 1rem;
}
.btn-1--demo:hover {
  gap: 1rem;
}

.add-currency::after {
  content: var(--currency);
  display: inline-block;
  margin-left: 0.2rem;
  font-size: var(--font-currency);
  color: inherit;
}

.add-arrow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 1rem solid var(--border-color);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  margin: 0.2rem 0.2rem 0;
  transition: all 0.3s;
}

.circle {
  display: inline-block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: var(--text-1-color);
}

.app__install__wrapper {
  position: fixed;
  z-index: 1000000;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.app__install__wrapper.active {
  display: flex;
}
.app__install__wrapper .app__install {
  max-width: 30rem;
  width: 100%;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  justify-content: space-between;
}
.app__install__wrapper .app__install .app__install__container {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.app__install__wrapper .app__install .app__install__container .app__install__profile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.app__install__wrapper .app__install .app__install__container .app__install__profile .app__install__logo {
  width: 4rem;
  height: 4rem;
  border-radius: 0.3rem;
}
.app__install__wrapper .app__install .app__install__container .app__install__profile .app__install__logo img {
  border-radius: 0.3rem;
}
.app__install__wrapper .app__install .app__install__container .app__install__profile .app__install__info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.app__install__wrapper .app__install .app__install__container .app__install__profile .app__install__info .app__install__name {
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.app__install__wrapper .app__install .app__install__container .app__install__profile .app__install__info .app__install__url {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.app__install__wrapper .app__install .app__install__container .app__install__exit .icon {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.3rem;
  border-radius: 50%;
}
.app__install__wrapper .app__install .app__install__container .app__install__exit .icon:hover {
  background: #ddd;
}
.app__install__wrapper .app__install .app__install__footer {
  display: flex;
  justify-content: end;
}
.app__install__wrapper .app__install .app__install__footer .btn-1 {
  border: 1px solid #D79F38;
  padding: 0.4rem 1rem;
  color: var(--text-1-color);
  background: #fff;
  font-size: var(--font-little);
  text-transform: uppercase;
}

.keyboard {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.2rem;
  display: flex;
  justify-content: center;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  background: #fff;
}
.keyboard .keyboard__numbers {
  margin-left: 1rem;
}
.keyboard .keyboard__row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.keyboard .keyboard__row .keyboard__key, .keyboard .keyboard__row .keyboard__special {
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: var(--font-subtitle);
  user-select: none;
  color: var(--text-1-color);
}
.keyboard .keyboard__row .keyboard__key .icon, .keyboard .keyboard__row .keyboard__special .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-2-color);
}
.keyboard .keyboard__row .keyboard__key.mayuscule, .keyboard .keyboard__row .keyboard__key.delete, .keyboard .keyboard__row .keyboard__special.mayuscule, .keyboard .keyboard__row .keyboard__special.delete {
  width: 4.5rem;
}
.keyboard .keyboard__row .keyboard__key:hover, .keyboard .keyboard__row .keyboard__special:hover {
  background: #ddd;
}
.keyboard .keyboard__row .keyboard__key.space, .keyboard .keyboard__row .keyboard__special.space {
  width: 15rem;
}
.keyboard .keyboard__row .keyboard__special {
  color: var(--text-2-color);
}

.confirm__wrapper {
  background: red;
}
.confirm__wrapper .confirm__form {
  max-width: 20rem;
  width: 100%;
}
.confirm__wrapper .confirm__form .confirm__container .confirm__message {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.confirm__wrapper .confirm__form .confirm__btn {
  display: flex;
  justify-content: end;
  padding: 0.5rem 1rem 1rem;
}
.confirm__wrapper .confirm__form .confirm__btn .btn-1 {
  background: red;
}

.loader__container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader__container .loader {
  width: 2rem;
  height: 2rem;
  border: 2px solid transparent;
  border-top-color: #D79F38;
  border-left-color: #D79F38;
  border-radius: 50%;
  animation: wheel 0.7s infinite linear;
}
@keyframes wheel {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.header__banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem var(--padding);
  background: #2d4f83;
}
@media screen and (min-width: 768px) {
  .header__banner {
    padding: 1rem var(--padding);
    flex-direction: row;
    justify-content: space-between;
  }
}
.header__banner .header__banner__offer {
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: #fff;
  text-decoration: underline;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .header__banner .header__banner__offer {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .header__banner .header__banner__offer {
    font-size: var(--font-normal);
  }
}
.header__banner .header__banner__action {
  display: flex;
  align-items: center;
}
.header__banner .header__banner__action .banner__action__text {
  display: none;
}
@media screen and (min-width: 768px) {
  .header__banner .header__banner__action .banner__action__text {
    display: inline;
    margin-right: 0.5rem;
    font-size: var(--font-small);
    color: #fff;
  }
}
@media screen and (min-width: 1024px) {
  .header__banner .header__banner__action .banner__action__text {
    font-size: var(--font-normal);
  }
}
.header__banner .header__banner__action .banner__action__call {
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: #fff;
  background: #2f60a9;
}
@media screen and (min-width: 1024px) {
  .header__banner .header__banner__action .banner__action__call {
    font-size: var(--font-normal);
  }
}
.header__banner .header__banner__action .banner__action__call .icon {
  width: 0.8rem;
  height: 0.8rem;
  color: #fff;
}

.header__logo {
  height: var(--header-height-rest);
  display: flex;
  align-items: center;
}
.header__logo .header__logo__img {
  display: flex;
  align-items: center;
  width: 8rem;
}
.header__logo .header__logo__title {
  font-size: var(--font-title);
  color: var(--text-1-color);
  font-weight: 400;
}

.header__nav {
  position: fixed;
  z-index: 1000;
  top: var(--header-height);
  bottom: 0;
  width: 85vw;
  left: -100%;
  background: #2d4f83;
  display: flex;
  flex-direction: column;
  padding: var(--padding);
  transition: all 0.3s;
}
.header__nav.active {
  left: 0;
}
@media screen and (min-width: 1024px) {
  .header__nav {
    position: static;
    padding: 0;
    width: max-content;
    flex-direction: row;
    align-items: center;
    background: transparent;
  }
  .header__nav::bofore {
    position: initial;
  }
}
.header__nav .header__nav__link, .header__nav .btn {
  font-size: var(--normal);
  border-radius: 0.3rem;
}
.header__nav .header__nav__link {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  margin-bottom: 1rem;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .header__nav .header__nav__link {
    display: inline;
    margin-bottom: 0;
    margin-right: 1rem;
    color: var(--text-1-color);
  }
}
.header__nav .header__nav__link.active .icon {
  display: inline-block;
  width: 2rem;
  height: 1rem;
}
@media screen and (min-width: 1024px) {
  .header__nav .header__nav__link.active .icon {
    display: none;
  }
  .header__nav .header__nav__link.active::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    display: inline-block;
    height: 2px;
    background: #D79F38;
    animation: hover 0.3s ease forwards;
  }
  @keyframes hover {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
}
@media screen and (min-width: 1024px) {
  .header__nav .header__nav__link:hover {
    background: #eee;
  }
}
.header__nav .header__nav__link .icon {
  display: none;
}
.header__nav .header__nav__bar {
  font-size: 2.2rem;
  color: var(--text-1-color);
  transform: scale(0.4, 1);
  display: none;
}
@media screen and (min-width: 1024px) {
  .header__nav .header__nav__bar {
    display: inline-block;
    margin-right: 1rem;
  }
}
.header__nav .btn {
  padding: 0.5rem 1rem;
  border: none;
}
.header__nav .btn.btn-signup {
  border: 1px solid #272727;
  color: var(--text-1-color);
}
.header__nav .btn.btn-signup:hover {
  background: rgba(215, 159, 56, 0.75);
}
.header__nav .btn.btn-begin {
  background: #D79F38;
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .header__nav .btn {
    display: inline-block;
    padding: 0.5rem 1rem;
  }
}

.header__nav__wrapper {
  position: fixed;
  z-index: 100;
  top: var(--header-height);
  left: -100%;
  width: 100vw;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}
.header__nav__wrapper.active {
  left: 0;
}
@media screen and (min-width: 1024px) {
  .header__nav__wrapper {
    display: none;
    position: static;
  }
}

.header__profile__options {
  position: absolute;
  z-index: 100;
  right: 0;
  top: 100%;
  margin-top: 1rem;
  min-width: 18rem;
  max-height: 85vh;
  padding: 1rem;
  border-radius: 0.3rem;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
  overflow: auto;
}
.header__profile__options .header__profile__avatar {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #aaa;
}
.header__profile__options .header__profile__avatar .profile__avatar__image {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 1rem;
  flex: none;
}
.header__profile__options .header__profile__avatar .profile__avatar__image img {
  border-radius: 50%;
}
.header__profile__options .header__profile__avatar .profile__avatar__info {
  display: flex;
  flex-direction: column;
}
.header__profile__options .header__profile__avatar .profile__avatar__info .profile__avatar__name {
  margin-bottom: 0.5rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.header__profile__options .header__profile__avatar .profile__avatar__info .profile__avatar__email {
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.header__profile__options .header__profile__account {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  border-bottom: 1px solid #aaa;
}
.header__profile__options .header__profile__account .header__profile__option {
  display: flex;
  align-items: center;
  padding: 0.3rem 0;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.header__profile__options .header__profile__account .header__profile__option:last-child {
  margin-bottom: 0;
}
.header__profile__options .header__profile__account .header__profile__option .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-1-color);
}
.header__profile__options .header__profile__account .header__profile__option:hover {
  background: #eee;
}
.header__profile__options .header__profile__terminals {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header__profile__options .header__profile__terminals .header__profile__terminal {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.2rem;
  cursor: pointer;
}
.header__profile__options .header__profile__terminals .header__profile__terminal:last-child {
  margin-bottom: 0;
}
.header__profile__options .header__profile__terminals .header__profile__terminal.active {
  background: #eee;
}
.header__profile__options .header__profile__terminals .header__profile__terminal.active .icon, .header__profile__options .header__profile__terminals .header__profile__terminal.active span {
  color: #D79F38;
}
.header__profile__options .header__profile__terminals .header__profile__terminal .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 1rem;
  color: var(--text-2-color);
}
.header__profile__options .header__profile__terminals .header__profile__terminal span {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-1-color);
}

.header__profile__icon {
  position: relative;
  margin-left: 1.5rem;
}
.header__profile__icon.active .header__profile__options {
  transform: scale(1);
}
.header__profile__icon .header__profile__photo {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  cursor: pointer;
}
.header__profile__icon .header__profile__photo img {
  border-radius: 50%;
}

.header__lang__options {
  position: absolute;
  z-index: 1000;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  min-width: 2.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
}
.header__lang__options .header__lang__option {
  display: flex;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.95rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.header__lang__options .header__lang__option:hover {
  background: #ddd;
}

.header__lang__icon {
  position: relative;
  border: 1px solid var(--text-1-color);
  border-radius: 0.1rem;
  margin-left: 1rem;
  height: 1.2rem;
}
@media screen and (min-width: 1024px) {
  .header__lang__icon {
    margin-left: 2rem;
  }
}
.header__lang__icon.active .header__lang__options {
  transform: scale(1);
}
.header__lang__icon .header__lang__text {
  display: flex;
  align-items: center;
  width: 2.2rem;
  height: 100%;
  padding: 0.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  cursor: pointer;
}
.header__lang__icon .header__lang__text .icon {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
}
.header__lang__icon .header__lang__text:hover {
  background: #eee;
}

.header__account {
  display: flex;
  align-items: center;
}

.header__container {
  padding: 0 var(--padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--background-header);
  transition: all 0.3s;
}
.header__container.shadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.header__container .header__container__action {
  display: flex;
}
.header__container .header__container__action .btn-1.start {
  margin-right: 1rem;
}
@media screen and (min-width: 768px) {
  .header__container .header__container__action .btn-1.start {
    margin-right: 2rem;
  }
}
.header__container .icon-menu {
  width: 2rem;
  height: 1.8rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.header__container .icon-menu:hover {
  background: rgba(215, 159, 56, 0.15);
}
@media screen and (min-width: 1024px) {
  .header__container .icon-menu {
    display: none;
  }
}

.header__online {
  text-align: center;
  background: #E05555;
}
.header__online .header__online__text {
  padding: 0.5rem;
  font-size: var(--font-small);
  color: #fff;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: column;
  flex: none;
}
.header .header__container {
  height: var(--header-height-rest);
}

.banner {
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "info" "image" "action";
  align-items: center;
  padding: 0 var(--padding) 2rem;
  padding-top: 8rem;
  background: var(--background-page);
}
@media screen and (min-width: 1024px) {
  .banner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "info image" "action image";
  }
}
.banner .banner__info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}
@media screen and (min-width: 1024px) {
  .banner .banner__info {
    align-items: initial;
    margin-top: 0;
    margin-right: 2rem;
  }
}
.banner .banner__info .banner__info__title {
  margin-bottom: 2rem;
  color: var(--text-1-color);
  font-weight: bold;
  font-size: var(--font-grand);
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .banner .banner__info .banner__info__title {
    text-align: left;
  }
}
.banner .banner__info .banner__info__text {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: var(--text-1-color);
  text-align: center;
  line-height: 2rem;
}
@media screen and (min-width: 1024px) {
  .banner .banner__info .banner__info__text {
    text-align: left;
    margin-bottom: 3rem;
    font-size: 1.5rem;
  }
}
.banner .banner__info .banner__info__video {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #2d4f83;
  text-align: center;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .banner .banner__info .banner__info__video {
    font-size: var(--font-normal);
  }
}
.banner .banner__info .banner__info__video .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: #2d4f83;
}
.banner .banner__info .banner__info__video .time {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--border-color);
}
.banner .banner__image {
  grid-area: image;
  width: var(--banner-img-width-size);
  height: var(--banner-img-height-size);
  margin: 2rem auto 0;
}
@media screen and (min-width: 1024px) {
  .banner .banner__image {
    margin-top: 0;
  }
}
.banner .banner__action {
  grid-area: action;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .banner .banner__action {
    flex-direction: row;
    margin-right: 2rem;
  }
}
.banner .banner__action .banner__linkBtn {
  width: 100%;
  text-align: center;
  padding: 0.7rem 1rem;
  flex: none;
  font-weight: 600;
}
@media screen and (min-width: 1024px) {
  .banner .banner__action .banner__linkBtn {
    width: initial;
    padding: 1rem 2rem;
    font-size: var(--font-normal);
  }
}
.banner .banner__action .banner__linkBtn.register {
  margin-bottom: 1rem;
  border: 1px solid #D79F38;
  color: #D79F38;
  background: transparent;
  transition: all 0.3s;
}
.banner .banner__action .banner__linkBtn.register:hover {
  background: #D79F38;
  color: #fff;
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  .banner .banner__action .banner__linkBtn.register {
    margin-bottom: 0;
    margin-right: 2rem;
    font-size: var(--font-normal);
  }
}
.banner .banner__action .banner__form {
  display: flex;
  align-items: center;
  width: 100%;
  padding-right: 2rem;
  color: #D79F38;
  max-width: 50rem;
}
.banner .banner__action .banner__form .form__item {
  width: 100%;
  margin-right: 1rem;
}
.banner .banner__action .banner__form .form__item .form__label {
  font-size: var(--font-subtitle);
  color: var(--text-2-color);
}
.banner .banner__action .banner__form .form__item .form__item__container .form__input__container .form__input {
  border-radius: 0.2rem;
  height: 2.8rem;
  font-size: var(--font-subtitle);
  letter-spacing: 0.5rem;
}
.banner .banner__action .banner__form .banner__form__btn {
  text-align: center;
  padding: 0.9rem 2rem;
  flex: none;
  margin-top: 0.4rem;
  font-weight: 600;
}
@media screen and (min-width: 1024px) {
  .banner .banner__action .banner__form .banner__form__btn {
    font-size: var(--font-normal);
  }
}

.partner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  padding: 3rem var(--padding) 1rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .partner {
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto;
    align-items: center;
  }
}
.partner .partner__title {
  max-width: 20rem;
  margin-bottom: 0.5rem;
  font-size: var(--font-subtitle2);
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--text-1-color);
}
.partner .partner__container {
  display: flex;
  margin-top: 2rem;
  overflow: hidden;
}
.partner .partner__container:hover .partner__list {
  animation-play-state: paused;
}
.partner .partner__container .partner__list {
  display: flex;
  animation: scrollX 10s linear infinite;
}
@keyframes scrollX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.partner .partner__container .partner__list .partner__item .partner__figure {
  height: 3rem;
  width: 9rem;
}
.partner .partner__container .partner__list .partner__item .partner__figure img {
  object-fit: contain;
}

.learn {
  padding: 5rem var(--padding) 1rem;
}
.learn .learn__image {
  border-radius: 0.2rem;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.25);
}
.learn .learn__image img {
  object-fit: contain;
  border-radius: 0.2rem;
}

.advantage {
  padding: 3rem var(--padding) 1rem;
}
.advantage .advantage__label {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: var(--font-subtitle);
  color: #D79F38;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5rem;
}
.advantage .advantage__container {
  max-width: 50rem;
  margin: 2rem auto 0;
}
.advantage .advantage__container .advantage__item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "info" "image";
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .advantage .advantage__container .advantage__item {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "info image";
    align-items: center;
  }
  .advantage .advantage__container .advantage__item.alternate {
    grid-template-areas: "image info";
  }
}
.advantage .advantage__container .advantage__item .advantage__info {
  grid-area: info;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .advantage .advantage__container .advantage__item .advantage__info {
    margin-right: 2rem;
    margin-bottom: 0;
  }
  .advantage .advantage__container .advantage__item .advantage__info.alternate {
    margin-right: 0;
    margin-left: 2rem;
  }
}
.advantage .advantage__container .advantage__item .advantage__info .advantage__info__title {
  margin-bottom: 2rem;
  font-size: var(--font-subtitle2);
  color: var(--text-1-color);
  font-weight: 600;
}
.advantage .advantage__container .advantage__item .advantage__info .advantage__info__item {
  margin-bottom: 1rem;
}
.advantage .advantage__container .advantage__item .advantage__info .advantage__info__item .advantage__info__subtitle {
  margin-bottom: 0.5rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  font-weight: 600;
}
.advantage .advantage__container .advantage__item .advantage__info .advantage__info__item .advantage__info__text {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  line-height: 1.5rem;
}
.advantage .advantage__container .advantage__item .advantage__image {
  grid-area: image;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.25);
}

.workflow {
  margin-top: 2rem;
  padding: 4rem var(--padding);
  background: #2d4f83;
}
.workflow .workflow__title {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: var(--font-subtitle);
  color: #D79F38;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.5rem;
}
.workflow .workflow__container {
  display: flex;
  flex-direction: column;
  max-width: 50rem;
  margin: 2rem auto 0;
}
@media screen and (min-width: 768px) {
  .workflow .workflow__container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.workflow .workflow__container .workflow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}
.workflow .workflow__container .workflow__item:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .workflow .workflow__container .workflow__item {
    margin-bottom: 0;
    margin: 0 1.5rem;
  }
}
.workflow .workflow__container .workflow__item .icon {
  margin-bottom: 0.5rem;
  width: 3rem;
  height: 3rem;
  color: #fff;
}
.workflow .workflow__container .workflow__item .workflow__label {
  margin-bottom: 1rem;
  font-size: var(--font-subtitle);
  color: #fff;
  font-weight: 600;
}
.workflow .workflow__container .workflow__item .workflow__text {
  max-width: 15rem;
  font-size: var(--font-normal);
  color: #fff;
  text-align: center;
}

.tool {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  padding: 0 var(--padding);
  max-width: 80rem;
  margin: 5rem auto 0;
}
@media screen and (min-width: 768px) {
  .tool {
    grid-template-columns: 15rem 1fr;
    grid-template-rows: auto;
  }
}
@media screen and (min-width: 1024px) {
  .tool {
    grid-template-columns: 20rem 1fr;
  }
}
.tool .tool__title {
  margin-bottom: 2rem;
  font-size: var(--font-subtitle2);
  color: var(--text-1-color);
  font-weight: 600;
}
.tool .tool__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  max-width: 55rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .tool .tool__container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .tool .tool__container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.tool .tool__container .tool__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  transition: all 0.3s;
  padding: 0.5rem;
  border-radius: 0.3rem;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .tool .tool__container .tool__item {
    margin: 1rem;
  }
}
.tool .tool__container .tool__item:hover {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
}
.tool .tool__container .tool__item .tool__item__icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  background: #D79F38;
}
.tool .tool__container .tool__item .tool__item__icon .icon {
  width: 2rem;
  height: 2rem;
  color: #fff;
}
.tool .tool__container .tool__item .tool__item__title {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2d4f83;
  font-size: var(--font-subtitle);
}
.tool .tool__container .tool__item .tool__item__text {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  line-height: 1.5rem;
}

.more {
  padding: 0 var(--padding);
  max-width: 50rem;
  margin: 2rem auto 0;
}
.more .more__title {
  margin-bottom: 1rem;
  font-size: var(--font-subtitle2);
  color: var(--text-1-color);
  font-weight: 600;
}
.more .more__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  max-width: 55rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .more .more__container {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .more .more__container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.more .more__container .tool__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  padding: 0.5rem;
  border-radius: 0.3rem;
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .more .more__container .tool__item {
    margin: 1rem;
  }
}
.more .more__container .tool__item:hover {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
}
.more .more__container .tool__item .icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  color: #2d4f83;
}
.more .more__container .tool__item .tool__item__title {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2d4f83;
  font-size: var(--font-normal);
}
.more .more__container .tool__item .tool__item__text {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  line-height: 1.5rem;
}

.pricing__item {
  width: 100%;
  margin: 0 0 2rem;
  border-radius: 0.4rem;
  transition: all 0.3s;
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.25), 0 0 7px 0 rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 768px) {
  .pricing__item {
    max-width: 20rem;
    margin: 1rem;
  }
}
.pricing__item .pricing__item__header {
  padding: 1rem;
  border-radius: 0.4rem 0.4rem 0 0;
}
.pricing__item .pricing__item__header.personal {
  background: #999;
}
.pricing__item .pricing__item__header.basic {
  background: #D79F38;
}
.pricing__item .pricing__item__header.premium {
  background: #2d4f83;
}
.pricing__item .pricing__item__header .pricing__item__title {
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: var(--font-title);
  color: #fff;
}
@media screen and (min-width: 768px) {
  .pricing__item .pricing__item__header .pricing__item__title {
    font-size: var(--font-subtitle2);
  }
}
.pricing__item .pricing__item__header .pricing__item__price {
  display: flex;
  align-items: center;
}
.pricing__item .pricing__item__header .pricing__item__price .price {
  --font-currency: var(--font-subtitle);
  font-weight: 600;
  font-size: var(--font-title);
  color: #fff;
}
@media screen and (min-width: 768px) {
  .pricing__item .pricing__item__header .pricing__item__price .price {
    --font-currency: var(--font-subtitle);
    font-size: var(--font-subtitle2);
  }
}
.pricing__item .pricing__item__header .pricing__item__price .label {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: #fff;
}
.pricing__item .pricing__item__header .pricing__item__offer {
  display: flex;
}
.pricing__item .pricing__item__header .pricing__item__offer .item__offer__oldPrice {
  margin-right: 0.5rem;
  white-space: nowrap;
  text-decoration: line-through;
  font-size: var(--font-small);
  color: #fff;
}
.pricing__item .pricing__item__header .pricing__item__offer .item__offer__text {
  font-size: var(--font-small);
  color: #fff;
}
.pricing__item .pricing__item__container {
  padding: 1rem 1rem 1.5rem;
}
.pricing__item .pricing__item__container .pricing__item__description {
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.5rem;
  font-weight: 600;
}
.pricing__item .pricing__item__container .pricing__item__tools {
  margin-top: 1rem;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool {
  display: flex;
  padding: 0.5rem 0;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 1rem;
  color: #2d4f83;
  flex: none;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool .icon.personal {
  color: #999;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool .icon.basic {
  color: #D79F38;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool .icon.premium {
  color: #2d4f83;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool .item__tool__name {
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool.disabled {
  opacity: 0.6;
}
.pricing__item .pricing__item__container .pricing__item__tools .pricing__item__tool.disabled .icon {
  color: #ccc;
}
.pricing__item .pricing__item__container .pricing__item__addon {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}

.pricing {
  margin-top: 4rem;
  padding: 0 var(--padding);
}
.pricing .pricing__title {
  margin-bottom: 2rem;
  font-weight: 600;
  font-size: var(--font-title);
  color: var(--text-1-color);
  text-align: center;
}
.pricing .pricing__types {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}
.pricing .pricing__types .pricing__type {
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  width: max-content;
  border: 1px solid #272727;
  color: var(--text-1-color);
  font-size: var(--font-normal);
  cursor: pointer;
  margin-right: 2rem;
  opacity: 0.6;
  transition: all 0.3s;
  white-space: nowrap;
}
.pricing .pricing__types .pricing__type:last-child {
  margin-right: 0;
}
.pricing .pricing__types .pricing__type.active {
  color: #fff;
  background: #272727;
  opacity: 1;
}
.pricing .pricing__types .pricing__type:hover {
  opacity: 0.8;
}
.pricing .pricing__offer {
  display: inline-block;
  width: 100%;
  font-weight: 600;
  color: var(--text-1-color);
  font-size: var(--font-small);
  text-align: center;
}
.pricing .pricing__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 50rem;
  margin: 2rem auto;
  max-width: 80rem;
}
@media screen and (min-width: 768px) {
  .pricing .pricing__container {
    flex-direction: row;
  }
}

.quote {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
  background: #2d4f83;
}
.quote .quote__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50rem;
  width: 100%;
  margin: 0 var(--padding);
  padding: 3rem 0;
}
.quote .quote__container .icon {
  position: absolute;
  width: 3rem;
  height: 3rem;
  color: #D79F38;
}
.quote .quote__container .icon.left {
  top: 0;
  left: 0;
  transform: translateY(-50%);
}
.quote .quote__container .icon.right {
  bottom: 0;
  right: 0;
  transform: translateY(50%);
}
.quote .quote__container .quote__photo {
  border-radius: 0.2rem;
  height: 10rem;
  width: 100%;
  max-width: 30rem;
}
@media screen and (min-width: 768px) {
  .quote .quote__container .quote__photo {
    height: 15rem;
  }
}
.quote .quote__container .quote__photo img {
  border-radius: 0.2rem;
}
.quote .quote__container .quote__info {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.quote .quote__container .quote__info .quote__text {
  margin: 1rem 0;
  font-size: var(--font-subtitle2);
  color: #fff;
  line-height: 1.5rem;
}
.quote .quote__container .quote__info .quote__fullname, .quote .quote__container .quote__info .quote__role {
  margin-left: auto;
  white-space: nowrap;
}
.quote .quote__container .quote__info .quote__fullname {
  margin-bottom: 0.2rem;
  color: #fff;
}
.quote .quote__container .quote__info .quote__role {
  color: #ddd;
}

.support {
  padding: 0 var(--padding);
  max-width: 80rem;
  margin: 5rem auto 0;
}
.support .support__title {
  max-width: 55rem;
  margin: 0 auto 2rem;
  font-size: var(--font-subtitle2);
  color: var(--text-1-color);
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .support .support__title {
    padding-left: 1rem;
  }
}
.support .support__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  max-width: 55rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .support .support__container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.support .support__container .support__item {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .support .support__container .support__item {
    margin: 0 1rem;
  }
}
.support .support__container .support__item .support__item__title {
  font-weight: 600;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.support .support__container .support__item .support__item__text {
  margin: 1rem 0 2rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
  line-height: 1.5rem;
}
.support .support__container .support__item .support__item__link {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  padding: 0.75rem 0.5rem;
  margin-top: auto;
  color: #fff;
  font-size: var(--font-small);
  background: #2d4f83;
}
.support .support__container .support__item .support__item__link .icon {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.5rem;
  color: #fff;
}

.main .main__title {
  font-size: 1.6rem;
  color: var(--text-1-color);
  font-weight: bold;
}
@media screen and (min-width: 1024px) {
  .main .main__title {
    font-size: 2.2rem;
  }
}

.footer__mission {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .footer__mission {
    max-width: 20rem;
    margin-right: 2rem;
  }
}
.footer__mission .footer__mission__title {
  font-size: var(--font-normal);
  color: #fff;
  font-weight: 600;
}
.footer__mission .footer__mission__text {
  margin-top: 1rem;
  font-size: var(--font-small);
  color: #fff;
  line-height: 1.5rem;
}

.footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .footer__nav {
    margin-top: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.footer__nav .footer__nav__container {
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .footer__nav .footer__nav__container {
    margin: 0 1rem;
  }
}
.footer__nav .footer__nav__container .footer__nav__title {
  font-size: var(--font-small);
  color: #fff;
  font-weight: 600;
}
.footer__nav .footer__nav__container .footer__nav__list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.footer__nav .footer__nav__container .footer__nav__list .footer__nav__item {
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: #fff;
}
.footer__nav .footer__nav__container .footer__nav__list .footer__nav__item a {
  color: #fff;
  font-size: var(--font-small);
}

.footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer__social .footer__social__item {
  margin-right: 2rem;
}
.footer__social .footer__social__item:last-child {
  margin-right: 0;
}
.footer__social .footer__social__item .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

.footer__container {
  margin: 2rem auto 0;
}
.footer__container .footer__row {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .footer__container .footer__row {
    justify-content: space-between;
    flex-direction: row;
  }
}
.footer__container .footer__row .footer__copy {
  margin-top: 1rem;
  margin-bottom: 1rem;
  white-space: nowrap;
}

.footer__copy {
  display: flex;
  justify-content: center;
}
.footer__copy .footer__copy__text {
  color: var(--text-1-color);
  font-size: var(--font-little);
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .footer__copy .footer__copy__text {
    font-size: var(--font-small);
    text-align: initial;
  }
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem var(--padding);
  background: #fff;
}
.footer.home {
  margin-top: 5rem;
  background: #2d4f83;
  padding: 0.5rem var(--padding);
}
.footer.home .footer__copy .footer__copy__text {
  color: #fff;
}

.form__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 1rem;
}
.form__item .form__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.form__item .form__item__container {
  width: 100%;
}
.form__item .form__input__container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.form__item .form__input__container.inputPhone {
  flex-direction: column;
  justify-content: center;
  align-items: initial;
}
.form__item .form__input__container.inputPhone .form__error {
  width: 100%;
}
.form__item .form__input__container .form__input__pass-show {
  position: absolute;
  z-index: 100;
  right: 0.5rem;
  color: var(--text-1-color);
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}
.form__item .form__forgot-password {
  font-weight: 500;
  font-size: var(--font-small);
  color: var(--link-color);
}

.form__item__group {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  width: 100%;
}
.form__item__group.group-3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}
.form__item__group .form__item__code {
  position: relative;
}
.form__item__group .form__item__code.active .item__code__list {
  transform: scale(1);
}
.form__item__group .form__item__code .item__code__label {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.form__item__group .form__item__code .item__code__label .item__code__icon {
  position: absolute;
  display: inline-block;
  height: 0.8rem;
  width: 0.8rem;
  right: 0.5rem;
}
.form__item__group .form__item__code .item__code__list {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 100%;
  margin-top: 0.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
}
.form__item__group .form__item__code .item__code__list .item__code__item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.form__item__group .form__item__code .item__code__list .item__code__item:hover {
  background: #ddd;
}

.form__input {
  display: inline-block;
  height: 2.2rem;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid var(--border-color);
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.form__input:focus {
  box-shadow: 0 0 3px 1px #D79F38;
  border: none;
}
.form__input.textarea {
  height: 7rem;
}

.select__input__container {
  position: relative;
}
.select__input__container.active .select__options {
  transform: scale(1);
}
.select__input__container .icon {
  position: absolute;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  color: var(--text-2-color);
  cursor: pointer;
}
.select__input__container .icon-select {
  width: 0.7rem;
  height: 0.7rem;
}
.select__input__container .select__input {
  padding-right: 2rem;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select__input__container .select__options {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 100%;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
}
.select__input__container .select__options .select__option {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  color: var(--text-1-color);
  font-size: 0.95rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.2rem;
}
.select__input__container .select__options .select__option:hover {
  background: #eee;
}

.form__error {
  display: flex;
  margin-top: 0.3rem;
  font-size: var(--font-small);
  color: var(--error-color);
}

.form__info {
  margin-top: 0.2rem;
  color: var(--text-1-color);
  font-size: var(--font-little);
}

.form__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.form__image .form__image__label {
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.form__image .form__image__container {
  position: relative;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.form__image .form__image__container img {
  border-radius: 50%;
}
.form__image .form__image__container .form__image__input {
  display: flex;
  justify-content: center;
  width: 100%;
  background: red;
}
.form__image .form__image__container .form__image__input input[type=file] {
  display: none;
}
.form__image .form__image__container .form__image__input label {
  position: absolute;
  top: 0;
  right: -0.75rem;
}
.form__image .form__image__container .form__image__input label .icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  color: #D79F38;
  cursor: pointer;
}
.form__image .form__image__btns {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.form__image .form__image__btns .form__image__btn {
  padding: 0.2rem 0.5rem;
  margin: 0 1rem;
  color: #D79F38;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.2rem;
}
.form__image .form__image__btns .form__image__btn:hover {
  background: #ddd;
}
.form__image .form__image__error {
  font-size: var(--font-small);
  color: red;
}

.form__item__aggregate {
  position: relative;
}
.form__item__aggregate.active .item__aggregate__options {
  transform: scale(1);
}
.form__item__aggregate .item__aggregate__container {
  display: grid !important;
  grid-template-columns: 1fr 2.5rem 2.5rem;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.form__item__aggregate .item__aggregate__container .form__input {
  margin-top: 0; /* eliminar margen */
}
.form__item__aggregate .item__aggregate__container .loader__container {
  margin-top: 0;
}
.form__item__aggregate .item__aggregate__container .item__aggregate__btn {
  width: auto;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.1rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
}
.form__item__aggregate .item__aggregate__container .item__aggregate__btn.arrow:hover {
  background: #eee;
}
.form__item__aggregate .item__aggregate__container .item__aggregate__btn.arrow .icon {
  width: 0.8rem;
  height: 0.8rem;
}
.form__item__aggregate .item__aggregate__container .item__aggregate__btn.add {
  background: #D79F38;
  font-size: 1.5rem;
  color: #fff;
  border-color: #D79F38;
}
.form__item__aggregate .item__aggregate__options {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 100%;
  min-width: 5rem;
  max-height: 10rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
  overflow: auto;
}
.form__item__aggregate .item__aggregate__options .item__aggregate__option {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  color: var(--text-1-color);
  font-size: 0.95rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.2rem;
}
.form__item__aggregate .item__aggregate__options .item__aggregate__option:hover {
  background: #eee;
}

.item__search__aggregate {
  position: relative;
}
.item__search__aggregate.active .search__aggregate__options {
  transform: scale(1);
}
.item__search__aggregate .search__aggregate__container {
  display: grid !important;
  grid-template-columns: 1fr 2.2rem;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.item__search__aggregate .search__aggregate__container .search__aggregate__input {
  display: flex;
  align-items: center;
  position: relative;
}
.item__search__aggregate .search__aggregate__container .search__aggregate__input .form__input {
  margin-top: 0; /* eliminar margen */
  padding-right: 2rem;
}
.item__search__aggregate .search__aggregate__container .search__aggregate__input .icon {
  position: absolute;
  right: 0.5rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-1-color);
}
.item__search__aggregate .search__aggregate__container .search__aggregate__btn {
  width: auto;
  height: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.1rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
}
.item__search__aggregate .search__aggregate__container .search__aggregate__btn.add {
  background: #D79F38;
  font-size: 1.5rem;
  color: #fff;
  border-color: #D79F38;
}
.item__search__aggregate .search__aggregate__options {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 100%;
  width: 100%;
  max-height: 10rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
  overflow: auto;
}
.item__search__aggregate .search__aggregate__options .search__aggregate__option {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  color: var(--text-1-color);
  font-size: 0.95rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.2rem;
}
.item__search__aggregate .search__aggregate__options .search__aggregate__option:hover {
  background: #eee;
}

.form__item__searchBar {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 25rem;
  width: 100%;
  height: 2.2rem;
  border-radius: 2rem;
}
.form__item__searchBar .item__searchBar__input {
  height: 100%;
  width: 100%;
  padding: 0 2.5rem 0 1rem;
  border-radius: 2rem;
  border: 1px solid #ccc;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.form__item__searchBar .item__searchBar__input:focus {
  box-shadow: 0 0 3px 1px #D79F38;
  border: none;
}
.form__item__searchBar .icon {
  position: absolute;
  right: 1rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-2-color);
}

.form {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  max-width: 20rem;
}
.form .form__title {
  margin: 1rem 0;
  text-align: center;
  font-size: 1.2rem;
}
.form .form__page {
  /* Espacio entre las paginas */
  /* columna del grid */
  display: grid;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  grid-gap: 20%;
  margin-bottom: 1rem;
  overflow-x: hidden;
}
.form .form__page .form__container {
  margin: 0.5rem;
}
.form .form__page.page-1 .form__container {
  margin-left: 0;
}
.form .form__page.page-2 .form__container {
  margin-left: -120%;
}
.form .form__container {
  transition: margin 0.3s;
  width: 100%;
  border: 1px solid var(--border-color);
  padding: 1rem;
}
.form .form__container.link {
  margin-top: 1rem;
}
.form .form__container .form__buttons {
  display: grid;
  grid-template-columns: max-content max-content;
  width: 100%;
  grid-gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.form .form__container .form__buttons .arrow-back {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border-radius: 50%;
  color: var(--text-1-color);
  cursor: pointer;
}
.form .form__container .form__buttons .arrow-back:hover {
  background: #ddd;
}
.form .form__container .form__buttons .loader__container {
  grid-column: 1/span 2;
  margin-left: auto;
}
.form .form__container .form__buttons .form__btn-1 {
  justify-self: flex-end;
}
.form .form__container .form__link {
  font-size: var(--font-small);
  color: var(--text-2-color);
  text-align: center;
}
.form .form__container .form__link a {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--link-color);
  font-size: var(--font-small);
}

.signin__staff__device {
  width: 100%;
  max-width: 20rem;
}

.staff__user__setting {
  width: 100%;
  margin: 0.5rem;
}
.staff__user__setting .user__setting__item {
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.staff__user__setting .user__setting__item.logoutDevice {
  margin-top: 2rem;
}
.staff__user__setting .user__setting__item .user__setting__header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}
.staff__user__setting .user__setting__item .user__setting__header .setting__header__title {
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.staff__user__setting .user__setting__item .user__setting__info {
  padding: 0.5rem;
}
.staff__user__setting .user__setting__item .user__setting__info.data {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.staff__user__setting .user__setting__item .user__setting__info.sync {
  display: flex;
  flex-direction: column;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__row {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__row.first {
  border-right: 1px solid #ddd;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__row .user__setting__label {
  margin-bottom: 0.5rem;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__row .user__setting__value {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__text {
  margin-bottom: 1rem;
  font-size: var(--font-normal);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__action {
  display: flex;
  justify-content: center;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__action .btn-1 {
  width: max-content;
  margin: 0 auto;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__action .btn-1.logoutBtn {
  font-size: var(--font-normal);
  background: #E05555;
  cursor: pointer;
}
.staff__user__setting .user__setting__item .user__setting__info .user__setting__action .user__setting__syncSuccess {
  font-weight: 600;
  font-size: var(--font-small);
  color: green;
}

.signin__staff__user {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 30rem;
}
.signin__staff__user .form .form__page .form__container .form__item .form__item__container .form__input__container .form__input {
  border: none;
  text-align: center;
  font-size: var(--font-subtitle);
}
.signin__staff__user .form .form__page .form__container .form__item .form__item__container .form__error {
  justify-content: center;
}
.signin__staff__user .form .form__page .form__container .form__buttons {
  grid-template-columns: max-content;
  justify-content: center;
}
.signin__staff__user .form .form__page .form__container .form__buttons .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}
.signin__staff__user .staff__user__profile {
  display: grid;
  align-items: center;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  margin-top: 1rem;
}
.signin__staff__user .staff__user__profile .user__profile__icon {
  display: flex;
}
.signin__staff__user .staff__user__profile .user__profile__icon .icon {
  display: flex;
  align-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 0.3rem;
  color: #000;
  cursor: pointer;
  background: #eee;
}
.signin__staff__user .staff__user__profile .user__profile__icon .icon:hover {
  border-color: #ccc;
  background: rgba(0, 0, 0, 0.15);
}
.signin__staff__user .staff__user__profile .user__profile__icon:first-child {
  justify-content: start;
}
.signin__staff__user .staff__user__profile .user__profile__icon:last-child {
  justify-content: end;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper {
  overflow-x: hidden;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list {
  display: grid;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-template-rows: auto;
  grid-auto-flow: column;
  overflow: hidden;
  background: #fff;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4rem;
  margin: 0 0.5rem;
  cursor: pointer;
  overflow: hidden;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item:first-child {
  margin-left: none;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item:last-child {
  margin-right: none;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item .user__profile__figure {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item .user__profile__figure img {
  border-radius: 50%;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item .user__profile__username {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.signin__staff__user .staff__user__profile .user__profile__wrapper .user__profile__list .user__profile__item.active {
  border-color: #D79F38;
  color: #D79F38;
}
.signin__staff__user .staff__user__label {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.signin__staff__user .staff__user__showSetting {
  margin: 3rem 0 2rem;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
  cursor: pointer;
}
.signin__staff__user .staff__user__showSetting.active {
  font-weight: initial;
  opacity: 0.6;
}

.signin__staff__keyboard {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.signin__staff__keyboard .staff__keyboard__row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.signin__staff__keyboard .staff__keyboard__row .staff__keyboard__key {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25rem 1rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: var(--font-normal);
  user-select: none;
  color: var(--text-1-color);
}
.signin__staff__keyboard .staff__keyboard__row .staff__keyboard__key .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--text-2-color);
}
.signin__staff__keyboard .staff__keyboard__row .staff__keyboard__key:hover {
  background: #ddd;
}

.signin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1rem;
}
.signin .signin__logo {
  display: flex;
  align-items: center;
  width: 8rem;
}
.signin .signin__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.signin .signin__header .signin__title {
  margin: 1.5rem 0;
  color: var(--text-1-color);
  text-align: center;
  font-weight: 400;
  font-size: 1.3rem;
}
.signin .signin__mode {
  max-width: 20rem;
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.5rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.signin .signin__mode .signin__mode__option {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
  cursor: pointer;
}
.signin .signin__mode .signin__mode__option input[type=radio] {
  margin-right: 0.5rem;
}
.signin .form {
  width: 100%;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
}
.menu:hover {
  background: #eee;
}
.menu .menu__icon {
  width: 1.2rem;
  height: 1rem;
  background-image: linear-gradient(var(--text-2-color) 10%, transparent 5%, transparent 45%, var(--text-2-color) 45%, var(--text-2-color) 55%, transparent 55%, transparent 90%, var(--text-2-color) 90%);
}

.button__icon {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.6rem;
}
.button__icon:disabled {
  opacity: 0.7;
}
.button__icon .icon {
  margin-right: 0.5rem;
}

.account__profile__avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #ccc;
  height: max-content;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .account__profile__avatar {
    border-bottom: none;
    padding-bottom: none;
    padding-right: 2rem;
    border-right: 1px solid #ccc;
    padding-left: var(--padding);
    height: 100%;
  }
}
.account__profile__avatar .profile__avatar__name {
  margin-top: 1rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.account__profile__avatar .profile__avatar__business {
  margin: 0.5rem 0 1rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.account__profile__avatar .profile__avatar__link {
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  color: var(--text-1-color);
  background: #D79F38;
  color: #fff;
}

.account__profile__detailUser {
  margin: 0.5rem 0.5rem 2rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.account__profile__detailUser .profile__detailUser__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}
.account__profile__detailUser .profile__detailUser__header .detailUser__header__title {
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.account__profile__detailUser .profile__detailUser__header .icon {
  width: 1.3rem;
  height: 1.3rem;
  cursor: pointer;
  color: var(--text-2-color);
}
.account__profile__detailUser .profile__detailUser__container {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  .account__profile__detailUser .profile__detailUser__container {
    grid-template-columns: 1fr 1fr;
  }
}
.account__profile__detailUser .profile__detailUser__container .profile__detailUser__item {
  display: flex;
  flex-direction: column;
  margin: 1rem;
}
.account__profile__detailUser .profile__detailUser__container .profile__detailUser__item .detailUser__item__label {
  margin-bottom: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.account__profile__detailUser .profile__detailUser__container .profile__detailUser__item .detailUser__item__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.account__profile__detailUser .profile__detailUser__container .profile__detailUser__item .detailUser__item__value .password-circle {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--text-1-color);
}

.account__profile__formUser {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.account__profile__formUser .profile__formUser__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.account__profile__formUser .profile__formUser__container .profile__formUser__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.account__profile__formUser .profile__formUser__container .profile__formUser__header .profile__formUser__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.account__profile__formUser .profile__formUser__container .profile__formUser__header .profile__formUser__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.account__profile__formUser .profile__formUser__container .profile__formUser__header .profile__formUser__exit:hover {
  background: #ddd;
}
.account__profile__formUser .profile__formUser__container .profile__formUser__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.account__profile__formUser .profile__formUser__container .profile__formUser__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.account__profile__formUser .profile__formUser__container .profile__formUser__footer .formUser__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar {
    grid-column: 1/span 2;
  }
}
.account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar .detailBusiness__avatar__image {
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin-right: 1rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar .detailBusiness__avatar__image img {
  border-radius: 50%;
}
.account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar .detailBusiness__avatar__info {
  display: flex;
  flex-direction: column;
}
.account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar .detailBusiness__avatar__info .detailBusiness__avatar__name {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.account__profile__detailBusiness .profile__detailBusiness__container .profile__detailBusiness__avatar .detailBusiness__avatar__info .detailBusiness__avatar__alias {
  font-size: var(--font-small);
  color: var(--text-2-color);
}

.account__profile__formBusiness .profile__formUser__container .profile__formUser__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.account__profile__formBusiness .profile__formUser__container .profile__formUser__info .form__image {
  margin-bottom: 2rem;
}
.account__profile__formBusiness .profile__formUser__container .profile__formUser__info .form__image .form__image__container {
  width: 5rem;
  height: 5rem;
}
.account__profile__formBusiness .profile__formUser__container .profile__formUser__info .form__image .form__image__container .form__image__input label {
  right: -0.5rem;
}
.account__profile__formBusiness .profile__formUser__container .profile__formUser__info .form__image .form__image__container .form__image__input label .icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: #D79F38;
  cursor: pointer;
}

.account__profile__detailPermission .profile__detailPermission__container .profile__detailPermission__list {
  overflow: hidden;
}
.account__profile__detailPermission .profile__detailPermission__container .profile__detailPermission__list .profile__detailPermission__item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  width: max-content;
  font-size: var(--font-small);
  color: var(--text-2-color);
  cursor: pointer;
}
.account__profile__detailPermission .profile__detailPermission__container .profile__detailPermission__list .profile__detailPermission__item:hover {
  background: #eee;
}
.account__profile__detailPermission .profile__detailPermission__container .profile__detailPermission__list .profile__detailPermission__item .circle {
  flex: none;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.profile__detailPrinter__item {
  margin: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.profile__detailPrinter__item .profile__detailPrinter__action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile__detailPrinter__item .profile__detailPrinter__action .profile__detailPrinter__label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.profile__detailPrinter__item .profile__detailPrinter__action .profile__detailPrinter__icons {
  display: flex;
  align-items: center;
}
.profile__detailPrinter__item .profile__detailPrinter__action .profile__detailPrinter__icons .icon {
  margin-left: 1.5rem;
  cursor: pointer;
}
.profile__detailPrinter__item .profile__detailPrinter__row {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
.profile__detailPrinter__item .profile__detailPrinter__row .profile__detailPrinter__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.profile__detailPrinter__item .profile__detailPrinter__row .circle {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin: 0 0.5rem;
  background: var(--text-2-color);
}
.profile__detailPrinter__item .profile__detailPrinter__row .profile__detailPrinter__size {
  font-size: var(--font-small);
  color: var(--text-2-color);
}

.account__profile__detailPrinter {
  margin: 0.5rem 0.5rem 2rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.account__profile__detailPrinter .profile__detailPrinter__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}
.account__profile__detailPrinter .profile__detailPrinter__header .detailPrinter__header__title {
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.account__profile__detailPrinter .profile__detailPrinter__header .icon {
  width: 1.3rem;
  height: 1.3rem;
  cursor: pointer;
  color: var(--text-2-color);
}
.account__profile__detailPrinter .profile__detailPrinter__header .btn-1.red {
  background: #E05555;
}
.account__profile__detailPrinter .profile__detailPrinter__container {
  padding: 1rem;
}

.account__profile__formPrinter {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.account__profile__formPrinter .profile__formPrinter__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: max-content;
  max-height: 90vh;
  min-height: 50vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__header .profile__formPrinter__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__header .profile__formPrinter__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__header .profile__formPrinter__exit:hover {
  background: #ddd;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__info .profile__formPrinter__row {
  display: flex;
  align-items: center;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__info .profile__formPrinter__row .form__item:nth-child(2) {
  margin-left: 1rem;
  margin-right: 1rem;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__footer .formPrinter__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.account__profile__formPrinter .profile__formPrinter__container .profile__formPrinter__footer .formPrinter__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.account__profile__detail {
  max-width: 40rem;
}

.account__profile {
  margin-top: var(--header-height);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: 2rem var(--padding);
}
@media screen and (min-width: 768px) {
  .account__profile {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    gap: 2rem;
  }
}

.account__businessNew__step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 30rem;
  margin: 0 auto;
}
.account__businessNew__step .businessNew__step__label {
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.account__businessNew__step .businessNew__step__exit {
  width: 2rem;
  height: 2rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.account__businessNew__step .businessNew__step__exit:hover {
  background: #ddd;
}

.account__businessNew {
  margin-top: var(--header-height);
  padding: 2rem var(--padding);
}
.account__businessNew .account__businessNew__form {
  max-width: 30rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  margin: 2rem auto 0;
  border-radius: 0.2rem;
}
.account__businessNew .account__businessNew__form .account__businessNew__title {
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  font-weight: 500;
}
.account__businessNew .account__businessNew__form .account__businessNew__container {
  margin-top: 2rem;
}
.account__businessNew .account__businessNew__form .account__businessNew__container .account__businessNew__list {
  display: flex;
  flex-direction: column;
}
.account__businessNew .account__businessNew__form .account__businessNew__container .account__businessNew__list .account__businessNew__item {
  display: flex;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  font-size: var(--font-normal);
  color: var(--text-1-color);
  cursor: pointer;
}
.account__businessNew .account__businessNew__form .account__businessNew__container .account__businessNew__list .account__businessNew__item.active {
  background: #D79F38;
}
.account__businessNew .account__businessNew__form .account__businessNew__container .account__businessNew__list .account__businessNew__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 1rem;
  color: #2d4f83;
}
.account__businessNew .account__businessNew__form .account__businessNew__container .account__businessNew__box {
  margin-top: 2rem;
}
.account__businessNew .account__businessNew__form .account__businessNew__action {
  display: flex;
  justify-content: end;
  margin-top: 2rem;
}
.account__businessNew .account__businessNew__form .account__businessNew__action .btn-1 {
  padding: 0.7rem 1rem;
}
.account__businessNew .account__businessNew__form .account__businessNew__action .btn-1:disabled {
  opacity: 0.6;
}

.header__mode__icon {
  position: relative;
}
.header__mode__icon.active .header__mode__list {
  transform: scale(1);
}
.header__mode__icon .header__mode__type {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  background: #fff;
  cursor: pointer;
  color: var(--text-1-color);
  font-size: 0.95rem;
}
.header__mode__icon .header__mode__type::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.25rem solid var(--text-1-color);
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  margin-left: 0.5rem;
}
.header__mode__icon .header__mode__type:hover {
  background: #eee;
}
.header__mode__icon .header__mode__list {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 100%;
  min-width: 10rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
}
.header__mode__icon .header__mode__list .header__mode__item {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  color: var(--text-1-color);
  font-size: 0.95rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.2rem;
}
.header__mode__icon .header__mode__list .header__mode__item:hover {
  background: #eee;
}

.header__search__icon .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0.3rem;
  color: var(--text-1-color);
  cursor: pointer;
  border-radius: 50%;
}
.header__search__icon .icon:hover {
  background: #eee;
}

.header__search-bar {
  grid-column: 1/6;
}
.header__search-bar .header__search-bar__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header__search-bar .header__search-bar__row .header__search-bar__form {
  position: relative;
  display: flex;
  justify-self: center;
  margin: 0 auto;
  border: 1px solid #ccc;
  width: 100%;
  height: 2.2rem;
  border-radius: 2rem;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__type {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  margin: 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-1-color);
  display: none;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options {
  display: flex;
  align-items: center;
  margin-left: 0.2rem;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options.active .search-bar__options__list {
  transform: scale(1);
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 0.5rem;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__icon::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.25rem solid var(--text-1-color);
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__icon:hover {
  background: #eee;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__list {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 100%;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 10rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  transform: scale(0);
  background: #fff;
  transition: transform 0.2s;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__list .search-bar__options__item {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__list .search-bar__options__item .search-bar__options__key {
  color: var(--text-1-color);
  font-size: 0.95rem;
  cursor: pointer;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__list .search-bar__options__item .search-bar__options__key:hover {
  background: #eee;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__list .search-bar__options__item .search-bar__options__value {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__options .search-bar__options__list .search-bar__options__item .search-bar__options__value .icon {
  padding: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1rem;
  border-radius: 50%;
  cursor: pointer;
  background: #ccc;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 2.5rem;
  overflow: hidden;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input input[type=text] {
  height: 100%;
  width: 100%;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-1-color);
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input input[type=date] {
  margin-right: 2rem;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input select {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--text-1-color);
  outline: none;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input .header__search-bar__btn {
  position: absolute;
  right: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem;
  border: none;
  border-radius: 0.2rem;
  cursor: pointer;
  background: transparent;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input .header__search-bar__btn:hover {
  background: #eee;
}
.header__search-bar .header__search-bar__row .header__search-bar__form .header__search-bar__input .header__search-bar__btn .btn-search {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text-1-color);
}
.header__search-bar .header__search-bar__row .exit-icon {
  padding: 0.2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--text-1-color);
  cursor: pointer;
}
.header__search-bar .header__search-bar__row .exit-icon:hover {
  background: #eee;
}

.header__date {
  display: flex;
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;
}
.header__date .header__date__btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__date .header__date__btns .header__date__prev, .header__date .header__date__btns .header__date__next {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--text-1-color);
}
.header__date .header__date__btns .header__date__prev:hover, .header__date .header__date__btns .header__date__next:hover {
  background: #eee;
}
.header__date .header__date__btns .header__date__prev {
  margin-right: 0.5rem;
}
.header__date .header__date__text {
  white-space: nowrap;
  font-size: 1.05rem;
  color: var(--text-1-color);
  margin-left: 0.5rem;
  font-size: var(--font-small2);
}

.header__modules__icon {
  position: relative;
}
.header__modules__icon.active .header__modules__list {
  transform: scale(1);
}
.header__modules__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.header__modules__icon .header__modules__list {
  min-width: 14rem;
  padding-top: 0;
}

.restaurant__header__label {
  display: flex;
  align-items: end;
}
.restaurant__header__label .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__header__label span {
  font-size: var(--font-normal);
  color: var(--text-1-color);
}

.restaurant__header {
  position: sticky;
  z-index: 1000;
  top: 0;
  border-bottom: 1px solid #ccc;
  background: #fff;
}
.restaurant__header .restaurant__header__container {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  align-items: center;
  height: var(--header-height-rest);
  padding: 0 var(--padding);
}
.restaurant__header .restaurant__header__container.auto {
  height: auto;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
.restaurant__header .restaurant__header__menu-name {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.restaurant__header .menu {
  margin-right: 0;
  flex: none;
}
.restaurant__header .header__logo .header__logo__title {
  font-size: var(--font-subtitle);
  font-weight: 600;
}
@media screen and (min-width: 1024px) {
  .restaurant__header .header__logo .header__logo__title {
    font-size: var(--font-subtitle2);
  }
}
.restaurant__header .restaurant__header__today-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  background: #fff;
  cursor: pointer;
  color: var(--text-1-color);
  font-size: 0.95rem;
}
.restaurant__header .restaurant__header__today-btn:hover {
  background: #eee;
}

.restaurant__footer__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0;
}
.restaurant__footer__copy .footer__copy__name, .restaurant__footer__copy .footer__copy__brand {
  color: var(--text-1-color);
  font-size: 0.9rem;
}
.restaurant__footer__copy .footer__copy__line {
  color: var(--text-1-color);
  margin: 0 1rem;
}
.restaurant__footer__copy .footer__copy__name {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.restaurant__footer {
  margin-top: 0.5rem;
  background: #ddd;
}

.restaurant__warning {
  margin: 0.5rem var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 2px 1px #d79f38;
  background: #fff;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .restaurant__warning {
    flex-direction: row;
  }
}
.restaurant__warning .restaurant__warning__text {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__warning .restaurant__warning__text .restaurant__warning__icon {
  height: 1.2rem;
  width: 1.2rem;
  margin-right: 0.5rem;
  color: var(--text-1-color);
  cursor: pointer;
  flex: none;
}
.restaurant__warning .restaurant__warning__buttons {
  display: flex;
  align-items: center;
}
.restaurant__warning .restaurant__warning__buttons .restaurant__warning__btn {
  margin-right: 1rem;
  background: yellow;
}
.restaurant__warning .restaurant__warning__buttons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.restaurant__warning .restaurant__warning__buttons .icon:hover {
  background: #ddd;
}

.restaurant__disabled {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.restaurant__disabled .restaurant__disabled__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.restaurant__disabled .restaurant__disabled__container .restaurant__disabled__figure {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .restaurant__disabled .restaurant__disabled__container .restaurant__disabled__figure {
    width: 7rem;
    height: 7rem;
  }
}
.restaurant__disabled .restaurant__disabled__container .restaurant__disabled__figure img {
  border-radius: 50%;
}
.restaurant__disabled .restaurant__disabled__container .restaurant__disabled__title {
  font-size: var(--font-grand);
  color: var(--text-1-color);
  text-align: center;
}
.restaurant__disabled .restaurant__disabled__container .restaurant__disabled__label {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  background: #E05555;
  color: #fff;
}
.restaurant__disabled .restaurant__disabled__container .restaurant__disabled__text {
  display: inline-block;
  width: 100%;
  margin-top: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: center;
}
.restaurant__disabled .restaurant__disabled__container .restaurant__disabled__phone {
  margin-top: 1rem;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  background: #eee;
}
.restaurant__disabled .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.restaurant__sidebar__nav {
  background: #fff;
  height: 100%;
  width: 70%;
  padding-left: var(--padding);
  padding-top: 1rem;
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__sidebar__nav {
    height: initial;
    width: initial;
  }
}
.restaurant__sidebar__nav .sidebar__nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
}
.restaurant__sidebar__nav .sidebar__nav__header .nav__header__logo {
  width: 8rem;
  min-height: 3.5rem;
  cursor: pointer;
}
.restaurant__sidebar__nav .sidebar__nav__header .nav__header__close {
  width: 2rem;
  height: 2rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .restaurant__sidebar__nav .sidebar__nav__header .nav__header__close {
    display: none;
  }
}
.restaurant__sidebar__nav .sidebar__nav__header .nav__header__close:hover {
  background: #ddd;
}
.restaurant__sidebar__nav .nav__item__list {
  padding-bottom: 1rem;
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link {
  display: flex;
  align-items: end;
  padding: 0.25rem 0.5rem;
  margin-bottom: 1rem;
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link.active {
  background: rgb(223.5355648536, 179.4853556485, 98.4644351464);
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link.active:hover {
  background: rgb(223.5355648536, 179.4853556485, 98.4644351464);
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link.active .icon, .restaurant__sidebar__nav .nav__item__list .nav__item__link.active span {
  color: #fff;
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link:hover {
  background: rgb(240.6066945607, 220.4560669456, 183.3933054393);
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-1-color);
}
.restaurant__sidebar__nav .nav__item__list .nav__item__link span {
  color: var(--text-1-color);
  font-size: var(--font-small);
}

.restaurant__sidebar__filter {
  border-top: 1px solid #ccc;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__title {
  white-space: nowrap;
  color: var(--text-1-color);
  font-size: 0.95rem;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__btns .filter__date__prev, .restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__btns .filter__date__next {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--text-1-color);
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__btns .filter__date__prev:hover, .restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__btns .filter__date__next:hover {
  background: #eee;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__header .filter__date__btns .filter__date__prev {
  margin-right: 1rem;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(7, 2rem);
  grid-template-rows: repeat(4, 2rem);
  grid-auto-rows: 2rem;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__subtitle, .restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span {
  text-align: center;
  color: var(--text-2-color);
  font-size: 0.75rem;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span.active {
  background: rgb(240.6066945607, 220.4560669456, 183.3933054393);
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span.active:hover {
  background: rgb(240.6066945607, 220.4560669456, 183.3933054393);
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span.today {
  background: rgb(223.5355648536, 179.4853556485, 98.4644351464);
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span.today:hover {
  background: rgb(223.5355648536, 179.4853556485, 98.4644351464);
}
.restaurant__sidebar__filter .sidebar__filter__date .filter__date__table .filter__date__span:hover {
  background: #ddd;
}
.restaurant__sidebar__filter .sidebar__filter__state {
  display: flex;
  align-items: center;
}
.restaurant__sidebar__filter .sidebar__filter__state .filter__state__icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--text-1-color);
  margin-right: 0.3rem;
}
.restaurant__sidebar__filter .sidebar__filter__state .filter__state__container .filter__state__label {
  color: var(--text-1-color);
  margin-right: 0.4rem;
}
.restaurant__sidebar__filter .sidebar__filter__state .filter__state__container .filter__state__select {
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  padding: 0.2rem 0.5rem;
  background: #fff;
  color: var(--text-1-color);
  cursor: pointer;
}

.restaurant__sidebar {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__sidebar {
    position: static;
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 0.3s;
    overflow: auto;
    background: #fff;
  }
}

.error__subscription {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.error__subscription .error__subscription__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.error__subscription .error__subscription__container .error__subscription__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.error__subscription .error__subscription__container .error__subscription__header .error__subscription__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.error__subscription .error__subscription__container .error__subscription__header .error__subscription__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.error__subscription .error__subscription__container .error__subscription__header .error__subscription__exit:hover {
  background: #ddd;
}
.error__subscription .error__subscription__container .error__subscription__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
}
.error__subscription .error__subscription__container .error__subscription__info .subscription__info__msg {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.error__subscription .error__subscription__container .error__subscription__info .subscription__info__contact {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error__subscription .error__subscription__container .error__subscription__info .subscription__info__contact .info__contact__text {
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: center;
  line-height: 1.2rem;
}
.error__subscription .error__subscription__container .error__subscription__info .subscription__info__contact .info__contact__number {
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: #fff;
  background: #4C6B7A;
}

.restaurant__arrowBtn {
  position: relative;
}
.restaurant__arrowBtn.active .restaurant__arrowBtn__options {
  transform: scale(1);
}
.restaurant__arrowBtn .restaurant__arrowBtn__container {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 0.2rem;
}
.restaurant__arrowBtn .restaurant__arrowBtn__container .restaurant__arrowBtn__label {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.4rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  border-right: 1px solid var(--border-color);
  cursor: pointer;
}
.restaurant__arrowBtn .restaurant__arrowBtn__container .restaurant__arrowBtn__label.disabled {
  opacity: 0.6;
}
.restaurant__arrowBtn .restaurant__arrowBtn__container .restaurant__arrowBtn__label .icon {
  margin-right: 0.5rem;
}
.restaurant__arrowBtn .restaurant__arrowBtn__container .restaurant__arrowBtn__label.newBtn {
  padding: 0.4rem 0.5rem;
  background: #D79F38;
  color: #fff;
}
.restaurant__arrowBtn .restaurant__arrowBtn__container .icon-arrow {
  flex: none;
  width: 1.5rem;
  height: 100%;
  padding: 0.2rem;
  cursor: pointer;
}
.restaurant__arrowBtn .restaurant__arrowBtn__options {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  max-width: 12rem;
  max-height: 15rem;
  margin-top: 0.5rem;
  transform: scale(0);
  background: #fff;
  transition: transform 0.3s;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  overflow: auto;
}
.restaurant__arrowBtn .restaurant__arrowBtn__options .restaurant__arrowBtn__option {
  flex: none;
  padding: 0.5rem 0.5rem;
  margin: 0.2rem;
  border-bottom: 1px solid #ddd;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.restaurant__arrowBtn .restaurant__arrowBtn__options .restaurant__arrowBtn__option:hover {
  background: #eee;
}

.restaurant__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__count .restaurant__count__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__count .restaurant__count__selection .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  padding: 0.2rem;
}
.restaurant__count .restaurant__count__page {
  display: flex;
  align-items: center;
  justify-content: end;
}
.restaurant__count .restaurant__count__page .restaurant__count__prev, .restaurant__count .restaurant__count__page .restaurant__count__next {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  font-size: var(--font-little);
  cursor: pointer;
}
.restaurant__count .restaurant__count__page .restaurant__count__prev.disabled, .restaurant__count .restaurant__count__page .restaurant__count__next.disabled {
  opacity: 0.5;
  cursor: initial;
}
.restaurant__count .restaurant__count__page .restaurant__count__prev:hover, .restaurant__count .restaurant__count__page .restaurant__count__next:hover {
  background: #eee;
}
.restaurant__count .restaurant__count__page .restaurant__count__prev .icon, .restaurant__count .restaurant__count__page .restaurant__count__next .icon {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--text-1-color);
}
.restaurant__count .restaurant__count__page .restaurant__count__prev .icon {
  margin-right: 0.5rem;
}
.restaurant__count .restaurant__count__page .restaurant__count__label {
  margin: 0 1rem;
  color: var(--text-2-color);
  font-size: var(--font-small);
}
.restaurant__count .restaurant__count__page .restaurant__count__next .icon {
  margin-left: 0.5rem;
}

.restaurant__account__business {
  display: flex;
  align-items: center;
}
.restaurant__account__business .account__business__image {
  flex: none;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin-right: 1rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  .restaurant__account__business .account__business__image {
    width: 7rem;
    height: 7rem;
    margin-right: 2rem;
  }
}
.restaurant__account__business .account__business__image img {
  border-radius: 50%;
}
.restaurant__account__business .account__business__info .business__info__name {
  margin-bottom: 0.2rem;
  font-size: var(--font-title);
  color: var(--text-1-color);
}
.restaurant__account__business .account__business__info .business__info__alias {
  font-size: var(--font-small);
  color: var(--text-2-color);
}

.account__chart__invoice .chart__invoice__balance {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.account__chart__invoice .chart__invoice__balance .invoice__balance__amount {
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.account__chart__invoice .chart__invoice__row {
  margin-top: 2rem;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__charge, .account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending,
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__received, .account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__discount {
  display: flex;
  flex-direction: column;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__charge .row__amount__balance, .account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending .row__amount__balance,
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__received .row__amount__balance, .account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__discount .row__amount__balance {
  font-size: var(--font-normal);
  font-weight: 600;
  --font-currency: var(--font-small);
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__charge .row__amount__label, .account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending .row__amount__label,
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__received .row__amount__label, .account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__discount .row__amount__label {
  font-size: var(--font-little);
  font-weight: 600;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__charge {
  align-items: start;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__charge .row__amount__balance {
  color: green;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__charge .row__amount__label {
  color: green;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending {
  align-items: end;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending.total {
  align-items: start;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending .row__amount__balance {
  color: #D79F38;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__pending .row__amount__label {
  color: #D79F38;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__received {
  align-items: start;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__received .row__amount__balance {
  color: #1E509B;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__received .row__amount__label {
  color: #1E509B;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__discount {
  align-items: end;
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__discount .row__amount__balance {
  color: var(--text-2-color);
}
.account__chart__invoice .chart__invoice__row .invoice__row__amount .row__amount__discount .row__amount__label {
  color: var(--text-2-color);
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar {
  position: relative;
  height: 1.2rem;
  border-radius: 0.2rem;
  margin-top: 0.1rem;
  overflow: hidden;
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__charge, .account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__pending,
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__received, .account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__discount {
  position: absolute;
  top: 0;
  height: 100%;
  right: 100%;
  width: 100%;
  border-radius: 0.2rem;
  transition: all 1s ease;
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__charge {
  right: 100%;
  background: green;
  margin-right: 0.05rem;
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__pending {
  left: 100%;
  background: #D79F38;
  margin-left: 0.05rem;
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__pending.total {
  left: initial;
  right: 100%;
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__received {
  right: 100%;
  background: #1E509B;
  margin-right: 0.05rem;
}
.account__chart__invoice .chart__invoice__row .invoice__row__bar .row__bar__discount {
  left: 100%;
  background: var(--text-2-color);
  margin-left: 0.05rem;
}

.account__chart__expense .chart__expense__balance {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.account__chart__expense .chart__expense__balance .expense__balance__amount {
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.account__chart__expense .chart__expense__container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
.account__chart__expense .chart__expense__container .chart__expense__graphic {
  width: 7rem;
  height: 7rem;
}
@media screen and (min-width: 360px) {
  .account__chart__expense .chart__expense__container .chart__expense__graphic {
    width: 10rem;
    height: 10rem;
  }
}
.account__chart__expense .chart__expense__container .chart__expense__labels {
  margin-left: 1rem;
}
.account__chart__expense .chart__expense__container .chart__expense__labels .chart__expense__label {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.account__chart__expense .chart__expense__container .chart__expense__labels .chart__expense__label .expense__label__balance {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  font-weight: 600;
}
.account__chart__expense .chart__expense__container .chart__expense__labels .chart__expense__label .expense__label__balance .color {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.5rem;
  border-radius: 0.2rem;
}
.account__chart__expense .chart__expense__container .chart__expense__labels .chart__expense__label .expense__label__name {
  margin-left: 1.5rem;
  font-size: var(--font-little);
  color: var(--text-2-color);
}

.account__chart__profit .chart__profit__balance {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.account__chart__profit .chart__profit__balance .profit__balance__amount {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.account__chart__profit .chart__profit__balance .profit__balance__label {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.account__chart__profit .chart__profit__row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  margin-top: 2rem;
}
.account__chart__profit .chart__profit__row.revenue {
  margin-bottom: 1rem;
}
.account__chart__profit .chart__profit__row.revenue .profit__row__amount {
  color: green;
}
.account__chart__profit .chart__profit__row.revenue .profit__row__bar .profit__row__status {
  background: green;
}
.account__chart__profit .chart__profit__row.revenue .profit__row__bar .profit__row__span {
  color: green;
}
.account__chart__profit .chart__profit__row.expense .profit__row__amount {
  color: #E05555;
}
.account__chart__profit .chart__profit__row.expense .profit__row__bar .profit__row__status {
  background: #E05555;
}
.account__chart__profit .chart__profit__row.expense .profit__row__bar .profit__row__span {
  color: #E05555;
}
.account__chart__profit .chart__profit__row .profit__row__amount {
  min-width: 7rem;
  margin-right: 0.5rem;
  font-size: var(--font-normal);
  font-weight: 600;
  --font-currency: var(--font-small);
}
@media screen and (min-width: 768px) {
  .account__chart__profit .chart__profit__row .profit__row__amount {
    margin-right: 1rem;
  }
}
.account__chart__profit .chart__profit__row .profit__row__bar {
  position: relative;
  border-radius: 0.2rem;
  height: 1.2rem;
}
.account__chart__profit .chart__profit__row .profit__row__bar .profit__row__barStatus {
  position: relative;
  border-radius: 0.2rem;
  height: 100%;
  background: #ddd;
  overflow: hidden;
}
.account__chart__profit .chart__profit__row .profit__row__bar .profit__row__barStatus .profit__row__status {
  position: absolute;
  top: 0;
  height: 100%;
  right: 100%;
  width: 100%;
  transition: all 1s ease;
}
.account__chart__profit .chart__profit__row .profit__row__bar .profit__row__span {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: inline-block;
  margin-bottom: 0.1rem;
  font-size: var(--font-little);
  font-weight: 600;
}

.chart__product__order {
  margin-top: 1rem;
}
.chart__product__order .product__order__header {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
}
.chart__product__order .product__order__header .order__header__description,
.chart__product__order .product__order__header .order__header__price,
.chart__product__order .product__order__header .order__header__quantity,
.chart__product__order .product__order__header .order__header__total,
.chart__product__order .product__order__header .order__header__debt {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.chart__product__order .product__order__header .order__header__description .order__header__circle,
.chart__product__order .product__order__header .order__header__price .order__header__circle,
.chart__product__order .product__order__header .order__header__quantity .order__header__circle,
.chart__product__order .product__order__header .order__header__total .order__header__circle,
.chart__product__order .product__order__header .order__header__debt .order__header__circle {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  background: #aaa;
  cursor: pointer;
}
.chart__product__order .product__order__header .order__header__description .order__header__icon,
.chart__product__order .product__order__header .order__header__price .order__header__icon,
.chart__product__order .product__order__header .order__header__quantity .order__header__icon,
.chart__product__order .product__order__header .order__header__total .order__header__icon,
.chart__product__order .product__order__header .order__header__debt .order__header__icon {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  color: green;
  cursor: pointer;
}
.chart__product__order .product__order__header .order__header__price {
  min-width: 3rem;
  justify-content: end;
  margin-left: 0.5rem;
}
.chart__product__order .product__order__header .order__header__quantity {
  min-width: 2rem;
  margin-left: 0.5rem;
  justify-content: center;
}
.chart__product__order .product__order__header .order__header__total {
  min-width: 5rem;
  justify-content: end;
  margin-left: 0.5rem;
}
.chart__product__order .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.chart__product__order .product__order__list {
  margin-top: 0.5rem;
}
.chart__product__order .product__order__list .product__order__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0.2rem;
  margin-bottom: 0.5rem;
}
.chart__product__order .product__order__list .product__order__item.selected {
  background: #ddd;
}
.chart__product__order .product__order__list .product__order__item .product__order__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.chart__product__order .product__order__list .product__order__item .product__order__name .product__order__circle {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  background: #aaa;
  cursor: pointer;
}
.chart__product__order .product__order__list .product__order__item .product__order__name .product__order__icon {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  color: green;
  cursor: pointer;
}
.chart__product__order .product__order__list .product__order__item .product__order__quantity {
  margin-left: 0.5rem;
  min-width: 2rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.chart__product__order .product__order__list .product__order__item .product__order__total {
  margin-left: 0.5rem;
  min-width: 5rem;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.chart__product__order .product__order__list .product__order__item .product__order__debt {
  min-width: 10rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: right;
  overflow: hidden;
}
.chart__product__order .product__order__summary {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: max-content;
}
.chart__product__order .product__order__summary .order__summary__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
  font-weight: 600;
}
.chart__product__order .product__order__summary .order__summary__quantity, .chart__product__order .product__order__summary .order__summary__amount {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.chart__product__order .product__order__summary .order__summary__quantity {
  min-width: 2rem;
  text-align: center;
  overflow: hidden;
}
.chart__product__order .product__order__summary .order__summary__amount {
  min-width: 5rem;
  text-align: right;
  overflow: hidden;
}

.account__chart__product .chart__product__balance {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.account__chart__product .chart__product__balance .product__balance__amount {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.account__chart__product .chart__product__balance .product__balance__label {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
@media screen and (min-width: 768px) {
  .account__chart__product .chart__product__container {
    max-height: 25rem;
    overflow: auto;
  }
}
.account__chart__product .chart__product__container .chart__product__diary {
  margin-top: 1.5rem;
}
.account__chart__product .chart__product__container .chart__product__diary .product__diary__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.account__chart__product .chart__product__container .chart__product__diary .product__diary__item .product__diary__key, .account__chart__product .chart__product__container .chart__product__diary .product__diary__item .product__diary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.account__chart__product .chart__product__container .chart__product__diary .product__diary__item .product__diary__key {
  margin-left: auto;
  text-transform: uppercase;
}
.account__chart__product .chart__product__container .chart__product__diary .product__diary__item .product__diary__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.account__chart__product .chart__product__container .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}

.chart__screenshot__item {
  margin-bottom: 2rem;
}
.chart__screenshot__item:last-child {
  margin-bottom: 0;
}
.chart__screenshot__item .screenshot__item__label {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.chart__screenshot__item .screenshot__item__orders {
  margin-top: 1rem;
}
.chart__screenshot__item .screenshot__item__orders .screenshot__item__order {
  display: grid;
  grid-template-columns: 1fr max-content;
  padding: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-bottom: 1rem;
}
.chart__screenshot__item .screenshot__item__orders .screenshot__item__order .screenshot__item__date {
  font-size: var(--font-small);
  color: var(--text-2-color);
  overflow: hidden;
}
.chart__screenshot__item .screenshot__item__orders .screenshot__item__order .screenshot__item__amount {
  margin-left: 0.5rem;
  min-width: 3rem;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-2-color);
  overflow: hidden;
}

.account__chart__screenshot .chart__screenshot__container {
  margin-top: 1rem;
  height: 100%;
  padding: 0.2rem;
}
@media screen and (min-width: 768px) {
  .account__chart__screenshot .chart__screenshot__container {
    max-height: 25rem;
    overflow: auto;
  }
}

.account__chart__inventory .chart__inventory__balance {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.account__chart__inventory .chart__inventory__balance .inventory__balance__amount {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.account__chart__inventory .chart__inventory__balance .inventory__balance__label {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.account__chart__inventory .chart__inventory__row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  margin-top: 2rem;
}
.account__chart__inventory .chart__inventory__row.in {
  margin-bottom: 1rem;
}
.account__chart__inventory .chart__inventory__row.in .inventory__row__amount {
  color: green;
}
.account__chart__inventory .chart__inventory__row.in .inventory__row__bar .inventory__row__status {
  background: green;
}
.account__chart__inventory .chart__inventory__row.in .inventory__row__bar .inventory__row__span {
  color: green;
}
.account__chart__inventory .chart__inventory__row.out .inventory__row__amount {
  color: #E05555;
}
.account__chart__inventory .chart__inventory__row.out .inventory__row__bar .inventory__row__status {
  background: #E05555;
}
.account__chart__inventory .chart__inventory__row.out .inventory__row__bar .inventory__row__span {
  color: #E05555;
}
.account__chart__inventory .chart__inventory__row .inventory__row__amount {
  min-width: 7rem;
  margin-right: 0.5rem;
  font-size: var(--font-normal);
  font-weight: 600;
  --font-currency: var(--font-small);
}
@media screen and (min-width: 768px) {
  .account__chart__inventory .chart__inventory__row .inventory__row__amount {
    margin-right: 1rem;
  }
}
.account__chart__inventory .chart__inventory__row .inventory__row__bar {
  position: relative;
  border-radius: 0.2rem;
  height: 1.2rem;
}
.account__chart__inventory .chart__inventory__row .inventory__row__bar .inventory__row__barStatus {
  position: relative;
  border-radius: 0.2rem;
  height: 100%;
  background: #ddd;
  overflow: hidden;
}
.account__chart__inventory .chart__inventory__row .inventory__row__bar .inventory__row__barStatus .inventory__row__status {
  position: absolute;
  top: 0;
  height: 100%;
  right: 100%;
  width: 100%;
  transition: all 1s ease;
}
.account__chart__inventory .chart__inventory__row .inventory__row__bar .inventory__row__span {
  position: absolute;
  bottom: 100%;
  right: 0;
  display: inline-block;
  margin-bottom: 0.1rem;
  font-size: var(--font-little);
  font-weight: 600;
}

.account__chart__sales {
  overflow: scroll;
}
.account__chart__sales .chart__sales__balance {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.account__chart__sales .chart__sales__balance .sales__balance__amount {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.account__chart__sales .chart__sales__balance .sales__balance__label {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.account__chart__sales .chart__sales__graphic {
  margin-top: 2rem;
}

.account__chart__locked {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  background: #eee;
}
.account__chart__locked .chart__locked__container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
.account__chart__locked .chart__locked__container .icon {
  width: 3rem;
  height: 3rem;
  color: #D79F38;
}

.restaurant__account__chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .restaurant__account__chart {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}
.restaurant__account__chart .account__chart__item {
  min-height: 15rem;
  padding: 1rem;
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.restaurant__account__chart .account__chart__item .chart__item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row {
  display: flex;
  align-items: center;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .restaurant__header__label .icon {
  width: 1rem;
  height: 1rem;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .restaurant__header__label span {
  font-size: var(--font-little);
  color: var(--text-2-color);
  font-weight: 600;
  text-transform: uppercase;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .loader__container {
  margin-left: 0.5rem;
  margin-top: 0;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .loader__container .loader {
  width: 1.2rem;
  height: 1.2rem;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .icon-reload {
  margin-left: 0.5rem;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__account__chart .account__chart__item .chart__item__header .item__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}

.restaurant__account__container {
  padding: 1rem var(--padding);
  overflow: auto;
}
.restaurant__account__container .restaurant__account__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.restaurant__account__container .restaurant__account__header .account__header__row {
  display: flex;
  align-items: center;
}
.restaurant__account__container .restaurant__account__header .account__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__account__container .restaurant__account__header .account__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__account__container .restaurant__account__header .account__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__account__container .restaurant__account__header .account__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__account__container .restaurant__account__header .account__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__account__container .restaurant__account__header .account__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}

.invoice__filter__calendar {
  margin-top: 0.5rem;
  padding: 0.5rem;
}
.invoice__filter__calendar .filter__calendar__openHour {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.invoice__filter__calendar .filter__calendar__openHour input {
  margin-right: 0.5rem;
}
.invoice__filter__calendar .filter__calendar__hour {
  display: flex;
  align-items: center;
  justify-content: center;
}
.invoice__filter__calendar .filter__calendar__hour .form__item {
  width: 100%;
}
.invoice__filter__calendar .filter__calendar__hour .form__item input {
  width: 100%;
}
.invoice__filter__calendar .filter__calendar__hour .form__item:first-child {
  margin-right: 1rem;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__title {
  margin-left: 0.5rem;
  margin-right: 1rem;
  white-space: nowrap;
  color: var(--text-2-color);
  font-size: 0.95rem;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__btns .calendar__date__prev, .invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__btns .calendar__date__next {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  color: var(--text-1-color);
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__btns .calendar__date__prev:hover, .invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__btns .calendar__date__next:hover {
  background: #eee;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__header .calendar__date__btns .calendar__date__prev {
  margin-right: 1rem;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(7, 2.4rem);
  grid-template-rows: repeat(4, 2.4rem);
  grid-auto-rows: 2.4rem;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__subtitle, .invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span {
  text-align: center;
  color: var(--text-2-color);
  font-size: 0.75rem;
  margin: 0.2rem;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span.active {
  background: rgb(223.5355648536, 179.4853556485, 98.4644351464);
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span.active:hover {
  background: rgb(223.5355648536, 179.4853556485, 98.4644351464);
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span.inner {
  background: rgb(240.6066945607, 220.4560669456, 183.3933054393);
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span.inner:hover {
  background: rgb(240.6066945607, 220.4560669456, 183.3933054393);
}
.invoice__filter__calendar .filter__calendar__date .calendar__date__table .calendar__date__span:hover {
  background: #ddd;
}
.invoice__filter__calendar .filter__calendar__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}
.invoice__filter__calendar .filter__calendar__action .calendar__action__cancel, .invoice__filter__calendar .filter__calendar__action .calendar__action__apply {
  padding: 0.5rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  text-transform: uppercase;
  color: var(--text-1-color);
  font-weight: 600;
}
.invoice__filter__calendar .filter__calendar__action .calendar__action__cancel:hover, .invoice__filter__calendar .filter__calendar__action .calendar__action__apply:hover {
  background: #ddd;
}
.invoice__filter__calendar .filter__calendar__action .calendar__action__apply {
  margin-right: 0.5rem;
  margin-left: 2rem;
  color: #D79F38;
}

.restaurant__invoice__filter {
  position: relative;
  padding: 0.3rem 0.3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #ddd;
}
.restaurant__invoice__filter.active .invoice__filter__options {
  transform: scale(1);
}
.restaurant__invoice__filter .invoice__filter__label {
  font-size: var(--font-little);
  color: var(--text-1-color);
}
.restaurant__invoice__filter .icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
}
.restaurant__invoice__filter .invoice__filter__options {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  max-height: 35rem;
  margin-top: 0.5rem;
  transform: scale(0);
  background: #fff;
  transition: transform 0.3s;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  overflow: auto;
}
.restaurant__invoice__filter .invoice__filter__options .invoice__filter__option {
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.2rem;
  font-size: var(--font-little);
  color: var(--text-1-color);
  cursor: pointer;
  white-space: nowrap;
}
.restaurant__invoice__filter .invoice__filter__options .invoice__filter__option:hover {
  background: #eee;
}
.restaurant__invoice__filter .invoice__filter__options .invoice__filter__option.active {
  background: #ddd;
}

.restaurant__invoice__nav {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 1.5rem;
  background: #fff;
}
.restaurant__invoice__nav .invoice__nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.restaurant__invoice__nav .invoice__nav__list .invoice__nav__item {
  position: relative;
  padding: 0.5rem;
  margin: 0 1.5rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .restaurant__invoice__nav .invoice__nav__list .invoice__nav__item {
    margin: 0 2rem;
  }
}
.restaurant__invoice__nav .invoice__nav__list .invoice__nav__item.pending {
  border-color: #D79F38;
  color: #D79F38;
}
.restaurant__invoice__nav .invoice__nav__list .invoice__nav__item.pending .invoice__nav__number {
  background: #D79F38;
}
.restaurant__invoice__nav .invoice__nav__list .invoice__nav__item.processed {
  border-color: green;
  color: green;
}
.restaurant__invoice__nav .invoice__nav__list .invoice__nav__item.processed .invoice__nav__number {
  background: green;
}
.restaurant__invoice__nav .invoice__nav__list .invoice__nav__item .invoice__nav__number {
  position: absolute;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  padding: 0.2rem 1rem;
  transform: translate(50%, -50%);
  font-size: var(--font-little);
  color: #fff;
  background: var(--text-1-color);
}

.restaurant__invoice__item {
  padding: 0.5rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.2rem;
  margin: 0.5rem;
  cursor: pointer;
}
.restaurant__invoice__item:hover {
  background: #eee;
}
.restaurant__invoice__item.active {
  background: #D79F38;
}
.restaurant__invoice__item.active .invoice__item__header .invoice__item__type, .restaurant__invoice__item.active .invoice__item__header .invoice__item__client,
.restaurant__invoice__item.active .invoice__item__header .invoice__item__code, .restaurant__invoice__item.active .invoice__item__header .invoice__item__amount, .restaurant__invoice__item.active .invoice__item__info .invoice__item__type, .restaurant__invoice__item.active .invoice__item__info .invoice__item__client,
.restaurant__invoice__item.active .invoice__item__info .invoice__item__code, .restaurant__invoice__item.active .invoice__item__info .invoice__item__amount {
  color: #fff;
}
.restaurant__invoice__item.active .invoice__item__header .invoice__item__type, .restaurant__invoice__item.active .invoice__item__info .invoice__item__type {
  color: #fff;
}
.restaurant__invoice__item.active .invoice__item__header .invoice__item__type .item__type__section, .restaurant__invoice__item.active .invoice__item__info .invoice__item__type .item__type__section {
  color: #fff;
}
.restaurant__invoice__item.active .invoice__item__header .invoice__item__type .item__type__circle, .restaurant__invoice__item.active .invoice__item__info .invoice__item__type .item__type__circle {
  background: #fff;
}
.restaurant__invoice__item.active .invoice__item__header .invoice__item__type .item__type__state, .restaurant__invoice__item.active .invoice__item__info .invoice__item__type .item__type__state {
  background: #fff;
}
.restaurant__invoice__item.credit {
  opacity: 0.6;
  background: #eee;
}
.restaurant__invoice__item .invoice__item__header, .restaurant__invoice__item .invoice__item__info {
  display: flex;
  justify-content: space-between;
}
.restaurant__invoice__item .invoice__item__header {
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.restaurant__invoice__item .invoice__item__header .invoice__item__client {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type {
  display: flex;
  align-items: center;
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__state {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__state.pending {
  background: #D79F38;
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__state.onCredit {
  background: #1E509B;
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__state.charged {
  background: green;
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__state.canceled {
  background: #E05555;
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__circle {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin: 0 0.5rem;
  background: var(--border-color);
}
.restaurant__invoice__item .invoice__item__header .invoice__item__type .item__type__section {
  margin-right: 0.5rem;
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.restaurant__invoice__item .invoice__item__info .invoice__item__code, .restaurant__invoice__item .invoice__item__info .invoice__item__amount {
  font-size: var(--font-small);
  color: var(--text-1-color);
}

.restaurant__invoice__list .invoice__list__container .invoice__list__date {
  position: sticky;
  z-index: 1;
  top: 7rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
.restaurant__invoice__list .invoice__list__container .invoice__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.restaurant__invoice__list .invoice__list__container .invoice__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.restaurant__invoice__list .invoice__list__container .invoice__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__invoice__list .invoice__list__container .invoice__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.restaurant__invoice__list .invoice__list__container .invoice__list__listing {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.invoice__detail__order {
  margin-top: 1rem;
}
.invoice__detail__order .detail__order__header {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
}
.invoice__detail__order .detail__order__header .order__header__description,
.invoice__detail__order .detail__order__header .order__header__price,
.invoice__detail__order .detail__order__header .order__header__quantity,
.invoice__detail__order .detail__order__header .order__header__initial,
.invoice__detail__order .detail__order__header .order__header__end,
.invoice__detail__order .detail__order__header .order__header__total,
.invoice__detail__order .detail__order__header .order__header__debt {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.invoice__detail__order .detail__order__header .order__header__description .order__header__circle,
.invoice__detail__order .detail__order__header .order__header__price .order__header__circle,
.invoice__detail__order .detail__order__header .order__header__quantity .order__header__circle,
.invoice__detail__order .detail__order__header .order__header__initial .order__header__circle,
.invoice__detail__order .detail__order__header .order__header__end .order__header__circle,
.invoice__detail__order .detail__order__header .order__header__total .order__header__circle,
.invoice__detail__order .detail__order__header .order__header__debt .order__header__circle {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  background: #aaa;
  cursor: pointer;
}
.invoice__detail__order .detail__order__header .order__header__description .order__header__icon,
.invoice__detail__order .detail__order__header .order__header__price .order__header__icon,
.invoice__detail__order .detail__order__header .order__header__quantity .order__header__icon,
.invoice__detail__order .detail__order__header .order__header__initial .order__header__icon,
.invoice__detail__order .detail__order__header .order__header__end .order__header__icon,
.invoice__detail__order .detail__order__header .order__header__total .order__header__icon,
.invoice__detail__order .detail__order__header .order__header__debt .order__header__icon {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  color: green;
  cursor: pointer;
}
.invoice__detail__order .detail__order__header .order__header__price {
  min-width: 3rem;
  justify-content: end;
  margin-left: 0.5rem;
}
.invoice__detail__order .detail__order__header .order__header__quantity {
  min-width: 2rem;
  margin-left: 0.5rem;
  justify-content: center;
}
.invoice__detail__order .detail__order__header .order__header__total {
  min-width: 3.5rem;
  justify-content: end;
  margin-left: 0.5rem;
}
.invoice__detail__order .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.invoice__detail__order .detail__order__list {
  margin-top: 0.5rem;
}
.invoice__detail__order .detail__order__list .detail__order__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0.2rem;
  margin-bottom: 0.5rem;
}
.invoice__detail__order .detail__order__list .detail__order__item.selected {
  background: #ddd;
}
.invoice__detail__order .detail__order__list .detail__order__item .detail__order__name {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.invoice__detail__order .detail__order__list .detail__order__item .detail__order__name .detail__order__circle {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  background: #aaa;
  cursor: pointer;
}
.invoice__detail__order .detail__order__list .detail__order__item .detail__order__name .detail__order__icon {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  color: green;
  cursor: pointer;
}
.invoice__detail__order .detail__order__list .detail__order__item .detail__order__price {
  margin-left: 0.5rem;
  min-width: 3rem;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.invoice__detail__order .detail__order__list .detail__order__item .detail__order__quantity {
  margin-left: 0.5rem;
  min-width: 2rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.invoice__detail__order .detail__order__list .detail__order__item .detail__order__total {
  margin-left: 0.5rem;
  min-width: 3.5rem;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}

.invoice__detail__summary {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.invoice__detail__summary .detail__summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.invoice__detail__summary .detail__summary__row .detail__summary__label, .invoice__detail__summary .detail__summary__row .detail__summary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
  font-weight: 600;
}
.invoice__detail__summary .detail__summary__row .detail__summary__label {
  margin-left: auto;
}
.invoice__detail__summary .detail__summary__row .detail__summary__value {
  min-width: 5rem;
  text-align: right;
}

.invoice__detail__charge {
  margin-bottom: 1rem;
}
.invoice__detail__charge .detail__charge__container {
  display: flex;
  flex-wrap: wrap;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.3rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  margin: 0.5rem;
  cursor: pointer;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item.active {
  background: #D79F38;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item.active .icon, .invoice__detail__charge .detail__charge__container .detail__charge__item.active .detail__item__amount {
  color: #fff;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item.active .icon.pending, .invoice__detail__charge .detail__charge__container .detail__charge__item.active .detail__item__amount.pending {
  color: #ddd !important;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item .icon {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.5rem;
  color: #D79F38;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item .icon.pending {
  color: #aaa;
}
.invoice__detail__charge .detail__charge__container .detail__charge__item .detail__item__amount {
  font-size: var(--font-small);
  color: var(--text-1-color);
}

.invoice__detail__diary {
  margin-top: 2rem;
}
.invoice__detail__diary .detail__diary__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.invoice__detail__diary .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.invoice__detail__diary .detail__diary__list {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.invoice__detail__diary .detail__diary__list .detail__diary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.invoice__detail__diary .detail__diary__list .detail__diary__item .detail__diary__key, .invoice__detail__diary .detail__diary__list .detail__diary__item .detail__diary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.invoice__detail__diary .detail__diary__list .detail__diary__item .detail__diary__key {
  margin-left: auto;
  text-transform: uppercase;
  text-align: end;
}
.invoice__detail__diary .detail__diary__list .detail__diary__item .detail__diary__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}

.invoice__detail__command {
  margin-top: 2rem;
}
.invoice__detail__command .detail__command__title {
  font-size: var(--font-small);
  color: var(--text-2-color);
  font-weight: normal;
}
.invoice__detail__command .detail__command__order {
  margin-top: 1rem;
}
.invoice__detail__command .detail__command__order .command__order__header .order__header__description {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.invoice__detail__command .detail__command__order .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.invoice__detail__command .detail__command__order .command__order__list {
  margin-top: 0.5rem;
}
.invoice__detail__command .detail__command__order .command__order__list .command__order__item {
  margin-bottom: 0.5rem;
}
.invoice__detail__command .detail__command__order .command__order__list .command__order__item .command__order__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}

.restaurant__invoice__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__detail .invoice__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__header .invoice__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__header .invoice__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__header .invoice__detail__exit:hover {
  background: #ddd;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__nInvoice {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__nInvoice .info__nInvoice__state {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__nInvoice .info__nInvoice__state.pending {
  background: #D79F38;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__nInvoice .info__nInvoice__state.onCredit {
  background: #1E509B;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__nInvoice .info__nInvoice__state.charged {
  background: green;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__nInvoice .info__nInvoice__state.canceled {
  background: #E05555;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__date, .restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__employee, .restaurant__invoice__detail .invoice__detail__container .invoice__detail__info .detail__info__client {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer .detail__footer__action .detail__footer__icons .icon.icon-setting {
  margin-left: 2rem;
}
.restaurant__invoice__detail .invoice__detail__container .invoice__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.invoice__charge__account {
  margin-top: 2rem;
}
.invoice__charge__account .charge__account__list {
  display: flex;
  flex-wrap: wrap;
}
.invoice__charge__account .charge__account__list .charge__account__item {
  padding: 0.7rem 1rem;
  margin: 0.5rem;
  border-radius: 0.3rem;
  color: var(--text-1-color);
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);
  font-size: var(--font-small);
  text-transform: uppercase;
  flex: 1;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
}
.invoice__charge__account .charge__account__list .charge__account__item.active {
  background: #D79F38;
  color: #fff;
}

.restaurant__invoice__charge {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__charge .invoice__charge__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__header .invoice__charge__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__header .invoice__charge__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__header .invoice__charge__exit:hover {
  background: #ddd;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__nInvoice {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__date, .restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__employee {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__employee {
  margin-bottom: 1rem;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__summary {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__summary .info__summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__summary .info__summary__row .info__summary__label, .restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__summary .info__summary__row .info__summary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
  font-weight: 600;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__summary .info__summary__row .info__summary__label {
  margin-left: auto;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__info .charge__info__summary .info__summary__row .info__summary__value {
  min-width: 5rem;
  text-align: right;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__action .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__action .icon:hover {
  background: #ddd;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__quantity {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__quantity .form__item {
  margin: 0;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__quantity .form__item .form__input {
  margin-top: 0;
  height: 2rem;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__quantity .footer__quantity__btn {
  display: flex;
  margin-left: 1rem;
}
.restaurant__invoice__charge .invoice__charge__container .invoice__charge__footer .charge__footer__quantity .footer__quantity__btn .btn-1 {
  margin-left: 1rem;
}

.restaurant__invoice__setting {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__setting .invoice__setting__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__header .invoice__setting__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__header .invoice__setting__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__header .invoice__setting__exit:hover {
  background: #ddd;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem {
  margin-bottom: 1rem;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem .info__formItem__row {
  display: flex;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem .info__formItem__row .form__item {
  min-width: 7rem;
  width: 100%;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem .info__formItem__row .form__item input {
  width: 100%;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem .info__formItem__row .form__item:first-child {
  margin-right: 0.5rem;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem .form__item {
  margin-bottom: 0;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__formItem .setting__info__span {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
@media screen and (min-width: 768px) {
  .restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row {
    display: flex;
    align-items: center;
  }
  .restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row .form__item {
    min-width: 7rem;
    width: 100%;
  }
  .restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row .form__item input {
    width: 100%;
  }
  .restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row .form__item:first-child {
    margin-right: 0.5rem;
  }
  .restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row.discount .form__item:first-child {
    margin-right: 0.5rem;
    width: 5rem;
  }
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row.discount {
  display: flex;
  align-items: center;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row.discount .form__item .select__input__container .select__options {
  top: initial;
  bottom: 100%;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row.discount .form__item:first-child {
  margin-right: 0.5rem;
  min-width: 5rem;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__info .setting__info__row.discount .form__item input {
  width: 100%;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__footer .setting__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__footer .setting__footer__action .footer__action__balance {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__footer .setting__footer__action .footer__action__saveBtn {
  margin-left: 1rem;
  font-weight: 600;
}
.restaurant__invoice__setting .invoice__setting__container .invoice__setting__footer .setting__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__invoice__report {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__report .invoice__report__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__report .invoice__report__container .invoice__report__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__header .invoice__report__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__header .invoice__report__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__header .invoice__report__exit:hover {
  background: #ddd;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
  background: #fff;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info.remove-overflow {
  overflow: initial;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__date {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .invoice__detail__order .detail__order__header .order__header__quantity {
  min-width: 2rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .invoice__detail__order .detail__order__header .order__header__total {
  min-width: 5rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .invoice__detail__order .detail__order__header .order__header__debt {
  min-width: 10rem;
  justify-content: end;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__quantity {
  min-width: 2rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__total {
  min-width: 5rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__debt {
  min-width: 10rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: end;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__summary {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: max-content;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__summary .info__summary__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
  font-weight: 600;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__summary .info__summary__quantity, .restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__summary .info__summary__amount {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__summary .info__summary__quantity {
  min-width: 2rem;
  text-align: center;
  overflow: hidden;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__summary .info__summary__amount {
  min-width: 5rem;
  text-align: right;
  overflow: hidden;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__diary {
  margin-top: 1.5rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__diary .info__diary__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__diary .info__diary__item .info__diary__key, .restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__diary .info__diary__item .info__diary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__diary .info__diary__item .info__diary__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .report__info__diary .info__diary__item .info__diary__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__info .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.restaurant__invoice__report .invoice__report__container .invoice__report__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__report .invoice__report__container .invoice__report__footer .report__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__footer .report__footer__action .icon {
  cursor: pointer;
}
.restaurant__invoice__report .invoice__report__container .invoice__report__footer .report__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__invoice__inventory {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__inventory .invoice__inventory__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__header .invoice__inventory__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__header .invoice__inventory__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__header .invoice__inventory__exit:hover {
  background: #ddd;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
  background: #fff;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info.remove-overflow {
  overflow: initial;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .inventory__info__date {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__header .order__header__initial, .restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__header .order__header__end {
  min-width: 3.5rem;
  margin-left: 0.5rem;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__header .order__header__initial {
  justify-content: start;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__header .order__header__end {
  justify-content: end;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__list .detail__order__item {
  padding: 0.2rem 0;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__initial, .restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__end {
  margin-left: 0.5rem;
  min-width: 3.5rem;
  text-align: right;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__initial {
  text-align: left;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__end {
  text-align: right;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__footer .inventory__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__footer .inventory__footer__action .icon {
  cursor: pointer;
}
.restaurant__invoice__inventory .invoice__inventory__container .invoice__inventory__footer .inventory__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__invoice__summary {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__summary .invoice__summary__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__header .invoice__summary__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__header .invoice__summary__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__header .invoice__summary__exit:hover {
  background: #ddd;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__date {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: max-content;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary .info__summary__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
  font-weight: 600;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary .info__summary__quantity, .restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary .info__summary__amount {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary .info__summary__quantity {
  width: 2rem;
  text-align: center;
  overflow: hidden;
}
@media screen and (min-width: 360px) {
  .restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary .info__summary__quantity {
    width: 4rem;
  }
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__summary .info__summary__amount {
  width: 5rem;
  text-align: right;
  overflow: hidden;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__diary {
  margin-top: 1.5rem;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__diary .info__diary__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__diary .info__diary__item .info__diary__key, .restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__diary .info__diary__item .info__diary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__diary .info__diary__item .info__diary__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__info .summary__info__diary .info__diary__item .info__diary__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__footer .summary__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__footer .summary__footer__action .footer__action__balance {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__invoice__summary .invoice__summary__container .invoice__summary__footer .summary__footer__action .footer__action__balance {
  font-weight: 600;
}

.restaurant__invoice__cancel {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__cancel .invoice__cancel__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__header .invoice__cancel__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__header .invoice__cancel__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__header .invoice__cancel__exit:hover {
  background: #ddd;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__info .cancel__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__footer .cancel__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__invoice__cancel .invoice__cancel__container .invoice__cancel__footer .cancel__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__invoice__credit {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__credit .invoice__credit__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__header .invoice__credit__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__header .invoice__credit__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__header .invoice__credit__exit:hover {
  background: #ddd;
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__info .credit__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__credit .invoice__credit__container .invoice__credit__footer .credit__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.restaurant__invoice__return {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__return .invoice__return__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__return .invoice__return__container .invoice__return__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__header .invoice__return__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__header .invoice__return__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__header .invoice__return__exit:hover {
  background: #ddd;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__info .return__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__info .return__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  border-radius: 0.2rem;
  background: #eee;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__info .return__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__return .invoice__return__container .invoice__return__footer .return__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__invoice__return .invoice__return__container .invoice__return__footer .return__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__invoice__template {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__invoice__template .invoice__template__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__invoice__template .invoice__template__container .invoice__template__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__header .invoice__template__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__header .invoice__template__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__header .invoice__template__exit:hover {
  background: #ddd;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__info {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__info .template__info__text {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__invoice__template .invoice__template__container .invoice__template__info .template__info__pdf {
  margin-top: 1rem;
  height: 100%;
  padding: 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  overflow-y: auto;
  overflow-x: hidden;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__info .template__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  border-radius: 0.2rem;
  height: 100%;
  background: #eee;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__info .template__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__invoice__template .invoice__template__container .invoice__template__footer .template__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__invoice__template .invoice__template__container .invoice__template__footer .template__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__invoice .restaurant__invoice__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__invoice .restaurant__invoice__container {
    padding-left: var(--padding);
  }
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header .invoice__header__row {
  display: flex;
  align-items: center;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header .invoice__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header .invoice__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header .invoice__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header .invoice__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__header .invoice__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__action .invoice__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__action .invoice__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__action .invoice__action__container {
  display: flex;
  align-items: center;
}
.restaurant__invoice .restaurant__invoice__container .restaurant__invoice__action .invoice__action__container .button__icon {
  margin-left: 2rem;
}

.order__menu__cartIcon {
  position: fixed;
  z-index: 100;
  right: 50%;
  transform: translateX(50%);
  bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 2.2rem;
  border-radius: 0.3rem;
  margin-bottom: 1rem;
  background: var(--border-color);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.order__menu__cartIcon.active {
  background: #D79F38;
}
.order__menu__cartIcon .menu__cartIcon__number, .order__menu__cartIcon .menu__cartIcon__icon {
  color: #fff;
}
.order__menu__cartIcon .menu__cartIcon__number {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  font-weight: 600;
}
.order__menu__cartIcon .menu__cartIcon__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.order__menu__cartIcon .loader__container {
  margin-top: 0;
}
.order__menu__cartIcon .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}

.order__menu__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.order__menu__action .menu__action__section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.order__menu__action .menu__action__section.open {
  background: var(--link-color);
  color: #fff;
}
.order__menu__action .menu__action__section.open .icon {
  color: #fff;
}
.order__menu__action .menu__action__section .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.order__menu__action .menu__action__balance .action__balance__label {
  margin-right: 1rem;
  font-size: var(--font-normal);
  color: var(--text-2-color);
  font-weight: 600;
}
.order__menu__action .menu__action__balance .action__balance__amount {
  min-width: 3rem;
  text-align: end;
  font-size: var(--font-normal);
  color: var(--text-2-color);
  font-weight: 600;
}

.restaurant__order__menu .order__menu__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__order__menu .order__menu__container {
    padding-left: var(--padding);
  }
}
.restaurant__order__menu .order__menu__container .order__menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__row {
  display: flex;
  align-items: center;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__monitor {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__monitor .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--link-color);
}
.restaurant__order__menu .order__menu__container .order__menu__header .menu__header__monitor:hover {
  background: #eee;
}
.restaurant__order__menu .order__menu__container .catalogue__product__department {
  top: 2rem;
}
.restaurant__order__menu .order__menu__container .catalogue__product__list .product__list__container .product__list__groups {
  top: 6rem;
}
.restaurant__order__menu .order__menu__container.showKeyboard .catalogue__product__list .product__list__container .product__list__groups {
  top: -1.1rem;
}

.order__cart__product {
  margin-top: 1rem;
}
.order__cart__product .cart__product__delivery {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
.order__cart__product .cart__product__delivery .product__delivery__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.order__cart__product .cart__product__delivery .product__delivery__action {
  display: flex;
  align-items: center;
}
.order__cart__product .cart__product__delivery .product__delivery__action .icon {
  width: 1.2rem;
  height: 1.2rem;
}
.order__cart__product .cart__product__delivery .product__delivery__action .icon.add {
  margin-right: 1.5rem;
  color: #D79F38;
}
.order__cart__product .cart__product__delivery .product__delivery__action .icon.delete {
  color: var(--text-1-color);
}
.order__cart__product .cart__product__list {
  margin: 0.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0 0.2rem;
}

.order__cart__message {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__cart__message .cart__message__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__cart__message .cart__message__container .cart__message__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__cart__message .cart__message__container .cart__message__header .cart__message__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__cart__message .cart__message__container .cart__message__header .cart__message__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__cart__message .cart__message__container .cart__message__header .cart__message__exit:hover {
  background: #ddd;
}
.order__cart__message .cart__message__container .cart__message__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__cart__message .cart__message__container .cart__message__info .message__info__title, .order__cart__message .cart__message__container .cart__message__info .message__info__text {
  display: inline-block;
  width: 100%;
}
.order__cart__message .cart__message__container .cart__message__info .message__info__title {
  margin-bottom: 1rem;
  font-size: var(--font-normal);
  color: var(--text-2-color);
  font-weight: 600;
}
.order__cart__message .cart__message__container .cart__message__info .message__info__text {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.order__cart__message .cart__message__container .cart__message__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__cart__message .cart__message__container .cart__message__footer .message__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.restaurant__order__cart .order__cart__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content max-content max-content;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__order__cart .order__cart__container {
    padding-left: var(--padding);
  }
}
.restaurant__order__cart .order__cart__container .order__cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__order__cart .order__cart__container .order__cart__header .cart__header__row {
  display: flex;
  align-items: center;
}
.restaurant__order__cart .order__cart__container .order__cart__header .cart__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__order__cart .order__cart__container .order__cart__header .cart__header__monitor {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.restaurant__order__cart .order__cart__container .order__cart__header .cart__header__monitor .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--link-color);
}
.restaurant__order__cart .order__cart__container .order__cart__header .cart__header__monitor:hover {
  background: #eee;
}
.restaurant__order__cart .order__cart__container .order__menu__action {
  padding: 1.5rem 0;
}
.restaurant__order__cart .order__cart__container .order__cart__delivery {
  display: flex;
  align-items: center;
  color: var(--link-color);
  font-size: var(--font-small);
  font-weight: 600;
}
.restaurant__order__cart .order__cart__container .order__cart__delivery .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--link-color);
  margin-right: 0.5rem;
}
.restaurant__order__cart .order__cart__container .order__cart__btn {
  margin-top: 2rem;
  display: flex;
  justify-content: end;
}
.restaurant__order__cart .order__cart__container .order__cart__btn .btn-1:disabled {
  opacity: 0.6;
}

.order__command__nav {
  position: sticky;
  z-index: 1;
  top: 3.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0 1.5rem;
  background: #fff;
}
.order__command__nav .command__nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.order__command__nav .command__nav__list .command__nav__item {
  position: relative;
  padding: 0.5rem;
  margin: 0 1rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
}
@media screen and (min-width: 360px) {
  .order__command__nav .command__nav__list .command__nav__item {
    padding: 0.5rem;
    margin: 0 1rem;
  }
}
@media screen and (min-width: 768px) {
  .order__command__nav .command__nav__list .command__nav__item {
    margin: 0 2rem;
  }
}
.order__command__nav .command__nav__list .command__nav__item.order {
  border-color: #D79F38;
  color: #D79F38;
}
.order__command__nav .command__nav__list .command__nav__item.order .command__nav__number {
  background: #D79F38;
}
.order__command__nav .command__nav__list .command__nav__item.canceled {
  border-color: #E05555;
  color: #E05555;
}
.order__command__nav .command__nav__list .command__nav__item.canceled .command__nav__number {
  background: #E05555;
}
.order__command__nav .command__nav__list .command__nav__item .command__nav__number {
  position: absolute;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  padding: 0.2rem 1rem;
  transform: translate(50%, -50%);
  font-size: var(--font-little);
  color: #fff;
  background: var(--text-1-color);
}

.command__item__action {
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 100;
  min-width: 15rem;
  max-width: 15rem;
  min-height: 5rem;
  transform: scale(0);
  background: #fff;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}
@media screen and (min-width: 768px) {
  .command__item__action {
    max-width: 20rem;
  }
}
.command__item__action .item__action__header {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
}
.command__item__action .item__action__header .item__action__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.command__item__action .item__action__header .item__action__exit:hover {
  background: #ddd;
}
.command__item__action .item__action__container {
  justify-content: center;
  padding: 0.5rem;
}
.command__item__action .item__action__container .item__action__name {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: center;
}
.command__item__action .item__action__container .item__action__buttons {
  display: flex;
  justify-content: center;
}
.command__item__action .item__action__container .item__action__buttons .btn-1 {
  margin: 0.5rem;
  flex: auto;
}
.command__item__action .item__action__container .item__action__buttons .btn-1.cancel {
  border-color: #E05555;
  background: #E05555;
  color: #fff;
}
.command__item__action .item__action__container .item__action__buttons .btn-1.ready {
  border-color: #e59f1f;
  background: #e59f1f;
  color: #fff;
}

.order__command__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.5rem;
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.order__command__item:hover {
  background: #eee;
}
.order__command__item.canceled {
  background: #E05555;
  box-shadow: none;
}
.order__command__item.canceled .command__item__name, .order__command__item.canceled .command__item__duration {
  color: #fff;
}
.order__command__item.canceled .command__item__name .icon, .order__command__item.canceled .command__item__duration .icon {
  color: #fff;
}
.order__command__item.active .command__item__action {
  transform: scale(1);
}
.order__command__item .command__item__name {
  margin-right: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.order__command__item .command__item__duration {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.order__command__item .command__item__duration .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
  color: var(--text-1-color);
}

.order__command__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.command__detail__list {
  margin-top: 1rem;
}
.command__detail__list .detail__list__header {
  margin-top: 2rem;
}
.command__detail__list .detail__list__header .list__header__description {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
}
.command__detail__list .detail__list__header .list__header__description .list__header__circle {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 1rem;
  margin-top: 0.2rem;
  background: #aaa;
  cursor: pointer;
}
.command__detail__list .detail__list__header .list__header__description .list__header__icon {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 1rem;
  margin-top: 0.2rem;
  color: green;
  cursor: pointer;
}
.command__detail__list .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.command__detail__list .detail__list__container {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.command__detail__list .detail__list__container .detail__list__item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0;
}
.command__detail__list .detail__list__container .detail__list__item.selected {
  background: #ddd;
}
.command__detail__list .detail__list__container .detail__list__item .detail__list__name {
  display: flex;
  color: var(--text-1-color);
  font-size: var(--font-small);
}
.command__detail__list .detail__list__container .detail__list__item .detail__list__name .detail__list__circle {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 1rem;
  margin-top: 0.2rem;
  background: #aaa;
  cursor: pointer;
}
.command__detail__list .detail__list__container .detail__list__item .detail__list__name .detail__list__icon {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 1rem;
  margin-top: 0.2rem;
  color: green;
  cursor: pointer;
}

.order__command__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__command__detail .command__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__command__detail .command__detail__container .command__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__command__detail .command__detail__container .command__detail__header .command__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__command__detail .command__detail__container .command__detail__header .command__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__command__detail .command__detail__container .command__detail__header .command__detail__exit:hover {
  background: #ddd;
}
.order__command__detail .command__detail__container .command__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__command__detail .command__detail__container .command__detail__info .command__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.order__command__detail .command__detail__container .command__detail__info .command__info__span.code {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order__command__detail .command__detail__container .command__detail__info .command__info__span.code .info__span__link .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--link-color);
}
.order__command__detail .command__detail__container .command__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__command__detail .command__detail__container .command__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  border-radius: 50%;
  cursor: pointer;
}
.order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
@media screen and (min-width: 360px) {
  .order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .detail__footer__icons .icon {
    margin-right: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  .order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .detail__footer__icons .icon {
    margin-right: 2rem;
  }
}
.order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .detail__footer__icons .icon-add {
  padding: 0.1rem;
}
.order__command__detail .command__detail__container .command__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.order__command__setting {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__command__setting .command__setting__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__command__setting .command__setting__container .command__setting__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__command__setting .command__setting__container .command__setting__header .command__setting__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__command__setting .command__setting__container .command__setting__header .command__setting__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__command__setting .command__setting__container .command__setting__header .command__setting__exit:hover {
  background: #ddd;
}
.order__command__setting .command__setting__container .command__setting__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__command__setting .command__setting__container .command__setting__info .command__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.order__command__setting .command__setting__container .command__setting__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__command__setting .command__setting__container .command__setting__footer .setting__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.order__command__close {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__command__close .command__close__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__command__close .command__close__container .command__close__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__command__close .command__close__container .command__close__header .command__close__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__command__close .command__close__container .command__close__header .command__close__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__command__close .command__close__container .command__close__header .command__close__exit:hover {
  background: #ddd;
}
.order__command__close .command__close__container .command__close__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__command__close .command__close__container .command__close__info .close__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.order__command__close .command__close__container .command__close__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__command__close .command__close__container .command__close__footer .close__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.order__command__close .command__close__container .command__close__footer .close__footer__action .btn-1.red {
  background: #E05555;
}

.order__command__changeUser {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__command__changeUser .command__changeUser__form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 30rem;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__command__changeUser .command__changeUser__form .command__changeUser__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__command__changeUser .command__changeUser__form .command__changeUser__header .command__changeUser__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__command__changeUser .command__changeUser__form .command__changeUser__header .command__changeUser__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__command__changeUser .command__changeUser__form .command__changeUser__header .command__changeUser__exit:hover {
  background: #ddd;
}
.order__command__changeUser .command__changeUser__form .command__changeUser__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__command__changeUser .command__changeUser__form .command__changeUser__info .changeUser__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.order__command__changeUser .command__changeUser__form .command__changeUser__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__command__changeUser .command__changeUser__form .command__changeUser__footer .changeUser__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.restaurant__order__command .order__command__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
}
@media screen and (min-width: 768px) {
  .restaurant__order__command .order__command__container {
    padding-left: 1rem;
  }
}
.restaurant__order__command .order__command__container .order__command__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row {
  display: flex;
  align-items: center;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__monitor {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.restaurant__order__command .order__command__container .order__command__header .command__header__monitor .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--link-color);
}
.restaurant__order__command .order__command__container .order__command__header .command__header__monitor:hover {
  background: #eee;
}
.restaurant__order__command .order__command__container .order__menu__action {
  padding: 1.5rem 0;
}
.restaurant__order__command .order__command__container .order__command__closeMsg {
  display: inline-block;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  font-weight: 600;
  color: green;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
}
.restaurant__order__command .order__command__container .order__menu__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  right: 0;
  left: initial;
}

.monitor__action__filter {
  position: relative;
  padding: 0.3rem 0.3rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
}
.monitor__action__filter:hover {
  background: #ddd;
}
.monitor__action__filter.active .action__filter__options {
  transform: scale(1);
}
.monitor__action__filter .action__filter__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.monitor__action__filter .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.2rem;
}
.monitor__action__filter .action__filter__options {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  min-width: 15rem;
  max-height: 30rem;
  margin-top: 0.5rem;
  transform: scale(0);
  background: #fff;
  transition: transform 0.3s;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}
.monitor__action__filter .action__filter__options .filter__options__header {
  padding: 0.5rem;
}
.monitor__action__filter .action__filter__options .filter__options__header .filter__options__title {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.monitor__action__filter .action__filter__options .filter__options__info {
  padding: 0.5rem;
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__list {
  margin: 0.5rem 0 1rem;
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__list .filter__options__item {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.2rem;
  border-radius: 0.2rem;
  margin-bottom: 0.5rem;
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__list .filter__options__item:hover {
  background: #ddd;
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__list .filter__options__item.active .filter__options__checkbox {
  background: #D79F38;
  border: none;
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__list .filter__options__item .filter__options__checkbox {
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 0.1rem;
  margin-right: 0.5rem;
}
.monitor__action__filter .action__filter__options .filter__options__info .filter__options__list .filter__options__item {
  font-size: var(--font-little);
  color: var(--text-1-color);
}
.monitor__action__filter .action__filter__options .filter__options__buttons {
  display: flex;
  justify-content: end;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.monitor__action__filter .action__filter__options .filter__options__buttons .filter__options__cancel, .monitor__action__filter .action__filter__options .filter__options__buttons .filter__options__apply {
  padding: 0.5rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  text-transform: uppercase;
  color: var(--text-1-color);
  font-weight: 600;
}
.monitor__action__filter .action__filter__options .filter__options__buttons .filter__options__cancel:hover, .monitor__action__filter .action__filter__options .filter__options__buttons .filter__options__apply:hover {
  background: #ddd;
}
.monitor__action__filter .action__filter__options .filter__options__buttons .filter__options__apply {
  margin-right: 0.5rem;
  margin-left: 2rem;
  color: #D79F38;
}

.order__monitor__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.order__monitor__action .monitor__action__section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.order__monitor__action .monitor__action__section .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}

.order__monitor__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.order__monitor__item .monitor__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  cursor: pointer;
}
.order__monitor__item .monitor__item__header:hover {
  opacity: 0.7;
}
.order__monitor__item .monitor__item__header.pub {
  background: #2d4f83;
}
.order__monitor__item .monitor__item__header.open {
  background: #D79F38;
}
.order__monitor__item .monitor__item__header.closed {
  background: green;
}
.order__monitor__item .monitor__item__header .item__header__user {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #fff;
}
.order__monitor__item .monitor__item__header .item__header__user .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.order__monitor__item .monitor__item__header .icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #fff;
}
.order__monitor__item .monitor__item__orders .command__item__action {
  right: 0;
}
@media screen and (min-width: 768px) {
  .order__monitor__item .monitor__item__orders .command__item__action {
    right: 2rem;
  }
}

.order__monitor__list .monitor__list__container .monitor__list__date {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .order__monitor__list .monitor__list__container .monitor__list__date {
    top: 0;
  }
}
.order__monitor__list .monitor__list__container .monitor__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.order__monitor__list .monitor__list__container .monitor__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.order__monitor__list .monitor__list__container .monitor__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.order__monitor__list .monitor__list__container .monitor__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.order__monitor__list .monitor__list__container .monitor__list__listing {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.restaurant__order__monitor .order__monitor__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__order__monitor .order__monitor__container {
    padding-left: 1rem;
  }
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row {
  display: flex;
  align-items: center;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__order__monitor .order__monitor__container .order__monitor__header .monitor__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}

.order__section__aside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.order__section__aside.display {
  right: 0;
}
.order__section__aside .section__aside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100%;
  padding: 1rem;
  background: #fff;
}
.order__section__aside .section__aside__container .section__aside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order__section__aside .section__aside__container .section__aside__header .section__aside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.order__section__aside .section__aside__container .section__aside__header .section__aside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.order__section__aside .section__aside__container .section__aside__header .section__aside__exit:hover {
  background: #ddd;
}
.order__section__aside .section__aside__container .section__aside__list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  padding: 0.2rem;
  overflow: auto;
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item .section__aside__name {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.2rem 0.5rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.45);
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item .section__aside__name:hover {
  background: #eee;
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item .section__aside__name.active {
  color: #fff;
  background: #D79F38;
  box-shadow: none;
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item .section__aside__link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  background: var(--link-color);
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item .section__aside__link.closed {
  opacity: 0.6;
  background: var(--border-color);
}
.order__section__aside .section__aside__container .section__aside__list .section__aside__item .section__aside__link .icon {
  width: 1rem;
  height: 1rem;
  color: #fff;
}
.order__section__aside .section__aside__container .section__aside__footer {
  padding: 1.5rem 0 1rem;
}
.order__section__aside .section__aside__container .section__aside__footer .section__aside__manage {
  display: flex;
  align-items: center;
  width: max-content;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.order__section__aside .section__aside__container .section__aside__footer .section__aside__manage .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
}

.order__section__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__section__new .section__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__section__new .section__new__container .section__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__section__new .section__new__container .section__new__header .section__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__section__new .section__new__container .section__new__header .section__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__section__new .section__new__container .section__new__header .section__new__exit:hover {
  background: #ddd;
}
.order__section__new .section__new__container .section__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__section__new .section__new__container .section__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__section__new .section__new__container .section__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order__section__new .section__new__container .section__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.order__section__new .section__new__container .section__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.order__section__item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.2rem;
  margin: 0.5rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.order__section__item:hover {
  background: #eee;
}
.order__section__item.selected {
  background: #D79F38;
  color: #fff;
}
.order__section__item.selected .section__item__open {
  background: #fff;
}
.order__section__item .section__item__open {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  margin-right: 0.5rem;
  background: #ccc;
}
.order__section__item .section__item__open.active {
  background: var(--link-color);
}

.order__section__list {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.order__section__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.order__section__delete .section__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.order__section__delete .section__delete__container .section__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.order__section__delete .section__delete__container .section__delete__header .section__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.order__section__delete .section__delete__container .section__delete__header .section__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.order__section__delete .section__delete__container .section__delete__header .section__delete__exit:hover {
  background: #ddd;
}
.order__section__delete .section__delete__container .section__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.order__section__delete .section__delete__container .section__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.order__section__delete .section__delete__container .section__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.order__section__delete .section__delete__container .section__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.order__section__delete .section__delete__container .section__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.order__section__delete .section__delete__container .section__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.order__section__delete .section__delete__container .section__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.order__section__delete .section__delete__container .section__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__order__section .order__section__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
}
@media screen and (min-width: 768px) {
  .restaurant__order__section .order__section__container {
    padding-left: 1rem;
  }
}
.restaurant__order__section .order__section__container .order__section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row {
  display: flex;
  align-items: center;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__order__section .order__section__container .order__section__header .section__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__order__section .order__section__container .order__section__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__order__section .order__section__container .order__section__action .section__action__account {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__order__section .order__section__container .order__section__action .section__action__account .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__order__section .order__section__container .order__section__action .section__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
}
.restaurant__order__section .order__section__container .order__section__action .section__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__order__section .order__section__container .order__section__action .section__action__container {
  display: flex;
  align-items: center;
}

.diary__account__aside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.diary__account__aside.display {
  right: 0;
}
.diary__account__aside .account__aside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100vh;
  padding: 1rem;
  background: #fff;
}
.diary__account__aside .account__aside__container .account__aside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diary__account__aside .account__aside__container .account__aside__header .account__aside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.diary__account__aside .account__aside__container .account__aside__header .account__aside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.diary__account__aside .account__aside__container .account__aside__header .account__aside__exit:hover {
  background: #ddd;
}
.diary__account__aside .account__aside__container .account__aside__list {
  margin-top: 2rem;
  padding: 0.2rem;
  overflow: auto;
}
.diary__account__aside .account__aside__container .account__aside__list .aside__list__type {
  font-size: var(--font-small);
  color: var(--text-2-color);
  font-weight: 600;
}
.diary__account__aside .account__aside__container .account__aside__list .aside__list__listing {
  display: flex;
  flex-direction: column;
}
.diary__account__aside .account__aside__container .account__aside__list .aside__list__listing .aside__list__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.diary__account__aside .account__aside__container .account__aside__list .aside__list__listing .aside__list__item .aside__list__name {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.2rem 0.5rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.45);
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.diary__account__aside .account__aside__container .account__aside__list .aside__list__listing .aside__list__item .aside__list__name:hover {
  background: #eee;
}
.diary__account__aside .account__aside__container .account__aside__list .aside__list__listing .aside__list__item .aside__list__name.active {
  color: #fff;
  background: #D79F38;
  box-shadow: none;
}
.diary__account__aside .account__aside__container .account__aside__footer {
  padding: 1.5rem 0 1rem;
}
.diary__account__aside .account__aside__container .account__aside__footer .account__aside__manage {
  display: flex;
  align-items: center;
  width: max-content;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.diary__account__aside .account__aside__container .account__aside__footer .account__aside__manage .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
}

.cash__diary__openForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__diary__openForm .diary__openForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__header .diary__openForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__header .diary__openForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__header .diary__openForm__exit:hover {
  background: #ddd;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__info .diary__openForm__terminal {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__info .form__item .select__options {
  max-height: 10rem;
  overflow: auto;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__footer .openForm__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__footer .openForm__footer__action .footer__action__balance {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__footer .openForm__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.cash__diary__openForm .diary__openForm__container .diary__openForm__footer .openForm__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.cash__diary__closeForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__diary__closeForm .diary__closeForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__header .diary__closeForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__header .diary__closeForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__header .diary__closeForm__exit:hover {
  background: #ddd;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__terminal {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__data .diary__closeForm__locked {
  min-height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__data .diary__closeForm__locked .icon {
  width: 2rem;
  height: 2rem;
  color: #D79F38;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__review .closeForm__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__review .closeForm__review__item .closeForm__review__key, .cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__review .closeForm__review__item .closeForm__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__review .closeForm__review__item .closeForm__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .diary__closeForm__review .closeForm__review__item .closeForm__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .form__item {
  margin-top: 2rem;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__info .form__item .select__options {
  max-height: 10rem;
  overflow: auto;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__footer .closeForm__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__footer .closeForm__footer__action .footer__action__balance {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__footer .closeForm__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.cash__diary__closeForm .diary__closeForm__container .diary__closeForm__footer .closeForm__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.cash__diary__summary {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 35rem;
  border-radius: 0.2rem;
  margin: 0.5rem auto;
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.cash__diary__summary .diary__summary__header {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  background: #D79F38;
}
.cash__diary__summary .diary__summary__header .diary__summary__code {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #fff;
}
.cash__diary__summary .diary__summary__container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow: auto;
}
.cash__diary__summary .diary__summary__container .diary__summary__locked {
  min-height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
}
.cash__diary__summary .diary__summary__container .diary__summary__locked .icon {
  width: 2rem;
  height: 2rem;
  color: #D79F38;
}
.cash__diary__summary .diary__summary__container .diary__summary__span {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__diary__summary .diary__summary__container .invoice__detail__order .detail__order__header {
  margin-top: 0;
}
.cash__diary__summary .diary__summary__container .diary__summary__review .summary__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.cash__diary__summary .diary__summary__container .diary__summary__review .summary__review__item .summary__review__key, .cash__diary__summary .diary__summary__container .diary__summary__review .summary__review__item .summary__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__diary__summary .diary__summary__container .diary__summary__review .summary__review__item .summary__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.cash__diary__summary .diary__summary__container .diary__summary__review .summary__review__item .summary__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.cash__diary__summary .diary__summary__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__diary__summary .diary__summary__footer .summary__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__diary__summary .diary__summary__footer .summary__footer__action .summary__footer__expand {
  display: flex;
  align-items: center;
}
.cash__diary__summary .diary__summary__footer .summary__footer__action .summary__footer__expand input[type=checkbox] {
  margin-right: 0.5rem;
}
.cash__diary__summary .diary__summary__footer .summary__footer__action .summary__footer__expand {
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.cash__diary__summary .diary__summary__footer .summary__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.cash__diary__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__diary__new .diary__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__diary__new .diary__new__container .diary__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__diary__new .diary__new__container .diary__new__header .diary__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__diary__new .diary__new__container .diary__new__header .diary__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__diary__new .diary__new__container .diary__new__header .diary__new__exit:hover {
  background: #ddd;
}
.cash__diary__new .diary__new__container .diary__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__types .new__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__types .new__info__type.active {
  background: #D79F38;
  color: #fff;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__types .new__info__type.in {
  border-radius: 2rem 0 0 2rem;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__types .new__info__type.out {
  border-radius: 0 2rem 2rem 0;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__types .new__info__type.radius {
  border-radius: 2rem;
}
.cash__diary__new .diary__new__container .diary__new__info .form__item .select__options {
  max-height: 10rem;
  overflow: auto;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__addon {
  margin-top: 0.5rem;
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__addon .info__addon__label {
  display: flex;
  align-items: center;
  width: max-content;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__diary__new .diary__new__container .diary__new__info .new__info__addon .info__addon__label input {
  margin-right: 0.5rem;
}
.cash__diary__new .diary__new__container .diary__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__diary__new .diary__new__container .diary__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__diary__new .diary__new__container .diary__new__footer .new__footer__action .footer__action__balance {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.cash__diary__new .diary__new__container .diary__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.cash__diary__new .diary__new__container .diary__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.cash__diary__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__diary__detail .diary__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__diary__detail .diary__detail__container .diary__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__diary__detail .diary__detail__container .diary__detail__header .diary__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__diary__detail .diary__detail__container .diary__detail__header .diary__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__diary__detail .diary__detail__container .diary__detail__header .diary__detail__exit:hover {
  background: #ddd;
}
.cash__diary__detail .diary__detail__container .diary__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__diary__detail .diary__detail__container .diary__detail__info .detail__info__type {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.cash__diary__detail .diary__detail__container .diary__detail__info .detail__info__type .info__type__state {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
}
.cash__diary__detail .diary__detail__container .diary__detail__info .detail__info__type .info__type__state.in {
  background: green;
}
.cash__diary__detail .diary__detail__container .diary__detail__info .detail__info__type .info__type__state.out {
  background: #E05555;
}
.cash__diary__detail .diary__detail__container .diary__detail__info .detail__info__date, .cash__diary__detail .diary__detail__container .diary__detail__info .detail__info__employee {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__diary__detail .diary__detail__container .diary__detail__info .invoice__detail__diary .detail__diary__list .detail__diary__item.in .detail__diary__key, .cash__diary__detail .diary__detail__container .diary__detail__info .invoice__detail__diary .detail__diary__list .detail__diary__item.in .detail__diary__value {
  font-weight: 600;
  color: green;
}
.cash__diary__detail .diary__detail__container .diary__detail__info .invoice__detail__diary .detail__diary__list .detail__diary__item.out .detail__diary__key, .cash__diary__detail .diary__detail__container .diary__detail__info .invoice__detail__diary .detail__diary__list .detail__diary__item.out .detail__diary__value {
  font-weight: 600;
  color: #E05555;
}
.cash__diary__detail .diary__detail__container .diary__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__diary__detail .diary__detail__container .diary__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__diary__detail .diary__detail__container .diary__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.cash__diary__detail .diary__detail__container .diary__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.cash__diary__detail .diary__detail__container .diary__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
.cash__diary__detail .diary__detail__container .diary__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.cash__diary__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__diary__delete .diary__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__diary__delete .diary__delete__container .diary__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__diary__delete .diary__delete__container .diary__delete__header .diary__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__diary__delete .diary__delete__container .diary__delete__header .diary__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__diary__delete .diary__delete__container .diary__delete__header .diary__delete__exit:hover {
  background: #ddd;
}
.cash__diary__delete .diary__delete__container .diary__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__diary__delete .diary__delete__container .diary__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.cash__diary__delete .diary__delete__container .diary__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__diary__delete .diary__delete__container .diary__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.cash__diary__delete .diary__delete__container .diary__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.cash__diary__nav {
  position: sticky;
  top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 1.5rem;
  background: #fff;
}
.cash__diary__nav .diary__nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cash__diary__nav .diary__nav__list .diary__nav__item {
  position: relative;
  padding: 0.5rem;
  margin: 0 0.7rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
}
@media screen and (min-width: 360px) {
  .cash__diary__nav .diary__nav__list .diary__nav__item {
    margin: 0 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .cash__diary__nav .diary__nav__list .diary__nav__item {
    margin: 0 2rem;
  }
}
.cash__diary__nav .diary__nav__list .diary__nav__item.invoice {
  border-color: #D79F38;
  color: #D79F38;
}
.cash__diary__nav .diary__nav__list .diary__nav__item.invoice .diary__nav__number {
  background: #D79F38;
}
.cash__diary__nav .diary__nav__list .diary__nav__item.income {
  border-color: green;
  color: green;
}
.cash__diary__nav .diary__nav__list .diary__nav__item.income .diary__nav__number {
  background: green;
}
.cash__diary__nav .diary__nav__list .diary__nav__item.withdrawal {
  border-color: #E05555;
  color: #E05555;
}
.cash__diary__nav .diary__nav__list .diary__nav__item.withdrawal .diary__nav__number {
  background: #E05555;
}
.cash__diary__nav .diary__nav__list .diary__nav__item .diary__nav__number {
  position: absolute;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  padding: 0.2rem 1rem;
  transform: translate(50%, -50%);
  font-size: var(--font-little);
  color: #fff;
  background: var(--text-1-color);
}

.cash__diary__item {
  padding: 0.5rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.2rem;
  margin: 0.5rem;
  cursor: pointer;
}
.cash__diary__item:hover {
  background: #eee;
}
.cash__diary__item.active {
  background: #D79F38;
}
.cash__diary__item.active .diary__item__header .diary__item__type, .cash__diary__item.active .diary__item__header .diary__item__invoice {
  color: #fff;
}
.cash__diary__item.active .diary__item__info .diary__item__row .diary__item__account, .cash__diary__item.active .diary__item__info .diary__item__row .diary__item__amount {
  color: #fff;
  font-weight: 600;
}
.cash__diary__item.active .diary__item__info .diary__item__row .diary__item__account.in, .cash__diary__item.active .diary__item__info .diary__item__row .diary__item__account.out, .cash__diary__item.active .diary__item__info .diary__item__row .diary__item__amount.in, .cash__diary__item.active .diary__item__info .diary__item__row .diary__item__amount.out {
  color: #fff;
}
.cash__diary__item.active .diary__item__info .diary__item__row .diary__item__state {
  background: #fff;
}
.cash__diary__item .diary__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.cash__diary__item .diary__item__header .diary__item__type {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__diary__item .diary__item__header .diary__item__type.locked {
  font-weight: 600;
}
.cash__diary__item .diary__item__header .diary__item__invoice {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__diary__item .diary__item__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cash__diary__item .diary__item__info .diary__item__row {
  display: flex;
  align-items: center;
}
.cash__diary__item .diary__item__info .diary__item__row .diary__item__state {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: #D79F38;
}
.cash__diary__item .diary__item__info .diary__item__row .diary__item__state.in {
  background: green;
}
.cash__diary__item .diary__item__info .diary__item__row .diary__item__state.out {
  background: #E05555;
}
.cash__diary__item .diary__item__info .diary__item__row .diary__item__account {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__diary__item .diary__item__info .diary__item__amount {
  font-size: var(--font-small);
  font-weight: 600;
}
.cash__diary__item .diary__item__info .diary__item__amount.in {
  color: green;
}
.cash__diary__item .diary__item__info .diary__item__amount.out {
  color: #E05555;
}

.cash__diary__list {
  min-height: 10rem;
  height: max-content;
  padding-bottom: 2rem;
}
.cash__diary__list .diary__list__container .diary__list__date {
  position: sticky;
  z-index: 1;
  top: 7rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
.cash__diary__list .diary__list__container .diary__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.cash__diary__list .diary__list__container .diary__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.cash__diary__list .diary__list__container .diary__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.cash__diary__list .diary__list__container .diary__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.cash__diary__list .diary__list__container .diary__list__listing {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.restaurant__cash__diary .cash__diary__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__cash__diary .cash__diary__container {
    padding-left: 1rem;
  }
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .diary__header__row {
  display: flex;
  align-items: center;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .diary__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .diary__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .diary__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .diary__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .diary__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .cash__header__monitor {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .cash__header__monitor .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--link-color);
}
.restaurant__cash__diary .cash__diary__container .cash__diary__header .cash__header__monitor:hover {
  background: #eee;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__action .diary__action__account {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__action .diary__action__account .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__cash__diary .cash__diary__container .cash__diary__action .diary__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__action .diary__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__action .diary__action__container {
  display: flex;
  align-items: center;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__open {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__open .btn-1 {
  padding: 1rem 1.2rem;
  font-weight: 600;
}
.restaurant__cash__diary .cash__diary__container .cash__diary__open .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.cash__account__chart {
  width: 10rem;
  height: 10rem;
}
@media screen and (min-width: 768px) {
  .cash__account__chart {
    width: 15rem;
    height: 15rem;
  }
}

.cash__account__names {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cash__account__names {
    width: auto;
    margin-top: 0;
    margin-left: 1.5rem;
  }
}
@media screen and (min-width: 1024px) {
  .cash__account__names {
    margin-left: 3rem;
  }
}
.cash__account__names .cash__account__name {
  display: grid;
  grid-template-columns: 1fr auto auto;
  min-width: 15rem;
  padding: 0.5rem;
  margin: 0.5rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.2rem;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .cash__account__names .cash__account__name {
    min-width: 25rem;
  }
}
.cash__account__names .cash__account__name:hover {
  background: #eee;
}
.cash__account__names .cash__account__name.active {
  background: #D79F38;
}
.cash__account__names .cash__account__name.active .account__item__name {
  color: #fff;
}
.cash__account__names .cash__account__name.active .account__item__name .circle {
  background: #fff;
}
.cash__account__names .cash__account__name.active .account__item__name .account__item__charge {
  color: #fff;
}
.cash__account__names .cash__account__name.active .account__item__balance {
  color: #fff;
}
.cash__account__names .cash__account__name .account__name__label {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cash__account__names .cash__account__name .account__name__label .color {
  display: inline-block;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: blue;
}
.cash__account__names .cash__account__name .account__name__label .name {
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cash__account__names .cash__account__name .account__name__percentage {
  display: flex;
  justify-content: end;
  margin-left: 0.5rem;
  min-width: 3rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.cash__account__names .cash__account__name .account__name__balance {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-left: 0.5rem;
  min-width: 7rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}

.cash__account__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cash__account__item {
    flex-direction: row;
    justify-content: center;
  }
}

.cash__account__list .account__list__container .account__list__types {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
.cash__account__list .account__list__container .account__list__types .account__list__type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  background: #eee;
}
.cash__account__list .account__list__container .account__list__types .account__list__type:hover {
  background: #ddd;
}
.cash__account__list .account__list__container .account__list__types .account__list__type .list__type__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.cash__account__list .account__list__container .account__list__types .account__list__type .list__type__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.cash__account__list .account__list__container .account__list__listing {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.cash__account__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__account__new .account__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__account__new .account__new__container .account__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__account__new .account__new__container .account__new__header .account__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__account__new .account__new__container .account__new__header .account__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__account__new .account__new__container .account__new__header .account__new__exit:hover {
  background: #ddd;
}
.cash__account__new .account__new__container .account__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__account__new .account__new__container .account__new__info .new__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.cash__account__new .account__new__container .account__new__info .new__info__types .new__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.cash__account__new .account__new__container .account__new__info .new__info__types .new__info__type.active {
  background: #D79F38;
  color: #fff;
}
.cash__account__new .account__new__container .account__new__info .new__info__types .new__info__type.out {
  border-radius: 2rem 0 0 2rem;
}
.cash__account__new .account__new__container .account__new__info .new__info__types .new__info__type.cash {
  border-radius: 0 2rem 2rem 0;
}
.cash__account__new .account__new__container .account__new__info .new__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5rem;
  border-radius: 0.2rem;
  background: #eee;
}
.cash__account__new .account__new__container .account__new__info .new__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.cash__account__new .account__new__container .account__new__info .new__info__charge {
  display: flex;
  align-items: center;
}
.cash__account__new .account__new__container .account__new__info .new__info__charge .info__charge__label {
  display: flex;
  align-items: center;
  width: max-content;
  margin-right: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__account__new .account__new__container .account__new__info .new__info__charge .info__charge__label input {
  margin-right: 0.5rem;
}
.cash__account__new .account__new__container .account__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__account__new .account__new__container .account__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__account__new .account__new__container .account__new__footer .new__footer__action .footer__action__balance {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.cash__account__new .account__new__container .account__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.cash__account__new .account__new__container .account__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.cash__account__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__account__detail .account__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__account__detail .account__detail__container .account__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__account__detail .account__detail__container .account__detail__header .account__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__account__detail .account__detail__container .account__detail__header .account__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__account__detail .account__detail__container .account__detail__header .account__detail__exit:hover {
  background: #ddd;
}
.cash__account__detail .account__detail__container .account__detail__info {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__name {
  margin-bottom: 0.5rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__balance {
  --font-currency: var(--font-normal);
  margin-bottom: 0.5rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  font-weight: 600;
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__row {
  display: flex;
  align-items: center;
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__row .detail__info__type {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__row .circle {
  margin: 0 0.5rem;
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__row .detail__info__isCash {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__row .detail__info__forCharge {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__history {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__history .info__history__label, .cash__account__detail .account__detail__container .account__detail__info .detail__info__history .info__history__month {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__account__detail .account__detail__container .account__detail__info .detail__info__history .info__history__circle {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin: 0 0.5rem;
  background: var(--text-2-color);
}
.cash__account__detail .account__detail__container .account__detail__info .invoice__detail__order {
  margin-top: 0;
}
.cash__account__detail .account__detail__container .account__detail__info .invoice__detail__order .detail__order__header {
  grid-template-columns: max-content 1fr max-content;
}
.cash__account__detail .account__detail__container .account__detail__info .invoice__detail__order .detail__order__header .order__header__quantity {
  min-width: 6rem;
  justify-content: start;
  margin-left: 0;
}
.cash__account__detail .account__detail__container .account__detail__info .invoice__detail__order .detail__order__list .detail__order__item {
  grid-template-columns: max-content 1fr max-content;
}
.cash__account__detail .account__detail__container .account__detail__info .invoice__detail__order .detail__order__list .detail__order__item .detail__order__quantity {
  min-width: 6rem;
  text-align: start;
  margin-left: 0;
}
.cash__account__detail .account__detail__container .account__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__account__detail .account__detail__container .account__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.cash__account__detail .account__detail__container .account__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.cash__account__transfer {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__account__transfer .account__transfer__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__account__transfer .account__transfer__container .account__transfer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__account__transfer .account__transfer__container .account__transfer__header .account__transfer__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__account__transfer .account__transfer__container .account__transfer__header .account__transfer__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__account__transfer .account__transfer__container .account__transfer__header .account__transfer__exit:hover {
  background: #ddd;
}
.cash__account__transfer .account__transfer__container .account__transfer__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__account__transfer .account__transfer__container .account__transfer__info .transfer__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.cash__account__transfer .account__transfer__container .account__transfer__info .transfer__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.cash__account__transfer .account__transfer__container .account__transfer__info .transfer__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.cash__account__transfer .account__transfer__container .account__transfer__info .transfer__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__account__transfer .account__transfer__container .account__transfer__info .transfer__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10rem;
  border-radius: 0.2rem;
  background: #eee;
}
.cash__account__transfer .account__transfer__container .account__transfer__info .transfer__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.cash__account__transfer .account__transfer__container .account__transfer__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__account__transfer .account__transfer__container .account__transfer__footer .transfer__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__account__transfer .account__transfer__container .account__transfer__footer .transfer__footer__action .footer__action__balance {
  --font-currency: var(--font-small);
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.cash__account__transfer .account__transfer__container .account__transfer__footer .transfer__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.cash__account__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__account__delete .account__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__account__delete .account__delete__container .account__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__account__delete .account__delete__container .account__delete__header .account__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__account__delete .account__delete__container .account__delete__header .account__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__account__delete .account__delete__container .account__delete__header .account__delete__exit:hover {
  background: #ddd;
}
.cash__account__delete .account__delete__container .account__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__account__delete .account__delete__container .account__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.cash__account__delete .account__delete__container .account__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.cash__account__delete .account__delete__container .account__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.cash__account__delete .account__delete__container .account__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__account__delete .account__delete__container .account__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__account__delete .account__delete__container .account__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.cash__account__delete .account__delete__container .account__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__cash__account .cash__account__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__cash__account .cash__account__container {
    padding-left: 1rem;
  }
}
.restaurant__cash__account .cash__account__container .cash__account__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row {
  display: flex;
  align-items: center;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__cash__account .cash__account__container .cash__account__header .account__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__cash__account .cash__account__container .cash__account__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__cash__account .cash__account__container .cash__account__action .account__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
}
.restaurant__cash__account .cash__account__container .cash__account__action .account__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__cash__account .cash__account__container .cash__account__action .account__action__container {
  display: flex;
  align-items: center;
}

.cash__monitor__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.cash__monitor__item .monitor__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  cursor: pointer;
}
.cash__monitor__item .monitor__item__header:hover {
  opacity: 0.7;
}
.cash__monitor__item .monitor__item__header.open {
  background: #D79F38;
}
.cash__monitor__item .monitor__item__header.closed {
  background: green;
}
.cash__monitor__item .monitor__item__header .item__header__code {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #fff;
}
.cash__monitor__item .monitor__item__header .item__header__code .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.cash__monitor__item .monitor__item__header .icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #fff;
}
.cash__monitor__item .monitor__item__container {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.cash__monitor__item .monitor__item__container .monitor__item__date {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__monitor__item .monitor__item__container .invoice__detail__order {
  margin-top: 0;
}
.cash__monitor__item .monitor__item__container .invoice__detail__order .detail__order__header {
  margin-top: 1rem;
}
.cash__monitor__item .monitor__item__container .monitor__item__reviews .monitor__item__review {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.cash__monitor__item .monitor__item__container .monitor__item__reviews .monitor__item__review .item__review__key, .cash__monitor__item .monitor__item__container .monitor__item__reviews .monitor__item__review .item__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__monitor__item .monitor__item__container .monitor__item__reviews .monitor__item__review .item__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.cash__monitor__item .monitor__item__container .monitor__item__reviews .monitor__item__review .item__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}

.cash__monitor__list .monitor__list__container .monitor__list__date {
  position: sticky;
  z-index: 1;
  top: -1rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .cash__monitor__list .monitor__list__container .monitor__list__date {
    top: 0;
  }
}
.cash__monitor__list .monitor__list__container .monitor__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.cash__monitor__list .monitor__list__container .monitor__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.cash__monitor__list .monitor__list__container .monitor__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.cash__monitor__list .monitor__list__container .monitor__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.cash__monitor__list .monitor__list__container .monitor__list__listing {
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.cash__monitor__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.cash__monitor__detail .monitor__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__header .monitor__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__header .monitor__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__header .monitor__detail__exit:hover {
  background: #ddd;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .monitor__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .monitor__info__span .monitor__info__status {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: #D79F38;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .monitor__info__span .monitor__info__status.closed {
  background: green;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .monitor__info__span.code {
  margin-bottom: 1rem;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .diary__summary__review .summary__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .diary__summary__review .summary__review__item .summary__review__key, .cash__monitor__detail .monitor__detail__container .monitor__detail__info .diary__summary__review .summary__review__item .summary__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .diary__summary__review .summary__review__item .summary__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__info .diary__summary__review .summary__review__item .summary__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__icons .detail__footer__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 2.5rem;
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__icons .detail__footer__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__icons .detail__footer__icon .icon:hover {
  background: #ddd;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__icons .detail__footer__icon .icon-add {
  padding: 0.1rem;
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__expand {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.cash__monitor__detail .monitor__detail__container .monitor__detail__footer .detail__footer__action .detail__footer__expand input[type=checkbox] {
  margin-right: 0.5rem;
}

.restaurant__cash__monitor .cash__monitor__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__cash__monitor .cash__monitor__container {
    padding-left: 1rem;
  }
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row {
  display: flex;
  align-items: center;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__header .monitor__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__action .monitor__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__action .monitor__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__cash__monitor .cash__monitor__container .cash__monitor__action .monitor__action__container {
  display: flex;
  align-items: center;
}

.terminal__new__users {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.terminal__new__users .new__users__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.terminal__new__users .new__users__list {
  margin-top: 0.5rem;
}
.terminal__new__users .new__users__list .new__users__item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  width: max-content;
  font-size: var(--font-small);
  color: var(--text-2-color);
  cursor: pointer;
}
.terminal__new__users .new__users__list .new__users__item:hover {
  background: #eee;
}
.terminal__new__users .new__users__list .new__users__item.active {
  color: green;
}
.terminal__new__users .new__users__list .new__users__item .icon {
  flex: none;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: green;
}
.terminal__new__users .new__users__list .new__users__item .box {
  flex: none;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.restaurant__terminal__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__terminal__new .terminal__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__terminal__new .terminal__new__container .terminal__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__header .terminal__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__header .terminal__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__header .terminal__new__exit:hover {
  background: #ddd;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__info .new__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  min-height: 20rem;
  background: #eee;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__info .new__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__terminal__new .terminal__new__container .terminal__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__terminal__new .terminal__new__container .terminal__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__terminal__item {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.restaurant__terminal__item:hover {
  opacity: 0.7;
  background: #ddd;
}
.restaurant__terminal__item .terminal__item__image {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-right: 1rem;
  flex: none;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.restaurant__terminal__item .terminal__item__image img {
  border-radius: 50%;
}
.restaurant__terminal__item .terminal__item__container {
  padding: 0.5rem;
}
.restaurant__terminal__item .terminal__item__container .terminal__item__span {
  display: inline-block;
  width: 100%;
  color: var(--text-2-color);
}
.restaurant__terminal__item .terminal__item__container .terminal__item__span.name {
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__terminal__item .terminal__item__container .terminal__item__span.phone {
  margin: 0.5rem 0 0.2rem;
  font-size: var(--font-small);
}
.restaurant__terminal__item .terminal__item__container .terminal__item__span.address {
  font-size: var(--font-small);
}

.restaurant__terminal__list {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.restaurant__terminal__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__terminal__detail .terminal__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__header .terminal__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__header .terminal__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__header .terminal__detail__exit:hover {
  background: #ddd;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info .terminal__detail__name {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info .terminal__detail__users {
  margin-top: 1rem;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info .terminal__detail__users .detail__users__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info .terminal__detail__users .detail__users__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info .terminal__detail__users .detail__users__list .detail__users__item {
  padding: 0.5rem 0;
  white-space: nowrap;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__info .terminal__detail__users .detail__users__list .detail__users__item::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__terminal__detail .terminal__detail__container .terminal__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__terminal__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__terminal__delete .terminal__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__header .terminal__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__header .terminal__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__header .terminal__delete__exit:hover {
  background: #ddd;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__terminal__delete .terminal__delete__container .terminal__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__terminal .restaurant__terminal__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__terminal .restaurant__terminal__container {
    padding-left: 1rem;
  }
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header .terminal__header__row {
  display: flex;
  align-items: center;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header .terminal__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header .terminal__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header .terminal__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header .terminal__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__header .terminal__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__action .terminal__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__action .terminal__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__terminal .restaurant__terminal__container .restaurant__terminal__action .terminal__action__container {
  display: flex;
  align-items: center;
}

.restaurant__inventory__table {
  margin: 2rem 0;
  overflow: scroll;
}
.restaurant__inventory__table .inventory__table__container .inventory__table__header {
  display: flex;
}
.restaurant__inventory__table .inventory__table__container .inventory__table__header .inventory__table__title {
  width: 7rem;
  min-width: 7rem;
  border: 1px solid #aaa;
  border-right: 1px solid #aaa;
  padding: 0.5rem 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  text-align: center;
  background: #ddd;
  overflow: hidden;
}
.restaurant__inventory__table .inventory__table__container .inventory__table__header .inventory__table__title.name {
  width: 10rem;
  min-width: 10rem;
}
@media screen and (min-width: 768px) {
  .restaurant__inventory__table .inventory__table__container .inventory__table__header .inventory__table__title.name {
    width: 15rem;
    min-width: 15rem;
  }
}
.restaurant__inventory__table .inventory__table__container .inventory__table__list .inventory__table__item {
  display: flex;
  cursor: pointer;
}
.restaurant__inventory__table .inventory__table__container .inventory__table__list .inventory__table__item:hover .inventory__table__span {
  background: #eee;
}
.restaurant__inventory__table .inventory__table__container .inventory__table__list .inventory__table__item .inventory__table__span {
  width: 7rem;
  min-width: 7rem;
  border: 1px solid #ccc;
  border-top: none;
  padding: 0.5rem 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: center;
  overflow: hidden;
}
.restaurant__inventory__table .inventory__table__container .inventory__table__list .inventory__table__item .inventory__table__span.name {
  width: 10rem;
  min-width: 10rem;
}
@media screen and (min-width: 768px) {
  .restaurant__inventory__table .inventory__table__container .inventory__table__list .inventory__table__item .inventory__table__span.name {
    width: 15rem;
    min-width: 15rem;
  }
}
.restaurant__inventory__table .inventory__table__container .inventory__table__list .inventory__table__item .inventory__table__span.total {
  background: #ddd;
  font-weight: 600;
}

.restaurant__inventory__stockLevel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
.restaurant__inventory__stockLevel .inventory__stockLevel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 6rem;
  margin: 0 1rem;
}
.restaurant__inventory__stockLevel .inventory__stockLevel__item .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}
.restaurant__inventory__stockLevel .inventory__stockLevel__item .inventory__stockLevel__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  text-align: center;
}
.restaurant__inventory__stockLevel .inventory__stockLevel__item.low .icon, .restaurant__inventory__stockLevel .inventory__stockLevel__item.low .inventory__stockLevel__label {
  color: #abab05;
}
.restaurant__inventory__stockLevel .inventory__stockLevel__item.out .icon, .restaurant__inventory__stockLevel .inventory__stockLevel__item.out .inventory__stockLevel__label {
  color: #E05555;
}

.restaurant__inventory__locked .inventory__locked__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__inventory__locked .inventory__locked__container {
    padding-left: 1rem;
  }
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header .locked__header__row {
  display: flex;
  align-items: center;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header .locked__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header .locked__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header .locked__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header .locked__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__header .locked__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__action .locked__action__pos {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__info {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  background: #eee;
  margin-top: 1.5rem;
}
.restaurant__inventory__locked .inventory__locked__container .inventory__locked__info .icon {
  width: 3rem;
  height: 3rem;
  color: #D79F38;
}

.restaurant__inventory__exportLoading {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  width: 100%;
  max-width: 25rem;
  min-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container .inventory__exportLoading__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container .inventory__exportLoading__header .inventory__exportLoading__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container .inventory__exportLoading__header .inventory__exportLoading__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container .inventory__exportLoading__header .inventory__exportLoading__exit:hover {
  background: #ddd;
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container .inventory__exportLoading__info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.restaurant__inventory__exportLoading .inventory__exportLoading__container .inventory__exportLoading__info .loader__container .loader {
  width: 5rem;
  height: 5rem;
}

.restaurant__inventory .restaurant__inventory__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__inventory .restaurant__inventory__container {
    padding-left: 1rem;
  }
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header .inventory__header__row {
  display: flex;
  align-items: center;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header .inventory__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header .inventory__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header .inventory__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header .inventory__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__header .inventory__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action .inventory__action__store {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action .inventory__action__store .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action .inventory__action__container {
  display: flex;
  align-items: center;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action .inventory__action__container > .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action .inventory__action__container > .icon:hover {
  background: #ddd;
}
.restaurant__inventory .restaurant__inventory__container .restaurant__inventory__action .inventory__action__container .inventory__action__line {
  display: inline-block;
  height: 2rem;
  width: 2px;
  margin: 0 1rem;
  background: var(--border-color);
}

.restaurant__input__newPreload {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__input__newPreload .input__newPreload__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 20rem;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__header .input__newPreload__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__header .input__newPreload__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__header .input__newPreload__exit:hover {
  background: #ddd;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__info .newPreload__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__info .newPreload__info__types .newPreload__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__info .newPreload__info__types .newPreload__info__type.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__info .newPreload__info__types .newPreload__info__type.inventory {
  border-radius: 2rem 0 0 2rem;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__info .newPreload__info__types .newPreload__info__type.purchase {
  border-radius: 0 2rem 2rem 0;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__footer .newPreload__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__footer .newPreload__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__input__newPreload .input__newPreload__container .input__newPreload__footer .newPreload__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__input__nav {
  position: sticky;
  top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 1.5rem;
  background: #fff;
}
.restaurant__input__nav .input__nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.restaurant__input__nav .input__nav__list .input__nav__item {
  position: relative;
  padding: 0.5rem;
  margin: 0 0.2rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
}
@media screen and (min-width: 400px) {
  .restaurant__input__nav .input__nav__list .input__nav__item {
    margin: 0 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .restaurant__input__nav .input__nav__list .input__nav__item {
    margin: 0 2rem;
  }
}
.restaurant__input__nav .input__nav__list .input__nav__item.active {
  border-color: #D79F38;
  color: #D79F38;
}

.restaurant__input__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.restaurant__input__item .input__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  cursor: pointer;
}
.restaurant__input__item .input__item__header:hover {
  opacity: 0.7;
}
.restaurant__input__item .input__item__header.open {
  background: #D79F38;
}
.restaurant__input__item .input__item__header.closed {
  background: green;
}
.restaurant__input__item .input__item__header .item__header__code {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #fff;
}
.restaurant__input__item .input__item__header .item__header__code .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.restaurant__input__item .input__item__header .icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #fff;
}
.restaurant__input__item .input__item__container {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.restaurant__input__item .input__item__container .input__item__date {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__input__item .input__item__container .invoice__detail__order {
  margin-top: 0;
}
.restaurant__input__item .input__item__container .invoice__detail__order .detail__order__header {
  margin-top: 1rem;
}
.restaurant__input__item .input__item__container .input__item__review {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__input__item .input__item__container .input__item__review .item__review__key, .restaurant__input__item .input__item__container .input__item__review .item__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__input__item .input__item__container .input__item__review .item__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__input__item .input__item__container .input__item__review .item__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}

.restaurant__input__list .input__list__container .input__list__date {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .restaurant__input__list .input__list__container .input__list__date {
    top: 0;
  }
}
.restaurant__input__list .input__list__container .input__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.restaurant__input__list .input__list__container .input__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.restaurant__input__list .input__list__container .input__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__input__list .input__list__container .input__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.restaurant__input__list .input__list__container .input__list__listing {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.input__new__productForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.input__new__productForm .new__productForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.input__new__productForm .new__productForm__container .new__productForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.input__new__productForm .new__productForm__container .new__productForm__header .new__productForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.input__new__productForm .new__productForm__container .new__productForm__header .new__productForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.input__new__productForm .new__productForm__container .new__productForm__header .new__productForm__exit:hover {
  background: #ddd;
}
.input__new__productForm .new__productForm__container .new__productForm__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.input__new__productForm .new__productForm__container .new__productForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row {
  display: flex;
  align-items: center;
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName.add-currency {
  font-weight: 600;
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName .icon {
  margin: 0 0.2rem;
  color: var(--text-2-color);
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  cursor: pointer;
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .icon:hover {
  background: #eee;
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.input__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.input__new__product {
  margin-top: 1.5rem;
}
.input__new__product .new__product__header {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
}
.input__new__product .new__product__header.padding {
  padding: 0.5rem;
}
.input__new__product .new__product__header .product__header__description,
.input__new__product .new__product__header .product__header__initial,
.input__new__product .new__product__header .product__header__quantity,
.input__new__product .new__product__header .product__header__stock {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.input__new__product .new__product__header .product__header__initial,
.input__new__product .new__product__header .product__header__quantity,
.input__new__product .new__product__header .product__header__stock {
  justify-content: center;
  margin-left: 0.5rem;
  min-width: 3rem;
  overflow: hidden;
}
.input__new__product .line {
  display: flex;
  margin-top: 0.5rem;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.input__new__product .new__product__list {
  margin-top: 0.5rem;
}
.input__new__product .new__product__list .new__product__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  align-items: center;
  margin-bottom: 1rem;
}
.input__new__product .new__product__list .new__product__item.padding {
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.input__new__product .new__product__list .new__product__item.selected {
  background: #ddd;
}
.input__new__product .new__product__list .new__product__item .product__item__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.input__new__product .new__product__list .new__product__item .product__item__initial,
.input__new__product .new__product__list .new__product__item .product__item__quantity,
.input__new__product .new__product__list .new__product__item .product__item__stock {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  min-width: 3rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}

.restaurant__input__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__input__new .input__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 90vh;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__input__new .input__new__container .input__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__input__new .input__new__container .input__new__header .input__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__input__new .input__new__container .input__new__header .input__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__input__new .input__new__container .input__new__header .input__new__exit:hover {
  background: #ddd;
}
.restaurant__input__new .input__new__container .input__new__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__input__new .input__new__container .input__new__info .input__new__setting {
  display: flex;
  flex-direction: column;
}
.restaurant__input__new .input__new__container .input__new__info .input__new__setting .input__new__store {
  font-size: var(--font-small);
  color: var(--text-2-color);
  margin-bottom: 0.5rem;
}
.restaurant__input__new .input__new__container .input__new__info .input__new__addProduct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  cursor: pointer;
}
.restaurant__input__new .input__new__container .input__new__info .input__new__addProduct .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__input__new .input__new__container .input__new__info .input__new__addProduct span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__input__new .input__new__container .input__new__info .input__new__addProduct span .icon {
  margin-right: 0.5rem;
}
.restaurant__input__new .input__new__container .input__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__input__new .input__new__container .input__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__input__new .input__new__container .input__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__input__new .input__new__container .input__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__input__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__input__detail .input__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__input__detail .input__detail__container .input__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__input__detail .input__detail__container .input__detail__header .input__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__input__detail .input__detail__container .input__detail__header .input__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__input__detail .input__detail__container .input__detail__header .input__detail__exit:hover {
  background: #ddd;
}
.restaurant__input__detail .input__detail__container .input__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__code {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__code .detail__info__open {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__code .detail__info__open.open {
  background: #D79F38;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__code .detail__info__open.close {
  background: green;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product {
  margin-top: 1.5rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__description,
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__quantity,
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__stock {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__quantity,
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__stock {
  min-width: 3rem;
  justify-content: center;
  margin-left: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 360px) {
  .restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__quantity,
  .restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__stock {
    min-width: 4rem;
  }
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__header .product__header__stock {
  min-width: 7rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list {
  margin-top: 0.5rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  align-items: center;
  margin-bottom: 1rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item .product__item__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item .product__item__quantity,
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item .product__item__stock {
  margin-left: 0.5rem;
  min-width: 3rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
@media screen and (min-width: 360px) {
  .restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item .product__item__quantity,
  .restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item .product__item__stock {
    min-width: 4rem;
  }
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__product .info__product__list .info__product__item .product__item__stock {
  min-width: 7rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__review {
  margin-top: 1.5rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__review .info__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__review .info__review__item .info__review__key, .restaurant__input__detail .input__detail__container .input__detail__info .detail__info__review .info__review__item .info__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__review .info__review__item .info__review__key {
  margin-left: auto;
  text-transform: uppercase;
  text-align: right;
}
.restaurant__input__detail .input__detail__container .input__detail__info .detail__info__review .info__review__item .info__review__value {
  margin-left: 0.5rem;
  min-width: 5rem;
  text-align: right;
}
.restaurant__input__detail .input__detail__container .input__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__input__detail .input__detail__container .input__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__input__detail .input__detail__container .input__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.restaurant__input__detail .input__detail__container .input__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.restaurant__input__detail .input__detail__container .input__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
.restaurant__input__detail .input__detail__container .input__detail__footer .detail__footer__action .detail__footer__icons .icon.icon-setting {
  margin-left: 2rem;
}
.restaurant__input__detail .input__detail__container .input__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__input__apply {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__input__apply .input__apply__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__input__apply .input__apply__container .input__apply__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__input__apply .input__apply__container .input__apply__header .input__apply__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__input__apply .input__apply__container .input__apply__header .input__apply__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__input__apply .input__apply__container .input__apply__header .input__apply__exit:hover {
  background: #ddd;
}
.restaurant__input__apply .input__apply__container .input__apply__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__input__apply .input__apply__container .input__apply__info .apply__info__text {
  display: inline-block;
  width: 100%;
  margin: 2rem 0 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__input__apply .input__apply__container .input__apply__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__input__apply .input__apply__container .input__apply__footer .apply__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__input__apply .input__apply__container .input__apply__footer .apply__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__input__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__input__delete .input__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__input__delete .input__delete__container .input__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__input__delete .input__delete__container .input__delete__header .input__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__input__delete .input__delete__container .input__delete__header .input__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__input__delete .input__delete__container .input__delete__header .input__delete__exit:hover {
  background: #ddd;
}
.restaurant__input__delete .input__delete__container .input__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__input__delete .input__delete__container .input__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__input__delete .input__delete__container .input__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__input__delete .input__delete__container .input__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__input__delete .input__delete__container .input__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__input .restaurant__input__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__input .restaurant__input__container {
    padding-left: 1rem;
  }
}
.restaurant__input .restaurant__input__container .restaurant__input__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__input .restaurant__input__container .restaurant__input__header .input__header__row {
  display: flex;
  align-items: center;
}
.restaurant__input .restaurant__input__container .restaurant__input__header .input__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__input .restaurant__input__container .restaurant__input__header .input__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__input .restaurant__input__container .restaurant__input__header .input__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__input .restaurant__input__container .restaurant__input__header .input__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__input .restaurant__input__container .restaurant__input__header .input__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__input .restaurant__input__container .restaurant__input__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__input .restaurant__input__container .restaurant__input__action .input__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__input .restaurant__input__container .restaurant__input__action .input__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__input .restaurant__input__container .restaurant__input__action .input__action__container {
  display: flex;
  align-items: center;
}
.restaurant__input .restaurant__input__container .restaurant__input__action .input__action__container .button__icon {
  margin-left: 2rem;
}

.restaurant__output__newPreload {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__output__newPreload .output__newPreload__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 20rem;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__header .output__newPreload__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__header .output__newPreload__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__header .output__newPreload__exit:hover {
  background: #ddd;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__info .newPreload__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__info .newPreload__info__types .newPreload__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__info .newPreload__info__types .newPreload__info__type.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__info .newPreload__info__types .newPreload__info__type.inventory {
  border-radius: 2rem 0 0 2rem;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__info .newPreload__info__types .newPreload__info__type.purchase {
  border-radius: 0 2rem 2rem 0;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__footer .newPreload__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__footer .newPreload__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__output__newPreload .output__newPreload__container .output__newPreload__footer .newPreload__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__output__nav {
  position: sticky;
  top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 1.5rem;
  background: #fff;
}
.restaurant__output__nav .output__nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.restaurant__output__nav .output__nav__list .output__nav__item {
  position: relative;
  padding: 0.5rem;
  margin: 0 0.2rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
}
@media screen and (min-width: 360px) {
  .restaurant__output__nav .output__nav__list .output__nav__item {
    margin: 0 1.2rem;
  }
}
@media screen and (min-width: 768px) {
  .restaurant__output__nav .output__nav__list .output__nav__item {
    margin: 0 2rem;
  }
}
.restaurant__output__nav .output__nav__list .output__nav__item.active {
  border-color: #D79F38;
  color: #D79F38;
}

.restaurant__output__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.restaurant__output__item .output__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  cursor: pointer;
}
.restaurant__output__item .output__item__header:hover {
  opacity: 0.7;
}
.restaurant__output__item .output__item__header.open {
  background: #D79F38;
}
.restaurant__output__item .output__item__header.closed {
  background: green;
}
.restaurant__output__item .output__item__header .item__header__code {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #fff;
}
.restaurant__output__item .output__item__header .item__header__code .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.restaurant__output__item .output__item__header .icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #fff;
}
.restaurant__output__item .output__item__container {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.restaurant__output__item .output__item__container .output__item__date {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__output__item .output__item__container .invoice__detail__order {
  margin-top: 0;
}
.restaurant__output__item .output__item__container .invoice__detail__order .detail__order__header {
  margin-top: 1rem;
}
.restaurant__output__item .output__item__container .output__item__review {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__output__item .output__item__container .output__item__review .item__review__key, .restaurant__output__item .output__item__container .output__item__review .item__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__output__item .output__item__container .output__item__review .item__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__output__item .output__item__container .output__item__review .item__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}

.restaurant__output__list .output__list__container .output__list__date {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .restaurant__output__list .output__list__container .output__list__date {
    top: 0;
  }
}
.restaurant__output__list .output__list__container .output__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.restaurant__output__list .output__list__container .output__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.restaurant__output__list .output__list__container .output__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__output__list .output__list__container .output__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.restaurant__output__list .output__list__container .output__list__listing {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.output__new__productForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.output__new__productForm .new__productForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.output__new__productForm .new__productForm__container .new__productForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.output__new__productForm .new__productForm__container .new__productForm__header .new__productForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.output__new__productForm .new__productForm__container .new__productForm__header .new__productForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.output__new__productForm .new__productForm__container .new__productForm__header .new__productForm__exit:hover {
  background: #ddd;
}
.output__new__productForm .new__productForm__container .new__productForm__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.output__new__productForm .new__productForm__container .new__productForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row {
  display: flex;
  align-items: center;
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName.add-currency {
  font-weight: 600;
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName .icon {
  margin: 0 0.2rem;
  color: var(--text-2-color);
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  cursor: pointer;
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .icon:hover {
  background: #eee;
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.output__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.output__new__product {
  margin-top: 1.5rem;
}
.output__new__product .new__product__header {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
}
.output__new__product .new__product__header.padding {
  padding: 0.5rem;
}
.output__new__product .new__product__header .product__header__description,
.output__new__product .new__product__header .product__header__initial,
.output__new__product .new__product__header .product__header__quantity,
.output__new__product .new__product__header .product__header__stock {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.output__new__product .new__product__header .product__header__initial,
.output__new__product .new__product__header .product__header__quantity,
.output__new__product .new__product__header .product__header__stock {
  justify-content: center;
  margin-left: 0.5rem;
  min-width: 3rem;
  overflow: hidden;
}
.output__new__product .line {
  display: flex;
  margin-top: 0.5rem;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.output__new__product .new__product__list {
  margin-top: 0.5rem;
}
.output__new__product .new__product__list .new__product__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  align-items: center;
  margin-bottom: 1rem;
}
.output__new__product .new__product__list .new__product__item.padding {
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.output__new__product .new__product__list .new__product__item.selected {
  background: #ddd;
}
.output__new__product .new__product__list .new__product__item .product__item__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.output__new__product .new__product__list .new__product__item .product__item__initial,
.output__new__product .new__product__list .new__product__item .product__item__quantity,
.output__new__product .new__product__list .new__product__item .product__item__stock {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  min-width: 3rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}

.restaurant__output__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__output__new .output__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 90vh;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__output__new .output__new__container .output__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__output__new .output__new__container .output__new__header .output__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__output__new .output__new__container .output__new__header .output__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__output__new .output__new__container .output__new__header .output__new__exit:hover {
  background: #ddd;
}
.restaurant__output__new .output__new__container .output__new__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__output__new .output__new__container .output__new__info .output__new__setting {
  display: flex;
  flex-direction: column;
}
.restaurant__output__new .output__new__container .output__new__info .output__new__setting .output__new__store {
  font-size: var(--font-small);
  color: var(--text-2-color);
  margin-bottom: 0.5rem;
}
.restaurant__output__new .output__new__container .output__new__info .output__new__addProduct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  cursor: pointer;
}
.restaurant__output__new .output__new__container .output__new__info .output__new__addProduct .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__output__new .output__new__container .output__new__info .output__new__addProduct span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__output__new .output__new__container .output__new__info .output__new__addProduct span .icon {
  margin-right: 0.5rem;
}
.restaurant__output__new .output__new__container .output__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__output__new .output__new__container .output__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__output__new .output__new__container .output__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__output__new .output__new__container .output__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__output__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__output__detail .output__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__output__detail .output__detail__container .output__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__output__detail .output__detail__container .output__detail__header .output__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__output__detail .output__detail__container .output__detail__header .output__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__output__detail .output__detail__container .output__detail__header .output__detail__exit:hover {
  background: #ddd;
}
.restaurant__output__detail .output__detail__container .output__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__code {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__code .detail__info__open {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__code .detail__info__open.open {
  background: #D79F38;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__code .detail__info__open.close {
  background: green;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product {
  margin-top: 1.5rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__description,
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__quantity,
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__stock {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__quantity,
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__stock {
  min-width: 3rem;
  justify-content: center;
  margin-left: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 360px) {
  .restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__quantity,
  .restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__stock {
    min-width: 4rem;
  }
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__header .product__header__stock {
  min-width: 7rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list {
  margin-top: 0.5rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  align-items: center;
  margin-bottom: 1rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item .product__item__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item .product__item__quantity,
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item .product__item__stock {
  margin-left: 0.5rem;
  min-width: 3rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
@media screen and (min-width: 360px) {
  .restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item .product__item__quantity,
  .restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item .product__item__stock {
    min-width: 4rem;
  }
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__product .info__product__list .info__product__item .product__item__stock {
  min-width: 7rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__review {
  margin-top: 1.5rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__review .info__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__review .info__review__item .info__review__key, .restaurant__output__detail .output__detail__container .output__detail__info .detail__info__review .info__review__item .info__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__review .info__review__item .info__review__key {
  margin-left: auto;
  text-transform: uppercase;
  text-align: right;
}
.restaurant__output__detail .output__detail__container .output__detail__info .detail__info__review .info__review__item .info__review__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.restaurant__output__detail .output__detail__container .output__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__output__detail .output__detail__container .output__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__output__detail .output__detail__container .output__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.restaurant__output__detail .output__detail__container .output__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.restaurant__output__detail .output__detail__container .output__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
.restaurant__output__detail .output__detail__container .output__detail__footer .detail__footer__action .detail__footer__icons .icon.icon-setting {
  margin-left: 2rem;
}
.restaurant__output__detail .output__detail__container .output__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__output__apply {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__output__apply .output__apply__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__output__apply .output__apply__container .output__apply__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__output__apply .output__apply__container .output__apply__header .output__apply__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__output__apply .output__apply__container .output__apply__header .output__apply__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__output__apply .output__apply__container .output__apply__header .output__apply__exit:hover {
  background: #ddd;
}
.restaurant__output__apply .output__apply__container .output__apply__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__output__apply .output__apply__container .output__apply__info .apply__info__text {
  display: inline-block;
  width: 100%;
  margin: 2rem 0 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__output__apply .output__apply__container .output__apply__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__output__apply .output__apply__container .output__apply__footer .apply__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__output__apply .output__apply__container .output__apply__footer .apply__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__output__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__output__delete .output__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__output__delete .output__delete__container .output__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__output__delete .output__delete__container .output__delete__header .output__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__output__delete .output__delete__container .output__delete__header .output__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__output__delete .output__delete__container .output__delete__header .output__delete__exit:hover {
  background: #ddd;
}
.restaurant__output__delete .output__delete__container .output__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__output__delete .output__delete__container .output__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__output__delete .output__delete__container .output__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__output__delete .output__delete__container .output__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__output__delete .output__delete__container .output__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__output .restaurant__output__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__output .restaurant__output__container {
    padding-left: 1rem;
  }
}
.restaurant__output .restaurant__output__container .restaurant__output__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__output .restaurant__output__container .restaurant__output__header .output__header__row {
  display: flex;
  align-items: center;
}
.restaurant__output .restaurant__output__container .restaurant__output__header .output__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__output .restaurant__output__container .restaurant__output__header .output__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__output .restaurant__output__container .restaurant__output__header .output__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__output .restaurant__output__container .restaurant__output__header .output__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__output .restaurant__output__container .restaurant__output__header .output__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__output .restaurant__output__container .restaurant__output__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__output .restaurant__output__container .restaurant__output__action .output__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__output .restaurant__output__container .restaurant__output__action .output__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__output .restaurant__output__container .restaurant__output__action .output__action__container {
  display: flex;
  align-items: center;
}
.restaurant__output .restaurant__output__container .restaurant__output__action .output__action__container .button__icon {
  margin-left: 2rem;
}

.restaurant__purchase__nav {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 1.5rem;
  background: #fff;
}
.restaurant__purchase__nav .purchase__nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.restaurant__purchase__nav .purchase__nav__list .purchase__nav__item {
  position: relative;
  padding: 0.5rem;
  margin: 0 1.5rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-small);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .restaurant__purchase__nav .purchase__nav__list .purchase__nav__item {
    margin: 0 2rem;
  }
}
.restaurant__purchase__nav .purchase__nav__list .purchase__nav__item.open {
  border-color: #D79F38;
  color: #D79F38;
}
.restaurant__purchase__nav .purchase__nav__list .purchase__nav__item.open .purchase__nav__number {
  background: #D79F38;
}
.restaurant__purchase__nav .purchase__nav__list .purchase__nav__item.closed {
  border-color: green;
  color: green;
}
.restaurant__purchase__nav .purchase__nav__list .purchase__nav__item.closed .purchase__nav__number {
  background: green;
}
.restaurant__purchase__nav .purchase__nav__list .purchase__nav__item .purchase__nav__number {
  position: absolute;
  right: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  padding: 0.2rem 1rem;
  transform: translate(50%, -50%);
  font-size: var(--font-little);
  color: #fff;
  background: var(--text-1-color);
}

.restaurant__purchase__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.restaurant__purchase__item.active .purchase__item__container {
  background: #eee;
}
.restaurant__purchase__item .purchase__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  cursor: pointer;
}
.restaurant__purchase__item .purchase__item__header:hover {
  opacity: 0.7;
}
.restaurant__purchase__item .purchase__item__header.open {
  background: #D79F38;
}
.restaurant__purchase__item .purchase__item__header.closed {
  background: green;
}
.restaurant__purchase__item .purchase__item__header .item__header__code {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: #fff;
}
.restaurant__purchase__item .purchase__item__header .item__header__code .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.restaurant__purchase__item .purchase__item__header .icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #fff;
}
.restaurant__purchase__item .purchase__item__container {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.restaurant__purchase__item .purchase__item__container .purchase__item__date {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__purchase__item .purchase__item__container .purchase__item__review {
  margin-top: 0.5rem;
}
.restaurant__purchase__item .purchase__item__container .purchase__item__review .item__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
}
.restaurant__purchase__item .purchase__item__container .purchase__item__review .item__review__item .item__review__key, .restaurant__purchase__item .purchase__item__container .purchase__item__review .item__review__item .item__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__purchase__item .purchase__item__container .purchase__item__review .item__review__item .item__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__purchase__item .purchase__item__container .purchase__item__review .item__review__item .item__review__value {
  margin-left: 0.5rem;
  min-width: 5rem;
  text-align: right;
}

.restaurant__purchase__list .purchase__list__container .purchase__list__date {
  position: sticky;
  z-index: 1;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1rem 0.2rem;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .restaurant__purchase__list .purchase__list__container .purchase__list__date {
    top: 0;
  }
}
.restaurant__purchase__list .purchase__list__container .purchase__list__date .list__date__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.restaurant__purchase__list .purchase__list__container .purchase__list__date .list__date__item .list__date__label {
  display: flex;
  align-items: center;
}
.restaurant__purchase__list .purchase__list__container .purchase__list__date .list__date__item .list__date__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__purchase__list .purchase__list__container .purchase__list__date .list__date__item .list__date__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.restaurant__purchase__list .purchase__list__container .purchase__list__listing {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.purchase__new__productForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.purchase__new__productForm .new__productForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.purchase__new__productForm .new__productForm__container .new__productForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.purchase__new__productForm .new__productForm__container .new__productForm__header .new__productForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.purchase__new__productForm .new__productForm__container .new__productForm__header .new__productForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.purchase__new__productForm .new__productForm__container .new__productForm__header .new__productForm__exit:hover {
  background: #ddd;
}
.purchase__new__productForm .new__productForm__container .new__productForm__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.purchase__new__productForm .new__productForm__container .new__productForm__info .new__productForm__row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  cursor: pointer;
}
.purchase__new__productForm .new__productForm__container .new__productForm__info .new__productForm__row input[type=checkbox] {
  margin-right: 0.5rem;
}
.purchase__new__productForm .new__productForm__container .new__productForm__info .new__productForm__row {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.purchase__new__productForm .new__productForm__container .new__productForm__info .new__productForm__row.disabled {
  opacity: 0.6;
  cursor: initial;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row {
  display: flex;
  align-items: center;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName.add-currency {
  font-weight: 600;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .new__footer__unitName .icon {
  margin: 0 0.2rem;
  color: var(--text-2-color);
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  cursor: pointer;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__row .icon:hover {
  background: #eee;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.purchase__new__productForm .new__productForm__container .new__productForm__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.purchase__new__product {
  margin-top: 0.5rem;
}
.purchase__new__product .new__product__header {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
}
.purchase__new__product .new__product__header.padding {
  padding: 0.5rem;
}
.purchase__new__product .new__product__header .product__header__description,
.purchase__new__product .new__product__header .product__header__cost,
.purchase__new__product .new__product__header .product__header__quantity {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  overflow: hidden;
}
.purchase__new__product .new__product__header .product__header__cost,
.purchase__new__product .new__product__header .product__header__quantity {
  justify-content: center;
  margin-left: 0.5rem;
  overflow: hidden;
}
.purchase__new__product .new__product__header .product__header__cost {
  min-width: 5rem;
}
.purchase__new__product .new__product__header .product__header__quantity {
  min-width: 3rem;
}
.purchase__new__product .new__product__header .product__header__quantity.price {
  justify-content: end;
}
.purchase__new__product .line {
  display: flex;
  margin-top: 0.5rem;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.purchase__new__product .new__product__list {
  margin-top: 0.5rem;
}
.purchase__new__product .new__product__list .new__product__item {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  align-items: center;
  margin-bottom: 1rem;
}
.purchase__new__product .new__product__list .new__product__item.padding {
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.purchase__new__product .new__product__list .new__product__item.selected {
  background: #ddd;
}
.purchase__new__product .new__product__list .new__product__item .product__item__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.purchase__new__product .new__product__list .new__product__item .product__item__cost,
.purchase__new__product .new__product__list .new__product__item .product__item__quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.purchase__new__product .new__product__list .new__product__item .product__item__cost {
  min-width: 5rem;
}
.purchase__new__product .new__product__list .new__product__item .product__item__quantity {
  min-width: 3rem;
}
.purchase__new__product .new__product__list .new__product__item .product__item__quantity.price {
  justify-content: end;
}

.purchase__new__account {
  margin-top: 1.5rem;
}
.purchase__new__account .new__account__list .new__account__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.purchase__new__account .new__account__list .new__account__item.padding {
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.purchase__new__account .new__account__list .new__account__item.selected {
  background: #ddd;
}
.purchase__new__account .new__account__list .new__account__item .account__item__name {
  display: flex;
  margin-right: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}
.purchase__new__account .new__account__list .new__account__item .account__item__amount {
  display: flex;
  align-items: center;
  justify-content: end;
  min-width: 5rem;
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  overflow: hidden;
}

.restaurant__purchase__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__purchase__new .purchase__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 90vh;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__purchase__new .purchase__new__container .purchase__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__header .purchase__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__header .purchase__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__header .purchase__new__exit:hover {
  background: #ddd;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info {
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__note {
  margin-bottom: 2rem;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__addProduct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  cursor: pointer;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__addProduct.account {
  margin-top: 3rem;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__addProduct .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__addProduct span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__addProduct span .icon {
  margin-right: 0.5rem;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__review {
  margin-top: 1.5rem;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__review .new__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__review .new__review__item .new__review__key, .restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__review .new__review__item .new__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__review .new__review__item .new__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__info .purchase__new__review .new__review__item .new__review__value {
  margin-left: 0.5rem;
  min-width: 5rem;
  text-align: right;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__purchase__new .purchase__new__container .purchase__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__purchase__new .purchase__new__container .purchase__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__purchase__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__purchase__detail .purchase__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__header .purchase__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__header .purchase__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__header .purchase__detail__exit:hover {
  background: #ddd;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__code {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__code .detail__info__open {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__code .detail__info__open.open {
  background: #D79F38;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__code .detail__info__open.close {
  background: green;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__new__product {
  margin-top: 1.5rem;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__review {
  margin-top: 1.5rem;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__review .info__review__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__review .info__review__item .info__review__key, .restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__review .info__review__item .info__review__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__review .info__review__item .info__review__key {
  margin-left: auto;
  text-transform: uppercase;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__info .detail__info__review .info__review__item .info__review__value {
  margin-left: 0.5rem;
  min-width: 5rem;
  text-align: right;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action .detail__footer__icons .icon.icon-setting {
  margin-left: 2rem;
}
.restaurant__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__purchase__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__purchase__delete .purchase__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__header .purchase__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__header .purchase__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__header .purchase__delete__exit:hover {
  background: #ddd;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__purchase__delete .purchase__delete__container .purchase__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__purchase__approve {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__purchase__approve .purchase__approve__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__header .purchase__approve__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__header .purchase__approve__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__header .purchase__approve__exit:hover {
  background: #ddd;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__info .approve__info__text {
  display: inline-block;
  width: 100%;
  margin: 2rem 0 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__footer .approve__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__purchase__approve .purchase__approve__container .purchase__approve__footer .approve__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__purchase .restaurant__purchase__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__purchase .restaurant__purchase__container {
    padding-left: 1rem;
  }
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header .purchase__header__row {
  display: flex;
  align-items: center;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header .purchase__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header .purchase__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header .purchase__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header .purchase__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__header .purchase__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__action .purchase__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__action .purchase__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__action .purchase__action__container {
  display: flex;
  align-items: center;
}
.restaurant__purchase .restaurant__purchase__container .restaurant__purchase__action .purchase__action__container .button__icon {
  margin-left: 2rem;
}

.catalogue__product__department {
  position: sticky;
  top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0;
  background: #fff;
}
.catalogue__product__department .product__department__header {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-template-rows: auto;
  grid-auto-flow: column;
  justify-content: center;
  margin: 0.5rem 0;
}
.catalogue__product__department .product__department__header .product__department__nav {
  padding: 0.5rem;
  margin: 0 0.5rem;
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: var(--font-normal);
  cursor: pointer;
}
@media screen and (min-width: 360px) {
  .catalogue__product__department .product__department__header .product__department__nav {
    margin: 0 1rem;
  }
}
@media screen and (min-width: 768px) {
  .catalogue__product__department .product__department__header .product__department__nav {
    margin: 0 2rem;
  }
}
.catalogue__product__department .product__department__header .product__department__nav.active {
  border-color: #D79F38;
  color: #D79F38;
}

.product__group__aside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.product__group__aside.display {
  right: 0;
}
.product__group__aside .group__aside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100vh;
  padding: 1rem;
  background: #fff;
  overflow: auto;
}
.product__group__aside .group__aside__container .group__aside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product__group__aside .group__aside__container .group__aside__header .group__aside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.product__group__aside .group__aside__container .group__aside__header .group__aside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.product__group__aside .group__aside__container .group__aside__header .group__aside__exit:hover {
  background: #ddd;
}
.product__group__aside .group__aside__container .group__aside__list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  overflow: auto;
}
.product__group__aside .group__aside__container .group__aside__list .group__aside__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.product__group__aside .group__aside__container .group__aside__list .group__aside__item:hover {
  background: #eee;
}
.product__group__aside .group__aside__container .group__aside__list .group__aside__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  flex: none;
  color: var(--text-2-color);
}
.product__group__aside .group__aside__container .group__aside__footer {
  padding: 1.5rem 0 1rem;
}
.product__group__aside .group__aside__container .group__aside__footer .group__aside__manage {
  display: flex;
  align-items: center;
  width: max-content;
  font-size: var(--font-small);
  color: var(--link-color);
  font-weight: 600;
}
.product__group__aside .group__aside__container .group__aside__footer .group__aside__manage .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.2rem;
}

.catalogue__product__item {
  display: flex;
  align-items: center;
  border-radius: 0.2rem;
  margin: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.catalogue__product__item:hover {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.catalogue__product__item.selected {
  background: #D79F38;
}
.catalogue__product__item.selected .product__item__info .product__item__name, .catalogue__product__item.selected .product__item__info .product__item__price {
  color: #fff;
}
.catalogue__product__item.selected .product__item__info .product__item__row .product__item__price {
  color: #fff;
}
.catalogue__product__item.selected .product__item__info .product__item__row .product__item__minimum .item__minimum__value {
  color: #fff;
}
.catalogue__product__item.selected .product__item__info .product__item__row .product__item__minimum .item__minimum__label {
  color: #fff;
}
.catalogue__product__item.selected .product__item__info .product__item__row .product__item__stock .item__stock__value {
  color: #fff;
}
.catalogue__product__item.selected .product__item__info .product__item__row .product__item__stock .item__stock__label {
  color: #fff;
}
@media screen and (min-width: 768px) {
  .catalogue__product__item:last-child {
    margin: 0.5rem;
  }
}
.catalogue__product__item .product__item__info {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.catalogue__product__item .product__item__info .product__item__name {
  display: flex;
  align-items: center;
  color: var(--text-1-color);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-normal);
}
.catalogue__product__item .product__item__info .product__item__name .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 0.2rem;
  flex: none;
}
.catalogue__product__item .product__item__info .product__item__name .icon.yellow {
  color: #abab05;
}
.catalogue__product__item .product__item__info .product__item__name .icon.red {
  color: #E05555;
}
.catalogue__product__item .product__item__info .product__item__row {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__price {
  margin-top: 0.4rem;
  font-size: var(--font-normal);
  color: var(--text-2-color);
  --font-currency: var(--font-small);
}
.catalogue__product__item .product__item__info .product__item__row .product__item__inventory {
  display: flex;
  justify-content: end;
  align-items: center;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__minimum, .catalogue__product__item .product__item__info .product__item__row .product__item__stock {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__minimum {
  margin: 0 0.5rem;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__minimum .item__minimum__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__product__item .product__item__info .product__item__row .product__item__minimum .item__minimum__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.catalogue__product__item .product__item__info .product__item__row .product__item__stock {
  margin-left: 1rem;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__stock .item__stock__value {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__stock .item__stock__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
  font-weight: 600;
}
.catalogue__product__item .product__item__info .product__item__row .product__item__combo {
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  font-size: var(--font-small);
  background: rgba(238, 238, 238, 0.9333333333);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.catalogue__product__list .product__list__container .product__list__groups {
  position: sticky;
  top: 7rem;
  display: flex;
  align-items: center;
  padding: 1.5rem 0.2rem 1rem;
  background: #fff;
}
.catalogue__product__list .product__list__container .product__list__groups .product__list__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  background: #eee;
}
.catalogue__product__list .product__list__container .product__list__groups .product__list__group:hover {
  background: #ddd;
}
.catalogue__product__list .product__list__container .product__list__groups .product__list__group .list__group__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.catalogue__product__list .product__list__container .product__list__groups .product__list__group .list__group__name {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.catalogue__product__list .product__list__container .product__list__listing {
  margin: 1rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0 0.2rem;
}

.catalogue__productDetail__basic {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.catalogue__productDetail__basic .productDetail__basic__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__name {
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__name .icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-1-color);
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__name .icon-link {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.2rem;
  color: #D79F38;
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__price {
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  --font-currency: var(--font-normal);
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__cost {
  display: flex;
  align-items: center;
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__cost span {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__cost span.profit {
  margin-left: 0.2rem;
}
.catalogue__productDetail__basic .productDetail__basic__info .productDetail__basic__cost .circle {
  margin: 0 0.5rem;
}
.catalogue__productDetail__basic .productDetail__basic__department {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.catalogue__productDetail__basic .productDetail__basic__department .icon {
  width: 1rem;
  height: 1rem;
  margin: 0 0.2rem;
  color: var(--text-2-color);
}
.catalogue__productDetail__basic .productDetail__basic__images {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.catalogue__productDetail__basic .productDetail__basic__images .productDetail__basic__image {
  width: 5rem;
  height: 5rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.catalogue__productDetail__basic .productDetail__basic__images .productDetail__basic__image img {
  border-radius: 0.2rem;
}

.catalogue__productDetail__tag {
  margin-top: 2rem;
}
.catalogue__productDetail__tag .productDetail__tag__label {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.catalogue__productDetail__tag .productDetail__tag__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.catalogue__productDetail__tag .productDetail__tag__container {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}
.catalogue__productDetail__tag .productDetail__tag__container .productDetail__tag__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.catalogue__productDetail__tag .productDetail__tag__container .productDetail__tag__item.active {
  background: #D79F38;
  color: #fff;
}

.catalogue__productDetail__technique {
  margin-top: 2rem;
}
.catalogue__productDetail__technique .productDetail__technique__label {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.catalogue__productDetail__technique .productDetail__technique__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.catalogue__productDetail__technique .productDetail__technique__container {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.catalogue__productDetail__technique .productDetail__technique__container .productDetail__technique__item {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.catalogue__productDetail__technique .productDetail__technique__container .productDetail__technique__item.active {
  background: #eee;
}
.catalogue__productDetail__technique .productDetail__technique__container .productDetail__technique__item .productDetail__technique__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 500;
}
.catalogue__productDetail__technique .productDetail__technique__container .productDetail__technique__item .productDetail__technique__stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 1rem;
}
.catalogue__productDetail__technique .productDetail__technique__container .productDetail__technique__item .productDetail__technique__stock .technique__stock__value {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.catalogue__productDetail__technique .productDetail__technique__container .productDetail__technique__item .productDetail__technique__stock .technique__stock__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
  font-weight: 600;
}

.catalogue__productDetail__variation {
  margin-top: 2rem;
}
.catalogue__productDetail__variation .productDetail__variation__label {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.catalogue__productDetail__variation .productDetail__variation__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.catalogue__productDetail__variation .productDetail__variation__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item {
  display: flex;
  flex-direction: column;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__name {
  margin-top: 1rem;
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 500;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option .productDetail__variation__value, .catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option .productDetail__variation__price {
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option .productDetail__variation__price {
  margin-top: 0.2rem;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option.active {
  background: #D79F38;
}
.catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option.active .productDetail__variation__value, .catalogue__productDetail__variation .productDetail__variation__container .productDetail__variation__item .productDetail__variation__options .productDetail__variation__option.active .productDetail__variation__price {
  color: #fff;
}

.catalogue__productDetail__store {
  margin-top: 2rem;
}
.catalogue__productDetail__store .productDetail__store__label {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.catalogue__productDetail__store .productDetail__store__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.catalogue__productDetail__store .productDetail__store__container {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item {
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item.active {
  background: #D79F38;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item.active .store__item__row .store__item__name {
  color: #fff;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item.active .store__item__row .store__item__minimum .item__minimum__value {
  color: #fff;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item.active .store__item__row .store__item__minimum .item__minimum__label {
  color: #fff;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item.active .store__item__stocks .store__item__stock .item__stock__value {
  color: #fff;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item.active .store__item__stocks .store__item__stock .item__stock__label {
  color: #fff;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__row .store__item__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__row .store__item__minimum {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 1rem;
  min-width: 3rem;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__row .store__item__minimum .item__minimum__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__row .store__item__minimum .item__minimum__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__stocks {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 0.5rem;
  overflow: auto;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__stocks .store__item__stock {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__stocks .store__item__stock .item__stock__value {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.catalogue__productDetail__store .productDetail__store__container .productDetail__store__item .store__item__stocks .store__item__stock .item__stock__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
  font-weight: 600;
}

.catalogue__productDetail__combo {
  margin-top: 2rem;
}
.catalogue__productDetail__combo .productDetail__combo__label {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.catalogue__productDetail__combo .productDetail__combo__label.margin {
  margin-top: 1rem;
}
.catalogue__productDetail__combo .productDetail__combo__label.onOrder {
  margin-top: 1rem;
  background: #D79F38;
  cursor: pointer;
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__label.onOrder .icon {
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-1-color);
}
.catalogue__productDetail__combo .productDetail__combo__container {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item {
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item.active {
  background: #D79F38;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item.active .combo__item__row .combo__item__name {
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item.active .combo__item__row .combo__item__minimum .item__minimum__value {
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item.active .combo__item__row .combo__item__minimum .item__minimum__label {
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item.active .combo__item__stocks .combo__item__stock .item__stock__value {
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item.active .combo__item__stocks .combo__item__stock .item__stock__label {
  color: #fff;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__row .combo__item__name {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__row .combo__item__minimum {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 1rem;
  min-width: 3rem;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__row .combo__item__minimum .item__minimum__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__row .combo__item__minimum .item__minimum__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__stocks {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 0.5rem;
  overflow: auto;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__stocks .combo__item__stock {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__stocks .combo__item__stock .item__stock__value {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.catalogue__productDetail__combo .productDetail__combo__container .productDetail__combo__item .combo__item__stocks .combo__item__stock .item__stock__label {
  font-size: var(--font-little);
  color: var(--text-2-color);
  font-weight: 600;
}

.catalogue__productDetail__description {
  margin-top: 2rem;
}
.catalogue__productDetail__description .productDetail__description__label {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  background: #eee;
  font-size: var(--font-small2);
  color: var(--text-1-color);
}
.catalogue__productDetail__description .productDetail__description__label .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.catalogue__productDetail__description .productDetail__description__container {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}
.catalogue__productDetail__description .productDetail__description__container .productDetail__description__item {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__productDetail__description .productDetail__description__container .productDetail__description__item .circle {
  margin-right: 0.5rem;
}

.catalogue__productDetail__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalogue__productDetail__price .productDetail__price__row {
  display: flex;
  align-items: center;
  justify-content: start;
}
.catalogue__productDetail__price .productDetail__price__row .productDetail__price__input {
  display: inline-block;
  height: 2.2rem;
  width: 6rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  border: 1px solid var(--border-color);
  margin-right: 0.2rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.catalogue__productDetail__price .productDetail__price__row .productDetail__price__input:focus {
  box-shadow: 0 0 3px 1px #D79F38;
  border: none;
}
.catalogue__productDetail__price .productDetail__price__row.discount {
  justify-content: end;
}
.catalogue__productDetail__price .productDetail__price__row.discount .productDetail__price__input {
  width: 5rem;
}
.catalogue__productDetail__price .productDetail__price__total {
  --font-currency: var(--font-small);
  margin-left: 0.5rem;
  font-size: var(--font-subtitle);
  font-weight: 500;
}

.catalogue__productDetail__action {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 0.5rem;
}
.catalogue__productDetail__action .productDetail__action__quantity {
  display: flex;
  align-items: center;
}
.catalogue__productDetail__action .productDetail__action__quantity .action__quantity__value {
  margin: 0 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.catalogue__productDetail__action .productDetail__action__quantity .btn-1 {
  padding: 0;
  height: 1.5rem;
  width: 1.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.catalogue__productDetail__action .productDetail__action__quantity .btn-1:hover {
  opacity: 0.8;
}
.catalogue__productDetail__action .productDetail__action__cart, .catalogue__productDetail__action .productDetail__action__delete {
  padding: 0.3;
  cursor: pointer;
}
.catalogue__productDetail__action .productDetail__action__cart:hover, .catalogue__productDetail__action .productDetail__action__delete:hover {
  background: #ddd;
}
.catalogue__productDetail__action .productDetail__action__cart {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 2rem;
  color: #D79F38;
}
.catalogue__productDetail__action .productDetail__action__note {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 2rem;
  color: var(--text-2-color);
}
.catalogue__productDetail__action .productDetail__action__note.active {
  color: #D79F38;
}
.catalogue__productDetail__action .productDetail__action__delete {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 2rem;
  color: var(--text-2-color);
}

.catalogue__productDetail__note {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__productDetail__note .productDetail__note__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__header .productDetail__note__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__header .productDetail__note__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__header .productDetail__note__exit:hover {
  background: #ddd;
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__productDetail__note .productDetail__note__container .productDetail__note__footer .note__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.catalogue__productDetail__comboForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  min-height: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__header .productDetail__comboForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__header .productDetail__comboForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__header .productDetail__comboForm__exit:hover {
  background: #ddd;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__info .productDetail__comboForm__row {
  display: flex;
  align-items: center;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__info .productDetail__comboForm__row .form__item {
  width: 100%;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__info .productDetail__comboForm__row .form__item:nth-child(2) {
  margin-left: 1rem;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__footer .comboForm__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__footer .comboForm__footer__action .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__footer .comboForm__footer__action .icon:hover {
  background: #eee;
}
.catalogue__productDetail__comboForm .productDetail__comboForm__container .productDetail__comboForm__footer .comboForm__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__catalogue__productDetail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: max-content;
  max-height: 90vh;
  min-height: 60vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__header .catalogue__productDetail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__header .catalogue__productDetail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__header .catalogue__productDetail__exit:hover {
  background: #ddd;
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__info {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow: auto;
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__footer .productDetail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__catalogue__productDetail .catalogue__productDetail__container .catalogue__productDetail__footer .productDetail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.product__new__steps {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  overflow: hidden;
}
.product__new__steps .new__steps__container {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-template-rows: auto;
  grid-auto-flow: column;
  justify-content: center;
  margin: 0.5rem 0;
}
.product__new__steps .new__steps__container .new__steps__item {
  padding: 0.5rem 0.5rem;
  margin: 0 0.5rem;
  border-radius: 0.3rem;
  box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.25);
  background: #fff;
  color: var(--text-1-color);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .product__new__steps .new__steps__container .new__steps__item {
    padding: 0.5rem 1rem;
  }
}
.product__new__steps .new__steps__container .new__steps__item:hover {
  background: #eee;
}
.product__new__steps .new__steps__container .new__steps__item.active {
  background: #D79F38;
  color: #fff;
}

.product__new__basic {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  overflow: auto;
}
.product__new__basic .new__basic__aliasOn, .product__new__basic .new__basic__onSale {
  display: flex;
  align-items: center;
  max-width: max-content;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.product__new__basic .new__basic__aliasOn input, .product__new__basic .new__basic__onSale input {
  margin-right: 0.5rem;
}
.product__new__basic .new__basic__aliasOn {
  margin-bottom: 1rem;
}
.product__new__basic .new__basic__aliasOn.checked {
  margin-bottom: 0;
}
.product__new__basic .search__aggregate__options {
  width: 100%;
  max-height: 7rem;
  overflow: auto;
}
.product__new__basic .new__basic__checkbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.product__new__basic .new__basic__checkbox .basic__checkbox__item {
  display: flex;
  align-items: center;
  margin-right: 2rem;
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.product__new__basic .new__basic__checkbox .basic__checkbox__item input[type=checkbox] {
  margin-right: 0.5rem;
}

.product__new__variation {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  overflow: auto;
}
.product__new__variation .new__variation__add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
  cursor: pointer;
}
.product__new__variation .new__variation__add .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.product__new__variation .new__variation__add span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.product__new__variation .new__variation__add span .icon {
  margin-right: 0.5rem;
}
.product__new__variation .new__variation__item {
  margin-bottom: 1rem;
}
.product__new__variation .new__variation__item .new__variation__inputs {
  display: flex;
  align-items: center;
}
.product__new__variation .new__variation__item .new__variation__inputs .form__item {
  margin-right: 0.5rem;
  margin-bottom: 0;
  width: 100%;
}
.product__new__variation .new__variation__item .new__variation__row {
  display: grid;
  grid-template-columns: 1fr max-content;
  margin-top: 0.5rem;
}
.product__new__variation .new__variation__item .new__variation__row .btn-2 {
  width: 1.7rem;
  height: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-right: 0.5rem;
}
.product__new__variation .new__variation__item .new__variation__row .new__variation__units {
  display: flex;
  flex-wrap: wrap;
}
.product__new__variation .new__variation__item .new__variation__row .new__variation__units .new__variation__unit {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.product__new__variation .new__variation__item .new__variation__row .new__variation__units .new__variation__unit:hover {
  background: #ddd;
}
.product__new__variation .new__variation__item .new__variation__row .new__variation__units .new__variation__unit input {
  margin-right: 0.2rem;
  cursor: pointer;
}

.product__new__inventory {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  overflow: auto;
}
.product__new__inventory .new__inventory__add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
}
.product__new__inventory .new__inventory__add .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.product__new__inventory .new__inventory__add span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.product__new__inventory .new__inventory__add span .icon {
  margin-right: 0.5rem;
}
.product__new__inventory .new__inventory__unitName {
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr 0.5fr auto;
  grid-template-rows: max-content;
  align-items: center;
}
.product__new__inventory .new__inventory__unitName .form__item {
  margin-right: 0.5rem;
  margin-bottom: 0;
}
.product__new__inventory .new__inventory__unitName .btn-2 {
  width: 1.8rem;
  height: 1.5rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
}
.product__new__inventory .new__inventory__store {
  margin-bottom: 1rem;
}
.product__new__inventory .new__inventory__store .inventory__store__row {
  display: flex;
  align-items: center;
}
.product__new__inventory .new__inventory__store .inventory__store__row .btn-2 {
  width: 1.8rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  flex: none;
}

.product__new__combo {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  overflow: auto;
}
.product__new__combo .new__combo__add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
  cursor: pointer;
}
.product__new__combo .new__combo__add .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.product__new__combo .new__combo__add span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.product__new__combo .new__combo__add span .icon {
  margin-right: 0.5rem;
}
.product__new__combo .new__combo__item {
  margin-bottom: 1rem;
}
.product__new__combo .new__combo__item .new__combo__row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.product__new__combo .new__combo__item .new__combo__row .form__item {
  margin-right: 0.5rem;
  margin-bottom: 0;
  width: 100%;
}
.product__new__combo .new__combo__item .new__combo__row .btn-2 {
  width: 1.7rem;
  height: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-right: 0.5rem;
  margin-top: 1rem;
}
.product__new__combo .new__combo__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 0.2rem;
  background: #eee;
}
.product__new__combo .new__combo__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}

.catalogue__product__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__product__new .product__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 40rem;
  min-height: 90vh;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__product__new .product__new__container .product__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__product__new .product__new__container .product__new__header .product__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__product__new .product__new__container .product__new__header .product__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__product__new .product__new__container .product__new__header .product__new__exit:hover {
  background: #ddd;
}
.catalogue__product__new .product__new__container .product__new__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__product__new .product__new__container .product__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__product__new .product__new__container .product__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalogue__product__new .product__new__container .product__new__footer .new__footer__action .footer__action__buttons {
  display: flex;
}
.catalogue__product__new .product__new__container .product__new__footer .new__footer__action .footer__action__buttons .footer__action__saveBtn {
  margin-left: 2rem;
  font-weight: 600;
}
.catalogue__product__new .product__new__container .product__new__footer .new__footer__action .footer__action__buttons .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.catalogue__product__inForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__product__inForm .product__inForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__product__inForm .product__inForm__container .product__inForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__header .product__inForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__header .product__inForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__header .product__inForm__exit:hover {
  background: #ddd;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__info .productForm__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.catalogue__product__inForm .product__inForm__container .product__inForm__info .productForm__info__types .productForm__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__product__inForm .product__inForm__container .product__inForm__info .productForm__info__types .productForm__info__type.active {
  background: #D79F38;
  color: #fff;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__info .productForm__info__types .productForm__info__type.in {
  border-radius: 2rem 0 0 2rem;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__info .productForm__info__types .productForm__info__type.out {
  border-radius: 0 2rem 2rem 0;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action .footer__action__row {
  display: flex;
  align-items: center;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action .footer__action__row .footer__action__unitName {
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action .footer__action__row .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action .footer__action__row .icon:hover {
  background: #eee;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.catalogue__product__inForm .product__inForm__container .product__inForm__footer .inForm__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.catalogue__product__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__product__delete .product__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__product__delete .product__delete__container .product__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__product__delete .product__delete__container .product__delete__header .product__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__product__delete .product__delete__container .product__delete__header .product__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__product__delete .product__delete__container .product__delete__header .product__delete__exit:hover {
  background: #ddd;
}
.catalogue__product__delete .product__delete__container .product__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__product__delete .product__delete__container .product__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.catalogue__product__delete .product__delete__container .product__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.catalogue__product__delete .product__delete__container .product__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.catalogue__product__delete .product__delete__container .product__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.catalogue__product__delete .product__delete__container .product__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__product__delete .product__delete__container .product__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.catalogue__product__delete .product__delete__container .product__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.product__public__keyword {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
}
.product__public__keyword .public__keyword__add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  cursor: pointer;
}
.product__public__keyword .public__keyword__add .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.product__public__keyword .public__keyword__add span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.product__public__keyword .public__keyword__add span .icon {
  margin-right: 0.5rem;
}
.product__public__keyword .public__keyword__item {
  display: flex;
  align-items: center;
}
.product__public__keyword .public__keyword__item .form__item {
  margin-right: 0.5rem;
  width: 100%;
}
.product__public__keyword .public__keyword__item .btn-2 {
  width: 1.8rem;
  height: 1.5rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
}

.product__public__image {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
}
.product__public__image .public__image__add {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
  cursor: pointer;
}
.product__public__image .public__image__add .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.product__public__image .public__image__add span {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.product__public__image .public__image__add span .icon {
  margin-right: 0.5rem;
}
.product__public__image .public__image__list {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .product__public__image .public__image__list {
    grid-template-columns: 1fr 1fr;
  }
}
.product__public__image .public__image__list .public__image__item {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
}
.product__public__image .public__image__list .public__image__item .form__image .form__image__container {
  width: 7rem;
  height: 7rem;
  border-radius: 0.3rem;
}
.product__public__image .public__image__list .public__image__item .form__image .form__image__container img {
  height: 100%;
  width: 100%;
  border-radius: 0.3rem;
}
.product__public__image .public__image__list .public__image__item .form__image .form__image__container .form__image__input label {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.product__public__image .public__image__list .public__image__item .form__image .form__image__container .form__image__input label .icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: var(--text-2-color);
  cursor: pointer;
}
.product__public__image .public__image__list .public__image__item .btn-2 {
  width: 2rem;
  height: 1.7rem;
  display: flex;
  margin-top: 1rem;
  padding: 0;
  justify-content: center;
  align-items: center;
}
.product__public__image .public__image__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.product__public__image .public__image__info .public__image__text {
  font-size: var(--font-little);
  color: var(--text-2-color);
}

.catalogue__product__public {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__product__public .product__public__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 40rem;
  min-height: 90vh;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__product__public .product__public__container .product__public__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__product__public .product__public__container .product__public__header .product__public__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__product__public .product__public__container .product__public__header .product__public__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__product__public .product__public__container .product__public__header .product__public__exit:hover {
  background: #ddd;
}
.catalogue__product__public .product__public__container .product__public__info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__product__public .product__public__container .product__public__info .product__public__checkbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.catalogue__product__public .product__public__container .product__public__info .product__public__checkbox .public__checkbox__item {
  display: flex;
  align-items: center;
  margin-right: 2rem;
  margin-bottom: 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.catalogue__product__public .product__public__container .product__public__info .product__public__checkbox .public__checkbox__item input[type=checkbox] {
  margin-right: 0.5rem;
}
.catalogue__product__public .product__public__container .product__public__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__product__public .product__public__container .product__public__footer .public__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.catalogue__product__public .product__public__container .product__public__footer .public__footer__action .btn-1 {
  font-weight: 600;
}
.catalogue__product__public .product__public__container .product__public__footer .public__footer__action .btn-1:disabled {
  opacity: 0.6;
  cursor: initial;
}

.catalogue__product__importForm {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__product__importForm .product__importForm__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__product__importForm .product__importForm__container .product__importForm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__header .product__importForm__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__header .product__importForm__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__header .product__importForm__exit:hover {
  background: #ddd;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20rem;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info .importForm__info__file {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info .importForm__info__file .icon {
  width: 5rem;
  height: 5rem;
  margin-bottom: 0.5rem;
  opacity: 0.6;
  cursor: pointer;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info .importForm__info__file .importForm__info__text {
  color: var(--text-2-color);
  font-size: var(--font-small);
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info .importForm__info__file .importForm__info__text.review {
  color: #D79F38;
  font-weight: 600;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info .importForm__info__file .importForm__info__text.error {
  color: #E05555;
  font-weight: 600;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__info .importForm__info__file input[type=file] {
  display: none;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__product__importForm .product__importForm__container .product__importForm__footer .importForm__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__footer .importForm__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.catalogue__product__importForm .product__importForm__container .product__importForm__footer .importForm__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__catalogue__product .catalogue__product__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__catalogue__product .catalogue__product__container {
    padding-left: 1rem;
  }
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header .product__header__row {
  display: flex;
  align-items: center;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header .product__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header .product__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header .product__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header .product__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__header .product__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action .product__action__pos {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action .product__action__pos .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action .product__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action .product__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action .product__action__container {
  display: flex;
  align-items: center;
}
.restaurant__catalogue__product .catalogue__product__container .catalogue__product__action .product__action__container .button__icon {
  margin-left: 2rem;
}

.catalogue__department__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__department__new .department__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__department__new .department__new__container .department__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__department__new .department__new__container .department__new__header .department__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__department__new .department__new__container .department__new__header .department__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__department__new .department__new__container .department__new__header .department__new__exit:hover {
  background: #ddd;
}
.catalogue__department__new .department__new__container .department__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__department__new .department__new__container .department__new__info .new__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.catalogue__department__new .department__new__container .department__new__info .new__info__types .new__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.catalogue__department__new .department__new__container .department__new__info .new__info__types .new__info__type.active {
  background: #D79F38;
  color: #fff;
}
.catalogue__department__new .department__new__container .department__new__info .new__info__types .new__info__type.department {
  border-radius: 2rem 0 0 2rem;
}
.catalogue__department__new .department__new__container .department__new__info .new__info__types .new__info__type.group {
  border-radius: 0 2rem 2rem 0;
}
.catalogue__department__new .department__new__container .department__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__department__new .department__new__container .department__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.product__department__item {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.product__department__item.selected {
  background: #D79F38;
}
.product__department__item.selected .department__item__basic .department__item__data .department__item__name {
  color: #fff;
}
.product__department__item.selected .department__item__basic .department__item__data .department__item__buttons .icon {
  color: #fff;
}
.product__department__item.selected .department__item__basic .department__item__products {
  color: #fff;
}
.product__department__item.selected .department__item__groups .form__item .form__input {
  color: #fff;
}
.product__department__item.selected .department__item__groups .department__item__group .item__group__name {
  color: #fff;
}
.product__department__item.selected .department__item__groups .department__item__group .item__group__name::before {
  background: #fff;
}
.product__department__item.selected .department__item__groups .department__item__group .icon {
  color: #fff;
}
.product__department__item .department__item__basic {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}
.product__department__item .department__item__basic .department__item__data {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product__department__item .department__item__basic .department__item__data .department__item__name {
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.product__department__item .department__item__basic .department__item__data .department__item__buttons {
  display: flex;
  gap: 1.5rem;
}
.product__department__item .department__item__basic .department__item__data .department__item__buttons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-1-color);
  cursor: pointer;
}
.product__department__item .department__item__basic .department__item__data .department__item__buttons .icon:hover {
  background: #ddd;
}
.product__department__item .department__item__basic .department__item__products {
  font-size: 0.82rem;
  color: var(--text-2-color);
}
.product__department__item .department__item__groups {
  margin: 0.5rem 0;
}
.product__department__item .department__item__groups .form__item {
  margin-bottom: 0;
}
.product__department__item .department__item__groups .form__item .form__input {
  height: 1.6rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.product__department__item .department__item__groups .form__item .form__error {
  font-size: var(--font-small);
}
.product__department__item .department__item__groups .department__item__group {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}
.product__department__item .department__item__groups .department__item__group .item__group__name {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.product__department__item .department__item__groups .department__item__group .item__group__name::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}
.product__department__item .department__item__groups .department__item__group .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-1-color);
  cursor: pointer;
}
.product__department__item .department__item__groups .department__item__group .icon:hover {
  background: #ddd;
}
.product__department__item .department__item__action {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.product__department__item .department__item__action .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.product__department__item .department__item__action .btn:hover {
  background: #ddd;
}
.product__department__item .department__item__action .btn.add {
  padding: 0 0.5rem;
  font-size: 1.2rem;
}
.product__department__item .department__item__action .btn.cancel {
  margin-right: auto;
  padding: 0 0.7rem;
  font-size: 1.2rem;
}
.product__department__item .department__item__action .btn.save {
  padding: 0.3rem 0.5rem;
  font-size: var(--font-small);
}

.catalogue__department__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  grid-template-rows: auto;
  margin-top: 0.5rem;
  padding: 0 0.5rem 2rem;
}

.catalogue__department__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.catalogue__department__delete .department__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.catalogue__department__delete .department__delete__container .department__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.catalogue__department__delete .department__delete__container .department__delete__header .department__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.catalogue__department__delete .department__delete__container .department__delete__header .department__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.catalogue__department__delete .department__delete__container .department__delete__header .department__delete__exit:hover {
  background: #ddd;
}
.catalogue__department__delete .department__delete__container .department__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.catalogue__department__delete .department__delete__container .department__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.catalogue__department__delete .department__delete__container .department__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.catalogue__department__delete .department__delete__container .department__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.catalogue__department__delete .department__delete__container .department__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.catalogue__department__delete .department__delete__container .department__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.catalogue__department__delete .department__delete__container .department__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.catalogue__department__delete .department__delete__container .department__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__catalogue__department .catalogue__department__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__catalogue__department .catalogue__department__container {
    padding-left: 1rem;
  }
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row {
  display: flex;
  align-items: center;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  margin-right: 1rem;
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__header .department__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__action .department__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__action .department__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__action .department__action__container {
  display: flex;
  align-items: center;
}
.restaurant__catalogue__department .catalogue__department__container .catalogue__department__action .department__action__container .button__icon {
  margin-left: 2rem;
}

.store__new__users {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.store__new__users .new__users__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.store__new__users .new__users__list {
  margin-top: 0.5rem;
}
.store__new__users .new__users__list .new__users__item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  width: max-content;
  font-size: var(--font-small);
  color: var(--text-2-color);
  cursor: pointer;
}
.store__new__users .new__users__list .new__users__item:hover {
  background: #eee;
}
.store__new__users .new__users__list .new__users__item.active {
  color: green;
}
.store__new__users .new__users__list .new__users__item .icon {
  flex: none;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: green;
}
.store__new__users .new__users__list .new__users__item .box {
  flex: none;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.restaurant__store__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__store__new .store__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__store__new .store__new__container .store__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__store__new .store__new__container .store__new__header .store__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__store__new .store__new__container .store__new__header .store__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__store__new .store__new__container .store__new__header .store__new__exit:hover {
  background: #ddd;
}
.restaurant__store__new .store__new__container .store__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__store__new .store__new__container .store__new__info .new__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  min-height: 20rem;
  background: #eee;
}
.restaurant__store__new .store__new__container .store__new__info .new__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__store__new .store__new__container .store__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__store__new .store__new__container .store__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__store__new .store__new__container .store__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__store__new .store__new__container .store__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__store__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.restaurant__store__item .store__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  background: #ddd;
  cursor: pointer;
}
.restaurant__store__item .store__item__header:hover {
  opacity: 0.7;
}
.restaurant__store__item .store__item__header .store__item__name {
  display: flex;
  align-items: center;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__store__item .store__item__header .store__item__name .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.restaurant__store__item .store__item__container {
  padding: 0.5rem;
}
.restaurant__store__item .store__item__container .store__item__label {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: var(--font-small2);
  color: var(--text-2-color);
}
.restaurant__store__item .store__item__container .store__item__users {
  padding-left: 0.5rem;
}
.restaurant__store__item .store__item__container .store__item__users .store__item__user {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__store__item .store__item__container .store__item__users .store__item__user::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.restaurant__store__list {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.restaurant__store__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__store__detail .store__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__store__detail .store__detail__container .store__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__store__detail .store__detail__container .store__detail__header .store__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__store__detail .store__detail__container .store__detail__header .store__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__store__detail .store__detail__container .store__detail__header .store__detail__exit:hover {
  background: #ddd;
}
.restaurant__store__detail .store__detail__container .store__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__name {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__description {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__users {
  margin-top: 1rem;
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__users .detail__users__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__users .detail__users__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__users .detail__users__list .detail__users__item {
  padding: 0.5rem 0;
  white-space: nowrap;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__store__detail .store__detail__container .store__detail__info .store__detail__users .detail__users__list .detail__users__item::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}
.restaurant__store__detail .store__detail__container .store__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__store__detail .store__detail__container .store__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__store__detail .store__detail__container .store__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__store__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__store__delete .store__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__store__delete .store__delete__container .store__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__store__delete .store__delete__container .store__delete__header .store__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__store__delete .store__delete__container .store__delete__header .store__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__store__delete .store__delete__container .store__delete__header .store__delete__exit:hover {
  background: #ddd;
}
.restaurant__store__delete .store__delete__container .store__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__store__delete .store__delete__container .store__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__store__delete .store__delete__container .store__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.restaurant__store__delete .store__delete__container .store__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.restaurant__store__delete .store__delete__container .store__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__store__delete .store__delete__container .store__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__store__delete .store__delete__container .store__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__store__delete .store__delete__container .store__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__store .restaurant__store__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__store .restaurant__store__container {
    padding-left: 1rem;
  }
}
.restaurant__store .restaurant__store__container .restaurant__store__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__store .restaurant__store__container .restaurant__store__header .store__header__row {
  display: flex;
  align-items: center;
}
.restaurant__store .restaurant__store__container .restaurant__store__header .store__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__store .restaurant__store__container .restaurant__store__header .store__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__store .restaurant__store__container .restaurant__store__header .store__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__store .restaurant__store__container .restaurant__store__header .store__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__store .restaurant__store__container .restaurant__store__header .store__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__store .restaurant__store__container .restaurant__store__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__store .restaurant__store__container .restaurant__store__action .store__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
}
.restaurant__store .restaurant__store__container .restaurant__store__action .store__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__store .restaurant__store__container .restaurant__store__action .store__action__container {
  display: flex;
  align-items: center;
}

.client__contact__levelAside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.client__contact__levelAside.display {
  right: 0;
}
.client__contact__levelAside .contact__levelAside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100vh;
  padding: 1rem;
  background: #fff;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit:hover {
  background: #ddd;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  overflow: auto;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item:hover {
  background: #eee;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  flex: none;
  color: var(--text-2-color);
}

.client__contact__item {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  cursor: pointer;
}
.client__contact__item:hover {
  background: #eee;
}
.client__contact__item.selected {
  background: #D79F38;
}
.client__contact__item.selected .contact__item__icon {
  color: #fff;
}
.client__contact__item.selected .contact__item__info .contact__item__name, .client__contact__item.selected .contact__item__info .contact__item__phone, .client__contact__item.selected .contact__item__info .contact__item__debt {
  color: #fff;
}
.client__contact__item .contact__item__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
  color: var(--text-1-color);
}
.client__contact__item .contact__item__info {
  display: flex;
  flex-direction: column;
}
.client__contact__item .contact__item__info .contact__item__name {
  margin-bottom: 0.3rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.client__contact__item .contact__item__info .contact__item__phone {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.client__contact__item .contact__item__info .contact__item__debt {
  margin-top: 0.5rem;
  font-size: var(--font-small);
  font-weight: 600;
  color: #E05555;
}

.client__contact__list .contact__list__container .contact__list__levels {
  position: sticky;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1.5rem 0.2rem 1rem;
  background: #fff;
}
.client__contact__list .contact__list__container .contact__list__levels .contact__list__level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  background: #eee;
}
.client__contact__list .contact__list__container .contact__list__levels .contact__list__level:hover {
  background: #ddd;
}
.client__contact__list .contact__list__container .contact__list__levels .contact__list__level .list__level__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.client__contact__list .contact__list__container .contact__list__levels .contact__list__level .list__level__name {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.client__contact__list .contact__list__container .contact__list__listing {
  margin: 1rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0 0.2rem;
}

.client__contact__levelAside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.client__contact__levelAside.display {
  right: 0;
}
.client__contact__levelAside .contact__levelAside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100vh;
  padding: 1rem;
  background: #fff;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit:hover {
  background: #ddd;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  overflow: auto;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item:hover {
  background: #eee;
}
.client__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  flex: none;
  color: var(--text-2-color);
}

.client__contact__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.client__contact__new .contact__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.client__contact__new .contact__new__container .contact__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.client__contact__new .contact__new__container .contact__new__header .contact__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.client__contact__new .contact__new__container .contact__new__header .contact__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.client__contact__new .contact__new__container .contact__new__header .contact__new__exit:hover {
  background: #ddd;
}
.client__contact__new .contact__new__container .contact__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.client__contact__new .contact__new__container .contact__new__info .new__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.client__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.client__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type.active {
  background: #D79F38;
  color: #fff;
}
.client__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type.persone {
  border-radius: 2rem 0 0 2rem;
}
.client__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type.enterprise {
  border-radius: 0 2rem 2rem 0;
}
.client__contact__new .contact__new__container .contact__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.client__contact__new .contact__new__container .contact__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.client__contact__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.client__contact__delete .contact__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.client__contact__delete .contact__delete__container .contact__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.client__contact__delete .contact__delete__container .contact__delete__header .contact__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.client__contact__delete .contact__delete__container .contact__delete__header .contact__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.client__contact__delete .contact__delete__container .contact__delete__header .contact__delete__exit:hover {
  background: #ddd;
}
.client__contact__delete .contact__delete__container .contact__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.client__contact__delete .contact__delete__container .contact__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.client__contact__delete .contact__delete__container .contact__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.client__contact__delete .contact__delete__container .contact__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.client__contact__delete .contact__delete__container .contact__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.client__contact__delete .contact__delete__container .contact__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.client__contact__delete .contact__delete__container .contact__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.client__contact__delete .contact__delete__container .contact__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.contact__detail__invoice .detail__invoice__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.contact__detail__invoice .detail__invoice__summary {
  margin-top: 0.5rem;
}
.contact__detail__invoice .detail__invoice__summary .invoice__summary__item {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 0.7rem;
}
.contact__detail__invoice .detail__invoice__summary .invoice__summary__item .invoice__summary__key, .contact__detail__invoice .detail__invoice__summary .invoice__summary__item .invoice__summary__value {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.contact__detail__invoice .detail__invoice__summary .invoice__summary__item .invoice__summary__key {
  margin-left: auto;
  text-transform: uppercase;
}
.contact__detail__invoice .detail__invoice__summary .invoice__summary__item .invoice__summary__value {
  margin-left: 1rem;
  min-width: 5rem;
  text-align: right;
}
.contact__detail__invoice .loader__container {
  margin-top: 1.5rem;
}
.contact__detail__invoice .restaurant__invoice__list .invoice__list__container .invoice__list__date {
  position: initial;
}

.client__contact__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.client__contact__detail .contact__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.client__contact__detail .contact__detail__container .contact__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.client__contact__detail .contact__detail__container .contact__detail__header .contact__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.client__contact__detail .contact__detail__container .contact__detail__header .contact__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.client__contact__detail .contact__detail__container .contact__detail__header .contact__detail__exit:hover {
  background: #ddd;
}
.client__contact__detail .contact__detail__container .contact__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.client__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic {
  display: flex;
  flex-direction: column;
}
.client__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__name {
  margin-bottom: 1rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.client__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__contactName, .client__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__phone, .client__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__email {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.client__contact__detail .contact__detail__container .contact__detail__info .detail__info__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  margin-top: 1.5rem;
}
.client__contact__detail .contact__detail__container .contact__detail__info .detail__info__container .detail__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5rem;
  border-radius: 0.2rem;
  background: #eee;
}
.client__contact__detail .contact__detail__container .contact__detail__info .detail__info__container .detail__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.client__contact__detail .contact__detail__container .contact__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .detail__footer__row {
  display: flex;
  align-items: center;
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .detail__footer__row .icon {
  margin-right: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .detail__footer__row .icon:hover {
  background: #ddd;
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .detail__footer__row .loader {
  margin-right: 1.5rem;
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .detail__footer__row .detail__footer__debt {
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.client__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__client__contact .client__contact__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__client__contact .client__contact__container {
    padding-left: 1rem;
  }
}
.restaurant__client__contact .client__contact__container .client__contact__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__client__contact .client__contact__container .client__contact__header .contact__header__row {
  display: flex;
  align-items: center;
}
.restaurant__client__contact .client__contact__container .client__contact__header .contact__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__client__contact .client__contact__container .client__contact__header .contact__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__client__contact .client__contact__container .client__contact__header .contact__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__client__contact .client__contact__container .client__contact__header .contact__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__client__contact .client__contact__container .client__contact__header .contact__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__client__contact .client__contact__container .client__contact__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__client__contact .client__contact__container .client__contact__action .contact__action__pos {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__client__contact .client__contact__container .client__contact__action .contact__action__pos .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__client__contact .client__contact__container .client__contact__action .contact__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__client__contact .client__contact__container .client__contact__action .contact__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__client__contact .client__contact__container .client__contact__action .contact__action__container {
  display: flex;
  align-items: center;
}
.restaurant__client__contact .client__contact__container .client__contact__action .contact__action__container .button__icon {
  margin-left: 2rem;
}

.supplier__contact__levelAside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.supplier__contact__levelAside.display {
  right: 0;
}
.supplier__contact__levelAside .contact__levelAside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100vh;
  padding: 1rem;
  background: #fff;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit:hover {
  background: #ddd;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  overflow: auto;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item:hover {
  background: #eee;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  flex: none;
  color: var(--text-2-color);
}

.supplier__contact__item {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  cursor: pointer;
}
.supplier__contact__item:hover {
  background: #eee;
}
.supplier__contact__item.selected {
  background: #D79F38;
}
.supplier__contact__item.selected .contact__item__icon {
  color: #fff;
}
.supplier__contact__item.selected .contact__item__info .contact__item__name, .supplier__contact__item.selected .contact__item__info .contact__item__phone {
  color: #fff;
}
.supplier__contact__item .contact__item__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
  color: var(--text-1-color);
}
.supplier__contact__item .contact__item__info {
  display: flex;
  flex-direction: column;
}
.supplier__contact__item .contact__item__info .contact__item__name {
  margin-bottom: 0.3rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.supplier__contact__item .contact__item__info .contact__item__phone {
  font-size: var(--font-small);
  color: var(--text-1-color);
}

.supplier__contact__list .contact__list__container .contact__list__levels {
  position: sticky;
  top: 3rem;
  display: flex;
  align-items: center;
  padding: 1.5rem 0.2rem 1rem;
  background: #fff;
}
.supplier__contact__list .contact__list__container .contact__list__levels .contact__list__level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
  background: #eee;
}
.supplier__contact__list .contact__list__container .contact__list__levels .contact__list__level:hover {
  background: #ddd;
}
.supplier__contact__list .contact__list__container .contact__list__levels .contact__list__level .list__level__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.supplier__contact__list .contact__list__container .contact__list__levels .contact__list__level .list__level__name {
  margin-left: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.supplier__contact__list .contact__list__container .contact__list__listing {
  margin: 1rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  padding: 0 0.2rem;
}

.supplier__contact__levelAside {
  position: fixed;
  z-index: 10000;
  right: -100%;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: end;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.supplier__contact__levelAside.display {
  right: 0;
}
.supplier__contact__levelAside .contact__levelAside__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content;
  min-width: 12rem;
  max-width: 70%;
  height: 100vh;
  padding: 1rem;
  background: #fff;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__title {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-1-color);
  padding: 0.2rem;
  border-radius: 50%;
  cursor: pointer;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__header .contact__levelAside__exit:hover {
  background: #ddd;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  overflow: auto;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item:hover {
  background: #eee;
}
.supplier__contact__levelAside .contact__levelAside__container .contact__levelAside__list .contact__levelAside__item .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  flex: none;
  color: var(--text-2-color);
}

.supplier__contact__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.supplier__contact__new .contact__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.supplier__contact__new .contact__new__container .contact__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.supplier__contact__new .contact__new__container .contact__new__header .contact__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.supplier__contact__new .contact__new__container .contact__new__header .contact__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.supplier__contact__new .contact__new__container .contact__new__header .contact__new__exit:hover {
  background: #ddd;
}
.supplier__contact__new .contact__new__container .contact__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.supplier__contact__new .contact__new__container .contact__new__info .new__info__types {
  display: flex;
  justify-content: center;
  border-radius: 2rem;
  margin: 0.5rem auto 1.5rem;
  width: max-content;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
}
.supplier__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type {
  padding: 0.3rem 1rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.supplier__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type.active {
  background: #D79F38;
  color: #fff;
}
.supplier__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type.persone {
  border-radius: 2rem 0 0 2rem;
}
.supplier__contact__new .contact__new__container .contact__new__info .new__info__types .new__info__type.enterprise {
  border-radius: 0 2rem 2rem 0;
}
.supplier__contact__new .contact__new__container .contact__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.supplier__contact__new .contact__new__container .contact__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}

.supplier__contact__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.supplier__contact__detail .contact__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.supplier__contact__detail .contact__detail__container .contact__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.supplier__contact__detail .contact__detail__container .contact__detail__header .contact__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.supplier__contact__detail .contact__detail__container .contact__detail__header .contact__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.supplier__contact__detail .contact__detail__container .contact__detail__header .contact__detail__exit:hover {
  background: #ddd;
}
.supplier__contact__detail .contact__detail__container .contact__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.supplier__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic {
  display: flex;
  flex-direction: column;
}
.supplier__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__name {
  margin-bottom: 1rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.supplier__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__contactName, .supplier__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__phone, .supplier__contact__detail .contact__detail__container .contact__detail__info .detail__info__basic .info__basic__email {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.supplier__contact__detail .contact__detail__container .contact__detail__info .detail__info__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  margin-top: 1.5rem;
}
.supplier__contact__detail .contact__detail__container .contact__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.supplier__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.supplier__contact__detail .contact__detail__container .contact__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.supplier__contact__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.supplier__contact__delete .contact__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.supplier__contact__delete .contact__delete__container .contact__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.supplier__contact__delete .contact__delete__container .contact__delete__header .contact__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.supplier__contact__delete .contact__delete__container .contact__delete__header .contact__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.supplier__contact__delete .contact__delete__container .contact__delete__header .contact__delete__exit:hover {
  background: #ddd;
}
.supplier__contact__delete .contact__delete__container .contact__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.supplier__contact__delete .contact__delete__container .contact__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.supplier__contact__delete .contact__delete__container .contact__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.supplier__contact__delete .contact__delete__container .contact__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.supplier__contact__delete .contact__delete__container .contact__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.supplier__contact__delete .contact__delete__container .contact__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.supplier__contact__delete .contact__delete__container .contact__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.supplier__contact__delete .contact__delete__container .contact__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__supplier__contact .supplier__contact__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__supplier__contact .supplier__contact__container {
    padding-left: 1rem;
  }
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header .contact__header__row {
  display: flex;
  align-items: center;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header .contact__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header .contact__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header .contact__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header .contact__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__header .contact__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action .contact__action__pos {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action .contact__action__pos .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--text-2-color);
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action .contact__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
  cursor: pointer;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action .contact__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action .contact__action__container {
  display: flex;
  align-items: center;
}
.restaurant__supplier__contact .supplier__contact__container .supplier__contact__action .contact__action__container .button__icon {
  margin-left: 2rem;
}

.restaurant__supplier__locked .supplier__locked__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__supplier__locked .supplier__locked__container {
    padding-left: 1rem;
  }
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header .locked__header__row {
  display: flex;
  align-items: center;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header .locked__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header .locked__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header .locked__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header .locked__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__header .locked__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__action .locked__action__pos {
  display: flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
  background: #ddd;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__info {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  background: #eee;
  margin-top: 1.5rem;
}
.restaurant__supplier__locked .supplier__locked__container .supplier__locked__info .icon {
  width: 3rem;
  height: 3rem;
  color: #D79F38;
}

.user__new__permissions {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  overflow: hidden;
}
.user__new__permissions .new__permissions__container {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.user__new__permissions .new__permissions__container .new__permissions__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.user__new__permissions .new__permissions__container .new__permissions__header .new__permissions__label {
  white-space: nowrap;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.user__new__permissions .new__permissions__container .new__permissions__header .line {
  display: inline-block;
  margin-left: 0.5rem;
  width: 100%;
  height: 1px;
  background: #aaa;
}
.user__new__permissions .new__permissions__container .new__permissions__list .new__permissions__item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
  cursor: pointer;
}
.user__new__permissions .new__permissions__container .new__permissions__list .new__permissions__item:hover {
  background: #eee;
}
.user__new__permissions .new__permissions__container .new__permissions__list .new__permissions__item.active {
  color: green;
}
.user__new__permissions .new__permissions__container .new__permissions__list .new__permissions__item .icon {
  flex: none;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: green;
}
.user__new__permissions .new__permissions__container .new__permissions__list .new__permissions__item .box {
  flex: none;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.user__new__terminals {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  background: #eee;
  padding: 0.2rem;
  border-radius: 0.2rem;
}
.user__new__terminals .new__terminals__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.user__new__terminals .new__terminals__header .new__terminals__label {
  white-space: nowrap;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
}
.user__new__terminals .new__terminals__list .new__terminals__item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
  cursor: pointer;
}
.user__new__terminals .new__terminals__list .new__terminals__item:last-child {
  margin-bottom: 0;
}
.user__new__terminals .new__terminals__list .new__terminals__item:hover {
  background: #eee;
}
.user__new__terminals .new__terminals__list .new__terminals__item.active {
  color: green;
}
.user__new__terminals .new__terminals__list .new__terminals__item .icon {
  flex: none;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: green;
}
.user__new__terminals .new__terminals__list .new__terminals__item .box {
  flex: none;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.restaurant__user__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__user__new .user__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__user__new .user__new__container .user__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__user__new .user__new__container .user__new__header .user__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__user__new .user__new__container .user__new__header .user__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__user__new .user__new__container .user__new__header .user__new__exit:hover {
  background: #ddd;
}
.restaurant__user__new .user__new__container .user__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__user__new .user__new__container .user__new__info .new__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  min-height: 20rem;
  background: #eee;
}
.restaurant__user__new .user__new__container .user__new__info .new__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__user__new .user__new__container .user__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__user__new .user__new__container .user__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__user__new .user__new__container .user__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__user__new .user__new__container .user__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__user__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__user__detail .user__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 30rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__user__detail .user__detail__container .user__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__user__detail .user__detail__container .user__detail__header .user__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__user__detail .user__detail__container .user__detail__header .user__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__user__detail .user__detail__container .user__detail__header .user__detail__exit:hover {
  background: #ddd;
}
.restaurant__user__detail .user__detail__container .user__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  .restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile {
    flex-direction: row;
    align-items: center;
  }
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form {
  padding-right: 1.5rem;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image {
  margin-top: 0;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__container {
  position: relative;
  height: 8rem;
  width: 8rem;
  border-radius: 50%;
  background: #eee;
  border: 1px solid #ccc;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__container .form__image__input {
  display: flex;
  justify-content: center;
  width: 100%;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__container .form__image__input input[type=file] {
  display: none;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__container .form__image__input label {
  position: absolute;
  top: 0;
  right: -0.5rem;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__container .form__image__input label .icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: #D79F38;
  cursor: pointer;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__btns {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__form .form__image .form__image__btns .form__image__btn {
  padding: 0.5rem 0.5rem;
  margin: 0;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data .user__detail__identity {
  display: flex;
  align-items: center;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data .user__detail__identity .circle {
  margin: 0 0.5rem;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data .user__detail__identity .user__detail__username, .restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data .user__detail__identity .user__detail__role {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data .user__detail__name {
  font-size: var(--font-subtitle2);
  color: var(--text-1-color);
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__profile .user__detail__data .user__detail__phone {
  margin: 0.5rem 0;
  font-size: var(--font-normal);
  color: var(--text-2-color);
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__permission {
  overflow: hidden;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__permission .detail__permission__label {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__permission .detail__permission__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__permission .detail__permission__list .detail__permisison__item {
  padding: 0.5rem 0;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__user__detail .user__detail__container .user__detail__info .user__detail__permission .detail__permission__list .detail__permisison__item::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}
.restaurant__user__detail .user__detail__container .user__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__user__detail .user__detail__container .user__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__user__detail .user__detail__container .user__detail__footer .detail__footer__action .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.1rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.restaurant__user__detail .user__detail__container .user__detail__footer .detail__footer__action .icon:hover {
  background: #ddd;
}
.restaurant__user__detail .user__detail__container .user__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__user__item {
  display: flex;
  align-items: center;
  margin: 0.5rem;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  overflow: hidden;
}
.restaurant__user__item:hover {
  background: #eee;
}
.restaurant__user__item.selected {
  background: #D79F38;
}
.restaurant__user__item.selected .user__item__info .user__item__name {
  color: #fff;
}
.restaurant__user__item.selected .user__item__info .user__item__footer .circle {
  background: #fff;
}
.restaurant__user__item.selected .user__item__info .user__item__footer .user__item__username, .restaurant__user__item.selected .user__item__info .user__item__footer .user__item__role {
  color: #fff;
}
.restaurant__user__item .user__item__photo {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-right: 1rem;
  flex: none;
}
.restaurant__user__item .user__item__photo img {
  border-radius: 50%;
}
.restaurant__user__item .user__item__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.restaurant__user__item .user__item__info .user__item__name {
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__user__item .user__item__info .user__item__footer .circle {
  margin: 0 0.5rem;
}
.restaurant__user__item .user__item__info .user__item__footer .user__item__username, .restaurant__user__item .user__item__info .user__item__footer .user__item__role {
  font-size: var(--font-small);
  color: var(--text-2-color);
}

.restaurant__user__list {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.restaurant__user__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__user__delete .user__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__user__delete .user__delete__container .user__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__user__delete .user__delete__container .user__delete__header .user__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__user__delete .user__delete__container .user__delete__header .user__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__user__delete .user__delete__container .user__delete__header .user__delete__exit:hover {
  background: #ddd;
}
.restaurant__user__delete .user__delete__container .user__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__user__delete .user__delete__container .user__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__user__delete .user__delete__container .user__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.restaurant__user__delete .user__delete__container .user__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.restaurant__user__delete .user__delete__container .user__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__user__delete .user__delete__container .user__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__user__delete .user__delete__container .user__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__user__delete .user__delete__container .user__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__user .restaurant__user__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__user .restaurant__user__container {
    padding-left: 1rem;
  }
}
.restaurant__user .restaurant__user__container .restaurant__user__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__user .restaurant__user__container .restaurant__user__header .user__header__row {
  display: flex;
  align-items: center;
}
.restaurant__user .restaurant__user__container .restaurant__user__header .user__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__user .restaurant__user__container .restaurant__user__header .user__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__user .restaurant__user__container .restaurant__user__header .user__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__user .restaurant__user__container .restaurant__user__header .user__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__user .restaurant__user__container .restaurant__user__header .user__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__user .restaurant__user__container .restaurant__user__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__user .restaurant__user__container .restaurant__user__action .user__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
}
.restaurant__user .restaurant__user__container .restaurant__user__action .user__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__user .restaurant__user__container .restaurant__user__action .user__action__container {
  display: flex;
  align-items: center;
}

.linkedDevice__new__users {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.linkedDevice__new__users .new__users__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.linkedDevice__new__users .new__users__list {
  margin-top: 0.5rem;
}
.linkedDevice__new__users .new__users__list .new__users__item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  width: max-content;
  font-size: var(--font-small);
  color: var(--text-2-color);
  cursor: pointer;
}
.linkedDevice__new__users .new__users__list .new__users__item:hover {
  background: #eee;
}
.linkedDevice__new__users .new__users__list .new__users__item.active {
  color: green;
}
.linkedDevice__new__users .new__users__list .new__users__item .icon {
  flex: none;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: green;
}
.linkedDevice__new__users .new__users__list .new__users__item .box {
  flex: none;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  margin-right: 0.5rem;
  background: var(--border-color);
}

.restaurant__linkedDevice__new {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__linkedDevice__new .linkedDevice__new__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__header .linkedDevice__new__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__header .linkedDevice__new__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__header .linkedDevice__new__exit:hover {
  background: #ddd;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__info .new__info__locked {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.2rem;
  min-height: 20rem;
  background: #eee;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__info .new__info__locked .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #D79F38;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__footer .new__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__footer .new__footer__action .footer__action__saveBtn {
  font-weight: 600;
}
.restaurant__linkedDevice__new .linkedDevice__new__container .linkedDevice__new__footer .new__footer__action .footer__action__saveBtn:disabled {
  opacity: 0.6;
  cursor: initial;
}

.restaurant__linkedDevice__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__header .linkedDevice__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__header .linkedDevice__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__header .linkedDevice__detail__exit:hover {
  background: #ddd;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__name {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__code {
  display: inline-block;
  width: 100%;
  font-size: var(--font-subtitle);
  color: var(--text-2-color);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__code .icon {
  margin-left: 1rem;
  cursor: pointer;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__users {
  margin-top: 1rem;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__users .detail__users__label {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__users .detail__users__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__users .detail__users__list .detail__users__item {
  padding: 0.5rem 0;
  white-space: nowrap;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__info .linkedDevice__detail__users .detail__users__list .detail__users__item::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background: var(--border-color);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__linkedDevice__detail .linkedDevice__detail__container .linkedDevice__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.restaurant__linkedDevice__item {
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
  overflow: hidden;
}
.restaurant__linkedDevice__item:hover {
  background: #eee;
}
.restaurant__linkedDevice__item .linkedDevice__item__row {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.restaurant__linkedDevice__item .linkedDevice__item__row:first-child {
  margin-bottom: 0.5rem;
}
.restaurant__linkedDevice__item .linkedDevice__item__row .linkedDevice__item__name {
  font-size: var(--font-normal);
  color: var(--text-1-color);
  white-space: nowrap;
}
.restaurant__linkedDevice__item .linkedDevice__item__row .circle {
  margin: 0 0.5rem;
  color: var(--border-color);
  flex: none;
}
.restaurant__linkedDevice__item .linkedDevice__item__row .linkedDevice__item__user {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__linkedDevice__item .linkedDevice__item__row .linkedDevice__item__user.empty {
  color: var(--text-2-color);
}

.restaurant__linkedDevice__list {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
}

.restaurant__linkedDevice__disconnect {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__header .linkedDevice__disconnect__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__header .linkedDevice__disconnect__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__header .linkedDevice__disconnect__exit:hover {
  background: #ddd;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__info .disconnect__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__info .disconnect__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__info .disconnect__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__info .disconnect__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__footer .disconnect__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__linkedDevice__disconnect .linkedDevice__disconnect__container .linkedDevice__disconnect__footer .disconnect__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__linkedDevice__delete {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__header .linkedDevice__delete__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__header .linkedDevice__delete__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__header .linkedDevice__delete__exit:hover {
  background: #ddd;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__info .delete__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__info .delete__info__error {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__info .delete__info__error .info__error__title {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: #E05555;
  font-weight: 600;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__info .delete__info__error .info__error__msg {
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__footer .delete__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.restaurant__linkedDevice__delete .linkedDevice__delete__container .linkedDevice__delete__footer .delete__footer__action .btn-1 {
  background: #E05555;
}

.restaurant__linkedDevice .restaurant__linkedDevice__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__linkedDevice .restaurant__linkedDevice__container {
    padding-left: 1rem;
  }
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header .linkedDevice__header__row {
  display: flex;
  align-items: center;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header .linkedDevice__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header .linkedDevice__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header .linkedDevice__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header .linkedDevice__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__header .linkedDevice__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__action {
  position: sticky;
  top: -1.1rem;
  z-index: 2;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__action .linkedDevice__action__selection {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  background: #ddd;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__action .linkedDevice__action__selection .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
.restaurant__linkedDevice .restaurant__linkedDevice__container .restaurant__linkedDevice__action .linkedDevice__action__container {
  display: flex;
  align-items: center;
}

.report__modal__sheetProduct {
  overflow: scroll;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__header {
  display: flex;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__header .modal__sheetProduct__title {
  width: 7rem;
  min-width: 7rem;
  border: 1px solid #aaa;
  border-right: 1px solid #aaa;
  padding: 0.5rem 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  font-weight: 600;
  text-align: center;
  background: #ddd;
  overflow: hidden;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__header .modal__sheetProduct__title.date {
  width: 10rem;
  min-width: 10rem;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__header .modal__sheetProduct__title.name {
  width: 10rem;
  min-width: 10rem;
}
@media screen and (min-width: 768px) {
  .report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__header .modal__sheetProduct__title.name {
    width: 15rem;
    min-width: 15rem;
  }
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item {
  display: flex;
  cursor: pointer;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item:hover .modal__sheetProduct__span {
  background: #eee;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item .modal__sheetProduct__span {
  width: 7rem;
  min-width: 7rem;
  border: 1px solid #ccc;
  border-top: none;
  padding: 0.5rem 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-align: center;
  overflow: hidden;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item .modal__sheetProduct__span.date {
  width: 10rem;
  min-width: 10rem;
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item .modal__sheetProduct__span.name {
  width: 10rem;
  min-width: 10rem;
}
@media screen and (min-width: 768px) {
  .report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item .modal__sheetProduct__span.name {
    width: 15rem;
    min-width: 15rem;
  }
}
.report__modal__sheetProduct .modal__sheetProduct__container .modal__sheetProduct__list .modal__sheetProduct__item .modal__sheetProduct__span.total {
  background: #ddd;
  font-weight: 600;
}

.restaurant__report__modal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.restaurant__report__modal .report__modal__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 50rem;
  height: max-content;
  max-height: 90vh;
  min-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.restaurant__report__modal .report__modal__container .report__modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.restaurant__report__modal .report__modal__container .report__modal__header .report__modal__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.restaurant__report__modal .report__modal__container .report__modal__header .report__modal__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__report__modal .report__modal__container .report__modal__header .report__modal__exit:hover {
  background: #ddd;
}
.restaurant__report__modal .report__modal__container .report__modal__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__filter {
  display: flex;
  justify-content: end;
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0 1rem;
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__label .info__label__text {
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__label .restaurant__arrowBtn {
  flex: none;
  margin-left: 0.5rem;
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__search {
  margin: 2rem 0 1rem;
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__search .info__search__bar {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding-right: 2.5rem;
  padding-left: 1rem;
  width: 100%;
  max-width: 20rem;
  height: 2.2rem;
  border-radius: 2rem;
  overflow: hidden;
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__search .info__search__bar input[type=text] {
  height: 100%;
  width: 100%;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-1-color);
}
.restaurant__report__modal .report__modal__container .report__modal__info .modal__info__search .info__search__bar .header__search-bar__btn {
  position: absolute;
  right: 0.5rem;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text-1-color);
}
.restaurant__report__modal .report__modal__container .report__modal__info .report__modal__data .invoice__detail__order .detail__order__header .order__header__quantity {
  min-width: 3rem;
}
.restaurant__report__modal .report__modal__container .report__modal__info .report__modal__data .invoice__detail__order .detail__order__header .order__header__price {
  min-width: 4rem;
}
.restaurant__report__modal .report__modal__container .report__modal__info .report__modal__data .invoice__detail__order .detail__order__list .detail__order__item .detail__order__quantity {
  min-width: 3rem;
}
.restaurant__report__modal .report__modal__container .report__modal__info .report__modal__data .invoice__detail__order .detail__order__list .detail__order__item .detail__order__price {
  min-width: 4rem;
}

.restaurant__report .restaurant__report__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content max-content max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__report .restaurant__report__container {
    padding-left: 1rem;
  }
}
.restaurant__report .restaurant__report__container .restaurant__report__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__report .restaurant__report__container .restaurant__report__header .report__header__row {
  display: flex;
  align-items: center;
}
.restaurant__report .restaurant__report__container .restaurant__report__list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.restaurant__report .restaurant__report__container .restaurant__report__list .report__list__container {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 35rem;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  padding: 1rem;
}
.restaurant__report .restaurant__report__container .restaurant__report__list .report__list__container .restaurant__report__label {
  margin: 2rem 0 1rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
  font-weight: 600;
}
.restaurant__report .restaurant__report__container .restaurant__report__list .report__list__container .restaurant__report__label:first-child {
  margin-top: 0;
}
.restaurant__report .restaurant__report__container .restaurant__report__list .report__list__container .restaurant__report__item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  cursor: pointer;
}
.restaurant__report .restaurant__report__container .restaurant__report__list .report__list__container .restaurant__report__item .icon {
  margin-right: 0.5rem;
  flex: none;
  color: var(--link-color);
}

.admin__user__item {
  margin: 0.5rem;
  border-radius: 0.2rem;
  padding: 0.5rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.admin__user__item .admin__user__data {
  display: flex;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
}
.admin__user__item .admin__user__data.disabled {
  opacity: 0.8;
  background: #eee;
}
.admin__user__item .admin__user__data .admin__user__image {
  display: flex;
  flex-direction: column;
}
.admin__user__item .admin__user__data .admin__user__image .admin__user__img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.admin__user__item .admin__user__data .admin__user__image .admin__user__img img {
  border-radius: 50%;
}
.admin__user__item .admin__user__data .admin__user__image .admin__user__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  font-size: var(--font-little);
  text-transform: uppercase;
  font-weight: 600;
}
.admin__user__item .admin__user__data .admin__user__image .admin__user__flag.enabled {
  color: green;
}
.admin__user__item .admin__user__data .admin__user__image .admin__user__flag.disabled {
  color: #E05555;
}
.admin__user__item .admin__user__data .admin__user__info {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin__user__item .admin__user__data .admin__user__info .admin__user__name {
  margin-bottom: 0.5rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.admin__user__item .admin__user__data .admin__user__info .admin__user__phone, .admin__user__item .admin__user__data .admin__user__info .admin__user__username, .admin__user__item .admin__user__data .admin__user__info .admin__user__email {
  margin-bottom: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-overflow: ellipsis;
}
.admin__user__item .admin__user__data .admin__user__info .admin__user__date {
  margin-top: 0.5rem;
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.admin__user__item .admin__user__restaurant {
  display: flex;
  align-items: center;
}
.admin__user__item .admin__user__restaurant .user__restaurant__flag {
  font-size: var(--font-little);
  text-transform: uppercase;
  font-weight: 600;
}
.admin__user__item .admin__user__restaurant .user__restaurant__flag.enabled {
  color: green;
}
.admin__user__item .admin__user__restaurant .user__restaurant__flag.disabled {
  color: #E05555;
}
.admin__user__item .admin__user__restaurant .user__restaurant__circle {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin: 0 0.5rem;
  background: var(--text-2-color);
}
.admin__user__item .admin__user__restaurant .user__restaurant__name {
  font-weight: 600;
  font-size: var(--font-normal);
  color: var(--text-1-color);
}

.restaurant__admin__user .admin__user__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__admin__user .admin__user__container {
    padding-left: 1rem;
  }
}
.restaurant__admin__user .admin__user__container .admin__user__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__admin__user .admin__user__container .admin__user__header .user__header__row {
  display: flex;
  align-items: center;
}
.restaurant__admin__user .admin__user__container .admin__user__header .user__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__admin__user .admin__user__container .admin__user__header .user__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__admin__user .admin__user__container .admin__user__header .user__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__admin__user .admin__user__container .admin__user__header .user__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__admin__user .admin__user__container .admin__user__header .user__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__admin__user .admin__user__container .admin__user__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .restaurant__admin__user .admin__user__container .admin__user__list {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}

.admin__business__item {
  display: flex;
  padding: 0.5rem;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
  margin: 0.5rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.admin__business__item.disabled {
  opacity: 0.8;
  background: #eee;
}
.admin__business__item .admin__business__image {
  display: flex;
  flex-direction: column;
}
.admin__business__item .admin__business__image .admin__business__img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.admin__business__item .admin__business__image .admin__business__img img {
  border-radius: 50%;
}
.admin__business__item .admin__business__image .admin__business__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  font-size: var(--font-little);
  text-transform: uppercase;
  font-weight: 600;
}
.admin__business__item .admin__business__image .admin__business__flag .admin__business__online {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.2rem;
  background: var(--text-2-color);
}
.admin__business__item .admin__business__image .admin__business__flag.enabled {
  color: green;
}
.admin__business__item .admin__business__image .admin__business__flag.enabled .admin__business__online.active {
  background: green;
}
.admin__business__item .admin__business__image .admin__business__flag.disabled {
  color: #E05555;
}
.admin__business__item .admin__business__image .admin__business__flag.disabled .admin__business__online.active {
  background: #E05555;
}
.admin__business__item .admin__business__info {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
}
.admin__business__item .admin__business__info .admin__business__name {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.admin__business__item .admin__business__info .admin__business__alias {
  margin-bottom: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.admin__business__item .admin__business__info .admin__business__code {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.admin__business__item .admin__business__info .admin__business__subscription {
  margin-bottom: 0.2rem;
  font-size: var(--font-little);
  color: var(--text-2-color);
  text-transform: capitalize;
}
.admin__business__item .admin__business__info .admin__business__date {
  font-size: var(--font-little);
  color: var(--text-2-color);
}

.admin__business__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.admin__business__detail .business__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.admin__business__detail .business__detail__container .business__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.admin__business__detail .business__detail__container .business__detail__header .business__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.admin__business__detail .business__detail__container .business__detail__header .business__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.admin__business__detail .business__detail__container .business__detail__header .business__detail__exit:hover {
  background: #ddd;
}
.admin__business__detail .business__detail__container .business__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row {
  display: flex;
  margin-top: 0.2rem;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image {
  display: flex;
  flex-direction: column;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__img img {
  border-radius: 50%;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__flag {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  font-size: var(--font-little);
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__flag .business__detail__online {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.2rem;
  background: var(--text-2-color);
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__flag.enabled {
  color: green;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__flag.enabled .business__detail__online.active {
  background: green;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__flag.disabled {
  color: #E05555;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__image .business__detail__flag.disabled .business__detail__online.active {
  background: #E05555;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__data {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__data .business__detail__name {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__data .business__detail__alias {
  margin-bottom: 0.2rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__data .business__detail__code {
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-1-color);
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__data .business__detail__subscription {
  margin-bottom: 0.2rem;
  font-size: var(--font-little);
  color: var(--text-2-color);
  text-transform: capitalize;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__row .business__detail__data .business__detail__date {
  font-size: var(--font-little);
  color: var(--text-2-color);
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  margin-top: 2rem;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__list .business__detail__item {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.2rem;
  margin: 0.5rem;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__list .business__detail__item .detail__item__number {
  margin-bottom: 0.2rem;
  font-size: var(--font-subtitle);
  color: var(--text-1-color);
  text-align: center;
}
.admin__business__detail .business__detail__container .business__detail__info .business__detail__list .business__detail__item .detail__item__label {
  font-size: var(--font-small);
  color: var(--text-2-color);
  text-align: center;
}
.admin__business__detail .business__detail__container .business__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.admin__business__detail .business__detail__container .business__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin__business__detail .business__detail__container .business__detail__footer .detail__footer__action .detail__footer__icons {
  display: flex;
  align-items: center;
}
.admin__business__detail .business__detail__container .business__detail__footer .detail__footer__action .detail__footer__icons .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.admin__business__detail .business__detail__container .business__detail__footer .detail__footer__action .detail__footer__icons .icon:hover {
  background: #ddd;
}
.admin__business__detail .business__detail__container .business__detail__footer .detail__footer__action .restaurant__arrowBtn .restaurant__arrowBtn__options {
  top: initial;
  bottom: 100%;
  left: initial;
  right: 0;
}

.admin__business__enable {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.admin__business__enable .business__enable__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.admin__business__enable .business__enable__container .business__enable__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.admin__business__enable .business__enable__container .business__enable__header .business__enable__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.admin__business__enable .business__enable__container .business__enable__header .business__enable__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.admin__business__enable .business__enable__container .business__enable__header .business__enable__exit:hover {
  background: #ddd;
}
.admin__business__enable .business__enable__container .business__enable__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.admin__business__enable .business__enable__container .business__enable__info .enable__info__text {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text-2-color);
  line-height: 1.2rem;
}
.admin__business__enable .business__enable__container .business__enable__info .form__item {
  margin-top: 1rem;
}
.admin__business__enable .business__enable__container .business__enable__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.admin__business__enable .business__enable__container .business__enable__footer .enable__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
  align-items: center;
}
.admin__business__enable .business__enable__container .business__enable__footer .enable__footer__action .btn-1 {
  background: #D79F38;
}
.admin__business__enable .business__enable__container .business__enable__footer .enable__footer__action .btn-1.red {
  background: #E05555;
}

.restaurant__admin__business .admin__business__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__admin__business .admin__business__container {
    padding-left: 1rem;
  }
}
.restaurant__admin__business .admin__business__container .admin__business__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__admin__business .admin__business__container .admin__business__header .business__header__row {
  display: flex;
  align-items: center;
}
.restaurant__admin__business .admin__business__container .admin__business__header .business__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__admin__business .admin__business__container .admin__business__header .business__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__admin__business .admin__business__container .admin__business__header .business__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__admin__business .admin__business__container .admin__business__header .business__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__admin__business .admin__business__container .admin__business__header .business__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__admin__business .admin__business__container .admin__business__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  margin-top: 1.5rem;
}
@media screen and (min-width: 768px) {
  .restaurant__admin__business .admin__business__container .admin__business__list {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}

.admin__purchase__item {
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 768px) {
  .admin__purchase__item {
    margin: 0.5rem;
  }
}
.admin__purchase__item .purchase__item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  background: #D79F38;
  cursor: pointer;
}
.admin__purchase__item .purchase__item__header:hover {
  opacity: 0.7;
}
.admin__purchase__item .purchase__item__header .purchase__item__business {
  display: flex;
  align-items: center;
  font-size: var(--font-normal);
  color: #fff;
}
.admin__purchase__item .purchase__item__header .purchase__item__business .circle {
  margin: 0 0.5rem;
  background: #fff;
}
.admin__purchase__item .purchase__item__header .icon {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  color: #fff;
}
.admin__purchase__item .purchase__item__orders .purchase__item__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.5rem;
  margin: 0.5rem;
  border-radius: 0.2rem;
  font-size: var(--font-normal);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.35);
}
.admin__purchase__item .purchase__item__orders .purchase__item__order:hover {
  background: #eee;
}

.admin__purchase__detail {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.admin__purchase__detail .purchase__detail__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr max-content;
  width: 100%;
  max-width: 25rem;
  height: max-content;
  max-height: 90vh;
  border-radius: 0.2rem;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.2);
  animation: display 0.3s;
  overflow: auto;
  background: #fff;
}
@keyframes display {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding: 0 1rem;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__header .purchase__detail__title {
  font-size: var(--font-normal);
  font-weight: 600;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__header .purchase__detail__exit {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__header .purchase__detail__exit:hover {
  background: #ddd;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info {
  padding: 0 1rem 1rem;
  margin: 1rem 0 0.5rem;
  overflow: auto;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__info__span {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: var(--font-small);
  color: var(--text-2-color);
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__info__span.margin {
  margin-bottom: 1rem;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list {
  margin-top: 1rem;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list .detail__list__header {
  margin-top: 2rem;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list .detail__list__header .list__header__description {
  display: flex;
  font-size: var(--font-small);
  color: var(--text-1-color);
  text-transform: uppercase;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list .line {
  display: inline-block;
  width: 100%;
  height: 1px;
  border: 1px dashed var(--text-2-color);
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list .detail__list__container {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list .detail__list__container .detail__list__item {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__info .purchase__detail__list .detail__list__container .detail__list__item .detail__list__name {
  display: flex;
  color: var(--text-1-color);
  font-size: var(--font-small);
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action {
  margin: 0.5rem 0;
  display: flex;
  justify-content: end;
}
.admin__purchase__detail .purchase__detail__container .purchase__detail__footer .detail__footer__action .detail__footer__total {
  --font-currency: var(--font-small);
  font-size: var(--font-normal);
  color: var(--text-1-color);
  font-weight: 600;
}

.restaurant__admin__purchase .admin__purchase__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  padding: 1rem var(--padding);
  overflow: auto;
}
@media screen and (min-width: 768px) {
  .restaurant__admin__purchase .admin__purchase__container {
    padding-left: 1rem;
  }
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header .purchase__header__row {
  display: flex;
  align-items: center;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header .purchase__header__row .loader__container {
  margin-left: 1rem;
  margin-top: 0;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header .purchase__header__row .loader__container .loader {
  width: 1.5rem;
  height: 1.5rem;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header .purchase__header__row .icon-reload {
  margin-left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.2rem;
  border-radius: 50%;
  color: var(--text-2-color);
  cursor: pointer;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header .purchase__header__row .icon-reload:hover {
  background: #ddd;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__header .purchase__header__row .icon-reload.active {
  background: #D79F38;
  color: #fff;
}
.restaurant__admin__purchase .admin__purchase__container .admin__purchase__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-template-rows: max-content;
  grid-auto-rows: max-content;
  margin-top: 1.5rem;
}

.restaurant {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  height: 86vh;
  overflow: auto;
}
.restaurant.hide-menu .restaurant__reserve-btn .reserve-btn__text {
  display: none;
}
.restaurant.hide-menu .restaurant__sidebar {
  left: -100%;
}
.restaurant.hide-menu .restaurant__sidebar .restaurant__sidebar__nav {
  overflow: hidden;
}
.restaurant.hide-menu .restaurant__sidebar .restaurant__sidebar__filter {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .restaurant {
    display: grid;
    grid-template-columns: 13rem 1fr;
    transition: all 0.3s;
  }
  .restaurant.hide-menu {
    grid-template-columns: 0 1fr;
  }
  .restaurant.hide-menu .restaurant__reserve-btn .reserve-btn__text {
    display: none;
  }
  .restaurant.hide-menu .restaurant__sidebar {
    overflow: hidden;
    opacity: 0;
  }
  .restaurant.hide-menu .restaurant__sidebar .restaurant__sidebar__nav {
    overflow: hidden;
  }
  .restaurant.hide-menu .restaurant__sidebar .restaurant__sidebar__filter {
    overflow: hidden;
  }
}

* {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
*::-webkit-scrollbar {
  width: 0.25rem;
}
*::-webkit-scrollbar-thumb {
  border-radius: 0.2rem;
  background: #aaa;
}

body {
  overscroll-behavior-y: contain;
}

#root {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "header" "." "main" "footer";
  overscroll-behavior-y: contain;
}
#root header {
  grid-area: header;
}
#root main {
  grid-area: main;
}
#root footer {
  grid-area: footer;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

input, button, textarea {
  border: none;
  background: #fff;
}
input:focus, button:focus, textarea:focus {
  outline: none;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*# sourceMappingURL=bundle.3edad064c293fd4c01ba.css.map*/