.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);
    --sb-header-background: #1E2E51;
    --sb-header-color: #1E2E51;
    --bb-layout-menu-item-hover-bg: var(--bs-primary-bg);
    /*
    --bb-layout-sidebar-scrollbar-background: #0f0;
    --bb-layout-sidebar-scrollbar-color: #f00;
    scrollbar-color: auto;
    --bb-menu-item-hover-bg: var(--bb-header-bg);
    */
}
::-webkit-scrollbar {
    background-color: var(--bs-primary-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary);
    border: 1px solid var(--bs-primary-bg);
}


small {
    font-size: smaller;
}

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

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

.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-menu .fd-scrollbar {
    background-color: var(--bb-layout-sidebar-backgound);
    background-image: var(--theme-background);
}
*/
.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;
    }

:root .color0 {
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13,110,253;
    --bs-primary-dark: #0a316b;
    --bs-primary-bg: #fff;
    --bs-border: #000;
    --bs-hoover: #fff;
}

.layout.color0 .layout-header {
    background-image: unset;
    background-color: #eeeb;
}

.color0.colx,
.color0 .modal-content,
.layout.color0 {
    background-color: #fff;
    background-image: unset;
}

.layout.color0 .layout-side {
    background-color: #fff;
    background-image: unset;
}

:root .color1 {
    --bs-primary: #002e5f;
    --bs-primary-rgb: 0, 46, 95;
    --bs-primary-dark: #daecff;
    --bs-primary-bg: #1687ffb0;
    --bs-border: #000;
    --bs-hoover: #fff;
}

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

.color1.colx,
.color1 .modal-content,
.layout.color1 {
    background-color: #2b7cd0 !important;
    background-image: unset;
}

.layout.color1 .layout-side {
    background-color: #2b7cd0;
    background-image: unset;
    color: #ebeef5;
}

/*
.layout.color1 .layout-footer {
    background-color: #343a40;
    background-image: unset;
}

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

.layout.color1 .layout-drawer:hover {
    background-color: #3184dc;
    background-image: unset;
}
*/


: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;
}

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

.color2.colx,
.color2 .modal-content,
.layout.color2  {
    background-color: #24903d;
    background-image: unset;
}

.layout.color2 .layout-side {
    background-color: #24903d;
    color: #ebeef5;
    background-image: unset;
}

.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;
}

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

.color3.colx,
.color3 .modal-content,
.layout.color3 {
    background-color: #c5417e;
    background-image: unset;
}

.layout.color3 .layout-side {
    background-color: #d82e7c;
    background-image: unset;
    color: #ebeef5;
}

.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;
}

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

.color4.colx,
.color4 .modal-content,
.layout.color4 {
    background-image: unset;
    background-color: #e4af10
}

.layout.color4 .layout-side {
    background-image: unset;
    background-color: #efb107;
    color: #ebeef5;
}

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



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

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

.color5.colx,
.color5 .modal-content,
.layout.color5 {
    background-image: unset;
    background-color: #17a2b8;
}

.layout.color5 .layout-side {
    background-image: unset;
    background-color: #17a2b8;
    color: #ebeef5;
}



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


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

.color6.colx,
.color6 .modal-content,
.color6 .layout {
    background-image: unset;
    background-color: #4b0cb3;
}

.layout.color6 .layout-side {
    background-image: unset;
    background-color: #5600e2;
    color: #ebeef5;
}

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


: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-header {
    background-image: var(--theme-background);
    background-color: #566a;
    background-blend-mode: darken;
    /*
    text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
    */
}

/*
.colorBa .modal-content,
.layout.colorBa .has-sidebar {
    background-color: #fff5;
    background-blend-mode: lighten;
}
*/

.colorBa.colx,
.colorBa .modal-content,
.layout.colorBa .layout {
    background-image: var(--theme-background);
    background-color: #566;
    background-blend-mode: lighten;
}


: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.colx,
.colorBl .modal-content,
.layout.colorBl .layout {
    background-image: var(--theme-background);
    background-color: #ffffff50;
    background-blend-mode: lighten;
}

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



:root .colorBr1 {
    --bs-primary: #2f120c;
    --bs-primary-rgb: 47,18,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");
    --sb-header-background: var(--bs-primary);
    --sb-header-color: var(--bs-primary-dark);
}

.layout.colorBr1 .layout-header {
    background-image: unset;
    background-color: #42280e40;
    background-blend-mode: darken;
}

.colorBr1.colx,
.colorBr1 .modal-content,
.colorBr1 .layout {
    background-image: var(--theme-background);
    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");
}

.layout.colorBr2 .layout-header {
    background-color: #fff3;
    background-blend-mode: lighten;
}

.colorBr2.colx,
.colorBr2 .modal-content,
.layout.colorBr2 {
    background-image: var(--theme-background);
    background-color: #ffffff50;
    background-blend-mode: lighten;
}

.layout.colorBr2 .layout-side {
    background-color: #fffa;
    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;
}


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

.colorBr3.colx,
.colorBr3 .modal-content,
.layout.colorBr3 {
    background-image: var(--theme-background);
    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");
}

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

.colorBr4.colx,
.colorBr4 .modal-content,
.layout.colorBr4  {
    background-image: var(--theme-background);
    background-color: #ffffff30;
    background-blend-mode: lighten;
}

.layout.colorBr4 .layout-side {
    background-image: var(--theme-background);
    background-color: #fff8;
    background-blend-mode: lighten;
}


: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");
}

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

.colorCr.colx,
.colorCr .modal-content,
.layout.colorCr {
    background-image: var(--theme-background);
    background-color: #ffffff10;
    background-blend-mode: lighten;
}

.layout.colorCr .layout-side {
    background-image: var(--theme-background);
    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");
}

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

.colorGray.colx,
.colorGray .modal-content,
.layout.colorGray {
    background-image: var(--theme-background);
    background-color: #ffffff20;
    background-blend-mode: lighten;
}

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


:root .colorGray2 {
    /*
    --bs-primary: #0860c1;
    --bs-primary-rgb: 08,96,193;
    --bs-primary-dark: #0d1c43;

    --bs-primary: #053973;

    */
    --bs-primary: #1E2E51;
    --bs-primary-rgb: 5, 57, 115;
    --bs-primary-dark: #01152b;
    --bs-primary-bg: #dfdedf;
    --bs-border: #ffF;
    --bs-hoover: #000;
    --theme-background: url("/_content/appologic.Shared/images/Gray-2.jpg");
    /*
    background-color: #dfdedf;
    */
}

.layout.colorGray2 .layout-header {
    background-image: unset;
    background-color: #bfbebf40;
    /*
    background-color: #fff0;
    background-blend-mode: lighten;
    background-blend-mode: difference;
    */
}

.colorGray2.colx,
.colorGray2 .modal-content,
.colorGray2 .layout {
    background-image: var(--theme-background);
    background-color: #dfdedf;
    /*
    background-blend-mode: lighten;
    background-blend-mode: difference;
    */
}

.layout.colorGray2 .layout-side {
    /*
    background-image: unset;
    */
    background-color: #bfbebf40;
}

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

.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-image: var(--theme-background);
    background-color: #1d2c5360;
    background-blend-mode: darken;
}

.colorGr0.colx,
.colorGr0 .modal-content,
.layout.colorGr0 {
    background-image: var(--theme-background);
    background-color: #ffffff10;
    background-blend-mode: lighten;
}

.layout.colorGr0 .layout-side {
    background-image: var(--theme-background);
    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");
}

.layout.colorGr1 .layout-header {
    background-image: unset;
    background-color: #fff0;
    background-blend-mode: lighten;
}

.colorGr1.colx,
.colorGr1 .modal-content,
.layout.colorGr1 {
    background-image: var(--theme-background);
    background-color: #ffffff20;
    background-blend-mode: lighten;
}

.layout.colorGr1 .layout-side {
    background-image: unset;
    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;
}

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

.colorGr2.colx,
.colorGr2 .modal-content,
.layout.colorGr2 {
    background-image: var(--theme-background);
    background-color: #0003;
    background-blend-mode: darken;
}

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


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

.layout.colorIn .layout-header {
    background-image: unset;
    background-color: #0001;
    background-blend-mode: darken;
}

.colorIn.colx,
.colorIn .modal-content,
.layout.colorIn {
    background-image: var(--theme-background);
    background-color: #fff4;
    background-blend-mode: lighten;
}

.layout.colorIn .layout-side {
    background-image: unset;
    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");
}

.colorLi.colx,
.colorLi .modal-content,
.layout.colorLi {
    background-image: var(--theme-background);
    background-color: #ffffff40;
    background-blend-mode: lighten;
}

.layout.colorIn .layout-header,
.layout.colorLi .layout-side {
    background-image: unset;
    background-color: #0007;
    background-blend-mode: darken;
}

.colorMa {
    --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/Magenta-Dark.jpg");
}

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

.layout.colorMa .layout-header {
    background-image: unset;
    /*
    --bs-body-color: magenta;
    */
    color: magenta;
}

.colorMa.colx,
.colorMa .modal-content,
.layout.colorMa {
    background-image: var(--theme-background);
    background-color: #ffffff20;
    background-blend-mode: lighten;
}

    .layout.colorMa .layout-side {
        background-image: unset;
        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");
}

.layout.colorOr .layout-header {
    background-image: unset;
    background-color: #c57d3110;
    background-blend-mode: darken;
}

.colorOr.colx,
.colorOr .modal-content,
.layout.colorOr {
    background-image: var(--theme-background);
    background-color: #ffffff10;
    background-blend-mode: lighten;
}

.colorOr,
.layout.colorOr .layout-side {
    background-image: unset;
    background-color: #c57d3140;
    background-blend-mode: darken;
}

/*
.color0,
.layout.color0 .layout-header {
}
.color0 .modal-content,
.layout.color0 .has-sidebar {
}

.layout.color0 .layout-side {
}

*/

.colorPi {
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13,110,253;
    --bs-primary-dark: #0a316b;
    --bs-primary-bg: #fff;
    --bs-border: #000;
    --bs-hoover: #fff;
    --theme-background: url("/_content/appologic.Shared/images/Pink.jpg");
}

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

.colorPi.colx,
.colorPi .modal-content,
.layout.colorPi {
    background-image: var(--theme-background);
    background-color: #0006;
    background-blend-mode: darken;
}

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


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


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

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

.layout.colorPu .layout-header {
    background-image: var(--theme-background);
    --bs-body-color: ghostwhite;
    color: ghostwhite;
    background-color: #0005;
    background-blend-mode: darken;
}

.colorPu.colx,
.colorPu .modal-content,
.layout.colorPu {
    background-image: var(--theme-background);
    background-image: unset;
    background-color: #0005;
    background-blend-mode: darken;
}

.layout.colorPu .layout-side {
    background-image: var(--theme-background);
    background-image: unset;
    background-color: #0006;
    background-blend-mode: darken;
}


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

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

.colorRed.colx,
.colorRed .modal-content,
.layout.colorRed {
    background-image: var(--theme-background);
    background-color: #ffffff10;
}

.layout.colorRed .layout-side {
    background-image: var(--theme-background);
    background-color: #1d2c5370;
}


.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");
}

.layout.colorYe .layout-header {
    background-image: var(--theme-background);
    background-color: #0006;
    background-blend-mode: darken;
}

.colorYe.colx,
.colorYe .modal-content,
.layout.colorYe {
    background-image: var(--theme-background);
    background-color: #ffffff50;
    background-blend-mode: lighten;
}

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



.drawer .drawer-body .drawer-content {
    background-image: var(--theme-background);
    background-color: var(--bs-primary-bg);
}

.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);
*/

.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);
}

.form-check-input[type=checkbox] {
    border-color: var(--bs-primary);
}

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

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

/*
    --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, .btn.active {
    background-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-primary-bg);
}

.btn-primary, .btn-info, .btn-dark, .btn.active {
    color: var(--bs-primary-bg) !important;
}

/*
.btn-group .btn:not(.active), .btn-outline-primary {
*/
.btn-primary, .btn-group .btn:not(.active), .btn-outline-primary {
    color: var(--bs-primary);
}
/*
.btn {
    --bs-btn-color: var(--bs-primary-bg) !important;
}
*/


.toggle .on {
    padding-right: 12px;
    background-color: var(--bs-primary);
    color: var(--bs-primary-bg) !important;
}

.toggle .off {
    padding-left: 12px;
    background-color: var(--bs-primary-bg);
    color: var(--bs-primary) !important;
}

.toggle .bar {
    background-image: linear-gradient(to left, var(--bs-primary-dark) 0%, var(--bs-primary) 50%);
}

.form-check-input[type=checkbox] {
    --bs-form-check-bg-image: unset;
    color: var(--bs-primary) !important;
    font-size: initial;
    padding: 0.25rem !important;
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: unset;
    background-color: var(--bs-primary);
    color: var(--bs-primary-bg) !important;
    font-size: large;
    padding: 0.175rem;
    font-weight: bold;
}

.form-check-input[type=checkbox]::before {
    content: "\f00c";
}

.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-striped-bg: var(--bs-primary-bg);
    /*
    --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);
    */
    background: #fff0;
}

.table-hover tbody tr:hover {
    /*
    color: var(--bs-primary);
    background-color: var(--bs-primary);
    --bs-table-hover-bg: var(--bs-primary-bg);
    */
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb),.1) !important;
    --bs-table-hover-color: var(--bs-primary) !important;
}

.table-hover tbody tr.active:hover {
    /*
    color: var(--bs-primary);
    background-color: var(--bs-primary);
    --bs-table-hover-bg: var(--bs-primary-bg);
    */
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb),.5) !important;
    --bs-table-hover-color: var(--bs-primary) !important;
}


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

.table-striped > tbody > tr.active:not(.is-edit), .table-row.active {
    /*
    background-color: rgba(var(--bs-primary-rgb),.10) !important;
    */
    --bb-table-row-active-bg: var(--bs-primary);
    --bs-table-color: var(--bs-primary-bg) !important;
    --bs-table-color-type: var(--bs-primary-bg) !important;
}

.table-striped > tbody > tr.active:not(.is-edit):nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-primary-bg) !important;
}

tr.active:not(.is-edit):hover {
    --bs-table-hover-bg: var(--bs-primary);
    --bs-table-hover-color: var(--bs-primary-bg);
}


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

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


.layout, :root, .modal-content {
    --bs-body-color: var(--bs-primary) !important;
    --bs-body-color-rgb: var(--bs-primary-rgb);
    color: var(--bs-primary) !important;
    --bs-body-bg: rgba(var(--bs-primary-rgb),.01);
    --bs-input-bg: rgba(var(--bs-primary-rgb),.05);
    --bs-tooltip-color: var(--bs-primary) !important;
    --bs-modal-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;
    --bb-border-hover-color: var(--bs-primary) !important;
}
.listview {
    --bb-lv-item-border-hover-color: var(--bs-primary) !important;
}
.accordion {
    --bs-accordion-active-color: var(--bs-primary-bg);
    --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), .75);
}

.form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
    border-color: rgba(var(--bs-primary-rgb), .5);
}

.tabs {
    --bb-tabs-item-active-color: var(--bs-primary);
    --bb-tabs-bar-bg: var(--bs-primary);
}

.appo-input .form-control
{
    background-color: var(--bs-input-bg);
}

/*
.border-secondary {
    --bs-border-opacity: 0.8;
}
*/
/*
    --bs-border-color: var(--bs-primary-dark);
    --bs-modal-color: var(--bs-primary);
*/

.modal-open .swal {
    z-index: 1056;
}


.form-control {
    color: var(--bs-primary);
}

    .form-control:focus {
        color: var(--bs-primary);
    }

    .form-control::-webkit-input-placeholder {
        color: var(--bs-primary);
        opacity: 0.6;
    }

    .form-control::-moz-placeholder {
        color: var(--bs-primary);
        opacity: 0.6;
    }

    .form-control:-ms-input-placeholder {
        color: var(--bs-primary);
        opacity: 0.6;
    }

    .form-control::-ms-input-placeholder {
        color: var(--bs-primary);
        opacity: 0.6;
    }

    .form-control::placeholder {
        color: var(--bs-primary);
        opacity: 0.6;
    }

[data-bs-toggle="lgbSelect"] .form-select {
    color: var(--bs-primary) !important;
}

.form-select::placeholder {
    color: var(--bs-primary) !important;
}

.form-select:focus {
    color: var(--bs-primary) !important;
}


/*
<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;
}
*/