/*Styles for home title (ex:your jouney..)*/
.div-home-title div {
    display: block;
    color: var(--PTC-Headline, #919AA9);
    text-align: center;
    font-family: Lexend;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: 73.667px; /* 147.333% */
    letter-spacing: -2.5px;
}

/*Styles quotation*/
.div-quote div {
    display: block;
    text-align: center;
    color: var(--PTC-Dark-Grey, #415364);
    font-family: Lexend;
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    line-height: 32px;
}


/*Styles for locate me button*/
.btn-locate {
    display: flex;
    width: 130px;
    padding: 8px 15px;
    justify-content: center;
    align-items: center;
    gap: 8.69px;
    border-radius: 11.62px;
    background: #FFF;
    color: var(--PTC-Blue, #009ADE);
    border: none;
    text-align: center;
    font-family: Lexend;
    font-size: 12.655px;
    font-style: normal;
    line-height: 110%;
}

/*Styles for google location text box*/
.location-text-box, .location-text-bo:focus {
    width: 400px;
    color: var(--PTC-Dark-Grey, #415364);
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    line-height: 100%;
    height: 27px;
    padding: 0pc 13px;
    border-radius: 10px;
    border: none;
    border-bottom: 1px solid #D0CDC6;
    background-color: transparent;
}

/*Styles for sorting dropdown(earliest appt/distance)*/
.ddl-sort-by{
    width: 200px !important;
}
    /*Styles for sorting dropdown options*/
    .ddl-sort-by option {
        width: 420px;
        color: var(--PTC-Dark-Grey, #415364);
        font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        line-height: 100%;
        height: 27px;
        padding: 0pc 13px;
        border-radius: 10px;
        border: none;
        border-bottom: 1px solid #D0CDC6;
        background-color: transparent;
    }

/*Styles for Vertical card list*/
.div-loc-list-wrapper {
    padding-right: 20px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}


/*Styles for list of locations on search*/
.location-result {
    width: 100%;
    border-radius: 20px;
    background: #E8F7FA;
    box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.10);
    padding: 25px;
}
    /*Styles for individual location info*/
    .location-result .location-info {
        width: 100%;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    /*Styles for horizontal separtor after location info*/
    .location-result hr {
        height: 2px;
        background-color: #CFCFCF;
    }

/*Styles for location tile and distance*/
.location-title-div {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    gap: 15px;
    align-self: stretch;
    height: auto;
    word-wrap: break-word;
    box-sizing: border-box;
}

/*Styles for location tile*/
.location-title {
    width: 78%;
    height: 35px;
    color: var(--PTC-Blue, #009ADE);
    font-family: Lexend;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.4px;
    height: auto;
    word-wrap: break-word;
    box-sizing: border-box;
}

/* Media query for tablet devices*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .location-title {
        font-size: 21px !important;
    }

    .location-point-div .location-dist {
        font-size: 16.144px !important;
    }

    .locations-map {
        flex-direction: column-reverse !important;
    }

        .locations-map .map-div {
            /*width: 100% !important;
            padding: 10px !important;*/
            display: none;
        }
}

/* Media query for mobile devices*/
@media only screen and (max-width: 768px) {
    .location-title {
        font-size: 21px !important;
    }

    .location-point-div .location-dist {
        font-size: 16.144px !important;
    }

    .locations-map {
        flex-direction: column-reverse !important;
    }

        .locations-map .map-div {
            /*width: 100% !important;
            padding: 10px !important;*/
            display: none;
        }
    .div-home-title {
        display: none !important;
    }
    .div-quote {
        display: none !important;
    }
}

    /*Styles for distance  text div and pointer div  */
    .location-point-div {
        width: 20%;
        height: 35px;
        display: flex;
        justify-content: flex-end;
    }
        /*Styles for distance  text  */
        .location-point-div .location-dist {
            color: var(--PTC-Dark-Grey, #415364);
            font-family: Lexend;
            font-size: 20.144px;
            font-style: normal;
            font-weight: 600;
            line-height: 27.699px; /* 137.5% */
        }

        /*Styles for pointer */
        .location-point-div .pin-icon-div {
            display: inline-flex;
            height: 28px;
            padding: 2.878px 2.878px 1.799px 2.878px;
            justify-content: center;
            align-items: flex-start;
            flex-shrink: 0;
        }
            /*Styles for pointer */
            .location-point-div .pin-icon-div img {
                flex-shrink: 0;
                margin-top: revert-layer;
            }

    /*Styles for location address */
    .location-address {
        align-self: stretch;
        color: var(--PTC-Dark-Grey, #415364);
    }

        /*Styles for location address text */
        .location-address p {
            /* Paragraph 1 */
            font-family: Lexend;
            font-size: 18px;
            font-style: normal;
            font-weight: 300;
            line-height: 32px; /* 177.778% */
        }

    /*Styles for appointments */
    .location-appointments {
        width: 100%;
    }
        /*Styles for next avaialble appt text */
        .location-appointments .next-text {
            color: var(--PTC-Dark-Grey, #415364);
            font-family: Lexend;
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: 22px;
        }
            /*Styles for phone number text if no appts times are displayed*/
            .location-appointments .next-text a {
                color: var(--PTC-Blue, #009ADE) !important;
                font-family: Lexend;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 108.7%;
                text-decoration-line: underline;
                text-decoration-style: solid;
                text-decoration-thickness: auto;
                text-underline-offset: auto;
                text-underline-position: from-font;
            }

    /*Styles for all appointments */
    .all-appointment-times {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
        /*Styles for appointment text */
        .all-appointment-times p {
            color: var(--PTC-Dark-Grey, #415364);
            font-family: Lexend;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 18px;
            margin-bottom: 5px;
        }

    /*Styles for all appt times */
    .all-slots {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding-bottom: 5px;
    }

        /*Styles for appt times div */
        .all-slots .time-slot-div {
            -webkit-animation: glow 1s ease-in-out infinite alternate;
            width: 91px;
            padding: 11.413px 15px;
            border: 0px;
            margin-bottom: 10px;
            border-radius: 36.522px;
            background: #D3D3D3;
            color: var(--PTC-Dark-Grey, #415364);
            font-family: Lexend;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 80%;
        }

            /*Styles for time slots hovering vertical card list*/
            .all-slots .time-slot-div:hover {
                background-color: #5c95c587 !important;
                cursor: pointer !important;
            }

    /*Styles for view more link */
    .view-more-link {
        width: 120px;
        flex-shrink: 0;
        color: var(--PTC-Blue, #009ADE);
        font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 108.7%;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        border: 0px;
        background-color: transparent;
    }

/*Styles for parent div for locations and map */
.locations-map {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

    .locations-map  .map-div {
        height: 600px;
        margin-top: 10px;
        position: sticky !important;
        top: 100px;
        width:50%
    }