/* Syncfusion Ribbon: override e-icons font so Font Awesome glyphs render */
.e-ribbon .e-btn .fa-solid,
.e-ribbon .e-btn .fa-regular,
.e-ribbon .e-btn .fa-light,
.e-ribbon .e-btn .fa-brands,
.e-ribbon .e-btn .e-btn-icon.fa-solid,
.e-ribbon .e-btn .e-btn-icon.fa-regular,
.e-ribbon .e-btn .e-btn-icon.fa-light,
.e-ribbon .e-btn .e-btn-icon.fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    font-style: normal;
}

.e-ribbon .e-btn .fa-solid,
.e-ribbon .e-btn .fa-light,
.e-ribbon .e-btn .e-btn-icon.fa-solid,
.e-ribbon .e-btn .e-btn-icon.fa-light {
    font-weight: 900 !important;
}

.e-ribbon .e-btn .fa-regular,
.e-ribbon .e-btn .e-btn-icon.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.e-ribbon .e-btn .fa-brands,
.e-ribbon .e-btn .e-btn-icon.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Font Awesome icons in module drawer */
.module-drawer-icon.fa-solid,
.module-drawer-icon.fa-regular,
.module-drawer-icon.fa-light,
.module-drawer-icon.fa-brands {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    font-style: normal;
    width: 1.25rem;
    text-align: center;
}

.module-drawer-icon.fa-solid,
.module-drawer-icon.fa-light {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.module-drawer-icon.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.module-drawer-icon.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.e-btn .material-symbols-outlined,
.e-btn .e-btn-icon.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    font-size: 20px;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
}

.module-drawer-icon.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    font-size: 20px;
    line-height: 1;
    width: 1.25rem;
    text-align: center;
}

.color-circle {
    border-radius: 50%;
    border: 2px solid transparent;
}

.color-circle.selected-color {
    border: 2px solid #000;
}

/* Force Excel ribbon panel background on MudBlazor wrappers */
.mud-tabs-panels,
.mud-tab-panel,
.mud-tabs-panels-content {
    background-color: var(--ribbon-panel-bg) !important;
}

/* Force group background to be visible */
.ribbon-group,
.ribbon-group-body {
    background-color: var(--ribbon-group-bg) !important;
}