.blobs-container {
	display: flex;
	justify-content:left;
	align-items:center;
}
.eventWrapper {
    display: flex;
    flex-direction: column;
    padding-top:10px;
}

@media (max-width:767px){
.center-header {
    font-size: 1rem!important;
}
.left-header {
    text-align: center!important;
}

header{
    height: 135px!important;
    flex-wrap: wrap;
    flex-direction: column-reverse!important;
    padding: 5px!Important;
    justify-content: space-evenly!Important;

}



header > div{
 width:100%!Important;
}
.customTable {
    width: 100vw!important;
    min-height: unset!Important;
    display: flex;
    flex-direction: column;
    overflow: scrollbar;
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
}
.wrapperTable {
    height: unset;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding:7px;
}
}

html{
    background:#090e23;
}
.dayName .dayNumber:before {
    content: "|";
    right: 50px;
    color: #090e23;
}
.table-bordered>:not(caption)>*>* {
    border-width: 0px 4px;
    border-color: #090e23;
}
.dayName .dayNumber {
    font-size: 35px;
}
@media(min-width:768px){
.dayName {
    width: calc(100% / 7);
    position: fixed;
    height: 50px ! Important;


}

}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 40px;
    font-family: "Open sans", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding:  0 7px 0 8px;
    background: #100d32;
    color:white;
}

.left-header {
    color: #FFD700;
    font-size: 15px;
}

header img {
height: 30px;
    margin-left: 15px;
    }

header > div{
width:calc(100% / 3);
}

main{
background-color: #100d32;
height:100vh;
overflow:hidden;
}

.right-header {
    text-align: right;
    display: flex;
    justify-content: end;
    align-items: center;
}

.center-header {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 3px;
}
span.actual-time {
    width: 60px ! Important;
    display: inline-block;
    font-size: 15px;
    margin-left: 5px;
}
@media(max-width:768px){

main {

    background-color: #100d32;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
}
}

main div{
 display:flex;
}

.blob {
	background: black;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 10px 10px 10px 0;
    height: 20px;
	width: 20px;
	transform: scale(1);
	animation: pulse-black 2s infinite;
}

p.tipologia{
    text-transform: lowercase;
}

@keyframes pulse-black {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.blob.white {
	background: white;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
	animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.blob.red {
	background: rgba(255, 82, 82, 1);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}

.blob.orange {
	background: rgba(255, 121, 63, 1);
	box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
	animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
	}
}

.blob.yellow {
	background: rgba(255, 177, 66, 1);
	box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
	animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
	}
}

.blob.blue {
	background: rgba(52, 172, 224, 1);
	box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
	animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
	}
}

.blob.green {
	background: rgba(51, 217, 178, 1);
	box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
	animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
	}
}

.blob.purple {
	background: rgba(142, 68, 173, 1);
	box-shadow: 0 0 0 0 rgba(142, 68, 173, 1);
	animation: pulse-purple 2s infinite;
}

@keyframes pulse-purple {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
	}
}
        html, body {
            height: 100%;
            margin: 0;
        }

        body {
            font-family: 'Oswald', sans-serif;

            background-color: #f8f9fa;
        }
        .wrapperTable{
            height: 95vh;
            overflow:auto;
            display:flex;
            flex-direction:column;
            padding:0 7px;
            position: relative; /* Per il posizionamento dell'animazione */
        }

/* Nasconde la scrollbar su tutti i dispositivi */
::-webkit-scrollbar {
    display: none; /* Per Chrome, Safari e Opera */
        }
        .wrapperTable .dayName {
            font-size: 27px;
            z-index: 4;
            transition: transform 0.3s ease-out;
            width: 100%;
            padding: .5rem 22px 10px 22px;
        }

        .mainWrapper{
         display:flex;
        }


        @media(max-width:767px){
         .mainWrapper{
         display:flex;
        }
        p#last-refresh {
    width: 100vw;
    margin: 2px 0 2px;
    color: white;
    display: none;
}

        .dayName {
            position: sticky;
            top: 0px;

         /* Aggiungi altre proprietà per il design */
        }

                .hidden {
    transform: translateY(-100%); /* Spinge fuori l'elemento */
}

        }

        @media (min-width:768px){
         .wrapperTable .dayName {
            position: sticky;
            top: -5px;
            font-size: 27px;
            z-index: 9999;
            width: 100%;
            padding: .5rem 22px 10px 22px;
        }

        }
        .customTable {
            width: calc(100% / 7);
            min-height: 100vh; /* Occupare il 90% dell'altezza della viewport */
            display: flex;
            flex-direction: column;
            overflow:hidden;
    position: relative; /* Per il posizionamento dell'animazione */
        }

        .titolo{
            padding-top:5px;
            }

        h4 {
            font-size: 1.1rem; /* Dimensione del titolo adattiva */
            text-align: left;
            margin: 10px 0;
        }

        p#last-refresh {
            font-size: clamp(0.8rem, 2vw, 1rem); /* Dimensione del testo adattiva */
            text-align: center;
        }

        .calendar-table {
            width: 100%;
            height: 100%;
            table-layout: fixed;
        }

        .calendar-table .dayName {
            height: calc(100% / 10); /* Altezza adattiva per ogni riga della tabella */
            padding: 10px;
            text-align: left;
            vertical-align: top;
            overflow: hidden; /* Impedire il testo di fuoriuscire */
            font-size: clamp(0.8rem, 2vw, 1rem); /* Dimensione del testo adattiva */
        }
        .table{
            border:unset!important;
        }

        .dayName {
            background-color: #b12a30!important;
            color: white;
            font-family: "Oswald", sans-serif;
            font-weight:400;
            text-transform: uppercase;
            letter-spacing: 1.8px;
                    display: flex;
        justify-content: space-between;
        align-items: center;
        }


.event {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    padding: 0 15px 15px 15px;
    border-radius: 5px;
    text-align: left;
    background: #343d5c;
    position: relative;
    color: white !important;
    min-height:130px;
}
.fa-bookmark:before {
    content: "\f02e";
    position: absolute;
    top: 0;
    font-size: 40px;
    color: #b12a30;
}
.fa-bookmark.giallo:before{
    color: #f6a400;
}
.fa-bookmark.rossoKurukulle:before{
    color: #b12a30;
}
.fa-bookmark.arancione:before{
    color: #ea5b0c;
}
.fa-bookmark.verde:before{
    color: #4b9440;
}
.fa-bookmark.viola:before{
    color: #D52E7C;
}
.fa-bookmark.rosso:before{
    color: #b12a30;
}
.fa-bookmark.blu:before{
    color: #3172B9;
}



h5.data {
    text-align: right;
    margin:10px 0;
    width:100%;
}
.gompa {
    text-transform: uppercase;
    width: fit-content;
}
.titolo{
    border-top: 4px solid #b12a30;
}
.titolo.giallo{
    border-top: 4px solid #f6a400;
}
.titolo.rossoKurukulle{
    border-top: 4px solid #b12a30;
}
.titolo.arancione{
    border-top: 4px solid #ea5b0c;
}
.titolo.verde{
    border-top: 4px solid #4b9440;
}
.titolo.viola{
    border-top: 4px solid #e6007e;
}
.titolo.rosso{
    border-top: 4px solid #b12a30;
}
.titolo.blu{
    border-top: 4px solid #3172B9;
}


.header_event{
 position:relative;
 height:40px;
}
.block_info{
  margin-top:10px;
  display:flex;
  flex-direction:column;
}
@media(min-width:768px){

        .event h5 {
            font-size: clamp(0.8rem, 2vw, 1.2rem); /* Font adattivo per il titolo degli eventi */
        }
        }

        .event p {
            font-size: 100%;
            margin-bottom: 3px;
            font-family: "Open Sans", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            width:100%;

        }

        .event-Sala {
        background-color: #335c67;
        color:white;

        }
        .event-Dharmapala
        { background-color: #540b0e;
        color:white;

        }
        .event-Gompa
        { background-color:
        #9e2a2b;
        color:white;

        }
        .event-Tara,
        .event-Aperto { background-color: #6a994e;
        color:white;
        }
          .event.event-Non.specificato {
    background: #f5db84 !important;
    color: brown;
}
        /* Media Queries per dispositivi più piccoli */
        @media (max-width: 768px) {
            .day, .calendar-table td {
                height: auto; /* Altezza flessibile per schermi più piccoli */
                padding: 5px;
            }
            .wrapperTable{
            height: unset;

        }


        }
        p#last-refresh {
          width:100vw;
          margin: 2px 0 2px;
          color: white;
        }



.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto;
    left: 1%!Important;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto;
    right: 1%!important;
}
@media (max-width: 768px) {
main.no-swiper{
display:none;
}
    h5.titolo{
    font-size:1.8rem!important;

    }
    .wrapperTable {
        height: 100vh;
        width: 88%;
        margin: 0px 6%;
    }
    main.swiper-container{
 display:block;
         height: 100vh ! Important;
        overflow-y: scroll;
    }
    p.streaming {
    font-size: 17px;
}
    i.fa-brands.fa-youtube {
    margin-right: 6px;
}
}

}

@media(min-width:768px){
    .swiper-container{
    display:none!important;
    }
    main.no-swiper{
   display:flex!Important;
    }
}



.swiper-button-prev {
    color: white!important;
}

.swiper-button-next {
    color: white!important;
}

img.logo {
    vertical-align: middle;
    width: 100%;
    padding: 10px;
 }