.vehicles-container {
    display: grid;
    grid-template-rows: auto calc(100dvh - 7rem);
    
    & section:first-child {
        padding-block: .5rem; 
    }
    
    & > .card {
        margin: 1rem;
    }

    /*Table row*/
    & > div > div > div:nth-child(2) > table > tbody {
        cursor: pointer;

        /*Table row hover effect*/
        & > tr:hover {
            background-color: rgba(0, 0, 0, 0.04);
        }
    }
}

.vehicle-top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.vehicle-top-bar :nth-child(3) {
    justify-self: right;
}

.vehicle-details-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;

    & > div {
        display: grid;
        grid-template-rows: 3rem 1fr 1fr;
        gap: .5rem;
    }
}

.model-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}

.model-wrapper-disabled {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
}

.vehicle-additional-details-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;

    & > div {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        gap: .5rem;
    }
}

.vehicle-service-info-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;

    & > div {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: .5rem;
    }
}

.vehicle-cam-belt-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: center;

    & > div {
        display: grid;
        grid-template-rows: auto auto 1fr 1fr;
        gap: .5rem;
    }
}

.vehicle-view-container {
    display: grid;
    background-color: var(--mud-palette-background);
    height: inherit;
    overflow: hidden;
}

.vehicle-view-body {
    display: grid;
    grid-template-columns: 1fr 3.5fr;
    gap: 1rem;
    padding-inline: 1rem;
    padding-top: 1rem;
}

.vehicle-view-body-add {
    display: grid;
    padding-inline: 1rem;
    padding-top: 1rem;
}

.vehicle-view-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.vehicle-reg {
    max-width: 200px;

    /*Hide the helper text*/

    & > div:nth-child(2) {
        display: none;
    }
}

.vehicle-scroll-section {
    display: grid;
    margin-top: 1rem;
    padding-block: .5rem;
    height: calc(100dvh - 410px);
    overflow-y: auto;
    padding-inline: .3rem;
}

.custom-expansion-panel {

}

.vehicle-specification-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

.vehicle-record-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.vehicle-record-container > div {
    display: grid;
    grid-template-columns: 
            repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}


.vehicle-info-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.vehicle-info-container > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.vehicle-cam-belt-container {
    display: grid;
    grid-template-columns: 3fr 3fr 1fr;
    gap: 1rem;
}

.vehicle-cam-belt-container > div > span {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

/*.vehicle-history-container > div {*/
/*    display: grid;*/
/*    grid-template-columns: auto 1fr;*/
/*    gap: .5rem;*/
/*}*/