
.calendar {
  margin: 1% auto;
  width: 90vw;
  max-width: 1500px;
  display: flex;
  flex-wrap: wrap;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  color: #222222;
  --accent-color: #d32229;
  --accent-color-dimm: #7f161e; 
}

.carousel {
  margin: 0 auto;
  width: 90%;
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;

}
/* width */
.carousel::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.carousel::-webkit-scrollbar-track {
  background: #f0f0f0;
}

/* Handle */
.carousel::-webkit-scrollbar-thumb {
  background: var(--accent-color);
}

/* Handle on hover */
.carousel::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color-dimm);
}

.day {
  margin: 1rem 1rem 1rem;
  background-color: #f0f0f0;
  border-radius: 15px;
  padding: 0 1rem 1rem;
  /* min-width: 28%; */
  min-width: calc(100% / 3 - 2rem);

  flex-basis: 90%;
}

.day h2 {
  border-bottom: 3px solid var(--accent-color);
  font-size: 20px;
  font-weight: bold;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;;
  padding: 0 0 5px;
  margin: 1em 0;
}
.program {
  margin: 15px auto 0;
  font-size: 1em;
}

.program * {
  margin: 0 15px 0;
}

.programTitle {
  font-weight: bold;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;;

}

.programTime {
  margin: 0;
}
.programSubtitle {
  padding: 0.15em 0;
  font-weight:600;
}
.guideTitle {
  font-weight: bold;
  margin: 1rem calc(5% + 1rem) 0;
}

.guideDescription {
  margin: 1rem calc(5% + 1rem);
}


.left,
.right {
  width: 5%;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--accent-color);
  ;
  font-size: 5em;
  overflow: hidden;
  z-index: 100;
  size: 2em;
}
.left:hover,
.right:hover {
  color: var(--accent-color-dimm);
  ;
}

.break{
  flex-basis: 100%;

}


@media only screen and (max-width: 900px) {
    .carousel {
      flex-wrap: wrap;
     }
    .left,
    .right {
        display: none;
     }
    .carousel::-webkit-scrollbar-track {
      display: none;
    }
    .calendar{
      width: 100vw;
    }
}
