@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    /*    background-color: #f0f2f5;*/
    --ab-clolor-primary: #007bff;
    --ab-color-danger: #ff4d4f;
    --ab-color-border: #f0f0f0;
    --ab-color-background: #fafafa;
    --colorBrandBackground: #007bff;
    --colorBrandBackgroundHover: #40a9ff;
    --colorBrandBackgroundPressed: #096dd9;
    --colorBrandBackgroundSelected: #0f548c;
    --colorCompoundBrandBackground: #0f6cbd;
    --colorCompoundBrandBackgroundHover: #115ea3;
    --colorCompoundBrandBackgroundPressed: #0f548c;
    --colorBrandBackgroundStatic: #0f6cbd;
}

/* 最外层布局 */
.app-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
/* 右侧主内容区域 */
.app-content {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--neutral-fill-secondary-rest);
}
/* Header */
.app-header {
    flex: 0 0 auto;
    background-color: white !important;
    border-bottom: 1px solid var(--colorNeutralBackground4);
    /*    background-color: var(--colorNeutralBackground2) !important;*/
}
/* Body */
.app-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 1rem 0.8rem;
}


.navmenu {
    /*    border: 1px solid red;*/
    width: 200px;
    min-height: calc(100dvh) !important;
}

    .navmenu .fluent-nav, .fluent-navitem, .fluent-navcategoryitem {
        background-color: var(--neutral-layer-4) !important;
    }

        .navmenu .fluent-navitem:hover, .fluent-navcategoryitem:hover {
            background-color: var(--colorNeutralBackground4) !important;
        }

    .navmenu .active {
        background-color: var(--colorNeutralBackground4) !important;
    }

        .navmenu .active svg {
            fill: var(--ab-clolor-primary) !important;
        }



.sider-logo {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    /*    line-height: 32px;*/
    cursor: pointer;
    /*    border: 1px solid red;*/
}

    .sider-logo img {
        display: inline-block;
        height: 32px;
        vertical-align: middle;
        transition: height .2s;
    }

    .sider-logo h1 {
        display: inline-block;
        height: 32px;
        margin: 0 0 0 12px;
        /*    color: #1890ff;*/
        color: var(--ab-clolor-primary);
        font-weight: 600;
        font-size: 18px;
        line-height: 32px;
        vertical-align: middle;
        animation: fade-in;
        animation-duration: .2s;
    }



.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}

.table {
}

    .table th {
        background-color: var(--ab-color-background);
    }

    .table th, tr, td {
        border: 1px solid var(--ab-color-border);
    }

/*.btn-primary {
    color: white;
    background-color: var(--ab-clolor-primary);
}

.btn-danger {
    color: var(--ab-color-danger);
    border: 1px solid var(--ab-color-danger);
}*/

.ab-form-item {
    width: 80%;
}

    .ab-form-item label {
        text-align: end;
        width: 120px;
        /*        border: 1px solid green;*/
    }


fluent-accordion-item {
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusLarge);
}

    fluent-accordion-item[expanded]::part(heading) {
        border-bottom: 1px solid var(--colorNeutralStroke2);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    fluent-accordion-item::part(content) {
        padding: 10px 0px;
    }