.xe-user-filter {
    background-color: #fff;
}

.xe-font-base-green-back {
    color: #D8EBD8 !important;
}

.xe-back-base-green-back {
    background-color: #D8EBD8 !important;
}

.xe-stroke-base-green-back {
    stroke: #D8EBD8 !important;
}

.xe-fill-base-green-back {
    fill: #D8EBD8 !important;
}

.xe-portlet-fg-base-green-back {
    --is-portlet-header-fg-color: #D8EBD8;
}

.xe-section-bg-base-green-back {
    --is-section-header-bg-color: #D8EBD8;
}

.xe-section-fg-base-green-back {
    --is-section-header-fg-color: #D8EBD8;
}

.xe-border-base-green-back {
    border-color: #D8EBD8 !important;
}

.xe-user-filter-base-green-back {
    color: #D8EBD8 !important;
    border-color: #D8EBD8 !important;
}

.xe-user-filter-base-green-back.active, .xe-user-filter-base-green-back:hover {
    color: #fff !important;
    background-color: #D8EBD8 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-green-back {
    box-shadow: 0px 4px 4px #D8EBD829;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-green-back > .object-item:hover {
    background: #D8EBD829;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-green-back:hover {
    box-shadow: 0px 8px 8px #D8EBD83D !important;
}

.xe-tile-bg-base-green-back {
    --is-tile-bg-color: #D8EBD8;
}

.xe-tile-fg-base-green-back {
    --is-tile-fg-color: #D8EBD8;
}

.xe-tile-bg-hover-base-green-back {
    --is-tile-bg-hover-color: #D8EBD8;
}

.xe-font-base-green-back-hover {
    color: #A0CFA0 !important;
}

.xe-back-base-green-back-hover {
    background-color: #A0CFA0 !important;
}

.xe-stroke-base-green-back-hover {
    stroke: #A0CFA0 !important;
}

.xe-fill-base-green-back-hover {
    fill: #A0CFA0 !important;
}

.xe-portlet-fg-base-green-back-hover {
    --is-portlet-header-fg-color: #A0CFA0;
}

.xe-section-bg-base-green-back-hover {
    --is-section-header-bg-color: #A0CFA0;
}

.xe-section-fg-base-green-back-hover {
    --is-section-header-fg-color: #A0CFA0;
}

.xe-border-base-green-back-hover {
    border-color: #A0CFA0 !important;
}

.xe-user-filter-base-green-back-hover {
    color: #A0CFA0 !important;
    border-color: #A0CFA0 !important;
}

.xe-user-filter-base-green-back-hover.active, .xe-user-filter-base-green-back-hover:hover {
    color: #fff !important;
    background-color: #A0CFA0 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-green-back-hover {
    box-shadow: 0px 4px 4px #A0CFA029;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-green-back-hover > .object-item:hover {
    background: #A0CFA029;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-green-back-hover:hover {
    box-shadow: 0px 8px 8px #A0CFA03D !important;
}

.xe-tile-bg-base-green-back-hover {
    --is-tile-bg-color: #A0CFA0;
}

.xe-tile-fg-base-green-back-hover {
    --is-tile-fg-color: #A0CFA0;
}

.xe-tile-bg-hover-base-green-back-hover {
    --is-tile-bg-hover-color: #A0CFA0;
}

.xe-font-base-green-font {
    color: #158915 !important;
}

.xe-back-base-green-font {
    background-color: #158915 !important;
}

.xe-stroke-base-green-font {
    stroke: #158915 !important;
}

.xe-fill-base-green-font {
    fill: #158915 !important;
}

.xe-portlet-fg-base-green-font {
    --is-portlet-header-fg-color: #158915;
}

.xe-section-bg-base-green-font {
    --is-section-header-bg-color: #158915;
}

.xe-section-fg-base-green-font {
    --is-section-header-fg-color: #158915;
}

.xe-border-base-green-font {
    border-color: #158915 !important;
}

.xe-user-filter-base-green-font {
    color: #158915 !important;
    border-color: #158915 !important;
}

.xe-user-filter-base-green-font.active, .xe-user-filter-base-green-font:hover {
    color: #fff !important;
    background-color: #158915 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-green-font {
    box-shadow: 0px 4px 4px #15891529;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-green-font > .object-item:hover {
    background: #15891529;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-green-font:hover {
    box-shadow: 0px 8px 8px #1589153D !important;
}

.xe-tile-bg-base-green-font {
    --is-tile-bg-color: #158915;
}

.xe-tile-fg-base-green-font {
    --is-tile-fg-color: #158915;
}

.xe-tile-bg-hover-base-green-font {
    --is-tile-bg-hover-color: #158915;
}

.xe-font-base-orange-back {
    color: #F9DFC2 !important;
}

.xe-back-base-orange-back {
    background-color: #F9DFC2 !important;
}

.xe-stroke-base-orange-back {
    stroke: #F9DFC2 !important;
}

.xe-fill-base-orange-back {
    fill: #F9DFC2 !important;
}

.xe-portlet-fg-base-orange-back {
    --is-portlet-header-fg-color: #F9DFC2;
}

.xe-section-bg-base-orange-back {
    --is-section-header-bg-color: #F9DFC2;
}

.xe-section-fg-base-orange-back {
    --is-section-header-fg-color: #F9DFC2;
}

.xe-border-base-orange-back {
    border-color: #F9DFC2 !important;
}

.xe-user-filter-base-orange-back {
    color: #F9DFC2 !important;
    border-color: #F9DFC2 !important;
}

.xe-user-filter-base-orange-back.active, .xe-user-filter-base-orange-back:hover {
    color: #fff !important;
    background-color: #F9DFC2 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-orange-back {
    box-shadow: 0px 4px 4px #F9DFC229;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-orange-back > .object-item:hover {
    background: #F9DFC229;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-orange-back:hover {
    box-shadow: 0px 8px 8px #F9DFC23D !important;
}

.xe-tile-bg-base-orange-back {
    --is-tile-bg-color: #F9DFC2;
}

.xe-tile-fg-base-orange-back {
    --is-tile-fg-color: #F9DFC2;
}

.xe-tile-bg-hover-base-orange-back {
    --is-tile-bg-hover-color: #F9DFC2;
}

.xe-font-base-orange-back-hover {
    color: #F5CB9A !important;
}

.xe-back-base-orange-back-hover {
    background-color: #F5CB9A !important;
}

.xe-stroke-base-orange-back-hover {
    stroke: #F5CB9A !important;
}

.xe-fill-base-orange-back-hover {
    fill: #F5CB9A !important;
}

.xe-portlet-fg-base-orange-back-hover {
    --is-portlet-header-fg-color: #F5CB9A;
}

.xe-section-bg-base-orange-back-hover {
    --is-section-header-bg-color: #F5CB9A;
}

.xe-section-fg-base-orange-back-hover {
    --is-section-header-fg-color: #F5CB9A;
}

.xe-border-base-orange-back-hover {
    border-color: #F5CB9A !important;
}

.xe-user-filter-base-orange-back-hover {
    color: #F5CB9A !important;
    border-color: #F5CB9A !important;
}

.xe-user-filter-base-orange-back-hover.active, .xe-user-filter-base-orange-back-hover:hover {
    color: #fff !important;
    background-color: #F5CB9A !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-orange-back-hover {
    box-shadow: 0px 4px 4px #F5CB9A29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-orange-back-hover > .object-item:hover {
    background: #F5CB9A29;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-orange-back-hover:hover {
    box-shadow: 0px 8px 8px #F5CB9A3D !important;
}

.xe-tile-bg-base-orange-back-hover {
    --is-tile-bg-color: #F5CB9A;
}

.xe-tile-fg-base-orange-back-hover {
    --is-tile-fg-color: #F5CB9A;
}

.xe-tile-bg-hover-base-orange-back-hover {
    --is-tile-bg-hover-color: #F5CB9A;
}

.xe-font-base-orange-font {
    color: #E87E04 !important;
}

.xe-back-base-orange-font {
    background-color: #E87E04 !important;
}

.xe-stroke-base-orange-font {
    stroke: #E87E04 !important;
}

.xe-fill-base-orange-font {
    fill: #E87E04 !important;
}

.xe-portlet-fg-base-orange-font {
    --is-portlet-header-fg-color: #E87E04;
}

.xe-section-bg-base-orange-font {
    --is-section-header-bg-color: #E87E04;
}

.xe-section-fg-base-orange-font {
    --is-section-header-fg-color: #E87E04;
}

.xe-border-base-orange-font {
    border-color: #E87E04 !important;
}

.xe-user-filter-base-orange-font {
    color: #E87E04 !important;
    border-color: #E87E04 !important;
}

.xe-user-filter-base-orange-font.active, .xe-user-filter-base-orange-font:hover {
    color: #fff !important;
    background-color: #E87E04 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-orange-font {
    box-shadow: 0px 4px 4px #E87E0429;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-orange-font > .object-item:hover {
    background: #E87E0429;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-orange-font:hover {
    box-shadow: 0px 8px 8px #E87E043D !important;
}

.xe-tile-bg-base-orange-font {
    --is-tile-bg-color: #E87E04;
}

.xe-tile-fg-base-orange-font {
    --is-tile-fg-color: #E87E04;
}

.xe-tile-bg-hover-base-orange-font {
    --is-tile-bg-hover-color: #E87E04;
}

.xe-font-base-red-back {
    color: #F7CCD0 !important;
}

.xe-back-base-red-back {
    background-color: #F7CCD0 !important;
}

.xe-stroke-base-red-back {
    stroke: #F7CCD0 !important;
}

.xe-fill-base-red-back {
    fill: #F7CCD0 !important;
}

.xe-portlet-fg-base-red-back {
    --is-portlet-header-fg-color: #F7CCD0;
}

.xe-section-bg-base-red-back {
    --is-section-header-bg-color: #F7CCD0;
}

.xe-section-fg-base-red-back {
    --is-section-header-fg-color: #F7CCD0;
}

.xe-border-base-red-back {
    border-color: #F7CCD0 !important;
}

.xe-user-filter-base-red-back {
    color: #F7CCD0 !important;
    border-color: #F7CCD0 !important;
}

.xe-user-filter-base-red-back.active, .xe-user-filter-base-red-back:hover {
    color: #fff !important;
    background-color: #F7CCD0 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-red-back {
    box-shadow: 0px 4px 4px #F7CCD029;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-red-back > .object-item:hover {
    background: #F7CCD029;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-red-back:hover {
    box-shadow: 0px 8px 8px #F7CCD03D !important;
}

.xe-tile-bg-base-red-back {
    --is-tile-bg-color: #F7CCD0;
}

.xe-tile-fg-base-red-back {
    --is-tile-fg-color: #F7CCD0;
}

.xe-tile-bg-hover-base-red-back {
    --is-tile-bg-hover-color: #F7CCD0;
}

.xe-font-base-red-back-hover {
    color: #F2ABB1 !important;
}

.xe-back-base-red-back-hover {
    background-color: #F2ABB1 !important;
}

.xe-stroke-base-red-back-hover {
    stroke: #F2ABB1 !important;
}

.xe-fill-base-red-back-hover {
    fill: #F2ABB1 !important;
}

.xe-portlet-fg-base-red-back-hover {
    --is-portlet-header-fg-color: #F2ABB1;
}

.xe-section-bg-base-red-back-hover {
    --is-section-header-bg-color: #F2ABB1;
}

.xe-section-fg-base-red-back-hover {
    --is-section-header-fg-color: #F2ABB1;
}

.xe-border-base-red-back-hover {
    border-color: #F2ABB1 !important;
}

.xe-user-filter-base-red-back-hover {
    color: #F2ABB1 !important;
    border-color: #F2ABB1 !important;
}

.xe-user-filter-base-red-back-hover.active, .xe-user-filter-base-red-back-hover:hover {
    color: #fff !important;
    background-color: #F2ABB1 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-red-back-hover {
    box-shadow: 0px 4px 4px #F2ABB129;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-red-back-hover > .object-item:hover {
    background: #F2ABB129;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-red-back-hover:hover {
    box-shadow: 0px 8px 8px #F2ABB13D !important;
}

.xe-tile-bg-base-red-back-hover {
    --is-tile-bg-color: #F2ABB1;
}

.xe-tile-fg-base-red-back-hover {
    --is-tile-fg-color: #F2ABB1;
}

.xe-tile-bg-hover-base-red-back-hover {
    --is-tile-bg-hover-color: #F2ABB1;
}

.xe-font-base-red-font {
    color: #DF303E !important;
}

.xe-back-base-red-font {
    background-color: #DF303E !important;
}

.xe-stroke-base-red-font {
    stroke: #DF303E !important;
}

.xe-fill-base-red-font {
    fill: #DF303E !important;
}

.xe-portlet-fg-base-red-font {
    --is-portlet-header-fg-color: #DF303E;
}

.xe-section-bg-base-red-font {
    --is-section-header-bg-color: #DF303E;
}

.xe-section-fg-base-red-font {
    --is-section-header-fg-color: #DF303E;
}

.xe-border-base-red-font {
    border-color: #DF303E !important;
}

.xe-user-filter-base-red-font {
    color: #DF303E !important;
    border-color: #DF303E !important;
}

.xe-user-filter-base-red-font.active, .xe-user-filter-base-red-font:hover {
    color: #fff !important;
    background-color: #DF303E !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-red-font {
    box-shadow: 0px 4px 4px #DF303E29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-red-font > .object-item:hover {
    background: #DF303E29;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-red-font:hover {
    box-shadow: 0px 8px 8px #DF303E3D !important;
}

.xe-tile-bg-base-red-font {
    --is-tile-bg-color: #DF303E;
}

.xe-tile-fg-base-red-font {
    --is-tile-fg-color: #DF303E;
}

.xe-tile-bg-hover-base-red-font {
    --is-tile-bg-hover-color: #DF303E;
}

.xe-font-base-blue-back {
    color: #D2DDEF !important;
}

.xe-back-base-blue-back {
    background-color: #D2DDEF !important;
}

.xe-stroke-base-blue-back {
    stroke: #D2DDEF !important;
}

.xe-fill-base-blue-back {
    fill: #D2DDEF !important;
}

.xe-portlet-fg-base-blue-back {
    --is-portlet-header-fg-color: #D2DDEF;
}

.xe-section-bg-base-blue-back {
    --is-section-header-bg-color: #D2DDEF;
}

.xe-section-fg-base-blue-back {
    --is-section-header-fg-color: #D2DDEF;
}

.xe-border-base-blue-back {
    border-color: #D2DDEF !important;
}

.xe-user-filter-base-blue-back {
    color: #D2DDEF !important;
    border-color: #D2DDEF !important;
}

.xe-user-filter-base-blue-back.active, .xe-user-filter-base-blue-back:hover {
    color: #fff !important;
    background-color: #D2DDEF !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-blue-back {
    box-shadow: 0px 4px 4px #D2DDEF29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-blue-back > .object-item:hover {
    background: #D2DDEF29;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-blue-back:hover {
    box-shadow: 0px 8px 8px #D2DDEF3D !important;
}

.xe-tile-bg-base-blue-back {
    --is-tile-bg-color: #D2DDEF;
}

.xe-tile-fg-base-blue-back {
    --is-tile-fg-color: #D2DDEF;
}

.xe-tile-bg-hover-base-blue-back {
    --is-tile-bg-hover-color: #D2DDEF;
}

.xe-font-base-blue-back-hover {
    color: #B4C7E4 !important;
}

.xe-back-base-blue-back-hover {
    background-color: #B4C7E4 !important;
}

.xe-stroke-base-blue-back-hover {
    stroke: #B4C7E4 !important;
}

.xe-fill-base-blue-back-hover {
    fill: #B4C7E4 !important;
}

.xe-portlet-fg-base-blue-back-hover {
    --is-portlet-header-fg-color: #B4C7E4;
}

.xe-section-bg-base-blue-back-hover {
    --is-section-header-bg-color: #B4C7E4;
}

.xe-section-fg-base-blue-back-hover {
    --is-section-header-fg-color: #B4C7E4;
}

.xe-border-base-blue-back-hover {
    border-color: #B4C7E4 !important;
}

.xe-user-filter-base-blue-back-hover {
    color: #B4C7E4 !important;
    border-color: #B4C7E4 !important;
}

.xe-user-filter-base-blue-back-hover.active, .xe-user-filter-base-blue-back-hover:hover {
    color: #fff !important;
    background-color: #B4C7E4 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-blue-back-hover {
    box-shadow: 0px 4px 4px #B4C7E429;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-blue-back-hover > .object-item:hover {
    background: #B4C7E429;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-blue-back-hover:hover {
    box-shadow: 0px 8px 8px #B4C7E43D !important;
}

.xe-tile-bg-base-blue-back-hover {
    --is-tile-bg-color: #B4C7E4;
}

.xe-tile-fg-base-blue-back-hover {
    --is-tile-fg-color: #B4C7E4;
}

.xe-tile-bg-hover-base-blue-back-hover {
    --is-tile-bg-hover-color: #B4C7E4;
}

.xe-font-base-blue-font {
    color: #4674BE !important;
}

.xe-back-base-blue-font {
    background-color: #4674BE !important;
}

.xe-stroke-base-blue-font {
    stroke: #4674BE !important;
}

.xe-fill-base-blue-font {
    fill: #4674BE !important;
}

.xe-portlet-fg-base-blue-font {
    --is-portlet-header-fg-color: #4674BE;
}

.xe-section-bg-base-blue-font {
    --is-section-header-bg-color: #4674BE;
}

.xe-section-fg-base-blue-font {
    --is-section-header-fg-color: #4674BE;
}

.xe-border-base-blue-font {
    border-color: #4674BE !important;
}

.xe-user-filter-base-blue-font {
    color: #4674BE !important;
    border-color: #4674BE !important;
}

.xe-user-filter-base-blue-font.active, .xe-user-filter-base-blue-font:hover {
    color: #fff !important;
    background-color: #4674BE !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-blue-font {
    box-shadow: 0px 4px 4px #4674BE29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-blue-font > .object-item:hover {
    background: #4674BE29;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-blue-font:hover {
    box-shadow: 0px 8px 8px #4674BE3D !important;
}

.xe-tile-bg-base-blue-font {
    --is-tile-bg-color: #4674BE;
}

.xe-tile-fg-base-blue-font {
    --is-tile-fg-color: #4674BE;
}

.xe-tile-bg-hover-base-blue-font {
    --is-tile-bg-hover-color: #4674BE;
}

.xe-font-base-dark {
    color: #2B3642 !important;
}

.xe-back-base-dark {
    background-color: #2B3642 !important;
}

.xe-stroke-base-dark {
    stroke: #2B3642 !important;
}

.xe-fill-base-dark {
    fill: #2B3642 !important;
}

.xe-portlet-fg-base-dark {
    --is-portlet-header-fg-color: #2B3642;
}

.xe-section-bg-base-dark {
    --is-section-header-bg-color: #2B3642;
}

.xe-section-fg-base-dark {
    --is-section-header-fg-color: #2B3642;
}

.xe-border-base-dark {
    border-color: #2B3642 !important;
}

.xe-user-filter-base-dark {
    color: #2B3642 !important;
    border-color: #2B3642 !important;
}

.xe-user-filter-base-dark.active, .xe-user-filter-base-dark:hover {
    color: #fff !important;
    background-color: #2B3642 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-dark {
    box-shadow: 0px 4px 4px #2B364229;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-dark > .object-item:hover {
    background: #2B364229;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-dark:hover {
    box-shadow: 0px 8px 8px #2B36423D !important;
}

.xe-tile-bg-base-dark {
    --is-tile-bg-color: #2B3642;
}

.xe-tile-fg-base-dark {
    --is-tile-fg-color: #2B3642;
}

.xe-tile-bg-hover-base-dark {
    --is-tile-bg-hover-color: #2B3642;
}

.xe-font-base-white {
    color: #FFFFFF !important;
}

.xe-back-base-white {
    background-color: #FFFFFF !important;
}

.xe-stroke-base-white {
    stroke: #FFFFFF !important;
}

.xe-fill-base-white {
    fill: #FFFFFF !important;
}

.xe-portlet-fg-base-white {
    --is-portlet-header-fg-color: #FFFFFF;
}

.xe-section-bg-base-white {
    --is-section-header-bg-color: #FFFFFF;
}

.xe-section-fg-base-white {
    --is-section-header-fg-color: #FFFFFF;
}

.xe-border-base-white {
    border-color: #FFFFFF !important;
}

.xe-user-filter-base-white {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.xe-user-filter-base-white.active, .xe-user-filter-base-white:hover {
    color: #fff !important;
    background-color: #FFFFFF !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-base-white {
    box-shadow: 0px 4px 4px #FFFFFF29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-base-white > .object-item:hover {
    background: #FFFFFF29;
}

.widgets > .widget-item > .widget-item-content.xe-back-base-white:hover {
    box-shadow: 0px 8px 8px #FFFFFF3D !important;
}

.xe-tile-bg-base-white {
    --is-tile-bg-color: #FFFFFF;
}

.xe-tile-fg-base-white {
    --is-tile-fg-color: #FFFFFF;
}

.xe-tile-bg-hover-base-white {
    --is-tile-bg-hover-color: #FFFFFF;
}

.xe-font-blue {
    color: #3598dc !important;
}

.xe-back-blue {
    background-color: #3598dc !important;
}

.xe-stroke-blue {
    stroke: #3598dc !important;
}

.xe-fill-blue {
    fill: #3598dc !important;
}

.xe-portlet-fg-blue {
    --is-portlet-header-fg-color: #3598dc;
}

.xe-section-bg-blue {
    --is-section-header-bg-color: #3598dc;
}

.xe-section-fg-blue {
    --is-section-header-fg-color: #3598dc;
}

.xe-border-blue {
    border-color: #3598dc !important;
}

.xe-user-filter-blue {
    color: #3598dc !important;
    border-color: #3598dc !important;
}

.xe-user-filter-blue.active, .xe-user-filter-blue:hover {
    color: #fff !important;
    background-color: #3598dc !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-blue {
    box-shadow: 0px 4px 4px #3598dc29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-blue > .object-item:hover {
    background: #3598dc29;
}

.widgets > .widget-item > .widget-item-content.xe-back-blue:hover {
    box-shadow: 0px 8px 8px #3598dc3D !important;
}

.xe-tile-bg-blue {
    --is-tile-bg-color: #3598dc;
}

.xe-tile-fg-blue {
    --is-tile-fg-color: #3598dc;
}

.xe-tile-bg-hover-blue {
    --is-tile-bg-hover-color: #3598dc;
}

.xe-font-blue-hoki {
    color: #67809f !important;
}

.xe-back-blue-hoki {
    background-color: #67809f !important;
}

.xe-stroke-blue-hoki {
    stroke: #67809f !important;
}

.xe-fill-blue-hoki {
    fill: #67809f !important;
}

.xe-portlet-fg-blue-hoki {
    --is-portlet-header-fg-color: #67809f;
}

.xe-section-bg-blue-hoki {
    --is-section-header-bg-color: #67809f;
}

.xe-section-fg-blue-hoki {
    --is-section-header-fg-color: #67809f;
}

.xe-border-blue-hoki {
    border-color: #67809f !important;
}

.xe-user-filter-blue-hoki {
    color: #67809f !important;
    border-color: #67809f !important;
}

.xe-user-filter-blue-hoki.active, .xe-user-filter-blue-hoki:hover {
    color: #fff !important;
    background-color: #67809f !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-blue-hoki {
    box-shadow: 0px 4px 4px #67809f29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-blue-hoki > .object-item:hover {
    background: #67809f29;
}

.widgets > .widget-item > .widget-item-content.xe-back-blue-hoki:hover {
    box-shadow: 0px 8px 8px #67809f3D !important;
}

.xe-tile-bg-blue-hoki {
    --is-tile-bg-color: #67809f;
}

.xe-tile-fg-blue-hoki {
    --is-tile-fg-color: #67809f;
}

.xe-tile-bg-hover-blue-hoki {
    --is-tile-bg-hover-color: #67809f;
}

.xe-font-blue-steel {
    color: #4b77be !important;
}

.xe-back-blue-steel {
    background-color: #4b77be !important;
}

.xe-stroke-blue-steel {
    stroke: #4b77be !important;
}

.xe-fill-blue-steel {
    fill: #4b77be !important;
}

.xe-portlet-fg-blue-steel {
    --is-portlet-header-fg-color: #4b77be;
}

.xe-section-bg-blue-steel {
    --is-section-header-bg-color: #4b77be;
}

.xe-section-fg-blue-steel {
    --is-section-header-fg-color: #4b77be;
}

.xe-border-blue-steel {
    border-color: #4b77be !important;
}

.xe-user-filter-blue-steel {
    color: #4b77be !important;
    border-color: #4b77be !important;
}

.xe-user-filter-blue-steel.active, .xe-user-filter-blue-steel:hover {
    color: #fff !important;
    background-color: #4b77be !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-blue-steel {
    box-shadow: 0px 4px 4px #4b77be29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-blue-steel > .object-item:hover {
    background: #4b77be29;
}

.widgets > .widget-item > .widget-item-content.xe-back-blue-steel:hover {
    box-shadow: 0px 8px 8px #4b77be3D !important;
}

.xe-tile-bg-blue-steel {
    --is-tile-bg-color: #4b77be;
}

.xe-tile-fg-blue-steel {
    --is-tile-fg-color: #4b77be;
}

.xe-tile-bg-hover-blue-steel {
    --is-tile-bg-hover-color: #4b77be;
}

.xe-font-blue-madison {
    color: #578ebe !important;
}

.xe-back-blue-madison {
    background-color: #578ebe !important;
}

.xe-stroke-blue-madison {
    stroke: #578ebe !important;
}

.xe-fill-blue-madison {
    fill: #578ebe !important;
}

.xe-portlet-fg-blue-madison {
    --is-portlet-header-fg-color: #578ebe;
}

.xe-section-bg-blue-madison {
    --is-section-header-bg-color: #578ebe;
}

.xe-section-fg-blue-madison {
    --is-section-header-fg-color: #578ebe;
}

.xe-border-blue-madison {
    border-color: #578ebe !important;
}

.xe-user-filter-blue-madison {
    color: #578ebe !important;
    border-color: #578ebe !important;
}

.xe-user-filter-blue-madison.active, .xe-user-filter-blue-madison:hover {
    color: #fff !important;
    background-color: #578ebe !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-blue-madison {
    box-shadow: 0px 4px 4px #578ebe29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-blue-madison > .object-item:hover {
    background: #578ebe29;
}

.widgets > .widget-item > .widget-item-content.xe-back-blue-madison:hover {
    box-shadow: 0px 8px 8px #578ebe3D !important;
}

.xe-tile-bg-blue-madison {
    --is-tile-bg-color: #578ebe;
}

.xe-tile-fg-blue-madison {
    --is-tile-fg-color: #578ebe;
}

.xe-tile-bg-hover-blue-madison {
    --is-tile-bg-hover-color: #578ebe;
}

.xe-font-blue-chamray {
    color: #2c3e50 !important;
}

.xe-back-blue-chamray {
    background-color: #2c3e50 !important;
}

.xe-stroke-blue-chamray {
    stroke: #2c3e50 !important;
}

.xe-fill-blue-chamray {
    fill: #2c3e50 !important;
}

.xe-portlet-fg-blue-chamray {
    --is-portlet-header-fg-color: #2c3e50;
}

.xe-section-bg-blue-chamray {
    --is-section-header-bg-color: #2c3e50;
}

.xe-section-fg-blue-chamray {
    --is-section-header-fg-color: #2c3e50;
}

.xe-border-blue-chamray {
    border-color: #2c3e50 !important;
}

.xe-user-filter-blue-chamray {
    color: #2c3e50 !important;
    border-color: #2c3e50 !important;
}

.xe-user-filter-blue-chamray.active, .xe-user-filter-blue-chamray:hover {
    color: #fff !important;
    background-color: #2c3e50 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-blue-chamray {
    box-shadow: 0px 4px 4px #2c3e5029;
}

xe-treeview .portlet-body > .object-list.xe-object-list-blue-chamray > .object-item:hover {
    background: #2c3e5029;
}

.widgets > .widget-item > .widget-item-content.xe-back-blue-chamray:hover {
    box-shadow: 0px 8px 8px #2c3e503D !important;
}

.xe-tile-bg-blue-chamray {
    --is-tile-bg-color: #2c3e50;
}

.xe-tile-fg-blue-chamray {
    --is-tile-fg-color: #2c3e50;
}

.xe-tile-bg-hover-blue-chamray {
    --is-tile-bg-hover-color: #2c3e50;
}

.xe-font-blue-ebonyclay {
    color: #22313f !important;
}

.xe-back-blue-ebonyclay {
    background-color: #22313f !important;
}

.xe-stroke-blue-ebonyclay {
    stroke: #22313f !important;
}

.xe-fill-blue-ebonyclay {
    fill: #22313f !important;
}

.xe-portlet-fg-blue-ebonyclay {
    --is-portlet-header-fg-color: #22313f;
}

.xe-section-bg-blue-ebonyclay {
    --is-section-header-bg-color: #22313f;
}

.xe-section-fg-blue-ebonyclay {
    --is-section-header-fg-color: #22313f;
}

.xe-border-blue-ebonyclay {
    border-color: #22313f !important;
}

.xe-user-filter-blue-ebonyclay {
    color: #22313f !important;
    border-color: #22313f !important;
}

.xe-user-filter-blue-ebonyclay.active, .xe-user-filter-blue-ebonyclay:hover {
    color: #fff !important;
    background-color: #22313f !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-blue-ebonyclay {
    box-shadow: 0px 4px 4px #22313f29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-blue-ebonyclay > .object-item:hover {
    background: #22313f29;
}

.widgets > .widget-item > .widget-item-content.xe-back-blue-ebonyclay:hover {
    box-shadow: 0px 8px 8px #22313f3D !important;
}

.xe-tile-bg-blue-ebonyclay {
    --is-tile-bg-color: #22313f;
}

.xe-tile-fg-blue-ebonyclay {
    --is-tile-fg-color: #22313f;
}

.xe-tile-bg-hover-blue-ebonyclay {
    --is-tile-bg-hover-color: #22313f;
}

.xe-font-green {
    color: #32c5d2 !important;
}

.xe-back-green {
    background-color: #32c5d2 !important;
}

.xe-stroke-green {
    stroke: #32c5d2 !important;
}

.xe-fill-green {
    fill: #32c5d2 !important;
}

.xe-portlet-fg-green {
    --is-portlet-header-fg-color: #32c5d2;
}

.xe-section-bg-green {
    --is-section-header-bg-color: #32c5d2;
}

.xe-section-fg-green {
    --is-section-header-fg-color: #32c5d2;
}

.xe-border-green {
    border-color: #32c5d2 !important;
}

.xe-user-filter-green {
    color: #32c5d2 !important;
    border-color: #32c5d2 !important;
}

.xe-user-filter-green.active, .xe-user-filter-green:hover {
    color: #fff !important;
    background-color: #32c5d2 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-green {
    box-shadow: 0px 4px 4px #32c5d229;
}

xe-treeview .portlet-body > .object-list.xe-object-list-green > .object-item:hover {
    background: #32c5d229;
}

.widgets > .widget-item > .widget-item-content.xe-back-green:hover {
    box-shadow: 0px 8px 8px #32c5d23D !important;
}

.xe-tile-bg-green {
    --is-tile-bg-color: #32c5d2;
}

.xe-tile-fg-green {
    --is-tile-fg-color: #32c5d2;
}

.xe-tile-bg-hover-green {
    --is-tile-bg-hover-color: #32c5d2;
}

.xe-font-green-meadow {
    color: #1bbc9b !important;
}

.xe-back-green-meadow {
    background-color: #1bbc9b !important;
}

.xe-stroke-green-meadow {
    stroke: #1bbc9b !important;
}

.xe-fill-green-meadow {
    fill: #1bbc9b !important;
}

.xe-portlet-fg-green-meadow {
    --is-portlet-header-fg-color: #1bbc9b;
}

.xe-section-bg-green-meadow {
    --is-section-header-bg-color: #1bbc9b;
}

.xe-section-fg-green-meadow {
    --is-section-header-fg-color: #1bbc9b;
}

.xe-border-green-meadow {
    border-color: #1bbc9b !important;
}

.xe-user-filter-green-meadow {
    color: #1bbc9b !important;
    border-color: #1bbc9b !important;
}

.xe-user-filter-green-meadow.active, .xe-user-filter-green-meadow:hover {
    color: #fff !important;
    background-color: #1bbc9b !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-green-meadow {
    box-shadow: 0px 4px 4px #1bbc9b29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-green-meadow > .object-item:hover {
    background: #1bbc9b29;
}

.widgets > .widget-item > .widget-item-content.xe-back-green-meadow:hover {
    box-shadow: 0px 8px 8px #1bbc9b3D !important;
}

.xe-tile-bg-green-meadow {
    --is-tile-bg-color: #1bbc9b;
}

.xe-tile-fg-green-meadow {
    --is-tile-fg-color: #1bbc9b;
}

.xe-tile-bg-hover-green-meadow {
    --is-tile-bg-hover-color: #1bbc9b;
}

.xe-font-green-seagreen {
    color: #1ba39c !important;
}

.xe-back-green-seagreen {
    background-color: #1ba39c !important;
}

.xe-stroke-green-seagreen {
    stroke: #1ba39c !important;
}

.xe-fill-green-seagreen {
    fill: #1ba39c !important;
}

.xe-portlet-fg-green-seagreen {
    --is-portlet-header-fg-color: #1ba39c;
}

.xe-section-bg-green-seagreen {
    --is-section-header-bg-color: #1ba39c;
}

.xe-section-fg-green-seagreen {
    --is-section-header-fg-color: #1ba39c;
}

.xe-border-green-seagreen {
    border-color: #1ba39c !important;
}

.xe-user-filter-green-seagreen {
    color: #1ba39c !important;
    border-color: #1ba39c !important;
}

.xe-user-filter-green-seagreen.active, .xe-user-filter-green-seagreen:hover {
    color: #fff !important;
    background-color: #1ba39c !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-green-seagreen {
    box-shadow: 0px 4px 4px #1ba39c29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-green-seagreen > .object-item:hover {
    background: #1ba39c29;
}

.widgets > .widget-item > .widget-item-content.xe-back-green-seagreen:hover {
    box-shadow: 0px 8px 8px #1ba39c3D !important;
}

.xe-tile-bg-green-seagreen {
    --is-tile-bg-color: #1ba39c;
}

.xe-tile-fg-green-seagreen {
    --is-tile-fg-color: #1ba39c;
}

.xe-tile-bg-hover-green-seagreen {
    --is-tile-bg-hover-color: #1ba39c;
}

.xe-font-green-turquoise {
    color: #36d7b7 !important;
}

.xe-back-green-turquoise {
    background-color: #36d7b7 !important;
}

.xe-stroke-green-turquoise {
    stroke: #36d7b7 !important;
}

.xe-fill-green-turquoise {
    fill: #36d7b7 !important;
}

.xe-portlet-fg-green-turquoise {
    --is-portlet-header-fg-color: #36d7b7;
}

.xe-section-bg-green-turquoise {
    --is-section-header-bg-color: #36d7b7;
}

.xe-section-fg-green-turquoise {
    --is-section-header-fg-color: #36d7b7;
}

.xe-border-green-turquoise {
    border-color: #36d7b7 !important;
}

.xe-user-filter-green-turquoise {
    color: #36d7b7 !important;
    border-color: #36d7b7 !important;
}

.xe-user-filter-green-turquoise.active, .xe-user-filter-green-turquoise:hover {
    color: #fff !important;
    background-color: #36d7b7 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-green-turquoise {
    box-shadow: 0px 4px 4px #36d7b729;
}

xe-treeview .portlet-body > .object-list.xe-object-list-green-turquoise > .object-item:hover {
    background: #36d7b729;
}

.widgets > .widget-item > .widget-item-content.xe-back-green-turquoise:hover {
    box-shadow: 0px 8px 8px #36d7b73D !important;
}

.xe-tile-bg-green-turquoise {
    --is-tile-bg-color: #36d7b7;
}

.xe-tile-fg-green-turquoise {
    --is-tile-fg-color: #36d7b7;
}

.xe-tile-bg-hover-green-turquoise {
    --is-tile-bg-hover-color: #36d7b7;
}

.xe-font-green-haze {
    color: #44b6ae !important;
}

.xe-back-green-haze {
    background-color: #44b6ae !important;
}

.xe-stroke-green-haze {
    stroke: #44b6ae !important;
}

.xe-fill-green-haze {
    fill: #44b6ae !important;
}

.xe-portlet-fg-green-haze {
    --is-portlet-header-fg-color: #44b6ae;
}

.xe-section-bg-green-haze {
    --is-section-header-bg-color: #44b6ae;
}

.xe-section-fg-green-haze {
    --is-section-header-fg-color: #44b6ae;
}

.xe-border-green-haze {
    border-color: #44b6ae !important;
}

.xe-user-filter-green-haze {
    color: #44b6ae !important;
    border-color: #44b6ae !important;
}

.xe-user-filter-green-haze.active, .xe-user-filter-green-haze:hover {
    color: #fff !important;
    background-color: #44b6ae !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-green-haze {
    box-shadow: 0px 4px 4px #44b6ae29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-green-haze > .object-item:hover {
    background: #44b6ae29;
}

.widgets > .widget-item > .widget-item-content.xe-back-green-haze:hover {
    box-shadow: 0px 8px 8px #44b6ae3D !important;
}

.xe-tile-bg-green-haze {
    --is-tile-bg-color: #44b6ae;
}

.xe-tile-fg-green-haze {
    --is-tile-fg-color: #44b6ae;
}

.xe-tile-bg-hover-green-haze {
    --is-tile-bg-hover-color: #44b6ae;
}

.xe-font-green-jungle {
    color: #26c281 !important;
}

.xe-back-green-jungle {
    background-color: #26c281 !important;
}

.xe-stroke-green-jungle {
    stroke: #26c281 !important;
}

.xe-fill-green-jungle {
    fill: #26c281 !important;
}

.xe-portlet-fg-green-jungle {
    --is-portlet-header-fg-color: #26c281;
}

.xe-section-bg-green-jungle {
    --is-section-header-bg-color: #26c281;
}

.xe-section-fg-green-jungle {
    --is-section-header-fg-color: #26c281;
}

.xe-border-green-jungle {
    border-color: #26c281 !important;
}

.xe-user-filter-green-jungle {
    color: #26c281 !important;
    border-color: #26c281 !important;
}

.xe-user-filter-green-jungle.active, .xe-user-filter-green-jungle:hover {
    color: #fff !important;
    background-color: #26c281 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-green-jungle {
    box-shadow: 0px 4px 4px #26c28129;
}

xe-treeview .portlet-body > .object-list.xe-object-list-green-jungle > .object-item:hover {
    background: #26c28129;
}

.widgets > .widget-item > .widget-item-content.xe-back-green-jungle:hover {
    box-shadow: 0px 8px 8px #26c2813D !important;
}

.xe-tile-bg-green-jungle {
    --is-tile-bg-color: #26c281;
}

.xe-tile-fg-green-jungle {
    --is-tile-fg-color: #26c281;
}

.xe-tile-bg-hover-green-jungle {
    --is-tile-bg-hover-color: #26c281;
}

.xe-font-red {
    color: #e7505a !important;
}

.xe-back-red {
    background-color: #e7505a !important;
}

.xe-stroke-red {
    stroke: #e7505a !important;
}

.xe-fill-red {
    fill: #e7505a !important;
}

.xe-portlet-fg-red {
    --is-portlet-header-fg-color: #e7505a;
}

.xe-section-bg-red {
    --is-section-header-bg-color: #e7505a;
}

.xe-section-fg-red {
    --is-section-header-fg-color: #e7505a;
}

.xe-border-red {
    border-color: #e7505a !important;
}

.xe-user-filter-red {
    color: #e7505a !important;
    border-color: #e7505a !important;
}

.xe-user-filter-red.active, .xe-user-filter-red:hover {
    color: #fff !important;
    background-color: #e7505a !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-red {
    box-shadow: 0px 4px 4px #e7505a29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-red > .object-item:hover {
    background: #e7505a29;
}

.widgets > .widget-item > .widget-item-content.xe-back-red:hover {
    box-shadow: 0px 8px 8px #e7505a3D !important;
}

.xe-tile-bg-red {
    --is-tile-bg-color: #e7505a;
}

.xe-tile-fg-red {
    --is-tile-fg-color: #e7505a;
}

.xe-tile-bg-hover-red {
    --is-tile-bg-hover-color: #e7505a;
}

.xe-font-red-pink {
    color: #e08283 !important;
}

.xe-back-red-pink {
    background-color: #e08283 !important;
}

.xe-stroke-red-pink {
    stroke: #e08283 !important;
}

.xe-fill-red-pink {
    fill: #e08283 !important;
}

.xe-portlet-fg-red-pink {
    --is-portlet-header-fg-color: #e08283;
}

.xe-section-bg-red-pink {
    --is-section-header-bg-color: #e08283;
}

.xe-section-fg-red-pink {
    --is-section-header-fg-color: #e08283;
}

.xe-border-red-pink {
    border-color: #e08283 !important;
}

.xe-user-filter-red-pink {
    color: #e08283 !important;
    border-color: #e08283 !important;
}

.xe-user-filter-red-pink.active, .xe-user-filter-red-pink:hover {
    color: #fff !important;
    background-color: #e08283 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-red-pink {
    box-shadow: 0px 4px 4px #e0828329;
}

xe-treeview .portlet-body > .object-list.xe-object-list-red-pink > .object-item:hover {
    background: #e0828329;
}

.widgets > .widget-item > .widget-item-content.xe-back-red-pink:hover {
    box-shadow: 0px 8px 8px #e082833D !important;
}

.xe-tile-bg-red-pink {
    --is-tile-bg-color: #e08283;
}

.xe-tile-fg-red-pink {
    --is-tile-fg-color: #e08283;
}

.xe-tile-bg-hover-red-pink {
    --is-tile-bg-hover-color: #e08283;
}

.xe-font-red-sunglo {
    color: #e26a6a !important;
}

.xe-back-red-sunglo {
    background-color: #e26a6a !important;
}

.xe-stroke-red-sunglo {
    stroke: #e26a6a !important;
}

.xe-fill-red-sunglo {
    fill: #e26a6a !important;
}

.xe-portlet-fg-red-sunglo {
    --is-portlet-header-fg-color: #e26a6a;
}

.xe-section-bg-red-sunglo {
    --is-section-header-bg-color: #e26a6a;
}

.xe-section-fg-red-sunglo {
    --is-section-header-fg-color: #e26a6a;
}

.xe-border-red-sunglo {
    border-color: #e26a6a !important;
}

.xe-user-filter-red-sunglo {
    color: #e26a6a !important;
    border-color: #e26a6a !important;
}

.xe-user-filter-red-sunglo.active, .xe-user-filter-red-sunglo:hover {
    color: #fff !important;
    background-color: #e26a6a !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-red-sunglo {
    box-shadow: 0px 4px 4px #e26a6a29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-red-sunglo > .object-item:hover {
    background: #e26a6a29;
}

.widgets > .widget-item > .widget-item-content.xe-back-red-sunglo:hover {
    box-shadow: 0px 8px 8px #e26a6a3D !important;
}

.xe-tile-bg-red-sunglo {
    --is-tile-bg-color: #e26a6a;
}

.xe-tile-fg-red-sunglo {
    --is-tile-fg-color: #e26a6a;
}

.xe-tile-bg-hover-red-sunglo {
    --is-tile-bg-hover-color: #e26a6a;
}

.xe-font-red-intense {
    color: #e35b5a !important;
}

.xe-back-red-intense {
    background-color: #e35b5a !important;
}

.xe-stroke-red-intense {
    stroke: #e35b5a !important;
}

.xe-fill-red-intense {
    fill: #e35b5a !important;
}

.xe-portlet-fg-red-intense {
    --is-portlet-header-fg-color: #e35b5a;
}

.xe-section-bg-red-intense {
    --is-section-header-bg-color: #e35b5a;
}

.xe-section-fg-red-intense {
    --is-section-header-fg-color: #e35b5a;
}

.xe-border-red-intense {
    border-color: #e35b5a !important;
}

.xe-user-filter-red-intense {
    color: #e35b5a !important;
    border-color: #e35b5a !important;
}

.xe-user-filter-red-intense.active, .xe-user-filter-red-intense:hover {
    color: #fff !important;
    background-color: #e35b5a !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-red-intense {
    box-shadow: 0px 4px 4px #e35b5a29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-red-intense > .object-item:hover {
    background: #e35b5a29;
}

.widgets > .widget-item > .widget-item-content.xe-back-red-intense:hover {
    box-shadow: 0px 8px 8px #e35b5a3D !important;
}

.xe-tile-bg-red-intense {
    --is-tile-bg-color: #e35b5a;
}

.xe-tile-fg-red-intense {
    --is-tile-fg-color: #e35b5a;
}

.xe-tile-bg-hover-red-intense {
    --is-tile-bg-hover-color: #e35b5a;
}

.xe-font-red-thunderbird {
    color: #d91e18 !important;
}

.xe-back-red-thunderbird {
    background-color: #d91e18 !important;
}

.xe-stroke-red-thunderbird {
    stroke: #d91e18 !important;
}

.xe-fill-red-thunderbird {
    fill: #d91e18 !important;
}

.xe-portlet-fg-red-thunderbird {
    --is-portlet-header-fg-color: #d91e18;
}

.xe-section-bg-red-thunderbird {
    --is-section-header-bg-color: #d91e18;
}

.xe-section-fg-red-thunderbird {
    --is-section-header-fg-color: #d91e18;
}

.xe-border-red-thunderbird {
    border-color: #d91e18 !important;
}

.xe-user-filter-red-thunderbird {
    color: #d91e18 !important;
    border-color: #d91e18 !important;
}

.xe-user-filter-red-thunderbird.active, .xe-user-filter-red-thunderbird:hover {
    color: #fff !important;
    background-color: #d91e18 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-red-thunderbird {
    box-shadow: 0px 4px 4px #d91e1829;
}

xe-treeview .portlet-body > .object-list.xe-object-list-red-thunderbird > .object-item:hover {
    background: #d91e1829;
}

.widgets > .widget-item > .widget-item-content.xe-back-red-thunderbird:hover {
    box-shadow: 0px 8px 8px #d91e183D !important;
}

.xe-tile-bg-red-thunderbird {
    --is-tile-bg-color: #d91e18;
}

.xe-tile-fg-red-thunderbird {
    --is-tile-fg-color: #d91e18;
}

.xe-tile-bg-hover-red-thunderbird {
    --is-tile-bg-hover-color: #d91e18;
}

.xe-font-red-flamingo {
    color: #ef4836 !important;
}

.xe-back-red-flamingo {
    background-color: #ef4836 !important;
}

.xe-stroke-red-flamingo {
    stroke: #ef4836 !important;
}

.xe-fill-red-flamingo {
    fill: #ef4836 !important;
}

.xe-portlet-fg-red-flamingo {
    --is-portlet-header-fg-color: #ef4836;
}

.xe-section-bg-red-flamingo {
    --is-section-header-bg-color: #ef4836;
}

.xe-section-fg-red-flamingo {
    --is-section-header-fg-color: #ef4836;
}

.xe-border-red-flamingo {
    border-color: #ef4836 !important;
}

.xe-user-filter-red-flamingo {
    color: #ef4836 !important;
    border-color: #ef4836 !important;
}

.xe-user-filter-red-flamingo.active, .xe-user-filter-red-flamingo:hover {
    color: #fff !important;
    background-color: #ef4836 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-red-flamingo {
    box-shadow: 0px 4px 4px #ef483629;
}

xe-treeview .portlet-body > .object-list.xe-object-list-red-flamingo > .object-item:hover {
    background: #ef483629;
}

.widgets > .widget-item > .widget-item-content.xe-back-red-flamingo:hover {
    box-shadow: 0px 8px 8px #ef48363D !important;
}

.xe-tile-bg-red-flamingo {
    --is-tile-bg-color: #ef4836;
}

.xe-tile-fg-red-flamingo {
    --is-tile-fg-color: #ef4836;
}

.xe-tile-bg-hover-red-flamingo {
    --is-tile-bg-hover-color: #ef4836;
}

.xe-font-yellow {
    color: #c49f47 !important;
}

.xe-back-yellow {
    background-color: #c49f47 !important;
}

.xe-stroke-yellow {
    stroke: #c49f47 !important;
}

.xe-fill-yellow {
    fill: #c49f47 !important;
}

.xe-portlet-fg-yellow {
    --is-portlet-header-fg-color: #c49f47;
}

.xe-section-bg-yellow {
    --is-section-header-bg-color: #c49f47;
}

.xe-section-fg-yellow {
    --is-section-header-fg-color: #c49f47;
}

.xe-border-yellow {
    border-color: #c49f47 !important;
}

.xe-user-filter-yellow {
    color: #c49f47 !important;
    border-color: #c49f47 !important;
}

.xe-user-filter-yellow.active, .xe-user-filter-yellow:hover {
    color: #fff !important;
    background-color: #c49f47 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-yellow {
    box-shadow: 0px 4px 4px #c49f4729;
}

xe-treeview .portlet-body > .object-list.xe-object-list-yellow > .object-item:hover {
    background: #c49f4729;
}

.widgets > .widget-item > .widget-item-content.xe-back-yellow:hover {
    box-shadow: 0px 8px 8px #c49f473D !important;
}

.xe-tile-bg-yellow {
    --is-tile-bg-color: #c49f47;
}

.xe-tile-fg-yellow {
    --is-tile-fg-color: #c49f47;
}

.xe-tile-bg-hover-yellow {
    --is-tile-bg-hover-color: #c49f47;
}

.xe-font-yellow-gold {
    color: #e87e04 !important;
}

.xe-back-yellow-gold {
    background-color: #e87e04 !important;
}

.xe-stroke-yellow-gold {
    stroke: #e87e04 !important;
}

.xe-fill-yellow-gold {
    fill: #e87e04 !important;
}

.xe-portlet-fg-yellow-gold {
    --is-portlet-header-fg-color: #e87e04;
}

.xe-section-bg-yellow-gold {
    --is-section-header-bg-color: #e87e04;
}

.xe-section-fg-yellow-gold {
    --is-section-header-fg-color: #e87e04;
}

.xe-border-yellow-gold {
    border-color: #e87e04 !important;
}

.xe-user-filter-yellow-gold {
    color: #e87e04 !important;
    border-color: #e87e04 !important;
}

.xe-user-filter-yellow-gold.active, .xe-user-filter-yellow-gold:hover {
    color: #fff !important;
    background-color: #e87e04 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-yellow-gold {
    box-shadow: 0px 4px 4px #e87e0429;
}

xe-treeview .portlet-body > .object-list.xe-object-list-yellow-gold > .object-item:hover {
    background: #e87e0429;
}

.widgets > .widget-item > .widget-item-content.xe-back-yellow-gold:hover {
    box-shadow: 0px 8px 8px #e87e043D !important;
}

.xe-tile-bg-yellow-gold {
    --is-tile-bg-color: #e87e04;
}

.xe-tile-fg-yellow-gold {
    --is-tile-fg-color: #e87e04;
}

.xe-tile-bg-hover-yellow-gold {
    --is-tile-bg-hover-color: #e87e04;
}

.xe-font-yellow-casablanca {
    color: #f2784b !important;
}

.xe-back-yellow-casablanca {
    background-color: #f2784b !important;
}

.xe-stroke-yellow-casablanca {
    stroke: #f2784b !important;
}

.xe-fill-yellow-casablanca {
    fill: #f2784b !important;
}

.xe-portlet-fg-yellow-casablanca {
    --is-portlet-header-fg-color: #f2784b;
}

.xe-section-bg-yellow-casablanca {
    --is-section-header-bg-color: #f2784b;
}

.xe-section-fg-yellow-casablanca {
    --is-section-header-fg-color: #f2784b;
}

.xe-border-yellow-casablanca {
    border-color: #f2784b !important;
}

.xe-user-filter-yellow-casablanca {
    color: #f2784b !important;
    border-color: #f2784b !important;
}

.xe-user-filter-yellow-casablanca.active, .xe-user-filter-yellow-casablanca:hover {
    color: #fff !important;
    background-color: #f2784b !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-yellow-casablanca {
    box-shadow: 0px 4px 4px #f2784b29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-yellow-casablanca > .object-item:hover {
    background: #f2784b29;
}

.widgets > .widget-item > .widget-item-content.xe-back-yellow-casablanca:hover {
    box-shadow: 0px 8px 8px #f2784b3D !important;
}

.xe-tile-bg-yellow-casablanca {
    --is-tile-bg-color: #f2784b;
}

.xe-tile-fg-yellow-casablanca {
    --is-tile-fg-color: #f2784b;
}

.xe-tile-bg-hover-yellow-casablanca {
    --is-tile-bg-hover-color: #f2784b;
}

.xe-font-yellow-crusta {
    color: #f3c200 !important;
}

.xe-back-yellow-crusta {
    background-color: #f3c200 !important;
}

.xe-stroke-yellow-crusta {
    stroke: #f3c200 !important;
}

.xe-fill-yellow-crusta {
    fill: #f3c200 !important;
}

.xe-portlet-fg-yellow-crusta {
    --is-portlet-header-fg-color: #f3c200;
}

.xe-section-bg-yellow-crusta {
    --is-section-header-bg-color: #f3c200;
}

.xe-section-fg-yellow-crusta {
    --is-section-header-fg-color: #f3c200;
}

.xe-border-yellow-crusta {
    border-color: #f3c200 !important;
}

.xe-user-filter-yellow-crusta {
    color: #f3c200 !important;
    border-color: #f3c200 !important;
}

.xe-user-filter-yellow-crusta.active, .xe-user-filter-yellow-crusta:hover {
    color: #fff !important;
    background-color: #f3c200 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-yellow-crusta {
    box-shadow: 0px 4px 4px #f3c20029;
}

xe-treeview .portlet-body > .object-list.xe-object-list-yellow-crusta > .object-item:hover {
    background: #f3c20029;
}

.widgets > .widget-item > .widget-item-content.xe-back-yellow-crusta:hover {
    box-shadow: 0px 8px 8px #f3c2003D !important;
}

.xe-tile-bg-yellow-crusta {
    --is-tile-bg-color: #f3c200;
}

.xe-tile-fg-yellow-crusta {
    --is-tile-fg-color: #f3c200;
}

.xe-tile-bg-hover-yellow-crusta {
    --is-tile-bg-hover-color: #f3c200;
}

.xe-font-yellow-lemon {
    color: #f7ca18 !important;
}

.xe-back-yellow-lemon {
    background-color: #f7ca18 !important;
}

.xe-stroke-yellow-lemon {
    stroke: #f7ca18 !important;
}

.xe-fill-yellow-lemon {
    fill: #f7ca18 !important;
}

.xe-portlet-fg-yellow-lemon {
    --is-portlet-header-fg-color: #f7ca18;
}

.xe-section-bg-yellow-lemon {
    --is-section-header-bg-color: #f7ca18;
}

.xe-section-fg-yellow-lemon {
    --is-section-header-fg-color: #f7ca18;
}

.xe-border-yellow-lemon {
    border-color: #f7ca18 !important;
}

.xe-user-filter-yellow-lemon {
    color: #f7ca18 !important;
    border-color: #f7ca18 !important;
}

.xe-user-filter-yellow-lemon.active, .xe-user-filter-yellow-lemon:hover {
    color: #fff !important;
    background-color: #f7ca18 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-yellow-lemon {
    box-shadow: 0px 4px 4px #f7ca1829;
}

xe-treeview .portlet-body > .object-list.xe-object-list-yellow-lemon > .object-item:hover {
    background: #f7ca1829;
}

.widgets > .widget-item > .widget-item-content.xe-back-yellow-lemon:hover {
    box-shadow: 0px 8px 8px #f7ca183D !important;
}

.xe-tile-bg-yellow-lemon {
    --is-tile-bg-color: #f7ca18;
}

.xe-tile-fg-yellow-lemon {
    --is-tile-fg-color: #f7ca18;
}

.xe-tile-bg-hover-yellow-lemon {
    --is-tile-bg-hover-color: #f7ca18;
}

.xe-font-yellow-saffron {
    color: #f4d03f !important;
}

.xe-back-yellow-saffron {
    background-color: #f4d03f !important;
}

.xe-stroke-yellow-saffron {
    stroke: #f4d03f !important;
}

.xe-fill-yellow-saffron {
    fill: #f4d03f !important;
}

.xe-portlet-fg-yellow-saffron {
    --is-portlet-header-fg-color: #f4d03f;
}

.xe-section-bg-yellow-saffron {
    --is-section-header-bg-color: #f4d03f;
}

.xe-section-fg-yellow-saffron {
    --is-section-header-fg-color: #f4d03f;
}

.xe-border-yellow-saffron {
    border-color: #f4d03f !important;
}

.xe-user-filter-yellow-saffron {
    color: #f4d03f !important;
    border-color: #f4d03f !important;
}

.xe-user-filter-yellow-saffron.active, .xe-user-filter-yellow-saffron:hover {
    color: #fff !important;
    background-color: #f4d03f !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-yellow-saffron {
    box-shadow: 0px 4px 4px #f4d03f29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-yellow-saffron > .object-item:hover {
    background: #f4d03f29;
}

.widgets > .widget-item > .widget-item-content.xe-back-yellow-saffron:hover {
    box-shadow: 0px 8px 8px #f4d03f3D !important;
}

.xe-tile-bg-yellow-saffron {
    --is-tile-bg-color: #f4d03f;
}

.xe-tile-fg-yellow-saffron {
    --is-tile-fg-color: #f4d03f;
}

.xe-tile-bg-hover-yellow-saffron {
    --is-tile-bg-hover-color: #f4d03f;
}

.xe-font-purple {
    color: #8e44ad !important;
}

.xe-back-purple {
    background-color: #8e44ad !important;
}

.xe-stroke-purple {
    stroke: #8e44ad !important;
}

.xe-fill-purple {
    fill: #8e44ad !important;
}

.xe-portlet-fg-purple {
    --is-portlet-header-fg-color: #8e44ad;
}

.xe-section-bg-purple {
    --is-section-header-bg-color: #8e44ad;
}

.xe-section-fg-purple {
    --is-section-header-fg-color: #8e44ad;
}

.xe-border-purple {
    border-color: #8e44ad !important;
}

.xe-user-filter-purple {
    color: #8e44ad !important;
    border-color: #8e44ad !important;
}

.xe-user-filter-purple.active, .xe-user-filter-purple:hover {
    color: #fff !important;
    background-color: #8e44ad !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-purple {
    box-shadow: 0px 4px 4px #8e44ad29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-purple > .object-item:hover {
    background: #8e44ad29;
}

.widgets > .widget-item > .widget-item-content.xe-back-purple:hover {
    box-shadow: 0px 8px 8px #8e44ad3D !important;
}

.xe-tile-bg-purple {
    --is-tile-bg-color: #8e44ad;
}

.xe-tile-fg-purple {
    --is-tile-fg-color: #8e44ad;
}

.xe-tile-bg-hover-purple {
    --is-tile-bg-hover-color: #8e44ad;
}

.xe-font-purple-plum {
    color: #8775a7 !important;
}

.xe-back-purple-plum {
    background-color: #8775a7 !important;
}

.xe-stroke-purple-plum {
    stroke: #8775a7 !important;
}

.xe-fill-purple-plum {
    fill: #8775a7 !important;
}

.xe-portlet-fg-purple-plum {
    --is-portlet-header-fg-color: #8775a7;
}

.xe-section-bg-purple-plum {
    --is-section-header-bg-color: #8775a7;
}

.xe-section-fg-purple-plum {
    --is-section-header-fg-color: #8775a7;
}

.xe-border-purple-plum {
    border-color: #8775a7 !important;
}

.xe-user-filter-purple-plum {
    color: #8775a7 !important;
    border-color: #8775a7 !important;
}

.xe-user-filter-purple-plum.active, .xe-user-filter-purple-plum:hover {
    color: #fff !important;
    background-color: #8775a7 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-purple-plum {
    box-shadow: 0px 4px 4px #8775a729;
}

xe-treeview .portlet-body > .object-list.xe-object-list-purple-plum > .object-item:hover {
    background: #8775a729;
}

.widgets > .widget-item > .widget-item-content.xe-back-purple-plum:hover {
    box-shadow: 0px 8px 8px #8775a73D !important;
}

.xe-tile-bg-purple-plum {
    --is-tile-bg-color: #8775a7;
}

.xe-tile-fg-purple-plum {
    --is-tile-fg-color: #8775a7;
}

.xe-tile-bg-hover-purple-plum {
    --is-tile-bg-hover-color: #8775a7;
}

.xe-font-purple-medium {
    color: #bf55ec !important;
}

.xe-back-purple-medium {
    background-color: #bf55ec !important;
}

.xe-stroke-purple-medium {
    stroke: #bf55ec !important;
}

.xe-fill-purple-medium {
    fill: #bf55ec !important;
}

.xe-portlet-fg-purple-medium {
    --is-portlet-header-fg-color: #bf55ec;
}

.xe-section-bg-purple-medium {
    --is-section-header-bg-color: #bf55ec;
}

.xe-section-fg-purple-medium {
    --is-section-header-fg-color: #bf55ec;
}

.xe-border-purple-medium {
    border-color: #bf55ec !important;
}

.xe-user-filter-purple-medium {
    color: #bf55ec !important;
    border-color: #bf55ec !important;
}

.xe-user-filter-purple-medium.active, .xe-user-filter-purple-medium:hover {
    color: #fff !important;
    background-color: #bf55ec !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-purple-medium {
    box-shadow: 0px 4px 4px #bf55ec29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-purple-medium > .object-item:hover {
    background: #bf55ec29;
}

.widgets > .widget-item > .widget-item-content.xe-back-purple-medium:hover {
    box-shadow: 0px 8px 8px #bf55ec3D !important;
}

.xe-tile-bg-purple-medium {
    --is-tile-bg-color: #bf55ec;
}

.xe-tile-fg-purple-medium {
    --is-tile-fg-color: #bf55ec;
}

.xe-tile-bg-hover-purple-medium {
    --is-tile-bg-hover-color: #bf55ec;
}

.xe-font-purple-studio {
    color: #8e44ad !important;
}

.xe-back-purple-studio {
    background-color: #8e44ad !important;
}

.xe-stroke-purple-studio {
    stroke: #8e44ad !important;
}

.xe-fill-purple-studio {
    fill: #8e44ad !important;
}

.xe-portlet-fg-purple-studio {
    --is-portlet-header-fg-color: #8e44ad;
}

.xe-section-bg-purple-studio {
    --is-section-header-bg-color: #8e44ad;
}

.xe-section-fg-purple-studio {
    --is-section-header-fg-color: #8e44ad;
}

.xe-border-purple-studio {
    border-color: #8e44ad !important;
}

.xe-user-filter-purple-studio {
    color: #8e44ad !important;
    border-color: #8e44ad !important;
}

.xe-user-filter-purple-studio.active, .xe-user-filter-purple-studio:hover {
    color: #fff !important;
    background-color: #8e44ad !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-purple-studio {
    box-shadow: 0px 4px 4px #8e44ad29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-purple-studio > .object-item:hover {
    background: #8e44ad29;
}

.widgets > .widget-item > .widget-item-content.xe-back-purple-studio:hover {
    box-shadow: 0px 8px 8px #8e44ad3D !important;
}

.xe-tile-bg-purple-studio {
    --is-tile-bg-color: #8e44ad;
}

.xe-tile-fg-purple-studio {
    --is-tile-fg-color: #8e44ad;
}

.xe-tile-bg-hover-purple-studio {
    --is-tile-bg-hover-color: #8e44ad;
}

.xe-font-purple-wisteria {
    color: #9b59b6 !important;
}

.xe-back-purple-wisteria {
    background-color: #9b59b6 !important;
}

.xe-stroke-purple-wisteria {
    stroke: #9b59b6 !important;
}

.xe-fill-purple-wisteria {
    fill: #9b59b6 !important;
}

.xe-portlet-fg-purple-wisteria {
    --is-portlet-header-fg-color: #9b59b6;
}

.xe-section-bg-purple-wisteria {
    --is-section-header-bg-color: #9b59b6;
}

.xe-section-fg-purple-wisteria {
    --is-section-header-fg-color: #9b59b6;
}

.xe-border-purple-wisteria {
    border-color: #9b59b6 !important;
}

.xe-user-filter-purple-wisteria {
    color: #9b59b6 !important;
    border-color: #9b59b6 !important;
}

.xe-user-filter-purple-wisteria.active, .xe-user-filter-purple-wisteria:hover {
    color: #fff !important;
    background-color: #9b59b6 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-purple-wisteria {
    box-shadow: 0px 4px 4px #9b59b629;
}

xe-treeview .portlet-body > .object-list.xe-object-list-purple-wisteria > .object-item:hover {
    background: #9b59b629;
}

.widgets > .widget-item > .widget-item-content.xe-back-purple-wisteria:hover {
    box-shadow: 0px 8px 8px #9b59b63D !important;
}

.xe-tile-bg-purple-wisteria {
    --is-tile-bg-color: #9b59b6;
}

.xe-tile-fg-purple-wisteria {
    --is-tile-fg-color: #9b59b6;
}

.xe-tile-bg-hover-purple-wisteria {
    --is-tile-bg-hover-color: #9b59b6;
}

.xe-font-purple-seance {
    color: #9a12b3 !important;
}

.xe-back-purple-seance {
    background-color: #9a12b3 !important;
}

.xe-stroke-purple-seance {
    stroke: #9a12b3 !important;
}

.xe-fill-purple-seance {
    fill: #9a12b3 !important;
}

.xe-portlet-fg-purple-seance {
    --is-portlet-header-fg-color: #9a12b3;
}

.xe-section-bg-purple-seance {
    --is-section-header-bg-color: #9a12b3;
}

.xe-section-fg-purple-seance {
    --is-section-header-fg-color: #9a12b3;
}

.xe-border-purple-seance {
    border-color: #9a12b3 !important;
}

.xe-user-filter-purple-seance {
    color: #9a12b3 !important;
    border-color: #9a12b3 !important;
}

.xe-user-filter-purple-seance.active, .xe-user-filter-purple-seance:hover {
    color: #fff !important;
    background-color: #9a12b3 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-purple-seance {
    box-shadow: 0px 4px 4px #9a12b329;
}

xe-treeview .portlet-body > .object-list.xe-object-list-purple-seance > .object-item:hover {
    background: #9a12b329;
}

.widgets > .widget-item > .widget-item-content.xe-back-purple-seance:hover {
    box-shadow: 0px 8px 8px #9a12b33D !important;
}

.xe-tile-bg-purple-seance {
    --is-tile-bg-color: #9a12b3;
}

.xe-tile-fg-purple-seance {
    --is-tile-fg-color: #9a12b3;
}

.xe-tile-bg-hover-purple-seance {
    --is-tile-bg-hover-color: #9a12b3;
}

.xe-font-grey {
    color: #e5e5e5 !important;
}

.xe-back-grey {
    background-color: #e5e5e5 !important;
}

.xe-stroke-grey {
    stroke: #e5e5e5 !important;
}

.xe-fill-grey {
    fill: #e5e5e5 !important;
}

.xe-portlet-fg-grey {
    --is-portlet-header-fg-color: #e5e5e5;
}

.xe-section-bg-grey {
    --is-section-header-bg-color: #e5e5e5;
}

.xe-section-fg-grey {
    --is-section-header-fg-color: #e5e5e5;
}

.xe-border-grey {
    border-color: #e5e5e5 !important;
}

.xe-user-filter-grey {
    color: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
}

.xe-user-filter-grey.active, .xe-user-filter-grey:hover {
    color: #fff !important;
    background-color: #e5e5e5 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-grey {
    box-shadow: 0px 4px 4px #e5e5e529;
}

xe-treeview .portlet-body > .object-list.xe-object-list-grey > .object-item:hover {
    background: #e5e5e529;
}

.widgets > .widget-item > .widget-item-content.xe-back-grey:hover {
    box-shadow: 0px 8px 8px #e5e5e53D !important;
}

.xe-tile-bg-grey {
    --is-tile-bg-color: #e5e5e5;
}

.xe-tile-fg-grey {
    --is-tile-fg-color: #e5e5e5;
}

.xe-tile-bg-hover-grey {
    --is-tile-bg-hover-color: #e5e5e5;
}

.xe-font-grey-cascade {
    color: #95a5a6 !important;
}

.xe-back-grey-cascade {
    background-color: #95a5a6 !important;
}

.xe-stroke-grey-cascade {
    stroke: #95a5a6 !important;
}

.xe-fill-grey-cascade {
    fill: #95a5a6 !important;
}

.xe-portlet-fg-grey-cascade {
    --is-portlet-header-fg-color: #95a5a6;
}

.xe-section-bg-grey-cascade {
    --is-section-header-bg-color: #95a5a6;
}

.xe-section-fg-grey-cascade {
    --is-section-header-fg-color: #95a5a6;
}

.xe-border-grey-cascade {
    border-color: #95a5a6 !important;
}

.xe-user-filter-grey-cascade {
    color: #95a5a6 !important;
    border-color: #95a5a6 !important;
}

.xe-user-filter-grey-cascade.active, .xe-user-filter-grey-cascade:hover {
    color: #fff !important;
    background-color: #95a5a6 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-grey-cascade {
    box-shadow: 0px 4px 4px #95a5a629;
}

xe-treeview .portlet-body > .object-list.xe-object-list-grey-cascade > .object-item:hover {
    background: #95a5a629;
}

.widgets > .widget-item > .widget-item-content.xe-back-grey-cascade:hover {
    box-shadow: 0px 8px 8px #95a5a63D !important;
}

.xe-tile-bg-grey-cascade {
    --is-tile-bg-color: #95a5a6;
}

.xe-tile-fg-grey-cascade {
    --is-tile-fg-color: #95a5a6;
}

.xe-tile-bg-hover-grey-cascade {
    --is-tile-bg-hover-color: #95a5a6;
}

.xe-font-grey-sliver {
    color: #bfbfbf !important;
}

.xe-back-grey-sliver {
    background-color: #bfbfbf !important;
}

.xe-stroke-grey-sliver {
    stroke: #bfbfbf !important;
}

.xe-fill-grey-sliver {
    fill: #bfbfbf !important;
}

.xe-portlet-fg-grey-sliver {
    --is-portlet-header-fg-color: #bfbfbf;
}

.xe-section-bg-grey-sliver {
    --is-section-header-bg-color: #bfbfbf;
}

.xe-section-fg-grey-sliver {
    --is-section-header-fg-color: #bfbfbf;
}

.xe-border-grey-sliver {
    border-color: #bfbfbf !important;
}

.xe-user-filter-grey-sliver {
    color: #bfbfbf !important;
    border-color: #bfbfbf !important;
}

.xe-user-filter-grey-sliver.active, .xe-user-filter-grey-sliver:hover {
    color: #fff !important;
    background-color: #bfbfbf !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-grey-sliver {
    box-shadow: 0px 4px 4px #bfbfbf29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-grey-sliver > .object-item:hover {
    background: #bfbfbf29;
}

.widgets > .widget-item > .widget-item-content.xe-back-grey-sliver:hover {
    box-shadow: 0px 8px 8px #bfbfbf3D !important;
}

.xe-tile-bg-grey-sliver {
    --is-tile-bg-color: #bfbfbf;
}

.xe-tile-fg-grey-sliver {
    --is-tile-fg-color: #bfbfbf;
}

.xe-tile-bg-hover-grey-sliver {
    --is-tile-bg-hover-color: #bfbfbf;
}

.xe-font-grey-steel {
    color: #e9edef !important;
}

.xe-back-grey-steel {
    background-color: #e9edef !important;
}

.xe-stroke-grey-steel {
    stroke: #e9edef !important;
}

.xe-fill-grey-steel {
    fill: #e9edef !important;
}

.xe-portlet-fg-grey-steel {
    --is-portlet-header-fg-color: #e9edef;
}

.xe-section-bg-grey-steel {
    --is-section-header-bg-color: #e9edef;
}

.xe-section-fg-grey-steel {
    --is-section-header-fg-color: #e9edef;
}

.xe-border-grey-steel {
    border-color: #e9edef !important;
}

.xe-user-filter-grey-steel {
    color: #e9edef !important;
    border-color: #e9edef !important;
}

.xe-user-filter-grey-steel.active, .xe-user-filter-grey-steel:hover {
    color: #fff !important;
    background-color: #e9edef !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-grey-steel {
    box-shadow: 0px 4px 4px #e9edef29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-grey-steel > .object-item:hover {
    background: #e9edef29;
}

.widgets > .widget-item > .widget-item-content.xe-back-grey-steel:hover {
    box-shadow: 0px 8px 8px #e9edef3D !important;
}

.xe-tile-bg-grey-steel {
    --is-tile-bg-color: #e9edef;
}

.xe-tile-fg-grey-steel {
    --is-tile-fg-color: #e9edef;
}

.xe-tile-bg-hover-grey-steel {
    --is-tile-bg-hover-color: #e9edef;
}

.xe-font-grey-carara {
    color: #fafafa !important;
}

.xe-back-grey-carara {
    background-color: #fafafa !important;
}

.xe-stroke-grey-carara {
    stroke: #fafafa !important;
}

.xe-fill-grey-carara {
    fill: #fafafa !important;
}

.xe-portlet-fg-grey-carara {
    --is-portlet-header-fg-color: #fafafa;
}

.xe-section-bg-grey-carara {
    --is-section-header-bg-color: #fafafa;
}

.xe-section-fg-grey-carara {
    --is-section-header-fg-color: #fafafa;
}

.xe-border-grey-carara {
    border-color: #fafafa !important;
}

.xe-user-filter-grey-carara {
    color: #fafafa !important;
    border-color: #fafafa !important;
}

.xe-user-filter-grey-carara.active, .xe-user-filter-grey-carara:hover {
    color: #fff !important;
    background-color: #fafafa !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-grey-carara {
    box-shadow: 0px 4px 4px #fafafa29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-grey-carara > .object-item:hover {
    background: #fafafa29;
}

.widgets > .widget-item > .widget-item-content.xe-back-grey-carara:hover {
    box-shadow: 0px 8px 8px #fafafa3D !important;
}

.xe-tile-bg-grey-carara {
    --is-tile-bg-color: #fafafa;
}

.xe-tile-fg-grey-carara {
    --is-tile-fg-color: #fafafa;
}

.xe-tile-bg-hover-grey-carara {
    --is-tile-bg-hover-color: #fafafa;
}

.xe-font-grey-gallery {
    color: #555 !important;
}

.xe-back-grey-gallery {
    background-color: #555 !important;
}

.xe-stroke-grey-gallery {
    stroke: #555 !important;
}

.xe-fill-grey-gallery {
    fill: #555 !important;
}

.xe-portlet-fg-grey-gallery {
    --is-portlet-header-fg-color: #555;
}

.xe-section-bg-grey-gallery {
    --is-section-header-bg-color: #555;
}

.xe-section-fg-grey-gallery {
    --is-section-header-fg-color: #555;
}

.xe-border-grey-gallery {
    border-color: #555 !important;
}

.xe-user-filter-grey-gallery {
    color: #555 !important;
    border-color: #555 !important;
}

.xe-user-filter-grey-gallery.active, .xe-user-filter-grey-gallery:hover {
    color: #fff !important;
    background-color: #555 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-grey-gallery {
    box-shadow: 0px 4px 4px #55529;
}

xe-treeview .portlet-body > .object-list.xe-object-list-grey-gallery > .object-item:hover {
    background: #55529;
}

.widgets > .widget-item > .widget-item-content.xe-back-grey-gallery:hover {
    box-shadow: 0px 8px 8px #5553D !important;
}

.xe-tile-bg-grey-gallery {
    --is-tile-bg-color: #555;
}

.xe-tile-fg-grey-gallery {
    --is-tile-fg-color: #555;
}

.xe-tile-bg-hover-grey-gallery {
    --is-tile-bg-hover-color: #555;
}

.xe-font-white {
    color: #ffffff !important;
}

.xe-back-white {
    background-color: #ffffff !important;
}

.xe-stroke-white {
    stroke: #ffffff !important;
}

.xe-fill-white {
    fill: #ffffff !important;
}

.xe-portlet-fg-white {
    --is-portlet-header-fg-color: #ffffff;
}

.xe-section-bg-white {
    --is-section-header-bg-color: #ffffff;
}

.xe-section-fg-white {
    --is-section-header-fg-color: #ffffff;
}

.xe-border-white {
    border-color: #ffffff !important;
}

.xe-user-filter-white {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.xe-user-filter-white.active, .xe-user-filter-white:hover {
    color: #fff !important;
    background-color: #ffffff !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-white {
    box-shadow: 0px 4px 4px #ffffff29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-white > .object-item:hover {
    background: #ffffff29;
}

.widgets > .widget-item > .widget-item-content.xe-back-white:hover {
    box-shadow: 0px 8px 8px #ffffff3D !important;
}

.xe-tile-bg-white {
    --is-tile-bg-color: #ffffff;
}

.xe-tile-fg-white {
    --is-tile-fg-color: #ffffff;
}

.xe-tile-bg-hover-white {
    --is-tile-bg-hover-color: #ffffff;
}

.xe-font-cust-coal-grey {
    color: #434d4b !important;
}

.xe-back-cust-coal-grey {
    background-color: #434d4b !important;
}

.xe-stroke-cust-coal-grey {
    stroke: #434d4b !important;
}

.xe-fill-cust-coal-grey {
    fill: #434d4b !important;
}

.xe-portlet-fg-cust-coal-grey {
    --is-portlet-header-fg-color: #434d4b;
}

.xe-section-bg-cust-coal-grey {
    --is-section-header-bg-color: #434d4b;
}

.xe-section-fg-cust-coal-grey {
    --is-section-header-fg-color: #434d4b;
}

.xe-border-cust-coal-grey {
    border-color: #434d4b !important;
}

.xe-user-filter-cust-coal-grey {
    color: #434d4b !important;
    border-color: #434d4b !important;
}

.xe-user-filter-cust-coal-grey.active, .xe-user-filter-cust-coal-grey:hover {
    color: #fff !important;
    background-color: #434d4b !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-cust-coal-grey {
    box-shadow: 0px 4px 4px #434d4b29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-cust-coal-grey > .object-item:hover {
    background: #434d4b29;
}

.widgets > .widget-item > .widget-item-content.xe-back-cust-coal-grey:hover {
    box-shadow: 0px 8px 8px #434d4b3D !important;
}

.xe-tile-bg-cust-coal-grey {
    --is-tile-bg-color: #434d4b;
}

.xe-tile-fg-cust-coal-grey {
    --is-tile-fg-color: #434d4b;
}

.xe-tile-bg-hover-cust-coal-grey {
    --is-tile-bg-hover-color: #434d4b;
}

.xe-font-cust-crick-red {
    color: #e94e1b !important;
}

.xe-back-cust-crick-red {
    background-color: #e94e1b !important;
}

.xe-stroke-cust-crick-red {
    stroke: #e94e1b !important;
}

.xe-fill-cust-crick-red {
    fill: #e94e1b !important;
}

.xe-portlet-fg-cust-crick-red {
    --is-portlet-header-fg-color: #e94e1b;
}

.xe-section-bg-cust-crick-red {
    --is-section-header-bg-color: #e94e1b;
}

.xe-section-fg-cust-crick-red {
    --is-section-header-fg-color: #e94e1b;
}

.xe-border-cust-crick-red {
    border-color: #e94e1b !important;
}

.xe-user-filter-cust-crick-red {
    color: #e94e1b !important;
    border-color: #e94e1b !important;
}

.xe-user-filter-cust-crick-red.active, .xe-user-filter-cust-crick-red:hover {
    color: #fff !important;
    background-color: #e94e1b !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-cust-crick-red {
    box-shadow: 0px 4px 4px #e94e1b29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-cust-crick-red > .object-item:hover {
    background: #e94e1b29;
}

.widgets > .widget-item > .widget-item-content.xe-back-cust-crick-red:hover {
    box-shadow: 0px 8px 8px #e94e1b3D !important;
}

.xe-tile-bg-cust-crick-red {
    --is-tile-bg-color: #e94e1b;
}

.xe-tile-fg-cust-crick-red {
    --is-tile-fg-color: #e94e1b;
}

.xe-tile-bg-hover-cust-crick-red {
    --is-tile-bg-hover-color: #e94e1b;
}

.xe-font-cust-lime-green {
    color: #9cbf1d !important;
}

.xe-back-cust-lime-green {
    background-color: #9cbf1d !important;
}

.xe-stroke-cust-lime-green {
    stroke: #9cbf1d !important;
}

.xe-fill-cust-lime-green {
    fill: #9cbf1d !important;
}

.xe-portlet-fg-cust-lime-green {
    --is-portlet-header-fg-color: #9cbf1d;
}

.xe-section-bg-cust-lime-green {
    --is-section-header-bg-color: #9cbf1d;
}

.xe-section-fg-cust-lime-green {
    --is-section-header-fg-color: #9cbf1d;
}

.xe-border-cust-lime-green {
    border-color: #9cbf1d !important;
}

.xe-user-filter-cust-lime-green {
    color: #9cbf1d !important;
    border-color: #9cbf1d !important;
}

.xe-user-filter-cust-lime-green.active, .xe-user-filter-cust-lime-green:hover {
    color: #fff !important;
    background-color: #9cbf1d !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-cust-lime-green {
    box-shadow: 0px 4px 4px #9cbf1d29;
}

xe-treeview .portlet-body > .object-list.xe-object-list-cust-lime-green > .object-item:hover {
    background: #9cbf1d29;
}

.widgets > .widget-item > .widget-item-content.xe-back-cust-lime-green:hover {
    box-shadow: 0px 8px 8px #9cbf1d3D !important;
}

.xe-tile-bg-cust-lime-green {
    --is-tile-bg-color: #9cbf1d;
}

.xe-tile-fg-cust-lime-green {
    --is-tile-fg-color: #9cbf1d;
}

.xe-tile-bg-hover-cust-lime-green {
    --is-tile-bg-hover-color: #9cbf1d;
}

.xe-font-cust-pine-green {
    color: #006633 !important;
}

.xe-back-cust-pine-green {
    background-color: #006633 !important;
}

.xe-stroke-cust-pine-green {
    stroke: #006633 !important;
}

.xe-fill-cust-pine-green {
    fill: #006633 !important;
}

.xe-portlet-fg-cust-pine-green {
    --is-portlet-header-fg-color: #006633;
}

.xe-section-bg-cust-pine-green {
    --is-section-header-bg-color: #006633;
}

.xe-section-fg-cust-pine-green {
    --is-section-header-fg-color: #006633;
}

.xe-border-cust-pine-green {
    border-color: #006633 !important;
}

.xe-user-filter-cust-pine-green {
    color: #006633 !important;
    border-color: #006633 !important;
}

.xe-user-filter-cust-pine-green.active, .xe-user-filter-cust-pine-green:hover {
    color: #fff !important;
    background-color: #006633 !important;
}

is-section > .portlet > .portlet-title.xe-section-bg-cust-pine-green {
    box-shadow: 0px 4px 4px #00663329;
}

xe-treeview .portlet-body > .object-list.xe-object-list-cust-pine-green > .object-item:hover {
    background: #00663329;
}

.widgets > .widget-item > .widget-item-content.xe-back-cust-pine-green:hover {
    box-shadow: 0px 8px 8px #0066333D !important;
}

.xe-tile-bg-cust-pine-green {
    --is-tile-bg-color: #006633;
}

.xe-tile-fg-cust-pine-green {
    --is-tile-fg-color: #006633;
}

.xe-tile-bg-hover-cust-pine-green {
    --is-tile-bg-hover-color: #006633;
}

@media (max-width: 767px) {
    xe-form-section {
        width: 100% !important;
    }
}

@media (max-width: 580px) {
    xe-form-line {
        width: 100% !important;
    }
}

.xe-ws-action-1 {
    --is-tile-bg-color: #D8EBD8;
    --is-tile-fg-color: #158915;
    --is-tile-bg-hover-color: #A0CFA0;
}

.xe-ws-action-2 {
    --is-tile-bg-color: #F7CCD0;
    --is-tile-fg-color: #DF303E;
    --is-tile-bg-hover-color: #F2ABB1;
}

.xe-ws-action-3 {
    --is-tile-bg-color: #F9DFC2;
    --is-tile-fg-color: #E87E04;
    --is-tile-bg-hover-color: #F5CB9A;
}

.xe-ws-action-5 {
    --is-tile-bg-color: #D2DDEF;
    --is-tile-fg-color: #4674BE;
    --is-tile-bg-hover-color: #B4C7E4;
}

.xe-ws-action-10 {
    --is-tile-bg-color: #D8EBD8;
    --is-tile-fg-color: #158915;
    --is-tile-bg-hover-color: #A0CFA0;
}

.xe-ws-action-20 {
    --is-tile-bg-color: #F7CCD0;
    --is-tile-fg-color: #DF303E;
    --is-tile-bg-hover-color: #F2ABB1;
}

.xe-ws-action-30 {
    --is-tile-bg-color: #F9DFC2;
    --is-tile-fg-color: #E87E04;
    --is-tile-bg-hover-color: #F5CB9A;
}

/* LOGIN page layout */
.modal-dialog.login-modal {
    position: fixed;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow-y: auto !important;
    display: flex;
    align-items: initial;
    /* CSS variables used in this style are built-in to Xeelo styles and their values (colors) are set based on current theme
    --xe-login-bg-color: var(--xe-dark-08);
    --xe-login-box-bg-color: var(--xe-white);
    --xe-login-box-box-shadow: 0px 2px 4px #2B364214;
    --xe-login-label-fg-color: var(--xe-dark-88);
    --xe-login-reset-password-btn-bg-color: var(--xe-cyan-88);
    --xe-login-text-color: var(--xe-general-text-default-color);
    --xe-login-input-border-color: var(--is-control-border-color);
    --xe-login-input-bg-color: var(--is-control-bg-color);
    --xe-login-input-fg-color: var(--is-control-fg-color);
    --xe-login-input-border-focus-color: var(--is-control-border-focus-color);
    --xe-login-input-invalid-border-color: var(--xe-red-100);
    --xe-login-forgot-pwd-link-color: var(--xe-dark-64);
    --xe-login-qrcode-border-color: var(--xe-dark-32);
    --xe-login-qrcode-bg-color: var(--is-control-bg-color);
     */
}

    .modal-dialog.login-modal > .modal-content {
        background-color: var(--xe-login-bg-color);
    }

xe-login {
    display: flex;
    flex: 1;
    flex-flow: column;
    background: url(/api/File/Xeelo/?file=AppLogoBackground);
    background-size: cover;
    overflow: auto;
}   

    xe-login > .login-container {
        display: flex;
        flex-flow: column;
    }

        xe-login > .login-container > div {
            margin: 0 auto;
        }

            xe-login > .login-container > div.login-box,
            xe-login > .login-container > div.logo {
                width: 360px;
            }

            xe-login > .login-container > div.login-box.qr-code-login {
                width: 610px;
            }
                
                xe-login > .login-container > div.login-box.qr-code-login form {
                    display: flex;
                }

            xe-login > .login-container > div.logo {
                padding-top: 48px;
                padding-bottom: 48px;
            }

    xe-login > div.footer {
        padding: 24px;
        margin: 0 auto;
    }

/* END LOGIN page layout*/

/* LOGIN page layout - responsive rules */
@media screen and (max-width: 380px) {
    xe-login {
        padding: 16px;
    }

        xe-login > .login-container div.logo {
            width: 80%;
            padding-top: 40px;
            padding-bottom: 24px;
        }

        xe-login > .login-container div.login-box {
            width: 100%;
        }
}

@media screen and (max-height: 680px) {
    xe-login > .login-container {
        flex-flow: column;
    }

        xe-login > .login-container div.logo {
            width: 250px;
        }
}

/* END LOGIN page layout - responsive rules */


/* LOGIN form layout*/
xe-login div.login-box h3 {
    font-size: 32px;
    line-height: 43px;
    color: var(--xe-login-text-color);
    margin-bottom: 16px;
    font-weight: 600;
}

xe-login div.login-box form {
    background-color: var(--xe-login-box-bg-color);
    border-radius: 4px;
    padding: 24px;
    box-shadow: var(--xe-login-box-box-shadow);
}

    xe-login div.login-box form .login-languages {
        display: flex;
        flex-flow: row;
        justify-content: center;
        margin-top: 24px;
    }

        xe-login div.login-box form .login-languages is-select {
            width: 85px;
        }

    xe-login div.login-box form .form-group > label {
        margin-bottom: 4px;
        padding-left: 8px;
        font-weight: bold;
        color: var(--xe-login-label-fg-color);
    }

    xe-login div.login-box form .form-group small {
        padding-left: 8px;
    }

        xe-login div.login-box form .form-group small > i {
            margin-right: 4px;
        }

    /* style INPUT */
    xe-login div.login-box form .form-group > input {
        border-color: var(--xe-login-input-border-color);
        background-color: var(--xe-login-input-bg-color);
        color: var(--xe-login-input-fg-color);
        padding: 8px;
        font-size: 14px;
    }

        xe-login div.login-box form .form-group > input:hover {
            border-color: var(--is-control-border-hover-color);
        }

        xe-login div.login-box form .form-group > input:focus {
            border-color: var(--xe-login-input-border-focus-color);
            box-shadow: 0px 0px 0px 1px var(--xe-login-input-border-focus-color);
        }

        xe-login div.login-box form .form-group > input.ng-touched.ng-invalid {
            border-color: var(--xe-login-input-invalid-border-color);
        }

    /* END style INPUT */

    xe-login div.login-box form .form-group is-checkbox {
        font-size: 16px;
    }

    /* style PASSWORD */
    xe-login div.login-box form .form-group > is-password.ng-invalid > .input-group-password {
        border-color: var(--xe-login-input-border-color);
    }

    xe-login div.login-box form .form-group > is-password.ng-invalid.ng-touched > .input-group-password {
        border-color: var(--xe-login-input-invalid-border-color);
    }

/* END style PASSWORD */



/* style MSAL */

xe-login .msal {
    margin-top: 16px;
    flex-flow: column;
}

    xe-login .msal .msal-user {
        display: flex;
        flex-flow: column;
    }

        xe-login .msal .msal-user > div {
            text-align: center;
            font-size: 12px;
        }

        xe-login .msal .msal-user > .msal-user-email {
            font-style: italic;
            font-size: 10px;
        }

        xe-login .msal .msal-user > .msal-user-name {
            font-weight: bold;
            font-size: 14px;
        }

        xe-login .msal .msal-user .msal-user-buttons {
            margin-top: 8px;
            display: flex;
            align-items: baseline;
        }

            xe-login .msal .msal-user .msal-user-buttons > span {
                padding: 0 4px;
            }

            xe-login .msal .msal-user .msal-user-buttons > button {
                flex: 1;
            }

/* end style MSAL */

xe-login div.login-box a.forget-password {
    cursor: pointer;
    color: var(--xe-login-forgot-pwd-link-color) !important;
}

xe-login div.login-box .form-actions {
    display: flex;
}

    xe-login div.login-box .form-actions button.xe-btn-ghost {
        margin-right: 4px;
    }

    xe-login div.login-box .form-actions button.xe-btn-success {
        flex: 1;
    }

    xe-login div.login-box .form-actions button.btn-reset-password {
        background-color: var(--xe-login-reset-password-btn-bg-color);
        border-color: var(--xe-login-reset-password-btn-bg-color);
    }

/* style QR CODE LOGIN */

xe-login div.login-box.qr-code-login form .form-content {
    width: 312px;
}

xe-login div.login-box.qr-code-login form .qr-code-login {
    padding-left: 24px;
}

    xe-login div.login-box.qr-code-login form .qr-code-login > div {
        font-weight: bold;
        margin-bottom: 4px;
        padding-left: 8px;
        color: var(--xe-login-label-fg-color);
    }

    xe-login div.login-box.qr-code-login form .qr-code-login div.qrcode {
        border-radius: 4px;
        padding: 4px;
        border: 1px solid var(--xe-login-qrcode-border-color);
        background-color: var(--xe-login-qrcode-bg-color);
    }

/* end style QR CODE LOGIN */

/* END LOGIN form layout */

/* workaround to disable chrome autocomplete styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--xe-login-text-color) !important;
}




.progress {
  vertical-align: baseline; }

  .progress {
  display: box;
  display: flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem; }

.progress-bar {
  display: box;
  display: flexbox;
  display: flex;
  box-orient: vertical;
  box-direction: normal;
  flex-direction: column;
  flex-direction: column;
  box-pack: center;
  flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #5867dd;
  transition: width 0.6s ease;
  transition: width 0.6s ease; }
  @media screen and (prefers-reduced-motion: reduce) {
    .progress-bar {
      transition: none;
      transition: none; } }

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem; }

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite; }

  .progress .progress-bar {
  transition: all 0.5s ease;
  transition: all 0.5s ease; }
  @media screen and (prefers-reduced-motion: reduce) {
    .progress .progress-bar {
      transition: none;
      transition: none; } }

.progress.m-progress--sm {
  height: 6px; }
  .progress.m-progress--sm .progress-bar {
    border-radius: 3px; }

.progress.m-progress--lg {
  height: 20px; }
  .progress.m-progress--lg .progress-bar {
    border-radius: 4px; }

.progress .progress-bar-brand {
  background-color: #716aca; }

.progress .progress-bar-metal {
  background-color: #c4c5d6; }

.progress .progress-bar-light {
  background-color: #ffffff; }

.progress .progress-bar-accent {
  background-color: #00c5dc; }

.progress .progress-bar-focus {
  background-color: #9816f4; }

.progress .progress-bar-primary {
  background-color: #5867dd; }


.progress .progress-bar-success {
  background-color: #34bfa3; }


.progress .progress-bar-info {
  background-color: #36a3f7; }

.progress .progress-bar-warning {
  background-color: #ffb822; }


.progress .progress-bar-danger {
  background-color: #f4516c; }