:root{
    --primary-color:darkslateblue;
    --secondary-color:darkblue;
}
#popup-overlay {
  /* This darkens the background and centers the popup */
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup {
  display: flex;
  flex-direction: column;
  position:absolute;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  width: 80%;
  height: 80%;
}

.popup-header {
  padding: 10px 15px;
  background-color: var(--primary-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
}

.popup-title {
  font-weight: bold;
  color: white;
}

.popup-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  color: white;
}

.popup-close-btn:hover {
  font-weight:bold;
}

.popup-content {
  padding: 15px;
  flex-grow: 1;
  overflow-y: auto;
}

.popup-banner{
    background-color: white;
    color:darkblue;
    font-size:32px;
    height:auto;
    width:auto;
    padding:40px;
    border-radius: 8px;
}

.popup-alert{
    background:white;
    border:1px solid var(--primary-color);
    padding:50px;
    text-align:center;
    font-size: 16pt;
    position:fixed;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    min-width:300px;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.btn, .popup-input{
    margin:10px;
    padding:10px;
    font-size: 16pt;
    border:1px solid var(--primary-color);
}

.popup-input{
  display:block;
  width:100%;
}

.btn-accept{
    background-color: var(--primary-color);
    color:white;
}

.btn-reject{
    background-color: darkgrey;
    color:white;
}

.text-input{
  display:block;
  font-size:12pt;
}


@media screen and (max-width: 1000px) {
.popup-alert{
  width:100%;
  font-size:1.2em;
}
.btn, .popup-input
{
  font-size:1.2em;
}
}