html, body {
  height: 100%;
}

body {
  background-color: var(--body-background);
  color: var(--body-text-color);
  font-family: var(--body-font-family);
  font-optical-sizing: auto;
  font-weight: var(--body-font-weight);
  font-style: normal;
}

body.widget {
  background-color: var(--widget-background);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f2f5f8;
  z-index: 2000;
}
.loader.transparent {
  background-color: transparent;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

.lds-ring {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 19px;
  height: 19px;
  margin: 6px;
  border: 3px solid var(--loader-color);
  border-radius: 50%;
  -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--loader-color) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

@-webkit-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.create-reservation {
  padding-bottom: 70px;
  /* General buttons */
  /* Form fields */
}
.create-reservation .btn {
  border-radius: var(--general-btn-border-radius);
}
.create-reservation .btn.btn-primary {
  background-color: var(--primary-btn-background-color) !important;
  border-color: var(--primary-btn-border-color) !important;
  color: var(--primary-btn-text-color) !important;
}
.create-reservation .btn.btn-primary:hover {
  background-color: var(--primary-btn-background-color-hover) !important;
  border-color: var(--primary-btn-border-color-hover) !important;
  color: var(--primary-btn-text-color-hover) !important;
}
.create-reservation .btn.btn-danger {
  background-color: var(--danger-btn-background-color) !important;
  border-color: var(--danger-btn-border-color) !important;
  color: var(--danger-btn-text-color) !important;
}
.create-reservation .btn.btn-danger:hover {
  background-color: var(--danger-btn-background-color-hover) !important;
  border-color: var(--danger-btn-border-color-hover) !important;
  color: var(--danger-btn-text-color-hover) !important;
}
.create-reservation .form-control, .create-reservation .custom-select {
  border-radius: var(--form-field-border-radius);
}
.create-reservation .logo-container {
  display: flex;
  justify-content: center;
}
.create-reservation .logo-container img {
  max-width: 250px;
  max-height: 250px;
}
.create-reservation .fieldset {
  border-radius: var(--border-radius);
  background-color: var(--info-block-background);
  border: 1px solid var(--info-block-border-color);
}
.create-reservation .fieldset.fieldset-gray {
  background-color: #f2f5f8;
  border: 1px solid #ced4da;
}
.create-reservation .fieldset.gradient .gradient-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--info-block-gradient-overlay);
  margin: 1.5rem 1.5rem 1.05rem 1.5rem;
  border-radius: var(--border-radius);
}
.create-reservation .card-header {
  background-color: var(--results-header-bg);
  border-color: var(--results-header-bg);
  color: var(--results-header-text-color);
  font-weight: var(--results-header-font-weight);
}
.create-reservation .card-body .product-row td.image-col {
  width: 124px;
}
.create-reservation .card-body .product-row img {
  max-width: 100px;
  max-height: 100px;
}
.create-reservation .card-body .product-row .product-title {
  font-family: var(--title-font-family);
  font-weight: var(--title-font-weight);
  color: var(--title-text-color);
}
.create-reservation .cart {
  width: calc(100% - 30px);
  position: fixed;
  bottom: 0;
  left: 15px;
}
.create-reservation .cart .summary {
  width: 70%;
  background-color: var(--cart-summary-bg);
  height: 50px;
  border-radius: var(--summary-btn-border-radius);
  color: var(--cart-summary-text-color);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-reservation .cart .checkout {
  width: 30%;
  background-color: var(--cart-checkout-bg);
  height: 50px;
  border-radius: var(--checkout-btn-border-radius);
  color: var(--cart-checkout-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  transition: background-color 250ms ease-out;
}
.create-reservation .cart .checkout.disabled {
  background-color: var(--cart-checkout-disabled-bg);
  color: var(--cart-checkout-disabled-text-color);
  cursor: not-allowed;
}
.create-reservation .cart .checkout .circle {
  background-color: var(--circle-bg);
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
  top: -5px;
  right: -5px;
  color: var(--circle-text-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.create-reservation .back-btn {
  padding: 15px;
  margin-left: -15px;
  display: inline-block;
  margin-top: -15px;
  cursor: pointer;
}
.create-reservation .collapse-btn-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.create-reservation .collapse-btn-container .collapse-btn {
  margin-bottom: 1.5rem;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 5px;
}
.create-reservation.kiosk .qr-code img {
  width: 300px;
  margin-bottom: 1rem;
}
.create-reservation.kiosk .qr-code .payment-status {
  margin-bottom: 1rem;
}