/*
Set up CSS map as single-column grid with optional 2-column
*/

/*
Set up CSS map as single-column grid with optional 2-column
*/
#col-main {
    display: grid;
    grid-template-columns: 1fr;

}

#store_map {
    width: 100%
}

.addresses {
    grid-column: 1;
    grid-row: 3;
    width:100%;
}

/* Optional layouts for double column when addresses column is not removed by app block setting  */

#col-main.show-addresses {
    grid-template-columns: 40% 60%;
}

.show-addresses div#store_map{
    grid-column: 2;
    grid-row: 3;
}

.show-addresses h2#store-locator-title {
    grid-column: 1/span 2;
}

.show-addresses .search_bar {
    grid-column: 1/span 2;
    display:revert;
}


/* ============== DIRECTIONS ==============  */

#directions_text {
    display: initial;
    height: 400px;
    overflow: hidden;
    padding-right: initial;
    width: initial;
}

/*Responsive Maps*/

@media (max-width: 510px) {

    div#col-main.show-addresses {
        grid-template-columns: 1fr;
    }
    fieldset{
        display:grid;
    }

    .search_bar{
        grid-template-columns: 1fr 1fr;
    }
    .search_bar .main_search_bar, .search_bar button, #address_search, #submitBtn {
        grid-column: 1 / span 2;
    }
    .main_search_label {
        margin-bottom: 5px;
    }

    .search_filters {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .search_bar .search_within_distance, .search_bar .search_limit {
        margin-bottom: 10px;
    }
    .search_filters .search_filter {
        width:auto;
    }

    #store_map {
        height: 250px !important;
    }
    .show-addresses div#store_map{
        grid-column: 1;
    }
    .addresses {
        grid-row: 4;
    }
}

#submitBtn {
    float:none;
}