.appointment-content {
    position: relative;
}

.appointment-intake {
    background: #B80058 !important;
}

.appointment-testing {
    background: #CD5C5C !important;
}

.appointment-observation {
    background: #EBAC23 !important;
}

.appointment-interview {
    background: #008CF9 !important;
}

.appointment-consultation {
    background: #D163E6 !important;
}

:is(.appointment-results-review, .appointment-iep) {
    background: #006E00 !important;
}

.appointment-block {
    background: #e9ecef !important;
    color: darkgray !important;
}

.appointment-hold {
    filter: brightness(0.85) !important;
    overflow: hidden !important;
}

    .appointment-hold::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='110' height='40' viewBox='0 0 400 40'>\
                          <g font-family='Arial, sans-serif' font-size='18' fill='%23fff'>\
                                <text x='0'   y='16'>HOLD</text><text x='55' y='16'>HOLD</text>\
                                    <text x='0'   y='36'>HOLD</text><text x='55' y='36'>HOLD</text>\
                                    <text x='0'   y='-4'>HOLD</text><text x='55' y='-4'>HOLD</text>\
                                    <text x='0'   y='56'>HOLD</text><text x='55' y='56'>HOLD</text>\
                          </g>\
                        </svg>") !important;
        background-size: 110px 40px !important;
        background-repeat: repeat !important;
        background-position: 0 0 !important;
    }