.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: 0;
  width: 50vw;
  max-height: 80vh;
  margin-left: 25%;
  margin-top: 5%;
  padding: 15px;
  background: white;
  border: solid 1px black;
  border-radius: 1rem;
  transition: opacity 1s;
  transition-delay: .2s;
}

.custom-modal::-webkit-scrollbar {
  display: none;
}

.disable-scroll {
  overflow-y: hidden;
}

.custom-modal.show {
  visibility: visible;
  opacity: 1;
}

.bg-panel {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 30; 
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.71); 
  overflow-x: hidden; 
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 1s;
}

.bg-panel.show {
  opacity: 1;
}