/* styles for local dev server only, not required on live env */
 
/* Default styles for modal - can be replaced by your own styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(0, 0, 0, .7);
    display: grid;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

/* IMPORTANT! This active state selector MUST remain the same if your HTML/CSS is customised. */
.modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal--inner {
    position: relative;
    background-color: white;
    padding: 30px;
    width: min(90vw, 470px);
    height: min(90%, 500px);

}

.modal--inner iframe {
    width: 100%;
    height: 100%;
}

.modal--close {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.modal--close:before,
.modal--close:after {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    width: 20px;
    height: 2px;
    background-color: white;
    transform-origin: center;
}

.modal--close:before {
    transform: rotate(45deg);
}

.modal--close:after {
    transform: rotate(-45deg);
}

:root {
    --colour-black: 32, 32, 32;
    --colour-grey: 248, 247, 247;
    --colour-medium-grey: 126, 126, 126;
    --colour-orange: 205, 22, 63;
    --colour-light-orange: 255, 244, 234;
    --colour-medium-orange: 205, 22, 63;
    --colour-white: 255, 255, 255;

    --mapovis-container-padding: max(30px, 2.4vmax);
    /* Any valid value for CSS 'padding' property, including units */
    --mapovis-column-gap: min(30px, 2vw);
    /* Any valid value for CSS Grid 'gap' property, including units */
    --mapovis-desktop-header-height: 148.2px;
    /* Pixel-based value for CSS 'height' property, including units. Must be fixed height. */
    --mapovis-colour-available: 0, 128, 1;
    --mapovis-colour-titled: 127, 190, 78;
    --mapovis-colour-coming-soon: 5, 122, 148;
    --mapovis-colour-on-hold: 255, 164, 2;
    --mapovis-colour-deposited: 255, 164, 2;
    --mapovis-colour-sold: 255, 2, 1;
    --mapovis-colour-featured: 127, 190, 78;
    --mapovis-colour-tab-bg: var(--colour-grey);
    --mapovis-colour-tab-text: var(--colour-black);
    --mapovis-colour-content-bg: var(--colour-white);
    --mapovis-colour-card-bg: var(--colour-grey);
    --mapovis-colour-card-shadow: 99, 99, 99;
    --mapovis-card-border-radius: 8px;
    --mapovis-colour-filter-label: var(--colour-black);
    --mapovis-colour-filter-bar: var(--colour-medium-orange);
    --mapovis-colour-filter-handle: var(--colour-orange);
    --mapovis-colour-icons: var(--colour-orange);
    --mapovis-colour-form-controls: var(--colour-black);
    --mapovis-colour-text-default: var(--colour-black);
    --mapovis-colour-text-h2: var(--colour-black);
    --mapovis-colour-text-h3: var(--colour-black);
    --mapovis-colour-text-column-labels: var(--colour-medium-grey);
    --mapovis-colour-text-back-link: var(--colour-orange);
    --mapovis-colour-stage-outlines: var(--colour-medium-grey);
    --mapovis-colour-button-text: var(--colour-white);
    --mapovis-colour-button-outline: var(--colour-orange);
    --mapovis-colour-button-background: var(--colour-orange);
    --mapovis-button-border-radius: 8px;
    --mapovis-iframe-ration: 40%;



}


@media screen and (max-width: 991px) {
    .mapovis--iframe-key {
        top: 0px;
        left: 1px;
        font-size: calc(var(--mapovis-font-size-base)*var(--mapovis-font-mulitplier-s));
        padding: 2px 6px;
    }

    .mapovis--iframe .vue-iframe {
        height: min(45vh, 333px);
    }

    .mapovis--iframe-key .key {
        padding-right: 7px;
    }
}

.filters[data-v-18ac0d92] {
    top: 108px !important;
}