.gmap-container {
    margin-top: 1rem;
    position:relative;
}

    .gmap-container .map-statusbar{
        display: none;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        padding:.5rem;
        text-align:center;
        background-color:#960000;
        color:#fff;
        z-index:100099;
    }

    .gmap-container .map-statusbar.active {
        display: block;
    }

    #map {
        height: 400px;
        width: 100%;
    }

.map-controls {
    display: flex;
    align-items: stretch;
    margin: 1rem;
    flex-flow: column nowrap;
}

    .map-controls .vertical-spacer {
        margin: 0 .5rem;
        position: relative;
    }

        .map-controls .vertical-spacer::before {
            position: absolute;
            top: 0px;
            left: 0px;
            content: " ";
            height: 100%;
            width: 2px;
            background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(235, 235, 235,1) 17%, rgba(235, 235, 235,1) 49%, rgba(235, 235, 235,1) 85%, rgba(255,255,255,1) 100%);
        }

    .map-controls > *:first-child {
        flex: 1;
        flex-flow: row nowrap;
        padding-right: 1rem;
    }

    .map-controls input[type=text] {
        border-radius: 0 !important;
        width: 100%;
        padding: .25rem;
        margin: 0;
    }

    .map-controls .control-container {
        flex: 1;
        display: flex;
        flex-flow: row nowrap;
    }

        .map-controls .control-container .container-body {
            flex: 1;
            display: flex;
            flex-flow: row nowrap;
            border: 1px solid #999;
            padding: .25rem;
        }

    .map-controls header {
        background-color: #999;
        color: #fff;
        padding: .5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        flex: 0 1 auto;
        width: auto;
    }

        .map-controls header.active {
            background-color: rgba(0,79,163,1);
        }

        .map-controls header svg {
            display: inline-block;
            height: 1em;
        }

    .map-controls > .zoom-selection {
        font-weight: normal;
    }

    .map-controls > *:last-child {
        flex: 1;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

    /* map controls location container */
    .map-controls .location-container {
        padding: 0 0 .5rem 0;
    }

        .map-controls .location-container > .location-input {
            flex: 1;
        }

            .map-controls .location-container > .location-input > input {
                width: 100%;
            }



    /* map controls location container */
    .map-controls .filter-container {
        flex: 1;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }

        .map-controls .filter-container .keyword-filter {
            flex: 1;
        }

        .map-controls .filter-container .distance-filter {
            display: flex;
            align-items: center;
            flex: 0 1 auto;
        }

            .map-controls .filter-container .distance-filter label {
                padding-right: .25rem;
            }

.status-bar {
    display:none;
    text-align:center;
}
.status-bar.active {
    display:block;
}

status-bar.alert-message{
    color:red;
}

.highlighted-clinics {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.clinic-list-container {
    padding: .5rem;
}

.clinic-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
}

    .clinic-list > li {
        list-style: none;
        display: block;
    }

        .clinic-list > li > .location-card {
            border: 1px solid #f5f5f5;
            background: #FFF;
        }

            .clinic-list > li > .location-card.highlighted {
                border: 1px solid #f5f5f5;
                background: #FFF;
            }

        .clinic-list > li header {
        }

.location-card header > h3 {
    padding: .25rem;
    margin: 0;
    font-size: .85rem;
    background-color: rgba(245, 245, 245, 1.00);
}

.location-card.highlighted header > h3 {
    color: #fff;
    background-color: rgba(0,79,163,1);
}

.clinic-list > li article {
    padding: .375rem;
    margin-bottom: .5rem;
}

    .clinic-list > li article .country {
    }

.clinic-list > li footer {
    padding: .375rem;
    display: flex;
    justify-content: center;
    position: relative;
}

    .clinic-list > li footer::before {
        position: absolute;
        top: -2px;
        left: 0px;
        content: " ";
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(235, 235, 235,1) 17%, rgba(235, 235, 235,1) 49%, rgba(235, 235, 235,1) 85%, rgba(255,255,255,1) 100%);
    }

div.info-content {
    padding: .5rem;
}

    div.info-content .info-header {
        font-weight: bold;
        margin-bottom: .5rem;
        position: relative
    }

        div.info-content .info-header::after {
            position: absolute;
            bottom: -4px;
            left: 0px;
            content: " ";
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(220, 220, 220,1) 17%, rgba(220, 220, 220,1) 49%, rgba(220, 220, 220,1) 85%, rgba(255,255,255,1) 100%);
        }

    div.info-content .info-address {
        padding: .5rem 0;
    }

    div.info-content .info-phone {
        padding-top: .5rem 0;
    }

@media (min-width: 1032px) {

    .clinic-list-container {
        padding: 0;
    }


    .map-controls {
        max-width: 1000px;
        margin: 0 auto;
    }

    .clinical-locations {
        max-width: 1000px;
        margin: 0 auto;
        margin-top: 1rem;
    }
}

@media (min-width: 700px) {
    .clinic-list {
        grid-template-columns: 1fr 1fr;
    }

    .map-controls {
        margin-bottom: 1rem;
        flex-flow: row nowrap;
    }

        .map-controls .location-container {
            padding: 0 .5rem 0 0;
        }
}

@media (max-width: 699px) {
    .map-controls > *:first-child {
        
    }
}