.b_search_routes {

    --button-font-size: 18px;

    padding: 16px 10px;
    background: #FFF;
    border-radius: 10px;
    form{
        display: grid;
        /* +5px in grid for padding */
        grid-template-columns: repeat(3, calc(33.3% - 77px)) 215px;
        align-items: end;
        gap: 5px;
        [data-type="location"] {
            &:first-of-type{
                .w_select_country_header{
                    --select-border-radius: 10px 0 0 10px;
                    &.closed{
                        --select-border-radius: 10px 0 0 10px;
                    }
                }
            }
            .w_select_country_header{
                --select-border-radius: 0;
                &.closed{
                    --select-border-radius: 0;
                }
            }
        }
        .w_daterangepicker{
            --range-picker-border-radius: 0 10px 10px 0;
        }
        .field_container{
            --label-font-size: 14px;
            --label-font-weight: 400;
            --label-color: #27242499;
        }
        @media (max-width: 800px) {
            grid-template-columns: repeat(2, 1fr);
            [data-type="date"], button {
                grid-column: span 2;
                height: fit-content;
            }
            .w_daterangepicker{
                --range-picker-border-radius: 0 0 10px 10px;
            }
            [data-type="location"][data-name="to_city"] {
                .w_select_country_header{
                    --select-border-radius: 0 10px 0 0;
                    &.closed{
                        --select-border-radius: 0 10px 0 0;
                    }
                }
            }
            [data-type="location"][data-name="from_city"] {
                .w_select_country_header{
                    --select-border-radius: 10px 0 0 0;
                    &.closed{
                        --select-border-radius: 10px 0 0 0;
                    }
                }
            }
        }
        @media (max-width: 576px) {
            grid-template-columns: 1fr;
            [data-type="date"], button {
                grid-column: unset;
                height: fit-content;
            }
            .w_daterangepicker{
                --range-picker-border-radius: 0 0 10px 10px;
            }
            [data-type="location"][data-name="to_city"] {
                .w_select_country_header{
                    --select-border-radius: 0 0 0 0;
                    &.closed{
                        --select-border-radius: 0 10px 0 0;
                    }
                }
            }
            [data-type="location"][data-name="from_city"] {
                .w_select_country_header{
                    --select-border-radius: 10px 10px 0 0;
                    &.closed{
                        --select-border-radius: 10px 10px 0 0;
                    }
                }
            }
        }
    }
    button{
        padding: 17px 0;
        background: #FF613A;
        font-size: var(--button-font-size);
        font-weight: 600;
        margin: 0;
        height: calc(100% - 27px);
    }
}