@charset "UTF-8";
/* CSS Document */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  overflow-x: hidden; /* Impedisce lo scorrimento orizzontale indesiderato */
  font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: 100;
  color: rgba(255, 255, 255, 1);
  margin: 0;
  padding: 0;
  background: #4A4A4A;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#calendar {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 90%; /* Larghezza relativa al contenitore */
  max-width: 1200px; /* Larghezza massima per schermi più grandi */
  margin: 0 auto 80px;
  height: auto; /* L'altezza si adatta al contenuto */
  overflow: hidden;
	padding-bottom: 41px;
}

.header {
  height: 50px;
  width: 100%; /* Larghezza relativa al calendario */
  background: rgba(66, 66, 66, 1);
  text-align: center;
  position:relative;
  z-index: 100;
}

.header h1 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 50px;
  font-weight: 100;
  letter-spacing: 1px;
}

.left, .right {
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  top: 50%;
  margin-top: -7.5px;
  cursor: pointer;
}

.left {
  border-width: 7.5px 10px 7.5px 0;
  border-color: transparent rgba(160, 159, 160, 1) transparent transparent;
  left: 5%; /* Posizionamento relativo */
}

.right {
  border-width: 7.5px 0 7.5px 10px;
  border-color: transparent transparent transparent rgba(160, 159, 160, 1);
  right: 5%; /* Posizionamento relativo */
}

.month {
  opacity: 0;
}

.month.new {
  -webkit-animation: fadeIn 1s ease-out;
  opacity: 1;
}

.month.in.next {
  -webkit-animation: moveFromTopFadeMonth .4s ease-out;
  -moz-animation: moveFromTopFadeMonth .4s ease-out;
  animation: moveFromTopFadeMonth .4s ease-out;
  opacity: 1;
}

.month.out.next {
  -webkit-animation: moveToTopFadeMonth .4s ease-in;
  -moz-animation: moveToTopFadeMonth .4s ease-in;
  animation: moveToTopFadeMonth .4s ease-in;
  opacity: 1;
}

.month.in.prev {
  -webkit-animation: moveFromBottomFadeMonth .4s ease-out;
  -moz-animation: moveFromBottomFadeMonth .4s ease-out;
  animation: moveFromBottomFadeMonth .4s ease-out;
  opacity: 1;
}

.month.out.prev {
  -webkit-animation: moveToBottomFadeMonth .4s ease-in;
  -moz-animation: moveToBottomFadeMonth .4s ease-in;
  animation: moveToBottomFadeMonth .4s ease-in;
  opacity: 1;
}

.week {
  background: #4A4A4A;
  display: flex; /* Utilizza Flexbox per disporre i giorni */
  width: 100%; /* Occupa tutta la larghezza del mese */
}

.day {
  flex: 1 0 14.28%; /* Distribuisce equamente lo spazio tra i 7 giorni */
  max-width: 14.28%; /* Assicura che ogni giorno non superi la sua quota */
  padding: 8px; /* Ridotto il padding per schermi più piccoli */
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  background: #4A4A4A;
  position: relative;
  z-index: 100;
  box-sizing: border-box; /* Importante per il corretto calcolo della larghezza */
}

.day.other {
  color: rgba(255, 255, 255, .3);
}

.day.today {
  color: rgba(156, 202, 235, 1);
}
.day.selected {
    background-color: rgba(207, 237, 237, 1); /* Un grigio chiaro per esempio */
    color: #000000;
	border-radius: 5px;
}

/* Stile per i giorni con eventi */
.day.has-events {
    /*background-color: rgba(207, 237, 237, 0.5);*/
	border:1px solid rgba(207, 237, 237, 0.5);
	border-radius: 5px;
}

.day-name {
  font-size: 8px; /* Ridotto la dimensione del font */
  text-transform: uppercase;
  margin-bottom: 3px; /* Ridotto il margine */
  color: rgba(255, 255, 255, .5);
  letter-spacing: .5px; /* Ridotto la spaziatura */
}
.day.selected .day-name {
	color: #000000;
}
.day-number {
  font-size: 18px; /* Ridotto la dimensione del font */
  letter-spacing: 1px; /* Ridotto la spaziatura */
}

.day .day-events {
  list-style: none;
  margin-top: 2px; /* Ridotto il margine */
  text-align: center;
  height: 10px; /* Ridotta l'altezza */
  line-height: 5px; /* Ridotta l'altezza della linea */
  overflow: hidden;
}

.day .day-events span {
  vertical-align: top;
  display: inline-block;
  padding: 0;
  width: 6px; /* Ridotta la larghezza */
  height: 6px; /* Ridotta l'altezza */
  line-height: 4px; /* Ridotta l'altezza della linea */
  margin: 0 0.5px; /* Ridotto il margine */
	box-shadow: 1px 1px 1px 0px rgba(100, 100, 100, 0.5);
}

.azzurro { background: rgba(156, 202, 235, 1); }
.arancione { background: rgba(255, 165, 0, 1); }
.verdino { background: rgba(153, 198, 109, 1); }
.giallo { background: rgba(255, 255, 0, 1); }
.rosso { background: rgba(255, 0, 0, 1); }
.violetto { background: rgba(240, 0, 255, 1); }
.terracotta { background: rgba(204, 102, 0, 1); }
.corallo { background: rgba(255, 127, 80, 1); }
.cioccolato { background: rgba(139, 69, 19, 1); }
.oro { background: rgba(255, 192, 0, 1); }
.salmone { background: rgba(250, 128, 114, 1); }
.beige { background: rgba(167, 141, 62, 1); }
.blu { background: rgba(0, 0, 255, 1); }
.verde { background: rgba(0, 128, 0, 1); }
.viola { background: rgba(128, 0, 128, 1); }
.acqua { background: rgba(0, 144, 236, 1); }
.ciano { background: rgba(0, 255, 255, 1); }
.lavanda { background: rgba(204, 204, 254, 1); }
.notte { background: rgba(25, 25, 112, 1); }
.grigio { background: rgba(170, 170, 170, 1); }
.violaScuro { background: rgba(108, 0, 255, 1); }
.rosa { background: rgba(255, 192, 203, 1); }
.menta { background: rgba(152, 251, 152, 1); }
.celeste { background: rgba(147, 196, 212, 1); }
.ardesia { background: rgba(112, 128, 144, 1); }
.rosaIntenso { background: rgba(255, 20, 147, 1); }
.marroncino { background: rgba(212, 145, 56, 1); }
.crema { background: rgba(255, 253, 208, 1); }
.grigioChiaro { background: rgba(204, 204, 204, 1); }
.petrolio { background: rgba(7, 153, 0, 1); }
.ceruleo { background: rgba(78, 100, 164, 1); }

.details {
	z-index: 99999999999999;
  position: relative;
  width: 100%; /* Larghezza relativa */
  max-width: 1200px; /* Larghezza massima */
  height: auto; /* L'altezza si adatta al contenuto */
  background: rgba(207, 237, 237, 1);
      margin-top: 70px !important;
    margin-left: -100%;
  border-radius: 4px;
  box-sizing: border-box; /* Importante */
  padding: 10px; /* Aggiunto un po' di padding interno */
	color:#000000;
}

.details.in {
  -webkit-animation: moveFromTopFade .5s ease both;
  -moz-animation: moveFromTopFade .5s ease both;
  animation: moveFromTopFade .5s ease both;
}

.details.out {
  -webkit-animation: moveToTopFade .5s ease both;
  -moz-animation: moveToTopFade .5s ease both;
  animation: moveToTopFade .5s ease both;
}

.arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: calc(7.14% - 5px); /* Modificato per tener conto della nuova larghezza */
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent rgba(207, 237, 237, 1) transparent;
  transition: all 0.7s ease;
}

.events {
  height: auto; /* L'altezza si adatta al contenuto */
  padding: 7px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.events.in {
  -webkit-animation: fadeIn .3s ease both;
  -moz-animation: fadeIn .3s ease both;
  animation: fadeIn .3s ease both;
}

.events.in {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  animation-delay: .3s;
}

.details.out .events {
  -webkit-animation: fadeOutShrink .4s ease both;
  -moz-animation: fadeOutShink .4s ease both;
  animation: fadeOutShink .4s ease both;
}

.events.out {
  -webkit-animation: fadeOut .3s ease both;
  -moz-animation: fadeOut .3s ease both;
  animation: fadeOut .3s ease both;
}

.event {
  font-size: 14px; /* Ridotto la dimensione del font */
  line-height: 20px; /* Ridotta l'altezza della linea */
  letter-spacing: .3px; /* Ridotta la spaziatura */
  padding: 2px 10px; /* Ridotto il padding */
  vertical-align: top;
	width: 25%;
	float: left;
	margin-bottom: 10px;
}

.event.empty {
  color: #000000;
}

.event-category {
  height: 10px; /* Ridotta l'altezza */
  width: 10px; /* Ridotta la larghezza */
  display: inline-block;
  margin: 3px 0 0;
  vertical-align: top;
	box-shadow: 1px 1px 1px 0px rgba(100, 100, 100, 0.5);
}

.event span {
  display: inline-block;
  padding: 0 0 0 5px; /* Ridotto il padding */
}

.legend {
  position: fixed; /* Rimane in basso anche durante lo scorrimento */
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto; /* L'altezza si adatta al contenuto */
  background: rgba(60, 60, 60, 1);
  line-height: 30px;
  padding: 5px; /* Aggiunto padding */
  box-sizing: border-box; /* Importante */
  text-align: center; /* Centra la legenda su schermi piccoli */
}

.entry {
  position: relative;
  padding: 5px 0 0 20px; /* Ridotto il padding */
  font-size: 16px; /* Ridotta la dimensione del font */
  display: inline-block;
  line-height: 20px; /* Ridotta l'altezza della linea */
  background: transparent;
  margin-right: 10px; /* Aggiunto margine a destra per spaziatura */
}

.entry:after {
  position: absolute;
  content: '';
  height: 6px; /* Ridotta l'altezza */
  width: 6px; /* Ridotta la larghezza */
  top: 12px; /* Modificato per l'altezza ridotta */
  left: 10px; /* Ridotto la posizione */
}

.entry.azzurro:after { background: rgba(156, 202, 235, 1); }
.entry.arancione:after { background: rgba(255, 165, 0, 1); }
.entry.verdino:after { background: rgba(153, 198, 109, 1); }
.entry.giallo:after { background: rgba(255, 255, 0, 1); }
.entry.rosso:after { background: rgba(255, 0, 0, 1); }
.entry.violetto:after { background: rgba(240, 0, 255, 1); }
.entry.terracotta:after { background: rgba(204, 102, 0, 1); }
.entry.corallo:after { background: rgba(255, 127, 80, 1); }
.entry.cioccolato:after { background: rgba(139, 69, 19, 1); }
.entry.oro:after { background: rgba(255, 192, 0, 1); }
.entry.salmone:after { background: rgba(250, 128, 114, 1); }
.entry.beige:after { background: rgba(167, 141, 62, 1); }
.entry.blu:after { background: rgba(0, 0, 255, 1); }
.entry.verde:after { background: rgba(0, 128, 0, 1); }
.entry.viola:after { background: rgba(128, 0, 128, 1); }
.entry.acqua:after { background: rgba(0, 144, 236, 1); }
.entry.ceruleo:after { background: rgba(78, 100, 164, 1); }
.entry.ciano:after { background: rgba(0, 255, 255, 1); }
.entry.lavanda:after { background: rgba(204, 204, 254, 1); }
.entry.notte:after { background: rgba(25, 25, 112, 1); }
.entry.grigio:after { background: rgba(170, 170, 170, 1); }
.entry.violaScuro:after { background: rgba(108, 0, 255, 1); }
.entry.rosa:after { background: rgba(255, 192, 203, 1); }
.entry.menta:after { background: rgba(152, 251, 152, 1); }
.entry.celeste:after { background: rgba(147, 196, 212, 1); }
.entry.ardesia:after { background: rgba(112, 128, 144, 1); }
.entry.rosaIntenso:after { background: rgba(255, 20, 147, 1); }
.entry.marroncino:after { background: rgba(212, 145, 56, 1); }
.entry.crema:after { background: rgba(255, 253, 208, 1); }
.entry.grigioChiaro:after { background: rgba(204, 204, 204, 1); }
.entry.petrolio:after { background: rgba(7, 153, 0, 1); }

/* Animations are cool!  */
@-webkit-keyframes moveFromTopFade {
  from { opacity: .3; height:0px; margin-top:0px; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTopFade {
  from { height:0px; margin-top:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
  from { height:0px; margin-top:0px; transform: translateY(-100%); }
}

@-webkit-keyframes moveToTopFade {
  to { opacity: .3; height:0px; margin-top:0px; opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTopFade {
  to { height:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
  to { height:0px; transform: translateY(-100%); }
}

@-webkit-keyframes moveToTopFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveToTopFadeMonth {
  to { opacity: 0; -moz-transform: translateY(-30%); }
}
@keyframes moveToTopFadeMonth {
  to { opacity: 0; -moz-transform: translateY(-30%); }
}

@-webkit-keyframes moveFromTopFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveFromTopFadeMonth {
  from { opacity: 0; -moz-transform: translateY(30%); }
}
@keyframes moveFromTopFadeMonth {
  from { opacity: 0; -moz-transform: translateY(30%); }
}

@-webkit-keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%); }
}
@keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%); }
}

@-webkit-keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -moz-transform: translateY(-30%); }
}
@keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%); }
}

@-webkit-keyframes fadeIn  {
  from { opacity: 0; }
}
@-moz-keyframes fadeIn  {
  from { opacity: 0; }
}
@keyframes fadeIn  {
  from { opacity: 0; }
}

@-webkit-keyframes fadeOut  {
  to { opacity: 0; }
}
@-moz-keyframes fadeOut  {
  to { opacity: 0 }
}

@media screen and (max-width: 1024px) {
.event {
	width: 50%;
}
}
@media screen and (max-width: 640px) {
.event {
	width: 100%;
}
	/*.details {
      margin-top: 75px !important;
}
	.day .day-events {
  text-align: left;
  height: 20px;
  line-height: 8px;
}*/
}