html, body {
    height: 100%;
    overflow: hidden;
    --valid-color: #d2d2d2;
}
.dxbl-drawer-shading {
    opacity: 0.15 !important;
}
/*BG: Fix for grids in tabs  */
.dxbl-tabs .dxbl-tabs-content-panel {
    height: calc(100% - 55px) !important;
}
/*BG: Modifications from DevExpress to keep valid entries on form styled correctly */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--valid-color);
}
html .dxbl-text-edit {
    --dxbl-text-edit-validation-valid-color: var(--valid-color) !important;
    --dxbl-text-edit-focus-shadow-color: var(--valid-color) !important;
}
html .valid .dxbl-edit-validation-status {
    display: none !important;
}
.header-wrap span:first-child {
    word-wrap: normal !important;
    white-space: normal !important;
}
/*BG: Column search icon sizing */
.dxbl-grid-filter-menu-funnel-btn {
    transform: scale(0.65) !important
}
/* increase height of dxcombobox when DropDownBodyCssClass="dd-body-class"*/
.dd-body-class,
.dd-body-class .dxbl-listbox {
    max-height: 400px !important;
}
.dxbl-dropdown-body th {
    font-size: 10px; /* Adjust the font size for table headers */
}

.dxbl-dropdown-body td {
    font-size: 10px; /* Adjust the font size for table details */
}

.dxbl-navigation-filter {
    margin-top: 0.75rem;
    margin-bottom: 0 !important;
    margin-left: 0.75rem;
    width: 90% !important;
}
.header-align-center span:first-child {
    width: 100%;
    text-align: center;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}
#mxiframe {
    width: 100%;
    height: 100%;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (min-width: 988px) {
    .dxbl-popup.dxbl-popup-adaptivity {
        max-width: 40% !important;
        max-height: 75% !important;
    }
        .dxbl-popup.dxbl-popup-adaptivity.mx-popup-grid {
            max-width: 60% !important;
            max-height: 75% !important;
        }
}
/*Badge customomization - navmenu */
.dxbl-treeview-item-content .dxbl-badge {
    font-size: 0.70em !important;
}
.primarybadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-primary) !important;
}
.secondarybadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-secondary) !important;
}
.successbadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-success) !important;
}
.dangerbadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-danger) !important;
}
.warningbadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-warning) !important;
}
.infobadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-info) !important;
}
.lightbadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-light) !important;
    color: var(--bs-dark) !important;
}
.darkbadge .dxbl-treeview-item-content .dxbl-badge {
    background-color: var(--bs-dark) !important;
}

.mxcard-text-size {
    font-size: 13px; 
}
.flyout-menus {
    cursor: pointer;
}

div.flyout-menus span:hover {
    background-color: #d2d2d2;
}
.dropdown-menus {
    cursor: pointer;
}
.dxbl-toolbar-dropdown-item:hover {
    background-color: #d2d2d2;
}
.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.my-chat {
    width: 100%!important;
    height: 98%!important;
}

.my-chat-content > p:last-child {
    margin-bottom: 0;
}
.dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-message .dxbl-chatui-message-text {
    white-space: normal !important;
}
.my-chat .my-chat-message {
    padding: 10px;
    border-radius: 10px;
    width: calc(100% - 60px);
    box-shadow: 0px 2px 6px -2px;
    color: black;
}
.my-chat .my-chat-message.my-error-message {
    background-color: rgb(255, 183, 194);
    align-self: center;
}
    .my-chat .my-chat-message.my-user-message {
        background-color: #158cba;
        color: white;
        align-self: self-end;
    }