/* #region Tab Content as a 3 × 3 Grid */
.fpmtab.e-tab > .e-content > .e-item.e-active > .three-by-three {
    align-items: start;
    display: grid;
    flex: 1 1 100%;
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.fpmtab.e-tab > .e-content > .e-item.e-active > .three-by-three > * {
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.patient-chart-dashboard-panel {
    cursor: grab;
    overflow: hidden;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: outline-color 120ms ease-in-out;
}

    .patient-chart-dashboard-panel:hover {
        outline-color: transparent !important;
    }

.patient-chart-dashboard-panel > .fpmchartpanel {
    height: 100% !important;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.patient-chart-dashboard-panel:hover {
    outline-color: var(--fpm-gray-base);
}

.patient-chart-dashboard-panel:active {
    cursor: grabbing;
}
/* #endregion */

/*#region Tab/List Panel Sizing*/
.fpmchartpanel.fpmtab {
    height: 100% !important;
}

    .fpmchartpanel.fpmtab .e-content,
    .fpmchartpanel.fpmtab .e-content .e-item.e-active {
        padding: 0;
    }

.fpmchart.fpmtab.e-tab:has(.three-by-three) > .e-content > .e-item.e-active {
    padding: .5rem 0 0 0 !important;
}
/* #endregion */

/*#region List Header*/
.fpmchartpanel.fpmlistview.e-listview > .e-list-header,
.fpmchartpanel.fpmtab.e-tab > .e-tab-header {
    flex: 0 0 2.75rem;
}

.fpmchartpanel .fpmheader-left {
    align-items: center;
    color: var(--fpm-text-color);
    display: flex;
    flex: 1 1 33.33%;
    flex-direction: row;
    font-size: .875rem;
    gap: .5rem;
    justify-content: start;
}

.fpmchartpanel .fpmheader-middle {
    align-items: center;
    color: var(--fpm-text-color);
    display: flex;
    flex: 1 1 33.33%;
    flex-direction: row;
    font-size: 1rem;
    gap: .5rem;
    justify-content: center;
}

.fpmchartpanel .fpmheader-right {
    align-items: center;
    display: flex;
    flex: 1 1 33.33%;
    flex-direction: row;
    font-size: 1rem;
    gap: .5rem;
    justify-content: end;
}
/*#endregion*/

/*#region List Item*/
.fpmchartpanel.fpmlistview .e-list-item .fpmlistitem-left {
    align-items: center;
    display: flex;
    flex: 1 1 33.33%;
    flex-direction: row;
    font-size: .8125rem;
    justify-content: start;
}

.fpmchartpanel.fpmlistview .e-list-item .fpmlistitem-middle {
    align-items: center;
    display: flex;
    flex: 1 1 33.33%;
    flex-direction: row;
    font-size: .8125rem;
    justify-content: center;
}

.fpmchartpanel.fpmlistview .e-list-item .fpmlistitem-right {
    align-items: center;
    display: flex;
    flex: 1 1 33.33%;
    flex-direction: row;
    font-size: .8125rem;
    gap: .5rem;
    justify-content: end;
}

.fpmchartpanel.fpmlistview .e-list-item .ellipsis-list-item {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
}

.fpmchartpanel.fpmlistview .e-list-item .ellipsis-list-item > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
/*#endregion*/

/*#region Red Button*/
.fpmchart-date-button {
    background-color: var(--fpm-gray-base);
    border-color: var(--fpm-gray-base);
    font-size: var(--fpm-font-size-small);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: var(--fpm-default-height);
}

/*#endregion*/

/*#region Red Button*/
.fpmchartpanel .red-button { font-size: .8375rem; }

    .fpmchartpanel .red-button.e-btn.e-icon-btn {
        background: var(--fpm-red-base);
        border-color: var(--fpm-red-base);
        padding: 0 4px;
    }

    .fpmchartpanel .red-button .e-icons.e-close {
        color: var(--fpm-white);
        font-size: .8375rem;
    }
/*#endregion*/

/*#region Gray Button*/
.fpmchartpanel .gray-button { 
    font-size: .8375rem; }

    .fpmchartpanel .gray-button.e-btn.e-icon-btn {
        background: var(--fpm-gray-base);
        border-color: var(--fpm-gray-base);
        padding: 0 4px;
    }

    .fpmchartpanel .gray-button .e-icons.e-download,
    .fpmchartpanel .gray-button .e-icons.e-edit {
        color: var(--fpm-white);
    font-size: .8375rem;
    }
/*#endregion*/

/*#region DropDown Button*/
.fpmchartpanel .dropdown-icon.e-icon-btn {
    background: var(--fpm-blue-base);
    border-color: var(--fpm-blue-base);
    line-height: .8375rem !important;
    margin: 0 !important;
    padding: .25rem !important;
}

    .fpmchartpanel .dropdown-icon.e-icon-btn > .e-btn-icon {
        color: var(--fpm-white) !important;
        display: unset !important;
        font-size: .8375rem !important;
        margin: 0 !important;
    }

.fpmchartpanel .dropdown-icon.e-icon-btn > .e-btn-icon.e-caret { display: none !important; }
/*#endregion*/

html.safari .fpmswitch.e-switch-wrapper:has(.fpmchart) {
    flex: 0 0 6rem;
    height: 2rem !important;
    border: 0;
    display: flex;
    flex-direction: column;
}