.card{
    max-width: 18rem; 
    margin: 1em;
    height: 7rem;
}
.card-counter {
    text-align: center;
    padding: .2em;
}

.cancelled-card-selected {
    background-color: rgba(255, 205, 210, .3) !important;
    border: 1px solid #F44336;
}
.delayed-card-selected {
    background-color: rgba(255, 241, 118, .2) !important;
    border: 1px solid rgba(255,152,0,1);
}
.diverted-card-selected {
    background-color: rgba(156, 39, 176, .1) !important;
    border: 1px solid #9C27B0;
}
.critical-connections-card-selected {
    background-color: rgba(230, 81, 0, .1) !important;
    border: 1px solid #E65100;
}

.responsive-grid .mud-table-cell {
    white-space: normal !important;
}
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 14px 6px 14px !important;

}
.fontweight_bold{
    font-weight: 500 !important;
}
.rotate90 {
    transform: rotate(90deg);
}
.grey_text{
    color: #c4c4c4;
}

/* User Preferences - Flight Event Notifications table. Without table-layout:fixed each row's own
   content (icon+label width varies per event, and the Delay row has an extra dropdown) makes every
   column shrink-wrap independently, so there's no spare room left for text-align:center to actually
   center the header text or the switches within - this is what made them look misaligned. Fixing the
   Popup/Sound/Email columns to an equal width gives centering something to center within. */
.notification-events-table table {
    table-layout: fixed;
}
.notification-events-table th:nth-child(2), .notification-events-table td:nth-child(2),
.notification-events-table th:nth-child(3), .notification-events-table td:nth-child(3),
.notification-events-table th:nth-child(4), .notification-events-table td:nth-child(4) {
    width: 90px;
}

/* Alternative flights panel: the original-flight grid and the results grid share these
   widths for columns 1-5 so they line up. The last column of each grid is left auto and
   absorbs the remaining width. */
.alt-flights-grid table {
    table-layout: fixed;
}
.alt-flights-grid th:nth-child(1), .alt-flights-grid td:nth-child(1) { width: 150px; }
.alt-flights-grid th:nth-child(2), .alt-flights-grid td:nth-child(2) { width: 110px; }
.alt-flights-grid th:nth-child(3), .alt-flights-grid td:nth-child(3) { width: 150px; }
.alt-flights-grid th:nth-child(4), .alt-flights-grid td:nth-child(4) { width: 120px; }
.alt-flights-grid th:nth-child(5), .alt-flights-grid td:nth-child(5) { width: 90px; }
.alt-flights-clickable-row {
    cursor: pointer;
}
.alt-flights-segments {
    background: transparent;
    margin: 4px 0;
}
/* MudSimpleTable always pads/borders its <td>, even when MudCollapse has hidden its content down to
   0 height. Collapsed, the main row directly above already draws the divider before the next flight,
   so this cell gets neither padding nor its own border (border-collapse doesn't merge the two - they're
   on different edges, main-row-to-detail-row vs detail-row-to-next-row - so leaving both would show as
   two close-together lines). Expanded, it needs its own border back to close off the segment breakdown.
   !important is needed here: MudSimpleTable's own rule (".mud-simple-table table * tr>td") is more
   specific than a single class selector, so a plain override loses to it. */
.alt-flights-detail-row > td {
    padding: 0 !important;
    border-bottom: none !important;
}
.alt-flights-detail-row-open > td {
    border-bottom: 1px solid var(--mud-palette-table-lines) !important;
}
.alt-flights-layover-row td {
    border-bottom: none;
    padding-top: 0;
}
.alt-flights-results th:nth-child(6), .alt-flights-results td:nth-child(6) { width: 110px; }
.alt-flights-results th:nth-child(7), .alt-flights-results td:nth-child(7) { width: 80px; }
.alt-flights-results th:nth-child(8), .alt-flights-results td:nth-child(8) { width: 90px; }
.white_text{
    color: #FFFFFF;
}
.bold_text{
    font-weight:bold;
}
.row-left-right {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.w-100{
    width: 100%;
}
.plane_icon
{
    margin-top: -2px;
    margin-left: 5px;
}
.nav-link{
    color: white !important;
}

.dr_Picker
{
    max-width:400px;
}

.grid_container {
    display:inline-block; 
    min-width:1000px;
}

.mud-main-content {
    padding-bottom: var(--mud-appbar-height);
}

::-webkit-scrollbar-button: {
    display: none;
}

.floatRight {
    float: right;
}

@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
    .grid_container {
        margin-left: 20px;
        max-width: 500px;
    }
}
@media (min-width: 1600px) {
    .mainDiv{
        max-width:1600px;
        margin: 0 auto;
    }
}