.cal_wrapper {
  flex-direction: column;
  align-self: center;
}

.cal_content,
.cal_content *,
.cal_footer {
  display: flex;
  justify-content: center;
}
.cal_footer,
.cal_content,
.cal_month {
  flex-wrap: wrap;
}

.cal_flex {
  display: flex;
  column-gap: .3em;
}

@media all and (min-width: 320px) and (max-width: 480px) {
  /* to align vertical when there are 4 options in the calendar  */
  .cal_flex-vert {
    width: 44%;
  }
}

.cal_footer {
	column-gap: 1em;
	row-gap: .5em;
}


/* mobile vertical */
@media all and (min-width: 320px) and (max-width: 480px) {
  .cal_footer {
	column-gap: .5em;
  }
}

.cal_noscript {
  padding-top: 1em;
}

.cal_toleft:hover,
.cal_toright:hover {
  outline: 0;
  background-color: var(--color-cal-bg-buttons-hover);
}

.cal_toleft,
.cal_toright {
  position: relative;
  display: block;
  align-self: flex-end;
  width: 1.8em;
  height: 1.8em;
  margin: auto;
  /* color: #cccccc; */
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background: black; /* inherit does not work on IE */
/*    background: red; */
  background-color: var(--color-cal-bg-buttons);
  font-size: 1em; /* overwrite user style agent */
}

.cal_toleft span,
.cal_toright span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  margin-top: -8px;
  margin-left: -8px;
}

.cal_icon {
  overflow: hidden;
  width: 16px;
  height: 16px;
  text-indent: -99999px;
  background-image: url(../images/ui-icons_444444_256x240.png);
  background-repeat: no-repeat;
}

.cal_righticon {
  background-position: -48px -192px;
}

.cal_lefticon {
  background-position: -80px -192px;
}

.day {
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
}

.cal_month {
  align-items: flex-start;
  justify-content: space-evenly;
  box-sizing: content-box;
  width: calc(1.6em * 7);
  padding: 1em .75em 1em .75em;
}

/* free.day must before trial.day */
/* if not you don't see the trial period */
.free.day {
  color: var(--color-cal-free-day);
  background-color: var(--color-cal-bg-free-day);
}

/* oor=out of range */
/* future.day must before trial.day */
/* if not you don't see the whole trial period at oor dates */
.future.day,
.past.day {
  color: var(--color-cal-day-oor);
  background-color: var(--color-cal-bg-day-oor);
}

.booked.day {
  color: var(--color-cal-booked-day);
  background-color: var(--color-cal-bg-booked-day);
}

.option.day {
  color: var(--color-cal-option-day);
  background-color: var(--color-cal-bg-option-day);
}

.closed.day {
  color: var(--color-cal-closed-day);
  background-color: var(--color-cal-bg-closed-day);
}

.maintenance.day {
  color: var(--color-cal-maintenance-day);
  background-color: var(--color-cal-bg-maintenance-day);
}

.holiday.booked.day,
.holiday.free.day,
.holiday.closed.day,
.holiday.maintenance.day,
.holiday.option.day {
    background: repeating-radial-gradient(circle, transparent 0px, transparent .6em, var(--color-cal-day) .9em, blue 50px);
}

/* Assign individual colors */
.holiday.booked.day { --color-cal-day: var(--color-cal-booked-day); }
.holiday.free.day { --color-cal-day: var(--color-cal-free-day); }
.holiday.closed.day { --color-cal-day: var(--color-cal-closed-day); }
.holiday.maintenance.day { --color-cal-day: var(--color-cal-maintenance-day); }
.holiday.option.day { --color-cal-day: var(--color-cal-option-day); }

/* must be after .holiday.booked.day */
.trial.day {
  color: var(--color-cal-trial-day);
  border: 1px solid var(--color-cal-trial-day) !important;
  border-radius: 17px;  
  box-sizing: border-box;
}
/* .red.day, */
.trial.booked.day,
.trial.option.day,
.trial.closed.day {
  color: var(--color-cal-day-select-nok);
  border: 1px solid var(--color-cal-day-select-nok) !important;
  background-color: var(--color-cal-bg-day-select-nok);
}

.footer_option.option.day,
.footer_option.maintenance.day,
.footer_option.closed.day,
.footer_option.booked.day,
.footer_option.free.day {
   position: relative;
}

.footer_option.day::before {
  content: "";
  position: absolute;
  inset: 25%;
}

.footer_option.free.day::before {
  background-color: var(--color-cal-free-day) !important;
}

.footer_option.booked.day::before {
  background-color: var(--color-cal-booked-day) !important;
}

.footer_option.closed.day::before {
  background-color: var(--color-cal-closed-day) !important;
}

.footer_option.maintenance.day::before {
  background-color: var(--color-cal-maintenance-day) !important;
}

.footer_option.option.day::before {
  background-color: var(--color-cal-option-day) !important;
}

.cal_footer span {
  color: var(--color-cal-footer-text);
  background-color: inherit;
  font-size: 1em;
}

@media (min-width: 320px) and (max-width: 480px) {
  .cal_footer span {
    /* mobile vertical */
    /* to keep color code and text together */
    /* display: inline; */
  }
}

.cal_month_header h4 {
  flex: 1 0 80%;
  margin: 0;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-cal-header-text);
  font-weight: 500;
  line-height: 1.8em;
}

.cal_month_header {
  flex: 1 0 100%;
  justify-content: center;
}

.day.OfWeek {
 color: var(--color-cal-header-weekdays);
}
/* the following must be behind day.Ofweek */
.day.OfWeek:nth-of-type(7n+1) {
  color: var(--color-cal-sunday);/* !important; */
}

script {
  display: none;
}


@media (min-width: 320px) and (max-width: 480px) {
  /* mobile vertical */
 
  .cal_wrapper {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: larger;
  }
}


/* @media (min-width: 481px) and (max-width: 767px) { */
  /* mobile horizontal */
  /* .cal_wrapper h3 { */
    /* font-size: 2vw; */
  /* } */
/* } */