/* Add this in your CSS file or <style> block */
/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent shadow */
    z-index: 40;
    pointer-events: none;
  }
  
  .modal-popup-small {
    max-width: 350px !important;
}

 .modal-popup {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%; /* Slightly smaller width for better responsiveness */
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1050; /* Ensure it's above other elements */
    border-radius: 12px; /* Slightly larger rounding for aesthetics */
    overflow: hidden;
    border: 1px solid #ddd; /* Add a subtle border */
    max-width: 500px; /* Limit size on larger screens */
    max-height: calc(100% - 20px); /* Reduce modal height on small screens */
    pointer-events: auto;
    padding: 0; /* Add some padding inside */
    animation: fadeIn 0.3s ease-in-out; /* Optional animation */
}

/* Optional Animation for Modal Appearance */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -20%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

  .modal-popup-child{
    padding: 0.5rem;
    pointer-events: auto; 
    overflow-x: hidden;
  }
  .modal-form-content{
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding-left: 10px;
  }

  /* Modal Popup */
  .modal-popup-01 {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 50;
    border-radius: 8px;
    overflow: hidden;
    border-bottom: 10px solid white;
    max-width: 900px;
}
    
  
  .close-btn-container{
    height: 35px;
    background-color: #c9c9c9;
    color: black;
    text-align: right;
  }
  .modal-close-btn{
    background: none;
    cursor: pointer;
    font-size: 23px;
    width: 50px;
    height: 35px;
    background: #830c0c;
    color: white;
  }

  .profile-mod-header{
    width: 100%;
    height: 100px; 
    display: flex;
    justify-content: center;  
    align-items: center; 
    overflow: hidden; 
  }
  .mod-event-picture,.mod-medal-picture{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    object-position: center;
  }