.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  font-family: "Alef", sans-serif;
  height: calc(100vh - var(--heightdifference));
  overflow: scroll;
  margin: 50px 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(150px, 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));
  margin-bottom: 15px;   
}

.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-I,
.class-R, 
.class-F,
.class-H,
.class-S, 
.class-M, 
.class-P, 
.class-X, 
.class-Y, 
.class-Z, 
.class-D{
  
} */


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

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

.date-day {
  display: inline;
  font-size: 24px;
  font-weight: 100;
  margin-right: 10px;
}

.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;

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

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

@media only screen and (max-width: 768px) {
  .calendarBtn{
    padding: 0 0 0 20px;
    cursor: pointer;
  }
  .date{
    justify-content: flex-end;
    position: unset;
  }
  .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;
    height: 100vh;
    margin: 10px 0;
    overflow-x: hidden;
    &::-webkit-scrollbar{
      display: none;}
  }
  .calendar-dash .days{   
    display: grid;
    gap: 5px;
    grid-template-columns: auto;
  }
}


.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 .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;
}