img {
    width : 40px;
    height: auto; /*to preserve the aspect ratio of the image*/
}

a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}

.mobile-title {
	display:none;
       text-align: center; /* Center align the text */
       background-color: #f4f4f9; /* Light background color */
       padding: 5px; /* Add some padding around the title */
       border-radius: 10px; /* Rounded corners for the div */
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
   }

    /* Styling the title text */
    .mobile-title h1 {
        color: black;
        font-size: 1em; /* Font size */
        text-transform: uppercase; /* Make the text uppercase */
        margin: 0; /* Remove default margin */
    }
    
    .circle-image {
     width: 30px;   /* Width of the circle */
     height: 30px;  /* Height of the circle */
     border-radius: 50%;  /* Make the image circular */
     object-fit: cover;   /* Ensure the image fits well in the circle */
   }
    

   .terms-priv-menu{
	display:none;
}
			 	
/*NOTIFICATIONS*/
 .notification-bell {
       position: relative;
       color: #28a745;
       cursor: pointer;
       font-size: 24px;
       padding-left: 5px;
       padding-right: 5px;
   }
   
   .notification-badge {
       position: absolute;
       top: 0;
       right: 0;
       background: red;
       color: white;
       font-size: 12px;
       padding: 2px 6px;
       border-radius: 50%;
       display: none;
   }
   
   .notification-list {
       position: absolute;
       right: 0;
       background: white;
       border: 1px solid #ccc;
       width: 300px;
       display: none;
       list-style: none;
       padding: 10px;
       box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
       z-index: 1000;
   }
   
   .notification-list li {
   	font-size: small;
       padding: 8px;
       border-bottom: 1px solid #eee;
       cursor: pointer;
   }
   
   .notification-list li:hover {
       background: #f5f5f5;
   }
   
   .notification-list li.read {
    color: gray;
    font-style: italic;
}

.bell-for-mobile{
	display:none;
}

@media 
 only screen and (max-width: 990px) {
			.mobile-title{
				display:block;
			}
			.navbar-toggler {
		        order: -1; /* Move the toggler to the left */
		      }
		      
		     .navbarDropdownAssWeb{
		     	display: none !important;
		     }
		     .terms-priv-menu{
				display:block;
			}
			.bell-for-web{
				display:none;
			}
			.bell-for-mobile{
				display:block;
			}
}



#loading-overlay  {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent overlay */
         z-index: 9998;
         display: none;
     }

     #loading-overlay  .spinner {
         position: absolute;
         top: calc(50% - 50px);
         left: calc(50% - 50px);
         width: 100px;
         height: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     #loading-overlay  .spinner::before {
         content: '';
         position: absolute;
         width: 100px;
         height: 100px;
         border: 4px solid transparent;
         border-top: 4px solid #28a745;
         border-right: 4px solid #28a745;
         border-radius: 50%;
         animation: spin 1.5s linear infinite;
     }

     #loading-overlay  .spinner::after {
         content: '';
         position: absolute;
         width: 80px;
         height: 80px;
         border: 3px solid transparent;
         border-bottom: 3px solid #20c997;
         border-left: 3px solid #20c997;
         border-radius: 50%;
         animation: spin 2s linear infinite reverse;
     }

     #loading-overlay  .spinner .logo {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         z-index: 10;
         animation: pulse 1.5s ease-in-out infinite;
         box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
     }
     
     [id^="loading-overlay-"]  {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent overlay */
         z-index: 9998;
         display: none;
     }

     [id^="loading-overlay-"]  .spinner {
         position: absolute;
         top: calc(50% - 50px);
         left: calc(50% - 50px);
         width: 100px;
         height: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     [id^="loading-overlay-"]  .spinner::before {
         content: '';
         position: absolute;
         width: 100px;
         height: 100px;
         border: 4px solid transparent;
         border-top: 4px solid #28a745;
         border-right: 4px solid #28a745;
         border-radius: 50%;
         animation: spin 1.5s linear infinite;
     }

     [id^="loading-overlay-"]  .spinner::after {
         content: '';
         position: absolute;
         width: 80px;
         height: 80px;
         border: 3px solid transparent;
         border-bottom: 3px solid #20c997;
         border-left: 3px solid #20c997;
         border-radius: 50%;
         animation: spin 2s linear infinite reverse;
     }

     [id^="loading-overlay-"]  .spinner .logo {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         z-index: 10;
         animation: pulse 1.5s ease-in-out infinite;
         box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
     }

     @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }

     @keyframes pulse {
         0%, 100% { 
             transform: scale(1);
             opacity: 1;
         }
         50% { 
             transform: scale(1.1);
             opacity: 0.8;
         }
     }

     /* Additional spinner animation for a more sophisticated look */
     #loading-overlay .spinner-text,
     [id^="loading-overlay-"] .spinner-text {
         position: absolute;
         top: calc(50% + 70px);
         left: 50%;
         transform: translateX(-50%);
         color: #28a745;
         font-weight: 600;
         font-size: 14px;
         letter-spacing: 1px;
         animation: fadeInOut 2s ease-in-out infinite;
     }

     @keyframes fadeInOut {
         0%, 100% { opacity: 0.6; }
         50% { opacity: 1; }
     }
     
     .dropdown-menu-left {
	    left: -60px !important;  /* Adjust this value to move it left */
  }
	.selected {
        background-color: #e9ecef !important;
    }
    .relative-pos{
    	position: relative !important;
    }
    .select2  {
	  width: 100% !important;
	}
	
	/* Add modern event navbar styles */
	.events-navbar {
	    background: #fff;
	    border-bottom: 1.5px solid #28a745;
	    box-shadow: 0 2px 8px rgba(40,167,69,0.08);
	    padding: 0.5rem 1.5rem;
	    border-radius: 0 0 18px 18px;
	    margin-bottom: 1rem;
	    z-index: 100;
	    min-height: 64px;
	}
	.events-navbar-brand {
	    display: flex;
	    align-items: center;
	    font-weight: bold;
	    font-size: 1.3rem;
	    color: black;
	    gap: 0.5rem;
	    letter-spacing: 1px;
	}
	.events-navbar-brand img {
	    width: 38px;
	    height: 38px;
	    border-radius: 8px;
	    margin-right: 0.5rem;
	}
	.events-navbar-link {
	    color: #333;
	    font-weight: 500;
	    padding: 0.5rem 1.1rem;
	    border-radius: 8px;
	    transition: background 0.2s, color 0.2s;
	    font-size: 1.08rem;
	    display: flex;
	    align-items: center;
	    gap: 0.5rem;
	}
	.events-navbar-link.active, .events-navbar-link:hover {
	    background: #e6f9ed;
	    color: #28a745;
	}
	.events-navbar-toggler {
	    border: none;
	    background: transparent;
	    font-size: 1.5rem;
	    color: #28a745;
	    margin-left: 1rem;
	}
	.events-navbar-profile {
	    display: flex;
	    align-items: center;
	    gap: 0.5rem;
	}
	.events-navbar-profile .circle-image {
	    width: 32px;
	    height: 32px;
	    border-radius: 50%;
	    object-fit: cover;
	}
	.events-navbar-notification {
	    position: relative;
	    margin-left: auto;
		margin-right: 10px;
	    color: #28a745;
	    font-size: 1.3rem;
	    cursor: pointer;
	}
	.events-navbar-notification .notification-badge {
	    position: absolute;
	    top: -6px;
	    right: -8px;
	    background: #e74c3c;
	    color: #fff;
	    font-size: 0.75rem;
	    padding: 2px 6px;
	    border-radius: 50%;
	    font-weight: bold;
	}
	@media (max-width: 990px) {
	    .events-navbar {
	        padding: 0.5rem 0.5rem;
	        border-radius: 0 0 12px 12px;
	    }
	    .events-navbar-brand {
	        font-size: 1.1rem;
	    }
	}
	.nav-link {
		color: black !important;
	}