.custom-styles {
    .hatch-large {
        .b-cal-time-range-body {
            background : repeating-linear-gradient(-55deg, var(--b-neutral-93), var(--b-neutral-93) 10px, var(--b-neutral-98) 5px, var(--b-neutral-98) 20px);
        }
    }

    .hatch-small {
        .b-cal-time-range-body {
            background-image : linear-gradient(-45deg, rgba(0, 0, 0, 0) 46%, #e03218 49%, #e03218 51%, rgba(0, 0, 0, 0) 55%);
            background-size  : 6px 6px;
        }
    }

    .b-cal-time-range-line.my-time-range {
        overflow : visible;
        z-index  : 3;

        &::before {
            background-color : var(--b-time-range-color);
            color            : #fff;
            content          : attr(data-content);
            padding          : 1px 8px 2px;
            height           : 22px;
            position         : absolute;
        }
    }

    .start-line {
        --b-time-range-color : #4ebb52;
        &::before {
            border-radius : 6px 6px 0 0;
        }
    }

    .end-line {
        --b-time-range-color : #f76262;
        &::before {
            border-radius : 0 0 6px 6px;
            top           : calc(100% - 2px);
        }
    }
}