 .no-scrollbar::-webkit-scrollbar {
     display: none;
 }
 
 .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
 .avatar-upload {
     position: relative;
     max-width: 150px;
     margin: 0 auto;
 }
 
 .avatar-upload .avatar-edit {
     position: absolute;
     right: 10px;
     bottom: 10px;
 }
 
 .avatar-upload .avatar-edit input {
     display: none;
 }
 
 .avatar-upload .avatar-edit label {
     display: inline-block;
     width: 30px;
     height: 30px;
     background: #059669;
     color: white;
     border-radius: 50%;
     text-align: center;
     line-height: 30px;
     cursor: pointer;
 }
 
 .avatar-upload .avatar-preview {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     border: 3px solid #059669;
     background-size: cover;
     background-position: center;
 }
 
 .document-upload {
     border: 2px dashed #d1d5db;
     border-radius: 0.5rem;
     transition: all 0.3s;
 }
 
 .document-upload:hover {
     border-color: #059669;
 }
 
 .document-upload input {
     display: none;
 }
 
 .document-preview {
     max-height: 200px;
     object-fit: contain;
 }
 
 .modal-transition {
     transition: opacity 300ms ease, transform 300ms ease;
 }
 
 .gradient-bg {
     background: linear-gradient(135deg, #059669 0%, #047857 100%);
 }
 
 .role-card {
     transition: all 0.3s ease;
 }
 
 .role-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
 .role-card.selected {
     border-color: #059669;
     background-color: #f0fdf4;
 }
 /* Base Alert Styles */
 
 .alert {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-radius: 4px;
     font-size: 14px;
     position: relative;
     display: flex;
     align-items: center;
 }
 /* Alert Close Button */
 
 .alert .close {
     position: absolute;
     top: 50%;
     right: 15px;
     transform: translateY(-50%);
     color: inherit;
     cursor: pointer;
     background: none;
     border: none;
     font-size: 20px;
     font-weight: bold;
     opacity: 0.7;
 }
 
 .alert .close:hover {
     opacity: 1;
 }
 /* Alert Types */
 
 .alert-success {
     color: #0f5132;
     background-color: #d1e7dd;
     border-color: #badbcc;
 }
 
 .alert-danger {
     color: #842029;
     background-color: #f8d7da;
     border-color: #f5c2c7;
 }
 
 .alert-warning {
     color: #664d03;
     background-color: #fff3cd;
     border-color: #ffecb5;
 }
 
 .alert-info {
     color: #055160;
     background-color: #cff4fc;
     border-color: #b6effb;
 }
 /* Alert Icons */
 
 .alert-icon {
     margin-right: 12px;
     font-size: 20px;
 }
 /* Fade Animation */
 
 .fade {
     transition: opacity 0.15s linear;
 }
 
 .fade.show {
     opacity: 1;
 }