@media print {
    * {
        -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
        color-adjust: exact !important; /*Firefox*/
    }

    .mbsc-calendar {
        height: auto !important
    }

    .mbsc-calendar-wrapper,
    .mbsc-calendar-body,
    .mbsc-calendar-body-inner,
    .mbsc-calendar-grid,
    .mbsc-eventcalendar,
    .mbsc-event-list-scroll {
        overflow: visible !important;
    }

    .mbsc-scrollview-scroll,
    .mbsc-calendar-slide {
        -webkit-transform: none !important;
        transform: none !important;
    }

    .mbsc-scrollview-scroll {
        display: -moz-box;
        display: flex;
    }

    .mbsc-calendar-slide {
        display: none;
    }

    .mbsc-calendar-slide-active {
        display: block;
        position: relative;
    }
    /* Material Agenda list */
    .mbsc-material.mbsc-event-color {
        width: .375em;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
    }

    /* Scheduler */
    .mbsc-eventcalendar-schedule {
        height: auto !important;
    }

    .mbsc-schedule-grid-scroll {
        overflow-x: auto;
        overflow-y: visible;
    }

    .mbsc-timeline {
        -moz-box-flex: 0;
        flex: none;
    }



    .mbsc-schedule-all-day-wrapper {
        overflow: visible;
        max-height: none !important;
    }

    .mbsc-schedule-time-indicator {
        display: none;
    }
}

.mbsc-schedule-all-day-item.mbsc-ltr::after,
.mbsc-timeline-day.mbsc-ltr::after {
    right: 0;
    left: 0;
}

.dx-grid-mobile-card .mbsc-card-footer .mbsc-btn {
    background: none;
    box-shadow: none;
}

.dx-grid-mobile-card  .mbsc-collapsible-icon {
    top: 30px;
}

.dx-grid-mobile-card .mbsc-card-subtitle {
    height: 2.5em;
    margin: 0.3em;
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.md-sync-views {
    display: flex;
}

.md-sync-cal {
    width: 350px;
}

.md-sync-list {
    flex: 1;
    border-left: 1px solid #ccc;
}

.demo-synchronized-views,
.md-sync-views,
.md-sync-list {
    height: 100%;
}

@media screen and (max-width: 700px) {
    .md-sync-views {
        display: block;
    }

    .md-sync-cal {
        width: auto;
    }

    .demo-synchronized-views,
    .md-sync-views,
    .md-sync-list {
        height: auto;
    }
}

.mb-side-calendar{
    height:320px;
}

.mb-tab-inactive {
    display: none !important;
}

.mbsc-ms-ic:before {
    font-family: 'FabricMDL2Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mbsc-ic:before {
    font-family: 'icons_mobiscroll' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mbsc-material {
    /* Flat buttons */
    /* Outline buttons */
    /* Predefined colors */
}

    .mbsc-material.mbsc-button-standard {
        background: #cfcfcf;
        color: black;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }

        .mbsc-material.mbsc-button-standard.mbsc-hover {
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
        }

        .mbsc-material.mbsc-button-standard.mbsc-focus, .mbsc-material.mbsc-button-standard.mbsc-active {
            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        }

    .mbsc-material.mbsc-button-flat, .mbsc-material.mbsc-button-outline {
        color: black;
    }

        .mbsc-material.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-outline.mbsc-hover {
            background: var(--base-hover-bg);
        }
        .mbsc-material.mbsc-button-flat.mbsc-active, .mbsc-material.mbsc-button-outline.mbsc-active {
            background: var(--base-theme-color-transparent-20);
        }

        .mbsc-material.mbsc-button-flat.mbsc-focus, .mbsc-material.mbsc-button-outline.mbsc-focus {
            background: rgba(0, 0, 0, 0.3);
        }

    .mbsc-material.mbsc-button-outline {
        border-color: black;
    }

    .mbsc-material.mbsc-button-primary.mbsc-button-standard {
        background: #3f97f6;
        color: #fff;
    }

    .mbsc-material.mbsc-button-secondary.mbsc-button-standard {
        background: #90979E;
        color: #fff;
    }

    .mbsc-material.mbsc-button-success.mbsc-button-standard {
        background: #43BE5F;
        color: #fff;
    }

    .mbsc-material.mbsc-button-danger.mbsc-button-standard {
        background: #f5504e;
        color: #fff;
    }

    .mbsc-material.mbsc-button-warning.mbsc-button-standard {
        background: #f8b042;
        color: #fff;
    }

    .mbsc-material.mbsc-button-info.mbsc-button-standard {
        background: #5BB7C5;
        color: #fff;
    }

    .mbsc-material.mbsc-button-dark.mbsc-button-standard {
        background: #47494A;
        color: #fff;
    }

    .mbsc-material.mbsc-button-light.mbsc-button-standard {
        background: var(--base-bg);
        color: var(--base-text-color);
    }

    .mbsc-material.mbsc-button-primary.mbsc-button-flat {
        color: #3f97f6;
    }

        .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-active {
            background: rgba(63, 151, 246, 0.2);
        }

        .mbsc-material.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
            background: rgba(63, 151, 246, 0.3);
        }

    .mbsc-material.mbsc-button-secondary.mbsc-button-flat {
        color: #90979E;
    }

        .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-active {
            background: rgba(144, 151, 158, 0.2);
        }

        .mbsc-material.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
            background: rgba(144, 151, 158, 0.3);
        }

    .mbsc-material.mbsc-button-success.mbsc-button-flat {
        color: #43BE5F;
    }

        .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-active {
            background: rgba(67, 190, 95, 0.2);
        }

        .mbsc-material.mbsc-button-success.mbsc-button-flat.mbsc-focus {
            background: rgba(67, 190, 95, 0.3);
        }

    .mbsc-material.mbsc-button-danger.mbsc-button-flat {
        color: #f5504e;
    }

        .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-active {
            background: rgba(245, 80, 78, 0.2);
        }

        .mbsc-material.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
            background: rgba(245, 80, 78, 0.3);
        }

    .mbsc-material.mbsc-button-warning.mbsc-button-flat {
        color: #f8b042;
    }

        .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-active {
            background: rgba(248, 176, 66, 0.2);
        }

        .mbsc-material.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
            background: rgba(248, 176, 66, 0.3);
        }

    .mbsc-material.mbsc-button-info.mbsc-button-flat {
        color: #5BB7C5;
    }

        .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-active {
            background: rgba(91, 183, 197, 0.2);
        }

        .mbsc-material.mbsc-button-info.mbsc-button-flat.mbsc-focus {
            background: rgba(91, 183, 197, 0.3);
        }

    .mbsc-material.mbsc-button-dark.mbsc-button-flat {
        color: #47494A;
    }

        .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-active {
            background: rgba(71, 73, 74, 0.2);
        }

        .mbsc-material.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
            background: rgba(71, 73, 74, 0.3);
        }

    .mbsc-material.mbsc-button-light.mbsc-button-flat {
        color: #cccccc;
    }

        .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-hover, .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-active {
            background: rgba(255, 255, 255, 0.2);
        }

        .mbsc-material.mbsc-button-light.mbsc-button-flat.mbsc-focus {
            background: rgba(255, 255, 255, 0.3);
        }

    .mbsc-material.mbsc-button-primary.mbsc-button-outline {
        border-color: #3f97f6;
        color: #3f97f6;
    }

        .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-active {
            background: rgba(63, 151, 246, 0.2);
        }

        .mbsc-material.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
            background: rgba(63, 151, 246, 0.3);
        }

    .mbsc-material.mbsc-button-secondary.mbsc-button-outline {
        border-color: #90979E;
        color: #90979E;
    }

        .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-active {
            background: rgba(144, 151, 158, 0.2);
        }

        .mbsc-material.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
            background: rgba(144, 151, 158, 0.3);
        }

    .mbsc-material.mbsc-button-success.mbsc-button-outline {
        border-color: #43BE5F;
        color: #43BE5F;
    }

        .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-active {
            background: rgba(67, 190, 95, 0.2);
        }

        .mbsc-material.mbsc-button-success.mbsc-button-outline.mbsc-focus {
            background: rgba(67, 190, 95, 0.3);
        }

    .mbsc-material.mbsc-button-danger.mbsc-button-outline {
        border-color: #f5504e;
        color: #f5504e;
    }

        .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-active {
            background: rgba(245, 80, 78, 0.2);
        }

        .mbsc-material.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
            background: rgba(245, 80, 78, 0.3);
        }

    .mbsc-material.mbsc-button-warning.mbsc-button-outline {
        border-color: #f8b042;
        color: #f8b042;
    }

        .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-active {
            background: rgba(248, 176, 66, 0.2);
        }

        .mbsc-material.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
            background: rgba(248, 176, 66, 0.3);
        }

    .mbsc-material.mbsc-button-info.mbsc-button-outline {
        border-color: #5BB7C5;
        color: #5BB7C5;
    }

        .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-active {
            background: rgba(91, 183, 197, 0.2);
        }

        .mbsc-material.mbsc-button-info.mbsc-button-outline.mbsc-focus {
            background: rgba(91, 183, 197, 0.3);
        }

    .mbsc-material.mbsc-button-dark.mbsc-button-outline {
        border-color: #47494A;
        color: #47494A;
    }

        .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-active {
            background: rgba(71, 73, 74, 0.2);
        }

        .mbsc-material.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
            background: rgba(71, 73, 74, 0.3);
        }

    .mbsc-material.mbsc-button-light.mbsc-button-outline {
        border-color: #cccccc;
        color: #cccccc;
    }

        .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-hover, .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-active {
            background: rgba(255, 255, 255, 0.2);
        }

        .mbsc-material.mbsc-button-light.mbsc-button-outline.mbsc-focus {
            background: rgba(255, 255, 255, 0.3);
        }

.mbsc-material-dark {
    /* Flat buttons */
    /* Outline buttons */
    /* Predefined colors */
}

    .mbsc-material-dark.mbsc-button-standard {
        background: #2b2b2b;
        color: white;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }

        .mbsc-material-dark.mbsc-button-standard.mbsc-hover {
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
        }

        .mbsc-material-dark.mbsc-button-standard.mbsc-focus, .mbsc-material-dark.mbsc-button-standard.mbsc-active {
            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        }

    .mbsc-material-dark.mbsc-button-flat, .mbsc-material-dark.mbsc-button-outline {
        color: white;
    }

        .mbsc-material-dark.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-flat.mbsc-active, .mbsc-material-dark.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-outline.mbsc-active {
            background: rgba(255, 255, 255, 0.2);
        }

        .mbsc-material-dark.mbsc-button-flat.mbsc-focus, .mbsc-material-dark.mbsc-button-outline.mbsc-focus {
            background: rgba(255, 255, 255, 0.3);
        }

    .mbsc-material-dark.mbsc-button-outline {
        border-color: white;
    }

    .mbsc-material-dark.mbsc-button-primary.mbsc-button-standard {
        background: #3f97f6;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-secondary.mbsc-button-standard {
        background: #90979E;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-success.mbsc-button-standard {
        background: #43BE5F;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-danger.mbsc-button-standard {
        background: #f5504e;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-warning.mbsc-button-standard {
        background: #f8b042;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-info.mbsc-button-standard {
        background: #5BB7C5;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-dark.mbsc-button-standard {
        background: #47494A;
        color: #000;
    }

    .mbsc-material-dark.mbsc-button-light.mbsc-button-standard {
        background: var(--base-bg);
        color: #fff;
    }

    .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat {
        color: #3f97f6;
    }

        .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-active {
            background: rgba(63, 151, 246, 0.2);
        }

        .mbsc-material-dark.mbsc-button-primary.mbsc-button-flat.mbsc-focus {
            background: rgba(63, 151, 246, 0.3);
        }

    .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat {
        color: #90979E;
    }

        .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-active {
            background: rgba(144, 151, 158, 0.2);
        }

        .mbsc-material-dark.mbsc-button-secondary.mbsc-button-flat.mbsc-focus {
            background: rgba(144, 151, 158, 0.3);
        }

    .mbsc-material-dark.mbsc-button-success.mbsc-button-flat {
        color: #43BE5F;
    }

        .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-active {
            background: rgba(67, 190, 95, 0.2);
        }

        .mbsc-material-dark.mbsc-button-success.mbsc-button-flat.mbsc-focus {
            background: rgba(67, 190, 95, 0.3);
        }

    .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat {
        color: #f5504e;
    }

        .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-active {
            background: rgba(245, 80, 78, 0.2);
        }

        .mbsc-material-dark.mbsc-button-danger.mbsc-button-flat.mbsc-focus {
            background: rgba(245, 80, 78, 0.3);
        }

    .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat {
        color: #f8b042;
    }

        .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-active {
            background: rgba(248, 176, 66, 0.2);
        }

        .mbsc-material-dark.mbsc-button-warning.mbsc-button-flat.mbsc-focus {
            background: rgba(248, 176, 66, 0.3);
        }

    .mbsc-material-dark.mbsc-button-info.mbsc-button-flat {
        color: #5BB7C5;
    }

        .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-active {
            background: rgba(91, 183, 197, 0.2);
        }

        .mbsc-material-dark.mbsc-button-info.mbsc-button-flat.mbsc-focus {
            background: rgba(91, 183, 197, 0.3);
        }

    .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat {
        color: #47494A;
    }

        .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-active {
            background: rgba(71, 73, 74, 0.2);
        }

        .mbsc-material-dark.mbsc-button-dark.mbsc-button-flat.mbsc-focus {
            background: rgba(71, 73, 74, 0.3);
        }

    .mbsc-material-dark.mbsc-button-light.mbsc-button-flat {
        color: #cccccc;
    }

        .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-hover, .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-active {
            background: rgba(255, 255, 255, 0.2);
        }

        .mbsc-material-dark.mbsc-button-light.mbsc-button-flat.mbsc-focus {
            background: rgba(255, 255, 255, 0.3);
        }

    .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline {
        border-color: #3f97f6;
        color: #3f97f6;
    }

        .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-active {
            background: rgba(63, 151, 246, 0.2);
        }

        .mbsc-material-dark.mbsc-button-primary.mbsc-button-outline.mbsc-focus {
            background: rgba(63, 151, 246, 0.3);
        }

    .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline {
        border-color: #90979E;
        color: #90979E;
    }

        .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-active {
            background: rgba(144, 151, 158, 0.2);
        }

        .mbsc-material-dark.mbsc-button-secondary.mbsc-button-outline.mbsc-focus {
            background: rgba(144, 151, 158, 0.3);
        }

    .mbsc-material-dark.mbsc-button-success.mbsc-button-outline {
        border-color: #43BE5F;
        color: #43BE5F;
    }

        .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-active {
            background: rgba(67, 190, 95, 0.2);
        }

        .mbsc-material-dark.mbsc-button-success.mbsc-button-outline.mbsc-focus {
            background: rgba(67, 190, 95, 0.3);
        }

    .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline {
        border-color: #f5504e;
        color: #f5504e;
    }

        .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-active {
            background: rgba(245, 80, 78, 0.2);
        }

        .mbsc-material-dark.mbsc-button-danger.mbsc-button-outline.mbsc-focus {
            background: rgba(245, 80, 78, 0.3);
        }

    .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline {
        border-color: #f8b042;
        color: #f8b042;
    }

        .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-active {
            background: rgba(248, 176, 66, 0.2);
        }

        .mbsc-material-dark.mbsc-button-warning.mbsc-button-outline.mbsc-focus {
            background: rgba(248, 176, 66, 0.3);
        }

    .mbsc-material-dark.mbsc-button-info.mbsc-button-outline {
        border-color: #5BB7C5;
        color: #5BB7C5;
    }

        .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-active {
            background: rgba(91, 183, 197, 0.2);
        }

        .mbsc-material-dark.mbsc-button-info.mbsc-button-outline.mbsc-focus {
            background: rgba(91, 183, 197, 0.3);
        }

    .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline {
        border-color: #47494A;
        color: #47494A;
    }

        .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-active {
            background: rgba(71, 73, 74, 0.2);
        }

        .mbsc-material-dark.mbsc-button-dark.mbsc-button-outline.mbsc-focus {
            background: rgba(71, 73, 74, 0.3);
        }

    .mbsc-material-dark.mbsc-button-light.mbsc-button-outline {
        border-color: #cccccc;
        color: #cccccc;
    }

        .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-hover, .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-active {
            background: rgba(255, 255, 255, 0.2);
        }

        .mbsc-material-dark.mbsc-button-light.mbsc-button-outline.mbsc-focus {
            background: rgba(255, 255, 255, 0.3);
        }

.mbsc-material {
    /* range highlight and selection */
    /* Marks */
    /* Picker */
    /* Desktop style */
    /* Multi month grid view */
}

    .mbsc-material.mbsc-calendar-wrapper:after {
        box-shadow: none;
    }

    .mbsc-material.mbsc-calendar-button.mbsc-button {
        color: var(--base-text-color);
    }

    .mbsc-material.mbsc-calendar-slide {
        background: var(--base-bg);
    }

    .mbsc-material.mbsc-calendar-picker-slide {
        background: var(--base-bg);
    }

    .mbsc-material.mbsc-calendar-week-day {
        color: var(--base-text-color);
    }

    .mbsc-material.mbsc-calendar-cell-text {
        color: var(--base-text-color);
    }

    .mbsc-material.mbsc-calendar-week-nr, .mbsc-material.mbsc-calendar-today {
        color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-focus .mbsc-calendar-cell-text {
        box-shadow: 0 0 0 2px rgba(48, 48, 48, 0.7);
    }

    .mbsc-material.mbsc-hover .mbsc-calendar-cell-text {
        background: var(--base-hover-bg);
    }

    .mbsc-material.mbsc-range-hover::before {
        border-color: #e6e6e6;
    }

    .mbsc-material.mbsc-range-day::after {
        background-color: rgba(26, 115, 232, 0.25);
    }

    .mbsc-material.mbsc-selected .mbsc-calendar-cell-text {
        background: var(--base-theme-color);
        border-color: var(--base-theme-color);
        color: #fff;
    }

    .mbsc-material.mbsc-calendar-mark {
        background: var(--base-theme-color);
    }

    .mbsc-material.mbsc-calendar-label {
        color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-calendar-label-inner {
        color: #fff;
    }

    .mbsc-material.mbsc-calendar-label.mbsc-calendar-label-active, .mbsc-material.mbsc-calendar-label.mbsc-calendar-label-dragging {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 3px -1px rgba(0, 0, 0, 0.2);
    }

    .mbsc-material.mbsc-calendar-text-more {
        box-shadow: none;
    }

        .mbsc-material.mbsc-calendar-text-more .mbsc-calendar-label-text {
            color: var(--base-text-color);
        }

    .mbsc-material.mbsc-calendar-popup .mbsc-popup-arrow,
    .mbsc-material.mbsc-calendar-popup .mbsc-popup-body {
        background: var(--base-bg);
    }

    .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-week-day,
    .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-day,
    .mbsc-material.mbsc-calendar-height-md .mbsc-calendar-day:after {
        border-color: var(--base-bg);
    }

    .mbsc-material.mbsc-calendar-month-title {
        color: var(--base-theme-color);
    }

.mbsc-material-dark {
    /* range highlight and selection */
    /* Marks */
    /* Picker */
    /* Desktop style */
    /* Multi month grid view */
}

    .mbsc-material-dark.mbsc-calendar-wrapper:after {
        box-shadow: inset 0 0.5em 0.25em -0.5em rgba(255, 255, 255, 0.5);
    }

    .mbsc-material-dark.mbsc-calendar-button.mbsc-button {
        color: #fff;
    }

    .mbsc-material-dark.mbsc-calendar-slide {
        background: #000;
    }

    .mbsc-material-dark.mbsc-calendar-picker-slide {
        background: #303030;
    }

    .mbsc-material-dark.mbsc-calendar-week-day {
        color: rgba(255, 255, 255, 0.7);
    }

    .mbsc-material-dark.mbsc-calendar-cell-text {
        color: #fff;
    }

    .mbsc-material-dark.mbsc-calendar-week-nr, .mbsc-material-dark.mbsc-calendar-today {
        color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-focus .mbsc-calendar-cell-text {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
    }

    .mbsc-material-dark.mbsc-hover .mbsc-calendar-cell-text {
        background: rgba(255, 255, 255, 0.1);
    }

    .mbsc-material-dark.mbsc-range-hover::before {
        border-color: #1a1a1a;
    }

    .mbsc-material-dark.mbsc-range-day::after {
        background-color: rgba(135, 176, 243, 0.25);
    }

    .mbsc-material-dark.mbsc-selected .mbsc-calendar-cell-text {
        background: #87b0f3;
        border-color: #87b0f3;
        color: #000;
    }

    .mbsc-material-dark.mbsc-calendar-mark {
        background: #87b0f3;
    }

    .mbsc-material-dark.mbsc-calendar-label {
        color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-calendar-label-inner {
        color: #000;
    }

    .mbsc-material-dark.mbsc-calendar-label.mbsc-calendar-label-active, .mbsc-material-dark.mbsc-calendar-label.mbsc-calendar-label-dragging {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 1px 3px -1px rgba(0, 0, 0, 0.2);
    }

    .mbsc-material-dark.mbsc-calendar-text-more {
        box-shadow: none;
    }

        .mbsc-material-dark.mbsc-calendar-text-more .mbsc-calendar-label-text {
            color: #fff;
        }

    .mbsc-material-dark.mbsc-calendar-popup .mbsc-popup-arrow,
    .mbsc-material-dark.mbsc-calendar-popup .mbsc-popup-body {
        background: #303030;
    }

    .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-week-day,
    .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-day,
    .mbsc-material-dark.mbsc-calendar-height-md .mbsc-calendar-day:after {
        border-color: #2b2b2b;
    }

    .mbsc-material-dark.mbsc-calendar-month-title {
        color: #87b0f3;
    }



.mbsc-material {
    /* Schedule */
    /* Header */
    /* Grid & All-day cont */
    /* Event style */
    /* Invalid */
    /* Timeline */
}

    .mbsc-material.mbsc-eventcalendar {
        background: var(--base-bg);
        color: var(--base-text-color);
    }

        .mbsc-material.mbsc-eventcalendar .mbsc-calendar-day.mbsc-disabled {
            background: #f0f0f0;
        }

    .mbsc-material.mbsc-event-list-empty {
        color: rgba(48, 48, 48, 0.7);
    }

    .mbsc-material.mbsc-schedule-date-header, .mbsc-material.mbsc-event-day.mbsc-list-header {
        background: var(--base-bg);
        color: rgba(48, 48, 48, 0.7);
    }

    .mbsc-material.mbsc-colored-event.mbsc-list-item {
        background: var(--base-theme-color);
        color: #fff;
    }

    .mbsc-material.mbsc-event.mbsc-list-item.mbsc-focus {
        box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.4);
    }

    .mbsc-material.mbsc-event-color {
        background: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-header-dayname {
        color: #70757a;
    }

    .mbsc-material.mbsc-schedule-header-day {
        color: var(--base-text-color);
    }

    .mbsc-material.mbsc-schedule-header-dayname-curr {
        color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-header-day-today {
        color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-header-day.mbsc-hover {
        background: rgba(26, 115, 232, 0.3);
    }

    .mbsc-material.mbsc-schedule-header-day.mbsc-selected {
        background-color: var(--base-theme-color);
        color: #fff;
    }

    .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: var(--base-bg-shade);
    }

    .mbsc-material.mbsc-schedule-time-wrapper-end:before, .mbsc-material.mbsc-schedule-time-wrapper:after {
        border-bottom: 1px solid #cfcfcf;
    }

    .mbsc-material.mbsc-schedule-all-day-text, .mbsc-material.mbsc-schedule-timezone-label, .mbsc-material.mbsc-schedule-time {
        color: #70757a;
    }

    .mbsc-material.mbsc-schedule-time-indicator {
        border-color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-time-indicator-day:before {
        background: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-time-indicator-time {
        background: rgba(255, 255, 255, 0.8);
    }

    .mbsc-material.mbsc-schedule-time-indicator-time {
        color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-event {
        color: var(--base-theme-color);
    }

    .mbsc-material.mbsc-schedule-event-inner {
        color: #fff;
    }

    .mbsc-material.mbsc-schedule-invalid {
        background: rgba(240, 240, 240, 0.75);
        color: #8a8a8a;
    }

    .mbsc-material.mbsc-timeline-resource-empty, .mbsc-material.mbsc-timeline-resource-bg {
        background: var(--base-bg);
    }

.mbsc-material-dark {
    /* Schedule */
    /* Header */
    /* Grid & All-day cont */
    /* Event style */
    /* Invalid */
    /* Timeline */
}

    .mbsc-material-dark.mbsc-eventcalendar {
        background: #000;
        color: #fff;
    }

        .mbsc-material-dark.mbsc-eventcalendar .mbsc-calendar-day.mbsc-disabled {
            background: #1a1a1a;
        }

    .mbsc-material-dark.mbsc-event-list-empty {
        color: rgba(255, 255, 255, 0.7);
    }

    .mbsc-material-dark.mbsc-schedule-date-header, .mbsc-material-dark.mbsc-event-day.mbsc-list-header {
        background: #000;
        color: rgba(255, 255, 255, 0.7);
    }

    .mbsc-material-dark.mbsc-colored-event.mbsc-list-item {
        background: #87b0f3;
        color: #000;
    }

    .mbsc-material-dark.mbsc-event.mbsc-list-item.mbsc-focus {
        box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.4);
    }

    .mbsc-material-dark.mbsc-event-color {
        background: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-header-dayname {
        color: #dddddd;
    }

    .mbsc-material-dark.mbsc-schedule-header-day {
        color: #fff;
    }

    .mbsc-material-dark.mbsc-schedule-header-dayname-curr {
        color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-header-day-today {
        color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-header-day.mbsc-hover {
        background: rgba(135, 176, 243, 0.3);
    }

    .mbsc-material-dark.mbsc-schedule-header-day.mbsc-selected {
        background-color: #87b0f3;
        color: #000;
    }

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

    .mbsc-material-dark.mbsc-schedule-time-wrapper-end:before, .mbsc-material-dark.mbsc-schedule-time-wrapper:after {
        border-bottom: 1px solid #2b2b2b;
    }

    .mbsc-material-dark.mbsc-schedule-all-day-text, .mbsc-material-dark.mbsc-schedule-timezone-label, .mbsc-material-dark.mbsc-schedule-time {
        color: #dddddd;
    }

    .mbsc-material-dark.mbsc-schedule-time-indicator {
        border-color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-time-indicator-day:before {
        background: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-time-indicator-time {
        background: rgba(0, 0, 0, 0.8);
    }

    .mbsc-material-dark.mbsc-schedule-time-indicator-time {
        color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-event {
        color: #87b0f3;
    }

    .mbsc-material-dark.mbsc-schedule-event-inner {
        color: #000;
    }

    .mbsc-material-dark.mbsc-schedule-invalid {
        background: rgba(26, 26, 26, 0.75);
        color: #787878;
    }

    .mbsc-material-dark.mbsc-timeline-resource-empty, .mbsc-material-dark.mbsc-timeline-resource-bg {
        background: #000;
    }

.mbsc-font {
    font-family: Segoe UI,Segoe UI WestEuropean,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
    font-size: 16px;
    font-weight: normal;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
}

.mbsc-beauty .mbsc-calendar-week-days {
    padding-top: 1rem !important;
    background: var(--base-bg-lighter)
}

.mbsc-beauty .mbsc-calendar-day-inner {
    background-color: var(--base-bg-lighter)
}

.mbsc-beauty .mbsc-calendar-day-outer > .mbsc-calendar-day-inner {
    background-color: var(--base-bg-light);
}

.mbsc-beauty .mbsc-calendar-controls {
    border-bottom:1px solid var(--base-bg-shade);
}

.mbsc-calendar-hidden-content .mbsc-calendar-body:not(.mbsc-dx-grid),
.mbsc-calendar-hidden-content .mbsc-event-list > div:not(.mbsc-dx-grid),
.mbsc-calendar-hidden-content .mbsc-calendar-header > div:not(.mbsc-calendar-controls),
.mbsc-calendar-hidden-content .cal-header-nav,
.mbsc-calendar-hidden-content .cal-header-next-prev-pager {
    display: none !important;
}

.mbsc-material.mbsc-calendar-title {
    font-weight: 300;
}

.mbsc-material.mbsc-calendar-title {
    font-size:16px;
}

.mbsc-calendar-controls {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.mbsc-calendar-label-inner {
    display:flex;
    align-items:center;
    height:50px;
}

.mbsc-material.mbsc-calendar-width-md .mbsc-calendar-text {
    height:50px;
}

.mbsc-material.mbsc-calendar-controls {
    padding: 0px;
}

.mb-side-calendar .mbsc-calendar-row {
    max-height: 30px;
}