/* Ensure the calendar content does not overflow */
      #calendar {
          overflow: hidden;
          margin-top: 2px;
      }


      /* Media query for small screens */
      @media (max-width: 768px) {

          /* Adjust day cell padding */
          #calendar .fc-daygrid-day-frame {
              padding: 2px;
              /* Add some padding to prevent content from touching edges */
              box-sizing: border-box;
              /* Include padding in the element's total width and height */
          }

          /* Adjust event containers */
          #calendar .fc-daygrid-day-events {
              padding: 0;
              /* Remove padding inside event containers */
          }

          /* Adjust content inside each day cell */
          #calendar .fc-daygrid-day-content {
              overflow: visible;
              /* Allow content to overflow if needed */
          }

          /* Adjust individual event containers */
          #calendar .event-container {
              overflow-wrap: break-word;
              /* Ensure long words wrap within the container */
              word-wrap: break-word;
              /* Ensure long words wrap within the container */
              word-break: break-word;
              /* Break long words and URLs */
              margin: 2px 0;
              /* Margin for spacing between events */
          }

          /* Adjust event titles */
          #calendar .event-title {
              font-size: 12px;
              /* Adjust font size for small screens */
              padding: 2px;
              /* Padding inside event titles */
              color: #fff;
              /* Text color */
              border-radius: 4px;
              /* Border radius for rounded corners */
              white-space: normal;
              /* Allow text to wrap */
              text-align: left;
              /* Align text to the left */
          }

          /* Adjust event titles */
          #calendar tbody {
              font-size: 13px;
              /* Adjust font size for small screens */

          }

          /* Adjust the size of the button for small screens */
          .btn-details {
              padding: 3px 8px;
              /* Reduce padding to make the button smaller */
              font-size: 12px;
              /* Reduce font size */
              line-height: 1.2;
              /* Adjust line height */
          }

          /* Optionally, adjust the button width if needed */
          .btn-details {
              min-width: 70px;
              /* Set a minimum width for consistency */
          }

          .card-body {
              padding: 0px;
          }
      }

      /* Flat Picker */
      /* Change the background color of the calendar */
      .flatpickr-calendar {
          background-color: #f5fafa !important;
          /* Dark background color */

      }

      /* Target the date cells in FullCalendar */
      .fc-daygrid-day,
      .fc-daygrid-day-number,
      .fc-daygrid-day-top {
          cursor: pointer;
          /* Change cursor to hand on hover */
      }

      body {
          font-family: 'Poppins', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }

      /* Target the FullCalendar header tabs */
      .fc-header-toolbar .fc-button {
          text-transform: capitalize;
      }

      .fc-toolbar .fc-header-toolbar {
          overflow-x: auto;
          white-space: nowrap;
      }

      .fc-toolbar .fc-button-group {
          flex-wrap: nowrap;
      }

      /* Ensure text wraps in the event cells */
      .fc-event-title {
          white-space: normal !important;
          word-wrap: break-word;
          word-break: break-word;
      }

      .fc-event {
          white-space: normal;
          /* Allow text wrapping */
          max-width: 100%;
          /* Ensure event fields take up the full available width */
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 2px 4px;
          /* Small padding to increase readability */
          word-wrap: break-word;
          /* Enable word wrapping */
      }

      /* Increase row height in the Week view for better display */
      .fc-timegrid-daygrid-day-frame {
          min-height: 80px;
          /* Adjust as needed for more height */
      }

      /* Ensure event titles wrap properly */
      .fc-timegrid-event {
          white-space: normal;
          /* Allow text to wrap */
          overflow: hidden;
          /* Prevent overflow */
          text-overflow: ellipsis;
          /* Add ellipsis if text overflows */
      }

      /* Style for event titles */
      .fc-timegrid-event .fc-event-title {
          overflow-wrap: break-word;
          /* Break long words */
          word-break: break-word;
          /* Break words to wrap */
      }

      .fc-timegrid-slots tr {
          height: 70px;
          /* Adjust this value to your preference */
      }

      .filter-container {
          margin: 50px;
          padding: 20px;
          border: 1px solid #0d47a1;
          /* Dark Blue border */
          border-radius: 15px;
          /* Rounded corners */
          background-color: #fff;
          /* Light background color */
      }

      .result-container {
          margin-top: 10px;
          padding: 20px;
          border: 1px solid #0d47a1;
          /* Dark Blue border */
          border-radius: 15px;
          /* Rounded corners */
          background-color: #fff;
          /* Light background color */
      }

      .font-style-value {
          font-weight: bold;
          font-size: 13px;
          color: #857979;
          margin-bottom: 2px;
      }

      .event-container {
          justify-content: space-between;
          flex-wrap: wrap;
      }

      .event-details {
          flex: 1;
      }

      #prev-next-buttons button:hover {
          background-color: #193358;
      }

      .card-header {
          background-color: #fff !important;
          color: hsl(215.81, 68.89%, 17.65%) !important;
          padding: 0px !important;
      }

      .site-main-color {
          color: #141f34 !important;
      }

      .btn-dark {
          background-color: #2d3e50 !important;
          color: #fff !important;

      }

      /* Hover effect */
      .btn-dark:hover {
          background-color: #193358 !important;
          /* Darker shade on hover */
      }

      /*Button to color only selected buttons*/
      .btn-grey {
          background-color: grey;
          color: white;
          border-color: grey;
      }

      /* Date Header Styles */
      .fc-theme-standard .fc-list-day-cushion {
          background-color: hsl(0deg 0% 94.75% / 30%);
          /* Lighter shade of primary color */
          color: hsl(215.81, 68.89%, 17.65%) !important;
      }

      /*.container,*/
      /*.container-fluid,*/
      /*.container-lg,*/
      /*.container-md,*/
      /*.container-sm,*/
      /*.container-xl,*/
      /*.container-xxl {*/
      /*    --bs-gutter-x: 0.2rem !important;*/
      /*}*/

      /* Media query for small devices */
      @media (max-width: 768px) {
          #loadingOverlay {
              align-items: flex-start;
              /* Align items to start at the top */
              padding-top: 400px;
              /* Remove padding for small devices */
          }
      }

      /* Hide the time and dot columns in listMonth view */
      .fc-list-event-time,
      .fc-list-event-dot {
          display: none !important;
      }

      a {
          text-decoration: none !important;
          /* Remove underline from all links */
      }

      /* Optional: Add a hover effect to still underline links when hovering */
      a:hover {
          text-decoration: underline;
          /* Underline only on hover */
      }

      .fc-list-day-cushion.fc-cell-shaded a {
          color: #696d77 !important;
          /* Ensure links in the list view have the same color */
      }

      .modal-footer {
          display: none !important;
      }

      .fc .fc-toolbar.fc-header-toolbar {
          margin-bottom: 0.5em !important;
          font-size: 11px !important;
          color: #141f34 !important;
          font-weight: bold !important;
      }

      /* Custom hover effect for Select2 options */
      .select2-results__option {
          background-color: white !important;
          /* Default background color */
          color: black !important;
          /* Default text color */
      }

      .select2-results__option--highlighted {
          background-color: #052c65 !important;
          /* Gray background on hover */
          color: white !important;
          /* White text color on hover */
      }

      .form-control:focus {
          border-color: #052c65 !important;
          /* Border color on focus */
          outline: #052c65 !important;
          /* Remove default outline */
          box-shadow: #052c65 !important;
          /* Shadow color to match hover effect */

      }

      .select2-container--default .select2-selection--single {
          border-radius: 0px !important;

      }

      /* Hide the default dropdown arrow */
      .select2-container--default .select2-selection--single .select2-selection__arrow,
      .select2-container--default .select2-selection--multiple .select2-selection__arrow {
          display: none;
          /* Hide the arrow */
      }

      /* Container for the Select2 element */
      .select2-container--default .select2-selection--single,
      .select2-container--default .select2-selection--multiple {
          padding-right: 40px;
          /* Space for the icon */
          position: relative;
          /* Position relative to allow absolute positioning of the icon */
      }

      /* Position the search icon inside the Select2 container */
      .select2-container--default .select2-selection--single .select2-selection__rendered::after,
      .select2-container--default .select2-selection--multiple .select2-selection__rendered::after {
          content: "\f002";
          /* Font Awesome search icon code */
          font-family: 'Font Awesome 5 Free';
          /* Font Awesome family */
          font-weight: 900;
          /* Font Awesome weight */
          position: absolute;
          right: 10px;
          /* Positioning from the right */
          top: 50%;
          transform: translateY(-50%);
          /* Center the icon vertically */
          pointer-events: none;
          /* Make sure the icon doesn’t interfere with the select */
          color: #aaa;
          /* Adjust icon color if needed */
      }

      /* Additional styles to ensure the search input does not overlap the icon */
      .select2-container--default .select2-search--dropdown .select2-search__field {
          padding-right: 30px;
          /* Space for the icon inside the search field */
      }

      /* Container for the date input */
      .date-input-container {
          position: relative;
          /* Position relative to allow absolute positioning of the icon */
          width: fit-content;
          /* Adjust width to fit content */
      }

      /* Container for the date input */
      .date-input-container {
          position: relative;
          /* Position relative to allow absolute positioning of the icon */
      }

      /* Container for the date input */
      .date-input-container {
          position: relative;
          /* Position relative to allow absolute positioning of the icon */
          width: 100%;
          /* Ensure the container takes up the full width */
      }

      /* Date input field styling */
      .date-input {
          width: 100%;
          /* Ensure the input field takes up the full width */
          padding-right: 40px;
          /* Space for the icon inside the input field */
          box-sizing: border-box;
          /* Include padding in the element's total width */
      }

      /* Style for the search icon inside the date input field */
      .date-input-container::before {
          content: "\f002";
          /* Font Awesome search icon code */
          font-family: 'Font Awesome 5 Free';
          /* Font Awesome family */
          font-weight: 900;
          /* Font Awesome weight */
          position: absolute;
          right: 10px;
          /* Positioning from the right */
          top: 50%;
          transform: translateY(-50%);
          /* Center the icon vertically */
          pointer-events: none;
          /* Make sure the icon doesn’t interfere with the input */
          color: #aaa;
          /* Adjust icon color if needed */
          font-size: 16px;
          /* Adjust icon size if needed */
      }

      /* Making Changes Accordingly */
      .card {
          border: none !important;
          /* Completely removes the border */
      }

      .select2-container .select2-selection--single {
          height: 35px !important;
      }

      .select2-container--default .select2-selection--multiple {
          border-radius: 0px !important;
      }

      #inline-calendar {
          display: none;
      }

      .select2-container--default .select2-selection--single .select2-selection__rendered {
          line-height: 36px !important;
      }

      .fc .fc-list-day-cushion,
      .fc .fc-list-table td {
          padding: 3px 4px !important;
      }

      /* Ensure the Flatpickr calendar is responsive */
      .flatpickr-calendar {
          box-sizing: border-box !important;
          /* Include padding and border in the element's total width and height */
      }

      .card-body {
          padding-left: 1px !important;
      }

      /* Make sure the calendar fits within the viewport on small screens */
      @media (max-width: 576px) {
          .flatpickr-calendar {
              position: absolute;
              /* Position it absolutely to allow for better control */
              left: 0;
              /* Align the calendar to the left */
              right: 0;
              /* Ensure the calendar stretches to the right edge of the container */
              margin: 0;
              /* Remove any default margin */
              width: 100%;

          }

          /* Adjust the calendar's font size for better readability on small screens */
          .flatpickr-calendar .flatpickr-day {
              font-size: 0.875rem;
              /* Adjust font size */
          }

          /* Adjust the calendar's header size */
          .flatpickr-calendar .flatpickr-month {
              font-size: 1rem;
              /* Adjust font size for the month */
          }

      }

      .container,
      .container-fluid,
      .container-lg,
      .container-md,
      .container-sm,
      .container-xl,
      .container-xxl {
          gutter-x: 0rem !important;
      }

      /* Ensure all fields have the same width on large screens */
      .form-control {
          width: 100%;
          border-radius: 0px !important;
      }

      /* Custom styling for the inline calendar */
      #inline-calendar {
          height: auto;
          padding: 10px;
          border: 1px solid #ced4da;
          border-radius: 0.25rem;
      }

      /* Style for the date display element */
      #toolbar-date {
          display: none;
          /* Hidden by default */
          margin-top: 10px;
          /* Space above the date display */
          font-weight: bold;
          font-size: 14px;
          color: #333;
          text-align: center;
          /* Center the text */
      }

      /* Default: Hide the element on all screen sizes */
      #filtersToShow {
          display: none;
      }

      /* Show the element only on small screens */
      @media (max-width: 767px) {
          #filtersToShow {
              display: block;
              color: grey;
              font-weight: bold;
          }

          #inline-calendar {
              display: none;
          }
      }

      /* Styles for small screens */
      @media (max-width: 768px) {
          #toolbar-mobile-container {
              display: block;
              margin-bottom: 10px;
              /* Adjust spacing as needed */
          }

          #search-events-mobile {
              display: none;
              /* Hide the search events section on small screens */
          }

          #toolbar-mobile-container .fc-header-toolbar {
              display: block;
              margin-bottom: 0;
          }

      }

      @media (min-width: 769px) {
          #toolbar-mobile-container {
              display: none;
          }
      }

      /* Apply light blue background color on small screens */
      @media (max-width: 767px) {
          #inline-calendar {
              background-color: #d0e6f2 !important;
              /* Light blue background color */
              border: 1px solid #ced4da !important;
              /* Optional: border styling */
          }
      }


      /* Ensure proper responsive behavior */
      @media (max-width: 767.98px) {
          .event-container {
              /* Keep the container full width on mobile */
              width: 100%;
          }

          .card-body {
              padding: 1px;
              /* Adjust padding as needed */
          }

          .text-md-end {
              /* Keep price aligned to the right in mobile view */
              text-align: right;
          }

          .price {
              /* Ensure price aligns correctly */
              text-align: right;
              /* Right align text */
              margin-bottom: 0;
              /* Remove bottom margin if necessary */
          }
      }

      .featured-event {
          overflow: hidden;
          /* Ensures that enlarged images don't overflow out of the card */
      }

      .event-img {
          transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
          width: 100%;
          height: auto;
      }

      .event-img:hover {
          transform: scale(1.05);
          /* Enlarge the image */
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
          /* Add a shadow for a nicer effect */
      }

      .select2-container {
          width: 100% !important;
          /* Ensure Select2 container always takes full width */
      }

      h1 {
          font-size: clamp(32px, 5vw, 46px);
      }

      hr {
          color: #193358 !important;
      }

      @media (max-width: 600px) {
          .fc-toolbar-title {
              font-size: 14px !important;
          }
      }


      .ad-banner-responsive {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          max-width: 728px;
          margin: 0 auto 24px auto;
          padding: 10px;
      }

      .ad-banner-responsive img {
          width: 100%;
          max-width: 728px;
          height: auto;
          aspect-ratio: 728/90;
          border-radius: 10px;
          object-fit: contain;
          background: #fff;
      }

      @media (max-width: 768px) {
          .ad-banner-responsive {
              max-width: 100%;
          }

          .ad-banner-responsive img {
              max-width: 100%;
              aspect-ratio: 16/5;
          }
      }