:root {
    --default-spacing: 20px;
    --cell-spacing: 10px;
    --side-panel-min-width: 60px;
    --accent-color: #337ab7;
    --accent-color-25pc: #1E8BCD3F;
    --red: #ED3D3B;
    --green: #309048;
    --blue: #1E8BCD;
    --yellow: #fbe83b;
    --orange: #FB983B;
    --black: #575755;
    --gray: #A9A8A8;
    --red-25pc: #ED3D3B3F;
    --green-25pc: #3090483F;
    --blue-25pc: #1E8BCD3F;
    --yellow-25pc: #fbe83b3F;
    --orange-25pc: #FB983B3F;
    --black-25pc: #5757553F;
    --gray-25pc: #A9A8A83F;
    --menu-bg: #F0F0F0;
    --border-color: #e0e0e0;
    --border-radius: 5px;
    --body-bg-color: #f4f4f4;
    --text-color: #242424;
    --panel-bg-color: #fff;
    --odd-row-bg-color: #f5f5f5;
    --popup-bg-color: #fff;
}


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

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

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

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

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

.menu-item.router-link-active {
    background: var(--accent-color);
    color: white;
}

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


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

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

.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 {
    font-style: italic;
}

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

/*to have a shadow on the menu from the page*/
.layout-body .dx-drawer-content {
    box-shadow: -1px 0px 5px #bdbdbd;
}

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

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

.dx-field.readonly {
    :is(p) {
        border: 1px solid #e7e7e7;
        padding: 5px 10px;
        margin: 5px 0px;
    }
}

/*----------- JUST FOR GENERIC THEME ------------*/
.dx-theme-generic {

    /*header toolbar is too small for generic theme */
    .dx-toolbar.dx-toolbar-spaced {
        padding: 10px 0;
    }
}