@font-face {
        font-family: 'Avenir Next';
        src: url("../../fonts/avenir/AvenirNextLTPro-Regular.woff");
    }

    body {
        margin: 0;
        max-width: 100% !important;
    }
     header input{
        border-bottom: 1px solid var(--black);
    background-color: transparent;
    border-radius: 0px;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    padding-bottom: 12px;
    padding-left: 0px;
    padding-top: 12px;
    color: var(--black) !important;
    font-size: 16px;
    width: 100%;
    transition: all 0.3s;
    cursor: pointer;

    }

    input:focus, input:active, select:focus{
        outline: 0;
    border-bottom: 2px solid var(--primary-orange) !important;
    }

    .mapboxgl-canvas {
        width: 100%;
    }

    .fleetcard {
        /*height: calc(100vh - 100px - env(safe-area-inset-bottom)); */
        margin-top: 100px;
        height: calc(100% - 100px);
        width: 100%;
        position: fixed;
    }

    #fleetcard-map {
        height: 100%;
    }

    .mapboxgl-popup-mobile-position {
        transform: none !important;
        /* top: 140px;
            height: calc(100% - 140px); */
        width: 100%;
        height: 100%;
        background-color: #fff;
        justify-content: center;
    }

    .mapboxgl-popup {
        max-width: 100% !important;
        z-index: 2;
    }

    .mapboxgl-popup .mapboxgl-popup-content {
        border-radius: 20px;
        padding: 0px;
        overflow-y: scroll;
        box-shadow: none;
    }

    .mapboxgl-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
        font-size: 26px;
        color: #FF6600;
        top: 28px;
        right: 28px;
    }


    /* FILTER AMENITIES*/
    .fleetcard-map__filter {
        position: absolute;
        right: 20px;
        top: 149px;
        z-index: 1;
        display: inline-block;
        height: 50px;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible {
        width: calc(100% - 44px);
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title {
        justify-content: space-between;
        border-radius: 20px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .fleetcard-map__filter div.fleetcard-map__filter__content {
        padding: 0;
        display: none;
        margin: 0;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__content {
        display: block;
        height: 150%;
    }

    .fleetcard-map__filter__title span {
        display: none;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title span {
        display: block;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
        background-color: #FF6600;
        background-repeat: no-repeat;
        background-image: url('../../img/fleetcard/arrow-white-up.svg');
        border-radius: 30px;
        margin-right: 2px;
        background-position: center;
        padding: 17px;
    }

    .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title {
        padding: 0px 0px;
    }

    .fleetcard-map__filter__title {
        display: flex;
        background: #fff;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        padding: 0px 17px;
        border-radius: 30px;
        font-family: 'Avenir Next';
    }

    .fleetcard-map__filter__title span {
        font-size: 18px;
        font-weight: 600;
    }

    .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
        width: 16px;
        height: 16px;
        background-image: url('../../img/fleetcard/arrow-down.svg');
        background-repeat: no-repeat;
    }

    .fleetcard-map__filter__subtitle {
        display: flex;
        align-items: center;
        background: #fff;
        height: 60px;
        border-bottom: 1px solid rgba(196, 196, 196, 0.5);
    }

    .fleetcard-map__filter__subtitle p {
        color: #5000A0;
        font-size: 15px;
        margin: 0px;
        padding-left: 0px;
        font-family: 'Avenir Next';
        font-weight: 600;
    }

    #fleetcard-map__filter__dropdown {
        background: #fff;
        padding: 18px 0px;
        margin: 0;
        overflow-y: scroll;
        /* height: 280px; */
    }

    .fleetcard-map__filter__dropdown__checkbox input {
        -webkit-appearance: none;
        width: 19px;
        height: 19px;
        border: 1px solid #C4C4C4;
        margin: 0px;
        font-family: 'Avenir Next';
    }

    .fleetcard-map__filter__dropdown__checkbox {
        margin-bottom: 11px;
        display: flex;
        align-items: center;
    }

    .fleetcard-map__filter__dropdown__checkbox label {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        user-select: none;
        cursor: pointer;
        margin-left: 14px;
        font-family: 'Avenir Next';
    }

    .fleetcard-map__filter__dropdown__checkbox input:checked {
        background-color: #fff;
        border-color: #C4C4C4;
        background-image: url('../../img/fleetcard/checkbox-tick.svg');
        background-size: 12px;
        background-repeat: no-repeat;
        background-position: center;
    }





    /* DIRECTIONS INPUT FIELDS */
    .mapboxgl-ctrl-geocoder ul {
        border-radius: 20px;
        background: #fff;
        padding: 15px 0px;

    }

    .mapboxgl-ctrl-geocoder ul li a {
        padding: 10px;
        border-bottom: 0px;
    }

    .mapboxgl-ctrl-top-left {
        width: 100%;
    }

    .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
        margin: 22px 0 0;
    }

    .mapboxgl-ctrl-directions {
        width: 100%;
        margin: 0px;
        max-width: none;
    }

    .mapbox-directions-component-keyline {
        border-radius: 0;
        box-shadow: none;
        height: 50px;
        width: 100%;
        max-width: 860px;
    }

    .mapbox-directions-component-keyline .mapboxgl-ctrl-geocoder {
        border-radius: 20px;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .mapboxgl-ctrl-logo,
    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-compass,
    .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib,
    .mapbox-directions-component-keyline .directions-reverse,
    .mapbox-directions-component-keyline .mapbox-directions-origin label,
    .mapbox-directions-component-keyline .mapbox-directions-destination label {
        display: none !important;
    }


    .mapbox-directions-component-keyline .mapbox-directions-origin,
    .mapbox-directions-component-keyline .mapbox-directions-destination {
        margin: 0px 22px 10px;
    }

    .mapboxgl-ctrl-geocoder input[type='text'] {
        box-shadow: none;
        height: 50px;
        width: 100%;
        max-width: 426px;
        padding-left: 18px;
        font-family: Avenir Next;
        font-size: 18px;
        font-weight: 500;
        line-height: 25px;
        letter-spacing: 0em;
        color: #2B2B2B;
    }

    .mapboxgl-ctrl-geocoder input[type='text']::placeholder {
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
        color: #D8D8D8;
        margin-left: 18px;
        transform: translate3d(0, 2px, 0)
    }

    /* GEO LOCATION */
    .mapboxgl-ctrl-geocoder .geocoder-pin-right * {
        top: 15px;
    }

    .mapboxgl-ctrl-group .mapboxgl-ctrl-geolocate {
        width: 50px;
        height: 50px;
        box-shadow: none !important;
        border-radius: 20px !important;
    }

    .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
        box-shadow: none !important;
        border-radius: 20px !important;
        margin: 22px;
    }

    .mapboxgl-ctrl-group:not(:empty) {
        box-shadow: none;
    }

    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
        background-image: url('../../img/fleetcard/arrow-geolocation.svg')
    }

    .mapboxgl-ctrl-bottom-left {
        display: none;
    }

    .fleetcard-map__openmaps {
        position: absolute;
        z-index: 1;
        bottom: 20px;
        left: 20px;
        width: 192px;
    }

    .fleetcard-map__openmaps .fleetcard-map__openmaps__btn {
        height: 50px;
        border: none;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        border-radius: 30px;
        align-items: center;
        padding: 0px 23px;
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #FF6600;
        text-decoration: none;
    }

    .fleetcard-map__openmaps .fleetcard-map__openmaps__icon {
        background-image: url('../../img/fleetcard/arrow-right-orange.svg');
        width: 25px;
        height: 16px;
        background-repeat: no-repeat;
        background-color: #fff;
    }


    /* STATION MODAL */
    .station {
        padding: 28px 0px;
        border-radius: 20px;
    }

    .station__header,
    .station__details,
    .station__amenities {
        padding: 0px 28px;
    }

    .station hr {
        margin: 0px;
    }

    .station__header p {
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 22px;
        line-height: 30px;
        color: #5000A0;
        margin-top: 0;
        text-transform: capitalize;
    }

    .station__details .station__details__title,
    .station__amenities .station__amenities__title {
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 20px;
        color: #5000A0;
    }

    .station__details .station__details__item {
        display: flex;
        text-transform: capitalize;
    }

    .station__details__item .station__details__item__title {
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 18px;
        min-width: 60px;
        color: #C4C4C4;
    }

    .station__details__item .station__details__item__data {
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 20px;
        max-width: 300px;
        color: #2B2B2B;
        padding-left: 16px;
    }

    .station .station__amenities {
        display: flex;
    }

    .station .station__amenities,
    .station .station__details {
        padding-top: 15px;
    }

    .station .station__amenities .station__amenities__item {
        display: flex;
    }

    .station .station__amenities .station__amenities__item img {
        width: 13px;
        margin: 0px 14px;
    }

    .station .station__amenities ul {
        -webkit-column-count: 2;
        column-count: 2;
    }

    .station .station__amenities .station__amenities__item {
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 20px;
        color: #2B2B2B;
    }

    .station .station__openmaps {
        height: 50px;
        border: none;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        border-radius: 30px;
        width: 191px;
        align-items: center;
        padding: 0px 23px;
        margin-top: 20px;
        margin-left: 28px;
        font-family: 'Avenir Next';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        color: #FF6600;
        text-decoration: none;
        border: 1px solid #FF6600;
    }

    .station__openmaps .station__openmaps__icon {
        background-image: url('../../img/fleetcard/arrow-right-orange.svg');
        width: 25px;
        height: 16px;
        background-repeat: no-repeat;
        background-color: #fff;
    }



    @media only screen and (min-width: 992px) {

        .fleetcard {
            height: 100vh;
            padding-top: 130px;
            margin-top: 0px;
        }


        .mapboxgl-ctrl-top-left {
            display: flex;
            flex-direction: row-reverse;
            margin-left: 100px;
        }

        .mapboxgl-ctrl-top-left .mapboxgl-ctrl-group {
            box-shadow: none !important;
            border-radius: 20px !important;
            margin-right: 11px !important;
        }

        /* STATION CARD */

        .mapboxgl-popup .mapboxgl-popup-content {
            overflow-y: unset;
        }

        .station {
            max-width: 410px;
        }

        /* FILTER AMENITIES*/
        .fleetcard-map__filter {
            position: absolute;
            right: 100px;
            top: 16px;
            z-index: 1;
            display: inline-block;
            background: #fff;
            width: 100%;
            max-width: 293px;
            height: 50px;
            border-radius: 20px;
        }

        .fleetcard-map__filter.fleetcard-map__filter--visible {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .fleetcard-map__filter div.fleetcard-map__filter__content {
            padding: 0;
            display: none;
            margin: 0;
        }

        .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__content {
            height: auto;
        }

        .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title {
            padding: 0px 28px;
        }

        .fleetcard-map__filter.fleetcard-map__filter--visible .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
            background-color: #fff;
            background-image: url('../../img/fleetcard/arrow-down.svg');
            padding: 0px;
            margin-right: 0px;
        }

        .fleetcard-map__filter__title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            padding: 0px 28px;
        }

        .fleetcard-map__filter__title span {
            font-size: 18px;
            display: block;
        }

        .fleetcard-map__filter__title .fleetcard-map__filter__title__arrow {
            width: 16px;
        }

        .fleetcard-map__filter__subtitle {
            display: flex;
            align-items: center;
            background: #fff;
            height: 60px;
            border-bottom: 1px solid rgba(196, 196, 196, 0.5);
        }

        .fleetcard-map__filter__subtitle p {
            color: #5000A0;
            font-size: 15px;
            margin: 0px;
            padding-left: 28px;
        }

        #fleetcard-map__filter__dropdown {
            background: #fff;
            padding: 26px;
            margin: 0;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            overflow-y: unset;
            height: unset;
        }

        .fleetcard-map__filter__dropdown__checkbox input {
            -webkit-appearance: none;
            width: 19px;
            height: 19px;
            border: 1px solid #C4C4C4;
        }

        .fleetcard-map__filter__dropdown__checkbox {
            margin-bottom: 11px;
            display: flex;
            align-items: center;
        }

        .fleetcard-map__filter__dropdown__checkbox label {
            display: inline-block;
            font-size: 15px;
            font-weight: 600;
            user-select: none;
            cursor: pointer;
            margin-left: 14px;
        }

        .fleetcard-map__filter__dropdown__checkbox input:checked {
            background-color: #fff;
            border-color: #C4C4C4;
            background-image: url('../../img/fleetcard/checkbox-tick.svg');
            background-size: 12px;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* DIRECTIONS INPUT FIELDS */
        .mapboxgl-ctrl-top-left {
            max-width: 893px;
            width: calc(100% - 495px);
        }

        .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
            margin: 16px 0 0;
        }

        .mapboxgl-ctrl-directions {
            width: 100%;
            max-width: 100%;
        }

        .mapbox-directions-component-keyline {
            display: flex;
            border-radius: 0;
            box-shadow: none;
            height: 50px;
            width: 100%;
            max-width: 860px;
        }

        .mapbox-directions-component-keyline .mapboxgl-ctrl-geocoder {
            border-radius: 20px;
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            margin-left: 0;
        }


        .mapbox-directions-component-keyline .mapbox-directions-origin,
        .mapbox-directions-component-keyline .mapbox-directions-destination {
            width: 100%;
            margin: 0px 11px 0px 0px;
        }


        .mapbox-directions-component-keyline .mapbox-directions-origin input[type='text'],
        .mapbox-directions-component-keyline .mapbox-directions-destination input[type='text'] {
            box-shadow: none;
            height: 50px;
            width: 100%;
            max-width: 426px;
        }

        .mapboxgl-ctrl-bottom-left {
            display: block;
            margin: 0px 0px 30px 100px;
        }

        .mapboxgl-ctrl-bottom-left button {
            width: 50px;
            height: 50px;
        }

        .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group {
            border-radius: 20px;
            margin: 0px;
        }

        .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
            margin: 0px;
        }

        .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
            background-image: url('../../img/fleetcard/minus-orange.svg') !important;
        }

        .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
            background-image: url('../../img/fleetcard/plus-orange.svg') !important;
        }

        .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out {
            border-top: none;
        }

        .fleetcard-map__openmaps {
            bottom: 30px;
            right: 100px;
            left: unset;
        }
    }