#classlist-calendar {
    &.classlist-container {
        background: unset;
        margin: 0;
        padding: ($padding-default / 2) $padding-default;
        overflow: hidden;

        // Note from Jeroen @ 13-01-2025:
        // Adding the customized overflow styling would cause issues with the calendar, making it possible for a month to be offset and
        // causing the weeknumbers to be visible in the middle of the calendar. Having the view split into two half months.
        // .mbsc-calendar-scroll-wrapper > div {
        //     overflow-x: hidden; // Overflow-x: hidden is required, otherwise it's possible to scroll horizontally if we do not set this attribute.
        //     overflow-y: auto; // Overflow-y: auto allows people with smaller screen resolutions to scroll inside the calendar in order to see the bottom rows of calendar days
        // }

        // Note from Jeroen @ 13-01-2025:
        // Added the overflow-y directly to the table as this doesn't seem to offset the table like the solution above did.
        .mbsc-calendar-table {
            overflow-y: auto;
            background: none;
        }        
        .mbsc-calendar-header {
            z-index: unset;
        }
        .mbsc-calendar-slide {
            background: none;
        }
        .mbsc-material.mbsc-eventcalendar {
            background-color: $calendar-background !important;
        }
        .mbsc-calendar-table,
        .mbsc-calendar-grid,
        .mbsc-schedule-grid-scroll, 
        .mbsc-timeline-grid-scroll,
        .mbsc-schedule-all-day-wrapper {
            @include scrollbar($calendar-background, 0);
        }

        .mbsc-material.mbsc-calendar-title {
            font-size: $font-size-h2;
        }
    
        .mbsc-material.mbsc-button {
            font-size: $font-family-h2;
            text-transform: none;
        }

        .mbsc-material.mbsc-schedule-all-day-text,
        .mbsc-material.mbsc-schedule-header-item-large .mbsc-schedule-header-dayname {
            text-transform: none;
        }
    }

	.dbqdclcal-toolbar {
		margin-left: 5px;
	}

    .dbqdclcal-event-label {
        position: absolute;
        top: 10px;
        right: 5px;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 3px;

        &.dbqdclcal-total-value-event-label {
            background: color(gray-5);
            color: white;
            font-weight: $font-weight-bold;
        }
    }

    // The Mobiscroll calendar will have different CSS classes depending on the width/height available.
    // Remove the event label in case of a small width. It would overlap with the day label otherwise.
    .mbsc-calendar-width-sm {
        .dbqdclcal-event-label {
            display: none;
        }
    }

	.period-header-picker {
		-webkit-flex: 1 0 auto;
		-moz-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		-moz-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
        align-items: center;
        padding: 5px 0;
        height: 60px;
		label {
            display: flex;
            justify-content: center;
            align-items: center;
            //text-transform: uppercase;
            font-weight: 600;
            font-size: 14px;
			min-width: 80px;
            height: 36px;
            //border: 2px solid $color-primary;
            //border-right: 1px solid $color-primary;
            //border-left: 1px solid $color-primary;
            cursor: pointer;
            margin-bottom: 0;

            &:first-of-type {
                //border-left: 2px solid $color-primary;
            }

            &:last-of-type {
                //border-right: 2px solid $color-primary;
            }


            // Hide the radio button
            input {
                display: none;
            }

            &:first-child {
                border-top-left-radius: $border-radius-default;
                border-bottom-left-radius: $border-radius-default;
            }
            &:last-child {
                border-top-right-radius: $border-radius-default;
                border-bottom-right-radius: $border-radius-default;
            }

            &.dbqdclcal-selected {
                //background: $color-primary;
                //color: color(button-text-color); // To-do: create variable in colors
            }
		}
	}
    .mbsc-calendar-row {
        .mbsc-calendar-week-day, .mbsc-calendar-day {
            border-color: $global-border-color;
        }
        
        &:last-of-type {
            .mbsc-calendar-day {
                border-bottom: 0px;
            }
        }
    }
    .dbqdclcal-context-menu {
        position: absolute;
        display: none;
        z-index: 1000;
        .dbqdclcal-dropdown-menu {
            position: static;
            display: block;
            border-radius: 10px;
            a {
                height: 100%;
                width: 100%;
            }
            li {
                svg {
                    display: inline-block;
                    margin: 0 10px 0 0;
                }
                &:hover {
                    svg {
                        fill: #fff;
                    }
                }
            }
        }
        .dbqdclcal-dropdown-menu.dropdown-menu {
            padding: 10px;
            border-radius: 10px;
            li {
                white-space: nowrap;
                padding: 5px 7px;
                margin: 0 0 3px 0;
                line-height: 20px;
                font-size: 12px;
                font-weight: 500;
                border-radius: 7px;
                background: transparent;

                &:last-of-type {
                    margin: 0;
                }
                a {
                    line-height: 20px;
                    padding: 5px 10px;
                }
                svg {
                    float: left;
                    display: inline-block;
                    margin: 0 5px 0 0;
                    padding: 2px;
                }

                &:hover {
                    background: $color-primary;
                }
            }
        }
    }
    .mbsc-popup-wrapper {
        z-index: 1001;
    }
    .dbqdclcal-default-background-color {
        background: $color-primary;
        display: none;
    }
    .dbqdclcal-schedule-event {
        background: $color-primary;
        color: #fff;
        height: 100%;
        border-radius: 5px;
        top: 1px;
        right: 1px;
        left: 1px;
        bottom: 1px;
        position: absolute;
        .dbqdclcal-schedule-event-tags {
            position: absolute;
            top: 8px;
            right: 5px;
            .dbqdclcal-schedule-event-tag {
                padding: 3px 6px;
                border-radius: 5px;
            }
        }
        .dbqdclcal-schedule-event-tags.dbqdclcal-schedule-event-tags-bottom {
            top: initial;
            bottom: 7px;
        }
    }
    .dbqdclcal-schedule-all-day-event {
        font-weight: 500;
        font-size: 12px;
        padding: 5px;
        margin-left: 2px;
        margin-right: 1px;
        border-radius: 5px;
    }
    .mbsc-material.mbsc-schedule-event-hover {
        .mbsc-schedule-event-background {
            &:after {
                top: 0;
            }
        }
    }
    .mbsc-material.mbsc-schedule-event-inner {
        color: inherit;
        height: 100%;
    }
    .mbsc-material.mbsc-calendar-controls {
        padding-top: 0;
        .dbqdclcal-toolbar {
            background: none !important
        }
    }

    .mbsc-calendar-width-md.mbsc-schedule-event-all-day-inner {
        .mbsc-schedule-event-all-day-inner {
            height: 28px;
        }
    }
}

// Timeline settings popup
.dcltls-modal {
    .dcltls-modal-body {
        padding: 10px $padding-default 10px;

        .dbq-form-group-title-label {
            padding: 4px 10px;
            cursor: default;
            span {
                cursor: default;
            }
        }
        .form-group {
            margin-bottom: 10px;
            select.form-control {
                background-color: $modal-input-background;
            }
        }
        .dbq-label-text {
            padding: 4px 10px;
        }
    }
    .dbqdb-footer,
    .modal-footer {
        a {
            cursor: pointer;
        }
    }
}

// Set the colors for the Calender
.mbsc-material.mbsc-segmented-button.mbsc-button {
    border-color: $color-primary;
}
.mbsc-material.mbsc-segmented-button.mbsc-button.mbsc-selected,
.mbsc-material.mbsc-schedule-header-day.mbsc-selected,
.mbsc-material-dark.mbsc-calendar-mark {
    background-color: $color-primary;
    background: $color-primary;
    color: color(button-text-color);
}
.mbsc-material.mbsc-selected .mbsc-calendar-cell-text {
    background: $color-primary;
    color: $color-white;
    border-color: $color-primary;
}
.mbsc-material.mbsc-calendar-today, 
.mbsc-material.mbsc-calendar-week-nr,
.mbsc-material.mbsc-calendar-month-title,
.mbsc-material.mbsc-schedule-header-day-today, 
.mbsc-material.mbsc-schedule-header-dayname-curr {
    color: $color-primary;
}

.mbsc-material.mbsc-timeline-day::after,
.mbsc-material.mbsc-timeline-slots,
.mbsc-material.mbsc-timeline-slot-header,
.mbsc-material.mbsc-timeline-header-month,
.mbsc-material.mbsc-timeline-header-week,
.mbsc-material.mbsc-timeline-header-date,
.mbsc-material.mbsc-timeline-resource-empty,
.mbsc-material.mbsc-timeline-header-column,
.mbsc-material.mbsc-timeline-header,
.mbsc-material.mbsc-timeline-resource,
.mbsc-material.mbsc-timeline-column,
.mbsc-material.mbsc-schedule-resource-group,
.mbsc-material.mbsc-schedule-resource,
.mbsc-material.mbsc-schedule-time-col,
.mbsc-material.mbsc-schedule-all-day-item::after,
.mbsc-material.mbsc-schedule-column,
.mbsc-material.mbsc-schedule-item {
    border-color: $global-border-color;
}