:root {
    --dd-hotspot-height: 40px;
    --dd-hotspot-text-color: grey;
    --dd-hotspot-background-color: white;
    --dd-hotspot-sublabel-text-color: white;
    --dd-hotspot-sublabel-background-color: orange;
}

.dd-hotspot {
    pointer-events: auto;
}

@media screen AND (hover:hover){
    .dd-hotspot:hover {
        z-index: 1;
    }
}

.dd-hotspot-anchor {
    position: absolute;
    display: block;
    top:-100%;
    cursor: pointer;
}

.dd-hotspot-background {
    height:var(--dd-hotspot-height); /*VAR*/

    
    position: absolute;
    transform: translate(-50%, -50%);
    background: var(--dd-hotspot-background-color);
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ededed;
    padding: 0 1em;
    gap: 0.5em;

    /* opacity: 1; */
    /* height: 48px; */
    /* min-width: 48px; */
    /* padding: 12px; */
    /* transition: all 200ms linear; */
    
}

.dd-hotspot-icon {
    line-height: 0;
    width: calc( 0.6 * var(--dd-hotspot-height));
    height: calc( 0.6 * var(--dd-hotspot-height));
}

.dd-hotspot-icon svg {
    fill: var(--dd-hotspot-text-color);
    width: 100%;
    height: 100%;
}

.dd-hotspot-text {
    white-space: nowrap;
    text-wrap: nowrap;
    color: var(--dd-hotspot-text-color);
}

.dd-hotspot-subtext {
    color: var(--dd-hotspot-sublabel-text-color);
    background: var(--dd-hotspot-sublabel-background-color);
    display: block;
    position: absolute;
    transform: translate(0%, 115%);
    white-space: nowrap;
    text-wrap: nowrap;
    z-index: 2;
    padding: 0 0.75em;
    border-radius: 99px;
    font-size: 0.8em;
}

.dd-hotspot-stick {
    /* position: absolute; */
    display: block;
    background: white;
    width: 2px;
    /* transform: translate(-50%, -100%); */
    translate: -50% -100%;
}


.dd-hotspot .dd-squared {
    width:var(--dd-hotspot-height); /*VAR*/
    padding: 0;
}




/* .ipe-hotspot { */
    /* position: absolute; */
    /* transform: translate(-50%, -50%); */
    /* background-color: #888; */
    /* border-radius: 24px; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* cursor: pointer; */
    /* color: #ededed; */
    /* opacity: 1; */
    /* height: 48px; */
    /* min-width: 48px; */
    /* padding: 12px; */
    /* transition: all 200ms linear; */
/* } */