/* Additional Bootstrap Class */
.row-cols-7 > * {
  flex: 0 0 auto;
  width: 14.285714286%;
}

/* Utility */
/* Forces dynamically sized text to its full size for element width
initiation in Javascript */
.full-size-text {
  font-size: 2rem;
}

/* Calendar styles */
.calendar {
  color: white;
  text-shadow: 1px 1px 2px #A0AEBA;
  background-image: linear-gradient(160deg, #729791, #DCF9DC, #BAA0BA);
  overflow: hidden;
  position: relative;
}

.calendar .overlay {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(160deg, #729791, #DCF9DC, #BAA0BA);
  z-index: 1;
}

.calendar .overlay .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.calendar .title {
  text-align: center;
  position: relative;
  z-index: 2;
}

.calendar.col p {
  overflow: hidden;
}

/* Styles for Calendar Navigation */
.calendarNav h2 {
  margin-bottom: 0;
}

.calendarNav .arrow {
  width: 36px;
  height: 36px;
  fill: rgba(178, 255, 243, 0.8);
  margin-left: 6px;
  margin-right: 6px;
  transition: fill 0.1s ease-out;
  cursor: pointer;
}

.calendarNav .arrow circle {
  fill: rgba(255, 184, 255, 0.8);
  stroke: rgba(178, 255, 243, 0.8);
  stroke-width: 2;
  transition: fill 0.1s ease-out, stroke 0.1s ease-out;
}

/*
#  On mobile the buttons will get stuck on their hover state after being tapped
#  so hover state is only applied to devices with the capacity to hover.
*/
@media (any-hover: hover) {
  .calendarNav .arrow:hover {
    fill: #b2fff3;
  }

  .calendarNav .arrow:hover circle {
    fill: #ffb8ff;
    stroke: #b2fff3;
  }

  .calendarNav .arrow:active {
    fill: #b2fff3;
  }

  .calendarNav .arrow:active circle {
    fill: #fecdaa;
    stroke: #b2fff3;
  }
}
@media (any-hover: none) {
  .calendarNav .arrow:active {
    fill: #b2fff3;
  }

  .calendarNav .arrow:active circle {
    fill: #fecdaa;
    stroke: #b2fff3;
  }
}
/* dateBox and dayLabel styles */
.dayLabel {
  text-align: center;
  text-shadow: none;
  margin-top: 20px;
}

.dayLabel p {
  background-color: rgba(255, 184, 255, 0.8);
  border-radius: 20px;
}

.dateBoxesWrapper {
  position: relative;
}

.dateBox {
  padding: 0;
}

.dateBox.empty, .dateBox p.empty {
  user-select: none;
}

.dateBox.active {
  /* border styles further down sheet */
  background-color: rgba(255, 184, 255, 0.8);
}

.dateBox.active.today h3 {
  background-color: #fecdaa;
  background-image: radial-gradient(#fecdaa 50%, #FDa835);
  border-radius: 15px;
}

.dateBox h3 {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 1px;
  margin-top: 1px;
}

.dateBox p {
  margin-bottom: 5px;
  margin-left: 4px;
  margin-right: 4px;
  padding-left: 4px;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  height: 3em;
}

.dateBox.event p {
  background-color: #fecdaa;
  background-image: radial-gradient(#FED0AE, #fecdaa, #FDa835);
  border-radius: 8px;
}

@media (any-hover: hover) {
  /* some aspects of this are nice, some ugly */
  .dateBox.event:hover {
    cursor: pointer;
    background-color: rgba(255, 184, 255, 0.9);
    box-shadow: inset 0 0 5px 5px white;
  }

  .dateBox.event:hover p {
    background-image: radial-gradient(#FDa835, #fecdaa, #FED0AE);
    color: #b2fff3;
  }

  .dateBox.event:hover h3 {
    color: #b2fff3;
  }
}
@media only screen and (min-width: 992px) {
  .dateBox p {
    height: 1.5em;
    -webkit-line-clamp: 1;
    text-align: center;
  }
}
/*
#  A complex system to set the dateBox borders without
#  having to set additional classes in Javascript.
#  Depends on there being exactly 49 children divs in the
#  row-cols-7 row div
*/
.dateBox.active {
  /* non-border styles handled earlier in sheet */
  border-bottom: 2px solid rgba(178, 255, 243, 0.8);
  border-left: 2px solid rgba(178, 255, 243, 0.8);
}

.dateBox.active:nth-of-type(n+1):nth-of-type(-n+7) {
  border-top: 2px solid rgba(178, 255, 243, 0.8);
  border-bottom: 0;
}

.dateBox.active:nth-of-type(n+8):nth-of-type(-n+14) {
  border-top: 2px solid rgba(178, 255, 243, 0.8);
}

.dateBox.active:nth-of-type(7n+7) {
  border-right: 2px solid rgba(178, 255, 243, 0.8);
}

.dateBox.active + .dateBox.empty:not(.dateBox.empty:nth-of-type(7n+8)) {
  border-left: 2px solid rgba(178, 255, 243, 0.8);
}

/* animations */
.spin {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.bounce {
  animation: bounce 3s linear infinite;
}

@keyframes bounce {
  0% {
    top: 50%;
  }
  25% {
    top: 46%;
  }
  75% {
    top: 54%;
  }
  100% {
    top: 50%;
  }
}
.slideInRight {
  animation-name: slideInRight;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes slideInRight {
  0% {
    left: 110%;
  }
  100% {
    left: 0;
  }
}
.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes slideInLeft {
  0% {
    right: 110%;
  }
  100% {
    right: 0;
  }
}