/* Styling for the overlay background */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the modal container */
.modal {
  width: 500px;
  height: 500px;
  background-color: white;
  display: flex;
}

/* Styling for the left red area (25%) */
.left-panel {
  width: 30%;
  background-color: red;
}

/* Styling for the right iframe area (75%) */
.right-panel {
  width: 70%;
}

/* Styling for the iframe within the right panel */
iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Class to hide an element */
.hide {
  display: none;
}

/* Class to show an element */
.show {
  display: block;
}

/* Styling for the close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 2; /* Add a higher z-index to make sure it appears above the modal content */
}