.date-picker-wrapper {
  position: relative;
  /* width: 100%; */
}

.date-picker-input {
  width: 100%;
  text-align: center;
}

.calendar-spacer {
  position: absolute;
  top: 100%;
  width: 100%;
  min-width: 300px;
  /* min-height: 200px; */
  z-index: 1;
}

.calendar-spacer.time-only {
  min-width: 100px;
}

.calendar-spacer.date-only {
  min-width: 250px;
}

.calendar-wrapper {
  position: relative;
  width: 100%;
  padding-top: calc(66.666% - 1px);
  background: #fff;
}

.calendar-section {
  position: absolute;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr) 2fr;
  border: 1px solid #000;
}

.calendar-section.date-only {
  grid-template-columns: repeat(7, 1fr);
}

.calendar-section.time-only {
  grid-template-columns: 1fr;
}

.calendar-section.date-only .calendar-month-section {
  grid-column: 1 / 8;
}

.calendar-month-section {
  grid-column: 1 / 9;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0px;
  border-bottom: 1px solid #000;
}

.calendar-month {
  display: block;
  width: 10em;
  text-align: center;
}

.calendar-arrow-left {
  width: 0px;
  height: 0px;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-right: 0.5em solid rgb(var(--company-color));
}

.calendar-arrow-right {
  width: 0px;
  height: 0px;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid rgb(var(--company-color));
}

.calendar-period-wrapper {
  grid-column: 8;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid #000;
  border-left: 2px solid #000;
}

.time-only .calendar-period-wrapper,
.time-only .calendar-times {
  grid-column: 1;
}

.calendar-times {
  grid-column: 8;
  grid-row: 3 / 8;
  overflow: auto;
  border-left: 2px solid #000;
  text-align: center;
}

.calendar-times.time-only {
  grid-column: 1;
}

.time-only .calendar-period-wrapper,
.time-only .calendar-times {
  border-left: none;
}

.calendar-times-short {
  grid-row: 3 / 7;
}

.calendar-times-long {
  grid-row: 3 / 9;
}

.calendar-time {
  border-bottom: 1px solid #000;
}

.calendar-time:last-of-type {
  border-bottom: none;
}

.calendar-day-outside {
  background: #eee;
}

.calendar-day {
  border: 1px solid #000;
  border-top: none;
  border-left: none;
  min-width: 32px;
}

.calendar-day.day-left {
  /* border-right: 1px solid #000; */
}

.calendar-day.day-right {
  border-right: none;
}

.calendar-day.day-bottom {
  border-bottom: none;
}

.calendar-day.calendar-day-today {
  color: rgb(var(--company-color));
}

.calendar-time-period {
  display: block;
  padding: 0em 0.5em;
  width: 50%;
  text-align: center;
}

.calendar-day.calendar-day-selected,
.calendar-time.calendar-day-selected,
.period-selected {
  background: rgb(var(--company-color));
  color: rgb(var(--company-font-color));
}

.period-selected {
  height: 100%;
}

.calendar-top {
  bottom: 100%;
  top: unset;
}

.calendar-bottom {
  bottom: 100%;
  
}

.calendar-left {
  right: 0px;
  left: unset;
}

.calendar-right {
  left: 0px;
  right: unset;
}

.calendar-center {
  left: 50%;
  right: unset;
  transform: translate(-50%, 0px);
}