/* MAP */
.map_wrap {
    display : flex;
    position: relative;
    z-index : 1;
}

#map {
    width        : 60%;
    border-radius: 0 24px 24px 0;
}

#map,
.map_filter_by {
    height: 80vh;
}

.locations_list {
    height                    : calc(80vh - 141px);
    overflow-y                : scroll;
    -webkit-overflow-scrolling: touch;
    padding-top               : 10px;
}

/* .locations_list::-webkit-scrollbar {
    width: 5px;
}
.locations_list::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.locations_list::-webkit-scrollbar-thumb {
    background: #888;
}
.locations_list::-webkit-scrollbar-thumb:hover {
    background: #555;
} */

.off_canvas {
    position     : absolute;
    height       : 100%;
    width        : 100%;
    background   : #F9F9F9;
    z-index      : 1;
    border-radius: 20px 0 0 20px;
    left         : -100%;
    transition   : left .5s ease;
}

.off_canvas._active {
    left      : 0%;
    overflow-y: auto;
}

.close_canvas {
    position: absolute;
    right   : 20px;
    top     : 25px;
    cursor  : pointer;
}

.close_canvas:before {
    content: url('/wp-content/uploads/2020/11/close_icon.svg');
}

.map_filter_by {
    width        : 40%;
    background   : #F9F9F9;
    border-radius: 24px 0 0 24px;
    position     : relative;
    overflow     : hidden;
}

.filter_options {
    padding      : 0 20px;
    border-bottom: 1px solid rgba(186, 222, 245, .25);
}

.filter_options_wrap {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 20px;
    padding-right  : 20px;
}

.filter_by_title {
    font-family: "Avenir Next Bold";
    font-size  : 18px;
    font-size  : 1rem;
    line-height: 30px;
    color      : #424242;
    text-align : center;
    margin     : 30px 0;

}

.filter_options_wrap div {
    font-family: "Avenir Next";
    font-weight: 500;
    font-size  : 18px;
    font-size  : 1rem;
    line-height: 30px;
    color      : #424242;
    cursor     : pointer;

}

.filter_options_wrap div:after {
    content    : "\f067";
    font-family: "Font Awesome 5 Free";
    color      : #01A267;
    font-size  : 14px;
    font-weight: 900;
    margin-left: 5px;
}


.map_wrap:after {
    content      : '';
    position     : absolute;
    height       : 100%;
    width        : 100%;
    border-radius: 24px;
    background   : #01a267;
    z-index      : -1;
    left         : 15px;
    top          : 15px;
}

.input-wrapper {
    display    : flex;
    align-items: center;
    position   : relative;
}

.input-wrapper svg {
    transform: scale(1.2);
}

.input-wrapper input {
    height       : 60px;
    width        : 100%;
    border       : none !important;
    border-radius: 80px;
    padding-left : 30px;
    margin-left  : 25px;
}

.input-wrapper input,
.input-wrapper input::placeholder {
    font-family: "Avenir Next";
    font-weight: 500;
    font-size  : 18px;
    line-height: 30px;
    text-align : left;
    color      : #424242;
}

.input-wrapper .button.yellow {
    position: absolute;
    right   : 0;
    cursor  : pointer;
}

.input-wrapper .button.yellow.location_finder_btn a {
    font-size: 15px !important;
    padding  : 21px 40px !important;
}

.input-wrapper>svg {
    max-width: 190px;
}

.not_in_mi .fl-button-text {
    font-family: "Avenir Next Bold";
    font-size  : 0.8889rem;
    font-size  : 16px;
    line-height: 30px;
}

.not_in_mi .fl-button:hover .fl-button-icon {
    transform: translateX(10px);
}

.location_icon {
    position  : absolute;
    right     : 40px;
    top       : 40px;
    cursor    : pointer;
    transition: transform .5s ease;
}

.location_icon svg {
    max-width: 42px;
}

.location_icon:hover {
    transform: scale(1.2);
}

.location-item {
    padding      : 20px;
    margin       : 0 20px 10px 20px;
    background   : #fff;
    filter       : drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.04));
    cursor       : pointer;
    border-radius: 10px;
    position     : relative;
}

.location-item:after {
    content  : url('/wp-content/uploads/2020/11/location_item_left_arrow_icon.svg');
    position : absolute;
    right    : 15px;
    top      : 50%;
    transform: translateY(-50%);
}

.location-item:hover {
    transform : scale(1.02);
    transition: transform .2s ease;
}

.card-title {
    font-family   : "Avenir Next Bold";
    font-size     : 21px;
    font-size     : 1.1667rem;
    line-height   : 24px;
    color         : #424242;
    text-transform: uppercase;
    margin        : 0 !important;
    margin-bottom : 5px !important;
}

.location-item p,
.infowindow-data p {
    font-family  : "Avenir Next";
    font-weight  : normal;
    font-size    : 15px;
    font-size    : 0.8333rem;
    line-height  : 26px;
    color        : #707070;
    margin       : 0 !important;
    margin-bottom: 20px !important;
}

.infowindow-data {
    margin: 10px;
}

.infowindow-data p {
    color: #424242;
}

.infowindow-badges {
    display    : flex;
    align-items: center;
}

.infowindow-badges>div {
    margin-right: 6px;
}

.location_type_badge,
.incentive_type_badge {
    border-radius: 5px;
    font-family  : "Avenir Next";
    font-weight  : 500;
    font-size    : 12px;
    font-size    : 0.6667rem;
    color        : #424242;
    padding      : 6px 12px 6px 20px;
    position     : relative;
    width        : max-content;
}

.location_type_badge:before,
.incentive_type_badge.misc_inc:before {
    content      : '';
    width        : 8px;
    height       : 8px;
    background   : #424242;
    position     : absolute;
    border-radius: 100%;
    left         : 8px;
    top          : calc(50% - 4px);
}

.incentive_type_badge {
    background: #D6EBF9;
    padding   : 6px 12px 6px 20px;
}

.incentive_type_badge:before {
    position : absolute;
    left     : 3px;
    transform: scale(0.7) translateY(-50%);
    top      : 45%;
}

.incentive_type_badge.automatic_at_register:before {
    top      : 38%;
}

.incentive_type_badge.store_loyalty:before {
    top      : 43%;
}
.incentive_type_badge.store_loyalty,
.incentive_type_badge.automatic_at_register {
    padding: 6px 12px 6px 26px !important;
}

.incentive_type_badge.tokens,
.incentive_type_badge.yes_card,
.incentive_type_badge.double_card,
.incentive_type_badge.double_app {
    padding: 6px 12px 6px 24px !important;
}

.incentive_type_badge.double_app:before,
.incentive-filter-item.double_app:before {
    content: url('/wp-content/uploads/2020/12/double-up-card-app.svg');
}

.incentive_type_badge.double_card:before,
.incentive-filter-item.double_card:before {
    content: url('/wp-content/uploads/2020/11/dufb-card.svg');
}

.incentive_type_badge.tokens:before,
.incentive-filter-item.tokens:before {
    content: url('/wp-content/uploads/2020/11/tokens.svg');
}

.incentive_type_badge.coupon:before,
.incentive-filter-item.coupon:before {
    content: url('/wp-content/uploads/2020/11/coupon.svg');
}

.incentive_type_badge.yes_card:before,
.incentive-filter-item.yes_card:before {
    content: url('/wp-content/uploads/2020/11/yes-card.svg');
}

.incentive_type_badge.store_loyalty:before,
.incentive-filter-item.store_loyalty:before {
    content: url('/wp-content/uploads/2020/12/store-loyalty.svg');
}

.incentive_type_badge.automatic_at_register:before,
.incentive-filter-item.automatic_at_register:before {
    content: url('/wp-content/uploads/2020/12/automatic-at-register.svg');
}

.grocery_location {
    background: #ffca38;
}

.farm_location {
    background: #75C159;
}

.how_it_works_list {
    white-space: break-spaces;
    font-size: 15px !important;
    margin-top: 20px;
}

/* ICONS */
.location-filter-item,
.incentive-filter-item {
    display    : flex;
    align-items: center;
}

.location-filter-item.yellow_icon:before,
.location-filter-item.green_icon:before {
    transform   : scale(0.8);
    display     : inline-block;
    line-height : 0;
    margin-right: 10px;
}

.location-filter-item.yellow_icon:before {
    content: url('https://doubleupfoodbucks.org/wp-content/uploads/2020/11/location_icon_yellow.svg');
}

.location-filter-item.green_icon:before {
    content: url('https://doubleupfoodbucks.org/wp-content/uploads/2020/11/location_icon_green.svg');
}

.incentive-filter-item:before {
    margin-right: 10px;
    line-height : 1;
}

/* FILTER OFFCANVAS */
.filter_by_title_off_canvas {
    font-family   : "Avenir Next Bold";
    font-size     : 33px;
    line-height   : 32px;
    font-size     : 1.8333rem;
    line-height   : 1.7778rem;
    color         : #424242;
    text-transform: uppercase;
}

/* LOCATIONS OFFCANVAS */
.location_name {
    font-family   : "Avenir Next Bold";
    font-size     : 33px;
    line-height   : 32px;
    font-size     : 1.8333rem;
    line-height   : 1.7778rem;
    color         : #424242;
    text-transform: uppercase;
    max-width     : calc(100% - 40px);
}

.location_address,
.location_phone {
    font-family: "Avenir Next";
    font-weight: normal;
    color      : #424242;
}

.location_address {
    font-size: 15px;
    font-size: 0.8333rem;
}

.location_phone {
    font-size: 16px;
    font-size: 0.8889rem;
}

.section_title {
    font-family: "Avenir Next Bold";
    font-size  : 17px;
    font-size  : 0.9444rem;
    color      : #424242;
}

.map_link {
    font-family: "Avenir Next Bold";
    font-size  : 16px;
    font-size  : 0.8889rem;
    color      : #01a267 !important;
}

.map_link:hover,
.map_link:active,
.map_link:focus {
    text-decoration: underline !important;
    color          : #01a267 !important;
}

.get_directions:before {
    content    : url('/wp-content/uploads/2020/11/get_directions_icon.svg');
    line-height: 1.1;
}

.off_canvas_content {
    padding: 30px 0;
}

.off_canvas_content ._section:first-child {
    padding-top: 0 !important;
}

.off_canvas_content ._section {
    padding      : 30px;
    border-bottom: 1px solid rgba(186, 222, 245, .25);
}

._section table {
    width     : 100%;
    margin-top: 20px;
}

._section .item {
    margin-bottom: 20px;
}

._section.no-padding {
    padding: 0 !important;
}

._section.no-border {
    border-bottom: none !important;
}

.hours_wrap .day,
.hours_wrap .hours {
    font-family: "Avenir Next";
    font-size  : 16px;
    font-size  : 0.8889rem;
    color      : #424242;
}

.hours_wrap .day {
    font-weight: normal;
}

.hours_wrap .hours {
    font-family: "Avenir Next Bold" !important;
}

._section.no-padding .section_title {
    padding: 20px;
}

.filter-item {
    cursor     : pointer;
    font-family: "Avenir Next";
    font-weight: 500;
    font-size  : 16px;
    font-size  : 0.8889rem;
    color      : #424242;
    padding    : 10px 20px;
    position   : relative;
}

.filter-item:hover {
    background: rgba(175, 175, 175, .08);
}

.filter-item:hover:after,
.filter-item.active:after {
    content  : url('/wp-content/uploads/2020/11/check_icon.svg');
    position : absolute;
    right    : 30px;
    top      : 50%;
    transform: translateY(-50%);
}

.filter-item.active {
    background: rgba(175, 175, 175, .08);
}

/* SHORTCODES */
.d-flex {
    display: flex;
}

.d-flex.align-center {
    align-items: center;
}

.d-flex .space-right {
    margin-right: 20px;
}

.hidden_ {
    display: none !important;
}

/* SEE ALL LOCATIONS BUTTON */
.see_all_locations {
    text-align: center;
    margin    : 20px 0;
}

.see_all_locations a {
    cursor: pointer;
}

/* SWEET ALERTS */
.swal-modal {
    padding      : 30px;
    border-radius: 24px;
}

.swal-title {
    font-family   : "Avenir Next Bold";
    font-size     : 21px;
    font-size     : 1.1667rem;
    color         : #424242;
    text-transform: uppercase;
}

.swal-text {
    font-family: "Avenir Next";
    font-size  : 15px;
    font-size  : 0.8333rem;
    color      : #707070;
    text-align : center;
}

.swal-footer {
    text-align: center !important;
}

.swal-button {
    background    : var(--yellow-light) !important;
    font-family   : "Avenir Next Bold";
    font-size     : 15px !important;
    font-size     : 0.9375rem !important;
    letter-spacing: 0.09rem !important;
    color         : var(--gray-dark) !important;
    padding       : 21px 40px !important;
    border-radius : 100px !important;
    border        : 0 !important;
    text-transform: uppercase;
}

.swal-button:hover,
.swal-button:active,
.swal-button:focus {
    transform: scale(1.1);
    border   : none !important;
}

/* IPHONE FIX */
.locations_list,
body.page-id-35 {
    -webkit-overflow-scrolling: touch !important;
}

.location-item {
    overflow-x: hidden !important;
    transform : translateZ(0px) !important;
}

/* RESPONSIVE */
@media only screen and (max-width: 992px) {

    /* FIND A LOCATION */
    .map_wrap {
        flex-direction: column-reverse;
        display       : flex;
    }

    .map_wrap:after {
        display: none;
    }

    .map_filter_by,
    #map {
        width: 100%;
    }

    #map {
        height: 50vh;
    }

    #map,
    .map_filter_by {
        border-radius: 0;
    }

    .map_row .fl-row-content {
        padding-left : 0px !important;
        padding-right: 0px !important;
    }

    .location_icon {
        right: 20px;
        top  : 20px;
    }

    .input-wrapper {
        display: block;
        text-align: center;
    }

    .input-wrapper svg {
        transform: scale(1.2);
        margin-bottom: 20px;
    }

    .input-wrapper input {
        margin-left: 0px;
        font-size  : 16px;
    }
    
    .input-wrapper input::-webkit-input-placeholder {
        font-size  : 16px;   
    }
    .input-wrapper input::-moz-placeholder {
        font-size  : 16px;   
    }
    .input-wrapper input:-ms-input-placeholder {
        font-size  : 16px;   
    }
    .input-wrapper input::placeholder {
        font-size  : 16px;   
    }

    .input-wrapper .button.yellow.location_finder_btn a {
        padding: 21px !important;
    }

    .input-wrapper .button.yellow {
        bottom: 0px;
    }

}