#worldmap-container{
    width:100%;
    margin:auto;
    background:white;
    position:relative;
}

#worldmap-container svg{
    width:100%;
    height:auto;
    cursor:none;
}

/* countries */

.country{
    fill:#d9d9d9;
    stroke:#666;
    stroke-width:.02;
    transition:fill .3s ease;
}

.highlight{
    fill:#33669a;
}

.highlight-hover{
    fill:orange;
}

/* flags */

.flag{
    pointer-events:none;
    transition:opacity .2s;
}

/* tooltip */

#tooltip{
    position:absolute;
    background:white;
    border:1px solid rgba(0,0,0,.15);
    padding: 8px 14px;
    font-size:16px;
    display:none;
    pointer-events:none;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
    border-radius:4px;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:10px;
    z-index:2;
}

#tooltip img{
    width:24px;
    height:16px;
    object-fit:cover;
    display:inline-block;
    box-shadow:0 0 1px rgba(0,0,0,.4);
    border-radius:1px;
    margin-right:5px;
    position:relative;
    top:-2px;
}

/* crosshair */

.crosshair line{
    stroke:#333;
    stroke-width:.28;
    opacity:.25;
    transition:opacity .4s ease;
    pointer-events:none;
}

/* loupe */

.loupe-ring{
    fill:none;
    stroke:#444;
    stroke-width:2;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.loupe-glass{
    fill:rgba(255,255,255,.15);
}

.loupe-handle{
    stroke:#444;
    stroke-width:3;
    stroke-linecap:round;
}

/* SG */

.sg-dot{
    fill:#33669a;
    stroke:white;
    stroke-width:.6;
    transition:fill .3s ease;
}

.sg-dot-hover{
    fill:orange;
}