/*Medpoint locations card styles that will affect both the landing page and urgent care page */

.section-beacon-light-gray.home{
    background: #f1f4f5;
}

.medpoint-locations {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: 20px;
}
.medpoint-locations .medpoint-location, .nearest-medpoint-locations .medpoint-location{
    background: #FFFFFF;
    padding:20px;
    border: solid 1px #e7e7e7;
    border-radius: 5px;
    margin: 0 10px;
}
.medpoint-locations .medpoint-location:hover{
    background: #fff;
}
.medpoint-locations .medpoint-location .medpoint-title, .nearest-medpoint-locations .medpoint-location .medpoint-title{
    border: none !important;
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 20px;
}
.medpoint-locations .medpoint-location .medpoint-title a, .nearest-medpoint-locations .medpoint-location .medpoint-title a{
    color: #CE2335 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.medpoint-locations .medpoint-location .location-additional-info{
    margin-top: 20px;
}
.medpoint-locations .medpoint-location .location-additional-info .pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.nearest-medpoint-locations .medpoint-location .location-ctas .pills {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    row-gap: 7px;
}
.medpoint-locations .medpoint-location .location-additional-info .pills .pill, .nearest-medpoint-locations .medpoint-location .location-ctas .pills .pill {
    border: solid 1px #CACACA;
    border-radius: 5px;
    padding: 8px 16px;
}

.medpoint-locations .medpoint-location .location-additional-info .pills .pill.call *, .nearest-medpoint-locations .medpoint-location .location-ctas .pills .pill.call *,
.medpoint-locations .medpoint-location .location-additional-info .pills .pill.direction *, .nearest-medpoint-locations .medpoint-location .location-ctas .pills .pill.direction *{
    color: #606060 !important;
}
.medpoint-locations .medpoint-location .location-additional-info .pills .pill.video-visit, .nearest-medpoint-locations .medpoint-location .location-ctas .pills .pill.video-visit{
    background: #007298;
    color: #fff !important;
 }
.medpoint-locations .medpoint-location .location-additional-info .pills .pill.save-my-spot, .nearest-medpoint-locations .medpoint-location .location-ctas .pills .pill.save-my-spot{
    background: #E75301;
    color: #fff !important;
}

.medpoint-locations .medpoint-location .walk-in-people,
.medpoint-locations .medpoint-location .walk-in-people i{
    color: #000 !important;
}
.medpoint-locations .medpoint-location .walk-in-people .bold{
    font-weight: bold ;
    text-decoration:underline;
    color: #000 !important;
}
.medpoint-locations .medpoint-location .location-hours{
    margin-bottom: 5px;
}
.medpoint-locations .medpoint-location .location-hours .black-text,
.medpoint-locations .medpoint-location .location-hours,
.medpoint-locations .medpoint-location .location-hours i,
.medpoint-location .address-info > *,
.nearest-medpoint-locations .location-info *
{
    color: #000 !important;
}

.medpoint-locations .slick-arrow {
    color: #000 !important;
    z-index: 1;
}
.medpoint-locations .fa-chevron-left{
    left: 20px;
}
.medpoint-locations .fa-chevron-right{
    right: 20px;
}

.nearest-medpoint-locations .flex.ctas {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.nearest-medpoint-locations .location-hours {
    margin: 0 0 10px 0;
}
.nearest-medpoint-locations .medpoint-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.nearest-medpoint-locations .medpoint-title .distance{
    font-style: italic;
    white-space: nowrap;
    padding-left: 4px;
    color: #000 !important;
    font-weight: normal;
    font-size: .9em;
}
.nearest-medpoint-locations .walk-in-people{
    margin-bottom:15px;
}

.medpoint-location .flex.ctas{
    display: flex;
    gap: 10px;
}
.medpoint-location .flex.ctas .location-additional-info{
    display: flex;
    gap: 10px;
}
.medpoint-location .flex.ctas .location-info {
    flex: 0 0 60%;
}
.medpoint-locations .medpoint-location .location-ctas .pills {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    row-gap: 7px;
}

@media screen and (max-width: 678px) {
    #map{
        display: none;
    }
}