body, html {
    margin: 0;
    min-height: 100%;
    height: 100%;
}

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex;
    height: 100%;
    width: 100%;
}

.layout-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1505;
}

/* Container layout style fixes for the column chooser popup */
.dx-datagrid-column-chooser,
.dx-datagrid-column-chooser-list {
    color: #212121 !important; /* Forces a high-contrast dark text color */
    font-size: 14px !important;
}

    /* Fixes the text color for items inside 'dragAndDrop' or 'select' tree view items */
    .dx-datagrid-column-chooser .dx-treeview-item-content,
    .dx-datagrid-column-chooser .dx-treeview-item {
        color: #212121 !important;
        background-color: #ffffff !important; /* Ensures a clean white background contrast */
    }

    /* Fixes grayed out or poorly accessible text in selected/hovered states */
    .dx-datagrid-column-chooser .dx-state-hover,
    .dx-datagrid-column-chooser .dx-state-focused {
        color: #000000 !important;
        background-color: #f0f0f0 !important;
    }

    /* Optional: Improves readability of the column chooser search box input text */
    .dx-datagrid-column-chooser .dx-searchbox .dx-texteditor-input {
        color: #212121 !important;
    }

.tcdelivers-text-button .dx-button-text {
    color: white !important;
}

.tcdelivers-text-button .dx-icon {
    color: white !important;
}

.tcdelivers-text-button.dx-state-hover {
    background-color: lightslategray !important;
}

.tcdelivers-title-text-button .dx-button-text {
    width: 100%;
    flex: 1;
    display: flex;
    font-size: 16px;
    color: white !important;
}


.dx-toolbar .dx-toolbar-item.menu-button {
    width: 60px;
    text-align: center;
    padding: 0;
}

.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
}

    .dx-card.wide-card {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        border-right: 0;
        border-left: 0;
    }

.dx-tabpanel-container, .dx-tabpanel-views {
    height: 100%;
}

#my-grid-container {
    height: 100% !important;
}

.with-footer > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content {
    height: 100%;
}

    .with-footer > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content > .dx-scrollview-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

.layout-body {
    background-color: #f2f2f2;
    flex: 1;
    height: 100%;
    min-height: 0;
}

    .layout-body .menu-container {
        height: 100%;
        width: 250px;
        background-color: #fff;
    }

    .layout-body .content {
        flex-grow: 1;
        height: 100%;
        line-height: 1.5;
        margin: 20px 40px;
    }

        .layout-body .content h2 {
            font-size: 32px;
            line-height: 40px;
        }

    .layout-body .content-block {
        margin: 0 0 20px;
    }

    .layout-body .content-footer {
        display: block;
        color: rgba(0,0,0,.609);
        border-top: 1px solid rgba(0,0,0,.1);
        padding-top: 20px;
        padding-bottom: 24px;
        margin: 0 40px;
    }

    .layout-body .responsive-paddings {
        padding: 20px;
    }

.layout-body-hidden {
    visibility: hidden;
}

#layout-drawer.dx-drawer-shrink .dx-drawer-panel-content {
    box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px;
}

@media screen and (max-width: 600px) {
    .layout-body .content {
        margin: 20px;
    }
}

@media screen and (min-width: 1280px) {
    .layout-body .responsive-paddings {
        padding: 40px;
    }
}

.menu-container .dx-widget {
    font-weight: 700;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,Helvetica,Arial,sans-serif;
    line-height: 24px;
}

.menu-container .dx-treeview {
    white-space: nowrap;
}

    .menu-container .dx-treeview .dx-treeview-item {
        padding-left: 0;
        flex-direction: row-reverse;
        border-radius: 0;
    }

        .menu-container .dx-treeview .dx-treeview-item .dx-icon {
            width: 60px !important;
            margin: 0 !important;
        }

    .menu-container .dx-treeview .dx-treeview-node {
        padding: 0 0 !important;
    }

    .menu-container .dx-treeview .dx-treeview-toggle-item-visibility {
        right: 10px;
        left: auto;
    }

    .menu-container .dx-treeview .dx-rtl .dx-treeview-toggle-item-visibility {
        left: 10px;
        right: auto;
    }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="1"] {
        font-weight: bold;
    }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="2"] .dx-treeview-item-content {
        font-weight: normal;
        padding: 0 0 !important;
        padding-left: 20px !important; /* Adjust value to fit your layout */
    }

/* Targets the main container of the TreeView to set an overall background color */
.dx-treeview {
    background-color: black !important;
    color: white; /* Change text color for readability on a black background */
}

/* Targets all standard treeview nodes */
.dx-treeview-node {
    background-color: black !important;
    color: white !important;
}

    /* Targets the selected node's background color */
    .dx-treeview-node.dx-state-focused,
    .dx-treeview-node.dx-state-selected {
        background-color: #333333 !important; /* Darker gray for selected state */
        color: white !important;
    }

    /* Targets the background color when hovering over a node */
    .dx-treeview-node.dx-state-hover {
        background-color: #555555 !important; /* Lighter gray for hover state */
        color: white !important;
    }

/* Ensure the custom CSS file is linked after the default DevExpress themes */
.blue-toolbar-tc .dx-toolbar-items-container {
    background-color: #004486 !important;
}

/* You may need additional rules to style individual items, for example: */
.blue-toolbar-tc .dx-toolbar-item {
    background-color: #004486 !important;
    color: white; /* Optional: Change text color for readability */
}

/* Ensure the custom CSS file is linked after the default DevExpress themes */
.blue-toolbar .dx-toolbar-items-container {
    background-color: #0099cc !important;
}

/* You may need additional rules to style individual items, for example: */
.blue-toolbar .dx-toolbar-item {
    background-color: #0099cc !important;
    color: white; /* Optional: Change text color for readability */
}

/* Target the button itself within the item */
.white-toolbar-item .dx-button {
    background-color: #0099cc !important;
    border-color: white !important;
}

/* Target the text color inside the button */
.white-toolbar-item .dx-button .dx-button-text {
    color: white     !important; /* Contrasting color for text */
}

/* Target the icon color inside the button */
.white-toolbar-item .dx-icon {
    color: white !important;
}

.alert-message {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .alert-message.success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

    .alert-message.error { /* Using 'error' instead of 'danger' */
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }

    .alert-message.info {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

.btn-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    font-weight: bold;
}

.treeview-item-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.item-text {
    flex-grow: 1;
    margin-left: 8px;
}

.menu-item-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.menu-text {
    flex-grow: 1;
    margin-left: 8px;
}

.badge-new-messages {
    background-color: red;
    color: white;
    border-radius: 12px;
    padding: 0px 10px;
    font-size: 12px;
    margin-left: 8px;
    vertical-align: middle;
    text-align: center;
    margin-left: auto; /* Pushes badge to the right */
}