/* Shared Button Styles */
#scrollToTopButton,
#scrollToBottomButton {
  position: fixed;
  right: 30px; /* Adjust distance from the right */
  z-index: 1000; /* Ensure visibility */
  width: 60px; /* Button width */
  height: 50px; /* Button height */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  visibility: hidden; /* Hidden by default */
  opacity: 0; /* Fully transparent */
}

/* Button Spacing */
#scrollToTopButton {
  bottom: 100px; /* Adjust distance for top button */
}

#scrollToBottomButton {
  bottom: 50px; /* Adjust distance for bottom button */
}

  /* Hover Effect */
  #scrollToTopButton:hover,
  #scrollToBottomButton:hover {
    background-color: #0056b3; /* Darker shade on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }

  /* Visible State */
  #scrollToTopButton.show,
  #scrollToBottomButton.show {
    visibility: visible;
    opacity: 1;
  }


.alignleft {
  width: 50%;
  text-align: left;
}

.alignright {
  width: 50%;
  text-align: right;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
}


<!-- CSS to make modal landscape -->
.modal-dialog {
  max-width: 90vw;
  width: auto;
  height: auto;
}

.modal-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

  .modal-body .row {
    margin-bottom: 15px;
  }

  .modal-body .col-6 {
    width: 48%;
  }

  .modal-body .col-4 {
    width: 32%;
  }