/**
 * @package   mod_sismosappointment  v2.0.1
 *
 * @link  https://simplysmart-it.de
 * @copyright   (C) 2021 - 2024 Martina Scholz - SimplySmart-IT <https://simplysmart-it.de>. All rights reserved.
 */

:root {
  --sismos-appointmentmodal-text:rgb(62 62 62 / 100%);
  --sismos-appointmentmodal-highlight:rgb(48 99 141 / 100%);
  --sismos-appointmentmodal-highlighttext:rgb(255 255 255 / 100%);
}
.booking-tab__options {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}
.booking-tab__options .radio.form-check {
  padding-left: 0;
}
.booking-tab__options .radio.form-check label {
  height: 100%;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: solid 1px var(--template-bg-dark-20);
  border-radius: .25rem;
  padding: .65rem;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: 0 3px 10px -2px hsla(150, 5%, 65%, .5);
  position: relative;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.05rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.booking-tab__options .radio.form-check .form-check-input[type=radio] {
  width: 0;
  opacity: 0;
}
.booking-tab__options .radio.form-check .form-check-input[type=radio]:not(:disabled) ~ label {
  cursor: pointer;
}
.booking-tab__options .radio.form-check .form-check-input[type=radio]:disabled ~ label {
  color: #bcc2bf;
  border-color: #bcc2bf;
  box-shadow: none;
  cursor: not-allowed;
}
.booking-tab__options .radio.form-check .form-check-input[type=radio]:checked + label {
  color: var(--success);
  font-weight: 500;
}
.booking-tab__options .radio.form-check .form-check-input[type=radio]:checked + label::after {
  font-family: "Font Awesome 6 Free", sans-serif;
  font-weight: 900;
  border: 2px solid var(--success);
  color: var(--success);
  content: "\f00c";
  font-size: 1.5rem;
  position: absolute;
  top: -.5rem;
  left: -1rem;
  height: 3.2rem;
  width: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  border-radius: 15%;
  background: #fff;
  box-shadow: 0 2px 5px -2px hsla(0, 0%, 0%, .25);
}
.booking-tab__options .radio.form-check .form-check-input[type=radio]:focus + label {
  border-color: var(--sismos-appointmentmodal-highlight);
  outline: 0;
  outline: currentcolor none 0;
  box-shadow: 0 2px 5px -2px hsla(0, 0%, 0%, .25);
}
.tab-content > .booking-tab__parts.tab-pane {
  display: none;
}
.tab-content > .booking-tab__parts.tab-pane.active {
  display: block;
}
.tab-content > .booking-tab__parts.tab-pane.fade:not(.show) {
  opacity: 0;
}
.tab-content > .booking-tab__parts.active [role=radiogroup] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
}
@media screen and (width >= 576px) {
  .tab-content > .booking-tab__parts.active [role=radiogroup] {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 1.5rem;
  }
}
@media screen and (width >= 992px) {
  .tab-content > .booking-tab__parts.active [role=radiogroup] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (width >= 1400px) {
  .tab-content > .booking-tab__parts.active [role=radiogroup] {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.booking-tab-slider {
  --gray-400:#ced4da;
  --gray-200:#eaedf0;
  display: flex;
  flex-wrap: nowrap;
  -moz-column-gap: 0.65rem;
  column-gap: .65rem;
  margin-top: .5rem;
}
.booking-tab-slider__next,
.booking-tab-slider__prev {
  width: 55px;
  height: auto;
  background: #fff;
  border: solid 1px var(--gray-200);
  border-radius: .25rem;
  box-shadow: 0 3px 10px -2px hsla(150, 5%, 65%, .5);
  color: var(--sismos-appointmentmodal-text);
}
.booking-tab-slider__list {
  display: flex;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: auto 0;
  margin-top: .65rem;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  width: 100%;
  padding: 0;
  list-style: none;
}
.booking-tab-slider__list::-webkit-scrollbar {
  width: 0 !important;
}
.booking-tab-slider__item {
  width: 94px;
}
.booking-tab-slider__anchor {
  background: #fff;
  border: solid 1px var(--gray-400);
  border-radius: .05rem;
  padding: .5rem .85rem;
  color: var(--sismos-appointmentmodal-text);
}
.booking-tab-slider__anchor.active {
  border-color: var(--sismos-appointmentmodal-highlight);
  background-color: var(--sismos-appointmentmodal-highlight);
  color: var(--sismos-appointmentmodal-highlighttext);
}
.booking-tab-slider__anchor:disabled {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, .015),
      rgba(0, 0, 0, .015) 14px,
      rgba(0, 0, 0, .075) 14px,
      rgba(0, 0, 0, .075) 20px);
}
.booking-tab-slider__dateexp {
  white-space: nowrap;
  word-break: keep-all;
}
.booking-tab-slider__dateexp .primary-dateexp {
  font-weight: 700;
}
@media screen and (width >= 576px) {
  #appointment-form-container {
    padding: 0 1rem;
  }
}
#appointment-form-container label {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#appointment-form-container fieldset {
  min-width: 0;
}
#appointment-form-container fieldset#appointment-datetime {
  margin-bottom: 1.25rem;
}
#appointment-form-container legend {
  font-size: initial;
}
#appointment-form-container .row {
  --gutter-x:1em;
  --gutter-y:0;
  display: flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-.5 * var(--gutter-x));
  margin-left: calc(-.5 * var(--gutter-x));
}
#appointment-form-container .row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left: calc(var(--gutter-x) * .5);
  margin-top: var(--gutter-y);
}
#appointment-form-container .col-md-6:nth-child(2n) {
  padding-right: 2rem;
}
#appointment-form-container .col-md-6 .form-control {
  width: 100%;
}
@media (width >= 768px) {
  #appointment-form-container .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
#appointment-form-container input.invalid {
  border: 2px dashed var(--danger,red);
}
#appointment-form-container label.invalid {
  color: var(--danger,red);
}
#appointment-form-container input.valid {
  border: 1px solid var(--success,green);
}
div.com-contact__form.appointment-form {
  margin-right: 1.45rem;
  margin-left: .5rem;
}
@media screen and (width >= 576px) {
  div.com-contact__form.appointment-form {
    margin-left: 1.15rem;
  }
}
@media screen and (width >= 768px) {
  div.com-contact__form.appointment-form {
    margin: 0 1.65rem;
  }
}
button[data-sismosappointment] {
  margin: 2rem;
  display: block;
}
th button[data-sismosappointment] {
  margin: .5rem .75rem .5rem 1rem;
  display: inline-block;
}
td button[data-sismosappointment] {
  margin-left: 0;
  margin-top: .25rem;
}
.booking-info {
  text-align: right;
  font-size: .85rem;
  font-style: italic;
  color: #707070;
  margin-right: 2.5rem;
}
.booking-info__text {
  margin-left: .35rem;
}
.appointmentErrContainer {
  font-size: 2.25rem;
  padding: .75rem;
}
.appointmentErrContainer button {
  font-size: 1.75rem;
  margin: 2.5rem 0;
}