/* ==========================================================================
   CALENDAR
   ========================================================================== 


    
#calendar { box-sizing: border-box; width: 100%; height: auto; display: block;}
#calendar > header { flex-grow: 7; display: flex; align-items: center; justify-content: center; padding: 20px;}
#calendar .day-names { flex-grow: 5; display: flex; align-items: center; }
#calendar .day-names p { flex-grow: 1; text-align: center; }
#calendar .days { flex-grow: 88; display: flex; flex-direction: row; flex-wrap: wrap; }
#calendar .days > div { width: calc(100% * 1/7); }


#calendar { font-weight: 300; text-transform: uppercase; border: 1px solid #D5D5D5; }
#calendar > header { background: #FCFCFC; font-weight: 300; text-transform: uppercase;}
#calendar > header h1 { font-weight: 300; text-transform: uppercase;}
#calendar .day-names { background: #D5D5D5; }
#calendar .day-names, #calendar .days { font-size: 0.825em; color: #666; background: #fff; }
#calendar .spacer  { background: #F5F5F5; color: #ccc;}
#calendar .days > div { box-sizing: border-box; border: 1px solid #F5F5F5; border-width: 1px 0 0 1px; }
.today{background: #F9F7F3;}
.day-number{font-size: 12px; font-weight: 400;}
.day-number a{font-weight: 700;}
.eachapp{font-size: 10px; font-weight: 400;}
.currentapp{width: 100%; background: rgba(255,255,255,0.8); padding: 20px; margin-bottom: 20px; display: block; position: relative;box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;}
.currentappgrey{width: 100%; background: #f6f6f6; padding: 20px; margin-bottom: 20px; display: block; position: relative;box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;}
.chosendate{border: 1px solid #ccc !important;}

.calendarapp{font-size: 12px; font-weight: 400;}


.eachcal{color: #6B2476;}


.spacer{display: none;}
#calendar .days > div { width: calc(100% * 1/1); }
.detailcal{border-bottom: 0px solid #fff; background: #f6f6f6; width: 100%; display: block;}
.detailcal .thedetailcal{padding: 20px;}

.day{outline: 1px solid red; margin-bottom: 10px;}

.nobookings{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; padding: 10px 15px; outline: none; background: #f1f1f1; font-size: 16px; transition: all 0.3s ease; margin-bottom: 2px;}
.nobookings{display: none;}

.detailstoday{background: rgba(56,180,74,0.4);}
.detailstoday summary{background: rgba(56,180,74,0.2);}

.detailspast{opacity: 0.5; display: none;}
.detailspast summary{background: rgba(0,0,0,0.1); color: #bbb; font-size: 14px;}
.detailsfuture{}
.detailsfuture summary{background: rgba(56,180,74,0.1);}*/
/* ==========================================================================
   CALENDAR
   ========================================================================== */
.calendarbody{width: 100%; padding: 40px;}

#calendar { box-sizing: border-box; width: 100%; height: auto; display: flex; flex-direction: column; }
#calendar > header { flex-grow: 7; display: flex; align-items: center; justify-content: center; padding: 20px;}
#calendar .day-names { flex-grow: 5; display: flex; align-items: center; }
#calendar .day-names p { flex-grow: 1; text-align: center; }
#calendar .days { flex-grow: 88; display: flex; flex-direction: row; flex-wrap: wrap; }
#calendar .days > div { width: calc(100% * 1/7); }

/* Appearance */
#calendar { font-weight: 300; border: 1px solid #D5D5D5; }
#calendar > header { background: #FCFCFC; color: var(--green);}
#calendar > header a{ color: var(--green);}
#calendar > header h1 { font-size: 2em;  }
#calendar .day-names { background: #D5D5D5; }
#calendar .day-names, #calendar .days { font-size: 0.825em; color: #666; background: #fff; }
#calendar .spacer  { background: #F5F5F5; color: #ccc; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  cursor: not-allowed; border: 1px solid #F5F5F5;}
#calendar .days > div { box-sizing: border-box; border: 1px solid #F5F5F5; border-width: 1px 0 0 1px; padding: 10px; min-height: 100px;}
.today{background: rgba(56,180,74,0.1);}
.day-number{font-size: 16px; font-weight: 400; width: 100%; border-bottom: 1px solid rgba(26,26,26,0);}
.daycontent{padding-top: 10px;}
.day-number a{font-weight: 700;}
.eachapp{font-size: 10px; font-weight: 400;}
.currentapp{width: 100%; padding: 20px; background: #fff;}
.chosendate{border: 1px solid #ccc !important;}
.eventlink{color: var(--green); font-weight: 300; word-break: normal;}
.eventlink{display: block; padding: 10px 10px; background-color: rgba(0,0,0,0.03); background-image: url(../img/footer-bg-small.png); background-position: top right; background-repeat: no-repeat; color: var(--green, #38B44A); border-left:3px solid var(--green, #38B44A); margin-bottom: 10px; font-weight: 300px; font-size: 10px;}
.eventlink:hover{background: var(--green); color: #fff;}

.engageeventlink{color: #fff; font-weight: 300; word-break: normal;}
.engageeventlink{display: block; padding: 10px 10px; background-color: var(--green); background-image: url(../img/footer-bg-small.png); background-position: top right; background-repeat: no-repeat; color: #fff; border-left:3px solid #fff; margin-bottom: 10px; font-weight: 300px; font-size: 10px;}
.engageeventlink:hover{background: #fff; color: var(--green);}

.digiknoweventlink{color: #fff; font-weight: 300; word-break: normal;}
.digiknoweventlink{display: block; padding: 10px 10px; background-color: var(--digiknowblue); background-image: url(../img/footer-bg-small.png); background-position: top right; background-repeat: no-repeat; color: #fff; border-left:3px solid #fff; margin-bottom: 10px; font-weight: 300px; font-size: 10px;}
.digiknoweventlink:hover{background: #fff; color: var(--digiknowblue);}

.tooltiplink:hover{color: #1a1a1a;}
.tooltiper{position: relative;}
.tooltip__item {
  position: absolute;
  min-width: 150%;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  background: white;
  transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
  transition-delay: 0.5s; 
  color: #484848;
  border: 1px solid #cecece;
  border-radius: 3px;
  font-weight: 500;
  box-shadow: 0 2px 1px #bcbcbc;
  z-index: 4;
    background-image: url(../img/footer-bg-small.png); background-position: bottom right; background-repeat: no-repeat;
}
.tooltip__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.tooltip__initiator {
  cursor: pointer;
  z-index: 5;
}
.tooltiper[data-direction="left"] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(0, -50%, 0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.tooltiper[data-direction="left"] .tooltip__item {
  top: 50%;
  right: calc(100% + 1em);
  transform: translate3d(15px, -50%, 0);
}
.tooltiper[data-direction="left"] .tooltip__item:after {
  top: 50%;
  right: -0.5em;
  transform: translate3d(0, -50%, 0);
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent white;
  -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
  filter: drop-shadow(1px 2px 1px #bcbcbc);
}
.tooltiper[data-direction="bottom"] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.tooltiper[data-direction="bottom"] .tooltip__item {
  top: calc(100% + 1em);
  left: 50%;
  transform: translate3d(-50%, -15px, 0);
}
.tooltiper[data-direction="bottom"] .tooltip__item:after {
  top: -0.5em;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent white transparent;
  -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
  filter: drop-shadow(1px -1px 1px #bcbcbc);
}
.tooltiper[data-direction="bottom"] .tooltip__item:hover {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

@media only screen and (max-width: 1000px) {
    #calendar .days > div { width: calc(100% * 1/1); }
    #calendar .spacer{display: none;}
    #calendar .noevents{display: none;}
    .eventlink{padding: 10px 20px; font-size: 14px;}
    .tooltip__item { min-width: 100%;}
    .tooltip__item { max-width: 100%;}
}