.layout {
    --bb-layout-header-height: 50px;
    --bb-layout-headerbar-backgound: #1ab394;
    --bb-layout-headerbar-border-color: #1ab394;
    --bb-layout-header-backgound: #1d2c53 !important;
    --bb-layout-footer-backgound: #5b6e84;
    --bb-layout-footer-height: 40px;
    --bb-layout-user-height: 65px;
    --bb-layout-sidebar-width: 250px !important;
    --bb-layout-sidebar-banner-background: #1d2c53;
    --bb-layout-sidebar-scrollbar-background: #c1c1c1;
    --bb-layout-sidebar-backgound: #1d2c53 !important;
    --bb-layout-sidebar-color: #1ab394;
    --bb-layout-title-color1: #e9ecef;
    --bb-layout-title-color: #212529;
    --bs-body-color: #212529;
    --bb-layout-sidebar-collapse-width: 62px;
    --bb-dropdown-max-height: 240px !important;
    --theme-background: url("/_content/appologic.Shared/images/Gray-2.jpg");

    --bb-layout-header-background: var(--bs-body-bg);
    --bb-layout-header-color: var(--bs-body-color);
    --bb-layout-headerbar-color: var(--bb-layout-header-color);
    --bb-layout-headerbar-background: var(--bb-header-bg);
    --bb-layout-footer-background: var(--bs-body-bg);
    --bb-layout-footer-color: var(--bs-body-color);
    --bb-layout-sidebar-background: var(--bs-body-bg);
 }

small {
    font-size: smaller;
}

    .layout > .has-sidebar {
        overflow: auto;
        height: 100%;
    }

    .layout .layout-side {
        background-color: var(--bb-layout-sidebar-backgound);
    }

    .layout .layout-side {
        width: var(--bb-layout-sidebar-width);
    }

    .layout .layout-main {
        min-height: unset;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }


    .layout {
        height: 100vh;
    }

        .layout .layout-side.is-fixed-header {
            height: unset;
            min-height: unset;
            top: unset;
        }

.layout .layout-main.is-collapsed:not(.is-fullside), .layout .layout-footer.is-collapsed:not(.is-fullside) {
    display: flex;
    flex: none;
}

.layout .layout-main.is-collapsed:not(.is-fullside) {
    display: flex;
    flex: 1 1 auto;
}

.layout .layout-side.is-collapsed:not(.is-fullside) {
    transform: translateX(-100%);
}


.layout .layout-side:not(.is-collapsed) {
    transform: translateX(0);
}

.layout .layout-side.is-collapsed {
    transform: translateX(-100%);
}

.layout-sbmain {
    display: flex;
    flex: 1 1 auto;
}

.layout .layout-main {
    padding: 0;
}

.layout .layout-header{
    border: none;
}

@media (min-width: 768px) {
    .layout .layout-main {
        padding: 1rem;
    }

    .layout .is-collapsed:not(.is-fullside) .layout-title {
        opacity: 1;
    }

    .layout .layout-side.is-collapsed:not(.is-fullside) {
        transform: translateX(0%);
    }

    .is-fullside .is-collapsed {
        box-shadow: unset !important;
    }

    .layout .layout-side {
        transform: translateX(-100%);
    }

    .is-fullside .layout-right {
        width: 100% !important;
    }

    .is-fullside .layout-side.is-collapsed {
        position: absolute !important;
    }

    .layout-side.is-collapsed:not(:hover) .submenu .menu-text {
        width: 0
    }
}

.layout .layout-side.is-collapsed:not(:hover), .layout.is-page .layout-side:not(:hover) .menu.is-vertical.is-collapsed {
    width: var(--bb-layout-sidebar-collapse-width)
}

.layout-header-bar .fa-bars {
    transform: rotate(90deg);
}

.layout-header-bar.is-collapsed .fa-bars {
    transform: none;
}



#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.height-100vh {
    height: 100vh;
}

.font-x-small {
    font-size: x-small;
}


.page-layout-demo-footer-link {
    color: #ebeef5;
}
    .page-layout-demo-footer-link:hover {
        color: #fff;
    }

.page-layout-demo-option {
    margin-top: 1.5rem;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 4px;
    padding: 1.5rem 1rem 1rem 1rem;
    position: relative;
}

    .page-layout-demo-option > p {
        position: absolute;
        top: -10px;
        padding: 0 0.5rem;
        background: #fff;
    }

    .page-layout-demo-option .page-layout-demo-option-height {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .page-layout-demo-option .tabs-body-content {
        margin: 0 -1rem -2rem -1rem;
    }

.layout-drawer {
    padding: 13px;
    margin-right: -1rem;
    cursor: pointer;
}

    .layout-drawer:hover {
        background-color: #1893a7;
    }

.layout-drawer-body {
    padding: 1rem;
}

.layout-item {
    cursor: pointer;
    border: 2px solid #e9ecef;
    padding: 4px;
    border-radius: 4px;
    height: 80px;
    width: 120px;
    transition: border .3s linear;
}

    .layout-item:hover,
    .layout-item.active {
        border: 2px solid #28a745;
    }

    .layout-item .layout-left {
        width: 30%;
    }

        .layout-item .layout-left .layout-left-header {
            height: 16px;
            background-color: #367fa9;
        }

        .layout-item .layout-left .layout-left-body,
        .layout-item .layout-body .layout-left {
            background-color: #2f4050;
        }

    .layout-item .layout-right .layout-right-header,
    .layout-item .layout-top {
        background-color: #17a2b8;
        height: 16px;
    }

    .layout-item .layout-right .layout-right-footer,
    .layout-item .layout-footer {
        background-color: #5b6e84;
        height: 12px;
    }

    .layout-item .layout-top,
    .layout-item .layout-body,
    .layout-item .layout-footer {
        width: 100%;
    }

/*
.layout .layout-right {
    background-color: #fff;
}
*/
/*
.modal-content {
    background-color: #0006;
}
*/

/*
.fd-field-properties-panel {
    background-color: #0001;
}
*/
.color {
    width: 3rem;
    height: 3rem;
    display: block;
    cursor: pointer;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    transition: border .3s linear;
}

    .color:hover {
        border: 2px solid #28a745;
    }

.color0,
.layout.color0 .layout-header {
}

.layout.color0 .layout-side .layout-banner {
}

.layout.color0 .layout-side {
}

.layout.color0 .layout-footer {
}

.layout.color0 .layout-header-bar {
}

.layout.color0 .layout-drawer:hover {
}

.color1,
.layout.color1 .layout-header {
    background-color: #409effb0;
}

.layout.color1 .layout-side .layout-banner {
    background-color: #3e84d0
}

.layout.color1 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.color1 .layout-footer {
    background-color: #343a40;
}

.layout.color1 .layout-header-bar {
    background-color: #2b7cd0;
    border-color: #014186;
}

.layout.color1 .layout-drawer:hover {
    background-color: #3184dc;
}



:root .color2 {
    --bs-primary: #001a07;
    --bs-primary-rgb: 0,26,7;
    --bs-primary-dark: #14572a;
    --bs-primary-bg: #27a944;
    --bs-border: #fff;
    --bs-hoover: #000;
}

.color2,
.layout.color2 .layout-header {
    background-color: #28a745b0;
}

.layout.color2 .layout-side .layout-banner {
    background-color: #24903d
}

.layout.color2 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.color2 .layout-footer {
    background-color: #343a40;
}

.layout.color2 .layout-header-bar {
    background-color: #258c3c;
    border-color: #014186;
}

.layout.color2 .layout-drawer:hover {
    background-color: #24903d;
}


:root .color3 {
    --bs-primary: #ffdbf0;
    --bs-primary-rgb: 255,219,240;
    --bs-primary-dark: #69334b;
    --bs-primary-bg: #e565b0;
    --bs-border: #fff;
    --bs-hoover: #000;
}

.color3,
.layout.color3 .layout-header {
    background-color: #e83e8cb0;
}

.layout.color3 .layout-side .layout-banner {
    background-color: #c5417e
}

.layout.color3 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.color3 .layout-footer {
    background-color: #343a40;
}

.layout.color3 .layout-header-bar {
    background-color: #c73477;
    border-color: #014186;
}

.layout.color3 .layout-drawer:hover {
    background-color: #c5417e;
}



.color4 {
    --bs-primary: #440;
    --bs-primary-rgb: 64,64,0;
    --bs-primary-dark: #220;
    --bs-primary-bg: #ffa;
    --bs-border: #fff;
    --bs-hoover: #000;
}

.color4,
.layout.color4 .layout-header {
    background-color: #ffc107b0;
}

.layout.color4 .layout-side .layout-banner {
    background-color: #e4af10
}

.layout.color4 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.color4 .layout-footer {
    background-color: #343a40;
}

.layout.color4 .layout-header-bar {
    background-color: #e2b221;
    border-color: #014186;
}

.layout.color4 .layout-drawer:hover {
    background-color: #e4af10;
}



:root .color5 {
    --bs-primary: #dbf8ff;
    --bs-primary-rgb: 219,248,255;
    --bs-primary-dark: #143f3b;
    --bs-primary-bg: #299ca3;
    --bs-border: #fff;
    --bs-hoover: #000;
}


.color5,
.layout.color5 .layout-header {
    background-color: #17a2b8b0;
}



:root .color6 {
    --bs-primary: #e5d0ff;
    --bs-primary-rgb: 94,208,255;
    --bs-primary-dark: #33174b;
    --bs-primary-bg: #4a326f;
    --bs-border: #fff;
    --bs-hoover: #000;
}

.color6,
.layout.color6 .layout-header {
    background-color: #6610f2b0;
}

.layout.color6 .layout-side .layout-banner {
    background-color: #4b0cb3
}

.layout.color6 .layout-side {
    background-color: #212529;
    color: #ebeef5;
}

.layout.color6 .layout-footer {
    background-color: #343a40;
}

.layout.color6 .layout-header-bar {
    background-color: #4b0ab5;
    border-color: #014186;
}

.layout.color6 .layout-drawer:hover {
    background-color: #4b0cb3;
}

.colorBa,
.layout.colorBa .layout-header {
    background-image: var(--theme-background);
    background-color: #fff1;
    background-blend-mode: darken;
    /*
    text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
    */
}

.layout.colorBa .has-sidebar {
    background-color: #fff5;
    background-blend-mode: darken;
}


:root .colorBa {
    --bs-primary: #26312b;
    --bs-primary-rgb: 38,49,43;
    --bs-primary-dark: #132319;
    --bs-primary-bg: #638f75;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/barber.jpg");
}

.layout.colorBa .layout-side {
    background-color: #1d2c5360;
    background-blend-mode: darken;
}
.layout.colorBa .layout-footer {
}
.layout.colorBa .layout-header-bar {
}
.layout.colorBa .layout-drawer:hover {
}

:root .colorBl {
    --bs-primary: #003e99;
    --bs-primary-rgb: 0,62,153;
    --bs-primary-dark: #354b77;
    --bs-primary-bg: #afd7f3;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Blue.jpg");
}

.colorBl {
    background-image: var(--theme-background);
}
.layout.colorBl .has-sidebar {
    background-color: #ffffff50;
    background-blend-mode: lighten;
}

.layout.colorBl .layout-side {
    background-color: #1d2c5330;
    background-blend-mode: darken;
}



:root .colorBr1 {
    --bs-primary: #3f220c;
    --bs-primary-rgb: 63,34,12;
    --bs-primary-dark: #674003;
    --bs-primary-bg: #ddc596;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Brown-1.jpg");
}

.colorBr1 {
    background-image: var(--theme-background);
}
.layout.colorBr1 .layout-header {
    background-color: #42280e40;
    background-blend-mode: darken;
}

.layout.colorBr1 .layout-side {
    background-color: #42280e80;
    background-blend-mode: darken;
}


:root .colorBr2 {
    --bs-primary: #3f220c;
    --bs-primary-rgb: 63,34,12;
    --bs-primary-dark: #674003;
    --bs-primary-bg: #ddc596;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Brown-2.jpg");
}

.colorBr2,
.layout.colorBr2 .layout-header {
    background-image: var(--theme-background);
    background-color: #fff3;
    background-blend-mode: lighten;
}

.layout.colorBr2 .has-sidebar {
    background-color: #ffffff50;
    background-blend-mode: lighten;
}

.layout.colorBr2 .layout-side {
    background-color: #1d2c53f0;
    background-blend-mode: darken;
}


:root .colorBr3 {
    --bs-primary: #fff4ec;
    --bs-primary-rgb: 255,244,236;
    --bs-primary-dark: #39332b;
    --bs-primary-bg: #434241;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Brown-3.jpg");
}

:where(.colorBr3) .table {
    background-color: bisque;
}
:where(.colorBr3) .form-control,
:where(.colorBr3) .form-select {
    background-color: dimgray !important;
}

.colorBr3 {
    background-image: var(--theme-background);
}

.layout.colorBr3 .layout-header {
    background-color: #0003;
    background-blend-mode: darken;
    --bs-body-color: bisque;
    color: bisque;
}

.layout.colorBr3 .layout-side {
    background-color: #0008;
    background-blend-mode: darken;
}


:root .colorBr4 {
    --bs-primary: #3f220c;
    --bs-primary-rgb: 63,34,12;
    --bs-primary-dark: #814f00;
    --bs-primary-bg: #ab7859;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Brown-4.jpg");
}

.colorBr4,
.layout.colorBr4 .layout-header {
    background-image: var(--theme-background);
    background-color: #fff3;
    background-blend-mode: lighten;
}

.layout.colorBr4 .has-sidebar {
    background-color: #ffffff30;
    background-blend-mode: lighten;
}

.layout.colorBr4 .layout-side {
    background-color: #0009;
    background-blend-mode: darken;
}


:root .colorCr {
    --bs-primary: #ff5e5e;
    --bs-primary-rgb: 255,94,94;
    --bs-primary-dark: #670000;
    --bs-primary-bg: #c75b49;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Crimson.jpg");
}

.colorCr,
.layout.colorCr .layout-header {
    background-image: var(--theme-background);
}

.layout.colorCr .has-sidebar {
    background-color: #ffffff10;
    background-blend-mode: lighten;
}

.layout.colorCr .layout-side {
    background-color: #1d2c5320;
    background-blend-mode: darken;
}

:root .colorGray {
    --bs-primary: #000010;
    --bs-primary-rgb: 0,0,16;
    --bs-primary-dark: #50554e;
    --bs-primary-bg: #939393;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Gray.jpg");
}

.colorGray,
.layout.colorGray .layout-header {
    background-image: var(--theme-background);
    background-color: #fff0;
    background-blend-mode: lighten;
}

.layout.colorGray .has-sidebar {
    background-color: #ffffff20;
    background-blend-mode: lighten;
}

.layout.colorGray .layout-side {
    background-color: #1d2c5310;
    background-blend-mode: darken;
}


:root .colorGray2 {
    --bs-primary: #0860c1;
    --bs-primary-rgb: 08,96,193;
    --bs-primary-dark: #0d1c43;
    --bs-primary-bg: #dfdedf;
    --bs-border: #ffF;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Gray-2.jpg");
}

.colorGray2,
.layout.colorGray2 {
    background-image: var(--theme-background);
    /*
    background-color: #fff0;
    background-blend-mode: lighten;
    --bs-body-color: #1d2c53;
    */
    color: #1d2c53 !important;
}

    /*
.layout.colorGray2 .has-sidebar {
    background-color: #eeeeee20;
    background-blend-mode: lighten;
}

.layout.colorGray2 .layout-side {
    background-color: #eeeeeef0;
    background-blend-mode: darken;
}
*/
    .layout.colorGray2 .layout-side, .tabs-body-content {
        background-image: var(--theme-background);
    }

.layout.colorGray2 .menu .nav-link {
    color: #1d2c53;
}

.layout.colorGray2 .dropdown-logout .logout-text {
    color: #1d2c53;
}

.layout.colorGray2 .dropdown-logout .logout-avatar {
    filter: unset;
}


:root .colorGr0 {
    --bs-primary: #001a07;
    --bs-primary-rgb: 0,26,7;
    --bs-primary-dark: #2d5714;
    --bs-primary-bg: #7c9b54;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Green.jpg");
}

.colorGr0 {
    background-image: var(--theme-background);
}

.layout.colorGr0 .layout-header {
    background-color: #1d2c5360;
    background-blend-mode: darken;
}

.layout.colorGr0 .has-sidebar {
    background-color: #ffffff10;
    background-blend-mode: lighten;
}

.layout.colorGr0 .layout-side {
    background-color: #1d2c5330;
    background-blend-mode: darken;
}

/*
    background-color: #1d2c5330;
    background-blend-mode: darken;
*/

:root .colorGr1 {
    --bs-primary: #001a07;
    --bs-primary-rgb: 0,26,7;
    --bs-primary-dark: #2d5714;
    --bs-primary-bg: #7c9b54;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Green-1.jpg");
}

.colorGr1,
.layout.colorGr1 .layout-header {
    background-image: var(--theme-background);
    background-color: #fff0;
    background-blend-mode: lighten;
}

.layout.colorGr1 .has-sidebar {
    background-color: #ffffff20;
    background-blend-mode: lighten;
}

.layout.colorGr1 .layout-side {
    background-color: #1d2c5310;
    background-blend-mode: darken;
}



:root .colorGr2 {
    --bs-primary: #d1ffe6;
    --bs-primary-rgb: 209,255,230;
    --bs-primary-dark: #132319;
    --bs-primary-bg: #162721;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Green-2.jpg");
}

:where(.colorGr2) .table {
        background-color: bisque;
}
:where(.colorGr2) .form-control, 
:where(.colorGr2) .form-select {
    background-color: dimgray !important;
}

.colorGr2,
.layout.colorGr2 .layout-header {
    background-image: var(--theme-background);
    background-color: #fff1;
    background-blend-mode: lighten;
    --bs-body-color: lightgoldenrodyellow;
    color: lightgoldenrodyellow;
}

.layout.colorGr2 .has-sidebar {
    background-color: #0003;
    background-blend-mode: darken;
}

.layout.colorGr2 .layout-side {
    background-color: #1d2c5330;
    background-blend-mode: darken;
}


:root .colorIn {
    --theme-background: url("/_content/appologic.Shared/images/Indigo.jpg");
}
.colorIn,
.layout.colorIn .layout-header {
    background-image: var(--theme-background);
    background-color: #0001;
    background-blend-mode: darken;
}

.layout.colorIn .has-sidebar {
    background-color: #fff4;
    background-blend-mode: lighten;
}

.layout.colorIn .layout-side {
    background-image: var(--theme-background);
    background-color: #1d2c5330;
    background-blend-mode: darken;
}



.colorLi {
    --bs-primary: #001a07;
    --bs-primary-rgb: 0,26,7;
    --bs-primary-dark: #015520;
    --bs-primary-bg: #5b9b54;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Lime.jpg");
    background-image: var(--theme-background);
}

.layout.colorLi .has-sidebar {
    background-color: #ffffff40;
    background-blend-mode: lighten;
}

.layout.colorLi .layout-side {
    background-color: #0007;
    background-blend-mode: darken;
}


:where(.colorMa) .table {
    background-color: plum;
}
:where(.colorMa) .form-control,
:where(.colorMa) .form-select {
    background-color: lightgray !important;
}

.colorMa,
.layout.colorMa .layout-header {
    background-image: url("/_content/appologic.Shared/images/Magenta-Dark.jpg");
    --bs-body-color: magenta;
    color: magenta;
}

.layout.colorMa .has-sidebar {
    background-color: #ffffff20;
    background-blend-mode: lighten;
}

.layout.colorMa .layout-side {
    background-color: #1d2c5330;
    background-blend-mode: darken;
}


:root .colorOr {
    --bs-primary: #594300;
    --bs-primary-rgb: 89,67,0;
    --bs-primary-dark: #814f00;
    --bs-primary-bg: #c57d31;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Orange.jpg");
    background-image: var(--theme-background);
}

.layout.colorOr .has-sidebar {
    background-color: #ffffff10;
    background-blend-mode: lighten;
}

.layout.colorOr .layout-side {
    background-color: #0004;
    background-blend-mode: darken;
}

:root .colorPi {
    background-image: url("/_content/appologic.Shared/images/Pink.jpg");
    background-image: var(--theme-background);
}

.layout.colorPi .layout-header {
    background-color: #0005;
    background-blend-mode: darken;
}

.layout.colorPi .layout-side {
    background-color: #0006;
    background-blend-mode: darken;
}



:where(.colorPu) .table {
    background-color: mediumpurple;
}

:where(.colorPu) .form-control,
:where(.colorPu) .form-select {
    background-color: mediumpurple !important;
}

:root .colorOr {
    --theme-background: url("/_content/appologic.Shared/images/Purple.jpg");
}

.colorPu,
.layout.colorPu .layout-header {
    background-image: var(--theme-background);
    --bs-body-color: ghostwhite;
    color: ghostwhite;
}

.layout.colorPu .layout-header {
    background-color: #0005;
    background-blend-mode: darken;
}

.layout.colorPu .layout-side {
    background-color: #0006;
    background-blend-mode: darken;
}


.colorRed {
    --bs-primary: #f00;
    --bs-primary-rgb: 255,0,0;
    --bs-primary-dark: #600;
    --bs-primary-bg: #f77;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Red-Dark.jpg");
}

.colorRed,
.layout.colorRed .layout {
    background-image: var(--theme-background);
    --bb-layout-header-backgound: #600 !important;
}

.layout.colorRed .has-sidebar {
    background-color: #ffffff10;
}

.layout.colorRed .layout-side {
    background-color: #1d2c5370;
}

.drawer .drawer-body .drawer-content {
    background-image: var(--theme-background);
}

.drawer {
    background-image: unset !important;
}

.layout .layout-header {
    background-image: var(--theme-background);
}

.layout .layout-side {
    background-image: var(--theme-background);
}

/*
.colorRed .layout-header-bar {
    border-color: #fff;
    background-color: #f00;
}

.colorRed .table {
    background-color: #f77;
}
    --bs-primary-text-emphasis: var(--bs-primary-bg);
*/
.layout, :root {
    --bs-body-color: var(--bs-primary);
    --bs-body-color-rgb: var(--bs-primary-rgb);
    color: var(--bs-primary);
    --bs-body-bg: rgba(var(--bs-primary-rgb),.01);
    --bs-tooltip-color: var(--bs-primary) !important;
    --bb-layout-header-backgound: --bs-primary-dark !important;
    --bb-layout-headerbar-backgound: var(--bs-primary);
    --bb-layout-header-background: #0000000a;
    --bb-layout-footer-background: #0000000a !important;
    --bb-layout-sidebar-backgound: #ffffffe6 !important;
    --bs-accordion-active-color: var(--bs-primary-bg) !important;
}

.tooltip-inner {
    color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg);
}

.popover {
    background-color: var(--bs-primary-bg, #ccc) !important;
}

.form-check-input {
    border-color: var(--bs-primary-bg);
}

.modal-content {
    background-color: var(--bs-primary-bg);
}

.groupbox .legend {
    background-color: var(--bs-primary-bg);
}

.nav-link {
    color: var(--bs-primary);
}

/*
    --bs-border-color: var(--bs-secundary);
    --bb-layout-footer-background: var(--bs-primary);
    --bb-layout-footer-background: #0000;
*/

.page-layout-demo-footer-link {
    color: var(--bs-primary);
}

.card {
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb),.20) !important;
}

.btn-primary {
    background-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-bg);
}

.layout-header-bar {
    border-color: var(--bs-border) !important;
    /*
    background-color: var(--bs-primary);
    //--bb-layout-headerbar-backgound
    */
}

.table {
    --bs-emphasis-color: var(--bs-primary);
    --bs-emphasis-color-rgb: var(--bs-primary-rgb);
    background-color: var(--bs-primary-bg);
    --bb-table-selected-bg: var(--bs-primary-bg) !important;
    /*
    --bs-table-hover-bg: var(--bs-primary-bg);
    --bs-table-striped-color: var(--bs-primary-bg);
    --bs-table-striped-bg: rgba(var(--bs-primary-color-rgb),.05);
    --bs-table-active-color: var(--bs-primary-color);
    --bs-table-active-bg: rgba(var(--bs-primary-color-rgb),.1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb),.075);
    */
    background-image: var(--theme-background);
}

.table-hover tbody tr:hover {
    color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(var(--bs-primary-rgb),.50) !important;
}

.table tbody tr.active:not(.is-edit), .table-row.active {
    background-color: rgba(var(--bs-primary-rgb),.50) !important;
}
/*
tr.active:not(.is-edit):hover {
    --bs-table-hover-bg: #0f0;
}
*/

.colorYe {
    --bs-primary: #440;
    --bs-primary-rgb: 64,64,0;
    --bs-primary-dark: #220;
    --bs-primary-bg: #ffa;
    --bs-border: #fff;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Yellow.jpg");
    background-image: var(--theme-background);
}

.layout.colorYe .layout-header {
    background-color: #0006;
    background-blend-mode: darken;
}

.layout.colorYe .has-sidebar {
    background-color: #ffffff50;
    background-blend-mode: lighten;
}

.layout.colorYe .layout-side {
    background-color: #1d2c5330;
    background-blend-mode: darken;
}

.buttonbar .btn {
    border: none;
    border-radius:0;
}

.buttonbar .dropdown-toggle:hover {
    color: #fff;
    background-color: #009ef7;
}


/*
<span class="color colorBa" @onclick="@(e => Theme = "colorBa")"></span>
<span class="color colorBl" @onclick="@(e => Theme = "colorBl")"></span>
<span class="color colorBr1" @onclick="@(e => Theme = "colorBr1")"></span>
<span class="color colorBr2" @onclick="@(e => Theme = "colorBr2")"></span>
<span class="color colorBr3" @onclick="@(e => Theme = "colorBr3")"></span>
<span class="color colorBr4" @onclick="@(e => Theme = "colorBr4")"></span>
<span class="color colorCr" @onclick="@(e => Theme = "colorCr")"></span>
<span class="color colorGray" @onclick="@(e => Theme = "colorGray")"></span>
<span class="color colorGr1" @onclick="@(e => Theme = "colorGr1")"></span>
<span class="color colorGr2" @onclick="@(e => Theme = "colorGr2")"></span>
<span class="color colorIn" @onclick="@(e => Theme = "colorIn")"></span>
<span class="color colorLi" @onclick="@(e => Theme = "colorLi")"></span>
<span class="color colorMa" @onclick="@(e => Theme = "colorMa")"></span>
<span class="color colorOr" @onclick="@(e => Theme = "colorOr")"></span>
<span class="color colorPi" @onclick="@(e => Theme = "colorPi")"></span>
<span class="color colorPu" @onclick="@(e => Theme = "colorPu")"></span>
<span class="color colorRed" @onclick="@(e => Theme = "colorRed")"></span>
<span class="color colorYe" @onclick="@(e => Theme = "colorYe")"></span>
*/

.widget .dropdown-body h3 {
    color: #666666;
    font-size: 14px;
    margin-bottom: 10px;
}

.widget .dropdown-body h4 {
    color: #444444;
    font-size: 15px;
    margin: 0;
}

.widget .dropdown-body small {
    color: #999999;
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.widget .dropdown-item > div:not(.progress):last-child {
    width: calc(100% - 40px);
}

.widget .dropdown-item {
    padding: 0.5rem 1rem;
}

.widget .progress {
    height: 7px;
}

.widget .dropdown-item.active,
.widget .dropdown-item:active {
    color: inherit;
}

.widget .dropdown-item:not(:nth-of-type(odd)):active {
    background-color: inherit;
}

.dropdown-menu, .dropdown-menu-end, .sub-menu {
    /*
        background-color: #fffffff0 !important;
    */
    background-color: var(--bs-primary-bg) !important;
}

.table-cell img {
    width: 46px;
    border-radius: var(--bs-border-radius);
}

.table-cell .progress {
    height: 6px;
    margin-top: .5rem;
}

.user-demo-address {
    margin-top: .25rem;
    font-size: 86%;
    color: #c0c4cc;
}

.table-users {
    height: auto;
    padding-bottom: .5rem;
    height: calc(100vh - 216px);
}

    .table-users .table-container {
        min-width: 746px;
    }

.tabs-body-content .table-users {
    height: calc(100vh - 250px);
}

.cell-label {
    line-height: 35px;
}

.dropdown-menu-right {
    min-width: 375px;
}
.no-tab-header {
    width: 100%;
    margin: 0 !important;
    overflow: auto;
    min-height: 0 !important;
    background: unset !important;
    box-shadow: unset !important;
    overscroll-behavior: none;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0px;
}

    /*
    .no-tab-header .tabs-header
*/

.no-tab-header .tabs-nav-wrap.extend {
    display: none !important;
    height: 0;
}

.no-tab-header .tabs-body {
    padding: 0;
}

/*
    height: calc(100% - 2 * (var(--bb-tabs-body-padding) + 4px));
*/

.tabpadding-unset .tabs-body {
    padding: var(--bb-tabs-body-padding) !important;
}

.input-small-cascader input[type=text] {
    width: 16px;
    padding: 8px;
    margin-left: -21px;
}

.input-small-cascader span {
    left: -26px;
}

.btn_white button {
    color: #fff;
}

.width0 {
    width: 0;
}

/*
.input-group .form-control {
    height: unset;
}
*/