@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('font-awesome/css/all.min.css');

:root {
  --doc-height: 100vh;
}

/*#region fonts*/
@font-face {
  font-family: 'softtec-font-regular';
  src: url('Font/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'softtec-font-bold';
  src: url('Font/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'softtec-font-light';
  src: url('Font/Montserrat-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'softtec-font-medium';
  src: url('Font/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'softtec-font-semibold';
  src: url('Font/Montserrat-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'FontAwesome';
  src: url(font-awesome/webfonts/fa-solid-900.woff2);
}

@font-face {
  font-family: 'Montserrat';
  src: url('Font/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
}

*, .btn {
  font-size: var(--font-size-12);
}

.fa-solid, .fa-regular {
  font-size: small;
}

.font-softtec-regular {
  font-family: var(--font-regular);
}

.font-softtec-light {
  font-family: var(--font-light);
}

.font-softtec-medium {
  font-family: var(--font-medium);
}

.font-softtec-semibold {
  font-family: var(--font-semibold);
}

.font-softtec-bold {
  font-family: var(--font-bold);
}

.font-size-8 {
  font-size: var(--font-size-8);
}

.font-size-9 {
  font-size: var(--font-size-9);
}

.font-size-10 {
  font-size: var(--font-size-10);
}

.font-size-11 {
  font-size: var(--font-size-11);
}

.font-size-12 {
  font-size: var(--font-size-12);
}

.font-size-13 {
  font-size: var(--font-size-13);
}

.font-size-14 {
  font-size: var(--font-size-14);
}

.font-size-15 {
  font-size: var(--font-size-15);
}

.font-size-16 {
  font-size: var(--font-size-16);
}

.font-size-17 {
  font-size: var(--font-size-17);
}

.font-size-18 {
  font-size: var(--font-size-18);
}

.font-size-20 {
  font-size: var(--font-size-20);
}

.font-size-24 {
  font-size: var(--font-size-24);
}

.font-size-26 {
  font-size: var(--font-size-26);
}

.font-size-36 {
  font-size: var(--font-size-36);
}

h1:focus {
  outline: none;
}
/*#endregion*/

/*#region general*/
* {
  letter-spacing: 0.5px;
}

html {
  font-size: .625rem;
}

body {
  margin: 0;
  font-family: softtec-font-regular, Helvetica, Arial, sans-serif !important;
  font-size: var(--font-size-13);
  position: relative;
  line-height: unset !important;
}

html,
body {
  height: 100vh; /* fallback for Js load */
  scrollbar-width: none;
  height: var(--doc-height);
  max-height: 100vh;
}

.ui-loader {
  display: none;
}

.component-container {
  background-color: var(--page-background);
  padding-right: 33.3rem;
  padding-left: 8.5rem;
  max-height: 100vh;
  max-height: var(--doc-height);
  min-height: 100vh;
  min-height: var(--doc-height);
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

  .component-container > label {
    color: var(--page-header-color);
  }

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

.gap-01 {
  gap: .1rem !important;
}

.gap-05 {
  gap: .5rem !important;
}

.gap-1 {
  gap: 1rem !important;
}

.gap-2 {
  gap: 2rem !important;
}

.m-t-1 {
  margin-top: 1rem;
}

.m-b-1 {
  margin-bottom: 1rem;
}

.m-b-2 {
  margin-bottom: 2rem;
}

.m-l-auto {
  margin-left: auto;
}

.mt-auto {
  margin-top: auto;
}

.p-r-2 {
  padding-right: 2rem;
}

.error-msg {
  color: var(--softtec-red) !important;
}

.hover:hover {
  cursor: pointer;
}

.hover-bold:hover {
  cursor: pointer;
  font-weight: bold;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

  .blazor-error-boundary::after {
    content: "An error has occurred."
  }

/*#endregion*/

/*#region Popups Modal*/
.size-custom {
  max-width: 62rem;
  margin: auto;
  margin-right: auto;
}

.size-medium {
  max-width: 62rem !important;
}

.size-large {
  max-width: 80vw !important;
  width: fit-content;
  margin: auto !important;
}

.modal-header.st-popup-header h3 {
  color: var(--softtec-dark-blue);
  margin-bottom: 0;
}

.modal-header.st-popup-header .fa-solid {
  cursor: pointer;
  color: var(--softtec-medium-blue1);
  font-size: var(--font-size-20);
}

.modal-header, .modal-body, .modal-footer, .modal-content {
  border: 0;
}

.modal-header {
  color: var(--softtec-dark-blue);
  padding: 0 0 2rem 0;
}

.modal-content {
  min-width: 18rem;
}

.modal-body {
  color: var(--softtec-medium-blue1);
}

.modal-content:has(.modal-footer) .modal-body {
  padding: 0 0 2rem 0;
}

.modal-body > p {
  margin: 0;
  line-height: 1.5rem;
}

.modal-content .modal-footer {
  padding: 0;
}

.modal-header:has(.modal-title:empty),
.st-popup-header:empty, .st-popup-footer:empty, .st-popup-header .modal-title:empty {
  display: none;
}

.blazored-modal {
  border-radius: .8rem !important;
  padding: 2rem !important;
}

.hidden {
  display: none;
}

/*payment modal reservation*/
.secure-field--actions {
  border-radius: 50%;
  border: 1px solid #00305e;
  height: 7rem;
  width: 7rem;
  padding: 1rem;
}

.secure-field--action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.secure-field--card-icon__recognized-card {
  width: 5rem;
}

#card-number-container {
  height: 3.5rem;
}

#cvv-container {
  height: 2.5rem;
  margin: 0 0 1rem 0;
  width: 50%;
}

#payment-container .secure-field--input {
  height: 4rem;
}


#payment-container .form-floating {
  height: 3rem;
}

  #payment-container .form-floating label {
    padding: .7rem .5rem;
    color: var(--softtec-dark-blue) !important;
  }

#payment-container .modal-header {
  color: var(--softtec-medium-blue1);
}

#payment-container .form-control {
  height: 3rem;
  border-radius: 8px;
  padding: 0.7rem .5rem 0 .5rem;
  border: 1px solid transparent !important;
  border-color: var(--softtec-medium-blue2) !important;
}

#payment-container .st-datepicker {
  margin-top: .2rem;
  box-shadow: 0 0 1px 1px #a5b7c6;
  border: none;
  border-color: var(--softtec-medium-blue2);
  outline: none;
  border-radius: 8px;
}

#payment-container .form-floating > input {
  box-shadow: 0 0 1px 1px #a5b7c6 !important;
  border: none !important;
}

  #payment-container .form-floating > input:hover {
    box-shadow: 0 0 2px 2px #a5b7c6 !important;
    border: none !important;
  }

#payment-container .st-datepicker.ant-picker:hover {
  box-shadow: 0 0 2px 2px #a5b7c6 !important;
}

#payment-container .form-floating > .form-control:focus, #payment-container .form-floating > .form-control:not(:placeholder-shown) {
  padding: .9rem .8rem 0 .8rem;
  font-size: small;
  color: var(--softtec-medium-blue1);
}

#payment-container .form-floating .form-control:focus ~ label, #payment-container .form-floating .form-control:not(:placeholder-shown) ~ label {
  font-size: small;
  padding: 0 .5rem;
  opacity: .8;
  transform: scale(.85) translateY(0rem) translateX(0) !important;
}

#payment-container .form-floating .form-control:not(:placeholder-shown) ~ label {
  transform: scale(.85) translateY(0rem) translateX(0.2rem) !important;
}

#payment-container .form-floating .form-control:focus {
  box-shadow: rgb(165, 183, 198) 0px 0px 2px 2px !important;
}

#payment-container .st-datepicker input {
  color: var(--softtec-medium-blue1) !important;
}

#payment-container .ant-picker-suffix {
  color: var(--softtec-medium-blue1);
}

#payment-container .st-datepicker:focus-within {
  box-shadow: rgb(165, 183, 198) 0px 0px 2px 2px !important;
  border: none;
}

#payment-container .gap-2 {
  gap: 1.5rem !important;
}

.st-popup-header:empty {
  display: none;
}

.bm-close {
  color: var(--softtec-medium-blue1) !important;
  padding: 0 .5rem !important;
}

  .bm-close > span {
    font-size: 3rem !important;
  }

  .bm-close:hover {
    cursor: pointer;
    color: var(--softtec-dark-blue) !important;
  }

.bm-header {
  align-items: center !important;
}

  .bm-header .bm-title {
    color: var(--softtec-medium-blue1);
    font-size: var(--font-size-14);
  }

.packge-rates-modal .modal-body {
  overflow: auto;
  background-color: var(--softtec-light-blue2);
  border-radius: .8rem;
  padding: 2rem 1rem 2rem 2rem;
}

.package-details-modal .modal-body label {
  line-height: 2rem;
  text-align: center;
}

/*#endregion*/

/*#region Loader*/
.loading {
  color: #00305e !important;
  width: 100vw !important;
  font-family: var(--font-regular) !important;
  font-size: var(--font-size-12) !important;
  height: 12rem !important;
}

  .loading::after {
    border-color: #00305e #f2f5f7 #f2f5f7 !important;
  }

.loadingWrapper {
  z-index: 98 !important;
}
/*#endregion*/

/*#region btns*/
.btn {
  height: 3rem;
}

  .btn:disabled {
    cursor: not-allowed;
    pointer-events: initial;
  }

    .btn:disabled:hover {
      color: unset;
    }

  .btn:focus {
    outline: 0;
    box-shadow: unset;
  }

.back-btn {
  background-color: white;
  color: var(--softtec-medium-blue1);
  border-color: transparent;
  height: 2rem;
  border-radius: 25px;
  width: 5rem;
}

  .back-btn:hover {
    color: var(--softtec-dark-blue);
    border: 1px solid var(--softtec-medium-blue1);
  }

.btn-darkblue {
  background-color: var(--softtec-dark-blue);
  color: #fff !important;
}

.btn-lightblue {
  border-radius: 2rem;
  min-width: 12rem;
}

.btn-medium-blue, .btn-lightblue {
  background-color: var(--softtec-medium-blue1);
  color: #fff !important;
}

  .btn-medium-blue:not(:disabled):hover, .btn-lightblue:not(:disabled):hover {
    color: #fff;
    background-color: var(--softtec-dark-blue);
  }

.btn-darkblue:not(:disabled):hover {
  color: #fff;
  background-color: var(--softtec-medium-blue1);
}

.btn-white {
  color: var(--softtec-medium-blue1);
  background-color: #fff;
  border-color: var(--softtec-medium-blue1);
}

  .btn-white:not(:disabled):hover {
    color: #fff;
    background-color: var(--softtec-medium-blue1);
    border-color: var(--softtec-medium-blue1);
  }

/*----------------------------------------------------*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.st-text-input-button-right {
  position: absolute;
  right: 0 !important;
  top: 0 !important;
  font-weight: 900;
  background-color: transparent !important;
  opacity: 1;
  padding: 0.7rem 1rem;
  border: none;
  width: fit-content;
  min-width: 3rem;
  height: 3rem;
  line-height: unset;
}

.st-input-icon-left {
  position: absolute;
  left: 0.4rem;
  top: 0.75rem;
  text-align: center;
  background-color: transparent;
  color: var(--softtec-medium-blue1);
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--font-size-15);
  padding: 0;
  border: none;
}

  .st-text-input-button-right:disabled, .st-input-icon-left :disabled {
    color: #cdcdcd;
    opacity: .65;
    cursor: not-allowed;
  }

.icon-blue {
  color: var(--softtec-medium-blue1);
}

.icon-blue-selectable {
  color: var(--softtec-medium-blue1);
}

  .icon-blue-selectable:hover {
    color: #00305e;
  }

  .icon-blue-selectable:disabled {
    color: #cdcdcd;
  }

.st-btn-blue {
  background-color: var(--softtec-medium-blue1);
  color: #fff;
  border-color: var(--softtec-medium-blue1);
}

.st-btn-blue-selectable {
  background-color: var(--softtec-medium-blue1);
  color: #fff;
  border-color: var(--softtec-medium-blue1);
}

  .st-btn-blue-selectable:hover {
    background-color: #00305e;
  }

.st-btn-white-selectable {
  background-color: #fff;
  color: var(--softtec-medium-blue1);
  border-color: var(--softtec-medium-blue1);
}

  .st-btn-white-selectable:hover {
    background-color: var(--softtec-medium-blue1);
    color: #fff
  }
/*#endregion*/

/*#region scrollbar*/
::-webkit-scrollbar {
  width: 0;
}

::-webkit-scrollbar-thumb {
  background-color: var(--page-scrollbar-color);
  border-radius: 1rem;
  /*border: .4rem solid var(--page-scrollbar-background);*/
}

  ::-webkit-scrollbar-thumb:horizontal {
    border-top: 3px solid var(--softtec-white);
    border-bottom: 3px solid var(--softtec-white);
  }

.service-groups ::-webkit-scrollbar,
.roomItem-info ::-webkit-scrollbar {
  width: 0;
}

.roomItem-info ::-webkit-scrollbar-thumb:horizontal {
  border-top: 3px solid var(--softtec-white);
  border-bottom: 3px solid var(--softtec-white);
}

.hide-scrollbar::-webkit-scrollbar:horizontal,
.occupancy-body ::-webkit-scrollbar:horizontal {
  scrollbar-width: none;
  height: 0;
}

.service-groups ::-webkit-scrollbar-thumb:horizontal {
  border-top: 3px solid var(--softtec-light-blue2);
  border-bottom: 3px solid var(--softtec-light-blue2);
}

::-webkit-scrollbar-track {
  background: var(--page-scrollbar-background);
  border-radius: 0;
}

/* .occupancy-body ::-webkit-scrollbar-track {
  background: var(--page-occupancy-scrollbar-background);
  border-radius: 0;
}

 .occupancy-body ::-webkit-scrollbar-thumb {
  background-color: var(--page-occupancy-scrollbar-color);
  border-radius: 1rem;
}*/


/*scrollbar tippy-box*/
.tippy-box ::-webkit-scrollbar {
  width: .7rem;
  height: .7rem;
}
/*
.tippy-box ::-webkit-scrollbar-thumb:vertical {
  border: 0;
  background-color: var(--softtec-white) !important;
}

.tippy-box ::-webkit-scrollbar-thumb:horizontal {
  border: 0;
  background-color: var(--softtec-medium-blue1);
}*/
/*#endregion*/

/*#region input/ dropdown */
.border {
  border: 1px solid #dbe2e8 !important;
}

.border-red .border,
.level-border-red > div:first-child,
.bedtype-border-red > div:nth-child(2) {
  border: 1px solid red !important;
}

.st-checkbox-label, .st-checkbox-label > a {
  color: var(--softtec-medium-blue1) !important;
}

.position-relative {
  height: 3rem;
}

.form-floating {
  margin-bottom: 0 !important;
}

  .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label {
    font-size: small;
    opacity: .8;
    transform: scale(.85) translateY(0rem) translateX(0);
  }

.st-multidropdown-menu-filter .form-floating .form-control:disabled {
  background-color: var(--softtec-grey);
  cursor: not-allowed !important;
}

.st-multidropdown-menu-filter .form-floating > .form-control {
  padding: .2rem 0.75rem;
  border-radius: .5rem;
  height: 3rem;
  /*background-color: var(--softtec-light-blue2);*/
  color: var(--softtec-medium-blue1);
  border: none;
  font-size: small;
}

.st-multidropdown-menu-filter .form-floating > label {
  color: var(--softtec-dark-blue);
  padding-top: .2rem;
}

.st-multidropdown-menu-filter .form-floating > .form-control:focus ~ label, .st-multidropdown-menu-filter .form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 1;
  transform: scale(.85) translateY(-.2rem) translateX(0.15rem);
  color: var(--softtec-medium-blue1);
}

.st-multidropdown-menu-filter .form-floating > .form-control:focus,
.st-multidropdown-menu-filter .form-floating > .form-control:hover:not(:disabled) {
  box-shadow: 0 0 2px 2px #a5b7c6;
}

.st-multidropdown-menu-filter .form-floating > .form-control:focus, .st-multidropdown-menu-filter .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: .8rem;
  padding-bottom: 0;
}

.validation-message,
.grid-occupancy .st-dropdown .validation-message {
  display: none;
}

.grid-occupancy .st-dropdown .form-control + label {
  padding: 0 0 .5rem 0 !important;
  height: 2rem !important;
}

.grid-occupancy .st-dropdown .form-floating .form-control {
  border: none;
  height: 2rem !important;
  background-color: transparent;
  color: white;
  padding: 1.5rem 0 .5rem 0 !important;
}

.grid-occupancy .form-floating .form-control:focus, .grid-occupancy .form-floating .form-control:hover {
  box-shadow: none !important;
  outline: 0;
  cursor: pointer;
}

.form-select {
  background-image: url('/css/icons/angle-down_00305e.svg');
  cursor: pointer;
  color: var(--softtec-medium-blue1);
}

.occupancy-container .form-select {
  background-image: url('/css/icons/angle-down_white.svg');
}
.st-dropdown {
  border-radius: .5rem;
  position: relative;
  height: 3rem !important;
  border: none;
  /*background-color: var(--softtec-light-blue2);*/
  padding-bottom: 0;
  font-size: small;
  color: var(--softtec-medium-blue1);
  padding-top: .8rem !important;
  padding-bottom: 0 !important;
  padding-left: 0.75rem !important;
}

  .st-dropdown:hover {
    box-shadow: 0 0 2px 1px white;
  }

  .st-dropdown:focus {
    box-shadow: none;
  }
/*#endregion*/

/*#region popup(tippy-box) */
.tippy-box[data-theme~='pms'] {
  background-color: var(--softtec-medium-blue1);
  border-radius: .8rem;
  max-width: 70rem !important;
  color: var(--softtec-white);
}

  .tippy-box[data-theme~='pms'] > .tippy-svg-arrow svg {
    fill: var(--softtec-medium-blue1);
  }

.tippy-box[data-theme~='package-popup'] > .tippy-svg-arrow svg {
  fill: var(--page-roomItem-package-popup-backgroundColor);
}

.tippy-box[data-theme~='service-popup'] > .tippy-svg-arrow svg {
  fill: var(--page-additionalServiceItem-service-description-popup-backgroundColor);
}

.tippy-box[data-theme~='dropdown'], .tippy-box[data-theme~='package-popup'], .tippy-box[data-theme~='service-popup'] {
  background-color: var(--softtec-medium-blue1);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.tippy-box[data-theme~='dropdown'] {
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
}

.tippy-box[data-theme~='package-popup'] {
  background-color: var(--page-roomItem-package-popup-backgroundColor);
  max-width: 32.2rem !important;
}

.tippy-box[data-theme~='service-popup'] {
  background-color: var(--page-additionalServiceItem-service-description-popup-backgroundColor);
  max-width: 53.75vw !important;
}

.tippy-box[data-theme~='occupancy-child-popup'] {
  background-color: var(--page-occupancy-popup-backgroundColor);
  border-radius: .8rem;
  max-width: 61.5rem !important;
  min-width: 29.6rem !important;
}

  .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content {
    margin-top: -5px;
  }

    .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div {
      display: flex;
      flex-direction: column;
    }

      .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > div {
        color: var(--page-occupancy-popup-font-color);
        cursor: pointer;
        padding: 1rem 0;
      }

        .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > div:hover {
          font-weight: bold;
        }

      .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > hr {
        background-color: var(--page-occupancy-popup-borderColor);
        margin: 0;
      }


      .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > div:first-child {
        padding-top: 0;
      }

      .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > div:last-of-type {
        padding-bottom: 0;
      }

      .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > hr:last-child {
        display: none;
      }

.tippy-content {
  padding: 1.5rem !important;
}

.tippy-box[data-theme~='service-popup'] .tippy-content > div {
  max-height: 40rem;
  overflow: auto;
  color: var(--page-additionalServiceItem-service-description-popup-color);
  line-height: 2rem;
}

.tippy-box[data-theme~='package-popup'] .tippy-content > div {
  border-radius: 1rem;
  text-align: center;
  color: var(--page-roomItem-package-popup-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.tippy-box[data-theme~='package-popup'] .tippy-content > label:first-child {
  font-size: var(--font-size-11);
}

.tippy-box[data-theme~='package-popup'] .tippy-content > div label:last-child {
  line-height: 2rem;
}

.tippy-box[data-theme~='dropdown'] .tippy-content {
  padding: .5rem 0 .5rem .5rem !important;
}

.st-dropdown-menu .st-dropdown-menu-item:first-child, .st-dropdown-menu .st-enumdropdown-menu-item:first-child {
  margin-top: 0;
}

.st-dropdown-input {
  border-radius: .5rem;
  cursor: default;
}

.st-textdropdown-menu-item, .st-enumdropdown-menu-item {
  padding: .5rem 1rem;
  border-radius: 2.5rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  word-break: break-word;
  min-height: 3.5rem;
  font-size: small;
}

  .st-textdropdown-menu-item:hover, .st-enumdropdown-menu-item:hover {
    background: var(--softtec-light-blue2);
    color: var(--softtec-medium-blue1);
    padding: .5rem 1rem;
    cursor: pointer;
  }

.st-multidropdown {
  border: 1px solid #dee2e6 !important;
  border-radius: .5rem !important;
}

.st-textdropdown-menu-item.selected, .st-enumdropdown-menu-item.selected {
  background: var(--softtec-light-blue2);
  padding: .5rem 1rem;
  color: var(--softtec-medium-blue1);
}

  .st-textdropdown-menu-item.selected::after, .st-enumdropdown-menu-item.selected:after {
    content: '\2714';
    font-family: FontAwesome;
    color: var(--softtec-medium-blue1);
  }

/*#endregion*/

/*#offermanager iframe tooltips*/
.tippy-box[data-theme~='room-occupancy-child-popup'] {
  background-color: #555555;
  border-radius: .8rem;
  color: var(--softtec-white);
  max-width: fit-content !important;
}

  .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content {
    margin-top: -5px;
  }

    .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div {
      display: flex;
      flex-direction: column;
    }

      .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div > div {
        color: var(--softtec-white);
        cursor: pointer;
        padding: 1rem 0;
      }

        .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div > div:hover {
          font-weight: bold;
        }

      .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div > hr {
        background-color: var(--softtec-white);
        margin: 0;
      }


      .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div > div:first-child {
        padding-top: 0;
      }

      .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div > div:last-of-type {
        padding-bottom: 0;
      }

      .tippy-box[data-theme~='room-occupancy-child-popup'] .tippy-content > div > hr:last-child {
        display: none;
      }
/*#endregion*/

/*#region carousel*/

.roomItem-image .carousel .carousel-inner,
.roomItem-image .carousel .carousel-inner img {
  border-radius: .8rem .8rem 0 0;
}

.package-details-modal .modal-body .package-images .carousel,
.tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image,
.tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel {
  background-color: var(--softtec-light-blue2);
  border-radius: .8rem;
  height: 18rem;
  max-height: 18rem;
  width: 30rem;
}

  .package-details-modal .modal-body .package-images .carousel .carousel-item .carousel-img,
  .carousel .carousel-item .carousel-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel .carousel-inner,
  .carousel .carousel-inner {
    padding-bottom: 0;
    height: 100%;
    width: 100%;
  }

  .package-details-modal .modal-body .package-images .carousel .carousel-inner {
    border-radius: .8rem .8rem 0 0;
  }

  .tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel .carousel-control-prev,
  .tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel .carousel-control-next,
  .carousel .carousel-control-prev,
  .carousel .carousel-control-next {
    opacity: 1;
  }

  .tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel .carousel-control-next-icon,
  .carousel-control-next-icon {
    background-image: url('icons/angle_left_ffffff.svg');
    transform: rotate(180deg);
  }

  .tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel .carousel-control-prev-icon,
  .carousel-control-prev-icon {
    background-image: url('icons/angle_left_ffffff.svg');
  }

.carousel-control-prev:disabled, .carousel-control-next:disabled {
  opacity: .6;
}

.package-details-modal .modal-body .package-images .carousel .carousel-item .carousel-img,
.tippy-box[data-theme~='package-popup'] .tippy-content > div > .roomItem-image .carousel .carousel-item .carousel-img {
  height: 18rem;
  width: 30rem;
  border-radius: .8rem;
}

/*#endregion*/

/*#region switch-button*/
.st-switch-button {
  background: var(--softtec-medium-blue2);
  border-radius: 2.5rem;
  height: 3rem;
  padding: 0 .4rem 0 .5rem;
  white-space: nowrap;
  display: flex;
  width: fit-content;
}

  .st-switch-button.readonly {
    background-color: var(--softtec-grey);
  }

.st-switch-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  position: relative;
  text-align: center;
  height: 2rem;
  min-width: 2rem;
  margin: .5rem 0;
  width: 50%;
}

.st-switch-button.readonly .st-switch-button-label {
  cursor: not-allowed;
}

.st-switch-button label span {
  font-size: 1.2rem;
}

.st-switch-button-input {
  display: none;
}

  .st-switch-button-input + label {
    cursor: pointer;
    color: white;
    padding: 0 .5rem;
  }

.red-green-switcher.st-switch-button .st-switch-button-input + label {
  padding: 0;
}

.st-switch-button-input.st-switch-button-input-left + label {
  border-right: 0;
}

  .st-switch-button-input.st-switch-button-input-left + label:after {
    left: 100%;
  }

.st-switch-button-input.st-switch-button-input-right + label:after {
  left: -100%;
}

.st-switch-button-input:checked + label {
  cursor: default;
  color: white;
  transition: color 200ms;
  background-color: var(--softtec-dark-blue);
  font-weight: 700;
}

  .st-switch-button-input:checked + label:after {
    left: 0;
  }

.st-switch-button.readonly .st-switch-button-input:checked + label {
  color: white;
  opacity: .65;
  background: #8ea9c4 !important;
}

.conditions-checkbox .st-checkbox-label:hover {
  cursor: pointer;
}
/*#endregion*/

/*#region Grid Container*/
.grid-container-2 {
  display: grid !important;
  grid-template-columns: auto;
  height: auto;
  gap: 1rem;
  align-items: start;
  grid-template-columns: 1fr 1fr;
}

#payment-container .grid-container-2 {
  gap: 2rem !important;
}
/*#endregion*/

/*#region validation */
.show-validation .position-relative:has(.validation-message:not(:empty)) .st-checkbox-wrapper label:after{
  font-family: 'FontAwesome';
  /*the calendar icon in FontAwesome */
  content: '\f071';
  color: var(--softtec-red);
  margin-left: 1rem;
  font-size: 1.6rem;
}

.show-validation .border-red .position-relative .form-select {
  border: 1px solid var(--softtec-red) !important;
}

/*#endregion*/

/*#region media*/
@media (max-width: 1090px) {
  .component-container:not(.occupancy-container) {
    padding-right: 2rem !important;
    padding-left: 2rem;
  }

  #area-guestData {
    padding-right: 1rem !important;
    padding-left: 1rem;
    padding-left: 1rem;
  }

  .modal-custom {
    width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
    height: 80vh;
  }

    .modal-custom .bm-content, .modal-custom .modal-content, .summary-modal .summary-content {
      height: 100%;
      max-height: 100%;
      max-width: unset;
    }

  .summary-modal .modal-body {
    padding: 0;
  }

    .summary-modal .modal-body .summary-reservationData {
      padding: 1rem 0 1rem 0 !important;
    }

  .modal-custom .bm-header {
    padding: 0 0 .5rem 0;
  }
}

@media (max-width: 968px) {
  .component-container {
    padding-top: 1rem;
  }

  .grid-container-2 {
    grid-template-columns: 1fr;
  }

  .font-size-16 {
    font-size: var(--font-size-14);
  }
}

@media (max-width: 830px) {
  .tippy-box[data-theme~='occupancy-child-popup'] {
    min-width: 29rem !important;
  }

    .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > div {
      width: 40rem !important;
    }
}

@media (max-width: 520px) {
  .component-container:not(.occupancy-container) {
    padding-right: 1rem !important;
    padding-left: 1rem;
  }

  #area-guestData {
    padding-right: 1rem !important;
    padding-left: 1rem;
  }

  #payment-container .st-datepicker:focus-within {
    box-shadow: unset !important;
  }

  .tippy-box[data-theme~='occupancy-child-popup'] {
    min-width: 29.9rem !important;
  }

    .tippy-box[data-theme~='occupancy-child-popup'] .tippy-content > div > div {
      width: 26.9rem !important;
    }

  .modal-custom {
    max-height: calc(100vh - 2rem);
    min-height: calc(100vh - 2rem);
    min-height: calc(var(--doc-height) - 2rem);
    max-height: calc(var(--doc-height) - 2rem);
  }

  .size-large {
    border-radius: 1rem 1rem 0 0 !important;
    max-width: 100vw !important;
  }

  .position-middle {
    align-items: end !important;
    justify-content: end !important;
  }

  .modal-custom, .size-large, .size-medium, .modal-popup {
    position: relative;
    animation: animatebottom 0.3s;
  }

  .size-medium {
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
  }

  .modal-popup {
    border-radius: 1rem 1rem 0 0 !important;
    padding: 2rem 1rem !important;
    margin: 0 !important;
  }

    .modal-popup .modal-header {
      padding: 0 0 1rem 0;
    }

    .modal-popup .modal-body {
      padding: 0;
    }

    .modal-popup, .modal-popup .modal-content {
      background-color: var(--page-modal-popup-backgroundColor) !important;
      border-color: var(--page-modal-popup-backgroundColor) !important;
    }

      .modal-popup .modal-body,
      .modal-popup .modal-header.st-popup-header h3 {
        color: var(--page-modal-popup-color);
      }

      .modal-popup .modal-body {
        line-height: 2rem;
        max-height: 70vh;
        overflow: auto;
        padding-inline: 1rem;
      }

      .modal-popup .modal-header.st-popup-header h3,
      .modal-popup .modal-header.st-popup-header .fa-solid {
        color: var(--page-modal-popup-color);
      }

      .modal-popup .modal-header.st-popup-header h3 {
        text-align: center;
        flex: 1;
      }

  .equipment-details-modal {
    width: calc(100vw - 2rem) !important;
  }

  .equipment-details-modal .equipments {
    display: flex;
    flex-direction: column;
    color: var(--softtec-white);
    gap: 1rem;
    overflow: auto;
    max-height: calc(100vh - 8rem);
    max-height: calc(var(--doc-height) - 8rem);
  }

    .equipment-details-modal .room-equipment {
      height: 2.8rem;
      width: 2.8rem;
      background-color: var(--page-roomItem-equipment-backgroundcolor);
      color: var(--page-roomItem-equipment-color);
      border-radius: 50%;
      padding: .2rem;
      min-width: 2.8rem;
    }

      .equipment-details-modal .room-equipment img {
        height: 2.4rem;
        width: 2.4rem;
      }
}


@keyframes animatebottom {
  from {
    bottom: -100dvh;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}
/*#endregion*/