#map-container {
    position:absolute;
    height:100%;
    aspect-ratio: 1 / 1;
    
/*
top:0;
    bottom:0;
    left:0;
    right:0;
*/
}

#map-container:after{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        content:'';
        display:block;
             box-shadow: 0 0 200px 30px rgba(0,0,0,0.9) inset;
        pointer-events: none;
    }
    
#map-container.open-vignette:after {
        
        animation: open_vignette .5s ease-in-out;
    }
@keyframes open_vignette {
    0%{
     box-shadow: 0 0 200px 1000px rgba(0,0,0,0.9) inset;

    }
    100% {
             box-shadow: 0 0 200px 10px rgba(0,0,0,0.9) inset;

    }
}



#map-bg, #map-fg {
    position:absolute;
    top:0;
    background-image:url(../images/oveview-map/overview-bg.png);
    background-size:auto 100%;
    background-repeat:no-repeat;
    background-position:center;
    height:100%;
    width:100%;
}
#map-fg {
    background-image:url(../images/oveview-map/overview-fg.png);    
}

.market-area {
    position:absolute;
    height:43.5%;
    width:43%;
    left:28%;
    top:16.6%;
/*    background:rgba(200,0,200,.2);*/
}
.slot {
    position:absolute;
    height:21%;
    padding-right:calc(21% * .96);
/*    background:rgba(0,0,0,.2);*/
}

.slot-bg { 
    position:absolute;
    height:100%;
    width:100%;
    bottom:0;
    /*empty slot*/
    background-image:url(../images/oveview-map/Stall_Empty.png);
    background-size: 100%;
    justify-content: center;
    align-items: center;
/*    background-color:rgba(0,0,0,.2);*/
}


.slot.tab-highlighted {
    outline:0;
}
.slot.tab-highlighted:before {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    display:block;
    outline:2px dashed white;
    outline-offset:1px;
}
.empty.slot.tab-highlighted:before {
    top:30%;
}

.slot-bg.alert:after {
    position:absolute;
    content:'';
/*    background-color:rgba(100,0,0,.2);*/
    background-image:url(../images/oveview-map/alert.png);
    background-repeat: no-repeat;
    width:47.75%;
    margin:auto;
    aspect-ratio: 117 / 136;
    background-size:100%;
    top:-40%;
    left:calc(50% - 47.75%/2);

}
#slot-1 {
    left:20%;
    bottom:84.65%;
}
#slot-2 {
    left:60%;
    bottom:84.65%;
}
#slot-3 {
    left:0;
    bottom:70.45%;
}
#slot-4 {
    left:40%;
    bottom:70.45%;
}

#slot-5 {
    left:80%;
    bottom:70.45%;
}
#slot-6 {
    left:20%;
    bottom:56.65%;
}
#slot-7{
    left:60%;
    bottom:56.65%;
}
#slot-8 {
    left:0;
    bottom:42.45%;
}
#slot-9 {
    left:40%;
    bottom:42.45%;
}

#slot-10 {
    left:80%;
    bottom:42.45%;
}
#slot-11 {
    left:20%;
    bottom:28.65%;
}
#slot-12{
    left:60%;
    bottom:28.65%;
}
#slot-13 {
    left:0;
    bottom:14.45%;
}
#slot-14 {
    left:40%;
    bottom:14.45%;
}

#slot-15 {
    left:80%;
    bottom:14.45%;
}
#slot-16 {
    left:20%;
    bottom:0.65%;
}
#slot-17{
    left:60%;
    bottom:0.65%;
}

.fruit-stall.slot-bg { 
    background-image:url(../images/oveview-map/overview-stall.png);;
    }


.customer {
    position:absolute;
    left:46%;
    bottom:40%;
    height:3.5%;
    aspect-ratio:23/40;
    background-image:url(../images/oveview-map/customer-01.png);
    background-repeat: no-repeat;
    background-size:100%;
}
.customer .thought-bubble {
    position:absolute;
    width:160%;
    left:-30%;
    top:-110%;
    aspect-ratio:1 / 2;
    background-image: url(../images/oveview-map/customer-thought-bubble.png);
    background-size:100%;
    background-repeat: no-repeat;
    display:flex;
    justify-content: center;
    align-items: center;
}

.customer .thought-bubble.happy:before {
    position:absolute;
    width:76%;
    left:9%;
    top:7%;
    aspect-ratio:1/1;
    content:'';
    display: block;
    background-image:url(../images/oveview-map/happy-icon.png);
    background-size:100%;
}