/* Custom Colors for Light and Dark Themes */
:root {

  --primary-color-light: #1a202c; /* c Dark Blue */
 --primary-color-light: #e1f4ff; 
 --primary-color-light: #1b2029; /* Dark Blue */
 --secondary-color-light: #4a5568; /* Grayish Blue */
 --accent-color-light: #3182ce; /* Bright Blue */
--background-color-light: #edf2f7;  /* Light Background */
 --text-color-light: #2d3748; /* Dark Text Color */

 --primary-color-dark: #2d3748; /* Light Blue */
 --secondary-color-dark: #a0aec0; /* Light Gray */
 --accent-color-dark: #e53e3e; /* Red */
 --background-color-dark: #1b2029; /* Dark Background */
 --text-color-dark: #f7fafc; /* Light Text Color */
}

/* Apply light theme by default */

.hideNotifi{
 display: none !important;
}

body {
 background-color: var(--background-color-light);
 color: var(--text-color-light);
}

header {
 background-color: var(--primary-color-light);
 color: white;
}

footer {
 background-color: var(--secondary-color-light);
 color: white;
}

button {
 background-color: var(--accent-color-light);
 color: white;
}
.dropdown{
 background-color: var(--primary-color-dark);
 color: white;
 
}

.custom-border{
 border: 1px solid #2d3748 !important;
}

/* Dark Theme Style */
.dark-mode {
 background-color: var(--background-color-dark);
 /* color: var(--text-color-dark); */
}

.dark-mode header {
 background-color: var(--primary-color-dark);
}

.dark-mode footer {
 background-color: var(--secondary-color-dark);
}

.dark-mode button {
 background-color: var(--accent-color-dark);
}


.dark-mode .dropdown{
 background-color: var(--primary-color-dark);
 color: white;
 background-color: var(--primary-color-light);
 color: white;
}

.dark-mode .custom-border{
 border: 1px solid white !important;
}