@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

.gc-calendar {
    font-family: Inter,sans-serif;
    background-color: #fff;
    padding: 1rem
}

    .gc-calendar .gc-calendar-header {
        background-color: #fff;
        padding: 2px;
        height: max-content;
        display: flex;
        align-items: center;
        margin-bottom: 40px
    }

        .gc-calendar .gc-calendar-header button.next, .gc-calendar .gc-calendar-header button.prev {
            height: 36px;
            left: 0;
            top: 0;
            border-radius: 100px;
            background: #fff;
            border-radius: 100px;
            position: relative;
            display: inline-block;
            border: 0;
            padding: 4px 15px;
            font-size: 18px;
            box-shadow: inset 0 -1px 0 #edf2f7;
            cursor: pointer;
            color: #7a7a9d;
            font-weight: 700;
            margin-right: 10px
        }

            .gc-calendar .gc-calendar-header button.next:hover, .gc-calendar .gc-calendar-header button.prev:hover {
              
            }

            .gc-calendar .gc-calendar-header button.next:focus, .gc-calendar .gc-calendar-header button.prev:focus {
                box-shadow: 0 3px 6px rgba(0,0,0,.08),0 7px 14px rgba(50,50,93,.1);
                outline: 0;
                border: 0
            }

        .gc-calendar .gc-calendar-header button.prev {
            margin-left: 20px
        }

        .gc-calendar .gc-calendar-header .gc-calendar-month-year {
            font-style: normal;
            font-weight: 600;
            font-size: 28px;
            color: #38385c;
            line-height: 136.02%;
            min-width: 220px
        }

    .gc-calendar table.calendar {
        width: 100%
    }

        .gc-calendar table.calendar th {
            text-align: start;
            font-weight: 600;
            font-size: 14px;
            line-height: 136.02%;
            padding: 2px;
            text-transform: uppercase;
            color: #7a7a9d;
            position: relative;
            padding-bottom: 12px
        }

        .gc-calendar table.calendar td {
            height: 100px;
            position: relative;
            padding: 3px 5px;
            vertical-align: top;
            width: calc(100% / 7)
        }
/* Stile della barra di scorrimento verticale in tutti i browser */
.btn-gc-cell {
    height: 100px;
    display: block;
    overflow-y: auto; /* Abilita lo scorrimento verticale quando il contenuto supera l'altezza specificata */
    max-height: 100px; /* Imposta la massima altezza consentita per l'elemento */
}

    /* Imposta il colore del cursore della barra di scorrimento */
    .btn-gc-cell::-webkit-scrollbar-thumb {
        background-color: #4F547B; /* Per Chrome e browser basati su WebKit */
    }

    .btn-gc-cell::-webkit-scrollbar-thumb {
        background-color: #4F547B; /* Per Firefox */
    }

    .btn-gc-cell::-webkit-scrollbar-thumb {
        background-color: #4F547B; /* Per Edge */
    }

    /* Imposta il colore di sfondo della barra di scorrimento */
    .btn-gc-cell::-webkit-scrollbar-track {
        background-color: transparent; /* Per Chrome e browser basati su WebKit */
    }

    .btn-gc-cell::-webkit-scrollbar-track {
        background-color: transparent; /* Per Firefox */
    }

    .btn-gc-cell::-webkit-scrollbar-track {
        background-color: transparent; /* Per Edge */
    }
::-webkit-scrollbar {
    width: 3px;
}

            .gc-calendar table.calendar td.next-month .day-number, .gc-calendar table.calendar td.prev-month .day-number {
                color: #b5b5bd
            }

            .gc-calendar table.calendar td .day-number {
                font-size: 24px;
                font-weight: 800;
                line-height: 38.09px;
                overflow-y: auto;
                color: #38385c;
                text-decoration: none;
                display: block
            }

.gc-calendar table.calendar td .today .day-number, .btn-gc-cell .today .day-number {
    color: #E78E34 !important
}

        .gc-calendar table.calendar a {
            text-decoration: none;
            display: block
        }

            .gc-calendar table.calendar a:hover {
              
            }

                .gc-calendar table.calendar a:hover .day-number {
                    color: #fff
                }

        .gc-calendar table.calendar th::before, .gc-calendar table.calendar tr:not(:last-child) td::before {
            content: "";
            display: block;
            width: 90%;
            height: 0px;
            border-radius: 1px;
            bottom: 0;
            left: 0;
            position: absolute
        }

        .gc-calendar table.calendar td:hover {
           
        }

.gc-calendar .gc-event {
    display: block;
    font-size: 13px;
    margin:0 3px 5px 0;
    line-height: 14px;
    border-bottom: 1px solid white;
    padding-bottom: 2px;
}

.slide-in-left {
    -webkit-animation: slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-left .5s cubic-bezier(.25,.46,.45,.94) both
}

.slide-in-right {
    -webkit-animation: slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both
}

.slide-out-left {
    -webkit-animation: slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both;
    animation: slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both
}

.slide-out-right {
    -webkit-animation: slide-out-right .5s cubic-bezier(.55,.085,.68,.53) both;
    animation: slide-out-right .5s cubic-bezier(.55,.085,.68,.53) both
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }
}

@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }
}

@-webkit-keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }
}

@keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }
}

.event {

    cursor: pointer;
}

.gc-event {
    padding: 5px;
    color: white !important;
    background: #34A853
}
.visible-xs {
    display: none;
}
@media screen and (max-width: 768px) {
    .gc-calendar table.calendar td, .btn-gc-cell {
     height:80px;
    }
    .gc-calendar .gc-event {
        margin: 0 0 2px 0;
    }
    .gc-event {
        font-size: 0 !important; /* Nasconde il testo impostando la dimensione del carattere a 0 */
        line-height: 0 !important;
    }
    .hidden-xs {
        display: none;
    }
    .visible-xs {
        display: block;
    }
}
.cat_7 {
    background: #E8543E !important;

}
.cat_6 {
    background: #E78E34 !important;
}
.cat_8 {
    background: #508EF0 !important;
}
.cat_9 {
    background: #7545F0 !important;
}
