devextreme/less/sources/widgets/material/scheduler.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/scheduler.material.less)
* Version: 20.1.4
* Build date: Tue Jun 02 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.material.less";
@import (once) "./popover.material.less";
@import (once) "./tooltip.material.less";
@import (once) "./overlay.material.less";
@import (once) "./button.material.less";
@import (once) "./list.material.less";
@import (once) "./scrollable.material.less";
@import (once) "./loadPanel.material.less";
@import (once) "./form.material.less";
@import (once) "./dropDownMenu.material.less";
@import (once) "./tabs.material.less";
@import (once) "./calendar.material.less";
@import (once) "./recurrenceEditor.material.less";

.dx-size-default() {
    @MATERIAL_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT: 38px;

    @MATERIAL_SCHEDULER_HEADER_HEIGHT: 64px;
    @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT: 36px;
    @MATERIAL_SCHEDULER_NAVIGATOR_BORDER_RADIUS: @button-border-radius;
    @MATERIAL_SCHEDULER_NAVIGATION_BUTTONS_PADDING: 6px;

    @MATERIAL_SCHEDULER_APPOINTMENT_MONTH_TEXT_SIZE: 12px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TITLE_TEXT_SIZE: 12px;
    @MATERIAL_SCHEDULER_APPOINTMENT_DATE_TEXT_SIZE: 10px;

    @MATERIAL_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE: 16px;
    @MATERIAL_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE: 12px;

    @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE: 12px;
    @MATERIAL_SCHEDULER_HEADER_PANEL_WEEK_FONT_SIZE: 12px;
    @MATERIAL_SCHEDULER_HEADER_PANEL_DAY_FONT_SIZE: 30px;
    @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN: 14px;

    @MATERIAL_SCHEDULER_GROUP_HEADER_FONT_SIZE: 14px;
    @MATERIAL_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH: 100px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TRANSPARENT_LEFT_BORDER: 1px solid transparent;
    @MATERIAL_SCHEDULER_APPOINTMENT_TRANSPARENT_RIGHT_BORDER: 1px solid transparent;

    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_WIDTH: 300px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_TITLE_FONT_SIZE: 18px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_DATE_FONT_SIZE: 14px;
    @MATERIAL_SCHEDULER_WORKSPACE_MONTH_CELL_LEFT_OFFSET: 8px;
    @MATERIAL_SCHEDULER_WORKSPACE_MONTH_HEADER_HEIGHT: 22px;
    @MATERIAL_SCHEDULER_WORKSPACE_MONTH_TIMELINE__TIME_HEIGHT: 34px;

    @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT: 56px;
    @MATERIAL_SCHEDULER_APPOINTMENT_CONTENT_PADDING: 5px 7px;
    @MATERIAL_SCHEDULER_DROPDOWN_APPOINTMENT_MARGIN_TOP: 7px;
    @MATERIAL_SCHEDULER_DROPDOWN_BUTTON_HEIGHT: 22px;
    @MATERIAL_SCHEDULER_DROPDOWN_BUTTON_PADDING: 4px;
    @MATERIAL_SCHEDULER_DROPDOWN_DAY_MARGIN: 5px;

    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_CONTENT_MARGIN_LEFT: 10px;
    @MATERIAL_TOOLTIP_MARKER_DIMENSION: 24px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_TITLE_MARGIN_TOP: 4px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_REMOVE_PADDING_TOP: 1px;
    @SCHEDULER_RECURRENCE_EDITOR_ITEM_OFFSET: -88px;
}

.dx-size-compact() {
    @MATERIAL_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT: 28px;

    @MATERIAL_SCHEDULER_HEADER_HEIGHT: 48px;
    @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT: 28px;
    @MATERIAL_SCHEDULER_NAVIGATOR_BORDER_RADIUS: @button-border-radius;
    @MATERIAL_SCHEDULER_NAVIGATION_BUTTONS_PADDING: 6px;

    @MATERIAL_SCHEDULER_APPOINTMENT_MONTH_TEXT_SIZE: 12px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TITLE_TEXT_SIZE: 12px;
    @MATERIAL_SCHEDULER_APPOINTMENT_DATE_TEXT_SIZE: 10px;

    @MATERIAL_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE: 16px;
    @MATERIAL_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE: 12px;

    @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE: 12px;
    @MATERIAL_SCHEDULER_HEADER_PANEL_WEEK_FONT_SIZE: 12px;
    @MATERIAL_SCHEDULER_HEADER_PANEL_DAY_FONT_SIZE: 20px;
    @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN: 14px;

    @MATERIAL_SCHEDULER_GROUP_HEADER_FONT_SIZE: 14px;
    @MATERIAL_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH: 100px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TRANSPARENT_LEFT_BORDER: 1px solid transparent;
    @MATERIAL_SCHEDULER_APPOINTMENT_TRANSPARENT_RIGHT_BORDER: 1px solid transparent;

    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_WIDTH: 300px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_TITLE_FONT_SIZE: 14px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_DATE_FONT_SIZE: 11px;
    @MATERIAL_SCHEDULER_WORKSPACE_MONTH_CELL_LEFT_OFFSET: 4px;
    @MATERIAL_SCHEDULER_WORKSPACE_MONTH_HEADER_HEIGHT: 22px;
    @MATERIAL_SCHEDULER_WORKSPACE_MONTH_TIMELINE__TIME_HEIGHT: 34px;

    @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT: 40px;
    @MATERIAL_SCHEDULER_APPOINTMENT_CONTENT_PADDING: 2px 4px;
    @MATERIAL_SCHEDULER_DROPDOWN_APPOINTMENT_MARGIN_TOP: 3px;
    @MATERIAL_SCHEDULER_DROPDOWN_BUTTON_HEIGHT: 18px;
    @MATERIAL_SCHEDULER_DROPDOWN_BUTTON_PADDING: 2px;
    @MATERIAL_SCHEDULER_DROPDOWN_DAY_MARGIN: 2px;

    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_CONTENT_MARGIN_LEFT: 8px;
    @MATERIAL_TOOLTIP_MARKER_DIMENSION: 18px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_TITLE_MARGIN_TOP: 3px;
    @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_REMOVE_PADDING_TOP: 2px;

    @SCHEDULER_RECURRENCE_EDITOR_ITEM_OFFSET: -80px;
}

@MATERIAL_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT: @MATERIAL_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT * 1.5;
@MATERIAL_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT: @MATERIAL_SCHEDULER_WORKSPACE_DATE_TABLE_CELL_HEIGHT * 0.5;


@MATERIAL_SCHEDULER_MONTH_DATE_TEXT_SIZE: 14px;

@MATERIAL_SCHEDULER_SWITCHER_LABEL_OFFSET: 10px;

@SCHEDULER_FIRST_OF_MONTH_BORDER: 1px solid @SCHEDULER_FIRST_MONTH_BORDER_COLOR;

@MATERIAL_SCHEDULER_COMPACT_APPOINTMENT_BUTTON_BORDER_RADIUS: 12px;

@MATERIAL_SCHEDULER_AGENDA_TIME_PANEL_CELL_PADDING: 8px;

.scheduler-mixin();

.dx-scheduler-scrollable-fixed-content {
    height: auto;
}

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

    &:after {
        content: none;
    }

    > div {
        margin-top: -6px;
        font-size: @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE;

        .dx-scheduler-small & {
            font-size: @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE - 1;
        }
    }

    padding-right: @MATERIAL_SCHEDULER_AGENDA_TIME_PANEL_CELL_PADDING;

    .dx-scheduler-small & {
        padding-right: 2px;
    }

    .dx-rtl & {
        padding-left: @MATERIAL_SCHEDULER_AGENDA_TIME_PANEL_CELL_PADDING;
        padding-right: 0;
    }

    &.dx-scheduler-time-panel-current-time-cell:before {
        content: none;
    }
}

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

.dx-scheduler-all-day-title {
    height: @MATERIAL_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT;
    line-height: @MATERIAL_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT;
    font-size: @MATERIAL_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE;
    top: @MATERIAL_SCHEDULER_HEADER_HEIGHT;
    border-bottom: @SCHEDULER_BASE_BORDER;

    .dx-scheduler-small & {
        font-size: @MATERIAL_SCHEDULER_ALL_DAY_TITLE_FONT_SIZE * 0.8;
    }

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

.dx-scheduler-appointment-content {
    &,
    .dx-scheduler-agenda & {
        .dx-scheduler-appointment-title {
            font-size: @MATERIAL_SCHEDULER_APPOINTMENT_TITLE_TEXT_SIZE;
        }

        .dx-scheduler-appointment-content-date,
        .dx-scheduler-appointment-content-allday {
            font-size: @MATERIAL_SCHEDULER_APPOINTMENT_DATE_TEXT_SIZE;
            font-weight: normal;
            opacity: 0.7;
        }
    }
}

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

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

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

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

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

// T657800
.dx-scheduler-work-space-vertical-grouped {
    .dx-scheduler-vertical-group-table-mixin(1px);
}

.dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors
    padding: @MATERIAL_SCHEDULER_APPOINTMENT_CONTENT_PADDING;
}

.dx-scheduler-work-space-week,
.dx-scheduler-work-space-work-week,
.dx-scheduler-work-space-day {
    .dx-scheduler-all-day-appointment {
        .dx-scheduler-appointment-content {
            padding: @MATERIAL_SCHEDULER_APPOINTMENT_CONTENT_PADDING;
        }
    }

    .dx-scheduler-date-time-indicator {
        &:before {
            display: none;
        }

        height: 2px;
    }
}

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

.dx-scheduler-header-panel-cell {
    height: @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT;
    text-align: left;
    vertical-align: bottom;

    .dx-rtl & {
        text-align: right;
    }

    .dx-scheduler-work-space.dx-scheduler-work-space-month & {
        height: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_HEADER_HEIGHT;
    }

    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week & {
        &:not(.dx-scheduler-header-panel-week-cell) {
            height: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_TIMELINE__TIME_HEIGHT;
            font-size: @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE;
            padding-left: @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN;
            padding-right: @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN;
            padding-top: 11px;
        }
    }

    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &,
    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month & {
        .flex-container(column, nowrap);
    }

    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &,
    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month &,
    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & {
        align-items: flex-start;
        justify-content: flex-end;
    }

    .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & {
        align-items: flex-end;

        &:not(.dx-scheduler-header-panel-week-cell) {
            height: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_TIMELINE__TIME_HEIGHT;
            font-size: @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE;
            padding-left: @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN;
            padding-right: @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN;
        }

        &.dx-scheduler-header-panel-week-cell {
            align-items: flex-start;
            display: flex;
        }
    }

    &.dx-scheduler-header-panel-week-cell {
        border-bottom: @SCHEDULER_BASE_BORDER;
        flex-flow: column;
        justify-content: flex-end;
    }


    &.dx-scheduler-header-panel-current-time-cell {
        &:before {
            content: none;
        }
    }

    .dx-scheduler-header-panel-cell-date {
        display: block;
        margin: 0 @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN;

        .dx-scheduler-small & {
            margin: 0 @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN * @SCHEDULER_SMALL_SIZE_FACTOR;
        }

        &:first-child {
            font-size: @MATERIAL_SCHEDULER_HEADER_PANEL_WEEK_FONT_SIZE;
            line-height: 7px;
        }

        &:last-child {
            font-size: @MATERIAL_SCHEDULER_HEADER_PANEL_DAY_FONT_SIZE;
            line-height: @MATERIAL_SCHEDULER_HEADER_PANEL_DAY_FONT_SIZE + 5;
        }
    }
}

.dx-scheduler-work-space {
    .dx-scheduler-scrollable-offset-mixin(@MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT, @MATERIAL_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT, @MATERIAL_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT);
}

.dx-scheduler-work-space-day {
    .dx-scheduler-scrollable-offset-mixin(0, @MATERIAL_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT, @MATERIAL_SCHEDULER_COLLAPSED_ALL_DAY_TABLE_CELL_HEIGHT);

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

    &.dx-scheduler-work-space-count {
        .dx-scheduler-header-panel {
            margin-top: 0;
        }

        .dx-scheduler-all-day-title-mixin(@MATERIAL_SCHEDULER_HEADER_HEIGHT + @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT);

        .dx-scheduler-all-day-title {
            top: @MATERIAL_SCHEDULER_HEADER_HEIGHT + @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT;
        }
    }

    &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) {
        .dx-scheduler-date-table-cell,
        .dx-scheduler-all-day-table-cell {
            border-left: @SCHEDULER_BASE_BORDER;

            .dx-rtl & {
                border-right: @SCHEDULER_BASE_BORDER;
            }
        }
    }

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

.dx-scheduler-work-space.dx-scheduler-work-space-month {
    .dx-scheduler-group-mixin(@MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT);

    .dx-scheduler-appointment-content {
        padding-top: 3px;
        font-size: @MATERIAL_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-panel {
        border-bottom: none;
    }

    .dx-scheduler-date-table-cell {
        font-size: @MATERIAL_SCHEDULER_MONTH_DATE_TEXT_SIZE;
        text-align: left;
        height: 100px;

        > div {
            padding: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_CELL_LEFT_OFFSET;
        }

        .dx-rtl & {
            text-align: right;
        }
    }

    .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors
        .dx-scheduler-header-panel-cell-date {
            font-size: @MATERIAL_SCHEDULER_HEADER_PANEL_WEEK_FONT_SIZE;
            margin-left: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_CELL_LEFT_OFFSET;
            line-height: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_HEADER_HEIGHT;
        }
    }

    .dx-scheduler-appointment-collector {
        margin-top: @MATERIAL_SCHEDULER_DROPDOWN_APPOINTMENT_MARGIN_TOP;
        margin-left: 52px;
    }

    .dx-scrollable.dx-scheduler-date-table-scrollable {
        padding-bottom: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_HEADER_HEIGHT;
        margin-bottom: -@MATERIAL_SCHEDULER_WORKSPACE_MONTH_HEADER_HEIGHT;
    }

    .dx-scheduler-date-table-current-date {
        color: @SCHEDULER_CURRENT_TIME_CELL_COLOR;
    }
}


.dx-scheduler-adaptive {
    .dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-appointment-collector {
        margin: 0;
    }

    .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell {
        white-space: nowrap;
    }
}

.dx-scheduler-appointment-collector {
    margin-top: @MATERIAL_SCHEDULER_DROPDOWN_DAY_MARGIN;
    position: absolute;

    &.dx-button {
        border-radius: @MATERIAL_SCHEDULER_COMPACT_APPOINTMENT_BUTTON_BORDER_RADIUS;
        height: @MATERIAL_SCHEDULER_DROPDOWN_BUTTON_HEIGHT;
        min-width: auto;
        width: auto;

        &:before {
            display: none;
        }

        .dx-button-content {
            padding: @MATERIAL_SCHEDULER_DROPDOWN_BUTTON_PADDING 0;
            font-size: 12px;
        }
    }
}

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

.dx-scheduler-navigator {
    padding: (@MATERIAL_SCHEDULER_HEADER_HEIGHT - @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT) * 0.5;

    .dx-button {
        .dx-button-flat-color-styling(@button-default-bg, @button-default-text-hover-bg, @button-default-text-focused-bg, @button-default-text-active-bg);

        .dx-button-text {
            text-transform: none;
        }
    }
}

.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: @MATERIAL_SCHEDULER_NAVIGATOR_BORDER_RADIUS 0 0 @MATERIAL_SCHEDULER_NAVIGATOR_BORDER_RADIUS;

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

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

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

.dx-scheduler-view-switcher.dx-tabs {
    background: none;
    margin-right: 14px;

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

        &.dx-tab-selected {
            &:before {
                bottom: 0;
            }

            &:after {
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
        }
    }

    .dx-tabs-nav-button {
        height: @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT;
        margin-top: (@MATERIAL_SCHEDULER_HEADER_HEIGHT - @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT - 2) / 2;
    }
}

.dx-scheduler-view-switcher.dx-dropdownmenu {
    &:before {
        display: none;
    }

    margin-top: (@MATERIAL_SCHEDULER_HEADER_HEIGHT - @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT) * 0.5 - 1px;
    .dx-button-flat-color-styling(@base-icon-color, fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 8%), fade(@button-normal-bg-inverted, 30%));

    z-index: 1;

    &.dx-button-has-icon:not(.dx-button-has-text) {
        border-radius: 2px;
    }
}

.dx-scheduler-view-switcher-label {
    margin-top: (@MATERIAL_SCHEDULER_HEADER_HEIGHT - @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT) * 0.5 - 1px;
    right: @MATERIAL_SCHEDULER_SWITCHER_LABEL_OFFSET;
    height: @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT;
    line-height: 24px;
    padding: (@MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT - 24px) / 2 14px;
    padding-right: @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT + 14;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: @base-border-radius;

    .dx-rtl & {
        left: @MATERIAL_SCHEDULER_SWITCHER_LABEL_OFFSET;
        right: auto;
        padding-right: 14px;
        padding-left: @MATERIAL_SCHEDULER_NAVIGATOR_HEIGHT + 14;
    }
}

.dx-scheduler-group-flex-container .dx-scheduler-group-header {
    font-weight: bold;
}

.dx-scheduler-group-table,
.dx-scheduler-header-panel {
    .dx-scheduler-group-row {
        .dx-scheduler-group-header {
            font-weight: 500;
            font-size: @MATERIAL_SCHEDULER_GROUP_HEADER_FONT_SIZE;
            color: @scheduler-group-header-color;
            text-align: left;
            border-bottom: 1px solid @SCHEDULER_BASE_BORDER_COLOR;

            .dx-scheduler-group-header-content {
                padding-left: @MATERIAL_SCHEDULER_HEADER_PANEL_MARGIN;

                .dx-scheduler-work-space-month &,
                .dx-scheduler-agenda & {
                    padding-left: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_CELL_LEFT_OFFSET;

                    .dx-rtl & {
                        padding-right: @MATERIAL_SCHEDULER_WORKSPACE_MONTH_CELL_LEFT_OFFSET;
                        padding-left: 0;
                    }
                }

                .dx-scheduler-timeline & {
                    padding-left: 0;
                }
            }

            .dx-scheduler-timeline & {
                vertical-align: top;

                .dx-scheduler-group-header-content div {
                    top: 8px;
                    transform: none;
                }
            }

            .dx-rtl & {
                text-align: right;
            }
        }
    }
}

.dx-scheduler-header-panel { // stylelint-disable-line no-duplicate-selectors
    .dx-scheduler-group-row {
        &:before {
            border-right: 1px solid @SCHEDULER_BASE_BORDER_COLOR;
        }
    }
}

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

    .dx-scheduler-all-day-table-cell {
        border-bottom: @SCHEDULER_BASE_BORDER;
    }
}

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

    &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
        .dx-scheduler-header-panel {
            border-bottom-width: 1px;
        }

        .dx-scheduler-all-day-title-hidden {
            border-top: none;
        }
    }

    &.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-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) {
            .dx-scheduler-group-header {
                border-bottom: none;
            }
        }

        &.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-both-scrollbar:not(.dx-scheduler-agenda) {
            .dx-scheduler-all-day-panel {
                .dx-scheduler-first-group-cell {
                    border-left: 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-focused-cell {
        box-shadow: none;
    }
}

.dx-scheduler-appointment-popup {
    .dx-form {
        padding: 0 10px 0 10px;

        .dx-layout-manager {
            padding: 0 10px 0 10px;
        }
    }

    .dx-popup-title {
        background-color: @scheduler-popup-title-bg;
        border-bottom: none;

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

    .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-header-panel,
.dx-scheduler-time-panel {
    font-size: @MATERIAL_SCHEDULER_WORKSPACE_INFO_TEXT_SIZE;
}


.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th,
.dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .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 {
    &,
    .dx-rtl &,
    .dx-scheduler-work-space-month &,
    .dx-scheduler-timeline &,
    .dx-rtl .dx-scheduler-timeline & {
        border-left: @MATERIAL_SCHEDULER_APPOINTMENT_TRANSPARENT_LEFT_BORDER;
        border-right: @MATERIAL_SCHEDULER_APPOINTMENT_TRANSPARENT_RIGHT_BORDER;

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

        box-shadow: none;

        &.dx-state-active,
        &.dx-resizable-resizing,
        &.dx-draggable-dragging,
        &.dx-state-hover,
        &.dx-state-hover.dx-resizable {
            box-shadow: none;
        }

        border-radius: 2px;
    }
}

.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) {
        @headerScrollBarTopOffset: @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT;
        .dx-scheduler-header-scrollable-mixin(@headerScrollBarTopOffset);
        .dx-scheduler-group-mixin(@headerScrollBarTopOffset);

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

.dx-scheduler-work-space-vertical-grouped { // stylelint-disable-line no-duplicate-selectors
    &.dx-scheduler-work-space-month {
        .dx-scheduler-date-table-scrollable {
            border-top: @SCHEDULER_BASE_BORDER;
        }
    }
}

.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
    &.dx-scheduler-timeline-week,
    &.dx-scheduler-timeline,
    &.dx-scheduler-timeline-work-week {
        .dx-scheduler-header-scrollable-mixin(@MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT * 2);

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

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

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

.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(@MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT);

    &.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(@MATERIAL_SCHEDULER_ALL_DAY_TABLE_CELL_HEIGHT + @MATERIAL_SCHEDULER_HEADER_PANEL_TABLE_CELL_HEIGHT);

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

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

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

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

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

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

.dx-scheduler-agenda {
    .dx-scheduler-group-header {
        font-size: @MATERIAL_SCHEDULER_GROUP_HEADER_FONT_SIZE;
        width: @MATERIAL_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH;

        .dx-scheduler-group-header-content {
            padding-top: 2px;

            &:before {
                display: none;
            }
        }
    }

    .dx-scheduler-date-table-row,
    .dx-scheduler-time-panel-row {
        box-shadow: inset 0 -1px 0 0 @base-border-color;
    }

    .dx-scheduler-agenda-group-mixin(@MATERIAL_SCHEDULER_GROUP_HEADER_TABLE_CELL_WIDTH);

    .dx-scheduler-time-panel-cell {
        text-align: left;
        padding-left: @MATERIAL_SCHEDULER_AGENDA_TIME_PANEL_CELL_PADDING;
        padding-right: 0;

        .dx-rtl & {
            text-align: right;
            padding-right: @MATERIAL_SCHEDULER_AGENDA_TIME_PANEL_CELL_PADDING;
            padding-left: 0;
        }

        > span {
            font-size: @MATERIAL_SCHEDULER_TIME_PANEL_FONT_SIZE;
        }
    }

    .dx-scheduler-date-table-scrollable {
        margin-top: 0;
    }

    &.dx-scheduler-work-space-grouped {
        .dx-scheduler-group-header {
            border-bottom: none;
        }

        .dx-scheduler-date-table-row.dx-scheduler-date-table-last-row,
        .dx-scheduler-time-panel-row.dx-scheduler-date-table-last-row,
        .dx-scheduler-group-table .dx-scheduler-group-row {
            border-bottom: none;

            &:not(:last-child) {
                box-shadow: inset 0 -1px 0 0 @scheduler-group-separator-border-color;
            }
        }
    }
}

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

.dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block {
    .dx-button {
        min-width: auto;
        padding: 0;
        .dx-button-flat-color-styling(@button-default-bg, @button-default-text-hover-bg, @button-default-text-focused-bg, @button-default-text-active-bg);

        .dx-icon {
            .dx-icon-sizing(@MATERIAL_BASE_ICON_SIZE);
        }
    }
}

.dx-scheduler-appointment-tooltip-wrapper,
.dx-scheduler-overlay-panel {
    .dx-overlay-content {
        background-color: @base-bg;

        .dx-popup-content {
            padding: 0;
        }

        .dx-list {
            .dx-list-item {
                margin-bottom: 0;
                margin-top: 0;
                border-bottom: 1px solid @base-border-color;

                &:last-of-type {
                    border-bottom-left-radius: @tooltip-border-radius;
                    border-bottom-right-radius: @tooltip-border-radius;
                    border-bottom: none;
                }

                &:first-of-type {
                    border-top-left-radius: @tooltip-border-radius;
                    border-top-right-radius: @tooltip-border-radius;
                }

                .dx-tooltip-appointment-item {
                    margin-left: @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_CONTENT_MARGIN_LEFT;

                    .dx-tooltip-appointment-item-marker-body {
                        width: @MATERIAL_TOOLTIP_MARKER_DIMENSION;
                        height: @MATERIAL_TOOLTIP_MARKER_DIMENSION;
                    }

                    .dx-tooltip-appointment-item-content {
                        .dx-tooltip-appointment-item-content-subject {
                            margin-top: @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_TITLE_MARGIN_TOP;
                            font-size: @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_TITLE_FONT_SIZE;
                        }

                        .dx-tooltip-appointment-item-content-date {
                            font-size: @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_DATE_FONT_SIZE;
                            opacity: 1;
                            margin-top: 4px;
                        }
                    }

                    .dx-tooltip-appointment-item-delete-button-container {
                        padding-top: @MATERIAL_SCHEDULER_APPOINTMENT_TOOLTIP_REMOVE_PADDING_TOP;
                    }
                }
            }
        }
    }
}