/* page
-------------------------*/
.page {
    font-size: 0.875rem;
}

    .page .e-control, .page .e-css {
        font-size: 0.875rem;
    }

/* sidebar-treeview
-------------------------*/
.sidebar-treeview.e-sidebar-absolute {
    margin-top: 48px;
    position: fixed;
}

.sidebar-treeview .e-treeview > .e-ul {
    overflow: hidden;
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-home:before {
    content: "\e87b";
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-circle:before {
    content: "\e7ca";
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-people:before {
    content: "\e7b9";
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-settings:before {
    content: "\e880";
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-save-as:before {
    content: "\e7ae";
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-selection:before {
    content: "\e7d4";
}

.sidebar-treeview .e-treeview .e-list-item .e-icons.e-month-agenda:before {
    content: "\e75b";
}

.sidebar-treeview.e-sidebar.e-dock.e-close .e-list-text,
.sidebar-treeview.e-sidebar.e-dock.e-close .e-icons.interaction {
    visibility: hidden;
}

.sidebar-treeview.e-sidebar.e-dock.e-open .e-list-text,
.sidebar-treeview.e-sidebar.e-dock.e-open .e-icons.interaction {
    visibility: visible;
}

.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
    float: right;
}

.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
    margin: 12px;
}

.sidebar-treeview .e-treeview,
.sidebar-treeview .e-treeview .e-ul {
    padding: 0;
    margin: 0;
}

    .sidebar-treeview .e-treeview .e-text-content {
        padding-left: 14px;
    }

    .sidebar-treeview .e-treeview .e-list-item {
        padding: 0;
    }

.sidebar-treeview .e-treeview .e-list-item.e-node-focus > .e-fullrow {
    background-color: unset;
    border-color: unset;
    border: unset;
}

.sidebar-treeview .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
    background-color: rgba(var(--color-sf-primary-container));
    border-color: rgba(var(--color-sf-primary-container));
}

/* right-sidebar
-------------------------*/
.right-sidebar {
    height: calc(100vh - 48px - 48px) !important;
    position: fixed;
    top: 48px !important;
    background: var(--bs-white);
    box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

    .right-sidebar .right-sidebar-header {
        display: flex;
        justify-content: space-between;
        font-size: 1.25rem;
        padding: 0.75rem;
        border-bottom: 1px solid lightgray;
        align-items: center;
    }

    .right-sidebar .right-sidebar-content {
        height: 100%;
        padding: 1rem;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .right-sidebar .right-sidebar-footer {
        padding: 0.75rem;
        border-top: 1px solid lightgray;
        text-align: end;
    }

.right-sidebar-header .e-close {
    cursor: pointer;
}

.main-content:has(.right-sidebar) {
    transform: unset !important;
}

/* e-appbar
-------------------------*/
.e-appbar .e-folder {
    margin: 0 5px;
    font-weight: 500;
    font-size: 16px
}

/* oi
-------------------------*/
.oi-btn .oi {
    padding-bottom: 7px;
}

/* content
-------------------------*/
.main-content {
    min-height: calc(100vh - 48px - 48px);
}

/* content
-------------------------*/
.content {
    padding: 1.5rem 1.5rem 4.5rem 1.5rem !important;
}

/* validation-error
-------------------------*/
.validation-summary-errors {
    color: red;
}

.e-dialog .e-dlg-header-content {
    border-bottom: 1px solid #e9ecef;
    padding: 12px 12px 0px 12px;
}

.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding: 14px;
}

.e-dialog .e-footer-content {
    border-top: 1px solid #e9ecef;
    padding: 14px;
}

/* e-checkbox-wrapper
-------------------------*/
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
    border-color: rgba(var(--color-sf-on-surface-variant));
}

.e-checkbox-wrapper:hover .e-frame,
.e-css.e-checkbox-wrapper:hover .e-frame {
    border-color: rgba(var(--color-sf-on-surface-variant));
}

/* required
-------------------------*/
label.required::after {
    content: "*";
    color: red;
    margin-left: 0.4rem;
    font-size: 0.8em;
}