#root {
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.map {
    position: relative;
}

.mapimg {
    width: 100%;
    height: 100%;
}

.room {
    position: absolute;
    border: dashed black 1px;
    background: #33333333;
}

.room:hover {
    background: #FFFFFF33;
}

.room:hover .roomtip {
    visibility: visible;
}

.roomtip {
    align: center;
    visibility: hidden;
    color: white;
    position: relative;
    top: -100px;
    background: #555555;
    border: solid black 1px;
    border-radius: 15px;
    word-wrap: break-word;
}

.roomname {
    margin: none;
    padding: none;
    font-size: 14pt;
}

.marker {
    width: 50px;
    height: 50px;
    position: absolute;
    border: solid black 1px;
    border-radius: 50px;
    background: #888888;
}

.markerimg {
    width: 50px;
    height: 50px;
    position: relative:
    top: 0;
    left: 0;
    border-radius: 50px;
}

.marker:hover .markertip {
    visibility: visible;
}

.markertip {
    width: 160px;
    height: auto;
    position: relative;
    bottom: 90px;
    right: 55px;
    display: inline-block;
    visibility: hidden;
    color: white;
    background: #555555;
    border: solid black 1px;
    border-radius: 15px;
    text-align: center;
    font-size: 10pt;
    word-wrap: break-word;
}
