body {
  padding-top: 110px;
  margin: 0;
  padding: 0;
  background-size: cover; /* Optional: This ensures that the background covers the whole area */
}
a {
  text-decoration: none;
}
.container {
  margin-top: 0px;
}
.row {
  margin-bottom: 0px;
}
.search-bar-container {
  margin-top: 9px; /* Adjust this value as needed to align the search bar with the filter section */
}
.search-bar-container form {
  display: flex;
  width: 100%; /* Ensure the search bar uses the full width of its container */
}
.custom-box {
  background-color: #fbfbfb; /* Light grey background */
  padding: 25px; /* Add some padding inside the box */
  margin-bottom: 25px; /* Add some space below the box */
  border-radius: 5px; /* Optional: Rounds the corners of the box */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow to the box */
}
.comment-box {
  background-color: #efefef; /* Light grey background */
  border-left: 3px solid #007bff; /* Blue left border for highlight */
  padding: 10px;
  margin-bottom: 15px; /* Space between comments */
  border-radius: 5px; /* Rounded corners */
}
.comment-box .comment-date {
  font-size: 0.8em;
  font-style: italic;
  color: #666;
}
.comment-box .comment-name {
  font-weight: bold;
  font-size: 0.9em;
}

/* Styles for the comment form */
.comment-form .form-control {
  margin-bottom: 10px; /* Space between form fields */
}
.comment-form .btn-primary {
  background-color: #007bff; /* Bootstrap primary color */
  border-color: #007bff;
}
.comment-form label {
  font-weight: bold;
}
.card-body.main {
  background-color: #fdfdfd; /* Light grey background */
}
#background-svg-back {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: -2; /* Set z-index lower to ensure it's behind the front image */
  transition: bottom 2s ease-out; /* Optional: smooth transition for movement */
}

#background-svg-front {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: -1; /* Ensure the front image is above the back image but still behind other content */
  transition: bottom 2s ease-out; /* Optional: smooth transition for movement */
}

/* Style adjustments for the suggestion box */
#suggestions-container {
  display: none; /* Hide the suggestions by default */
  position: relative;
  background: #ffffff; /* Light background for the suggestions */
  width: 100vh; /* Adjust width as per the search input width, considering padding */
  border: 1px solid #ccc; /* Light border for the container */
  border-top: none; /* Remove top border to blend with the search input */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  z-index: 5; /* Ensure it's above other content */
  max-height: 500px; /* Limit maximum height */
  overflow-y: auto; /* Enable scroll for overflow */
  border-radius: 0 0 4px 4px; /* Round bottom corners */
  top: 50px; /* Adjust based on the search bar height */
}

/* Style for individual suggestion items */
.suggestion-item {
  padding: 10px 15px; /* Adequate padding for touch targets */
  cursor: pointer; /* Indicate an interactive item */
  line-height: 1.5; /* Improved readability */
}

/* Hover and focus styles for suggestion items */
.suggestion-item:hover,
.suggestion-item:focus {
  background-color: #f8f9fa; /* Slightly different background on hover/focus */
}

/* Add a modern font and adjust sizing for the search input for consistency */
#search-input {
  flex-grow: 1; /* Allow the search input to fill the available space */
  margin-right: 8px; /* Add some space between the input and the search button */
}
.selected {
  background-color: #f0f0f0;
}
.subjects-dropdown {
  width: 150px; /* Adjust this value to set the width of the dropdown button */
  text-align: left;
}

.subjects-menu {
  position: relative;
  max-height: 600px;
  overflow: hidden;
  width: 450px; /* Adjust as needed */
}
.teks-menu {
  position: relative;
  max-height: 600px;
  overflow: hidden;
  width: 250px; /* Adjust as needed */
}
.dropdown-scrollable {
  max-height: calc(
    540px - 40px
  ); /* Adjust based on the total height of the dropdown minus the height of the dropdown-footer */
  overflow-y: auto;
}

.dropdown-footer {
  position: sticky; /* Change from 'absolute' to 'sticky' */
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: #f8f9fa; /* Light background for contrast */
  border-top: 1px solid #ddd; /* Optional: adds a line to separate from the content */
}
.dropdown-toggle.subjects-dropdown {
  margin-top: -5px; /* Adjust the value as needed to align with the other elements */
}
/* Style for the subjects dropdown button */
.subjects-dropdown,
.btn-secondary.subjects-dropdown {
  color: #495057; /* Blue text color */
  border-color: #ccc; /* Blue border color */
  background-color: #ffffff; /* White background */
}

/* Focus state for the subjects dropdown button (Optional) */
.subjects-dropdown:focus,
.btn-secondary.subjects-dropdown:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Blue glow to match Bootstrap's focus state, adjust color as needed */
}
.card-header:hover {
  cursor: pointer;
}
.filter-bar-container {
  margin-bottom: -50px; /* Adjust this value to match the height of the navbar */
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 70px; /* Height of the navbar; adjust this value to match your navbar's height */
  z-index: 1020; /* Ensure it's above page content but below modal overlays (Bootstrap's navbar is usually 1030) */
  background-color: #f8f9fa; /* Background color to ensure text is readable when overlaying content */
  padding: 1px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e7e7e7;
}

/* Ensure the filter container is not too wide on larger screens */
.container {
  max-width: 1140px; /* This should match Bootstrap's default max-width for the .container class */
}
/* Responsive adjustments */
@media (max-width: 576px) {
  /* Adjust this breakpoint as needed */
  .search-bar-container form {
    flex-direction: column; /* Stack elements vertically on small screens */
    align-items: stretch; /* Stretch children to match the container's width */
  }

  #search-input {
    margin-right: 0; /* Remove margin between input and button on small screens */
    margin-bottom: 8px; /* Add some space below the input when stacked */
  }

  .search-bar-container .btn {
    width: 100%; /* Make the button full width to match the input's width */
  }
}
.search-bar-container form {
  display: flex;
  width: 100%;
  align-items: center;
}

#search-input {
  flex-grow: 1; /* Allow the search input to expand and fill available space */
  margin-right: 8px; /* Ensure some space between the input and the button */
}

.search-bar-container .btn {
  white-space: nowrap; /* Prevent the button text from wrapping */
}
.navbar {
  z-index: 1030; /* Ensures navbar is above the filter-bar-container and other content */
}
/*
.grecaptcha-badge { 
visibility: hidden; 
}
*/
/* Custom button styles */
.btn-group .btn-custom {
  width: 200px; /* Adjust the width as needed */
  margin-right: 20px; /* Adjust the margin for spacing */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
  border-radius: 10px !important; /* Force rounded corners on all sides */
}

.btn-group .btn-custom:hover {
  transform: scale(1.05); /* Slightly increase the size on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}

/* Remove the margin-right for the last button */
.btn-group .btn-custom:last-child {
  margin-right: 0;
}