body {
  overflow: hidden;
}

.flex-container {
  margin-top: 5em;
  height: 90vh;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  align-items: flex-start;
}

#canvasDiv {
  border-radius: 10px;
  margin-bottom: .5em;
}

#leftBox {
  display: flex;
  flex-direction: column;
  transition: width 0.1s;
  margin-top: 1.25em;
  margin-left: 1.5em;
  height: 85vh;
  margin-right: .25em;
}
#leftBox select, button {
  margin-bottom: .5em;
}
.box1 {
  width: 10vw;
  color: white;
  transition: width 0.1s;
  display: flex;
  flex-direction: column;
}

.box1.collapsed {
  width: 0;
  overflow: hidden;
}

#leftBox.collapsed {
  width: 0;
  overflow: hidden;
}

#toggleLegendButton {
  background-color: transparent;
  border: none;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  display: block;
  margin-top: .9em;
}

#returnButtonContainer {
  margin-top: auto;
  padding-bottom: 1em;
}

.box2 {
  align-self: start;
  margin: 10px;
  margin-left: 1.5em;
}

.box3 {
  margin: 10px;
  width: 45vw;
  transition: width 0.1s;
  overflow-x: hidden; 
}
.box3 h1, h2, p {
  color:white;
}

.box1.collapsed + .box3 {
  width: 55vw;
}
#selectedPointsContainer {
  max-height: 85vh; 
  overflow-y: auto; 
}

.point-display {
  position: relative;
  display: flex; 
  margin: 10px;
}

.point-info {
  color: white;
  margin-top: 10px;
  flex: 1; 
  flex-basis: 17%;
  overflow: hidden;
}

.point-info p {
  margin: 0;
}

.point-image {
  flex-basis: 83%;
  resize: vertical;
  background: white; 
  line-height: 0;
  padding: 1em;
  overflow: hidden; 
}

.point-image img {
  height: auto;
  width: auto; 
  max-width: 100%; 
  max-height: 100%; 
  object-fit: contain;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}

.point-image::-webkit-scrollbar {
  display: none; /*chrome no scroll bar*/
  background: transparent;
}

.point-image img:hover {
  cursor: zoom-in; 
}
.box3::-webkit-scrollbar {
  width: 5px;
}

.box3::-webkit-scrollbar-track {
  background-color: #202124;
}

.box3::-webkit-scrollbar-thumb {
  background: #fafafa;
  border-radius: 10px;
}

.close-button {
  position: absolute;
  top: 5px;
  right: 10px;
  color: black;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover {
  color: red;
}