#openReferralModal {
   padding: 10px 30px 10px 30px;
   background: antiquewhite;
   font-size: medium;
   border: none;
   border-radius: 5px;
}


/* Modal Overlay */
.referral-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   /* dark transparent background */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

/* Modal Box */
.modal-content {
   background-color: #fff;
   padding: 30px;
   border-radius: 8px;
   width: 90%;
   max-width: 500px;
   max-height: 90vh; 
   overflow-y: auto;  
   position: relative;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
   animation: fadeIn 0.3s ease-in-out;
   box-sizing: border-box; 
}

/* Close Button */
.close-modal {
   position: absolute;
   top: 15px;
   right: 15px;
   background: transparent;
   border: none;
   font-size: 28px;
   cursor: pointer;
   color: #7c7b7b;
   border-radius: 50%;
}

#closeModelButton {
   position: absolute;
   top: 10px;
   right: 10px;
   background: transparent;
   color: #7c7b7b;
   border: none;
   font-size: 28px;
   font-weight: 500;
   cursor: pointer;
}

/* Form Elements */
#referralForm label {
   display: block;
   margin-top: 15px;
   font-weight: bold;
}

#referralForm input[type="text"],
#referralForm input[type="email"],
#referralForm input[type="file"] {
   width: 100%;
   padding: 10px;
   margin-top: 5px;
   border-radius: 8px;
   border: 1px solid #ccc;
   font-size: 14px;
   line-height: 0 !important;
}

#referralForm button[type="submit"] {
   margin-top: 20px;
   padding: 10px 20px;
   background-color: #0073aa;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
}

#referralForm button[type="submit"]:hover {
   background-color: #005177;
}

.modal-content {
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
}

.submission-status{
   margin-top: 15px;
   font-size: 18px;
   display: flex;
   justify-content: center;
}

.terms-conditions {
   margin-top: 15px;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}

/* Fade In Animation */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: scale(0.95);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}