.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  font-family: "Alef", sans-serif;
  height: calc(100vh - 150px);
  overflow: scroll;
  margin: 50px 0 0 0;
}

.timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
}

.timelineOrario {
  padding-top: 76px;
}

.time-marker {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-start;
}

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
}

.events {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}

/* // Place on Timeline */

/* START */
.start-600 {
  grid-row-start: 1;
}

.start-630 {
  grid-row-start: 2;
}

.start-700 {
  grid-row-start: 3;
}

.start-730 {
  grid-row-start: 4;
}

.start-800 {
  grid-row-start: 5;
}

.start-830 {
  grid-row-start: 6;
}

.start-900 {
  grid-row-start: 7;
}

.start-930 {
  grid-row-start: 8;
}

.start-1000 {
  grid-row-start: 9;
}

.start-1030 {
  grid-row-start: 10;
}

.start-1100 {
  grid-row-start: 11;
}

.start-1130 {
  grid-row-start: 12;
}

.start-1200 {
  grid-row-start: 13;
}

.start-1230 {
  grid-row-start: 14;
}

.start-1300 {
  grid-row-start: 15;
}

.start-1330 {
  grid-row-start: 16;
}

.start-1400 {
  grid-row-start: 17;
}

.start-1430 {
  grid-row-start: 18;
}

.start-1500 {
  grid-row-start: 19;
}

.start-1530 {
  grid-row-start: 20;
}

.start-1600 {
  grid-row-start: 21;
}

.start-1630 {
  grid-row-start: 22;
}

.start-1700 {
  grid-row-start: 23;
}

.start-1730 {
  grid-row-start: 24;
}

.start-1800 {
  grid-row-start: 25;
}

.start-1830 {
  grid-row-start: 26;
}

.start-1900 {
  grid-row-start: 27;
}

.start-1930 {
  grid-row-start: 28;
}

.start-2000 {
  grid-row-start: 29;
}

.start-2030 {
  grid-row-start: 30;
}

.start-2100 {
  grid-row-start: 31;
}

.start-2130 {
  grid-row-start: 32;
}

.start-2200 {
  grid-row-start: 33;
}

.start-2230 {
  grid-row-start: 34;
}

/* End */
.end-600 {
  grid-row-end: 1;
}

.end-630 {
  grid-row-end: 2;
}

.end-700 {
  grid-row-end: 3;
}

.end-730 {
  grid-row-end: 4;
}

.end-800 {
  grid-row-end: 5;
}

.end-830 {
  grid-row-end: 6;
}

.end-900 {
  grid-row-end: 7;
}

.end-930 {
  grid-row-end: 8;
}

.end-1000 {
  grid-row-end: 9;
}

.end-1030 {
  grid-row-end: 10;
}

.end-1100 {
  grid-row-end: 11;
}

.end-1130 {
  grid-row-end: 12;
}

.end-1200 {
  grid-row-end: 13;
}

.end-1230 {
  grid-row-end: 14;
}

.end-1300 {
  grid-row-end: 15;
}

.end-1330 {
  grid-row-end: 16;
}

.end-1400 {
  grid-row-end: 17;
}

.end-1430 {
  grid-row-end: 18;
}

.end-1500 {
  grid-row-end: 19;
}

.end-1530 {
  grid-row-end: 20;
}

.end-1600 {
  grid-row-end: 21;
}

.end-1630 {
  grid-row-end: 22;
}

.end-1700 {
  grid-row-end: 23;
}

.end-1730 {
  grid-row-end: 24;
}

.end-1800 {
  grid-row-end: 25;
}

.end-1830 {
  grid-row-end: 26;
}

.end-1900 {
  grid-row-end: 27;
}

.end-1930 {
  grid-row-end: 28;
}

.end-2000 {
  grid-row-end: 29;
}

.end-2030 {
  grid-row-end: 30;
}

.end-2100 {
  grid-row-end: 31;
}

.end-2130 {
  grid-row-end: 32;
}

.end-2200 {
  grid-row-end: 33;
}

.end-2230 {
  grid-row-end: 34;
}

.end-2300 {
  grid-row-end: 35;
}

.end-2330 {
  grid-row-end: 36;
}

/* // Event */

.eventTitle {
  font-weight: 600;
  margin-bottom: 0;
  font-size: 12px;
  &.holiday {
    width: 25%;
    color: black;
  }
}

.event .time {
  margin-bottom: 0;
  font-size: 12px;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 3px 20px;
  margin: 0 0.5rem;
  background: white;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.space,
.date {
  height: calc(var(--timeHeight));
}

.date {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  position: fixed;
  top: 120px;
}

/* // Global / Etc */

.class-L {
  background: var(--eventColor1);
}

.class-1 {
  background: var(--eventColor2);
}

.class-B,
.class-2 {
  background: var(--eventColor3);
}

.class-W {
  background: var(--eventColor4);
}

.class-A,
.class-C {
  background: var(--eventColor5);
}

.class-J {
  background: var(--eventColor6);
}

.class-K {
  background: var(--eventColor7);
}

.class-T {
  background: var(--eventColor8);
}

.class-G {
  background: var(--eventColor9);
}

.class-E {
  background: var(--eventColor10);
}

.class-Q {
  background: var(--eventColor11);
}

.class-V {
  background: var(--eventColor12);
}

.class-N {
  background: var(--eventColor13);
}

.class-U {
  background: var(--eventColor14);
}

.class-off {
  border: none;
  background: transparent;
  justify-content: center;
}

.date-num {
  font-size: 20px;
  font-weight: 600;
  display: inline;
}

.date-day {
  display: flex;
  font-size: 20px;
  font-weight: 100;
  margin-right: 4px;
  height: 100%;
  align-items: center;
}

.searchWrapper {
  margin: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.warningBtn {
  position: absolute;
  right: 0;
}

.searchWrapper input {
  height: 30px;
  margin-right: 10px;
}

.searchWrapper button {
  background: transparent;
  cursor: pointer;
  border: none;
}

.searchWrapper .optionTextInput {
  display: block;
  width: 140px;
  font-family: "Alef", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  padding: 5px;
  border: 1px var(--color-black) solid;
  border-radius: 3px;
  background-color: var(--color-white);
  color: var(--color-green);
}

.time-marker__mobile {
  display: none;
}

.day--week {
  width: unset;
  border: unset;
  padding: unset;
  border-radius: unset;
  position: relative;
}

.cardNote--week.cardNote--weekOrari {
  height: 65px;
  .cardNoteTextWrapper {
    height: 100%;
  }
}

.calendarBtn {
  border: none;
  background: transparent;
  padding: 0 0 0 5px;
  cursor: pointer;
}

.wrapperOre {
  margin: 10px 0px !important;
  background: var(--eventColor2);
}
/* UTILITA */
.container--ut {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}

.wrapperOre--ut {
  background: var(--eventColor8);
}

/* ACCORDEON FERIE */
.container--sh {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordions--sh {
  width: 100%;
  margin: 0 auto;
}

.accordion--sh {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.4s ease-in-out;
  background-color: var(--calBgColor);
}

.accordion--sh:hover {
  border-color: #000;
}

.accordion__header--sh {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem;
  color: #666;
}

.accordion__header--sh:after,
.accordion__header--sh:before {
  content: "";
  position: absolute;
  right: 1.5em;
  width: 2px;
  height: 0.75em;
  background-color: #666;
  transition: all 0.2s ease-in-out;
}

.accordion__header--sh:after {
  transform: rotate(90deg);
}

.accordion--sh:has(input:checked) .accordion__header--sh {
  color: #000;
}

.accordion__content--sh {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  * {
    padding: 0 1em 1em;
  }
}

.accordion--sh input {
  display: none;
}

.accordion--sh:has(input:checked) {
  border-color: #000;
  background-color: #fff;
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.accordion--sh input:checked ~ .accordion__header--sh:before {
  transform: rotate(270deg) !important;
  background-color: #000;
}

.accordion--sh input:checked ~ .accordion__header--sh:after {
  transform: rotate(270deg) !important;
  background-color: #000;
}

.accordion--sh input:checked ~ .accordion__content--sh {
  max-height: 1000px; /* Adjust based on content length */
}

.eventStory--sh {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
}

@media only screen and (max-width: 1024px) {
  .calendarBtn {
    padding: 0 0 0 20px;
    cursor: pointer;
  }

  .date {
    justify-content: flex-end;
    position: unset;
    padding: 24px 0;
  }

  .days {
    display: grid;
    gap: 10px;
    grid-template-columns: calc(100vw - var(--padding-mobile));
  }

  .day--week {
    border: 1px solid black;
    padding: 5px;
    border-radius: 4px;
  }

  .timelineWrapper {
    display: none;
  }

  .timeline__mobile {
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  }

  .event {
    grid-column: 2;
    border: 1px solid var(--eventBorderColor);
    border-radius: 5px;
    padding: 0 20px;
    margin: 0 0.5rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }

  .time-marker__mobile {
    display: block;
    position: relative;
  }

  .time-marker_mobile::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 2px;
    background-color: lightgrey;
  }

  .events {
    display: grid;
    grid-template-rows: repeat(var(--numHours), var(--timeHeight));
    grid-template-columns: repeat(1, 20px 1fr);
    border-radius: 5px;
    background: var(--calBgColor);
  }

  .calendar {
    gap: 0;
    grid-template-rows: auto;
    grid-template-columns: 0px auto;
    margin: 10px 0;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .calendar-dash .days {
    display: grid;
    gap: 5px;
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 1280px) {
  .date-day {
    font-size: 16px;
  }

  .date-num {
    font-size: 16px;
  }
}