.datepicker.datepicker-inline {
  width: 75%;
  margin: 0 auto;
  padding: 2px 3px;
}

/* for mobile devices make it 100% */
@media (max-width: 767px) {
  .datepicker.datepicker-inline {
    width: 100%;
  }
}

.datepicker.datepicker-inline table.table-condensed th.next,
.datepicker.datepicker-inline table.table-condensed th.prev {
  font-size: 36px;
}

.datepicker.datepicker-inline table tr td.active,
.datepicker.datepicker-dropdown table tr td.range-start,
.datepicker.datepicker-dropdown table tr td.range,
.datepicker.datepicker-dropdown table tr td.range-end {
  font-size: 16px;
}

.block_hints.datepick {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.block_hints__item {
  flex: 0 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  margin: 10px 15px 5px 0;
}

.block_hints .block_free {
  background-color: hsla(0, 0%, 50.2%, 0.0705882353);
  font-weight: 600;
  width: 30px;
  height: 30px;
  line-height: 28px;
}

.block_hints .block_hints__item__text {
  margin-left: 5px;
}

.block_hints .block_booked {
  background-color: #fb9902;
  font-weight: 600;
  width: 30px;
  height: 30px;
  line-height: 28px;
}

.block_hints .block_hints__item__color {
  border: 1px solid #ccc;
}

.gf-readonly input,
.gf-readonly select,
.gf-readonly textarea {
  pointer-events: none;
  background-color: #eee !important; /* Optional: visual feedback */
}

.appointments-container {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  margin: 10px;
  border: 1px solid #ddd;
}

.appointment-header,
.appointment-row {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.appointment-header {
  background-color: #f5f5f5;
  font-weight: bold;
}

.appointment-cell {
  flex: 1;
  text-align: center;
  margin: 5px;
}

h3.upcoming-appointments-header {
  text-align: center;
}
.datepicker.datepicker-inline .datepicker-switch {
  background-color: #2f43ae !important;
  color: #fff !important;
  font-size: 20px;
}
.datepicker.datepicker-inline {
  border: 1px solid #2f43ae;
}
.datepicker.datepicker-inline table.table-condensed th.next,
.datepicker.datepicker-inline table.table-condensed th.prev {
  color: #2f43ae;
}
.datepicker.datepicker-inline tfoot th.today {
  background-color: #2f43ae !important;
  font-size: 16px;
  text-transform: uppercase;
  color: white;
}
.datepicker.datepicker-inline tfoot tr th.clear:hover {
  background: #fbd204;
  color: black;
}
.datepicker.datepicker-inline table tr td.active:active,
.datepicker.datepicker-inline table tr td.active:hover:active,
.datepicker.datepicker-inline table tr td.active.disabled:active,
.datepicker.datepicker-inline table tr td.active.disabled:hover:active,
.datepicker.datepicker-inline table tr td.active.active,
.datepicker.datepicker-inline table tr td.active.active:hover,
.datepicker.datepicker-inline table tr td.active.disabled.active,
.datepicker.datepicker-inline table tr td.active.disabled.active:hover,
.datepicker.datepicker-inline
  table
  tr
  td.active
  .datepicker.datepicker-inline
  table
  tr
  td.active:hover,
.datepicker.datepicker-inline table tr td.active.disabled,
.datepicker.datepicker-inline table tr td.active.disabled:hover,
.datepicker.datepicker-inline table tr td span.active:active,
.datepicker.datepicker-inline table tr td span.active:hover:active,
.datepicker.datepicker-inline table tr td span.active.disabled:active,
.datepicker.datepicker-inline table tr td span.active.disabled:hover:active,
.datepicker.datepicker-inline table tr td span.active.active,
.datepicker.datepicker-inline table tr td span.active.active:hover,
.datepicker.datepicker-inline table tr td span.active.disabled.active,
.datepicker.datepicker-inline table tr td span.active.disabled.active:hover,
.datepicker.datepicker-inline table tr td span.focused,
.datepicker.datepicker-inline table tr td span.active,
.datepicker.datepicker-inline table tr td span.active:hover,
.datepicker.datepicker-inline table tr td span.active.disabled,
.datepicker.datepicker-inline table tr td span.active.disabled:hover {
  background-color: #2f43ae;
}
.datepicker.datepicker-inline td.available:hover,
.datepicker.datepicker-inline th.available:hover,
.datepicker.datepicker-inline table tr td span:hover,
.datepicker.datepicker-inline table tr td.day:hover {
  background-color: #2f43ae;
  color: #fff;
}
.datepicker.datepicker-inline table tr td.today {
  background-color: #2f43ae;
  background-image: linear-gradient(to bottom, #2f43ae, #1fa2ed);
  background-repeat: repeat-x;
}
.block_hints.datepick {
  display: none;
}