.cal-scheduler-view {
    * {
        box-sizing: border-box;
    }

    .cal-scheduler-headers {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-bottom: 3px;
        border: 1px solid #e1e1e1;

        .aside {
            flex: 1 0;

            &.cal-header-clock {
                max-width: 5em;
            }
        }

        .cal-header {
            flex: 1;
            text-align: center;
            padding: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: default;

            &:not(:last-child) {
                border-right: 1px solid #e1e1e1;
            }

            &:hover {
                background-color: #ededed;
            }

            &.cal-today {
                background-color: #e8fde7;
            }

            &.cal-weekend span {
                color: #8b0000;
            }

            span {
                font-weight: 400;
                opacity: 0.5;
            }
        }

        .cal-header-cols {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
        }
    }

    .cal-scheduler {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;

        .aside {
            flex: 1 0;

            &.cal-scheduler-hour-rows {
                max-width: 5em; //5.12em
            }
        }

        .cal-scheduler-hour-rows {
            width: auto !important;
            border: solid 1px #e1e1e1;
            overflow: hidden;
            position: relative;

            .cal-scheduler-hour {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;

                &:nth-child(odd) {
                    background-color: #fafafa;
                }

                &:not(:last-child) {
                    border-bottom: 1px solid #e1e1e1;
                }

                .cal-scheduler-time {
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-flex-flow: column wrap;
                    flex-flow: column wrap;
                    width: 100%;
                    font-weight: bold;
                    text-align: center;

                    .cal-scheduler-time-segment {
                        // flex: 1 0;
                        cursor: default;

                        &:hover {
                            background-color: #ededed;
                        }

                        &:not(:last-child) {
                            border-bottom: thin dashed #e1e1e1;
                        }
                    }
                }
            }
        }

        .cal-scheduler-cols {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            border-top: 1px solid #e1e1e1;

            &:not(.cal-resize-active) {
                .cal-scheduler-hour-segment:hover {
                    background-color: #ededed;
                }
            }

            .cal-scheduler-col {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-flow: column wrap;
                flex-flow: column wrap;
                flex: 1 0;
                position: relative;
                border-right: 1px solid #e1e1e1;
                /*&:hover {
                    background-color: #fafafa;
                }*/
                .cal-scheduler-hour {
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: flex;
                    flex-flow: column wrap;
                    flex: 1 0;

                    &.cal-today {
                        background-color: #e8fde7;
                    }

                    &.cal-disabled {
                        background-color: #eee;
                        pointer-events: none;
                    }

                    &.cal-odd {
                        background: #ffffff;
                    }

                    &.cal-even {
                        background: #fafafa;
                    }

                    .cal-scheduler-hour-segments {
                        display: -webkit-box;
                        display: -moz-box;
                        display: -ms-flexbox;
                        display: flex;
                        flex-flow: column wrap;
                        flex: 1 0;
                        border-bottom: 1px solid #e1e1e1;

                        &.no-border {
                            border-bottom: 0 !important;
                        }

                        &.cal-disabled {
                            background-color: #eee;
                            pointer-events: none;

                            .cal-scheduler-event {
                                filter: opacity(50%);
                                -webkit-filter: opacity(50%);
                            }
                        }

                        :not(:last-child) .cal-scheduler-hour-segment {
                            border-bottom: thin dashed #e1e1e1;
                        }

                        .cal-scheduler-hour-segment {
                            flex: 1 0;
                            display: -webkit-box;
                            display: -moz-box;
                            display: -ms-flexbox;
                            display: flex;
                            flex-flow: column wrap;

                            // &:not(.has-events):hover {
                            //     background-color: #ededed;
                            // }

                            &.no-border {
                                border-bottom: 0 !important;
                            }

                            &.cal-disabled {
                                background-color: #eee;
                                pointer-events: none;
                            }

                            &.cal-drag-over {
                                background-color: #ededed;
                            }

                            .cal-scheduler-time {
                                font-weight: bold;
                                font-size: .7em;
                                color: #6c757d;
                            }
                        }
                    }
                }

                .cal-scheduler-event-container {
                    flex: 1 0;
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    // display: flex;
                    flex-flow: column wrap;
                    position: absolute;

                    .cal-scheduler-event {
                        flex: 1 0;
                        display: -webkit-box;
                        display: -moz-box;
                        display: -ms-flexbox;
                        display: flex;
                        flex-flow: column wrap;
                        padding: 0 10px;
                        font-size: 12px;
                        margin: 2px;
                        line-height: 30px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        border-radius: .3em;
                        border: 1px solid #1e90ff;
                        background-color: #d1e8ff;
                        height: calc(100% - 5px);

                        -webkit-transition: all ease-out 0.2s;
                        -moz-transition: all ease-out 0.2s;
                        -o-transition: all ease-out 0.2s;
                        transition: all ease-out 0.2s;

                        filter: brightness(100%);
                        -webkit-filter: brightness(100%);
                        -webkit-backface-visibility: hidden; /* Fix for transition flickering */
                        -moz-backface-visibility: hidden;
                        backface-visibility: hidden;

                        &.cal-disabled, &.cal-cancelled {
                            background-color: gray !important;
                            // pointer-events: none;
                            filter: grayscale(100%);
                            -webkit-filter: grayscale(100%);
                        }

                        &.cal-not-clickable {
                            cursor: not-allowed !important;
                        }

                        &:not(.cal-disabled):not(.cal-cancelled):hover {
                            cursor: pointer;
                            filter: brightness(95%);
                            -webkit-filter: brightness(95%);
                        }

                        &:not(.cal-disabled):not(.cal-cancelled).cal-draggable {
                            cursor: move;
                        }

                        &.cal-starts-before-day {
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                        }
                        
                        &.cal-ends-after-day {
                            border-bottom-left-radius: 0;
                            border-bottom-right-radius: 0;
                        }

                        .cal-scheduler-event-title-container {
                            width: 100%;
                            display: flex;
                            flex-flow: row wrap;

                            .cal-scheduler-event-title {
                                flex: 1 0;
                                font-size: 16px;
                                font-weight: bold;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;

                                -webkit-user-select: none; /* Safari */        
                                -moz-user-select: none; /* Firefox */
                                -ms-user-select: none; /* IE10+/Edge */
                                user-select: none; /* Standard */
                            }

                            .cal-scheduler-event-status {
                                margin: 7px 0;
                                width: 16px;
                                height: 16px;
                                background: grey;
                                -moz-border-radius: 50px;
                                -webkit-border-radius: 50px;
                                border-radius: 50px;
                                border: 1px solid black;

                                &.ok {
                                    background: green;
                                }

                                &.warning {
                                    background: orange;
                                }

                                &.danger {
                                    background: red;
                                }
                            }
                        }

                        .cal-scheduler-event-content-container {
                            flex: 1 auto;
                            width: 100%;
                            padding-right: 1.5em;

                            .cal-scheduler-event-content {
                                // white-space: pre-wrap;      /* CSS3 */   
                                // white-space: -moz-pre-wrap; /* Firefox */    
                                // white-space: -pre-wrap;     /* Opera <7 */   
                                // white-space: -o-pre-wrap;   /* Opera 7 */    
                                // word-wrap: break-word;      /* IE */
                                // overflow: hidden;
                                // text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;

                                -webkit-user-select: none; /* Safari */        
                                -moz-user-select: none; /* Firefox */
                                -ms-user-select: none; /* IE10+/Edge */
                                user-select: none; /* Standard */
                            }
                        }

                        .cal-scheduler-event-actions-container {
                            width: 100%;
                            position: relative;

                            &.no-content-actions {
                                flex: 1 0;
                            }

                            &:not(.no-content-actions) {
                                .cal-scheduler-event-actions {
                                    position: absolute;
                                    bottom: 5px;
                                    right: 0;
                                }
                            }

                            .cal-scheduler-event-actions {

                                .cal-scheduler-event-action {
                                    text-decoration: none;

                                    -webkit-user-select: none; /* Safari */        
                                    -moz-user-select: none; /* Firefox */
                                    -ms-user-select: none; /* IE10+/Edge */
                                    user-select: none; /* Standard */
                                }
                            }
                        }
                    }

                    .cal-resize-handle {
                        width: 100%;
                        height: 4px;
                        cursor: row-resize;
                        position: absolute;
                  
                        &.cal-resize-handle-after-end {
                          bottom: 0;
                        }
                    }

                    &.cal-drag-active {
                        pointer-events: none;
                        z-index: 999;
                    
                        & * {
                          pointer-events: none;
                        }
                    }
                    

                    @mixin day-x($attr, $attr-steps: 1, $unit: '%') {
                        $attr-list: null;
                        $attr-count: 7;
                
                        @for $i from 1 through $attr-count {
                            $attr-value: $attr-steps * $i;
                    
                            &.day#{$i} {
                                #{$attr}: #{$attr-value}#{$unit};
                            }
                    
                            $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
                        }
                    
                        // #{$attr-list} {
                        //     //append style to all classes
                        // }
                    }
                
                    @mixin time-x($attr, $attr-steps: 2, $minutes-steps: 15, $unit: '%') {
                        $attr-list: null;
                        $hours: 0;
                        $minutes: 0;
                        $attr-count: 24 * 60 / $minutes-steps;
                
                        @for $i from 0 through $attr-count {
                            $attr-value: $attr-steps * $i;
                            
                            @if($i > 0) {
                                $minutes: $minutes + $minutes-steps;
                                @if($minutes == 60) {
                                    $minutes: 0;
                                    $hours: $hours + 1;
                                }
                            }
                
                            $hoursString: '#{$hours}';
                            @if($hours < 10) {
                                $hoursString: '0#{$hours}';
                            }
                
                            $minutesString: '#{$minutes}';
                            @if($minutes < 10) {
                                $minutesString: '0#{$minutes}';
                            }
                
                            &.time#{$hoursString}#{$minutesString} {
                                #{$attr}: #{$attr-value}#{$unit};
                            }
                
                            $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
                        }
                    
                        // #{$attr-list} {
                        //     //append style to all classes
                        // }
                    }
                
                    @mixin length-x($attr, $attr-steps: 2, $minutes-steps: 15, $unit: '%') {
                        $attr-list: null;
                        $attr-count: 24 * 60 / $minutes-steps;
                
                        @for $i from 0 through $attr-count {
                            $attr-name: $minutes-steps * $i;
                            $attr-value: $attr-steps * $i;
                            
                            &.length#{$attr-name} {
                                #{$attr}: #{$attr-value}#{$unit};
                            }
                    
                            $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
                        }
                    
                        // #{$attr-list} {
                        //     //append style to all classes
                        // }
                    }
                
                    @include day-x('left', 5);
                    @include time-x('top', 1.47); 
                    @include length-x('height', 1.47);
                }
            }
        }
    }
}