/* Main modal styling */
body.modal-open {
  overflow: hidden;
}

.custom-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,.85);
      }

  .custom-modal-content {
    background: #fff;
    border-radius: 20px;
    margin: 10% auto 0 auto;
    padding: 20px;
    width: 80%;
  }
  .custom-modal-content img {
    width: 50%;
    text-align: center;
    display: flex;
    margin: auto;
}
  .custom-modal-footer{
    background-color: transparent;
    margin: 0 auto;
    padding: 20px;
    width: 80%; 
    color: #fff;
  }
  .close {
    color: #aaa;
    float: none;
    font-size: 30px;
    position: absolute;
    width: 410px;
    text-align: right;
}


  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }


/* Sign up modal */
.custom-modal.signup {
    display: none; 
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,.85);
    }

  .custom-modal-content.signup {
    background: #fff;
    border-radius: 20px;
    margin: 8% auto 0 auto;
    padding: 20px;
    width: 450px;
  }
  .custom-modal-content.payment {
    background: #fff;
    border-radius: 20px;
    margin: 12% auto 0 auto;
    padding: 20px;
    width: 450px;
    display: none;
  }
  .custom-modal-content.payment-done {
    background: #fff;
    border-radius: 20px;
    margin: 12% auto 0 auto;
    padding: 20px;
    width: 450px;
    height: 440px;
    display: none;
    text-align: center;
  }.custom-modal-content.payment-failed {
    background: #fff;
    border-radius: 20px;
    margin: 12% auto 0 auto;
    padding: 20px;
    width: 450px;
    height: 440px;
    display: none;
    text-align: center;
  }
  .custom-modal-footer.signup{
    background-color: transparent;
    margin: 0 auto;
    padding: 20px;
    width: 450px; 
    color: #fff;
  }
  .custom-modal-content.image {
    background: transparent;
    border-radius: 20px;
    margin: 10% auto;
  }
  .custom-modal-content img {
    width: auto;
    border-radius: 20px;
    text-align: center;
    display: flex;
    margin: auto;
    max-height: 50vh;
    
}.custom-modal-content img:hover{
  cursor: pointer;
}

  @media only screen and (max-width: 930px) and (max-device-width: 930px) {
    .custom-modal-content.signup {
        margin: 30% auto 0 auto;
        width: 90%;
      }
      .custom-modal-footer.signup{
        width: 90%;
      }
      .custom-modal-content img {
        width: -webkit-fill-available;
        max-height: 100vh;
      }
      .custom-modal-content.image {
        margin: 20% auto;
      }.custom-modal-content.payment {
        /* important to add in any modal */
        margin: 30% auto 0 auto; 
        width: 90%;
      }.custom-modal-content.payment-done {
        margin: 30% auto 0 auto;
        width: 90%;
      }.custom-modal-content.payment-failed {
        margin: 30% auto 0 auto;
        width: 90%;
      }.close {
        width: 80%;
    }
    
  }