.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 {
  /* color: var(--color-cal-day); */
  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-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);
}

/* .green.day, */
.trial.day {
  background-color: var(--color-cal-bg-day-select-ok);
}
/* .red.day, */
.trial.booked.day,
.trial.option.day,
.trial.maintenance.day {
  background-color: var(--color-cal-bg-day-select-nok) ;
}

/* .free.day, */
.trial.day,
.option.day ,
.booked.day,
.maintenance.day,
.closed.day {
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--color-cal-day-border);
}

.xselectable {
 cursor: pointer;
 /* -webkit-tap-highlight-color: transparent;  */
}

.xselectable:hover {
  color: var(--color-cal-hover) !important;
  background-color: var(--color-cal-bg-hover);
}

.booked.day {
  color: var(--color-cal-day);
  background-color: var(--color-cal-bg-booked-day);
  /* background-image: repeating-linear-gradient(45deg,transparent 0 3px,black 3px 6px); */
}

.option.day {
  color: var(--color-cal-day);
  background-color: var(--color-cal-bg-option-day);
  /* background-image: repeating-linear-gradient(45deg,transparent 0 3px,black 3px 6px); */
}

.maintenance.day {
  color: var(--color-cal-day);
  background-color: var(--color-cal-bg-maintenance-day);
  background-image: repeating-linear-gradient(45deg,transparent 0 3px,black 3px 6px);
}

.closed.day {
  color: var(--color-cal-day);
  background-color: var(--color-cal-bg-closed-day);
  background-image: repeating-linear-gradient(45deg,transparent 0 3px,black 3px 6px);
}

.holiday {
  color: var(--color-cal-holiday) !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;
/*  font-size: 1em; */
  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:nth-of-type(7n+1) {
  color: var(--color-cal-sunday);/* !important; */
}

script {
  display: none;
}

.cloneCont {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  margin-top: -10.89em;
  margin-left: -5em;
  transform: scale(2, 2);
  animation: redimensionar .5s cubic-bezier(.86, 0, .07, 1);
  background-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 5px 1px #ccc;
}

.cal_month.cloneMonth {
  display: flex;
}

.cal_month.cloneMonth::after {
  position: absolute;
  top: 1em;
  right: 1em;
  content: "\02718";
  color: #f09;
}

.cloneCont.trans {
  transform: translateY(1000px);
  animation: trasladar .5s cubic-bezier(.86, 0, .07, 1);
  opacity: 0;
  background-color: rgba(255, 255, 255, .9);
}

@keyframes redimensionar {
  0% {
    transform: scale(1, 1);
    opacity: 0;
    background-color: rgba(255, 255, 255, .9);
  }
  100% {
    transform: scale(2, 2);
    opacity: 1;
    background-color: rgba(255, 255, 255, .9);
  }
}

@keyframes trasladar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}


@media (min-width: 320px) and (max-width: 480px) {

/* @media screen and (max-width: 400px)
{ */
  /* 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;
  }
}


/* #block-views-block-visits-block-1, */
/* #block-fj-visitsperyear, */
/* #block-fj-nightspermonth, */
/* #block-fj-top10formblock { */
  /* margin-top: 1em; */
/* } */