body {
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 20px auto;
}

.calendar-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.calendar-nav a {
    text-decoration:none;
    padding:10px 15px;
    border:1px solid #ccc;
    border-radius:4px;
}

.calendar {
    width:100%;
    border-collapse:collapse;
}

.calendar th,
.calendar td {
    border:1px solid #ddd;
    width:14.28%;
    height:100px;
    vertical-align:top;
}
.calendar th {
    height:30px;
}

.day-number {
    padding:5px;
    font-weight:bold;
}

.event {
    margin:4px;
    padding:4px;
    font-size:11px;
    border-radius:4px;
}

.confirmed {
    background:#d4edda;
    border-left:4px solid #28a745;
}

.provisional {
    background:#fff3cd;
    border-left:4px solid #ffc107;
}
/*
.urgent {
    background:blue;
    border-left:4px solid #dc3545;
}
*/
.cancelled {
    background: dimgray;
    color: white;
    border-left:4px solid black;
}

@keyframes colorChange {
    0% { background-color: red; }
    50% { background-color: white; }
    100% { background-color: red; }
}

.urgent {
    animation: colorChange 500ms linear 0s 20;
}