#garbage_calendar {
    --gc-abiti-usati: #ffb87a;
    --gc-rifiuto-batterie: #ff5b3f;
    --gc-carta: #ffc100;
    --gc-centro-raccolta: #7783f5;
    --gc-impianti-specializzati: #d9075d;
    --gc-medicinali: #a5c9cd;
    --gc-plastica: #7783f5;
    --gc-rifiuto-secco: #3E3D3E;
    --gc-umido: #926127;
    --gc-vetro: #009E6E;
    --gc-imballaggi-plastica-e-metalli: #4EA8DF;
    --gc-sfalci: #76B817;
    --gc-pannolini: #F4CF93;
    --gc-residuo-secco: #3E3D3E;
    --gc-border-rad: 4px;
    --gc-calendar-h: 600px;
    --gc-calendar-bg: #ffffff;
    --gc-calendar-header-footer-bg: #E5EEF7;
}

/* Calendar legend colors */
.gc-abiti-usati::after {
    background-color: var(--gc-abiti-usati);
}
.gc-rifiuto-batterie::after {
    background-color: var(--gc-rifiuto-batterie);
}
.gc-carta::after {
    background-color: var(--gc-carta);
}
.gc-centro-raccolta::after {
    background-color: var(--gc-centro-raccolta);
}
.gc-impianti-specializzati::after {
    background-color: var(--gc-impianti-specializzati)
}
.gc-medicinali::after {
    background-color: var(--gc-medicinali);
}
.gc-plastica::after {
    background-color: var(--gc-plastica);
}
.gc-rifiuto-secco::after {
    background-color: var(--gc-rifiuto-secco);
}
.gc-umido::after {
    background-color: var(--gc-umido);
}
.gc-vetro::after {
    background-color: var(--gc-vetro);
}
.gc-imballaggi-plastica-e-metalli::after {
    background-color: var(--gc-imballaggi-plastica-e-metalli);
}
.gc-sfalci::after {
    background-color: var(--gc-sfalci);
}
.gc-pannolini::after {
    background-color: var(--gc-pannolini);
}
.gc-residuo-secco::after {
    background-color: var(--gc-residuo-secco);
}

/* Calendar bullets colors */
.gc_day-events .gc_pannolini {
    background-color: var(--gc-pannolini);
}
.gc_day-events .gc_residuo-secco {
    background-color: var(--gc-residuo-secco);
}
.gc_day-events .gc_sfalci {
    background-color: var(--gc-sfalci);
}
.gc_day-events .gc_abiti-usati {
    background-color: var(--gc-abiti-usati);
}
.gc_day-events .gc_rifiuto-batterie {
    background-color: var(--gc-rifiuto-batterie);
}
.gc_day-events .gc_carta {
    background-color: var(--gc-carta);
}
.gc_day-events .gc_rifiuto-secco {
    background-color: var(--gc-rifiuto-secco);
}
.gc_day-events .gc_centro-raccolta {
    background-color: var(--gc-centro-raccolta);
}
.gc_day-events .gc_impianti-specializzati {
    background-color: var(--gc-impianti-specializzati);
}
.gc_day-events .gc_medicinali {
    background-color: var(--gc-medicinali);
}
.gc_day-events .gc_plastica {
    background-color: var(--gc-plastica);
}
.gc_day-events .gc_rifiuto-secco {
    background-color: var(--gc-rifiuto-secco);
}
.gc_day-events .gc_umido {
    background-color: var(--gc-umido);
}
.gc_day-events .gc_vetro {
    background-color: var(--gc-vetro);
}
.gc_day-events .gc_imballaggi-plastica-e-metalli {
    background-color: var(--gc-imballaggi-plastica-e-metalli);
}

/* Calendar details: colors */
.gc_event.gc-abiti-usati span {
    background-color: var(--gc-abiti-usati);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-rifiuto-batterie span {
    background-color: var(--gc-rifiuto-batterie);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-carta span {
    background-color: var(--gc-carta);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-centro-raccolta span {
    background-color: var(--gc-centro-raccolta);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-impianti-specializzati span {
    background-color: var(--gc-impianti-specializzati);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-pannolini span {
    background-color: var(--gc-pannolini);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-imballaggi-plastica-e-metalli span {
    background-color: var(--gc-imballaggi-plastica-e-metalli);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-residuo-secco span {
    background-color: var(--gc-residuo-secco);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-sfalci span {
    background-color: var(--gc-sfalci);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-medicinali span {
    background-color: var(--gc-medicinali);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-plastica span {
    background-color: var(--gc-plastica);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-rifiuto-secco span {
    background-color: var(--gc-rifiuto-secco);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-umido span {
    background-color: var(--gc-umido);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}
.gc_event.gc-vetro span {
    background-color: var(--gc-vetro);
    border-radius: var(--gc-border-rad);
    padding: 2px 4px;
    color: white;
}

/* CALENDAR */
#garbage_calendar {}
#garbage_calendar select {
    background-color: var(--nectar-extra-color-1);
    color: white;
    padding: 8px 16px;
    margin-bottom: 8px;
}
#garbagecalendar {
    color: var(--nectar-extra-color-1);
    background: var(--gc-calendar-bg);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
    margin: 0 auto;
    height: var(--gc-calendar-h);
    overflow: hidden;
}
/* Calendar header */
.gc_header {
    height: 50px;
    width: 100%;
    background: var(--gc-calendar-header-footer-bg);
    text-align: center;
    position:relative;
    z-index: 100;
}
.gc_header h1 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 50px;
    font-weight: 100;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gc_left, .gc_right {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    top: 50%;
    margin-top: -7.5px;
    cursor: pointer;
}
.gc_left {
    border-width: 7.5px 10px 7.5px 0;
    border-color: transparent #283C59 transparent transparent;
    left: 20px;
}
.gc_right {
    border-width: 7.5px 0 7.5px 10px;
    border-color: transparent transparent transparent #283C59;
    right: 20px;
}
.gc_month {
    /*overflow: hidden;*/
    opacity: 0;
}
.gc_month.gc_new {
    -webkit-animation: fadeIn 1s ease-out;
    opacity: 1;
}
.gc_month.gc_in.gc_next {
    -webkit-animation: moveFromTopFadeMonth .4s ease-out;
    -moz-animation: moveFromTopFadeMonth .4s ease-out;
    animation: moveFromTopFadeMonth .4s ease-out;
    opacity: 1;
}
.gc_month.gc_out.gc_next {
    -webkit-animation: moveToTopFadeMonth .4s ease-in;
    -moz-animation: moveToTopFadeMonth .4s ease-in;
    animation: moveToTopFadeMonth .4s ease-in;
    opacity: 1;
}
.gc_month.gc_in.gc_prev {
    -webkit-animation: moveFromBottomFadeMonth .4s ease-out;
    -moz-animation: moveFromBottomFadeMonth .4s ease-out;
    animation: moveFromBottomFadeMonth .4s ease-out;
    opacity: 1;
}
.gc_month.gc_out.gc_prev {
    -webkit-animation: moveToBottomFadeMonth .4s ease-in;
    -moz-animation: moveToBottomFadeMonth .4s ease-in;
    animation: moveToBottomFadeMonth .4s ease-in;
    opacity: 1;
}
/* Calendar body */
.gc_week {
    background: var(--gc-calendar-bg);
}
.gc_day {
    display: inline-block;
    width: calc(100% / 7);
    padding: 10px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background: var(--gc-calendar-bg);
    position: relative;
    z-index: 100;
    height: 75px;
}
.gc_day.gc_other {
    color: var(--gc-calendar-header-footer-bg);
}
.gc_day.gc_today {
    color: #FF5338;
    border: 1px solid rgba(229, 238, 247, .9)
}
.gc_day-name {
    font-size: 9px;
    line-height: 9px;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: rgba(40, 60, 89, .5);
    letter-spacing: .7px;
}
.gc_day-number {
    font-size: 24px;
    letter-spacing: 1.5px;
}
.gc_day .day-events {
    list-style: none;
    margin-top: 3px;
    text-align: center;
    height: 12px;
    line-height: 6px;
    overflow: hidden;
}
.gc_day .gc_day-events span {
    vertical-align: top;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 12px;
    height: 6px;
    line-height: 6px;
    margin: 0 1px;
    border-radius: var(--gc-border-rad);
}
/* Calendar details */
.gc_details {
    position: relative;
    width: calc(100% - 10px);
    /*height: 75px;*/
    background: var(--gc-calendar-header-footer-bg);
    margin-top: 5px;
    border-radius: var(--gc-border-rad);
    margin-left: 5px;
}
.gc_notes {
    display: inline-block;
}
.gc_details.gc_in {
    -webkit-animation: moveFromTopFade .5s ease both;
    -moz-animation: moveFromTopFade .5s ease both;
    animation: moveFromTopFade .5s ease both;
}
.gc_details.gc_out {
    -webkit-animation: moveToTopFade .5s ease both;
    -moz-animation: moveToTopFade .5s ease both;
    animation: moveToTopFade .5s ease both;
}
.gc_arrow {
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -2px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #E5EEF7 transparent;
    transition: all 0.7s ease;
}
.gc_events {
    padding: 7px 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.gc_events.gc_in {
    -webkit-animation: fadeIn .3s ease both;
    -moz-animation: fadeIn .3s ease both;
    animation: fadeIn .3s ease both;
}
.gc_events.gc_in {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}
.gc_details.gc_out .gc_events {
    -webkit-animation: fadeOutShrink .4s ease both;
    -moz-animation: fadeOutShink .4s ease both;
    animation: fadeOutShink .4s ease both;
}
.gc_events.gc_out {
    -webkit-animation: fadeOut .3s ease both;
    -moz-animation: fadeOut .3s ease both;
    animation: fadeOut .3s ease both;
}
.gc_event {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    padding: 2px 16px;
    vertical-align: top;
    display: flex;
    gap: 12px;
}
.gc_event.gc_empty {
    color: rgba(40, 60, 89);
}
.gc_event-category {
    height: 10px;
    width: 10px;
    display: inline-block;
    margin: 6px 0 0;
    vertical-align: top;
}
.gc_event span {
    display: inline-block;
    padding: 0 0 0 7px;
    min-width: 200px;
    text-align: center;
    align-content: center;
}
/* Calendar legend */
.gc_legend {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: var(--gc-calendar-header-footer-bg);
    line-height: 30px;
    z-index: 999999999;
}
.gc_entry {
    position: relative;
    padding: 0 0 0 25px;
    font-size: 13px;
    display: inline-block;
    line-height: 30px;
    background: transparent;
}
.gc_entry:after {
    position: absolute;
    content: '';
    height: 12px;
    width: 8px;
    top: 8px;
    left: 14px;
    border-radius: var(--gc-border-rad);
}
/* Demo purposes
.gc_blue { background: rgba(156, 202, 235, 1); }
.gc_orange { background: rgba(247, 167, 0, 1); }
.gc_green { background: rgba(153, 198, 109, 1); }
.gc_yellow { background: rgba(249, 233, 0, 1); }
.gc_entry.gc_blue:after { background: rgba(156, 202, 235, 1); }
.gc_entry.gc_orange:after { background: rgba(247, 167, 0, 1); }
.gc_entry.gc_green:after { background: rgba(153, 198, 109, 1); }
.gc_entry.gc_yellow:after { background: rgba(249, 233, 0, 1); }
*/

/* Mobile Calendar */
@media (max-width: 690px) {
    #garbagecalendar {
        height: auto;
    }
    .gc_week {
        display: flex;
        flex-direction: column;
    }
    .gc_week > div:not(.gc_details) {
        width: 100% !important;
        flex: none !important;
    }
    .gc_day {
        height: 130px;
        padding-top: 20px;
    }
    .gc_event span {
        min-width: 160px;
        max-width: 160px;
    }
    .gc_event object {
        width: 48px;
        height: 48px;
    }
    .gc_day-name {
        font-size: 16px;
    }
    .gc_day-number {
        font-size: 40px;
        line-height: 60px;
    }
    .gc_legend {
        display: none;
    }    
    .gc_arrow {
        left: 50%!important;
        transform: translateX(-50%)!important;
    }
}

/* 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; -webkit-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; }
}
@keyframes fadeOut  {
    to { opacity: 0; }
}

@-webkit-keyframes fadeOutShink  {
    to { opacity: 0; padding: 0px; height: 0px; }
}
@-moz-keyframes fadeOutShink  {
    to { opacity: 0; padding: 0px; height: 0px; }
}
@keyframes fadeOutShink  {
    to { opacity: 0; padding: 0px; height: 0px; }
}