.modal {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  z-index: 999;
  background: rgba(177, 177, 177, 0.75);
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(15px) saturate(60%) contrast(120%);
  -webkit-backdrop-filter: blur(15px) saturate(60%) contrast(120%);
}
.modal.active {
  display: flex;
}
.modal-content {
  background: white;
  padding: 25px;
  border-radius: 12px;
  width: 400px;
  position: relative;
  animation: fadeIn 0.5s ease;
}
#modal-desc {
  width: 100%;  
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  justify-content: space-between;
}
#modalresults, #samodalresults {
  width: 50%;
  padding: 0 1em;
  background-color: #f0efeb;
  border-radius: 2em;
  padding: 15px;
}
#modalresults > p, #samodalresults > p {
  margin: 0;
}
#modalform, #samodalform {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.setwidthofhalfmodal {
  width: 50% !important;
}
.setwidthofmodaldesc {
  width: 800px !important;
}
.closesa, .closeca, .closerg {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}