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

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Hide the item by default on desktop */
.mobile-only {
    display: none !important;
}

/* Show the item only on mobile screens (example: width < 768px) */
@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }
}

/* Hide by default (Desktop/Tablet) */
.mobile-only-spacer {
    display: none;
}

/* Show only on Mobile */
@media (max-width: 767px) {
    .mobile-only-spacer {
        display: block;
        width: 20px; /* Adjust size as needed for spacing */
        height: 100%;
    }
}

.ic-group-text-button .dx-button-text {
    color: #005687 !important;
}

.ic-group-text-button .dx-icon {
    color: #005687 !important;
}

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

.ic-group-title-text-button .dx-button-text {
    width: 100%;
    flex: 1;
    display: flex;
    font-size: 16px;
    color: #005687 !important;
}

.jlsms-text-button .dx-button-text {
    color: black !important;
}

.jlsms-text-button .dx-icon {
    color: black !important;
}

.jlsms-text-button.dx-state-hover {
    background-color: #2f7f5a !important;
}

.jlsms-title-text-button .dx-button-text {
    width: 100%;
    flex: 1;
    display: flex;
    font-size: 16px;
    font-weight: bold;
    color: #2f7f5a !important;
}

/* Target the title specifically within that custom wrapper */
.custom-popup-style .dx-popup-title {
    background-color: #2f7f5a;
    color: white;
}

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

    .ums-text-button .dx-button-text {
        color: #263683 !important;
    }

    .ums-text-button .dx-icon {
        color: #263683 !important;
    }

    .ums-text-button.dx-state-hover {
        background-color: #de2516 !important;
    }

    .ums-title-text-button .dx-button-text {
        width: 100%;
        flex: 1;
        display: flex;
        font-size: 16px;
        color: #263683 !important;
    }
    /* Target the button's text directly */
    .title-text-button .dx-button-text {
        width: 100%;
        flex: 1;
        display: flex;
        color: black !important;
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .my-grid-container {
        height: 715px; /* Example fixed height */
        overflow-y: auto; /* Ensures vertical scrollbar appears when content overflows */
    }
        /* Target a specific grid by wrapping it in a div with id="myGridContainer" */
        .my-grid-container .dx-datagrid {
            font-size: 9px !important; /* Decrease from default (usually 14px) */
        }
        /* Specifically target data rows if needed */
        .my-grid-container .dx-datagrid-rowsview .dx-data-row {
            font-size: 9px !important;
        }
        /* Specifically target headers if needed */
        .my-grid-container .dx-datagrid-headers .dx-header-row {
            font-size: 9px !important;
        }
    /*.my-grid-container .dx-datagrid-table .dx-row > td {
    padding: 4px !important;  Adjust row density 
}
*/
    /* Decrease padding for all data cells */
    /*.my-grid-container .dx-datagrid-rowsview .dx-data-row .dx-command-edit,
.dx-datagrid-rowsview .dx-data-row > td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    height: auto !important;*/ /* Allows rows to shrink below default height */
    /*}*/
    /* Decrease padding for header cells */
    /*.my-grid-container .dx-datagrid-headers .dx-header-row > td {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }*/



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


    .layout-header {
        flex: 0 0 auto;
        height: 60px;
        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;
    }
    /* Decrease font size for cells and headers */
    .small-font-grid .dx-datagrid {
        font-size: 9px; /* Default is typically 14px */
    }
    /* Optional: Ensure row height adjusts to the smaller font */
    .small-font-grid .dx-data-row {
        height: 20px;
    }


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

    .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: 60px;
            }

        .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 60px;
*/ padding-left: 10px !important;
        }
    /* 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;
        }

    .dx-toolbar .dx-toolbar-items-container {
        height: 60px;
    }
    /* You may need additional rules to style individual items, for example: */
    .dx-toolbar .dx-toolbar-item {
        height: 60px;
        width: 50px;
        text-align: center;
        color: white; /* Optional: Change text color for readability */
    }

    .toolbar-spacer {
        flex-grow: 1;
    }

    .spacer {
        /*flex-grow: 1;*/ /* Fills remaining space */
        /* OR */
        width: 70px;
    }
    /* 1. Force the internal DevExpress container to grow */
    .dx-toolbar-center {
        flex-grow: 1 !important;
    }
    /* 2. Target your specific item to take up all available space */
    .flex-item-grow {
        flex-grow: 1 !important;
        flex: 1;
        display: flex;
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }
    /* Style the text with 16px font */
    .custom-toolbar-text {
        /*text-align: left;*/
        font-size: 16px;
        font-weight: bolder;
        width: 100%;
    }
    /* 3. Ensure the inner template content also stretches */
    .full-width-content {
        width: 100%;
    }

    .custom-status-container {
        margin: 15px 0;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ddd;
        font-family: Arial, sans-serif;
    }

    .custom-success {
        background-color: #d4edda;
        color: #155724;
        border-color: #c3e6cb;
    }

    .custom-error {
        background-color: #f8d7da;
        color: #721c24;
        border-color: #f5c6cb;
    }


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