element.style {
  background-color: yellow;
}

html,
body {
  height: 100%; /* Ensure the body takes the full height of the viewport */
  margin: 0;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  font-family: "Poppins", sans-serif;
  background-color: #ccc;
}

:root {
  /* Navbar */
  --navbar-bg: #4a4a4a;
  --navbar-text-color: white;
  --navbar-hover-bg: #444;
  --navbar-hover-color: #b3ff00;

  --dropdown-bg: #6a6a6a;

  --card-bg: #ededed;

  /* Submenu */
  --submenu-bg: #4a4a4a;
  --submenu-hover-bg: #b3ff00;
  --submenu-hover-text: #000;

  /* Buttons */
  --button-bg: #444444; /* Soft green for button background */
  --button-hover-bg: #e53935; /* Slightly darker green for hover */
  --button-text-color: white; /* White text for contrast */

  --custom-button-bg: #1aff00ae;
  --custom-button-text-color: black;

  --nav-height: 60px; /* Adjust according to your navbar height */

  --button-border-radius: 5px; /* Rounded corners for buttons */
  --button-padding: 10px 20px; /* Padding for buttons */

  /* Footer */
  --footer-bg: #3a3a3a;
  --footer-text-color: white;

  --red-color: #e53935;
  --darkgreen-color: rgb(0, 38, 128);
  --darkgreen-color: teal;
  --lightgreen-color: rgb(2, 73, 238);

  --grey: #7a7a7a;
  --india-ai-bg: #e95a0c;
  --india-ai-color: rgb(242, 149, 95);
}

input[type="text"],
textarea {
  cursor: text; /* Default browser cursor */
}

#welcome-container.container {
  border-radius:20px;
}

.welcome-message {
  position: relative;
  /* background-color: rgb(45, 128, 0); */ /* Green background for welcoming look */
  background: linear-gradient(135deg, rgba(20, 150, 150, 0.6), teal,  rgba(20, 150, 150, 0.6));
  color: white;
  font-size: 1.5rem;
  padding: 15px 20px;
  border-radius: 20px; /* Rounded corners */
  margin: 20px 0;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  opacity: 1; /* Fully visible by default */
  transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 3s cubic-bezier(0.25, 1, 0.5, 1), opacity 3s ease-in-out; /* 3-second transitions for all properties */
}

.welcome-message:hover {
  transform: scale(1.05); /* Slightly grow on hover */
  transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); /* 3-second transition for scale */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
  opacity: 0.95; /* Subtle fade effect on hover */
}

.welcome-message .close-btn:hover {
  color: #ff6666; /* Light red when hovered */
}

.welcome-message .close-btn:focus {
  outline: none; /* Remove focus outline */
}

.welcome-message.closed {
  display: none !important; /* Hide the message when closed */
}

.welcome-message a {
  color: #ffeb3b; /* Bright yellow color for visibility */
  font-weight: bold; /* Make it stand out */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease-in-out; /* Smooth hover effect */
  cursor: pointer; /* Explicitly set cursor to pointer */

}

.welcome-message a:hover {
  color: #ffc107; /* Slightly darker yellow on hover */
  text-decoration: underline; /* Underline on hover for emphasis */
}

.patti-bg {
  background-color: rgb(0, 40, 40);
  background-color: var(--navbar-bg);
  padding: 15px;
  color: white;
}

.btn,
.btn-large,
.btn-small {
  background-color: var(--darkgreen-color) !important;
  color: white;
}

.btn:hover,
.btn-large:hover,
.btn-small:hover {
  background-color: var(--red-color) !important; /* Hover background color */
}

.btn:active,
.btn-large:active,
.btn-small:active {
  transform: scale(1.25); /* Slight scaling for click effect */
  background-color: var(--lightgreen-color) !important;
}

.button {
  background-color: var(--button-bg);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: var(--button-hover-bg);
}

/* Custom orange button with gradient */
.custom-orange-btn {
  background: linear-gradient(
    135deg,
    #ff8c00,
    #ff7f32,
    #ffa500
  ); /* Three shades of orange */
  color: white; /* Text color */
  border: none; /* No border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
  font-family: 'Poppins', sans-serif; /* Apply the custom font */
  font-weight: 600; /* Slightly bold for emphasis */
}

.custom-orange-btn:hover {
  background: linear-gradient(
    135deg,
    #ff7f32,
    #ffa500,
    #ff8c00
  ); /* Reversed gradient for hover effect */
}

.custom-orange-btn:active {
  background: #ff7f32; /* Slightly darker orange when active */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduced shadow on click */
}

/* Footer */
footer.page-footer {
  flex-shrink: 0; /* Prevent the footer from shrinking */
  background-color: var(--footer-bg); /* Footer background color */
  color: var(--footer-text-color); /* Footer text color */
  text-align: center !important; /* Center align text */

  padding: 10px 0; /* Add some padding */
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for the footer */
}

footer a {
  color: var(--navbar-text-color); /* Footer link color */
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  color: var(--navbar-hover-color); /* Footer link hover color */
}

/* Button Styles */
a.btn {
  background-color: var(--button-bg); /* Button background */
  color: var(--button-text-color); /* Button text color */
  padding: var(--button-padding); /* Button padding */
  border: none; /* Remove borders */
  border-radius: var(--button-border-radius); /* Rounded corners */
  text-transform: uppercase; /* Make text uppercase */
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  display: inline-flex; /* Use flexbox for vertical alignment */
  align-items: center; /* Center align items vertically */
  justify-content: center; /* Center align items horizontally if needed */
  cursor: pointer; /* Pointer cursor for buttons */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover and click effects */
  line-height: normal; /* Ensure line-height doesn’t stretch text */
}

a.btn:hover {
  background-color: var(--button-hover-bg); /* Hover background color */
}

a.btn:active {
  transform: scale(0.95); /* Slight scaling for click effect */
}

#getstarted {
  background-color: var(--submenu-bg);
  color: white;
  margin-top:15px;
}

@media screen and (max-width: 768px) {
  #getstarted {
    margin-left: 10px;
    width: 94%;
  }
}

.home-join {
  color: var(--navbar-hover-color); /* Hover background color */
}

/* Ensure page content fits dynamically */
main {
  flex: 1 0 auto; /* Allow the main content to grow and shrink as needed */
  padding-bottom: 10px; /* Avoid content touching the footer */
  margin-top: var(--nav-height); /* Leave space for the navbar */
  min-height: calc(100vh - var(--nav-height) - 150px); /* Adjust for footer */
}

#content.container {
  height: auto; /* Adjust height dynamically based on content */
  min-height: 100%; /* Ensure it spans at least the full viewport */
}

#content {
  flex: 1;
  padding: 20px;
  overflow-y: auto; /* Ensure content scrolls if it exceeds the viewport height */
}

/* For Dataset Headers */
.header {
  height: 64px; /* Same height as the navbar */
  line-height: 64px; /* Vertically center the text */
  /* background-color: teal; */ /* Match the color of the navbar */
  display: flex;
  align-items: center; /* Vertically align content */
  justify-content: center; /* Horizontally center content */
}

.header-title {
  color: white; /* Text color */
  font-size: 1.5rem; /* Adjust font size for responsiveness */
  margin: 0; /* Remove default margins */
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Add ellipsis for overflow text */
}
/* For Dataset Headers */

.required {
  color: red;
}

.transparent-image {
  width: 100%; /* Adjust as needed */
  opacity: 0.3; /* Adjust the opacity to make it more transparent */
  filter: brightness(0.8); /* Optional: further adjust brightness if needed */
}

.dyn-text {
  font-size: 3vw;
}

.breadcrumb-container {
  margin: 20px 0;
  padding: 20px 0;
  /* background: linear-gradient(135deg, teal, #004d40); */ /* Teal gradient */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  animation: fadeIn 0.8s ease-out; /* Fade-in animation */
}

.breadcrumb-container .container {
  display: flex;
  justify-content: center; /* Center the breadcrumb */
  align-items: center;
}

.breadcrumb {
  font-size: 40px;
  font-weight: bold;
  color: white; /* White text for contrast */
  letter-spacing: 5px;
  animation: slideInText 1s ease-out; /* Animate breadcrumb text */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInText {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* For gallery one page */
.card-image img {
  width: 100%;
  /* Ensure image takes up the full width */
  height: auto;
  /* Maintain aspect ratio but fit the width */
  max-height: 250px;
  /* Limit the height to a reasonable value */
  object-fit: cover;
  /* Ensure the image covers the container */
}

.card-image {
  flex: 1; /* Allow image to take up as much space as necessary */
}

.dropdown-content {
  max-height: 500px !important; /* Adjust as needed */
  overflow-y: auto !important; /* Enables scrolling inside the dropdown */
}

.custom-toast {
  position: absolute;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 0.9rem;
  z-index: 10;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.page-header {
  background: linear-gradient(135deg, teal, #004d40); /* Teal gradient */
}

/* Preloader */
#preloader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: none; /* Hidden by default */
}

#content {
  position: relative; /* Ensure preloader is positioned relative to this container */
  min-height: 200px; /* Set a minimum height for loading effect */
}

/* Optional: Style preloader for responsiveness */
.preloader-wrapper {
  width: 50px;
  height: 50px;
}

@media (max-width: 768px) {
  .preloader-wrapper {
    width: 40px;
    height: 40px;
  }
}

/* Custom style for the separator */
.menu-separator {
  height: 1px;
  margin: 5px 0;
  background-color: #ddd;
}

.dropdown-content a:hover {
  /* background-color: var(--submenu-hover-bg); */
  background-color: var(--dropdown-bg);
  color: var(--submenu-hover-text);
}


/* Toast container styling */
#notification-toast-container {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

/* Toast message box styling */
#notification-toast-container #toast-message-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  max-width: 350px;
  background-color: #4caf50; /* Green color for success */
  color: white;
  margin: 0 10px;
}

/* Close button styling */
#notification-toast-container #close-toast {
  font-size: 20px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

/* Toast animation for smooth fade-in and fade-out */
@keyframes toast-fade {
  0% { opacity: 0; transform: translateY(20px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* Apply the animation to the toast */
#notification-toast-container #toast-message-box {
  animation: toast-fade 0.5s ease-in-out forwards;
}

/* For all dataTables Search */
.dataTables_wrapper .dataTables_filter input {
  color: black !important;   
}