h1,
h2 {
    color: #fff !important;
}

.mapFilter {
    margin-top: 1rem;
}

/* Sliders - Input Range */
.mapFilter input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 1px;
    background: #fff;
    outline: none;
    opacity: 1;
    cursor: pointer;
    margin-right: 5px;
    transition: all .3s;
    position: relative;
}

.mapFilter>div .loading {
    display: none;
}

.mapFilter>div.filterLoading .loading {
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    color: var(--colorCoral);
    font-size: 0.8em;
    font-style: italic;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50"><defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="white" stop-opacity="1" /><stop offset="100%" stop-color="white" stop-opacity="0" /></linearGradient></defs><g transform="translate(25, 25)"><!-- 12 лепестков с постепенным затуханием --><g><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="1"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(30)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.083s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(60)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.166s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(90)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.25s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(120)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.333s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(150)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.416s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(180)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.5s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(210)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.583s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(240)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.666s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(270)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.75s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(300)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.833s" /></circle><circle cx="0" cy="-15" r="4" fill="url(%23gradient)" opacity="0" transform="rotate(330)"><animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" begin="0.916s" /></circle></g></g></svg>');
}

.filterLoading>input,
.filterLoading>label {
    pointer-events: none !important;
}

.filterLoading>input,
.filterLoading>input,
.filterLoading>label::after {
    opacity: 0.1 !important;
}

.filterLocked::after {
    content: "";
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"><path fill="white" d="M8.4,4.1C8.1,3.9,7.8,3.8,7.5,3.8V2.5c0-0.7-0.2-1.3-0.7-1.8S5.7,0,5,0S3.7,0.3,3.2,0.8S2.5,1.8,2.5,2.5v1.2c-0.4,0-0.6,0.1-0.9,0.4C1.4,4.4,1.3,4.6,1.3,5v3.7c0,0.4,0.1,0.6,0.4,0.9C1.9,9.8,2.2,10,2.5,10h5c0.4,0,0.6-0.1,0.9-0.4c0.2-0.2,0.4-0.5,0.4-0.9V5C8.7,4.6,8.6,4.4,8.4,4.1z M6.2,3.8H3.8V2.5c0-0.4,0.1-0.6,0.4-0.9C4.4,1.4,4.6,1.3,5,1.3s0.6,0.1,0.9,0.4c0.2,0.2,0.4,0.5,0.4,0.9V3.8z"/></svg>') !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative;
    margin-left: auto;
    margin: -1em 0 -1em auto;
    width: 20px;
    height: 20px;
}
.filterLocked{
    pointer-events: all !important;
}
.filterLocked input, .filterLocked label{
    pointer-events: none !important;
}
.mapFilter label {
    cursor: pointer;
}

body.hasHover .mapFilter input[type='range']:hover {
    opacity: 1;
}

.mapFilter input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--colorLinkOverlay);
    border-radius: 50%;
    border: solid 1px #fff;
    transition: all 0.3s;
}

.mapFilterZero {
    opacity: 0.7 !important;
}

.mapFilterZero::-webkit-slider-thumb {
    background: var(--colorAltBlue) !important;
}

body.hasHover .mapFilter input[type='range']:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #ffffff80;
}

.mapFilter input[type='range']::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: var(--colorLinkOverlay);
    border: solid 1px #fff;
    transition: all 0.3s;
}

/* Sliders - Input Range */




/* Checkbox */
.mapFilter input.checkbox {
    display: none;
}

.mapFilter input.checkbox+label {
    display: inline-flex;
    align-items: center;
}

.mapFilter input.checkbox+label::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--colorAltBlue);
    border-radius: 50%;
    margin-right: 7px;
    box-shadow: 0 0 0 1px #ffffffa0;
    transition: all 0.3s;
}

body.hasHover .mapFilter input.checkbox+label:hover::before {
    box-shadow: 0 0 0 3px #ffffff80;
}

.mapFilter input.checkbox+label::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 3px;
    position: absolute;
    opacity: 0;
    background-color: var(--colorLinkOverlay);
    transition: opacity 0.3s;
}

.mapFilter input.checkbox:checked+label::after {
    opacity: 1;
}

/* Checkbox */


/* Switcher */
.mapFilter input.switcher {
    display: none;
}

.mapFilter input.switcher+label {
    display: inline-flex;
    align-items: center;
}

.mapFilter input.switcher+label::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 16px;
    background-color: #00000080;
    border-radius: 16px;
    margin-right: 7px;
    box-shadow: 0 0 0 1px #ffffffa0;
    transition: all 0.3s;
}

body.hasHover .mapFilter input.switcher+label:hover::before {
    box-shadow: 0 0 0 3px #ffffff80 !important;
}

.mapFilter input.switcher+label::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 3px;
    position: absolute;
    transition: all 0.3s;
    background-color: var(--colorAltBlue);
}

.mapFilter input.switcher:checked+label::before {
    background-color: var(--colorPrimaryGreen);
    box-shadow: 0 0 0 1px #ffffff80;
}

.mapFilter input.switcher:checked+label::after {
    margin-left: 23px;
    background-color: var(--colorWhite);
}

/* Switcher */

.mapFilter>div {
    pointer-events: none;
    user-select: none;
    margin-bottom: 0.5em;
    color: #ffffffb0;
    display: flex;
    align-items: center;
}

.mapFilter label,
.mapFilter input {
    transition: all 0.2s;
    pointer-events: all;
}

body.hasHover .mapFilter label:hover {
    color: #ffffff;
}

/* Track Record Switcher */
[data-filter="featured_layer"],
[data-filter="photo360_layer"] {
    margin-top: 0.7rem;
}

[data-filter="featured_layer"] label,
[data-filter="photo360_layer"] label {
    /* background: var(--colorPrimaryBlue50); */
    background: var(--gradientPrimary);
    padding: 0.3rem 1rem 0.3rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: 1rem;
    color: #fff;
}

/* Track Record Switcher */

/* Bottom  Coords and Zoom */
.coordsZoomDisplay {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: silver;
    font-size: 0.7em;
    border-radius: 5px;
    z-index: 10;
}

/* Bottom  Coords and Zoom */

/* Logo over map */
.logoOverMap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background-position: center;
    background-image: url(/wp-content/uploads/logo-white.svg);
    background-size: 10%;
    background-repeat: no-repeat;
    opacity: 0.2;
    pointer-events: none;
}

/* Logo over map */



/* Layout */
main {
    align-items: flex-start;
}

.leftSide {
    padding: 1rem;
    overflow-y: auto !important;
    pointer-events: all !important;
    max-width: 20em;
    width: auto;
}

.rightSide {
    overflow: hidden;
    /* width: 75vw; */
    width: calc(100% - 18em);
}

/* Layout */




/* Legend */
.legend {
    color: #888;
    font-size: 0.8em;
    margin-top: 1em;
}

.legend_layer {
    margin: 0.5em 0 1.5em 0;
    transition: color 0.3s;
    display: none;
}

.legend_layerName {
    font-weight: 600;
    margin-bottom: 0.3em;
}

body.hasHover .legend_layer:hover {
    color: #fff;
}

.legend_layerItems {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5em;
}

.legend_layer[data-layer="floorSpaceRatio_layer"] .legend_layerItems,
.legend_layer[data-layer="heightLimit_layer"] .legend_layerItems,
.legend_layer[data-layer="seppLandAcq_layer"] .legend_layerItems,
.legend_layer[data-layer="sequencing_layer"] .legend_layerItems,
.legend_layer[data-layer="zoning_layer"] .legend_layerItems {
    flex-direction: row;
}

.legend_color {
    width: 1rem;
    height: 1rem;
    margin-right: 0.4em;
    flex-shrink: 0;
    position: relative;
}

.legend_color.line {
    border: none !important;
}

.legend_color.pattern {
    box-shadow: 0 0 0 1px #ffffff40;
    background-position: top left;
    background-repeat: repeat;
}

.legend_color.line svg {
    position: relative;
    width: 100%;
    height: 100%;
}

.legend_color.line svg line {
    vector-effect: non-scaling-stroke;
}

.legend_item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 100%;
}

.legend_label {
    min-width: 2em;
    flex-grow: 1;
    flex-shrink: 1;
}

.legend_layer[data-layer="floorSpaceRatio_layer"] .legend_label {
    min-width: 3em;
}

.legend_layer[data-layer="zoning_layer"] .legend_label {
    min-width: 3em;
}

.legend_color.blackline {
    box-shadow: 0 0 0.5rem #ffffff80 inset, 0 0 0.5rem #ffffff80;
}

/* Legend */




/* Featured Pulsing at map */
.featuredPulsingMarker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--colorCoral);
    box-shadow: 0 0 0 2px #fff;
    cursor: pointer;
}

.featuredPulsingMarker::after {
    pointer-events: none;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: pulse 3s infinite;
    animation-timing-function: cubic-bezier(.02, .62, .04, .98);
    animation-timing-function: linear;
}
.featured_sold{
    width: 60px;
    height: 33px;
    background-image: url('../sold-label-small.png');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    background-size: contain;
    box-shadow: none;
    background-color: transparent;
}
.featuredPulsingMarker.featured_sold:after {
    display: none !important;
    content: none !important;
}
@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    50% {
        transform: scale(1.5);
        opacity: 1.0;
    }

    100% {
        transform: scale(3);
        opacity: 0.0;
    }
}

/* Featured Pulsing at map */


/* Copyright */
.copyright {
    /* position: fixed; */
    color: #888;
    font-size: 0.7rem;
}

.copyright span {
    pointer-events: all;
    cursor: pointer;
    color: #888;
    text-decoration: underline;
}

body.hasHover .copyright span:hover {
    color: #fff;
}

/* Copyright */


/* 360 Popup */
.popup360 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
}

.popup360 iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: all;
}

.popup360Buttons {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.popup360closeButton {
    background-image: var(--menuCloseIcon);
    transition: transform 0.3s ease-in-out !important;
}

.popup360shareButton.icon__check {
    background-image: var(--checkIconWhite);
    pointer-events: none;
}

.popup360shareButton {
    background-image: var(--shareIconWhite);
    background-size: 50% !important;
}

body.hasHover .popup360closeButton:hover {
    transform: rotate(90deg);
}

/* 360 Popup */

.exploreLogo {
    height: 15vh;
    width: 15vh;
}

.westLinkmarker {
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px #ffffffa0, 0 0 0 5px #00000080;
    background-color: #fff;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-image: url('/wp-content/uploads/west-link-marker.png');
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.westLinkmarker::after {
    pointer-events: none;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: pulse 3s infinite;
    animation-timing-function: cubic-bezier(.02, .62, .04, .98);
    animation-timing-function: linear;
}

/* Toolbar */
.exploreMapToolbar {
    position: absolute;
    top: calc(var(--headerHeight) + 10px);
    right: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
}

/* Toolbar */
/* Ruler */
.buttonRuler {
    --rulerIcon: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path fill="%23ffffff" d="M10.4,21.3c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5l-5.2-5.2c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3L13.6,2.7c0.4-0.4,0.8-0.5,1.3-0.5s0.9,0.2,1.3,0.5l5.2,5.2c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L10.4,21.3z M9.4,20.3L20.3,9.4c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1,0-0.2-0.1-0.2L15,3.7c-0.1-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2,0-0.2,0.1l-2.1,2.1l2.6,2.6L14,9.4l-2.6-2.6L9.7,8.6l2.6,2.6l-1.1,1.1L8.6,9.7l-1.8,1.8L9.4,14l-1.1,1.1l-2.6-2.6l-2.1,2.1c-0.1,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0.1,0.2L9,20.3c0.1,0.1,0.1,0.1,0.2,0.1C9.3,20.3,9.3,20.3,9.4,20.3z M8.4,15.1L9.4,14L8.4,15.1z M11.2,12.3l1.1-1.1L11.2,12.3z M14,9.4l1.1-1.1L14,9.4z"/></svg>');
    background-image: var(--rulerIcon);
    background-size: 60%;
    width: 2rem;
    height: 2rem;
    position: relative;
}
.buttonRulerActive {
    background-color: var(--colorCoral) !important;
    box-shadow: var(--buttonOverOutline) !important;
}

/* Ruler */