body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.container {
  align-items: center;
  background-color: var(--mirai-ui-content-background);
  padding: var(--mirai-ui-space-M);
  min-height: calc(100vh - var(--mirai-ui-space-XXL));
  width: 100vw;
}

.content {
  align-items: flex-start;
  gap: var(--mirai-ui-space-M);
  max-width: var(--mirai-ui-breakpoint-content);
  width: 100%;
}

.content > * {
  flex: 1;
}

.content > * > *:not(:last-child) {
  margin-bottom: var(--mirai-ui-space-M);
}

.content > .side {
  z-index: var(--mirai-ui-layer-M);
}

.box {
  background-color: var(--mirai-ui-base);
  border-radius: var(--mirai-ui-border-radius);
  box-shadow: 0 0 1px var(--mirai-ui-content-light);
  gap: var(--mirai-ui-space-M);
  padding: var(--mirai-ui-space-M);
}

.caption {
  color: var(--mirai-ui-content-light);
  margin-top: var(--mirai-ui-space-XS);
}

.wide {
  width: 100%;
}

.error {
  margin-top: var(--mirai-ui-space-XL);
}

/* == PARTIALS ============================================================== */
/* -- <Summary> ------------------------------------------------------------- */
.linkAgency {
  display: inline;
  margin-left: var(--mirai-ui-space-XS);
}

/* -- <PriceBreakdown> ------------------------------------------------------ */
.priceBreakdown {
  border-top: solid 1px var(--mirai-ui-content-border);
}

.priceBreakdown .footer {
  text-align: center;
}

/* -- <Modal> ---------------------------------------------------------------- */
.modal {
  padding: var(--mirai-ui-space-M);
}

.modal .buttons {
  gap: var(--mirai-ui-space-M);
  margin-top: var(--mirai-ui-space-M);
}

.modal .buttons.edit {
  padding: 0 var(--mirai-ui-space-M);
}

.modal .buttons ui-button {
  width: 100%;
}

.modal.edit {
  padding: 0 0 var(--mirai-ui-space-M) 0;
}

.modalContent {
  padding-top: var(--mirai-ui-space-M);
}

.modalRoomSelection,
.modalBoard,
.modalOccupation,
.formEditBoard,
.formEditOccupation {
  --mirai-booking-room-image-size: 108px;
}

.formEditBoard,
.formEditOccupation {
  gap: var(--mirai-ui-space-M);
}

.modalRoomSelection {
  max-height: calc(100vh - var(--mirai-ui-space-XXL));
}

.modalRoomSelection .panel {
  background-color: var(--mirai-ui-base);
  border-radius: 0 0 var(--mirai-ui-modal-border-radius) var(--mirai-ui-modal-border-radius);
}

.modalRoomSelection .body {
  gap: var(--mirai-ui-space-M);
  padding: var(--mirai-ui-space-M);
}

.modalRoomSelection .scrollView {
  padding: var(--mirai-ui-space-XXS);
  width: auto;
}

.modalRoomSelection .list {
  gap: var(--mirai-ui-space-M);
  flex-wrap: wrap;
  max-height: calc(100vh - var(--mirai-ui-space-XXL) * 5);
  width: 100%;
}

.option {
  border: 1px solid var(--mirai-ui-content-border);
  border-radius: var(--mirai-ui-border-radius);
}

.modalRoomSelection .option {
  width: 100%;
  min-width: 342px;
}

.modalOccupation .selectedRoomCard,
.modalBoard .selectedRoomCard,
.formEditBoard .selectedRoomCard,
.formEditOccupation .selectedRoomCard {
  flex: 1;
  margin-left: var(--mirai-ui-space-M);
  margin-right: var(--mirai-ui-space-M);
  min-width: 0;
  max-width: unset;
}

.modalOccupation .selectedRoomCard {
  margin-bottom: var(--mirai-ui-space-M);
}

.modalBoard .selectedRoomCard,
.modalOccupation .selectedRoomCard,
.formEditBoard .selectedRoomCard,
.formEditOccupation .selectedRoomCard {
  margin-top: var(--mirai-ui-space-M);
}

.boardOptions {
  gap: var(--mirai-ui-space-M);
  padding: var(--mirai-ui-space-M);
}

.boardOptionList {
  gap: var(--mirai-ui-space-M);
}

.boardOption {
  width: 100%;
}

.boardOptionContent {
  align-items: center;
  gap: var(--mirai-ui-space-S);
  padding: var(--mirai-ui-space-M);
}

.boardOptionPrice {
  margin-left: auto;
  min-width: fit-content;
}

.optionSelected {
  border-color: var(--mirai-ui-accent);
  box-shadow: 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-focus-color), var(--mirai-ui-focus-shadow);
}

.optionContent {
  align-items: stretch;
  height: var(--mirai-booking-room-image-size);
  min-width: 0;
  width: 100%;
}

.optionImage {
  background-color: var(--mirai-ui-content-background);
  background-position: center;
  background-size: cover;
  flex: 0 0 var(--mirai-booking-room-image-size);
  height: var(--mirai-booking-room-image-size);
  max-width: var(--mirai-booking-room-image-size);
  min-width: var(--mirai-booking-room-image-size);
  width: var(--mirai-booking-room-image-size);
}

.optionDetails {
  background-color: var(--mirai-ui-base);
  gap: var(--mirai-ui-space-XS);
  justify-content: flex-start;
  min-width: 0;
  padding: var(--mirai-ui-space-S);
}

.optionDetails > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footerActions {
  border-radius: 0 0 var(--mirai-ui-modal-border-radius) var(--mirai-ui-modal-border-radius);
  border-top: 1px solid var(--mirai-ui-content-border);
  background-color: var(--mirai-ui-base);
  justify-content: flex-end;
  padding: var(--mirai-ui-space-M);
  gap: var(--mirai-ui-space-M);
}

.footerActions ui-button {
  width: 100%;
}

.occupationComparison {
  align-items: stretch;
  background-color: var(--mirai-ui-content-background);
}

.column {
  background-color: var(--mirai-ui-base);
  box-sizing: border-box;
  flex: 1;
  gap: var(--mirai-ui-space-S);
  padding: var(--mirai-ui-space-M);
}

.current {
  background-color: var(--mirai-ui-content-background);
}

.highlights {
  min-height: 0;
  gap: var(--mirai-ui-space-XS);
}

.highlight {
  align-items: center;
  gap: var(--mirai-ui-space-XXS);
}

/* -- <FormCancel> ---------------------------------------------------------- */
.cancel {
  margin-bottom: var(--mirai-ui-space-M);
}

/* -- <FormResend> ---------------------------------------------------------- */
.description {
  margin-bottom: var(--mirai-ui-space-S);
}

/* -- <FormEditDate> ---------------------------------------------------------- */
.summaryContainer > :first-child {
  background-color: var(--mirai-ui-content-background);
}

.summaryContainer {
  border-bottom: 1px solid var(--mirai-ui-content-border);
}

.formEditBoard .summaryContainer,
.formEditOccupation .summaryContainer {
  border-top: 1px solid var(--mirai-ui-content-border);
}

/* -- <Payment> ------------------------------------------------------------- */
.notificationPayment .action {
  color: var(--mirai-ui-accent);
}

.modalCalendar .calendar {
  min-height: calc(calc(var(--mirai-ui-calendar-cell) * 8));
}

.modalCalendar .footer {
  border-top: 1px solid var(--mirai-ui-content-border);
  padding: var(--mirai-ui-space-M);
  justify-content: space-between;
}
/* S */
@media only screen and (max-width: 480px) {
  /* -- Temporal fix -------------------------------------------------------- */
  [data-role='booking'] [data-role='menu-content'] {
    position: relative;
  }

  /* -- <Payment> ------------------------------------------------------------- */
  .notificationPayment {
    gap: var(--mirai-ui-space-S);
  }

  .modalCalendar .footer {
    flex-direction: column;
    gap: var(--mirai-ui-space-S);
  }

  .occupationComparison {
    flex-direction: column;
  }

  .modalCalendar .footer > * {
    width: 100%;
    box-sizing: border-box;
  }

  .modalRoomSelection .body {
    width: 100%;
  }
}

/* M & L */
@media only screen and (min-width: 481px) {
  .modalBoard,
  .modalConfirmDialog,
  .modalOccupation,
  .modalRoomSelection {
    width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-XL));
  }

  .current {
    border-right: 1px solid var(--mirai-ui-content-border);
  }

  /* -- Temporal fix -------------------------------------------------------- */
  [data-role='booking'] [data-role='menu-content'] {
    position: relative;
  }

  /* -- <Payment> ------------------------------------------------------------- */
  .notificationPayment {
    gap: var(--mirai-ui-space-M);
  }

  .notificationPayment .action {
    min-width: fit-content;
  }
}

/* S & M */
@media only screen and (min-width: 481px) and (max-width: 1179px), only screen and (max-width: 480px) {
  /* -- <Menu> -------------------------------------------------------------- */
  .menu {
    border-top: solid 1px var(--mirai-ui-content-border);
    background-color: var(--mirai-ui-base);
    bottom: 0;
    left: 0;
    padding: var(--mirai-ui-space-S);
    position: fixed;
    right: 0;
  }

  .summaryContainer {
    border-bottom: 1px solid var(--mirai-ui-content-border);
  }

  .modalRoomSelection .body {
    max-width: 480px;
  }
}

/* L */
@media only screen and (min-width: 1180px) {
  .content > .side {
    max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 4);
    position: sticky;
    top: var(--mirai-ui-space-M);
  }

  .error {
    max-width: 50vw;
  }

  /* -- <Menu> -------------------------------------------------------------- */
  .menu ui-menu-content {
    position: relative !important;
  }

  .menu ui-menu-content > * {
    box-shadow: 0 0 1px var(--mirai-ui-content-light);
  }
}

@media only screen {
  .print {
    display: none;
  }
}

@media print {
  .noPrint {
    display: none !important;
  }

  .content {
    flex-direction: column;
  }

  .content > * {
    width: 100%;
  }

  .box {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 0 var(--mirai-ui-space-XS) 0;
  }

  .box h2,
  .box h3 {
    font-size: var(--mirai-ui-font-size-action);
    line-height: var(--mirai-ui-line-height-action);
  }

  .box span {
    font-size: var(--mirai-ui-font-size-small);
    line-height: var(--mirai-ui-line-height-small);
  }

  .box .priceLabel {
    margin-bottom: 0;
    margin-top: var(--mirai-ui-space-XS);
  }

  .box .price {
    font-size: var(--mirai-ui-font-size-action);
    line-height: var(--mirai-ui-line-height-action);
  }

  .item {
    margin-bottom: var(--mirai-ui-space-L);
  }

  .caption {
    margin-top: 0;
  }
}
