html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 60px 40px;
    font-family: sans-serif;
}

th {
    background-color: white;
}

th.weekday, td.weekday {
    width: 120px;
    max-width: 120px;
    overflow: hidden;
}
th.weekday {
    text-align: left;
}
.weeknum {
    width: 100px;
    text-align: right;
    padding-right: 24px;
}

td.weeknum {
    font-weight: bold;
    font-size: 110%;
}

tr.week {
    height: 55px;
}
tr.week:hover td {
    background-color: #eeeeee;
}
tr.week td {
    vertical-align: top;
}
tr.current-week {
    border: dashed 2px #555555;
}
tr.current-week td {
    font-weight: bold;
    font-size: 150%;
    padding-top: 8px;
    padding-bottom: 8px;
}
tr.current-week .week-summary {
    font-size: 80%;
}
thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

table {
    border-collapse: collapse;
    table-layout:fixed;
}

.week-summary {
    font-size: 80%;
    color: #777777;
    width: 300px;
}

div.calendar-item {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 2px 0 0 0;
}

.type {
    border: solid 2px;
    cursor: pointer;
}

.current-week div.calendar-item {
    height: 24px;
    width: 24px;
}

.current-week .type {
    height: 24px;
    width: 24px;
}

.type-public-holiday {
    background-color: #ffff00;
    border-color: #ffcc00;
}

.type-tbr {
    background-color: #157347;
    border-color: #0c4128;
}

.type-school-holiday {
    background-color: #0c63e4;
    border-color: #0000ff;
}

.type-personal {
    background-color: #fd7e14;
    border-color: #fd7e14;
}
.type-sport {
    background-color: #FF006E;
    border-color: #AF004C;
}
.type-femke {
    background-color: #00FFFF;
    border-color: #009B9B;
}
.type-sander {
    background-color: #4800FF;
    border-color: #240089;
}