.kalendar {
	width: 100%;
	table-layout: fixed;
          border-collapse: collapse;
}

.kalendar th {
	font-weight: bold;
	border: 1px solid var(--col-ve);
	text-align: center;
	padding: 1em 0;
	background-color: var(--col-ve);
    color: white;
}

.kalendar td {
	border: 1px solid var(--col-ve);
	text-align: center;
	background-color: white;
	padding: 0;
}

.kalendar td button
{
    border: none;
}

.kalendar tbody tr:first-child
{
    background-color: var(--col-ve);
}

.kalendar td:nth-child(6)
      {
	background-color: lightgray;
		/* Lighter blue for Saturday */
}

.kalendar td:nth-child(7)
      {
	background-color: gray;
		/* Darker blue for Sunday */
}

.kalendarevent {
	display: flex;
	border: 2px solid MediumSeaGreen;
	border-radius: 0.5em;
	background-color: PaleGreen;
	color: MediumSeaGreen;
	overflow: hidden;
	width: 90%;
	margin: auto;
}

.kalendar input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}

/* Style the cell when the checkbox is checked */
.kalendar input[type="checkbox"]:checked+div {
	background-color: var(--col-hl);
}

.checklabel {
	width: 100%;
	height: 100%;
	cursor: pointer;
    margin: 0;
}

.checklabel div {
	padding: 1em 0;
}