#mapPage {
  width: 100vw;
  height: 100vh;
  background-image: url('/assets/images/UI/Map.png'); /* Replace with your image URL */
  background-size: contain; /* Cover the entire div */
  background-position: center; /* Center the image */
  display: flex; /* Use flexbox to center the dialog */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: rgb(26, 26, 26);
  background-repeat: no-repeat;
  position: relative;
}

/* Styles for the parent div */
.parent-div {
  position: relative; /* Set positioning for the parent div */
  width: 100%; /* Set a width for the parent div */
  height: auto; /* Set a height for the parent div */
  border: 1px solid #ccc; /* Add a border for visibility */
}

/* Styles for the background image */
.background-image {
  width: 100%; /* Make the background image fill the parent div */
  height: auto; /* Maintain aspect ratio */
}

.pin-image {
  position: absolute; /* Fix the position */
  top: 20px; /* Distance from the top */
  right: 20px; /* Distance from the right */
  width: 100px; /* Set width */
  height: 100px; /* Set height */
  z-index: 1000; /* Ensure it appears above other content */
}


.map {
  display: inline-block;
  /* margin: 1em auto; */
  position: fixed;
  border: 1px solid grey;
  top: 50%;
  transform: translateY(-50%);
}

.map img {
  max-width:100%;
  max-height:100vh;
display: block;
}

.rpin {
  position: absolute;
  display: block;
  width: 4%;
  height: 4%;
  background: url('/assets/images/UI/Pin.png') no-repeat center center;
  background-size: contain;
  transform: translateX(-50%) translateY(0);
  filter: brightness(1) contrast(1.1);
  transition: all .3s ease;
}
.rpin:hover {
  cursor: pointer;
  transform: translateX(-50%) scale(1.25);
}
.code-warszawa {
  bottom: 55.9282%;
  left: 65.5994%;
}
.code-005 {
  bottom: 2%;
  left: 10%;
}
.code-005-1 {
  bottom: 2%;
  left: 15.5%;
}
.code-006-1 {
  bottom: 6%;
  left: 44.5%;
}
.code-038 {
  bottom: 48%;
  left: 15.5%;
}
.code-038-1 {
  bottom: 55%;
  left: 15.5%;
}
.code-039 {
  bottom: 78%;
  left: 8%;
}
.code-009 {
  bottom: 16%;
  left: 23%;
}
.code-010-1 {
  bottom: 13%;
  left: 44.5%;
}
.code-010-2 {
  bottom: 24%;
  left: 44.5%;
}
.code-025 {
  bottom: 34%;
  left: 44.5%;
}
.code-024 {
  bottom: 40%;
  left: 44.5%;
}
.code-026 {
  bottom: 39.5%;
  left: 44.5%;
}
.code-029-1 {
  bottom: 37.5%;
  left: 50%;
}
.code-031{
  bottom: 63%;
  left: 44.5%;
}
.code-032{
  bottom: 58%;
  left: 44.5%;
}
.code-036 {
  bottom: 75%;
  left: 26%;
}
.code-035{
  bottom: 81%;
  left: 44.5%;
}
.code-037{
  bottom: 74%;
  left: 63%;
}
.code-008-2{
  bottom: 5%;
  left: 76.5%;
}
.code-017{
  bottom: 55%;
  left: 76.5%;
}
.code-019{
  bottom: 67.5%;
  left: 73.5%;
}
.code-021{
  bottom: 64.5%;
  left: 75.0%;
}