/** Shopify CDN: Minification failed

Line 11:0 Unexpected "<"
Line 522:0 Unexpected "}"
Line 536:0 Unexpected "<"

**/


/* CSS from section stylesheet tags */
<style>



.event-list-card__date {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    margin-left: 20px;
    padding: 20px 0;
}
/* Make the entire event container clickable */
.event-list-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}


   .event-list-card__calendar-icon {
    fill: #4d4e51;
    height: 17px;
    width: 17px;
  margin-right: 6px;

}



.event-date__wrapper {
  display: grid;
  grid-template-columns: auto auto auto; /* Three columns: start date, separator, end date */
  align-items: center;
  gap: 10px; /* Space between items */
}

.event-date__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-date__day {
  font-size: 28px;
  font-weight: 700;
  line-height: 14px;
}

.event-date__month {
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 4px;
}

.event-date__separator {
  font-size: 28px;
  line-height: 28px;
}
  @media screen and (min-width: 1000px) {

    .event-list-card__date {
        flex-grow: 0;
        margin-left: calc(8.3325% + 26px);
        width: calc(24.9975% - 18px);
    }
  }
/* Mobile styles (up to 768px) */
@media screen and (max-width: 768px) {
  /* Ensure the date is displayed in one line */
  .hide-on-desktop .event-date-text {
    display: block;
    font-size: 14px;
    color: #rgb(115, 116, 119);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ensure dates are inline on mobile */
  .event-list-card__date .event-date__item {
    display: inline-block;
    text-align: left;
    margin-right: 5px; /* Add some spacing between dates */
  }

  /* On mobile, show both day and month on one line */
  .event-list-card__date .event-date__day,
  .event-list-card__date .event-date__month {
    display: inline-block;
    font-size: 14px; /* Adjust font size for mobile */
    margin-right: 2px;
  }

  /* Separator stays inline on mobile */
  .event-date__separator {
    display: inline-block;
    font-size: 14px;
    margin: 0 5px;
  }

  /* Hide the desktop date version on mobile */
  .hide-on-mobile {
    display: none;
  }
}

/* Checkbox style for 'Show past events' */
   .show-past-events-checkbox label {
  font-size: 16px;
  margin-right: 6px; /* Space between label and checkbox */
}
  
.show-past-events-checkbox {
  display: flex;
  align-items: center; /* Align checkbox vertically */
  justify-content: flex-end;
  margin-left: auto;
}

.show-past-events-checkbox label {
  font-size: 16px;
  margin-right: 6px; /* Space between label and checkbox */
}
/* Mobile-specific styles (below 768px) */
@media screen and (max-width: 767px) {
  .show-past-events-checkbox label {
    font-size: 12px; /* Reduced font size for mobile */
  }
    .filter-section {
    padding: 10px!important;
    }
}
   
  .filter-section {
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 #00162b1f;
    margin: 10px -10px 20px -10px;
       }
   
.filter-view-controller {
  display: flex;
  justify-content: space-between; /* Ensure it aligns left */
  align-items: center; /* Ensure it's vertically aligned */
  margin-right: auto;
}
/* Type Toggler Styling */

.filter-toggle-2 {
  display: inline-flex;
  background-color: #e2e3e599;
  border-radius: 24px;
  height: 40px;
  width: calc(50% - 4px);
  max-width:240px;
  position: relative;
  align-items: center;
}

.filter-toggle__options {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight:700;
}

.filter-toggle__option {
  display: flex;
  z-index : 1;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: color 0.3s ease;
  user-select: none;  /* Prevents text selection and caret */
  outline: none; 
}



   .filter-toggle__slider-2 {
  position: absolute;
  background-color: #fff;
  border-radius: 18px;
  height: 32px;
  width: calc(50% - 4px);
  margin: 4px;
  transition: left 0.3s cubic-bezier(.35, 0, 0, 1), transform 0.1s cubic-bezier(.35, 0, 0, 1);
}
@media screen and (min-width: 768px) {
  /* Desktop-specific styles */

  
.event-list-card__link:hover .event-list-card {
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 8px;
  transition: lazyloader 1s infinite;
}

   .filter-toggle__option {
    font-size: 16px; /* Slightly bigger font size for desktop */
  }
}


/* Event card styling */
.event-list-card {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 0;
  position: relative;
  z-index: 0;
  color: #1a1919;
  border-bottom: 1px solid #e2e3e5;
  margin-left: 16px;
  width: calc(99.99% - 32px);
  gap:20px;
   
}

   
   
/* Mobile styles (up to 768px) */
@media screen and (max-width: 768px) {
 .event-list-card {
    display: flex;
    flex-direction: row; /* Image and content side by side */
    margin: 0px;
    gap: 10px; /* Add space between image and content */
    padding: 10px 0px 0px 0px; 
    width: 100%;
  }


.event-list-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
 .event-list-card__title {
    font-size: 16px; /* Adjust font size for mobile */
    text-align: left;
    font-weight: bold;
    color: rgb(26, 25, 25);
   line-height: 20px;
   margin-bottom:5px;
  }
   
.event-list-card__tag {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.event-list-card__payment {
  margin-top: 5px;
}



.event-payment-tag {
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: bold;
  display: inline-block;
  position : absolute;
  bottom:15px;
  right:15px;
  color: white;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px; /* Updated font size */
  
  }

.event-payment-tag.free {
  background-color: #3bc08e;
}

.event-payment-tag.paid {
  background-color: #ff815a;
}


.event-status-tag{
  margin-top:-20px;
}
.status.past {
  color: #f58b00;
  border: 1px solid #f58b00;
}

.status.upcoming {
  color: #004c74;
  border: 1px solid #004c74;
}

.status.ongoing {
  color: #3bc08e;
  border: 1px solid #3bc08e;
}

.event-list-card__location .location-icon {
  margin-right: 2px; /* Add 2px space between the icon and the text */
  align-items: center;
}

  .event-list-card__location
  {
    line-height:20px;
    margin-bottom:8px;
    color:rgb(115, 116, 119);
  }



.event-date__wrapper {
  display: grid;
  grid-template-columns: auto auto auto; /* Three columns: start date, separator, end date */
  gap: 10px; /* Space between items */
}

.event-date__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-date__day {
  font-size: 28px;
  font-weight: 700;
}

.event-date__month {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
}




  .event-list-card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Stack content vertically */
    align-items: flex-start;
    width: 70%; /* Ensure content takes full width */
  }



  .event-list-card__standfirst {
    font-size: 14px; /* Adjust font size */
    margin-top: 8px;
    text-align: left; /* Ensure the description is aligned left */
  }


  /* Hide desktop date on mobile */
  .hide-on-mobile {
    display: none;
  }



  .event-payment-tag, .event-status-tag .status {
    font-size: 12px; /* Adjust font size for mobile */
  }
  
}

    
.event-list-card__status-wrapper
{
    position: absolute;
    bottom: 15px;
    right: 15px;
}
.hide-on-mobile {
  display: block; /* Visible on desktop */
}

.hide-on-desktop {
  display: none; /* Hidden on desktop */
}

   /* Mobile-specific styles (up to 768px) */
@media screen and (max-width: 768px) {
  /* Display the date on mobile after the title */
  .event-list-card__date-text.hide-on-desktop {
    align-items: center;
    display: flex;
    line-height:20px;
    position: relative;    
    color: rgb(115, 116, 119); /* Set a text color */
    white-space: nowrap; /* Prevent date from wrapping into multiple lines */
    overflow: hidden; /* Ensure content doesn't overflow */
    text-overflow: ellipsis; /* Show ellipsis (...) if the text is too long */
  }

   
  .event-list-card__status-wrapper
  {
    position: absolute;
    bottom: 0;
    right: 0;
}

  .event-payment-tag, .event-status-tag .status {
    font-size: 8px; /* Adjust font size for mobile */
  }
  
   /* Show logo on mobile */
  .event-list-card__logo.hide-on-desktop {
    display: block;
    margin-bottom: 8px; /* Optional margin to separate logo from the title */
  }
  .event-list-card__logo img
  {
    border-radius:4px;
  }

  
  /* Hide desktop date on mobile */
  .hide-on-mobile {
    display: none;
  }
}


   @media screen and (min-width: 768px) {
  .event-list-card {
    display: flex;
    justify-content: space-between; /* This aligns the description and date properly */
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e2e3e5;
    margin-left: 16px;
    width: calc(99.99% - 32px);
  }

     

  /* Align content (description and location) to the left */
  .event-list-card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Stack content vertically */
    align-items: flex-start; /* Ensure content is aligned left */
    width: 70%; /* Adjust the width to give space for the date */
  }

    .event-list-card__date {
        display: flex;
        align-items: center;
        width: 20%;
        margin-left: auto;
        justify-content: center;
    }

  /* Ensure the location is aligned left with the description */
  .event-list-card__location {
    margin-bottom: 8px;
    text-align: left; /* Align the location text to the left */
  }
}

   /* Ensure this applies only to the desktop version */
@media screen and (min-width: 768px) {
  .event-list-card__preview {
    width: 80px;  /* Set the width */
    height: 80px; /* Set the height */
  }

  .event-list-card__preview img {
    width: 100%;  /* Make the image fill the container width */
    height: 100%; /* Make the image fill the container height */
    object-fit: cover;  /* Ensure the image covers the area without distortion */
    border-radius:4px;
  }
}

  /* Ensure this applies only to the desktop version */
@media screen and (min-width: 768px) {
  .event-list-card__title {
    font-size: 20px; /* Adjust this value to your preferred size */
    color: black;
    font-weight: bold; /* You can also make it bold if necessary */
  }
}
   
  .event-list-card__content .event-list-card__standfirst {
    line-height: 1.5; /* Adjust this value to reduce line height for the description */
    color: rgb(115, 116, 119);
  }

  .event-list-card__content .event-list-card__location {
    line-height: 1.5; /* Adjust this value to reduce line height for the location */
    color: rgb(115, 116, 119);
  }
}
.product-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: bold;
  color: #fff;
  font-size: 12px;
}
.product-label--custom4 {
  background-color: #fdd544; /* WCA tag background color */
}

    
</style>