.map:not(.select) {
    display: none;
}

.map {
    padding: 0;
    margin: 0;
    position: relative;
}

.map div {
    user-select: none;
    -webkit-user-drag: none;
    position: absolute;
}

.map div[class]:not([class=""]) {
    box-shadow: 0 0 0 3px black;
    border-radius: 1px;
    transition: all 0.5s ease-in-out;
}

.red {
    background-color: #ff2629;
}

.yellow {
    background-color: #ffec3d;
}

.blue {
    background-color: #008cff;
}

.green {
    background-color: #73d13d;
}

.white {
    background-color: #ffffff;
}

.black {
    background-color: #2a2a2a;
}

/* ELEMENTARY */

#map_elementary>div {
    width: 3%;
    height: 6.2%;
}

#map_elementary *:nth-child(1) {
    left: 50.6%;
    top: 4.5%;
}

#map_elementary *:nth-child(2) {
    left: 56.2%;
    top: 4.5%;
}

#map_elementary *:nth-child(3) {
    left: 72.8%;
    top: 4.5%;
}

#map_elementary *:nth-child(4) {
    left: 78.4%;
    top: 4.5%;
}

/* JUNIOR */

#map_junior>div {
    width: 2.1%;
    height: 4.338%;
}

#map_junior *:nth-child(1) {
    left: 44.5%;
    bottom: 3.5%;
}

#map_junior *:nth-child(2) {
    left: 50.1%;
    bottom: 3.5%;
}

#map_junior *:nth-child(3) {
    left: 55.7%;
    bottom: 3.5%;
}

#map_junior *:nth-child(4) {
    left: 61.3%;
    bottom: 3.5%;
}

#map_senior>div {
    width: 1.34%;
    height: 2.70%;
}

/* SENIOR */

/* Row 1 (Top: 32.5% + 1.35% gap = 33.85%) */
#map_senior *:nth-child(1) {
    left: 46.27%;
    top: 33.85%;
}

#map_senior *:nth-child(2) {
    left: 48.28%;
    top: 33.85%;
}

#map_senior *:nth-child(3) {
    left: 50.29%;
    top: 33.85%;
}

#map_senior *:nth-child(4) {
    left: 52.30%;
    top: 33.85%;
}

/* Row 2 (Top: 33.85% + 2.70% height + 1.35% gap = 37.90%) */
#map_senior *:nth-child(5) {
    left: 46.27%;
    top: 37.90%;
}

#map_senior *:nth-child(6) {
    left: 48.28%;
    top: 37.90%;
}

#map_senior *:nth-child(7) {
    left: 50.29%;
    top: 37.90%;
}

#map_senior *:nth-child(8) {
    left: 52.30%;
    top: 37.90%;
}

/* Row 3 (Top: 37.90% + 2.70% height + 1.35% gap = 41.95%) */
#map_senior *:nth-child(9) {
    left: 46.27%;
    top: 41.95%;
}

#map_senior *:nth-child(10) {
    left: 48.28%;
    top: 41.95%;
}

#map_senior *:nth-child(11) {
    left: 50.29%;
    top: 41.95%;
}

#map_senior *:nth-child(12) {
    left: 52.30%;
    top: 41.95%;
}