.mapboxgl-popup-tip {
    position: relative;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    left: -1px;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    right: -1px;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    bottom: -1px;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    top: -1px;
}

.mapboxgl-popup-content {
    box-shadow: 0 1px 10px #999 !important;
    z-index: 0;
}

.mapboxgl-popup-content .mapboxgl-custom-popup {
    position: relative;
}

.mapboxgl-custom-popup .popup-title {
    font-weight: bold;
}

.mapboxgl-ctrl-logo {
    display: none !important;
}

.mapboxgl-ctrl-bottom-left {
    display: flex;
    bottom: 0;
    left: 2px;
}

.mapboxgl-ctrl-lnglat {
    background: rgb(0 0 0 / 40%);
    color: white;
    line-height: 2em;
    padding: 0 10px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
    border-radius: 4px;
}

.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M3.75 3a.75.75 0 0 0-.75.75V5.5a.5.5 0 0 1-1 0V3.75C2 2.784 2.784 2 3.75 2H5.5a.5.5 0 0 1 0 1H3.75ZM10 2.5a.5.5 0 0 1 .5-.5h1.75c.966 0 1.75.784 1.75 1.75V5.5a.5.5 0 0 1-1 0V3.75a.75.75 0 0 0-.75-.75H10.5a.5.5 0 0 1-.5-.5ZM2.5 10a.5.5 0 0 1 .5.5v1.75c0 .414.336.75.75.75H5.5a.5.5 0 0 1 0 1H3.75A1.75 1.75 0 0 1 2 12.25V10.5a.5.5 0 0 1 .5-.5Zm11 0a.5.5 0 0 1 .5.5v1.75A1.75 1.75 0 0 1 12.25 14H10.5a.5.5 0 0 1 0-1h1.75a.75.75 0 0 0 .75-.75V10.5a.5.5 0 0 1 .5-.5Z"%2F%3E%3C%2Fsvg%3E') !important;
}

.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="currentColor" d="M11 4a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H12a2 2 0 0 1-2-2V2.5a.5.5 0 0 1 1 0V4Zm0 8a1 1 0 0 1 1-1h1.5a.5.5 0 0 0 0-1H12a2 2 0 0 0-2 2v1.5a.5.5 0 0 0 1 0V12Zm-7-1a1 1 0 0 1 1 1v1.5a.5.5 0 0 0 1 0V12a2 2 0 0 0-2-2H2.5a.5.5 0 0 0 0 1H4Zm1-7a1 1 0 0 1-1 1H2.5a.5.5 0 0 0 0 1H4a2 2 0 0 0 2-2V2.5a.5.5 0 0 0-1 0V4Z"%2F%3E%3C%2Fsvg%3E') !important;
}

.mapboxgl-ctrl .mapboxgl-ctrl-reset-button .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3s-3 1.331-3 3s1.329 3 3 3z"%2F%3E%3Cpath fill="currentColor" d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219a9.053 9.053 0 0 0-2.43-2.43a8.95 8.95 0 0 0-3.219-1.355a9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053a7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725a7.11 7.11 0 0 1-.644 1.188a7.2 7.2 0 0 1-.858 1.039a7.028 7.028 0 0 1-3.536 1.907a7.13 7.13 0 0 1-2.822 0a6.961 6.961 0 0 1-2.503-1.054a7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034a9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183a9.014 9.014 0 0 0 3.218-1.355a8.886 8.886 0 0 0 1.331-1.099a9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"%2F%3E%3C%2Fsvg%3E') !important;
}

.mapboxgl-ctrl .mapboxgl-ctrl-layer-button .mapboxgl-ctrl-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m13.387 3.425l6.365 4.243a1 1 0 0 1 0 1.664l-6.365 4.244a2.5 2.5 0 0 1-2.774 0L4.248 9.332a1 1 0 0 1 0-1.664l6.365-4.243a2.5 2.5 0 0 1 2.774 0Zm6.639 8.767a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Zm0 3.25a2.002 2.002 0 0 1-.577.598l-6.05 4.084a2.5 2.5 0 0 1-2.798 0l-6.05-4.084a2 2 0 0 1-.779-2.29l6.841 4.56a2.5 2.5 0 0 0 2.613.098l.16-.098l6.841-4.56a1.996 1.996 0 0 1-.201 1.692Z"%2F%3E%3C%2Fsvg%3E') !important;
}

.mapboxgl-ctrl button.-active svg {
    color: #4264fb;
}

.mapboxgl-ctrl-layer-button {
    z-index: 1;
}

.mapboxgl-ctrl-layer-wrap {
    z-index: 100;
    display: flex;
    justify-items: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: -220px;
    visibility: hidden;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 0 3px #333;
    background-color: #fff;
}

.mapboxgl-ctrl-layer {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    border: 2px solid #fff;
    position: relative;
}

.mapboxgl-ctrl-layer.active {
    border-color: #3385ff;
}

.mapboxgl-ctrl-layer img {
    width: 100%;
    height: 100%;
}

.mapboxgl-ctrl-layer span {
    display: inline-flex;
    justify-content: center;
    background-color: rgb(0 0 0 / 60%);
    color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.mapboxgl-ctrl-layer-button.-active .mapboxgl-ctrl-layer-wrap {
    visibility: visible;
}

.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
    padding-bottom: 0;
    /* stylelint-disable-next-line function-no-unknown */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    transition: all 0.35s;
}


.mapboxgl-ctrl-attrib-inner {
    display: inline-block !important;
    vertical-align: middle;
    line-height: 18px;
    font-size: 12px;
    font-family: -apple-system-font, BlinkMacSystemFont, 'Droid Sans', 'Noto Sans', 'PingFang SC', 'Heiti SC',
        'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', SimSun, sans-serif;
    color: rgba(0, 0, 0, 0.75);
    text-decoration: none;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact {
    padding-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapboxgl-ctrl-attrib-button {
    position: initial;
}

/* Custom style */
.mapboxgl-popup-close-button {
    display: none;
}

.mapboxgl-popup-content {
    box-shadow: 0 1px 25px rgba(0, 0, 0, 0.2);
}

.mapboxgl-popup-content .custom-popup {
    font-family: '微软雅黑';
    position: relative;
}

.mapboxgl-popup-content .popup-row {
    display: flex;
    align-items: flex-start;
}

.mapboxgl-popup-content .popup-row.timing {
    justify-content: center;
    padding-top: 6px;
}

.mapboxgl-popup-content .popup-row.timing button {
    background: #1890ff;
    border: none;
    padding: 4px 8px;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapboxgl-popup-content .popup-row.timing button .icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00IDloNHYxMUg0em0xMiA0aDR2N2gtNHptLTYtOWg0djE2aC00eiIvPjwvc3ZnPg==');
}

.mapboxgl-popup-content .popup-chart-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVQ4T2NkwAESspK2C0oIaTIw/P//4t7zh8sXLHPAppQRlwH5jcW3TLzNVUHypzYcvTS5ZaI+7Q0ozAwsVZZmyWRmZmJ6+4NdSNLVjZeNg414F9QWBW9oTBX2Bzn15LXvDLu+ajEoaSmTb8C2D2oMavrqDGfWHbqt/uLJtL///v9advPV/OPHj3+HhQdKIKK7AGbA7VV7Gfx/v2X49o+BYcOLn/N7V25OIsmAGyv2MuT/e8UgxMfBUHnj28ruFRsjSDYg798rBmGaGNDe3hLNysyS9/ffX7H3r+6LtKUy8cBiARYGIC/AXFDylO2LpLLam48fP7159PjRNMauzva7jvY2SidOnWG4f/cag4b8H4Z///8xvHjzk+HlLz4GIV4ehjf3njIYcbMwgNLEpR+sDEqamgw2VhYM69ZvusaYmpr6NcDPi4uJCWeqxpra//z5y7Bx87avjIWFhQ9UVVXlf/z4gStbYBXn5ORkuHjx4guQAddNTEw0QKq+fv3KwMrKCqY5ODgY7ty5g9NQkPyjR4/ugbxQJCAgkPj3719eUpzw+/fvn1++fFkAALdq+Ka65YhZAAAAAElFTkSuQmCC');
}

.mapboxgl-popup-content .popup-title {
    font-weight: bold;
    min-width: 3em;
}

.mapboxgl-popup-content .popup-title sub {
    font-size: 10px;
    font-weight: 100;
}

.mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-inner {
    color: #777;
    display: inline !important;
}

.mapboxgl-ctrl-attrib {
    padding: 2px 4px 2px 24px !important;
    border-radius: 12px 3px 3px 12px !important;
}
