.co-map {
    --co-map-height: 640px;
    --co-map-border: #c8d0d5;
    --co-map-bg: #eef2f3;
    --co-map-text: #1d2930;
    --co-map-muted: #66757f;
    --co-map-low: #4596b8;
    --co-map-medium: #f3e46d;
    --co-map-high: #fdae61;
    --co-map-critical: #d73027;
    position: relative;
    min-height: var(--co-map-height);
    background: var(--co-map-bg);
    border: 1px solid var(--co-map-border);
    color: var(--co-map-text);
}

.co-map__canvas {
    height: var(--co-map-height);
    min-height: 320px;
}

.co-map__state {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    max-width: min(320px, calc(100% - 24px));
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--co-map-border);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.35;
}

.co-map.is-loaded .co-map__state {
    display: none;
}

.co-map__legend {
    position: absolute;
    right: 12px;
    bottom: 28px;
    z-index: 2;
    min-width: 168px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--co-map-border);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.35;
}

.co-map__legend-title {
    margin-bottom: 6px;
    font-weight: 700;
}

.co-map__legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--co-map-muted);
}

.co-map__legend-range {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    color: var(--co-map-muted);
    font-size: 12px;
}

.co-map__heat-scale {
    height: 12px;
    border: 1px solid rgba(38, 55, 63, 0.2);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(69, 150, 184, 0.1), #4596b8 16%, #7fcdbb 34%, #f3e46d 52%, #fdae61 68%, #d73027 84%, #7f0000);
}

.co-map__swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.co-map__swatch--low {
    background: var(--co-map-low);
}

.co-map__swatch--medium {
    background: var(--co-map-medium);
}

.co-map__swatch--high {
    background: var(--co-map-high);
}

.co-map__swatch--critical {
    background: var(--co-map-critical);
}

.co-map-popup {
    max-width: 260px;
}

.co-map-popup__title {
    margin: 0 0 4px;
    font-weight: 700;
}

.co-map-popup__meta {
    margin: 0 0 6px;
    color: var(--co-map-muted);
}

.co-map-popup__value {
    margin: 0;
    font-weight: 700;
}

.co-map-social-office-selection {
    margin-top: 10px;
    margin-bottom: 10px;
}

.co-map-social-office-selection > * {
    margin-bottom: 12px;
    min-width: 0;
}

.co-map-social-office-selection h5 {
    margin: 0.5rem
}

.co-map-social-office-selection .clearfix {
    border: 1px solid #002A5C;
}

.co-map-social-office-selection__label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    min-width: 0;
    margin: 0;
    padding: 8px 8px 8px 10px;
    background: #fff;
    color: #1d2930;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}

.co-map-social-office-selection__label--empty {
    grid-template-columns: minmax(0, 1fr);
    color: #66757f;
}

.co-map-social-office-selection__remove {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #1d2930;
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    line-height: 1;
}

.co-map-social-office-selection__remove:hover,
.co-map-social-office-selection__remove:focus {
    border-color: #4596b8;
    background: #eef7fa;
}

.co-map-member-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(29, 41, 48, 0.42);
}

.co-map-member-dialog[hidden] {
    display: none;
}

.co-map-member-dialog__panel {
    width: min(100%, 420px);
    padding: 20px;
    background: #fff;
    border: 1px solid #c8d0d5;
    border-radius: 4px;
    box-shadow: 0 14px 42px rgba(29, 41, 48, 0.24);
    color: #1d2930;
}

.co-map-member-dialog__text {
    margin: 0 0 16px;
    line-height: 1.45;
}

.co-map-member-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.co-map-member-dialog__button {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #9aa8b0;
    border-radius: 4px;
    background: #fff;
    color: #1d2930;
    cursor: pointer;
    font: inherit;
}

.co-map-member-dialog__button--primary {
    border-color: #1d2930;
    background: #1d2930;
    color: #fff;
}

@media (max-width: 767px) {
    .co-map {
        --co-map-height: max(420px, var(--co-map-height));
    }

    .co-map__legend {
        right: 8px;
        bottom: 22px;
    }

    .co-map-member-dialog {
        align-items: flex-end;
        padding: 16px;
    }

    .co-map-member-dialog__actions {
        flex-direction: column-reverse;
    }

    .co-map-member-dialog__button {
        width: 100%;
    }
}