@media (max-width: 767px) {
  .view-id-event_interest_areas.view-display-id-event_interests {
    display: none;
  }
}

/* --- Style the overall tab container --- */
.nav-tabs {
  border-bottom: none; /* Remove the default bottom border */
  gap: 8px; /* Add space between the tabs */
}

/* --- Style each individual tab link --- */
.nav-tabs .nav-link {
  border: 1px solid #dee2e6; /* Light grey border */
  border-radius: 30px; /* This creates the "pill" shape */
  color: #495057; /* Dark grey text for readability */
  background-color: #f8f9fa; /* Very light grey background */
  font-weight: 500;
  transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
}

/* --- Style for hover effect on inactive tabs --- */
.nav-tabs .nav-link:not(.active):hover {
  background-color: #e9ecef; /* Slightly darken the background on hover */
  border-color: #ced4da;
}

/* --- Style for the currently ACTIVE tab --- */
.nav-tabs .nav-link.active {
  background-color: #dc3545; /* Use a strong brand color (e.g., red) */
  color: #ffffff; /* White text for high contrast */
  border-color: #dc3545; /* Match the border to the background */
}


a.button.crm-register-button, .crm-container a.button, .crm-container a.button:link, button#_qf_Register_upload-bottom
{
font-size: 18px;
padding: 5px 10px;
background: #8b1919 !important;

}


a.button.crm-register-button:hover {
    background: #b41e1e;
}


article.contextual-region.civicrm-entity.civicrm-entity--type-civicrm-event.civicrm-entity--view-mode-event-teaser {
    padding: 25px;
    border: solid grey;
    border-radius: 19px;
    background: #eee;
    /* margin-bottom: 30px; */
    min-width: 450px;
    width: max-content;
    float: left;
    margin: 21px;
    width: 100%;
}


/* format the entrepreneur fields on event registration */
.page-civicrm-event-register div.crm-container fieldset label:after {
    content: "\a";
    white-space: pre;
}

.page-civicrm-event-register div#s2id_custom_48 {
    width: 100%!important;
}


.views-field-field-civi-event-image img {
    width: 100%;
    height: auto;
}



.messages.status.no-popup {
    font-size: 150%;
    line-height: 35px;
    padding: 25px;
    border: solid grey;
    border-radius: 20px;
    /* background: #eee; */
    margin-bottom: 30px;
}



.main-content .block-views.block-views-blockevent-sliding-scale-info-event-sliding-info, div#block-program-sliding-info 
{
	  padding: 0px 0px;
    border: 0px solid grey;
    border-radius: 0px;
    background: transparent;
    margin: 15px 0px;
}






.action-link.section.iCal_links-section {
    margin-top: 35px;
    height: 60px;
}


.crm-section.event_description-section img {
    max-width: 100%;
    height: auto;
}


.views-field-field-event-skill-level .field-content {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: 15px;
    color: white;
    font-size: 22px;
    float: right;
    overflow: visible;
    height: auto; /* Ensure the height is auto to fit content */
    line-height: normal; /* Align text properly within the height */

}
.views-field-field-event-skill-level .introductory {
    background-color: green;
    color: white;
    padding: 0.35em  0.65em;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 0.375rem;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.views-field-field-event-skill-level .intermediate {
    background-color: orange;
    color: white;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 0.375rem;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.views-field-field-event-skill-level .advanced {
    background-color: black;
    color: white;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 0.375rem;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}


span.views-field.views-field-field-civi-event-age-requirement {
    background-color: #6c757d;
    color: white;
    padding: 0.35em 0.65em;
    font-size: 1em;
    font-weight: 700;
    border-radius: 0.375rem;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle; /* Aligns the text in the middle relative to its line-height */
    position: relative;
    top: 0; /* Adjust the top position if needed */
    margin-left: 10px; /* Add some space to the left if it’s next to other elements */
}

span.views-field.views-field-field-civi-event-age-requirement {
    margin-top: 10px;
    margin-bottom: 10px;
}


@media (max-width: 768px) {
    .views-field-field-event-skill-level,
    .views-field-event-type-id {
        display: block;
        margin-bottom: 5px; /* Adds space between the badges */
    }

    .views-field-field-event-skill-level .introductory,
    .views-field-event-type-id .badge {
        display: inline-block;
        width: 100%; /* Make badges full-width */
        text-align: center; /* Center the text */
        margin-bottom: 5px; /* Adds space between the badges */
    }
    
    .views-field-field-event-skill-level .field-content
    {
    	width: 100%;
    }
    
    span.views-field.views-field-field-civi-event-age-requirement
        {
    	width: 100%;
    }
    
}



.crm-section.event_summary-section {
    background: lightgrey;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 23px;
    font-size: 20px;
    line-height: 30px;
}

#crm-container.crm-public .crm-section, .crm-section {
    margin-bottom: 20px;
}

.view-civi-event-listing .views-field.views-field-summary {
    font-size: 24px;
    padding-top: 25px;
}


/* Scoped styling for tagged event lists and individual events */
.main-content .view-content.row .views-row article.civicrm-entity--type-civicrm-event,
.content article.civicrm-entity--type-civicrm-event {
  border-radius: 5px; /* Round the corners for a smoother look */
  padding: 15px; /* Add spacing inside the article */
  margin-bottom: 20px; /* Space between articles */
}

/* Floating image with proper spacing */
.main-content .field--name-field-civi-event-image,
.content .field--name-field-civi-event-image {
  float: left; /* Float the image to the left */
  margin-right: 20px; /* Space between image and text */
  margin-bottom: 15px; /* Space below image */
  max-width: 220px; /* Limit the image width for consistency */
}

/* Event title styling */
.main-content .field--name-title,
.content .field--name-title {
  font-size: 1.5rem; /* Larger font size for prominence */
  font-weight: bold; /* Make the title bold */
  margin-bottom: 10px; /* Add space below the title */
}

/* Event summary styling */
.main-content .field--name-summary,
.content .field--name-summary {
  font-size: 1rem; /* Standard font size for summary */
  line-height: 1.5; /* Improve readability */
  margin-top: 10px; /* Space above the summary */
}

/* Button styling for event details */
.main-content .views-field-nothing .btn,
.content .views-field-nothing .btn {
  color: #fff; /* Button text color */
  border: none; /* Remove border */
  border-radius: 50px; /* Rounded pill style */
  padding: 10px 20px; /* Add spacing inside the button */
  text-align: center; /* Center-align text */
  display: inline-block; /* Inline block for consistent sizing */
  font-size: 1rem; /* Button font size */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* Ensure buttons have hover effects */
.main-content .views-field-nothing .btn:hover,
.content .views-field-nothing .btn:hover {
  background-color: #0056b3; /* Darker shade on hover */
  text-decoration: none; /* Remove underline on hover */
}



.crm-socialnetwork a.btn.btn-default {
    color: white;
    background: grey;
}