:root {
    --grigino: rgb(218, 220, 224);
    --grigetto: rgb(160, 160, 160);
    --altezza-intestazione: 36px;
    --altezza-riga-appuntamento: 18px;
    --larghezza-colonna-orario: 50px;
    --giorni-settimana: 6;
    --righe-griglia-calendario: 48;
    --colonne-griglia-calendario: 10;
    --larghezza-colonna-giorno: 200px;
    --larghezza-colonna-appuntamento: 200px;
    --larghezza-intervallo-calendario: var(--larghezza-colonna-appuntamento) / var(--colonne-griglia-calendario);
}

.contenitore-settimana {
    display: grid;
    grid-template-columns: var(--larghezza-colonna-orario) repeat(var(--giorni-settimana), var(--larghezza-colonna-giorno));
    grid-column-gap: 1px;
}

.contenitore-orario {
    grid-row-start: 1;
    border-right: 1px solid var(--grigino);
    border-left: 1px solid var(--grigino);
}

.contenitore-orario-titolo {
    text-align: center;
    height: var(--altezza-intestazione);
}

.contenitore-ore {
    display: grid;
    text-align: center;
    grid-template-rows: repeat(var(--righe-griglia-calendario), var(--altezza-riga-appuntamento));
}

.contenitore-ora {
    color: var(--grigetto);
    font-size: 11px;
}

.contenitore-giorno {
    grid-row-start: 1;
    border-right: 1px solid var(--grigino);
}

.contenitore-giorno-titolo {
    grid-row-start: 1;
    font-size: 11px;
    text-align: center;    
    overflow: clip;
    height: var(--altezza-intestazione);
}

.contenitore-appuntamenti {
    display: grid;
    min-width: 0px;
    grid-template-rows: repeat(var(--righe-griglia-calendario), var(--altezza-riga-appuntamento));
    grid-template-columns: repeat(var(--colonne-griglia-calendario), var(--larghezza-intervallo-calendario));
}

.contenitore-appuntamento {
    font-size: 8px;
    background-color: orange;
    color: black;
    border: 1px solid gray;
    border-radius: 4px;
    margin-bottom: 2px;
    margin-left: 3px;
    margin-right: 1px;
    padding: 1px;
    min-width: 0px;
    grid-column-end: var(--giorni-settimana);
}

    .contenitore-appuntamento:hover {
    }
    .giorno-giorno-settimana {
    color: var(--grigetto);
    font-weight: 700;
    font-size: 14px;
}

.giorno-giorno-numero {
    color: var(--grigetto);
    font-weight: 500;
    font-size: 12px;
}