/*#region Appointment Editor */
.internal-scheduler-appointment-editor {
    /*As Item*/
    /*As Container*/
    display: flex;
    flex-direction: column;
}

    .internal-scheduler-appointment-editor > .date-time-container,
    .internal-scheduler-appointment-editor > .checkbox-radiobutton-container,
    .internal-scheduler-appointment-editor > .note-link-container {
        display: flex;
        flex-direction: row;
    }

        .internal-scheduler-appointment-editor > .date-time-container > .e-date-wrapper,
        .internal-scheduler-appointment-editor > .date-time-container > .e-datetime-wrapper {
            flex: 0 0 50%;
            margin-top: .5rem;
            margin-right: .5rem;
        }

        .internal-scheduler-appointment-editor > .checkbox-radiobutton-container .allday-checkbox-container,
        .internal-scheduler-appointment-editor > .checkbox-radiobutton-container .radio-button-container {
            flex: 0 0 50%;
            margin-top: .5rem;
            display: flex;
            flex-direction: column;
        }
/*#endregion*/

.intake {
    background: #B80058 !important;
}

.testing {
    background: #CD5C5C !important;
}

.observation {
    background: #EBAC23 !important;
}

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

.consultation {
    background: #D163E6 !important;
}

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

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

/*#region Pending*/
.pending {
    background-image: repeating-linear-gradient( 135deg, transparent, transparent 8px, rgba(240, 240, 240, 0.3) 8px, rgba(240, 240, 240, 0.3) 10px ) !important;
}
/*#endregion*/

/*#region Hold*/
.hold {
    filter: brightness(0.85) !important;
    overflow: hidden !important;
}

    .hold::before {
        content: "" !important;
        position: absolute !important;
        inset: -50% -20% !important;
        transform: rotate(-45deg) !important;
        pointer-events: none !important;
        z-index: 0 !important;
        opacity: 0.45 !important;
        background: unset !important;
        background-image: url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' width='118' height='36' viewBox='0 0 118 36'>\
              <g font-family='Arial, sans-serif' font-size='12' fill='%23fff'>\
                <text x='0'  y='14'>HOLD</text>\
                <text x='55' y='14'>HOLD</text>\
                <text x='27' y='32'>HOLD</text>\
                <text x='82' y='32'>HOLD</text>\
              </g>\
            </svg>") !important;
        background-size: 118px 36px !important;
        background-repeat: repeat !important;
        background-position: 0 0 !important;
    }
/*#endregion*/

/*#region Cancelled, No Show, Rescheduled*/
.cancelled,
.no-show,
.rescheduled {
    filter: brightness(0.9) contrast(1.05) !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

    .cancelled::before,
    .no-show::before,
    .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;
    }
/*#endregion*/

/*#region Cancelled By User*/
.cancelled-by-user {
    filter: brightness(0.85) !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

    .cancelled-by-user::before {
        content: "" !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='320' height='32' viewBox='0 0 320 32'>\
              <g font-family='Arial, sans-serif' font-size='12' fill='%23fff'>\
                <text x='0'   y='14'>CANCELLED%20BY%20USER</text>\
                <text x='160' y='14'>CANCELLED%20BY%20USER</text>\
                <text x='80'  y='30'>CANCELLED%20BY%20USER</text>\
                <text x='240' y='30'>CANCELLED%20BY%20USER</text>\
              </g>\
            </svg>") !important;
        background-size: 320px 32px !important;
        background-repeat: repeat !important;
        background-position: 0 0 !important;
    }
/*#endregion*/

/*#region Check-In*/
.checked-in {
    position: relative;
    overflow: hidden;
}

    .checked-in::before {
        content: "CHECKED IN";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 18px;
        background: rgba(0,0,0,.82);
        color: #f00;
        font-weight: 700;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        pointer-events: none;
        z-index: 2;
    }

    .checked-in .e-subject,
    .checked-in .e-appointment-details {
        padding-top: 20px;
    }
/*#endregion*/

/*#region Check-Out*/
.checked-out {
    background: lightgray !important;
}

    .checked-out::after {
        content: none !important;
    }
/*#endregion*/

/*#region Appointment Types */

.appointment-content {
    position: relative;
}

/*#endregion*/

/*#region General */
.e-text-ellipsis.e-resource-text {
    text-align: center !important;
}
/*#endregion*/

/*#region Note Icons */
.e-appointment-details {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.appointment-information {
    padding-left: 4px;
    padding-right: 4px;
}

.appointment-icon {
    position: absolute;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    pointer-events: none;
}

    .appointment-icon.svg {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 1;
    }

        .appointment-icon.svg::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 26px;
            height: 26px;
            transform: translate(-50%, -50%);
            background: #fff; /* chip color */
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
            z-index: 0;
        }

        .appointment-icon.svg::after {
            content: "";
            position: absolute;
            inset: 0;
            background-color: currentColor; /* icon color comes from `color:` */
            z-index: 1;
        }

        .appointment-icon.svg.notes {
            right: 20px;
            bottom: 4px;
        }

            .appointment-icon.svg.notes::after {
                -webkit-mask: url("/icons/add-notes-outline-rounded.svg") no-repeat center / contain;
                mask: url("/icons/add-notes-outline-rounded.svg") no-repeat center / contain;
            }

        .appointment-icon.svg.money {
            right: 2px;
            bottom: 4px;
        }

            .appointment-icon.svg.money::after {
                -webkit-mask: url("/icons/attach-money-rounded.svg") no-repeat center / contain;
                mask: url("/icons/attach-money-rounded.svg") no-repeat center / contain;
            }

.green-note-icon .appointment-icon.svg.notes {
    color: #22c55e;
}

.green-charge-icon .appointment-icon.svg.money {
    color: #22c55e;
}

.yellow-note-icon .appointment-icon.svg.notes {
    color: #eab308;
}

.yellow-charge-icon .appointment-icon.svg.money {
    color: #eab308;
}

.red-note-icon .appointment-icon.svg.notes {
    color: #ff0000;
}

.red-charge-icon .appointment-icon.svg.money {
    color: #ff0000;
}
/*#endregion*/

/*#region Context Menu Icons */
.e-contextmenu .e-menu-item .e-menu-icon.svg::before {
    content: none !important;
}

.e-contextmenu .e-menu-item .e-menu-icon.svg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    line-height: 1;
}

.e-contextmenu .e-menu-item .e-menu-icon.svg {
    width: 18px;
    height: 18px;
}

.e-contextmenu .e-menu-item .e-menu-icon {
    margin-right: 8px;
}

    .e-contextmenu .e-menu-item .e-menu-icon.svg.available {
        background-image: url("/icons/event-available-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.cancel {
        background-image: url("/icons/cancel-outline.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.check {
        background-image: url("/icons/fact-check-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.copy {
        background-image: url("/icons/content-copy-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.cut {
        background-image: url("/icons/content-cut-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.delete {
        background-image: url("/icons/delete-forever-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.frame-person {
        background-image: url("/icons/frame-person-off-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.medical {
        background-image: url("/icons/medical-information-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.notes {
        background-image: url("/icons/add-notes-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.paste {
        background-image: url("/icons/content-paste-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.person-check {
        background-image: url("/icons/person-check-outline-rounded.svg");
    }

    .e-contextmenu .e-menu-item .e-menu-icon.svg.receipt {
        background-image: url("/icons/receipt-long-outline-rounded.svg");
    }

/*#endregion*/

/*#region Sidebar */
#foreside-calendar-sidebar {
    width: 320px;
}

#foreside-settings-sidebar {
    width: 375px;
}

#foreside-settings-sidebar {
    background-color: #f8f9fa;
    color: #212529;
}

#foreside-settings-sidebar {
    height: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

#foreside-settings-sidebar {
    background: #f8f9fa;
    font-size: 14px;
    height: 100%;
    overflow: auto;
    padding: 15px;
    width: 100%;
}

    #foreside-settings-sidebar .col-row {
        display: flex;
        flex-wrap: wrap;
    }

    #foreside-settings-sidebar label {
        font-weight: 500;
    }

    #foreside-settings-sidebar .col-left {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
        margin-bottom: 1rem;
    }

    #foreside-settings-sidebar .col-right {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
        margin-bottom: 1rem;
    }
/*#endregion*/