/*
    NOTE: Any styles that are applied directly to DevExpress controls in this class library need to be defined in here.
          They cant be defined in inline (isolated) css for the component, as the compiler doesnt know to remap the unique css names for
          those components as they use their own custom CssClass property which they then reuse internally to generate the actual html.
    The class property on the dx component itself is ignored.
*/

.catalogue-page {
    width: 100%;
    min-width: 0;
    max-width: 1228px;
    margin: 0 auto;
}

.auth-loading-container {
    width: 100%;
    height: 100%;
}

.flex-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wip {
    background-color: darkorange;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    display: inline-flex;
}

.tip {
    width: 100%;
    background-color: lightyellow;
    color: black;
    font-weight: normal;
    font-size: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    display: inline-flex;
    border: 1px solid #EEEEEE;
}

.tip-icon {
    font-size: 1.25rem;
    padding-right: 1rem;
    color: steelblue;
}

/************************************************************************************
    User Widget and account button dropdown account menu layout and icons 
*************************************************************************************/
.userwidget {
    display: flex;
    flex-direction: row;
    padding-top: 2px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.userwidget-detail-container {
    display: flex;
    flex-direction: column;
}

.userwidget-photo-container {
    display: flex;
}

    .userwidget-photo-container > .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover {
        background-color: #EFEFEF !important;
        color: green;
    }

.userwidget-textitem {
    color: black;
    padding-right: 0.5rem;
}

.userwidget-username {
    font-size: 1.25em;
    text-align: end;
    height: 24px;
}

.userwidget-orgname {
    font-size: 1em;
    text-align: end;
    height: 24px;
}

.userwidget-button {
    width: 52px;
    height: 52px;
}

.userwidget-photo {
    width: 48px;
    height: 48px;
}

.userwidget-nophoto {
    border-style: solid;
    border-width: 1px;
    border-color: var(--bs-primary);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    background: var(--bs-primary-border-subtle);
    display: flex;
    justify-content: center;
    align-items: center;
}

.userwidget-nophoto-initials {
    color: var(--bs-primary);
    font-size: x-large;
    font-weight: bold;
}

/* account dropdown account menu layout and icons */
.menu-account {
    height: 3rem;
    font-size: 1rem;
}

.menu-icon {
    width: 1rem;
    height: 1rem;
    display: block;
    margin: 0.5rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.menu-icon-logout {
    mask-image: url("../images/logout.svg");
    -webkit-mask-image: url("../images/logout.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.menu-icon-remap {
    mask-image: url("../images/edit.svg");
    -webkit-mask-image: url("../images/edit.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.menu-icon-settings {
    mask-image: url("../images/settings.svg");
    -webkit-mask-image: url("../images/settings.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* this is the outer container when you need a full parent container loading overlay */
.overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* this should be applied to the inner div which is being overlayed (eg a loading screen) */
.overlay {
    position: absolute;
    margin: 0px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFFFFFF0;
    z-index: 9999;
    width: 100%;
    height: 100%;
}

.loading-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem;
}

.floatingbutton-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.floatingbutton {
    min-width: 56px;
    max-height: 56px;
    background-color: #03a9f4;
    color: #fff;
    overflow: visible;
    border-radius: 28px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.2);
}

.filterpanel-sidebar-container {
    min-width: 400px;
    max-width: 400px;
    height: 100%;
    border-left: solid;
    border-left-width: 2px;
    border-left-color: var(--pe-primary);
    overflow: auto;
}

.filterpanel-sidebar-popupheader {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 12px;
    background: #1e2b43;
    color: #e4ecf7;
}

.filterpanel-sidebar-toolbar-btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(218 231 250 / 13%);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.filterpanel-sidebar-toolbar-btn-close svg {
    width: 22px;
    height: 22px;
}

.filterpanel-sidebar-toolbar-btn-close:hover {
    background: #293b57;
}

.filterpanel-sidebar-toolbar-btn-close:focus-visible {
    outline: 2px solid #9bc3f4;
    outline-offset: 2px;
}

.filterpanel-sidebar-toolbar-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.filterpanel-txnaccordion {
    --dxbl-accordion-group-item-content-padding-x: 0.25rem !important;
}

    .filterpanel-txnaccordion > .dxbl-accordion-group-header {
        padding-right: 0.25rem !important;
    }

.filterpanel-txnaccordion-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    flex: 1 1 100%;
    font-weight: 400;
    --rs-color-primary: var(--pe-primary);
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

.filterpanel-txnaccordion-badge {
    display: inline-block;
    height: 1.5rem;
    width: 1.75rem;
    padding: 0.125rem 0;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1;
    align-content: center;
    background-color: var(--pe-badge-bg);
    color: var(--bs-white);
}

.filterpanel-txnaccordion-content {
    display: flex;
    flex-flow: column nowrap;
    line-height: 1;
    width: 100%;
}

.filterpanel-txnaccordion-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rs-color-primary);
}

.filter-btn-group {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.filter-btn-apply {
    font-size: 1.25rem;
    padding: 1rem;
}

.filter-btn-date-single {
    width: 100%; /* use 100% width so it auto sizes to max inside flex box */
    height: 32px;
    font-size: 14px;
    --dxbl-btn-line-height: 1;
    margin: 2px 2px 2px 2px;
    padding: 0px;
}

.filter-btn-date-double {
    width: 256px;
    height: 32px;
    margin: 2px 0px 2px 0px;
    padding: 0px;
}

.filter-btn-active {
    background-color: pink;
}

.filter-customdate {
    width: 100%;
    height: 32px;
    margin: 2px 0px 2px 0px;
    padding: 0px;
    display: flex;
}

    .filter-customdate label {
        width: 100px;
        align-self: center;
    }

.filter-customdate-date {
    width: 280px;
}

.filter-datepanel-calendar {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.filter-datepanel-custom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 4px;
    padding-right: 2px;
}

.filter-datepanel-firstdayofweek {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.25rem;
    padding-left: 4px;
    padding-right: 2px;
}

.filter-firstdayofweek-dropdown {
    width: 220px;
}

.filter-date-time-container {
    width: 100%;
}

.filter-timepanel {
    width: 100%;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #d8d8d8;
}

.filter-timepanel-enable {
    width: 100%;
}

.filter-timepanel-controls {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    padding-left: 4px;
    padding-right: 2px;
}

.filter-timepanel-field {
    width: 100%;
    min-height: 32px;
    margin: 2px 0px 2px 0px;
    display: flex;
}

.filter-timepanel-field label {
    width: 100px;
    align-self: center;
}

.filter-timepanel-dropdown {
    width: 280px;
}

.filter-timepanel-validation {
    margin-top: 0.25rem;
    color: red;
    font-size: 0.875rem;
}

.filter-timepanel-message {
    margin-top: 0.25rem;
    color: gray;
    font-size: 0.875rem;
}

.filter-panel-content {
    width: 100%;
}

.filter-accordion-content {
    margin: 8px 8px 8px 8px;
}

.filter-accordion-header {
    margin-bottom: 2px;
}

.filter-accordion-header-content {
    height: 30px;
    gap: 8px;
}

.filter-accordion-header-label {
    margin: 0px;
    padding: 0px;
}

.filter-nestedaccordion-header {
    margin-bottom: 2px;
}

.filter-nestedaccordion-header-content {
    height: 30px;
}

.filter-nestedaccordion-header-label {
    padding-right: 1rem;
}

.filter-template-dropdown {
    background: var(--pe-primary);
    color: var(--bs-white);
}

.filter-flex-spacebetween {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
}

.filter-flex-spacebetween label {
    align-self: center;
}

.filter-flex-gap {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 0.5rem;
}

.filter-aggbreakdown1 {
    margin-top: 0.25rem;
    margin-left: 0rem;
    width: 18rem;
}

.filter-aggbreakdown2 {
    margin-top: 0.25rem;
    margin-left: 1rem;
    width: 17rem;
}

.filter-aggbreakdown3 {
    margin-top: 0.25rem;
    margin-left: 2rem;
    width: 16rem;
}

.filter-aggbreakdown4 {
    margin-top: 0.25rem;
    margin-left: 3rem;
    width: 15rem;
}

.filter-aggbreakdown-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-aggbreakdown-limit {
    margin-top: 0.25rem;
    margin-left: 0rem;
    width: 18rem;
}

.filter-aggbreakdown-sortcolumn {
    margin-top: 0.25rem;
    margin-left: 1rem;
    width: 17rem;
}

.filter-btn-sort {
    width: 28px;
    height: 28px;
    font-size: 18px;
}

.sort-disabled {
    color: #D0D0D0;
}

.filter-nodes-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.filter-nodes-icon-outlet {
    background-image: url("../images/outlet.svg");
}

.filter-nodes-icon-outletsimple {
    background-image: url("../images/outlet_simple.svg");
}

.filter-valuerange-container {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.4rem;
}

.filter-valuerange-field {
    font-weight: bold;
    min-width: 64px;
}

.filter-valuerange-type {
    min-width: 100px;
    max-width: 100px;
}

.filter-valuerange-label {
    font-weight: normal;
}

.filter-valuerange-value {
    min-width: 50px;
}

.filter-valuerange-valuetext{
    text-align: right;
}

/* This is the base styling applied to all checkbox items within the Generic Tax Box component*/
.tagbox-dropdown-item-template {
    display: flex;
    align-items: center;
}

/* This is the base styling applied to all checkbox items within the Generic Tax Box component*/
.tagbox-dropdown-item-template-child {
    margin-left: 1.5rem;
}

.tagbox-dropdown-label {
    width: 100%;
    margin-left: 0.5rem;
}

/* This is the styling for a two tier parent checkbox item within the Generic Tax Box component*/
.tagbox-dropdown-label-twotier-parent {
    font-weight: bold;
    border-bottom: solid 1px black;
}

/* This is the styling for a two tier child checkbox item within the Generic Tax Box component*/
.tagbox-dropdown-label-twotier-child {
    font-weight: normal;
}

.btn {
}

.btn-icon {
    height: 24px;
    width: 24px;
    background-color: currentColor;
}

.btn-icon-compact {
    height: 16px;
    width: 16px;
    background-color: currentColor;
    margin: 0px;
    padding: 0px;
}

.btn-icon-small {
    height: 16px;
    width: 16px;
    background-color: currentColor;
}

.btn-icon-favourite {
    -webkit-mask-image: url("../images/star.svg");
    mask-image: url("../images/star.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-refresh {
    -webkit-mask-image: url("../images/refresh.svg");
    mask-image: url("../images/refresh.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-edit {
    -webkit-mask-image: url("../images/edit.svg");
    mask-image: url("../images/edit.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-delete {
    -webkit-mask-image: url("../images/delete.svg");
    mask-image: url("../images/delete.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-drawer {
    -webkit-mask-image: url("../images/drawer.svg");
    mask-image: url("../images/drawer.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-email {
    -webkit-mask-image: url("../images/email.svg");
    mask-image: url("../images/email.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-options {
    -webkit-mask-image: url("../images/settings.svg");
    mask-image: url("../images/settings.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-rename {
    -webkit-mask-image: url("../images/rename.svg");
    mask-image: url("../images/rename.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-restore {
    -webkit-mask-image: url("../images/restore.svg");
    mask-image: url("../images/restore.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-save {
    -webkit-mask-image: url("../images/save.svg");
    mask-image: url("../images/save.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-search {
    -webkit-mask-image: url("../images/search.svg");
    mask-image: url("../images/search.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-icon-viewreceipt {
    -webkit-mask-image: url("../images/viewreceipt.svg");
    mask-image: url("../images/viewreceipt.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.aggvalue h1 {
    font-size: 0.875em;
    text-align: center;
    margin: 0;
}

.aggvalue h2 {
    font-size: 1.5em;
    text-align: center;
    margin: 0;
}

    .aggvalue h2.loading {
        font-size: 1em;
        text-align: center;
        margin: 0;
    }

.aggvaluegroup {
    text-align: center;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

    .aggvaluegroup > h1 {
        font-size: 0.875em;
        text-align: center;
        margin: 0;
        border-bottom: solid;
        border-bottom-color: lightgray
    }

    .aggvaluegroup .aggvalue {
        display: inline-block;
        margin: 0.3rem 1rem;
        position: relative;
    }

.aggvalue-cmp {
}

.aggvalue-larger {
    color: #9AB57E;
    fill: #9AB57E;
}

.aggvalue-smaller {
    color: #E55253;
    fill: #E55253;
}

.container-flex-spacebetween {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
}

.container-flex-end {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: end;
}

.pagetitle {
    min-width: 256px;
    font-size: 2rem;
    font-weight: bolder;
    text-align: left;
    border-bottom: solid;
    border-bottom-color: var(--pe-primary);
    border-width: 0.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pagetitle-text {
    width: 100%;
}

.pagetitle-busy {
    width: 32px;
    height: 32px;
}

.sectiontitle {
    max-width: 512px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    border-bottom: solid;
    border-bottom-color: var(--bs-secondary);
    border-width: 0.1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: auto;
}

.sectiontitle-text {
    width: 100%;
}

.sectiontitle-busy {
    width: 32px;
    height: 32px;
}

.subsectiontitle {
    max-width: 512px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    border-bottom: solid;
    border-bottom-color: var(--bs-secondary);
    border-width: 0.1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: auto;
}

.subsectiontitle-text {
    width: 100%;
}

.widget-nested-donut {
    width: 100%;
    height: 100%;
}

/* This CSS enforces a min chart height of 640px so the nested donut doesnt get squashed too much on mobile displays where there are alot of legend entries */
.chart-nested-donut-minheight640 {
    min-height: 640px;
}

.tb-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-search {
    mask-image: url("../images/search.svg");
    -webkit-mask-image: url("../images/search.svg");
}

.tb-icon-settings {
    mask-image: url("../images/settings.svg");
    -webkit-mask-image: url("../images/settings.svg");
}

.tb-icon-refresh {
    mask-image: url("../images/refresh.svg");
    -webkit-mask-image: url("../images/refresh.svg");
}

/* dashboard header css */
.dashboard-header {
    width: 100%;
    max-width: 100rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0 auto 1rem;
    padding: 1rem 1.25rem;
    overflow-wrap: anywhere;
}

.dashboard-header-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--bs-black);
    width: 100%;
    text-align: center;
}

.dashboard-header-subtitle {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.dashboard-header-divider {
    font-size: 8px;
    color: lightgray;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.dashboard-header-currency {
    font-size: 1rem;
    font-weight: normal;
    color: var(--bs-black);
    text-align: center;
    min-width: 4rem;
}

.dashboard-header-checksum {
    font-size: 0.75rem;
    font-weight: normal;
    color: black;
    text-align: center;
    min-width: 4rem;
}

.dashboard-header-datetime {
    font-size: 0.75rem;
    font-weight: normal;
    color: steelblue;
    text-align: center;
    min-width: 4rem;
}

.dashboard-header-filterstring {
    width: 100%;
    font-size: 0.75rem;
    font-weight: normal;
    color: black;
    text-align: center;
    min-width: 4rem;
}

/* This is a container to hold two widgets side by side. When the width gets too small it will instead wrap them. Each widget will be given half the available width*/
.dashboard-horizonal-container2w {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .dashboard-horizonal-container2w > .dashboard-widget-container {
        min-width: 300px;           /* widgets cant shrink smaller than 300px, then they wrap */
        flex: 1 1 45%;              /* take up 45% width, but shrink/grow as needed */
        box-sizing: border-box;
        margin-left: 1rem;
        margin-right: 1rem;
    }

/* This is a container to hold two widgets side by side. When the width gets too small it will instead wrap them. Each widget will be given half the available width*/
.dashboard-horizonal-container3w {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .dashboard-horizonal-container3w > .dashboard-widget-container {
        min-width: 300px; /* widgets cant shrink smaller than 300px, then they wrap */
        flex: 1 1 30%; /* take up 30% width, but shrink/grow as needed */
        box-sizing: border-box;
        margin-left: 1rem;
        margin-right: 1rem;
    }

/* margin around dashboard widgets */
.dashboard-widget-container {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
}

.tiled {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
}

/* outer container for the entire node summary dashboard */
.dashboard-nodesummary {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
}

.dashboard-nodesummary > h1 {
    width: 100%;
    text-align: center;
}

.dashboard-nodesummary-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--bs-black);
    width: 100%;
    text-align: center;
    background: white;
}

    .dashboard-nodesummary-title > h2 {
        font-size: 1rem;
        font-weight: normal;
        color: var(--bs-gray);
    }

/* container for a single node summary tile instance */
.dashboard-nodesummarytile {
    margin: 1rem;
    background-color: var(--bs-info-border-subtle);
    border: black 2px solid;
    border-radius: 4px;
}

.dashboard-nodesummarytile-content {
    color: var(--bs-white);
    max-width: 16rem;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dashboard-nodesummarytile-title {
    font-size: 1rem;
    font-weight: bold;
    background: var(--bs-info);
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.dashboard-nodesummarytile-value {
    font-size: 2rem;
    padding: 1rem;
}

.dashboard-breakdown-visualiser {
    width: 100%;
    height: 80%
}

.dashboard-nesteddonut-breakdownselector-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* For this particular filter, we need to switch to column flex once size gets below 530px*/
@media (max-width: 530px) {
    .dashboard-nesteddonut-breakdownselector-container {
        flex-direction: column;
    }
}

.dashboard-nesteddonut-breakdownselector {
    display: flex;
    align-items: center;
    margin: 0.2rem;
}

    .dashboard-nesteddonut-breakdownselector label {
        text-align: end;
        padding-right: 1rem;
        width: 50px;
        height: 100%;
    }

/* ------------------------------------------------------------------------------------------------------------------------
    Template controls CSS 
   ------------------------------------------------------------------------------------------------------------------------ */
.template-panel {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.template-panel-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

.template-panel-name {
    width: 100%;
}

.template-panel-shared {
    width: 100%;
    padding-top: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------------
    Favourite controls CSS 
   ------------------------------------------------------------------------------------------------------------------------ */
.favourite-panel {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.favourite-panel-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

.favourite-panel-name {
    width: 100%;
}

.favourite-panel-shared {
    width: 100%;
    padding-top: 8px;
}

.favourite-btn-edit {
    color: lightsteelblue;
}

/* ------------------------------------------------------------------------------------------------------------------------
    Schedule controls CSS 
   ------------------------------------------------------------------------------------------------------------------------ */

.schedule-panel {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 12px;
}

.schedule-panel-when {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

.schedule-panel-date {
    width: 128px;
}

.schedule-panel-time {
    width: 112px;
}

.schedule-panel-timezone {
    width: 256px;
}

.schedule-panel-locale {
    width: 256px;
}

/* ------------------------------------------------------------------------------------------------------------------------
    Non Sale Activity Journal CSS 
   ------------------------------------------------------------------------------------------------------------------------ */

.nsajournal-txndetail {
    /*background-color: #333 !important;*/
    padding: 4px !important;
}

.nsajournal-column-amount {
    background-color: rgb(246, 243, 212) !important;
}

.nsajournal-row-void {
    color: red !important;
    background-color: rgba(209, 75, 74, 0.15) !important; /* redish with transparency*/
}

.nsagrid {
    height: 100%;
}

.nsa-red {
    color: red !important;
}

.nsaview {
    width: 100%;
    display: flex;
    justify-content: center;
}

.nsaview-container {
    background-color: #333;
    padding: 12px !important;
    max-width: 800px;
}

.nsaview-header {
    background-color: #333;
    margin-bottom: 10px;
}

.nsaview-header-group {
    display: inline-block;
}

    .nsaview-header-group .nsaview-header-item {
        background-color: #4f4f4f;
        display: inline-block;
        margin: 4px;
        padding: 5px 10px;
        text-align: center;
    }

        .nsaview-header-group .nsaview-header-item label {
            color: #fff;
            font-size: 1em;
        }

        .nsaview-header-group .nsaview-header-item div {
            color: #ff9365;
            font-size: 1.125em;
        }

.nsaview-header-bar {
    padding-top: 0.25rem;
    padding-left: 0.5rem;
    color: #ffde8f;
    display: inline-block;
    min-width: 350px;
    width: 100%;
}

.txnjournal-txndetail {
    /*background-color: #333 !important;*/
    padding: 4px !important;
}

.txnjournal-column-amount {
    background-color: rgb(246, 243, 212) !important;
}

.txnjournal-row-void {
    color: red !important;
    background-color: rgb(255, 244, 244) !important; /* redish with transparency*/
}

/* used to define default LIGHT background and font styling for the audit modification lines in the txn journal (used for the item modifications) */
.txnjournal-modification-light {
    font-weight: normal;
    color: darkgray;
}

/* used to define default DARK background and font styling for the audit modification lines in the txn journal (used for the order modifications in the dark header) */
.txnjournal-modification-dark {
    font-weight: normal;
    color: lightyellow;
}

.txnjournal-modification-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

.txnjournal-modification-descriptions-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

.txnjournal-modification-line {

}

.txnjournal-modification-description {
    font-weight: lighter;
    color: blue;
}

.txnjournal-adjeffects-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
}

.txnjournal-adjeffects-line {
    padding-left: 1rem;
    color: darkgoldenrod;
    font-style: italic;
}

.stgrid {
    height: 100%;
}

.stview {
    width: 100%;
    display: flex;
    justify-content: center;
}

.stview-container {
    background-color: #333;
    padding: 12px !important;
    max-width: 800px;
}

.stview-table {
    table-layout: fixed; 
    overflow: hidden; 
    min-width: 540px; 
    margin-bottom: 8px;
}

.stview-header {
    background-color: #333;
    margin-bottom: 10px;
}

.stview-header-group {
    display: inline-block;
}

    .stview-header-group .stview-header-item {
        background-color: #4f4f4f;
        display: inline-block;
        margin: 4px;
        padding: 5px 10px;
        text-align: center;
    }

    .stview-header-group .stview-header-item label {
        color: #fff;
        font-size: 1em;
    }

    .stview-header-group .stview-header-item div {
        color: #ff9365;
        font-size: 1.125em;
    }

.stview-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.stview-toolbar-item {
    margin-left: 1rem;
}

.stview-header-bar {
    padding-top: 0.25rem;
    padding-left: 0.5rem;
    color: #ffde8f;
    display: inline-block;
    min-width: 350px;
    width: 100%;
}

.stview-itemcount {
    font-weight: bold;
}

.stview-subtotal {
    font-size: 1rem;
    font-weight: bold;
}

.stview-total {
    font-size: 1.25rem;
    font-weight: bold;
}

.stview-voided {
    color: red !important;
}

.stiview-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 2px solid rgb(0, 0, 0);
    text-align: left;
}

.stiview-item-voided {
    background-color: lightsalmon !important;
}

.stiview-right {
    text-align: right;
}

.stiview-btn-adjeffects {
    height: 20px;
    width: 20px;
    color: #333333;
    background-color: white;
    border-color: lightgray;
}

/* added when the audit view is enabled, lets us make item lines more prominent relative to audit lines */
.sti-audit {
    font-weight: bold !important;
}

.sti-amount {
    background-color: rgb(246, 243, 212) !important;
}

.sti-userstatusline {
    color: white !important;
    background-color: rgb(88, 165, 209) !important; /* bluish color */
}

.sti-receiptprintedline {
    color: white !important;
    background-color: rgb(209, 88, 160) !important; /* pink/purple */
}

.sti-transactionvoidline {
    color: white !important;
    background-color: rgb(209, 75, 74) !important; /* redish */
}

.sti-orderreadyline {
    color: white !important;
    background-color: green !important;
}

.sti-reservationseatedline {
    color: white !important;
    background-color: green !important;
}

.sti-adjustment {
    color: purple !important;
}

.sti-child {
    padding-left: 2rem !important;
}

.sti-black {
    color: black !important;
}

.sti-blue {
    color: blue !important;
}

.sti-darkorange {
    color: darkorange !important;
}

.sti-darkorchid {
    color: darkorchid !important;
}

.sti-darkred {
    color: darkred !important;
}

.sti-lightgray {
    color: lightgray !important;
}

.sti-red {
    color: red !important;
}

.sti-strikethrough {
    text-decoration: line-through !important;
}

/* added when the audit view is enabled, lets us make payment lines more prominent relative to audit lines */
.stp-audit {
    font-weight: bold !important;
}

.stpview-payment {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 2px solid rgb(0, 0, 0);
    text-align: left;
    background-color: #EEFFEE !important;
}

.stpview-payment-voided {
    background-color: lightsalmon !important;
}

.stp-datetimepaid {
    text-align: right;
}

.stp-terminalid {
    text-align: left;
}

.stp-username {
    text-align: left;
}

.stp-description {
    text-align: left;
    font-weight: bold;
    padding-left: 1rem !important;
}

.stp-amount {
    text-align: right;
    font-weight: bold;
    background-color: rgb(212, 240, 212) !important;
}

.stp-extra-description {
    text-align: right;
    font-weight: normal;
    font-style: italic;
}

.stp-extra-amount {
    font-weight: normal;
    font-style: italic;
}

.stp-strikethrough {
    text-decoration: line-through !important;
    font-weight: normal !important;
}

.sttax {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 2px solid rgb(0, 0, 0);
    text-align: left;
}

.sttax-voided {
    background-color: lightsalmon !important;
}

.sttax-inclusive {
    font-style: italic;
}

.sttax-description {
    text-align: right;
    font-weight: normal;
}

.sttax-amount {
    text-align: right;
    font-weight: normal;
    background-color: rgb(246, 243, 212) !important;
}

.sttag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    color: #9932cc !important;
}

.sttag-voided {
    background-color: lightsalmon !important;
}

.sttag-description {
    text-align: center;
    font-weight: bold;
}

.sttag-cancelled {
    color: gray !important;
    text-decoration: line-through;
}

.zjournal-txndetail {
    /*background-color: #333 !important;*/
    padding: 4px !important;
}

.zjournal-column-amount {
    background-color: rgb(246, 243, 212) !important;
}

.zjournal-row-open {
    color: blue !important;
}

.zgrid {
    height: 100%;
}

.z-red {
    color: red !important;
}

.zview {
    width: 100%;
    display: flex;
    justify-content: center;
}

.zview-container {
    background-color: white;
    padding: 12px !important;
    max-width: 512px;
    width: 100%;
    border: solid 1px;
}

.zview-header {
    background-color: white;
    color: black;
    margin-bottom: 10px;
}

    .zview-header .zview-header-title {
        text-align: center;
        font-size: 2rem;
        font-weight: bold;
    }

    .zview-header .zview-header-subtitle {
        text-align: center;
        font-size: 1.25rem;
    }

    .zview-header .zview-header-item {
        font-size: 1rem;
    }

.zview-header-bar {
    padding-top: 0.25rem;
    padding-left: 0.5rem;
    color: #ffde8f;
    display: inline-block;
    min-width: 350px;
    width: 100%;
}

.zview-footer {
    background-color: white;
    color: black;
    margin-bottom: 10px;
}

    .zview-footer .zview-footer-items {
        font-weight: bold;
        font-size: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.zview-tableheader-section {
    position: relative;
    padding: 5px;
    background-color: black !important;
    color: white !important;
    font-weight: bold;
}

.zview-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.zview-userdetail-description {
    padding-left: 2rem !important;
}

.zview-child {
    font-style: italic !important;
}

.zview-child-description {
    padding-left: 2rem !important;
}

.zview-total {
    color: steelblue !important;
    font-weight: bold !important;
}

.zview-right {
    text-align: right !important;
}

/* ------------------------------------------------------------------------------------------------------------------------
    Dashboard Viewer CSS 
   ------------------------------------------------------------------------------------------------------------------------ */

.dashboardviewerpage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.dashboardviewerpage-content {
    width: 100%;
    height: 100%;
    padding-bottom: 16px;
}

.dashboardviewerpage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "toolbar filter" "dashboard filter";
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.dashboardviewerpage-toolbar {
    grid-area: toolbar;
}

.dashboardviewerpage-filter {
    grid-area: filter;
    min-height: 0;
}

.dashboardviewerpage-dashboard {
    grid-area: dashboard;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1279px) {
    .dashboardviewerpage-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "toolbar" "dashboard";
    }

    .dashboardviewerpage-filter {
        display: contents;
    }

    .dashboardviewerpage-filter .filterpanel-sidebar-popup {
        grid-area: dashboard;
        top: 0;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------
    Report Viewer CSS 
   ------------------------------------------------------------------------------------------------------------------------ */

.reportviewerpage {
    height: 100%;
}

.reportviewerpage-report {
    height: 100%;
    padding-bottom: 16px;
}

.reportviewerpage-layout {
    height: 100%;
}

.reportviewerpage-toolbar {
}

/* ------------------------------------------------------------------------------------------------------------------------
    Report/Dashboard Selector CSS 
   ------------------------------------------------------------------------------------------------------------------------ */
.rs-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    flex: 1 1 100%;
    font-weight: 400;
    --rs-color-primary: var(--pe-primary);
}

.rs-sub-header {
    font-size: 0.75rem;
    padding: 0.25rem 0;
}

.rs-badge {
    display: inline-block;
    height: 1.5rem;
    width: 1.75rem;
    padding: 0.125rem 0;
    margin-right: 0.5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1;
    align-content: center;
}

.rs-badge-primary {
    background-color: var(--pe-badge-bg);
    color: var(--bs-white);
}

.rs-info {
    display: flex;
    flex-flow: column nowrap;
    line-height: 1;
    width: 100%;
}

.rs-info-alt {
    background-color: azure;
}

.rs-deleted {
    background-color: rgba(245, 198, 203, 0.5);
}

.rs-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rs-color-primary);
}

.rs-sub-title {
}

    .rs-sub-title:not(:empty) {
        margin-top: 0.25rem;
    }

.rs-shared-icon-container {
    color: lightsteelblue;
    padding-left: 6px;
}

.rs-shared-description {
    display: inline-block;
    font-style: italic;
    color: lightgray;
    font-size: smaller;
}

.rs-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-right: 0.5rem;
}

.rs-icon-report {
    background-color: var(--rs-color-primary);
    -webkit-mask-image: url("/images/reports.svg");
    mask-image: url("/images/reports.svg");
}

.rs-icon-dashboard {
    background-color: var(--rs-color-primary);
    -webkit-mask-image: url("/images/dashboards.svg");
    mask-image: url("/images/dashboards.svg");
}

.rs-details {
    text-align: center;
}

.rs-details-btn-ctr {
    margin-top: 1.5rem;
}

    .rs-details-btn-ctr > * {
        display: block;
        width: 100%;
    }

    .rs-details-btn-ctr > :not(:first-child) {
        margin-top: 0.5rem;
    }

.rs-template-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: steelblue;
    border-top: 1px lightgray solid;
}

.rs-template-item {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    width: 100%;
}

.rs-template-dropdown {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 95%;
    max-width: 512px;
}

.rs-switch-showdeleted {
    --pe-switch-on-hover: pink !important;
    --pe-switch-on: red !important;
    /*--pe-switch-off: green !important;*/
}

.rs-nofavourites {
    margin-top: 0rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    width: 100%;
}

/* ------------------------------------------------------------------------------------------------------------------------
    Error notifications CSS 
   ------------------------------------------------------------------------------------------------------------------------ */
.error-container {
    display: flex;
    padding: 1rem;
    margin: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1rem;
    align-content: center;
    align-items: center;
    background-color: darkred;
    color: white;
}

.error-color-warning {
    background-color: darkorange;
}

.error-message {
    display: flex;
    flex-direction: column;
}

.error-message-title {
    font-weight: bold;
}

.error-message-exception {
    font-weight: normal;
    font-style: italic;
}

.error-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    margin-right: 0.5rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

.error-icon-exclamation {
    -webkit-mask-image: url("../images/exclamation.svg");
    mask-image: url("../images/exclamation.svg");
}

.error-icon-warning {
    -webkit-mask-image: url("../images/warning.svg");
    mask-image: url("../images/warning.svg");
}

.error-icon-offline {
    -webkit-mask-image: url("../images/offline.svg");
    mask-image: url("../images/offline.svg");
}

/* ------------------------------------------------------------------------------------------------------------------------
    Filter Panel custom error notifications CSS 
   ------------------------------------------------------------------------------------------------------------------------ */
.filterpanel-error-container {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    margin: 0.25rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1rem;
    align-content: center;
    align-items: center;
    background-color: darkred;
    color: white;
}

.filterpanel-error-color-warning {
    background-color: darkorange;
}

.filterpanel-error-message {
    display: flex;
    flex-direction: column;
}

.filterpanel-error-message-title {
    font-size: 0.85rem;
    font-weight: bold;
}

.filterpanel-error-message-exception {
    font-size: 0.75rem;
    font-weight: normal;
    font-style: italic;
}

.filterpanel-error-retrybtn {
    margin:0.5rem;
}

.filterpanel-error-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-right: 0.5rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

.filterpanel-filterinstance {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.filterpanel-edittemplate-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.filterpanel-filtertitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.filterpanel-filtertitle-underline {
    border-bottom: 1px solid grey;
}

.filterpanel-filtertitle-readonly {
    color: gray;
}

.filterpanel-switchlabel-include {
    color: green;
}

.filterpanel-switchlabel-exclude {
    color: red;
}

/*
.filterpanel-checkbox-exclude div input {
    --dxbl-checkbox-switch-checked-bg: red !important;
    --dxbl-checkbox-switch-checked-hover-bg: red !important;
}
*/

.filterpanel-switch-includeexclude {
    --pe-switch-on-hover: pink !important;
    --pe-switch-on: red !important;
    --pe-switch-off: green !important;
}

.filterpanel-switch-readonly {
    --pe-switch-on-hover: darkred !important;
    --pe-switch-on: #BB8888 !important;
    --pe-switch-off: #88AA88 !important;
}

/* Make the read only checkbox inside the tagbox not look disabled */
.filterpanel-tagbox-checkbox {
    --dxbl-checkbox-check-element-readonly-border-color: black !important;
}

.filterpanel-shared-container {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.filterpanel-shared-icon-container {
    color: lightsteelblue;
}

.filterpanel-shared-description {
    display: inline-block;
    font-style: italic;
    color: gray;
    font-size: smaller;
    font-weight: 600;
    padding-left: 4px;
}

.search-panel-options {
    margin-top: 0.5rem;
}

.search-panel-title {
    font-weight: bold;
}

.search-panel-value {
}

/* ------------------------------------------------------------------------------------------------------------------------
    Landing Summary
   ------------------------------------------------------------------------------------------------------------------------ */
.landingsummary-title {
    background-color: rgb(238, 238, 238);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid rgb(200, 200, 200);
}

    .landingsummary-title h2 {
        color: rgb(255, 114, 0);
        font-weight: bold;
    }

    .landingsummary-title h3 {
        color: rgb(101, 101, 101);
        font-weight: bold;
    }

.landingsummary-footer {
    background-color: rgb(238, 238, 238);
    padding: 8px;
    border-top: 1px solid rgb(200, 200, 200);
    display: flex;
    justify-content: center;
}

.landingsummary-tile-container {
    padding: 1rem;
}

.landingsummary-tile {
    width: 500px;
    margin-left: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

    .landingsummary-tile img:hover {
        box-shadow: 0 4px 16px 0 rgba(255,140,0,0.28);
        border: 2px solid #ff980088 !important;
        transform: translateY(-2px) scale(1.03);
    }

.remap-tile-container {
    padding: 1rem;
}

.remap-tile {
    width: 256px;
    height: 200px;
    border: black 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: 2rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

    .remap-tile:hover {
        cursor: pointer;
        box-shadow: 0 4px 16px 0 rgba(255,140,0,0.28);
        border: 2px solid #ff980088 !important;
        transform: translateY(-2px) scale(1.03);
    }

.remap-container {
    width: 100%;
    height: 100%;
    padding: 16px;
}

.remap-grid-container {
    height: calc(100% - 128px);
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
}

.remap-grid-toolbar-save,
.remap-grid-toolbar-cancel {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    height: 16px;
    width: 16px;
    opacity: 0.7;
}

.remap-grid-grouprow {
    color: steelblue;
    font-weight: bold;
}

.remap-grid-modified-cell {
    background-color: #28a74533 !important;
}

.remap-grid-readonly-cell {
    background-color: #F5F5F5 !important;
    font-weight: 600 !important;
}

/* ------------------------------------------------------------------------------------------------------------------------
    Formatted Total Tile CSS
   ------------------------------------------------------------------------------------------------------------------------ */
.fttile-section {
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 1rem;
    max-width: 360px;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem
}

.fttile-table {
}

.fttile-tableheader-section {
}

.fttile-row-label {
    color: black;
    font-weight: normal;
}

.fttile-row-value {
    color: steelblue;
    font-weight: bold;
    text-align: right;
}

/* ------------------------------------------------------------------------------------------------------------------------
    custom hack CSS 
   ------------------------------------------------------------------------------------------------------------------------ */
/* https://supportcenter.devexpress.com/ticket/details/t982917/blazor-dxmenu-separator-between-menu-items */
.dxmenu-separator {
    overflow: hidden;
    background-color: currentColor;
    opacity: 0.4;
    width: 100%;
    height: 1px;
}

/* https://supportcenter.devexpress.com/ticket/details/t957701/combobox-for-blazor-how-to-define-the-dropdown-height */
/* variation of the above to increase dropdown size of tag boxes*/
.dxbl-dropdown {
    max-height: 500px !important;
}

    .dxbl-dropdown .dxbl-listbox {
        max-height: 500px !important;
    }

/* ------------------------------------------------------------------------------------------------------------------------
    Media queries CSS - these need to be AFTER the original css so they have preference
   ------------------------------------------------------------------------------------------------------------------------ */

@media (min-width: 1280px) {
    .filterpanel-sidebar {
        height: 100%;
    }

    /* hide filter panel header when not in mobile view */
    .filterpanel-sidebar-popupheader {
        display: none !important;
    }

    /* hide filter button in toolbar when not in mobile view */
    .toolbaritem-filters {
        display: none !important;
    }
}

/* Switch to compact view at 1279px and below */
@media (max-width: 1279px) {
    .filterpanel-sidebar {
        display: none !important;
    }

    .filterpanel-sidebar-popup {
        display: block !important;
        position: absolute;
        overflow: hidden;
        right: 0;
        z-index: 99;
        background: #1e2b43;
        top: 52px;
        bottom: 0;
        max-width: 100%;
        border-radius: 12px 0 0 12px;
        box-shadow: -8px 0 32px rgb(15 23 42 / 20%);
    }

    .filterpanel-sidebar-popup .filterpanel-sidebar-container {
        box-sizing: border-box;
        width: min(440px, 100vw);
        min-width: 0;
        max-width: 100%;
        padding: 0 12px 24px;
        border: 0;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #a8b9d1 #1e2b43;
    }

    .filterpanel-sidebar-popup .filterpanel-sidebar-popupheader {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -12px 12px;
        border-bottom: 1px solid rgb(218 231 250 / 13%);
    }

    .filterpanel-sidebar-popup .dxbl-accordion {
        --dxbl-accordion-border-width: 0;
        background: transparent;
    }

    .filterpanel-sidebar-popup .filter-accordion-header {
        margin-bottom: 12px;
        overflow: hidden;
        /* DevExpress joins adjacent groups by removing their top borders and corner radii. */
        border: 1px solid rgb(218 231 250 / 13%) !important;
        border-radius: 10px !important;
        background: white;
    }

    .filterpanel-sidebar-popup .filter-accordion-header > .dxbl-accordion-group-header {
        border-radius: 0 !important;
        padding: 10px 12px;
        background: #293b57 !important;
        color: #e4ecf7;
    }

    .filterpanel-sidebar-popup .filter-accordion-header > .dxbl-accordion-group-header:hover {
        background: #304d72 !important;
        color: white !important;
    }

    .filterpanel-sidebar-popup .filter-accordion-header-content {
        height: auto;
        min-height: 36px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .filterpanel-sidebar-popup .filter-accordion-header-label {
        font-weight: 600;
    }

    .filterpanel-sidebar-popup .filter-accordion-header-content > .filter-flex-gap {
        flex: 1 1 200px;
        min-width: 0;
        max-width: 100%;
    }

    .filterpanel-sidebar-popup .filter-accordion-header-content > .filter-flex-gap > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .filterpanel-sidebar-popup .filter-template-dropdown {
        width: 100%;
        min-width: 0;
        border-radius: 6px;
        background: #1e2b43;
    }

    .filterpanel-sidebar-popup .filter-accordion-content {
        min-width: 0;
        margin: 12px 8px;
    }

    .filterpanel-sidebar-popup .filterpanel-filterinstance {
        margin-bottom: 18px;
    }

    .filterpanel-sidebar-popup .filterpanel-filtertitle {
        margin-bottom: 8px;
        color: #1e2b43;
    }

    .filterpanel-sidebar-popup .dxbl-text-edit {
        min-height: 40px;
        border-radius: 6px;
    }

    .filterpanel-sidebar-popup .filter-flex-gap .dxbl-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .filterpanel-sidebar-popup .filter-btn-group {
        gap: 6px;
        margin-bottom: 6px;
    }

    .filterpanel-sidebar-popup .filter-btn-date-single {
        min-width: 0;
        min-height: 44px;
        height: auto;
        margin: 0;
        padding: 6px 3px;
        border-radius: 7px;
        font-size: .8125rem;
        white-space: normal;
    }

    .filterpanel-sidebar-popup .filter-customdate,
    .filterpanel-sidebar-popup .filter-timepanel-field,
    .filterpanel-sidebar-popup .filter-datepanel-firstdayofweek {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        height: auto;
        margin: 8px 0;
    }

    .filterpanel-sidebar-popup .filter-customdate label,
    .filterpanel-sidebar-popup .filter-timepanel-field label {
        width: auto;
        align-self: flex-start;
    }

    .filterpanel-sidebar-popup .filter-customdate-date,
    .filterpanel-sidebar-popup .filter-timepanel-dropdown,
    .filterpanel-sidebar-popup .filter-firstdayofweek-dropdown {
        width: 100%;
        min-width: 0;
    }

    .filterpanel-sidebar-popup .filter-btn-apply {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 12px;
        min-height: 48px;
        max-height: none;
        padding: 12px 16px;
        border: 1px solid #9bc3f4;
        border-radius: 10px;
        background: #304d72;
        color: white;
        box-shadow: 0 0 0 12px #1e2b43;
        font-size: 1rem;
        font-weight: 600;
    }

    .filterpanel-sidebar-popup .filter-btn-apply:not(:disabled):hover {
        background: #3d618e;
    }

    .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .filterpanel-filterinstance {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .filterpanel-shared-container {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .landingsummary-tile {
        border-bottom: 1px solid rgb(238, 238, 238);
    }

    .landingsummary-tile-container .grid .row {
        justify-content: center;
    }
}

/* Switch to smaller viewport */
@media (max-width: 960px) {

    /* for the transaction viewer, switch to flex start once we go below 960px otherwise "centered" content gets squeezed out of outer viewport on mobile */
    .stview {
        justify-content: flex-start;
    }

    /* for the nsa viewer, switch to flex start once we go below 960px otherwise "centered" content gets squeezed out of outer viewport on mobile */
    .nsaview {
        justify-content: flex-start;
    }

    /* for the Z reprot viewer, switch to flex start once we go below 960px otherwise "centered" content gets squeezed out of outer viewport on mobile */
    .zview {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .filterpanel-sidebar-popup,
    .dashboardviewerpage-filter .filterpanel-sidebar-popup {
        position: fixed;
        inset: 0;
        z-index: 1050;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
    }

    .filterpanel-sidebar-popup .filterpanel-sidebar-container {
        width: 100%;
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }

    .filterpanel-sidebar-popup .filter-btn-apply {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
    }
}

/* Switch to mobile view */
@media (max-width: 512px) {

    /* shrink padding inside grid details when in mobile view */
    .dxbl-grid .dxbl-grid-table .dxbl-grid-detail-cell {
        --dxbl-grid-detail-cell-padding-x: 0.5rem;
        --dxbl-grid-detail-cell-padding-y: 0.5rem;
    }

    .landingsummary-tile-container {
        padding: 0.5rem;
    }
}

/* Switch to narrow mobile view */
@media (max-width: 400px) {
    .filterpanel-sidebar-container {
        width: unset;
        min-width: 320px;
    }

    .filter-btn-date-single {
        font-size: 12px;
        margin: 1px 1px 1px 1px;
    }

    .filter-customdate-date {
        width: 100%;
    }

    .filter-timepanel-dropdown {
        width: 100%;
    }

    .popup-mobile {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }

    /* https://supportcenter.devexpress.com/ticket/details/t957701/combobox-for-blazor-how-to-define-the-dropdown-height */
    /* variation of the above to increase dropdown size of tag boxes, for mobile we limit to 300px though*/
    .dxbl-dropdown {
        max-height: 300px !important;
    }

        .dxbl-dropdown .dxbl-listbox {
            max-height: 300px !important;
        }

    .landingsummary-tile-container {
        padding: 0rem;
    }
}
/* ------------------------------------------------------------------------------------------------------------------------
    Production dashboard suite
   ------------------------------------------------------------------------------------------------------------------------ */

.dashboard-suite {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    overflow-x: clip;
}

.dashboard-header-comparison {
    display: flex;
    width: 100%;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    margin: 0.2rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    text-align: center;
}

.dashboard-header-comparison-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    color: #b45309;
    font-size: 0.75rem;
}

.dashboard-header-comparison-warning .fa {
    color: #d97706;
}

.dashboard-header-comparison .fa {
    font-size: 0.68rem;
}

.dashboard-suite-notice {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    max-width: 80rem;
    margin: 0 auto 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--pe-primary);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--pe-primary) 8%, white);
    color: var(--bs-body-color);
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.75rem;
    max-width: 100rem;
    margin: 0 auto 1rem;
}

.dashboard-header,
.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-legacy-summary .aggvalue,
.dashboard-legacy-summary .fttile-section {
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.6rem;
    background: var(--bs-white);
    box-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.06);
}

.dashboard-kpi-card {
    padding: 0.9rem 1rem;
}

.dashboard-kpi-card-unavailable {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    box-shadow: none;
    cursor: help;
}

.dashboard-kpi-card-unavailable .dashboard-kpi-value {
    color: inherit;
}

.dashboard-kpi-card-unavailable:focus-visible {
    outline: 2px solid var(--pe-primary);
    outline-offset: 2px;
}

.dashboard-legacy-totals {
    max-width: 100rem;
    margin: 0 auto 1rem;
    padding: 0;
}

.dashboard-legacy-summary .aggvaluegroup {
    overflow: visible;
    white-space: normal;
}

.dashboard-legacy-summary .aggvaluegroup-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.75rem;
}

.dashboard-legacy-summary .aggvalue {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.9rem 1rem;
}

.dashboard-legacy-summary .aggvalue h1 {
    order: -1;
    min-height: 2.4em;
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.dashboard-legacy-summary .aggvalue h2 {
    margin: 0.2rem 0;
    color: var(--bs-body-color);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    overflow-wrap: anywhere;
}

.dashboard-legacy-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    max-width: 100rem;
    margin: 0 auto 1rem;
}

.dashboard-legacy-sections .dashboard-widget-container {
    padding: 0;
}

.dashboard-legacy-summary .fttile-section {
    max-width: none;
    margin: 0;
}

.dashboard-kpi-label {
    min-height: 2.4em;
}

.dashboard-kpi-label,
.dashboard-kpi-detail-label {
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.dashboard-kpi-value {
    margin: 0.2rem 0;
    color: var(--bs-body-color);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.dashboard-kpi-value-unit {
    margin-left: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.dashboard-kpi-count {
    margin-bottom: 0.35rem;
    color: var(--bs-body-color);
    font-size: 0.85rem;
}

.dashboard-kpi-comparison {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-kpi-direction {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-kpi-positive {
    color: #477a22;
}

.dashboard-kpi-negative {
    color: #b42318;
}

.dashboard-kpi-neutral {
    color: var(--bs-secondary-color);
}

.dashboard-kpi-period {
    margin-top: 0.15rem;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
}

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 100rem;
    margin: 0 auto;
}

.dashboard-adjustment-shares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 100rem;
    margin: 0 auto 1rem;
}

.dashboard-adjustment-shares .dashboard-kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-adjustment-shares .dashboard-kpi-label {
    min-height: 0;
    color: #202020;
}

.dashboard-adjustment-shares .dashboard-kpi-value {
    font-size: 1.2rem;
    color: #202020;
}

.dashboard-discount-share {
    background: #f0ad4e;
}

.dashboard-surcharge-share {
    background: #99c56a;
}

.dashboard-suite-overview,
.dashboard-legacy-summary {
    container-type: inline-size;
}

@container (min-width: 75rem) {
    .dashboard-chart-grid-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (max-width: 50rem) {
    .dashboard-chart-grid-overview,
    .dashboard-legacy-summary .dashboard-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-chart-card {
    position: relative;
    padding: 0.75rem;
    overflow: visible;
}

.dashboard-chart-card:hover,
.dashboard-chart-card:focus-within {
    z-index: 10;
}

.dashboard-card-wide {
    grid-column: 1 / -1;
}

.dashboard-sankey-scroll {
    overflow-x: auto;
}

.dashboard-sankey {
    min-width: 48rem;
}

.dashboard-sankey-negative-values {
    margin-top: 1rem;
    font-size: 0.8rem;
}

.dashboard-sankey-negative-values p {
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.dashboard-sankey-negative-values dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    margin: 0;
}

.dashboard-sankey-negative-values dt {
    overflow-wrap: anywhere;
    font-weight: normal;
}

.dashboard-sankey-negative-values dd {
    margin: 0;
}

.dashboard-sales-mix-card {
    max-width: 100rem;
    margin: 0 auto 1rem;
}

.dashboard-chart-heading h2,
.dashboard-chart-card .dashboard-legacy-chart-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.dashboard-chart-card .dashboard-legacy-chart-subtitle {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: normal;
}

.dashboard-chart-heading p {
    margin: 0.15rem 0 0.4rem;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

.dashboard-comparison-chart svg text tspan:nth-of-type(2) {
    fill: #9aa0a8 !important;
}

.dashboard-chart-tooltip {
    display: flex;
    min-width: 10rem;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.6rem;
}

.dashboard-chart-tooltip-argument {
    margin-bottom: 0.1rem;
    white-space: pre-line;
}

.dashboard-chart-tooltip-series {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    font-weight: normal;
}

.dashboard-chart-tooltip-series-active {
    font-weight: 700;
}

.dashboard-chart-tooltip-compared {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: 0.5rem;
    width: min(36rem, calc(100vw - 4rem));
    min-width: min(36rem, calc(100vw - 4rem));
    max-width: calc(100vw - 4rem);
    align-items: center;
}

.dashboard-chart-tooltip-compared > .dashboard-chart-tooltip-argument {
    grid-column: 1 / -1;
}

.dashboard-chart-tooltip-comparison-row {
    display: contents;
}

.dashboard-chart-tooltip-comparison-row > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-chart-tooltip-comparison-row > span:not(:first-child) {
    text-align: right;
}

.dashboard-chart-tooltip-column-headings > span {
    padding-bottom: 0.25rem;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.dashboard-chart-tooltip-series-label {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.dashboard-chart-tooltip-marker {
    display: inline-block;
    flex: 0 0 0.65rem;
    width: 0.65rem;
    height: 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.dashboard-export-status {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem;
}

.dashboard-pdf-preview-container {
    position: relative;
    width: 100%;
    height: calc(90vh - 10rem);
    min-height: 20rem;
}

.dashboard-pdf-preview {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.dashboard-pdf-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg, white);
}

.dashboard-empty-state {
    display: flex;
    min-height: 16rem;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.dashboard-empty-state .fa-regular {
    font-size: 2rem;
}

.dashboard-loading-overlay {
    grid-area: dashboard;
    z-index: 5;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
}

.dashboard-toolbar-container {
    container-name: dashboard-toolbar;
    container-type: inline-size;
}

.dashboard-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "back comparison actions";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.75rem;
}

.dashboard-toolbar-back {
    grid-area: back;
    justify-self: start;
}

.dashboard-toolbar-actions {
    grid-area: actions;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

@container dashboard-toolbar (max-width: 32rem) {
    .dashboard-toolbar:has(.dashboard-comparison-control) {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "back actions" "comparison comparison";
    }

    .dashboard-toolbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 1279px) {
    @container dashboard-toolbar (max-width: 40rem) {
        .dashboard-toolbar:has(.dashboard-comparison-control) {
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-areas: "back actions" "comparison comparison";
        }

        .dashboard-toolbar-actions {
            flex-wrap: wrap;
            justify-content: flex-end;
        }
    }
}

.dashboard-comparison-control {
    grid-area: comparison;
    justify-self: center;
    display: flex;
    margin: 0;
    min-width: 13rem;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
}

.dashboard-comparison-control > span {
    text-align: center;
}

.dashboard-comparison-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.dashboard-comparison-selector .form-select {
    flex: 1;
    min-width: 0;
}

.dashboard-comparison-warning {
    display: inline-flex;
    flex: 0 0 auto;
    color: #d97706;
    cursor: help;
}

.dashboard-comparison-warning svg {
    width: 1.25rem;
    height: 1.25rem;
}

.dashboard-comparison-draft-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #b45309;
    font-size: 0.8rem;
}

.dashboard-comparison-draft-warning i {
    margin-top: 0.15rem;
    color: #d97706;
}

.dashboard-comparison-calendar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0.4rem;
    border-radius: 50%;
}

.dashboard-comparison-popup .filter-customdate-date {
    flex: 1;
    width: 0;
    min-width: 0;
}

.dashboard-comparison-popup .filter-btn-date-single {
    font-size: 0.75rem;
}

.dashboard-comparison-control .form-select {
    min-height: 2rem;
    color: var(--bs-body-color);
    font-size: 0.8rem;
}

.dashboard-suite .chart-nested-donut-minheight640 {
    min-height: 30rem;
}

.dashboardviewerpage-content,
.dashboardviewerpage-layout,
.dashboardviewerpage-layout > * {
    min-width: 0;
}

@media (max-width: 767px) {
    .dashboard-suite {
        padding: 0.5rem 0.25rem 1rem;
    }

    .dashboard-chart-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .dashboard-card-wide {
        grid-column: auto;
    }

    .dashboard-header-title {
        font-size: 1.45rem;
    }

    .dashboard-suite .chart-nested-donut-minheight640 {
        min-height: 24rem;
    }

    .dashboard-comparison-control {
        min-width: min(12rem, 45vw);
    }
}

@media (max-width: 400px) {
    .dashboard-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-comparison-control {
        width: 100%;
        min-width: 0;
    }

    .dashboard-suite .chart-nested-donut-minheight640 {
        min-height: 21rem;
    }
}