.popup_overlay {
  display: none;
  position: fixed;
  inset: 0; /* shorthand for top: 0; right: 0; bottom: 0; left: 0; */
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  z-index: 99;
}

.popup_overlay .popup {
  z-index: 100;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(100px, 400px, 900px);
  height: min-content;
  border-radius: 9px;

  background: white;
  display: grid;
  padding: 10px 10px 30px 10px;
}

.popup_overlay .popup .header .right_panel .cross {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.popup_overlay .popup .header {
  display: grid;
  grid-auto-flow: column;
  height: min-content;
}

.popup_overlay .popup .body {
  padding: 0px clamp(20px, 50px, 100px) 30px clamp(20px, 50px, 100px); 
}

.popup_overlay .popup .header .right_panel {
  display: grid;
  justify-self: end;
}

.popup_overlay .popup .footer {
  align-self: self-end;
  justify-self: center;
  justify-items: center;
  justify-content: center;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.popup_overlay .popup .footer button{
  display: inline;
  width: min-content;
}

.popup_overlay .popup .footer .close_btn {
  width: min-content;
  justify-self: center;
  cursor: pointer;
}