/* Dwelling Location */
table.dwellinglocation-chessboard 
{
    width: 100%;
    margin-top: 32px;
    padding: 8px;
    border-collapse: separate;
    border: 1px solid #333;
    border-spacing: 8px;
    background-color: #cecece;
}
table.dwellinglocation-chessboard td 
{
    width: 100px;
    height: 200px;
    max-width: 100px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    padding: 32px !important;
}
.dwellinglocation-entrance {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute; 
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: solid 1px #cecece;
    background-color: #00FF00;
    opacity: 1;
    z-index: 2;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */
}
.dwellinglocation-hallway {
    position: absolute;
    width: 64px;
    height: 224px;
    background-color: #cecece;
    border-radius: 8px;
    opacity: 1;
    z-index: 1;
}
/* Chessboard coloring classes */
.dwellinglocation-chessboard-light 
{
    background-color: #DAF1DC; /* Light color */
}
.dwellinglocation-chessboard-dark 
{
    background-color: #EAFEEB; /* Dark color */
}

/* WNART */
span.frac
{
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
span.frac > sup, span.frac > sub 
{
    display: block;
    font: inherit;
    padding: 0 0.2em;
}
span.frac > sup 
{
    border-bottom: 0.06em solid;
}
span.frac > span 
{
    display: none;
}
sup 
{
    top: 0em !important;
}

/* Transformation */
.transformation-map
{
    position: relative;
    display: inline-block;
}
.transformation-map-label
{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px;
    text-align: center;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    transition: transform 0.2s ease, font-size 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;    
}

.transformation-legend-label
{
    padding: 5px;
    border-radius: 999px;
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.transformation-legend-label:hover 
{
    transform: scale(1.01); /* Zoom effect */
    /*background-color: #b3daec; */ /*Optional: Darken the background color on hover*/
}

@media( max-width: 900px )
{
    .transformation-map-label {
        display: none;
    }
}

@media( max-width: 900px )
{    
    #transformation-map-figcaption {
        display: none;
    }
}

#transformation-map-label-01 
{
    left: 35%;
    top: 65%;
}

#transformation-map-label-02 
{
    left: 40%;
    top: 55%;
}

#transformation-map-label-03 
{
    left: 75%;
    top: 45%;
}

#transformation-map-label-04 
{
    left: 80%;
    top: 65%;
}

#transformation-map-label-05 
{
    left: 85%;
    top: 55%;
}

#transformation-map-label-06 
{
    left: 90%;
    top: 45%;
}

#transformation-map-label-07 
{
    left: 60%;
    top: 75%;
}

#transformation-map-label-08 
{
    left: 40%;
    top: 75%;
}

#transformation-map-label-09 
{
    left: 20%;
    top: 65%;
}

#transformation-map-label-10 
{
    left: 30%;
    top: 45%;
}

#transformation-map-label-11 
{
    left: 30%;
    top: 55%;
}

#transformation-map-label-12 
{
    left: 35%;
    top: 25%;
}

#transformation-map-label-13 
{
    left: 40%;
    top: 5%;
}

#transformation-map-label-14 
{
    left: 55%;
    top: 25%;
}

#transformation-map-label-15 
{
    left: 45%;
    top: 35%;
}

#transformation-map-label-16 
{
    left: 55%;
    top: 45%;
}

#transformation-map-label-17 
{
    left: 50%;
    top: 55%;
}

#transformation-map-label-18 
{
    left: 50%;
    top: 65%;
}

#transformation-map-label-19 
{
    left: 50%;
    top: 85%;
}

#transformation-map-label-20 
{
    left: 50%;
    top: 95%;
}

#transformation-map-label-21 
{
    left: 75%;
    top: 75%;
}

#transformation-map-label-22 
{
    left: 65%;
    top: 15%;
}

#transformation-map-label-23 
{
    left: 60%;
    top: 35%;
}

#transformation-map-label-24 
{
    left: 20%;
    top: 75%;    
}

#transformation-map-label-25 
{
    left: 70%;
    top: 85%;
}

#transformation-map-label-26 
{
    left: 75%;
    top: 25%;
}