:root {
    --default-spacing: 20px;
    --cell-spacing: 10px;
    --side-panel-min-width: 60px;
    --accent-color: #45479d;
    --accent-color-25pc: #ced0de;
    /*FUI colors*/
    --red: #db2828;
    --orange: #f2711c;
    --yellow: #fbbd08;
    --olive: #b5cc18;
    --green: #21ba45;
    --teal: #00b5ad;
    --blue: #45479d;
    --violet: #7439c9;
    --purple: #a333c8;
    --pink: #e03997;
    --brown: #a5673f;
    --gray: #767676;
    /*end of FUI colors*/
    --black: #575755;
    /*FUI colors 25%*/
    --red-25pc: #db28283f;
    --orange-25pc: #f2711c3f;
    --yellow-25pc: #fbbd083f;
    --olive-25pc: #b5cc183f;
    --green-25pc: #21ba453f;
    --teal-25pc: #00b5ad3f;
    --blue-25pc: #45479d3f;
    --violet-25pc: #7439c93f;
    --purple-25pc: #a333c83f;
    --pink-25pc: #e039973f;
    --brown-25pc: #a5673f3f;
    --gray-25pc: #7676763f;
    /*end of FUI colors 25%*/
    --black-25pc: #5757553F;
    --menu-bg: #F0F0F0;
    --border-color: #e0e0e0;
    --border-radius: 4px;
    --body-bg-color: #f4f4f4;
    --text-color: #242424;
    --panel-bg-color: #fff;
    --odd-row-bg-color: #f5f5f5;
    --popup-bg-color: #fff;
    --switcher-bt-bg-color: var(--panel-bg-color);
    --menu-separator-color: #bbb;
}


/*override fa to map on the wanted style */
.fa {
    font-weight: 300;

    &.far,
    &.fa-regular {
        font-weight: 400;
    }

    &.fas,
    &.fa-solid {
        font-weight: 800;
    }
}

/* main menu stuff have to be extracted because they are used byt custom menu-item components */
.menu-item:hover {
    background: var(--gray-25pc);
    border-left-color: var(--accent-color);
}

.dx-drawer-opened {
    .menu-item {
        span {
            display: inline;
            vertical-align: middle;
        }
    }
}

div.menu-item,
a.menu-item {
    display: block;
    width: 100%;
    padding: 15px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text-color);
    text-decoration: none;
    border-left: 5px solid var(--menu-bg);

    i {
        font-size: 1.5em;
        vertical-align: middle;
    }

    span {
        display: none;
        padding-left: 15px;
    }

    &.menu-item.router-link-active {
        background: var(--body-bg-color);
        border-left-color: var(--accent-color);
        font-weight: 600;

        i {
            font-weight: 600;
            color: var(--accent-color);
        }
    }
}


/*spaced containers*/
/*TODO GMA rename to mv,etc. (for margin) & add pv,etc. (for padding)*/
.sv {
    margin: var(--default-spacing) 0;
}

.sh {
    margin: 0 var(--default-spacing);
}

.st {
    margin-top: var(--default-spacing);
}

.sr {
    margin-right: var(--default-spacing);
}

.sb {
    margin-bottom: var(--default-spacing);
}

.sl {
    margin-left: var(--default-spacing);
}


/* ------------------------ */

h4.sub-title {
    margin: 0;
    font-weight: 400;

    i {
        font-size: .8em
    }
}

/*missing in DX stylesheets */
.dx-popover-arrow::after {
    background: var(--popup-bg-color);
}

.panel {
    background: var(--panel-bg-color);
    border-radius: var(--border-radius);
    box-shadow: 0px 2px 5px #dbdbdb;
}

body.dx-viewport {
    background-color: var(--body-bg-color);
}

.dx-page-toolbar {
    background: none;
    padding: 10px 20px 10px 20px
}

.dx-toolbar {
    background: none;
}

.emphasis-box {
    border-radius: var(--border-radius);
    padding: var(--default-spacing);
    margin: 5px;
}

/*simple div to display an empty state*/
.empty-state {
    color: var(--gray);
    margin: 0;
}

/*most titles in toolbars, we don't want any margin*/
h4.page-title {
    margin: 0;
}

/*to allow the multiview (~= tab content) to scroll while in a flex container */
.dx-multiview-item-content {
    overflow-y: auto;
}

/*a simple container to put stats in. Stats should be evenly spaced and wrap */
.stat-container {
    display: flex;
    flex-direction: row;
    gap: var(--default-spacing);
    flex-wrap: wrap;
}

/* necessary for single-card layout like login page. 
    Needs to be registered globally instead of scoped to apply to inner elements*/
.with-footer>.dx-scrollable-wrapper>.dx-scrollable-container>.dx-scrollable-content {
    height: 100%;

    &>.dx-scrollview-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
}

/* mini cards are always shown the same way */
.mini-card-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--default-spacing);
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* simple wrapper to handle form item display when they are not in a form*/
.dx-field {
    display: block;
}

/* replace the dashboard background which is gray by default */
.dx-dashboard-control {
    background: var(--body-bg-color);
}

/* custom filter tab panel with vertical tabs design */
.tab-item {
    text-align: right;
    margin-right: 10px;

    >i {
        margin-right: 10px
    }
}

/* label same kind as FUI labels*/
.label {
    background-color: var(--accent-color);
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    text-transform: uppercase;
    font-size: .9em;
}

.label.outline {
    border: 1px solid var(--accent-color);
    background-color: unset;
    color: var(--accent-color);
}

.label.danger {
    background-color: var(--red);
}

.label.neutral {
    background-color: var(--gray);
}

.switcher-popover .dx-popover-arrow {
    display: none;
}

/* add some default padding on tab contents (especially for filters) */
.dx-tabpanel-container .dx-template-wrapper {
    padding: 5px 20px;
}

.matrix-cell .date-label {
    font-size: .8em;
}

/* override header filter icon to use FA icon instead (more visible) */
.dx-datagrid .dx-header-filter {
    font-family: "Font Awesome 6 Pro";
    font-size: 1em;
    position: absolute;
}

.dx-datagrid .dx-header-filter::before {
    /*fa-bars-filter*/
    content: "\f0b0";
}

.dx-datagrid .dx-header-filter:not(.dx-header-filter-empty),
.dx-datagrid-container .dx-header-filter:not(.dx-header-filter-empty) {
    color: #0f6cbd;
    font-weight: 900;
}
/*DX icons are designed much smaller than FA and it seems to misalign sort & filter when both are present
if I don't force their positions */
.dx-datagrid .dx-sort-down::before, .dx-datagrid .dx-sort-up::before {
  position: absolute;
}