/***** MODAL DIALOG ****/
#modal {
  /* Underlay covers entire screen. */
  position: fixed;
  top:0px;
  bottom: 0px;
  left:0px;
  right:0px;
  background-color:rgba(0,0,0,0.5);
  z-index:1000;

  /* Flexbox centers the .modal-content vertically and horizontally */
  display:flex;
  flex-direction:column;
  align-items:center;

  /* Animate when opening */
  animation-name: fadeIn;
  animation-duration:150ms;
  animation-timing-function: ease;
}

#modal > .modal-underlay {
  /* underlay takes up the entire viewport */
  position: absolute;
  z-index: -1;
  top:0px;
  bottom:0px;
  left: 0px;
  right: 0px;
}

#modal > .modal-content {
  /* Position visible dialog near the top of the window */
  margin-top:10vh;

  /* Sizing for visible dialog */
  width:80%;
  max-width:600px;

  /* Display properties for visible dialog*/
  border:solid 1px #999;
  border-radius:8px;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
  background-color:white;
  padding:20px;

   /* Add these styles for scrolling */
   max-height: 80vh;  /* Maximum height of 80% of the viewport height */
   overflow-y: auto;  /* Enable vertical scrolling */

   /* Optional: for smoother scrolling */
   scroll-behavior: smooth;

   /* Optional: style the scrollbar */
   scrollbar-width: thin;  /* For Firefox */
   scrollbar-color: #888 #f1f1f1;  /* For Firefox */

  /* Animate when opening */
  animation-name:zoomIn;
  animation-duration:150ms;
  animation-timing-function: ease;
}
#modal > .modal-content::-webkit-scrollbar {
  width: 8px;
}

#modal > .modal-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#modal > .modal-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

#modal > .modal-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#modal.closing {
  /* Animate when closing */
  animation-name: fadeOut;
  animation-duration:150ms;
  animation-timing-function: ease;
}

#modal.closing > .modal-content {
  /* Animate when closing */
  animation-name: zoomOut;
  animation-duration:150ms;
  animation-timing-function: ease;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes zoomIn {
  0% {transform: scale(0.9);}
  100% {transform: scale(1);}
}

@keyframes zoomOut {
  0% {transform: scale(1);}
  100% {transform: scale(0.9);}
}