:root {
    --bookedColor: #ad1010;
    --freeColor: #009b27;
  }
.calendar {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
}

.month {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid #ccc;
}

th,
td {
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

td.available {
    background-color: #c1e1c1;
}

td.booked {
    background-color: var(--bookedColor);
    color: white;
}

td.FreeCalenderDay{
    background-color: var(--freeColor);
    color: white;
}

td.VormittagsBooked{
    background: linear-gradient(120deg,  var(--bookedColor) 47%, var(--freeColor) 53%);
}

td.NachmittagsBooked{
    background: linear-gradient(120deg,  var(--freeColor) 47%, var(--bookedColor) 53%);
}

.legendFree {
    height: 20px;
    width: 20px;
    background-color: var(--freeColor);
    margin: 0px  5px 0px 10px;
    float: left;
}

.legendBooked {
    height: 20px;
    width: 20px;
    background-color: var(--bookedColor);
    margin: 0px  5px 0px 20px;
    float: left;
}

.kalenderSettings
{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
}