.hero-section {
    background: url('/images/diego.jpg') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    color: white;
    text-shadow: 2px 2px 5px #000;
    margin: 0; /* Ensure no extra margin */
    box-sizing: border-box; /* Ensure padding and borders are included in the width and height */
}
.fixed-toolbar {
    position: sticky;
    top: 0; /* Adjust this value to match the height of your AppBar */
    left: 20px;
    z-index: 1000; /* Ensure it stays on top of other elements */
    background-color: var(--mud-palette-background); /* Match the toolbar's background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.fixed-menu-button {
    position: fixed;
    top: 0; /* Adjust as needed */
    z-index: 10000; /* Ensure it stays on top of other elements */
}

.mud-drawer {
    top: 0;
    height: 100%;
    z-index: 1040;
}



.hero-section-account {
    background: url('/images/diego.jpg') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
}


.account-container {
    align-items: center;
    justify-content: center;

}

.opaque-container {
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent dark background */

    padding: 2rem;
    border-radius: 10px;
    width: 100%;
    max-width: 600px;
}


.dany-section {
    background: url('/images/dany.png') no-repeat center center;
    background-size: cover;
    padding: 100px 0;
    color: white;
    text-shadow: 2px 2px 5px #000;
    margin: 0; /* Ensure no extra margin */
    box-sizing: border-box; /* Ensure padding and borders are included in the width and height */
}

html, body {
    margin: 0; /* Ensure no extra margin */
    padding: 0; /* Ensure no extra padding */
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

ul {
    padding-left: 20px; /* Adjust indentation */
}

ul ul {
    padding-left: 20px; /* Indent nested lists further */
}
ol {
    padding-left: 20px; /* Adjust indentation */
}
.text-primary {
    color: var(--mud-palette-text-primary);
}
.mud-markdown-body .mud-typography-h3 {
    font-size: 1.7rem; /* Adjust as needed */
}
.mud-markdown-body {
    padding: 20px; /* Add space around the content */
    line-height: 2.5; /* Improve readability */
}

.mud-table-row.red-text .mud-table-cell {
    color: red !important;
}
.mud-table-row.yellow-text .mud-table-cell {
    color: yellow !important;
}

@media (max-width: 600px) {
    .mud-xs-table .mud-table-cell {
        justify-content: initial !important;
    }
}

/* Main container to keep both sections aligned */
.chat-container {
    width: 100%; /* Ensures both containers have the same width */
    margin: 0 auto; /* Centers them */
}

/* Chat box (messages section) */
.chat-box {
    height: 70vh; /* Adjusts height so it doesn’t exceed the screen */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
}


.mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 500 !important;
    color:white !important
}

/* Scrollable chat messages */
.chat-messages {
    flex-grow: 1;
    overflow-y: auto; /* Enables scrolling */
    padding: 10px;
    max-height: 100%; /* Prevents overflow beyond chat-box */
}

/* Chat input area */
.chat-input {
    width: 100%;
    background: #333; /* Dark background */
    color: white;
    padding: 10px;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
}


.text-secondary {
    color: var(--mud-palette-text-secondary);
}

.custom-expansion-panel .mud-expand-panel-header {
    padding: 0;
    

}
.no-padding {
    padding: 0 !important;
}

.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #c30b82;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
}

// to draw white circle
.marker-pin::after {
    content: '';
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
}

// to align icon
.custom-div-icon i {
    position: absolute;
    width: 22px;
    font-size: 22px;
    left: 0;
    right: 0;
    margin: 10px auto;
    text-align: center;
}

.responsive-grid {
    overflow-x: auto; /* Ensure horizontal scrolling for wide content */
}


/* Rows with WorkOrders */
.mud-table-row.has-workorders .mud-table-cell {
    font-weight: bold !important; /* Bold text */
    background-color: var(--mud-palette-drawer-background) !important;
}
.has-workorders {
    
}
/* Rows without WorkOrders */
.mud-table-row.no-workorders .mud-table-cell {
   
}