.validation-message {
    color: var(--mud-palette-error) !important;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
}

.table-traffic {
    width: 100%;
    margin-bottom: 1rem;
    color: #212121;
    border-collapse: unset;
}
.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    /*border-top: 1px solid #404040;*/ }
.table thead th {
    vertical-align: bottom;
    /*border-bottom: 1px solid #404040;*/ }
.table tbody + tbody {
    /*border-top: 2px solid #404040;*/ }

.bg-dark {
    background-color: #212121 !important;
    color: #FFF;
}

.bg-light {
    background-color: #BBBBBB !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05); 
}

.mud-table-header-custom {
    font-weight: bold !important;
}

.fixed-column {
    position: sticky;
    min-width: 7rem;
    background-color: white;
}

.position {
    left: 0;
}

.position2 {
    left: 7rem;
}

.position3 {
    left: 14rem;
}

th.fixed-column {
    z-index: 30;
}

td.fixed-column {
    z-index: 20;
}

#app {
    min-height: 100vh;
}
.app-loading {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #D8AB4E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}