/* CSS placeholder for Classic example, copy from Modern if needed */

.b-scheduler {
    font-size : 14px;
}

.b-grid-cell {
    font-weight : 400;
}

.b-sch-header-row-main {
    .b-sch-header-time-axis-cell {
        color : #555;
    }
}

.b-grid-header-container {
    box-shadow       : none;
    border-bottom    : 1px solid #e2e2e2;
    background-color : #f5f5f5;

    .b-sch-time-axis-column {
        background-color : #f5f5f5;
    }
}

.b-grid-header {
    background-color : #f5f5f5;
}

.b-sch-event {
    font-weight         : 800;
    border-inline-start : 5px solid rgba(255, 255, 255, 0.5);
    border-radius       : 2px;
    opacity             : 0.8;
    color               : #fff;

    &:hover {
        opacity : 1;
    }
}

.b-grid-body-container .b-sch-range {
    background : repeating-linear-gradient(-55deg, #ddd, #ddd 10px, #eee 5px, #eee 20px);
    opacity    : 0.7;

    label {
        background-color : #e4d2d2;
        color            : #4c2727;
    }
}

.b-grid-splitter {
    box-shadow : none;
}

.bryntum-scheduler {
    .x-panel-header {
        .x-field {
            .x-label-el,
            .x-input-el {
                font-size : 16px;
            }

            .x-label-el,
            .x-trigger .x-icon-el,
            .x-input-el {
                color : #fff;
            }
        }

        .x-button {
            margin-inline-end : 0.5em;
        }
    }
}

/*  Demo header styling */

body > .x-panel > .x-panel-header {

    background-color : #0076f8;

    h1 {
        font-size   : 1em;
        font-weight : 400;
    }

    .x-panel-header-title {
        padding : 0.1rem;

        .x-title-text {
            background           : url(../../_shared/images/bryntum-symbol-white.svg) no-repeat left center;
            padding-inline-start : 2em;
            background-size      : 1.8em;
            a {
                color           : #fff;
                text-decoration : none;
            }
        }
    }
}