:root {
    --green      : #257670;
    --lightgreen : #81bf53;
    --red        : #3d5821;
    --blue       : #3772c0;
    --lightblue  : #0fb0f0;
    --purple     : #7031a6;
    --orange     : #f4812b;
}
BODY {
    font-family: Verdana;
}
A {
    text-decoration: none;
    color: black;
}
.container {
    display: grid;
    /*
    grid-template-rows: 9% 5% repeat(6,minmax(4vh, auto)) 1fr;  !* up to 6 rows (typically 5 is ok, in rare cases 6 are required) *!
    grid-template-rows: 9% 5% minmax(4vh, auto) minmax(4vh, auto) minmax(4vh, auto) minmax(4vh, auto) minmax(4vh, auto) minmax(4vh, auto) 1fr;  !* up to 6 rows (typically 5 is ok, in rare cases 6 are required) *!
    */
    grid-template-rows: 9% 5% repeat(6, auto) 1fr;  /* up to 6 rows (typically 5 is ok, in rare cases 6 are required) */
    grid-template-columns: repeat(7, 14%); /* 7 columns, one per weekday */
    grid-gap: .3vw;
    width        : 96vw;
    height       : 96vh;
    border: 0px solid yellow;
}
.year {
    background-color: var(--green);
    color: white;
    font-size       : 4.0vw;
    text-align: center;
}
.navmonth {
    font-size       : 4.0vw;
    color: var(--green);
    font-weight: 200;
    cursor: pointer;
}
.prevmonth {
    /* grid-column-start: 6; */
}
.nextmonth {
    /* grid-column-start: 7; */
}
.month {
    font-size       : 4.0vw;
    color: var(--green);
    font-weight: 200;
    grid-column: span 2;
}
.dayName {
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size       : 2.0vw;
}
.dayName-1 {
    grid-column-start: 1;
}
.dayName-odd {
    background-color: var(--red);
}
.dayName-even {
    background-color: var(--green);
}
.dayNumber {
    position: absolute;
    top:0px; right:0px;
    color: #33333366;
    /* text-align: center; */
    font-size       : 1.5vw;
    padding-left: 5.5vw;
}
.dayNumber-overflow {
    color: #ffffff66;
}
.dayCell-1 {
    grid-column-start: <?= $firstDate->weekday==0? 7 : $firstDate->weekday ?>;
}
.dayCell {
    border: 0px solid grey;
    border-top: 1px solid grey;
    border-left: 1px solid grey;
    position: relative;
}
.dayCell-overflow {
    background-color: lightgrey;
}
.text {
    display: block;
    font-size : 0.82vw;
}
.text-vw {
    color: var(--lightgreen);
}
.text-js {
    color: var(--blue);
}
.text-vrij {
    color: var(--lightblue);
    text-transform: uppercase;
}
.text-noplay {
    color: var(--lightblue);
    text-transform: uppercase;
}
.text-boxen {
    color: var(--orange);
}
.text-ic {
    color: var(--red);
    font-weight: bold;
}
.text-toernooi-spacer {
    color: white;
}
.text-event {
    font-weight: bold;
}
.text-toernooi {
    color: black;
    position: absolute;
    bottom:0px; left:0px;
    font-weight: bold;
}
.text-name {
    padding-left: 1.0vw;
}