.view.map {
    xwidth:100%;
    xheight:100%;

    box-shadow: inset 0px 0px 10px 10px black;
}

.view.map > .map-cont {
    border:5px solid green;
    position:relative;
    width:100%;
    height:100%;
    overflow:scroll;
    
    xdisplay:flex;
    xalign-items: start;
    xjustify-content: start;
    xscroll-behavior: smooth;
    
}


.view.map > .map-cont > .data {
    position:fixed;
    xposition:absolute;
    pointer-events:none;
    top:10%;
    left:0;

    width:100%;
    height:40px;
    background-color:rgba(0,0,0,0.5);
    xborder:1px solid lime;
    z-index:2;
    padding:5px;

    display:flex;
    justify-content: end;
    align-items: center;
}

.view.map > .map-cont > .data > .zoom-level-cont {
    xborder:1px solid red;
    xtext-align: right;
    xcolor:rgb(0, 203, 0);
    display:inline-flex;
    justify-content: end;
    align-items: center;
    padding-right:10px;
    xwidth:10%;
    font-family: Roboto Mono, Consolas, monospace, Courier New;
    font-family: 'WhiteRabbit';

}

.view.map > .map-cont > .data > .zoom-level-cont > .label {
    xcolor:red;
    xborder:1px solid red;
}

.view.map > .map-cont > .data > .zoom-level-cont > .label {
    xcolor:red;
    xborder:1px solid red;
    xwidth:50px;
}


.view.map > .map-cont > .map {
    xborder:5px solid green;

    xwidth:100%;
    xheight:100%;
    height:100%;

    xposition:relative;
    xbackground-image:url('../../img/space1.png');
    xbackground-image:url('https://i.imgur.com/PWLpYPB.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image:url('https://i.imgur.com/PWLpYPB.png');
    background-size: 100%;
    zoom:0.2;

    position:relative;
    xoverflow:hidden;
    xtop:50%;
    xbottom:50%;
    xleft:50%;
    xright:50%;
  
}

.view.map > .map-cont > .map > .location {
    position:relative;
    width:150px;
    height:150px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;

    xborder:1px solid rgba(255,255,255,0.5);
    xbackground-color:red;
    border: 0.2em solid rgba(0,0,0,0);
}

.view.map > .map-cont > .map > .location.selected {
    xoutline:2px solid rgba(0, 255, 0, 0.99);
    --line-color: rgba(0,255,255,0.5);
    border: 0.2em solid var(--line-color);
 
    xmix-blend-mode: multiply;
    border-radius:100%;

    /* cool square 45-degree border 
    background-image: 
        repeating-linear-gradient(45deg,var(--line-color), var(--line-color) 0.2em, rgba(0,0,0,0) 0.2em, rgba(0,0,0,0) 25%), 
        repeating-linear-gradient(-45deg,var(--line-color), var(--line-color) 0.2em, rgba(0,0,0,0) 0.2em, rgba(0,0,0,0) 25%)
    ;
    */

    background-image: 
        repeating-linear-gradient(45deg,var(--line-color), var(--line-color) 0.2em, rgba(0,0,0,0) 0.2em, rgba(0,0,0,0) 25%), 
        repeating-linear-gradient(-45deg,var(--line-color), var(--line-color) 0.2em, rgba(0,0,0,0) 0.2em, rgba(0,0,0,0) 25%)
    ;
}

.view.map > .map-cont > .map > .location > .graphic {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius:100%;
    xborder:1px solid red;
    width: 100%;
    aspect-ratio: 1/1;
    pointer-events: none;
    position:absolute;
}


.view.map > .map-cont > .map > .location > .name {
    display:flex;
    
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size:1em;
    pointer-events: none;
    z-index:1;
    text-shadow: 
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0),
        0px 0px 15px rgba(0,0,0,1.0)


    ;
    xborder:1px solid red;
    width:500%;
    xmargin-top:100%;
    xfont-family: Roboto Mono, Consolas, monospace, Courier New;
    xfont-family: 'Caslon';
    
}

.view.map > .map-cont > .map > .debug-box {
    pointer-events:none;
    position:absolute;
    display:flex;
    border:10px solid red;
    width:50px;
    height:50px;
    top:0;
    left:0;
}