/**
 * based on google maps api sample code
 * SPDX-License-Identifier: Apache-2.0
 */
/* [START maps_place_autocomplete_map] */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */

gmp-map {
    display: block;
    height: 700px;
    map-controls: true;
}

:root {
    --education-color: #b0b30c;
    --worship-color: #9c27b0;
    --water-color: #2196f3;
    --nature-color: #4caf50;
    --negative-color: #222222;
    --shopping-color: #ff9800;
    --utility-color: #9e9e9e;
    --transport-color: #3b708a;
    --home-color: #da396e;
    --default-color: #13b3b6;
}

.fs-education {
    color: var(--education-color);
}

.fs-worship {
    color: var(--worship-color);
}

.fs-water {
    color: var(--water-color);
}

.fs-nature {
    color: var(--nature-color);
}

.fs-negative {
    color: var(--negative-color);
}

.fs-shopping {
    color: var(--shopping-color);
}

.fs-utility {
    color: var(--utility-color);
}

.fs-transport {
    color: var(--transport-color);
}

.fs-home {
    color: var(--home-color);
}

.fs-default {
    color: var(--default-color);
}

.poi-item {
    font-size: 13px;
    border-bottom: 1px solid #333;
    padding: 12px 0;
    display: grid;
    grid-template-columns: 1fr 60px 70px 80px;
}

.poi-name {
    font-weight: bold;
    grid-column: 1 / 5;
    margin-bottom: 4px;
    color: #fff;
}

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: small;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}

/* [END maps_place_autocomplete_map] */
/*
 * Property styles in unhighlighted state.
 */
.poi {
    align-items: center;
    color: #fff;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    font-size: 14px;
    gap: 15px;
    height: 30px;
    justify-content: center;
    padding: 4px;
    position: relative;
    position: relative;
    transition: all 0.3s ease-out;
    width: 30px;
    transform: translateY(-9px);
}

    .poi::after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid #ffffff;
        content: '';
        height: 0;
        left: 50%;
        position: absolute;
        top: 95%;
        transform: translate(-50%, 0);
        transition: all 0.3s ease-out;
        width: 0;
        z-index: 1;
    }

    .poi .icon {
        align-items: center;
        display: flex;
        justify-content: center;
    }

        .poi .icon i {
            font-size: 20px;
        }

    .poi .details {
        display: none;
        flex-direction: column;
        flex: 1;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .poi .type {
        color: #000;
        font-size: calc(1em + 2pt);
    }

    .poi .name {
        color: #000;
        padding-bottom: 10px;
    }

    .poi .bearing {
        color: #000;
    }

    .poi .distance {
        color: #000;
    }

    .poi .elevation {
        color: #000;
    }

    .poi .features {
        align-items: flex-end;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

        .poi .features > div {
            align-items: center;
            /* background: #f5f5f5; */
            border-radius: 5px;
            /* border: 1px solid #ccc; */
            display: flex;
            gap: 5px;
            padding: 5px;
        }

    /*
 * Property styles in highlighted state.
 */
    .poi.highlight {
        background-color: #FFFFFF;
        border-radius: 8px;
        box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
        height: 80px;
        padding: 8px 15px;
        width: auto;
        position: relative;
        z-index: 100;
    }

        .poi.highlight::after {
            border-top: 9px solid #ffffff;
        }

        .poi.highlight .details {
            display: flex;
        }

        .poi.highlight .icon i {
            font-size: 50px;
        }

    .poi .bearing {
        background-color: #ffa000;
    }

    .poi .distance {
        background-color: #03a9f4;
    }

    .poi .elevation {
        background-color: #388e3c;
    }

    /*
 * education icon colors.
 */
    .poi.highlight:has(.fs-education) .icon {
        color: var(--education-color);
    }

    .poi:not(.highlight):has(.fs-education) {
        background-color: var(--education-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-education) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-education)::after {
            border-top: 9px solid var(--education-color);
        }

    /*
 * worship icon colors.
 */
    .poi.highlight:has(.fs-worship) .icon {
        color: var(--worship-color);
    }

    .poi:not(.highlight):has(.fs-worship) {
        background-color: var(--worship-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-worship) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-worship)::after {
            border-top: 9px solid var(--worship-color);
        }

    /*
 * water icon colors.
 */
    .poi.highlight:has(.fs-water) .icon {
        color: var(--water-color);
    }

    .poi:not(.highlight):has(.fs-water) {
        background-color: var(--water-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-water) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-water)::after {
            border-top: 9px solid var(--water-color);
        }

    /*
 * park icon colors.
 */
    .poi.highlight:has(.fs-nature) .icon {
        color: var(--nature-color);
    }

    .poi:not(.highlight):has(.fs-nature) {
        background-color: var(--nature-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-nature) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-nature)::after {
            border-top: 9px solid var(--nature-color);
        }

    /*
 * negative icon colors.
 */
    .poi.highlight:has(.fs-negative) .icon {
        color: var(--negative-color);
    }

    .poi:not(.highlight):has(.fs-negative) {
        background-color: var(--negative-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-negative) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-negative)::after {
            border-top: 9px solid var(--negative-color);
        }
    /*
 * shopping icon colors.
 */
    .poi.highlight:has(.fs-shopping) .icon {
        color: var(--shopping-color);
    }

    .poi:not(.highlight):has(.fs-shopping) {
        background-color: var(--shopping-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-shopping) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-shopping)::after {
            border-top: 9px solid var(--shopping-color);
        }

    /*
 * utility icon colors.
 */
    .poi.highlight:has(.fs-utility) .icon {
        color: var(--utility-color);
    }

    .poi:not(.highlight):has(.fs-utility) {
        background-color: var(--utility-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-utility) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-utility)::after {
            border-top: 9px solid var(--utility-color);
        }

    /*
 * transport icon colors.
 */
    .poi.highlight:has(.fs-transport) .icon {
        color: var(--transport-color);
    }

    .poi:not(.highlight):has(.fs-transport) {
        background-color: var(--transport-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-transport) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-transport)::after {
            border-top: 9px solid var(--transport-color);
        }

    /*
 * default icon colors.
 */
    .poi.highlight:has(.fs-home) .icon {
        color: var(--home-color);
    }

    .poi:not(.highlight):has(.fs-home) {
        background-color: var(--home-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-home) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-home)::after {
            border-top: 9px solid var(--home-color);
        }

    /*
 * default icon colors.
 */
    .poi.highlight:has(.fs-default) .icon {
        color: var(--default-color);
    }

    .poi:not(.highlight):has(.fs-default) {
        background-color: var(--default-color);
        color: #fff;
    }

        .poi:not(.highlight):has(.fs-default) .icon i {
            color: #fff;
        }

        .poi:not(.highlight):has(.fs-default)::after {
            border-top: 9px solid var(--default-color);
        }

#poi-summary {
    margin: 10px;
    overflow-x: auto;
}

    #poi-summary table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
    }

    #poi-summary th,
    #poi-summary td {
        border: 1px solid #333;
        padding: 10px 12px;
        text-align: left;
    }

    #poi-summary th {
        background: #1f1f1f;
        color: #fff;
        cursor: pointer;
        user-select: none;
    }

        #poi-summary th.sorted.asc::after {
            content: ' ▲';
        }

        #poi-summary th.sorted.desc::after {
            content: ' ▼';
        }

    #poi-summary tr:hover {
        background-color: rgba(255, 255, 255, 0.06);
    }

    #poi-summary tr.highlighted {
        background-color: rgba(255, 255, 255, 0.12);
    }

    #poi-summary td {
        color: #e0e0e0;
    }