  <style>
#main-content {
  position: relative;  /* Optional: this is just to make positioning of other elements inside easier */
  min-height: 100vh;
  padding-bottom: 60px;  /* Optional: in case you want some padding at the bottom for spacing */
}

#openFlyout {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  margin: 20px 0;  /* Add some margin so the button doesn't stick to surrounding text */
}

.flyout {
  position: fixed;
  top: 0;
  right: -80%;  /* Initially, the flyout is off-screen to the right */
  width: 50%;  /* Occupies 50% of the screen width */
  height: 100%;
  background-color: white!important;
  border:1px solid #333;
  color: white;
  padding: 40px 20px 20px 20px;
  overflow-y: auto;
  z-index: 1000;  /* Ensure the flyout appears above other content */
  opacity: 1;  /* Initially not visible */
  pointer-events: none;  /* Prevent interaction when it's not visible */
  transition: right 1.0s ease, opacity 1.0s ease; /* Add transition for smooth closing/opening */
}

/* ** RESPONSIVE PHONE ** */
@media only screen and (max-width:430px) {
    .flyout {
      width:100%!important;
      right:-100%;
    }  
}

/* ** RESPONSIVE TABLET ** */
@media only screen and (max-width:1024px) {
    .flyout {
      width:100%!important;
      right:-100%;
    }  
}


#flyout.open {
  right: 0;  /* When the flyout is open, it moves to right: 0 */
  opacity: 1;  /* Make it fully visible */
  pointer-events: auto;  /* Allow interaction */
  margin-top:0px;
  padding-top:0px;
}



.close-btn {
  padding: 10px;
  background-color: #ff0000;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  margin: 10px 0;  /* Add some margin to keep it from sticking to other elements */
}

.close-btn:hover {
  background-color: #cc0000;
}

#flyout-content {
  margin-top:0px;
  margin-bottom: 50px; /* Add space for the close button at the bottom */
}

#closeFlyoutTop {
  float:right;
}
#closeFlyoutBottom {
  margin-bottom:150px;
}