/* Custom overrides for the MudTimePicker pop-up (clock) */
.mud-picker-popover {
    position: fixed !important; /* Position relative to viewport */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Center horizontally & vertically */
    width: 350px !important; /* Set a fixed width (adjust as needed) */
    max-width: 90% !important; /* Don’t be wider than 90% of the viewport */
    max-height: 90vh !important; /* Don’t be taller than 90% of the viewport */
    overflow: auto; /* Provide scrollbars if content overflows */
}

    /* Optionally, adjust the inner container (if needed) */
    .mud-picker-inline-paper,
    .mud-picker-popover .mud-picker-container {
        padding: 0.5rem; /* Adjust padding to your liking */
    }

/* Default: desktop view */
.my-flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


.my-projects-table .mud-table-container table th,
.my-projects-table .mud-table-container table td {
    white-space: normal !important;
    word-break: break-word;
    padding: 4px !important;
}

.my-projects-table .mud-table-container table tr {

    padding: 4px !important;

}

.my-projects-table .mud-table-container {
    overflow-x: hidden !important;
}

/* Make sure your table uses the class you set: */
.my-projects-table th {
    white-space: nowrap;
}

/* (optional) if you want the DETAILS/EDIT/DELETE cell narrower) */
.my-projects-table td.actions-cell {
    width: 10%;
}

/* Mobile view: when viewport is under 650px */
@media (max-width: 650px) {
    /*.my-flex-container {*/
        /* Stack elements (column) and align items to the left */
        /*flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.5rem;*/ /* optional spacing */
    /*}*/
}

/* For mobile devices, you might add a media query for further tweaks */
@media (max-width: 600px) {
    .mud-picker-popover {
        width: 350px !important;
        max-width: 95% !important;
        max-height: 95vh !important;
    }
}


html {
    font-size: 16px; /* Base font size for larger screens */
}

@media (max-width: 1200px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 900px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 13px;
    }
}


.my-trucking-table table {
    table-layout: fixed;
    width: 100%;
}

.my-trucking-table td,
.my-trucking-table th {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}