/* Adjustable margin */
:root {
  --screen-margin: 50px; /* change this freely */
}

/* Kill scrollbars at the source */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Always fits within visible screen */
.viewport-box {
  box-sizing: border-box;

  width: calc(
    100dvw - (var(--screen-margin) * 2)
    - env(safe-area-inset-left)
    - env(safe-area-inset-right)
  );

  height: calc(
    100dvh - (var(--screen-margin) * 2)
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
  );

  margin: var(--screen-margin);

  border-radius: 8px;

  overflow: hidden; /* internal scrolling only if you want it */
}

.viewport-box {
  overflow: auto;
}

#divMap {
  position: relative;
  height: 100%;
  width: 100%;
}

#lblMap {
  font-size: 24px;
  color: black;
}

#divKey { 
  width: 20%;
  height: 55px;
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
  display: flex;
  border-radius: 8px; /* Optional: Rounded corners */
  flex-direction: column;  /* Stack children vertically */
  justify-content: flex-start; /* Align items to the top */
  align-items: stretch; /* Stretch children to take the full width */
  padding: 10px;
  border: 2px solid gray;
  visibility: hidden;
}

.button-container {
  display: flex;
  justify-content: space-between;  /* Distribute buttons evenly */
  margin-bottom: 6px; /* Space between buttons and text */
}

.action-button {
  flex: 1; /* Make buttons equal size */
  margin: 0 2px; /* Space between buttons */
  padding: 5px;
  font-size: 14px;
  background-color: lightgray;
  border: 1 px solid black;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  width: 30%;
}

/* Container for text */
.text-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Evenly space the text */
  flex-grow: 1; /* Take the remaining space */
}

.text-line {
  color: black; /* Text color */
  flex: 1; /* Allow the text lines to grow equally */
  display: flex;
  align-items: center;
  justify-content: center;  /* Center text horizontally and vertically */
  padding: 5px;
  font-size: 14px;
}