devextreme/less/sources/widgets/generic/scheduler.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/scheduler.generic.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "../base/scheduler.less";
@import (once) "./popup.generic.less";
@import (once) "./popover.generic.less";
@import (once) "./tooltip.generic.less";
@import (once) "./overlay.generic.less";
@import (once) "./button.generic.less";
@import (once) "./list.generic.less";
@import (once) "./scrollable.generic.less";
@import (once) "./loadPanel.generic.less";
@import (once) "./form.generic.less";
@import (once) "./dropDownMenu.generic.less";
@import (once) "./tabs.generic.less";
@import (once) "./calendar.generic.less";
@import (once) "./recurrenceEditor.generic.less";

.dx-size-default() {
    @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT: 50px;
    @GENERIC_SCHEDULER_TIMELINE_DATE_TABLE_CELL_HEIGHT: 75px;

    @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP: 10px;

    @GENERIC_SCHEDULER_HEADER_HEIGHT: 56px;
    @GENERIC_SCHEDULER_NAVIGATOR_HEIGHT: 36px;
    @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS: @button-border-radius;
    @GENERIC_SCHEDULER_NAVIGATION_BUTTONS_PADDING: 6px;

    @GENERIC_SCHEDULER_APPOINTMENT_MONTH_TEXT_SIZE: 13px;
    @GENERIC_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE: 16px;
    @GENERIC_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE: 14px;

    @GENERIC_SCHEDULER_APPOINTMENT_CONTENT_PADDING: 5px 7px;
    @GENERIC_SCHEDULER_APPOINTMENT_RECURRENCE_CONTENT_PADDING: 5px 25px 5px 7px;
    @GENERIC_SCHEDULER_APPOINTMENT_RECURRENCE_CONTENT_PADDING_RTL: 5px 7px 5px 25px;

    @GENERIC_SCHEDULER_AGENDA_APPOINTMENT_FONT_SIZE: 16px;
    @GENERIC_SCHEDULER_GROUP_HEADER_AGENDA_FONT_SIZE: 18px;
    @GENERIC_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH: 80px;
    @GENERIC_SCHEDULER_APPOINTMENT_TRANSPARENT_LEFT_BORDER: 3px solid transparent;
    @GENERIC_SCHEDULER_APPOINTMENT_TRANSPARENT_RIGHT_BORDER: 2px solid transparent;

    @SCHEDULER_RECURRENCE_EDITOR_ITEM_OFFSET: -88px;
    @SCHEDULER_RECURRENCE_REPEAT_LABEL_OFFSET: 5px;

    @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT: 20px;
}

.dx-size-compact() {
    @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT: 36px;
    @GENERIC_SCHEDULER_TIMELINE_DATE_TABLE_CELL_HEIGHT: 50px;

    @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP: 5px;

    @GENERIC_SCHEDULER_HEADER_HEIGHT: 39px;
    @GENERIC_SCHEDULER_NAVIGATOR_HEIGHT: 25px;
    @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS: @button-border-radius;
    @GENERIC_SCHEDULER_NAVIGATION_BUTTONS_PADDING: 4px;

    @GENERIC_SCHEDULER_APPOINTMENT_MONTH_TEXT_SIZE: 11px;
    @GENERIC_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE: 14px;
    @GENERIC_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE: 11px;

    @GENERIC_SCHEDULER_APPOINTMENT_CONTENT_PADDING: 2px 5px;
    @GENERIC_SCHEDULER_APPOINTMENT_RECURRENCE_CONTENT_PADDING: 2px 25px 2px 5px;
    @GENERIC_SCHEDULER_APPOINTMENT_RECURRENCE_CONTENT_PADDING_RTL: 2px 5px 2px 25px;

    @GENERIC_SCHEDULER_AGENDA_APPOINTMENT_FONT_SIZE: 14px;
    @GENERIC_SCHEDULER_GROUP_HEADER_AGENDA_FONT_SIZE: 14px;
    @GENERIC_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH: 60px;
    @GENERIC_SCHEDULER_APPOINTMENT_TRANSPARENT_LEFT_BORDER: 2px solid transparent;
    @GENERIC_SCHEDULER_APPOINTMENT_TRANSPARENT_RIGHT_BORDER: 1px solid transparent;

    @SCHEDULER_RECURRENCE_EDITOR_ITEM_OFFSET: -80px;
    @SCHEDULER_RECURRENCE_REPEAT_LABEL_OFFSET: 3px;

    @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT: 17px;
}

@GENERIC_SCHEDULER_APPOINTMENT_REDUCED_CONTENT_PADDING: 40px;
@GENERIC_SCHEDULER_APPOINTMENT_EMPTY_TRANSPARENT_BORDER: 1px solid transparent;

@GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT: @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT * 1.5;
@GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT: @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT * 0.5;
@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT: @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT - @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP;

@GENERIC_SCHEDULER_CURRENT_TIME_CELL_BORDER_SIZE: 2px;

@GENERIC_SCHEDULER_FOCUSED_TAB_BORDER: 1px solid @scheduler-tab-focused-border-color;

@GENERIC_SCHEDULER_VIEW_SWITCHER_FONT_SIZE: @GENERIC_BASE_FONT_SIZE;
@GENERIC_SCHEDULER_MONTH_DATE_TEXT_SIZE: @GENERIC_H5_FONT_SIZE;

@GENERIC_SCHEDULER_SWITCHER_LABEL_OFFSET: 60px;

@SCHEDULER_FIRST_OF_MONTH_BORDER: 1px solid @SCHEDULER_FIRST_MONTH_BORDER_COLOR;

@SCHEDULER_RECURRENCE_REPEAT_ON_WEEK_PADDING: 7px;
@SCHEDULER_RECURRENCE_BORDER_COLOR: @base-border-color;

.scheduler-mixin(100px);

.dx-scheduler-time-panel-cell {
    height: @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT;
}

.dx-scheduler-date-table-cell {
    height: @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT;
}

.dx-scheduler-all-day-title {
    height: @GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT;
    line-height: @GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT;
    font-size: @GENERIC_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE;
    font-weight: bold;
    top: @GENERIC_SCHEDULER_HEADER_HEIGHT;

    .dx-scheduler-work-space-all-day-collapsed & {
        height: @GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT;
        line-height: @GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT;
    }
}

&:not(.dx-scheduler-work-space-vertical-grouped) {
    .dx-scheduler-all-day-title-mixin(@GENERIC_SCHEDULER_HEADER_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
}


.dx-scheduler-work-space-week,
.dx-scheduler-work-space-work-week {
    .dx-scheduler-all-day-title {
        top: @GENERIC_SCHEDULER_HEADER_HEIGHT + @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT;
    }

    &:not(.dx-scheduler-work-space-vertical-grouped) {
        .dx-scheduler-all-day-title-mixin(@GENERIC_SCHEDULER_HEADER_HEIGHT + @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT);
    }
}

.dx-scheduler-all-day-table {
    height: @GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT;

    .dx-scheduler-work-space-all-day-collapsed & {
        height: @GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT;
    }
}

.dx-scheduler-header-panel {
    margin-top: @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP;
}

.dx-scheduler-work-space-vertical-grouped {
    .dx-scheduler-header-panel {
        margin-top: @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP + 1px;
    }
}

.dx-scheduler-header-panel-cell {
    height: @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT;

    &.dx-scheduler-header-panel-current-time-cell {
        &:before {
            top: @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT - @GENERIC_SCHEDULER_CURRENT_TIME_CELL_BORDER_SIZE - 1;
            height: @GENERIC_SCHEDULER_CURRENT_TIME_CELL_BORDER_SIZE;
        }
    }
}

.dx-scheduler-timeline {
    .dx-scheduler-date-table-cell {
        height: @GENERIC_SCHEDULER_TIMELINE_DATE_TABLE_CELL_HEIGHT;
    }
}

.dx-scheduler-work-space {
    &:not(.dx-scheduler-work-space-vertical-grouped) {
        .dx-scheduler-scrollable-offset-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP, @GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT, @GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT);
    }
}

.dx-scheduler-work-space-day {
    &:not(.dx-scheduler-work-space-vertical-grouped) {
        .dx-scheduler-scrollable-offset-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP, @GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT, @GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT);
    }

    &:not(.dx-scheduler-work-space-grouped) {
        .dx-scheduler-all-day-title {
            top: @GENERIC_SCHEDULER_HEADER_HEIGHT + 1;
        }
    }

    &.dx-scheduler-work-space-count:not(.dx-scheduler-work-space-vertical-grouped) {
        .dx-scheduler-scrollable-offset-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP, @GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT, @GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT);

        .dx-scheduler-header-panel {
            margin-top: @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP;
        }

        .dx-scheduler-all-day-title-mixin(@GENERIC_SCHEDULER_HEADER_HEIGHT + @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT);

        .dx-scheduler-all-day-title {
            top: @GENERIC_SCHEDULER_HEADER_HEIGHT + @GENERIC_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT;
        }
    }

    .dx-scheduler-header-panel {
        .dx-scheduler-group-row {
            &:not(:first-child) {
                border-bottom: none;
            }
        }
    }
}

.dx-scheduler-work-space-month {
    &:not(.dx-scheduler-work-space-vertical-grouped) {
        .dx-scheduler-group-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
    }

    .dx-scheduler-appointment-content {
        font-size: @GENERIC_SCHEDULER_APPOINTMENT_MONTH_TEXT_SIZE;
    }

    .dx-scheduler-date-table-first-of-month {
        border-left: @SCHEDULER_FIRST_OF_MONTH_BORDER;
        border-top: @SCHEDULER_FIRST_OF_MONTH_BORDER;
    }
}

.dx-scheduler-header {
    background-color: @scheduler-header-bg;
    border: @SCHEDULER_BASE_BORDER;
    height: @GENERIC_SCHEDULER_HEADER_HEIGHT;
}

.dx-scheduler-navigator {
    padding: (@GENERIC_SCHEDULER_HEADER_HEIGHT - @GENERIC_SCHEDULER_NAVIGATOR_HEIGHT) * 0.5;

    .dx-button {
        margin-top: -1px;
        height: @GENERIC_SCHEDULER_NAVIGATOR_HEIGHT;
    }

    .dx-button-has-icon .dx-button-content {
        padding: @GENERIC_SCHEDULER_NAVIGATION_BUTTONS_PADDING;
    }
}

.dx-scheduler-navigator-caption {
    border-radius: 0;
    border-right-width: 0;
    border-left-width: 0;

    &.dx-state-focused,
    &.dx-state-hover,
    &.dx-state-active {
        border-right-width: 1px;
        border-left-width: 1px;
    }
}

.dx-scheduler-navigator-previous {
    border-radius: @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS 0 0 @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS;

    .dx-rtl & {
        border-radius: 0 @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS 0;
    }
}

.dx-scheduler-navigator-next {
    border-radius: 0 @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS 0;

    .dx-rtl & {
        border-radius: @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS 0 0 @GENERIC_SCHEDULER_NAVIGATOR_BORDER_RADIUS;
    }
}

.dx-scheduler-view-switcher.dx-tabs {
    font-size: @GENERIC_SCHEDULER_VIEW_SWITCHER_FONT_SIZE;

    .dx-tab {
        &:not(.dx-tab-selected):not(.dx-state-hover) {
            background: none;
        }

        &.dx-tab-selected {
            background-color: @scheduler-tab-selected-bg;

            &:before {
                background-color: @scheduler-tab-selected-before-bg;
            }
        }

        &.dx-state-focused:after {
            border-left: @SCHEDULER_BASE_BORDER;
            border-right: @SCHEDULER_BASE_BORDER;
            border-top: @GENERIC_SCHEDULER_FOCUSED_TAB_BORDER;
            border-bottom: none;
        }

        &.dx-tab-selected:after {
            height: @GENERIC_SCHEDULER_HEADER_HEIGHT;
        }
    }
}

.dx-scheduler-view-switcher.dx-dropdownmenu {
    margin-top: (@GENERIC_SCHEDULER_HEADER_HEIGHT - @GENERIC_SCHEDULER_NAVIGATOR_HEIGHT) * 0.5 - 1px;
}

.dx-scheduler-view-switcher-label {
    margin-top: (@GENERIC_SCHEDULER_HEADER_HEIGHT - @GENERIC_SCHEDULER_NAVIGATOR_HEIGHT) * 0.8;
    right: @GENERIC_SCHEDULER_SWITCHER_LABEL_OFFSET;

    .dx-rtl & {
        left: @GENERIC_SCHEDULER_SWITCHER_LABEL_OFFSET;
        right: auto;
    }
}

.dx-scheduler-header-panel { // stylelint-disable-line no-duplicate-selectors
    .dx-scheduler-group-row {
        &:not(:first-child) {
            border-bottom: @SCHEDULER_BASE_BORDER;

            .dx-scheduler-group-header {
                font-size: @GENERIC_BASE_FONT_SIZE;
                color: @SCHEDULER_PANEL_TEXT_COLOR;
            }
        }
    }

    .dx-scheduler-group-header {
        font-size: 18px;
    }
}

.dx-scheduler-header-panel,
.dx-scheduler-work-space-vertical-group-table,
.dx-scheduler-group-flex-container {
    .dx-scheduler-group-header {
        font-weight: bold;
        color: @scheduler-group-header-color;
        padding: 0;
    }
}

.dx-scheduler-all-day-panel {
    background-color: @scheduler-alldaypanel-bg;
}

.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
    padding-top: @GENERIC_SCHEDULER_HEADER_HEIGHT;
    margin-top: -@GENERIC_SCHEDULER_HEADER_HEIGHT;

    &.dx-scheduler-work-space-grouped {
        .dx-scheduler-all-day-title {
            border-top: @SCHEDULER_BASE_BORDER;
        }

        .dx-scheduler-date-table-cell {
            border-left: @SCHEDULER_BASE_BORDER;
        }


        &.dx-scheduler-agenda {
            .dx-scheduler-date-table-cell {
                border: none;
            }
        }

        &.dx-scheduler-timeline .dx-scheduler-group-row th {
            .dx-rtl & {
                border-left: none;
                border-right: none;
            }
        }
    }
}

.dx-scheduler-work-space-week {
    .dx-scheduler-date-table-row:first-child {
        border-top: none;
    }
}

.dx-scheduler-date-table-cell { // stylelint-disable-line no-duplicate-selectors
    border-left: @SCHEDULER_BASE_BORDER;
    border-right: @SCHEDULER_BASE_BORDER;
}

.dx-scheduler-all-day-table-cell,
.dx-scheduler-date-table-cell {
    &.dx-state-active {
        background-color: @scheduler-cell-active-bg;
    }

    &.dx-state-hover {
        background-color: @scheduler-cell-hover-bg;
        color: @SCHEDULER_WORKSPACE_HOVERED_CELL_COLOR;
    }
}

.dx-scheduler-appointment-popup {
    .dx-popup-title {
        background-color: @scheduler-popup-title-bg;

        .dx-closebutton,
        .dx-closebutton.dx-rtl {
            margin: 0;
        }
    }

    .dx-popup-bottom {
        border-top: 1px solid @scheduler-appointment-form-separator-color;
    }

    .dx-toolbar-after {
        margin-right: 4px;

        .dx-rtl & {
            margin-left: 4px;
            margin-right: 0;
        }
    }
}

.dx-scheduler-appointment-popup .dx-form-validation-summary {
    padding: 10px 20px;
}

.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
    font-size: @GENERIC_SCHEDULER_MONTH_DATE_TEXT_SIZE;
}

.dx-scheduler-header-panel,
.dx-scheduler-time-panel {
    font-size: @GENERIC_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE;
}

.dx-scheduler-work-space-grouped .dx-scheduler-group-row th,
.dx-scheduler-work-space.dx-scheduler-work-space-grouped .dx-scheduler-last-group-cell {
    border-right: 1px solid @scheduler-group-separator-border-color;

    &:last-child {
        border-right: none;
    }

    .dx-rtl & {
        border-left: 1px solid @scheduler-group-separator-border-color;
        border-right: @SCHEDULER_BASE_BORDER;

        &:last-child {
            border-left: none;
        }
    }
}

.dx-scheduler-work-space-grouped.dx-scheduler-agenda,
.dx-scheduler-work-space-grouped.dx-scheduler-work-space-vertical-grouped,
.dx-scheduler-work-space-grouped.dx-scheduler-timeline {
    .dx-scheduler-group-row th,
    .dx-scheduler-last-group-cell {
        border-right: @SCHEDULER_BASE_BORDER;
        border-left: @SCHEDULER_BASE_BORDER;
    }
}

.dx-scheduler-work-space-grouped.dx-scheduler-work-space-group-by-date {
    .dx-scheduler-group-row th {
        border-right: @SCHEDULER_BASE_BORDER;
        border-left: @SCHEDULER_BASE_BORDER;
    }

    .dx-scheduler-header-panel-cell,
    .dx-scheduler-group-header.dx-scheduler-last-group-cell,
    .dx-scheduler-date-table-cell.dx-scheduler-last-group-cell {
        border-right: 1px solid @scheduler-group-separator-border-color;

        &:last-child {
            border-right: none;
        }

        .dx-rtl & {
            border-left: 1px solid @scheduler-group-separator-border-color;
            border-right: @SCHEDULER_BASE_BORDER;

            &:last-child {
                border-left: none;
            }
        }
    }
}

.dx-scheduler-appointment-collector {
    height: @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT;

    .dx-scheduler-appointment-collector-content {
        span:last-child {
            line-height: @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT / 1.5;
            height: @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT;
        }
    }

    &.dx-state-hover {
        &:before {
            border-radius: @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT;
        }
    }

    &.dx-button.dx-button-default {
        border-radius: @GENERIC_SCHEDULER_APPOINTMENT_COLLECTOR_HEIGHT;
    }
}

.dx-scheduler-appointment {
    border-left: @GENERIC_SCHEDULER_APPOINTMENT_TRANSPARENT_LEFT_BORDER;
    border-right: @GENERIC_SCHEDULER_APPOINTMENT_TRANSPARENT_RIGHT_BORDER;

    &.dx-state-focused {
        color: @scheduler-appointment-focus-color;
    }

    &.dx-scheduler-appointment-empty {
        border-left: @GENERIC_SCHEDULER_APPOINTMENT_EMPTY_TRANSPARENT_BORDER;
        border-right: @GENERIC_SCHEDULER_APPOINTMENT_EMPTY_TRANSPARENT_BORDER;
    }
}

.dx-scheduler-appointment-content {
    padding: @GENERIC_SCHEDULER_APPOINTMENT_CONTENT_PADDING;
}

.dx-scheduler-appointment-reduced {
    .dx-scheduler-appointment-content {
        padding-right: @GENERIC_SCHEDULER_APPOINTMENT_REDUCED_CONTENT_PADDING;
    }
}

.dx-scheduler-appointment-recurrence {
    .dx-scheduler-appointment-content {
        padding: @GENERIC_SCHEDULER_APPOINTMENT_RECURRENCE_CONTENT_PADDING;

        .dx-rtl & {
            padding: @GENERIC_SCHEDULER_APPOINTMENT_RECURRENCE_CONTENT_PADDING_RTL;
        }
    }
}

.dx-scheduler-dropdown-appointment-date {
    color: @scheduler-dropdown-appointment-date-color;
}

.dx-scheduler-work-space-grouped {
    &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-timeline):not(.dx-scheduler-agenda):not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-work-space-horizontal-grouped) {
        @headerScrollBarTopOffset: @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP;
        .dx-scheduler-header-scrollable-mixin(@headerScrollBarTopOffset);
        .dx-scheduler-group-mixin(@headerScrollBarTopOffset);

        &.dx-scheduler-work-space-day {
            .dx-scheduler-header-scrollable-mixin(@headerScrollBarTopOffset - @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT);
            .dx-scheduler-group-mixin(@headerScrollBarTopOffset - @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT);
        }
    }
}

.dx-scheduler-work-space.dx-scheduler-timeline-week,
.dx-scheduler-work-space.dx-scheduler-timeline-work-week,
.dx-scheduler-work-space.dx-scheduler-work-space-count.dx-scheduler-timeline-day {
    .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);

    &.dx-scheduler-work-space-grouped {
        .dx-scheduler-sidebar-scrollable {
            padding-bottom: @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP;
            margin-bottom: -(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);

            &:before {
                height: @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP + 1;
                margin-top: -(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP + 1);
            }
        }
    }

    .dx-scrollable.dx-scheduler-date-table-scrollable {
        padding-bottom: @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP;
        margin-bottom: -(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2 + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
    }
}

.dx-scheduler-work-space-both-scrollbar {
    .dx-scheduler-all-day-title {
        background-color: @scheduler-alldaypanel-bg;

        &:before {
            background-color: @SCHEDULER_WORKSPACE_BACKGROUND_COLOR;
        }
    }

    .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);


    &.dx-scheduler-work-space-day {
        .dx-scheduler-header-scrollable-mixin(0);
    }

    &.dx-scheduler-work-space.dx-scheduler-work-space-all-day {
        .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);

        &.dx-scheduler-work-space-vertical-grouped {
            .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
        }

        &:not(.dx-scheduler-work-space-vertical-grouped) {
            &.dx-scheduler-work-space-all-day-collapsed {
                .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
            }

            &.dx-scheduler-work-space-day {
                &:not(.dx-scheduler-work-space-count) {
                    .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);

                    &.dx-scheduler-work-space-all-day-collapsed {
                        .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
                    }
                }

                &:not(.dx-scheduler-work-space-grouped) {
                    .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT);

                    &.dx-scheduler-work-space-all-day-collapsed {
                        .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT);
                    }
                }
            }
        }
    }

    &.dx-scheduler-work-space.dx-scheduler-work-space-month {
        .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
    }

    &.dx-scheduler-work-space-vertical-grouped {
        .dx-scheduler-header-scrollable-mixin(@GENERIC_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT + @GENERIC_SCHEDULER_HEADER_PANEL_TOP_GAP);
    }
}

.dx-scheduler-agenda {
    .dx-scheduler-appointment-content {
        font-size: @GENERIC_SCHEDULER_AGENDA_APPOINTMENT_FONT_SIZE;

        .dx-scheduler-appointment-content-date {
            font-size: @GENERIC_SCHEDULER_AGENDA_APPOINTMENT_FONT_SIZE - 3px;
        }
    }

    .dx-scheduler-group-header {
        font-size: @GENERIC_SCHEDULER_GROUP_HEADER_AGENDA_FONT_SIZE;
        width: @GENERIC_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH;
    }

    &.dx-scheduler-work-space {
        .dx-scheduler-scrollable-offset-mixin(0, 0, 0);
    }

    .dx-scheduler-group-header-content {
        width: @GENERIC_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH;
    }

    .dx-scheduler-agenda-group-mixin(@GENERIC_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH);
}

.dx-scheduler-agenda-nodata {
    font-size: @GENERIC_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE;
}

.dx-scheduler-appointment-tooltip-wrapper .dx-overlay-content .dx-popup-content .dx-list-item {
    border-top-width: 1px;
}

.dx-scheduler .dx-scheduler-overlay-panel {
    .dx-overlay-content {
        background: @base-bg;
    }
}