.popupButton
{
  margin: 15px 10px;
}

.modal {
    display: none;
    position: fixed; 
    padding-top: 50px;
    left: 0; 
    top: 0;
    width: 100%;
    height: 100%; 
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
  }
  .modal-content {
    position: relative; 
    background-color: #efefef;
  
    margin: auto; 
    width: 100%;  
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    max-width: 700px;
    border: solid 3px black;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  
  .modalMainBody
  {
      padding: 20px; 
      text-align: center;
  }
  
.modalTitleBar
{
  text-align: center;
  font-weight: bold;
  margin: 20px;
  font-size: 1.3rem;
}

  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
  }
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }