/* This CSS file supports to ~/Views/Shared/SearchForm.cshtml*/

.cf-search-grid {
    display: grid;
    column-gap: var(--cf-grid-column-gap);
    row-gap: 16px;
    padding: var(--cf-grid-vertical-padding) var(--cf-grid-horizontal-padding);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "cf-search-grid-pick-up-location cf-search-grid-pick-up-date cf-search-grid-return-date"
        "cf-search-grid-equipment-type cf-search-grid-quantity cf-search-grid-submit"
}

    .cf-search-grid .cf-search-grid-pick-up-location {
        grid-area: cf-search-grid-pick-up-location;
    }

    .cf-search-grid .cf-search-grid-equipment-type {
        grid-area: cf-search-grid-equipment-type;
    }

    .cf-search-grid .cf-search-grid-quantity {
        grid-area: cf-search-grid-quantity;
    }

    .cf-search-grid .cf-search-grid-pick-up-date {
        grid-area: cf-search-grid-pick-up-date;
    }

    .cf-search-grid .cf-search-grid-return-date {
        grid-area: cf-search-grid-return-date;
    }

    .cf-search-grid .cf-search-grid-submit {
        grid-area: cf-search-grid-submit;
    }

.cf-search-form-control,
.cf-form-control-datepicker {
    height: 56px;
}

@media screen and (max-width: 1024px) {

    .cf-search-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "cf-search-grid-pick-up-location cf-search-grid-equipment-type"
            "cf-search-grid-pick-up-date cf-search-grid-return-date"
            "cf-search-grid-quantity cf-search-grid-submit"
    }
}

@media screen and (max-width: 768px) {

    .cf-search-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cf-search-grid-pick-up-location"
            "cf-search-grid-pick-up-date"
            "cf-search-grid-return-date"
            "cf-search-grid-equipment-type"
            "cf-search-grid-quantity"
            "cf-search-grid-submit"
    }
}