html, body {
    height: 100%;
}

app{
    display: block;
    height: 100%;
}
.header-logo {
    flex-shrink: 0;
    background-image: url('../images/Logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 185px;
    height: 40px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.striped-grid-light table tbody tr:nth-child(odd) {
    background-color: #fcfcfc;
}

.striped-grid-dark table tbody tr:nth-child(odd) {
    background-color: #363640;
}

/* Change splash colors*/
.loading-items-center > .bg-primary {
    background-color: transparent !important;
}

/*Customize color for splash screen load indicator*/
.loading-items-center > .border-primary {
    border-color: #ffa300 !important;
    border-width: thin !important;
}


/* To fix distance between captions and property editors when exist a field with long name
    See: https://supportcenter.devexpress.com/ticket/details/q353827/how-to-reduce-the-width-of-layout-item-captions-in-a-detailview
*/
div.custom-caption-width .form-group.row > .dxbs-fl-cpt {
    width: 150px !important;
}

/* Show messages with break line: https://supportcenter.devexpress.com/ticket/details/t1002781/xaf-blazor-toast-multiple-at-different-position-and-multiple-line-toast-using*/
.xaf-alert-message {
    white-space: pre-line !important;
}

/*To show properly initial splash logo*/
#loadingBackground .loading-image {
    height: 50px !important;
    width: 50px !important;
}
.xaf-filter-footer-container {
    margin-top: .5rem
}

.xaf-filter-footer {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    background-color: var(--dxbl-surface, var(--dxbl-appbar-background, rgba(0,0,0,.04)));
    color: var(--dxbl-on-surface, var(--dxbl-appbar-foreground, inherit));
    border: 1px solid var(--dxbl-outline, rgba(0,0,0,.12));
    border-radius: .5rem
}

.xaf-filter-footer__left {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    width: 100%
}

.xaf-filter-line {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    line-height: 1.35;
    align-items: center
}

.xaf-label {
    color: rgba(0,0,0,.6);
    font-weight: 600;
    margin-right: .25rem
}

.xaf-prop {
    color: rgb(25,118,210);
    font-weight: 600
}

.xaf-op {
    color: rgb(46,125,50);
    font-weight: 500
}

.xaf-val {
    color: rgba(0,0,0,.87)
}

.xaf-join {
    color: rgb(230,145,0)
}

.xaf-paren {
    color: rgb(84,110,122)
}

.xaf-filter-btn {
    border: 1px solid var(--dxbl-outline,rgba(0,0,0,.2));
    background: var(--dxbl-surface,#fff);
    border-radius: .375rem;
    padding: .25rem .375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer
}
.xaf-filter-btn:hover {
        background: rgba(0,0,0,.04)
}
.xaf-icon-img {
    width: 16px;
    height: 16px;
    display: block
}

/* Override disabled editor text color for better readability (Appearance Rules with Enabled = false) */
.dxbl-text-edit.dxbl-disabled,
.dxbl-text-edit.dxbl-disabled input,
.dxbl-text-edit.dxbl-disabled textarea,
.dxbl-text-edit input:disabled,
.dxbl-text-edit textarea:disabled {
    color: rgba(0, 0, 0, 0.7) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.7) !important;
    opacity: 2 !important;
}

/* Swaps the visual order of the caption and input in XAF Parametrized Actions */
.custom-date-filter-action {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 0.5rem;
}

/*
 * DevExpress 26.1 gives the account menu a fixed width and truncates the
 * My Details caption. That caption contains the current company, branch,
 * and division, so allow the menu to grow as it did before the upgrade.
 */
.account-main {
    width: max-content;
    min-width: 200px;
    max-width: calc(100vw - 2rem);
    overflow: visible;
}

.user-info-inner-container {
    max-width: none;
}

.xaf-btn.my-details,
.xaf-btn.my-details > span {
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .account-main {
        width: 80%;
        max-width: 80%;
        overflow: hidden;
    }

    .user-info-inner-container {
        flex: 1;
        min-width: 0;
    }

    .xaf-btn.my-details,
    .xaf-btn.my-details > span {
        white-space: normal;
    }
}