.e-subject,
.e-location,
.e-time {
    position: relative !important;
    z-index: 1 !important;
}

.appointment-cancelled-by-user {
    filter: brightness(0.85) !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

    .appointment-cancelled-by-user::before {
        content: none !important;
        position: absolute !important;
        inset: -50% -20% !important;
        transform: rotate(-45deg) !important;
        pointer-events: none !important;
        z-index: 0 !important;
        opacity: 0.35 !important;
        background-image: url("data:image/svg+xml;utf8,\
                <svg xmlns='http://www.w3.org/2000/svg' width='400' height='40' viewBox='0 0 400 40'>\
                  <g font-family='Arial, sans-serif' font-size='18' fill='%23fff'>\
                    <text x='0'   y='16'>CANCELLED%20BY%20USER</text><text x='200' y='16'>CANCELLED%20BY%20USER</text>\
                    <text x='0'   y='36'>CANCELLED%20BY%20USER</text><text x='200' y='36'>CANCELLED%20BY%20USER</text>\
                    <text x='0'   y='-4'>CANCELLED%20BY%20USER</text><text x='200' y='-4'>CANCELLED%20BY%20USER</text>\
                    <text x='0'   y='56'>CANCELLED%20BY%20USER</text><text x='200' y='56'>CANCELLED%20BY%20USER</text>\
                  </g>\
                </svg>") !important;
        background-size: 400px 40px !important;
        background-repeat: repeat !important;
        background-position: 0 0 !important;
    }

:root {
    --checked-banner-h: 18px; /* banner height */
    --checked-banner-bg: rgba(0,0,0,.82);
    --checked-banner-fg: #f00;
    --checked-banner-fs: 12px;
}

.e-appointment.appointment-checked-in {
    position: relative;
    overflow: hidden;
}

    .e-appointment.appointment-checked-in::before {
        content: "CHECKED IN";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: var(--checked-banner-h);
        background: var(--checked-banner-bg);
        color: var(--checked-banner-fg);
        font-weight: 700;
        font-size: var(--checked-banner-fs);
        line-height: var(--checked-banner-h);
        text-align: center;
        pointer-events: none;
        z-index: 2;
    }

    .e-appointment.appointment-checked-in .e-subject,
    .e-appointment.appointment-checked-in .e-appointment-details {
        padding-top: calc(var(--checked-banner-h) + 2px);
    }

.appointment-checked-out {
    background: lightgray !important;
}

    .appointment-checked-out::after {
        content: none !important;
    }

.appointment-pending {
    background-image: repeating-linear-gradient( 45deg, transparent, transparent 8px, rgba(240, 240, 240, 0.3) 8px, rgba(240, 240, 240, 0.3) 10px ) !important;
}

.appointment-cancelled,
.appointment-no-show,
.appointment-rescheduled {
    filter: brightness(0.9) contrast(1.05) !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

    .appointment-cancelled::before,
    .appointment-no-show::before,
    .appointment-rescheduled::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 0.35 !important;
        background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0.35) 0px, rgba(255,255,255,0.35) 6px, transparent 6px, transparent 14px ) !important;
    }