.sppd-toggle-content .sppd-toggle-content__content.sppd-toggle-content--show {
    height: max-content !important;
}

.calendar-container {
    margin: 10px auto;
    max-width: 100%;
    width: 100%;
}

.month {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
}

.month-header {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.weekdays, .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.weekdays {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 5px;
}

.days {
    gap: 1px;
}

.day {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    position: relative;
    min-height: 70px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 1em;
}
.weekend {
    background-color: #f6f8f8;
}
.holiday {
    background-color: #fef7da;
}
.event {
    margin-bottom: 3px;
    padding: 5px;
    color: white;
    font-size: 0.8em;
    border-radius: 5px;
    text-align: center;
}

.hidden {
    display: none;
}

input[type="checkbox"] + label:before {
    border: 2px solid transparent !important;
}

div.event.yellow,
input[type="checkbox"] + label.yellow:before,
input[type="checkbox"]:checked + label.yellow:before { background-color: #feec99; }
input[type="checkbox"]:checked + label.yellow:after {
    background: brown;
    box-shadow: 2px 0 0 brown, 4px 0 0 brown, 4px -2px 0 brown, 4px -4px 0 brown, 4px -6px 0 brown, 4px -8px 0 brown;
    content: '';
    height: 2px;
    left: 5px;
    position: absolute;
    top: 9px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 2px;
}        

div.event.black,
input[type="checkbox"] + label.black:before,
input[type="checkbox"]:checked + label.black:before { background-color: #f1ad65; }

div.event.blue,
input[type="checkbox"] + label.blue:before,
input[type="checkbox"]:checked + label.blue:before { background-color: #00ada9; }

div.event.grey,
input[type="checkbox"] + label.grey:before,
input[type="checkbox"]:checked + label.grey:before { background-color: #929383; }

div.event.brown,
input[type="checkbox"] + label.brown:before,
input[type="checkbox"]:checked + label.brown:before { background-color: #7a476c; }

div.event.mojafarba,
input[type="checkbox"] + label.mojafarba:before,
input[type="checkbox"]:checked + label.mojafarba:before { background-color: #96924E; }

div.event.red,
input[type="checkbox"] + label.red:before,
input[type="checkbox"]:checked + label.red:before { background-color: #00817E; }

div.event.green,
input[type="checkbox"] + label.green:before,
input[type="checkbox"]:checked + label.green:before { background-color: #5f7308; }

div.event.kaki,
input[type="checkbox"] + label.kaki:before,
input[type="checkbox"]:checked + label.kaki:before { background-color: #956f62; }

.legend-container {
    margin: 10px auto;
    max-width: 100%;
    width: 80%;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 5px 0;
    cursor: pointer;
    font-size: 1em;
}


@media screen and (orientation: landscape) {
    .main-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .legend-container {
        max-width: 600px;
    }

    .calendar-container {
        max-width: 100%;
    }

    h1 {
        font-size: 2em;
    }

    .month-header {
        font-size: 2em;
    }

    .button {
        padding: 8px 15px;
        font-size: 1em;
    }
	.legend-note {
		font-size: 12px;
		margin-top: 10px;
		color: #333;
		font-weight: bold;
	}
}