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

.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-toolbar {
    background-color: lavender;
}

.filterpanel-sidebar-toolbar-btn-close {
    margin-right: 0.5rem;
    font-size: 1rem;
    height: 32px;
    color: black;
}

    .filterpanel-sidebar-toolbar-btn-close:not(:disabled):hover {
        border-color: steelblue !important;
        background: lightsteelblue !important;
        background-color: lightsteelblue !important;
    }

.filterpanel-sidebar-toolbar-title {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    padding: 0.5rem;
}

.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;
    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-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%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0.5rem;
}

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

.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;
    background: white;
    min-width: 4rem;
}

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

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

.dashboard-header-filterstring {
    font-size: 0.75rem;
    font-weight: normal;
    color: black;
    text-align: center;
    background: white;
    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-btn {
    margin-top: 1rem;
    margin-left: 0.5rem;
}

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

.schedule-detail-item {
    display: flex;
    gap: 0.5rem;
}

    .schedule-detail-item label {
        font-weight: bold;
        min-width: 7rem;
    }

    .schedule-detail-item div {
        font-weight: normal;
    }

.schedule-deleted-item > td {
    background-color: rgba(245, 198, 203, 0.5);
}
/* ------------------------------------------------------------------------------------------------------------------------
    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%;
}

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

.dashboardviewerpage-layout {
}

.dashboardviewerpage-toolbar {
}

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

.reportviewerpage {
    height: 100%;
}

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

.reportviewerpage-layout {
}

.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-y: auto;
        right: 0px;
        z-index: 99;
        background-color: white;
        top: 52px;
        bottom: 0px;
        border-bottom: solid 2px var(--pe-primary);
        border-top: solid 2px var(--pe-primary);
    }

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

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

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