#dotmap {
    position: relative;
}

#dotmap .dotmap-dot-root {
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
}

#dotmap .dotmap-dot-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 12px;
    height: 12px;

    background-color: #d1d3d4;
    border-radius: 20px;
    border: 3px solid transparent;
    transition: background-color 0.25s, width 0.25s, height 0.25s;
}

#dotmap .dotmap-dot-root.active .dotmap-dot-circle {
    width: 15px;
    height: 15px;
}

#dotmap .dotmap-dot-circle.has-loc {
    background-color: #0080ff;
}

#dotmap .dotmap-dot-circle.has-loc.loc-type-market {
    background-color: rgb(87, 87, 87);
}

#dotmap .dotmap-dot-circle.has-loc.loc-type-office {
    background-color: rgb(0, 114, 188);
}

#dotmap .dotmap-dot-circle.has-loc.loc-type-dc {
    background-color: rgb(0, 161, 154);
}

#dotmap .dotmap-dot-circle.has-loc.loc-type-odc {
    background-color: rgb(0, 0, 255);
}

#dotmap .dotmap-popup {
    opacity: 0;
    position: absolute;
    transition: left 0.1s, top 0.1s, opacity 0.25s;
    background: #fff2cc;
    color: #7f7f7f;
    padding: 5px;
    border: 1px solid black;
    z-index: 1;
    pointer-events: none;
    white-space: pre;
}

#dotmap .dotmap-popup.visible {
    opacity: 1;
}