/*
Theme Name: Salient Child Theme
Theme URI: //themenectar.com/salient/
Description: Child Theme for Salient
Author: Child Theme By Brian Cake
Author URI: //indyrunners.org/
Template: salient
Version: 1.0
*/

/* * {
  border: 1px solid red !important;
} */

:root {
  --ir-blue: #1f3267;
  --ir-blue-50: #1f326780;
  --ir-blue-6: #1f326710;
  --race-calendar-list-text-blue: #1f3267;
  --ir-red: #ce1e2e;
  --background-white: #fafafa;
  --off-white: #f2f2f2;
  --text-main-color: #1f3267;
  --action-button: var(--ir-red);
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakrapetch-regular-webfont.woff2') format('woff2'),
    url('../fonts/chakrapetch-regular-webfont.woff') format('woff'),
    url('../fonts/ChakraPetch-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Chakra Petch Bold';
  src: url('../fonts/chakrapetch-bold-webfont.woff2') format('woff2'),
    url('../fonts/chakrapetch-bold-webfont.woff') format('woff'),
    url('../fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  /* font-weight: bold; */
}

@font-face {
  font-family: Inter Bold;
  src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: Inter Italic Bold;
  src: url('fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-style: normal;
  /* font-style: italic; */
  font-weight: bold;
}
@font-face {
  font-family: Inter Regular;
  src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

h1 {
  color: var(--ir-red);
}

h1,
h3 {
  font-family: 'Chakra Petch Bold', sans-serif;
  text-transform: uppercase;
  line-height: 1.15em;
}
h2 {
  font-family: 'Inter Bold', sans-serif;
}
p,
ul,
ol,
li,
td,
th {
  font-family: 'Inter Regular', sans-serif;
}
body > #warning-container > i,
#warning-container,
body > #warning-container {
  color: var(--ir-red) !important;
  background-color: var(--ir-red) !important;
}
.site-description {
  color: var(--ir-red);
  font-family: 'Inter Italic Bold', sans-serif !important;
}

/* Override the font info for headers (The Events Calendar has its own fonts, etc.) */
h1,
h2,
h3 {
  font-weight: normal !important;
}

/* Format "Events Status" header on the "Add Event" screen */
#event_tribe_event_status > div.tribe-section-header > h3 {
  font-size: 32px;
  color: var(--ir-blue);
  font-family: 'Chakra Petch', sans-serif;
}

/* Correct the "Event Title" and "Event Description" titles on the Edit Event page */
#tribe-community-events > form > div.events-community-post-title > label,
#tribe-community-events > form > div.events-community-post-content > label {
  font-weight: normal;
}

/* Second outermost border (around the white section) on the "Add Event" screen */
#tribe-community-events {
  border-color: var(--ir-blue-50);
  font-family: 'Chakra Petch', sans-serif;
}

/* Used on the View Race Details page */
#venue-bug-message {
  margin-bottom: 15px;
}

/* Add borders around sections on the "Add New Race" page */
/* table.tribe-section-content, */
.events-community-post-title,
.events-community-post-content,
div.tribe-section.tribe-section-datetime.event-datepickers.event-time.eventForm,
#event_tribe_event_status,
#event_tribe_venue,
#event_tribe_organizer,
div.tribe-section.tribe-section-website,
div.tribe-section.tribe-section-custom-fields,
div.tribe-section.tribe-section-terms {
  border: 1px solid var(--ir-blue-50);
  border-radius: 5px;
  padding: 15px;
  margin-top: 25px;
}

div.tribe-section-content-field {
  display: inline-block;
}

/* Used on buttons, e.g., on the FTP page */
.wp-block-button__link {
  text-decoration: none;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 22px;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #0074ad;
  background-image: linear-gradient(to bottom, #08c, #005580);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.tribe-events-calendar-list > div > div.extraFieldsItem > div > div {
  line-height: 16px;
}

.form-field {
  font-weight: bold;
}

@media (min-width: 800px) {
  header.tc-header.clearfix {
    height: 50px;
  }

  div.tribe-events {
    margin-top: 170px;
  }

  .entry-header-custom-page {
    color: var(--ir-blue);
    background-color: var(--background-white);
    margin-top: 168px;
  }
}

h1.entry-title {
  width: 90%;
}

@media (min-width: 800px) {
  h1.entry-title {
    margin-top: 44px;
    margin-left: 32px;
    margin-right: 32px;
  }
}

@media (max-width: 799px) {
  h1.entry-title {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* Color the titles and background of the titles for pages other than the front page. (Don't color the saying.) */
h2,
h3,
.entry-header {
  color: var(--ir-blue);
}

h2 {
  margin-top: 24px;
  margin-bottom: 8px;
}

.site-description {
  margin-block-start: 12px;
}

@media (max-width: 799px) {
  .hideOnSmallScreen {
    display: none !important;
  }

  /* Indent wrapped lines on the race calendar extra field prefixes ("Distance:", "Event Type:", and "Course:") */
  .tribe-events-calendar-list .titleItem > div > div > div {
    text-indent: -18px;
    padding-left: 18px;
  }
}

@media (min-width: 800px) {
  .hideOnLargeScreen.container {
    display: none;
  }

  /* Format the race calendar extra field prefixes ("Distance:", "Event Type:", and "Course:") */
  .tribe-events-calendar-list
    div.theme-extra-event-fields
    div:nth-child(n)
    > span,
  .tribe-events-calendar-list
    div.extraFieldsItem
    > div
    > div:nth-child(n)
    > span {
    font-weight: bold;
    font-family: 'Chakra Petch', sans-serif;
  }

  /* Indent wrapped lines on the race calendar extra field prefixes ("Distance:", "Event Type:", and "Course:"*/
  .tribe-events-calendar-list .theme-extra-event-fields div:nth-child(n),
  .tribe-events-calendar-list .extraFieldsItem > div > div:nth-child(n) {
    text-indent: -18px;
    padding-left: 18px;
  }
}

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid var(--ir-blue);
}

.form-field {
  float: left;
  width: 100%;
  clear: left;
}

.form-field-div {
  border-bottom: 1px solid #efefef;
  margin: 10px 20px 0 20px;
  padding-bottom: 10px;
  width: 90%;
}

fieldset {
  width: 90%;
  margin-top: 20px;
  border: 1px solid #d6d6d6;
  background-color: white;
  line-height: 1.6em;
}

legend {
  font-style: italic;
  color: #666;
}

input[type='text'] {
  width: 100%;
  border: 1px solid var(--ir-blue-50);
  padding: 2px;
  outline: none;
}

input[type='text']:focus,
input[type='text']:hover {
  background-color: #d0e2f0;
  border: 1px solid #999;
}

.wrapper {
  max-width: 100%;
}

.resp {
  line-height: 22px;
  height: 84px;
  padding: 0;
}

/* Main body */
body {
  color: var(--ir-blue);
}

.tribe-community-events {
  color: var(--ir-blue) !important;
}

#tribe-community-events-list .title a {
  font-weight: bold;
}

/* Underline links on the "My Events" page */
#tribe-community-events-list .title a,
#tribe-community-events-list .tribe-list-column-organizer a,
#tribe-community-events-list .tribe-list-column-venue a {
  text-decoration: underline;
}

/* Spoiler (for club runs/walks info), tables, and community events list */
.su-spoiler-content,
.tablepress td,
#tribe-community-events-list {
  color: var(--ir-blue) !important;
}

/* Single race title on a small screen. */
#tribe-events-content {
  color: var(--ir-blue);
}

/* View race details description */
div.tribe-events-single-event-description.tribe-events-content > p {
  color: var(--text-main-color);
}

/* Format the single race info for a small screen to make description paragraphs look right */
div.tribe-events-single-event-description.tribe-events-content > p {
  margin-bottom: 0;
  padding-bottom: 15px;
}

.weekly-club-run-walk-table img {
  height: 150px;
}

/* Change width of navbar tabs */
.sticky-disabled
  .logo-centered
  .pull-menu-center
  .nav-collapse
  .nav
  > .menu-item
  > a {
  padding-left: 10px;
  padding-right: 10px;
}

/* Each entire page */
#tc-page-wrap {
  background-color: var(--ir-blue);
}

.type-page {
  background-color: var(--background-white);
}

#contextual-help-link.button.show-settings {
  display: none;
}

/* Prevent word-wrap  */
.navbar .nav li {
  white-space: nowrap;
}

#main-wrapper,
.tribe-events-list,
.tribe-events-cal-links,
.tribe-events-schedule.tribe-clearfix,
div.tribe-events-single-event-description.tribe-events-content > p {
  background-color: var(--background-white);
}

@media (min-width: 800px) {
  /* Add margin under the month separator on the race list.
  Note: The "h2" is necessary. */
  h2.tribe-events-calendar-list__month-separator {
    margin-bottom: 8px;
  }

  /* Add distance between blocks of races by month, skipping the first month */
  .tribe-events-calendar-list__month-separator
    ~ .tribe-events-calendar-list__month-separator {
    margin-top: 70px;
  }
}

/* Format the race list month separator */
.tribe-events-calendar-list__month-separator-text {
  font-weight: bold;
  font-size: 32px;
  line-height: 25.6px; /* This should probably be something in em's */
  text-shadow: none;
  color: var(--ir-red);
  text-transform: uppercase;
}

@media (min-width: 800px) {
  /* Set every row color skipping month separators */
  div.tribe-events-calendar-list > div {
    margin-bottom: 10px;
    overflow: hidden;
    background-color: var(--ir-blue-6);
    border-color: var(--ir-blue-50);
    border-style: solid;
    border-width: 1px;
  }

  /* Round top corners of each month of rows. I couldn't do bottom corners since
     CSS has no "previous sibling" functionality */
  .tribe-events-calendar-list__month-separator + div {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

/* Set font for the race list month separator */
.tribe-events-calendar-list__month-separator {
  font-family: 'Inter Bold', sans-serif;
}

@media (max-width: 799px) {
  /*Change margins around the race list month separator.
  Note: The "h2" is necessary. */
  h2.tribe-events-calendar-list__month-separator {
    margin-top: 30px;
    margin-bottom: 5px;
  }

  /* Set every row color skipping month separators */
  div.tribe-events-calendar-list > div {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Round top corners of each month of rows. I couldn't do bottom corners since
     CSS has no "previous sibling" functionality */
  .tribe-events-calendar-list__month-separator + div {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  /* Format the month on the calendar list */
  span.tribe-events-calendar-list__event-date-tag-month {
    font-family: 'Chakra Petch Bold', sans-serif !important;
    text-transform: uppercase;
    line-height: 1.15em;
  }

  /* Format the date and day of week on the calendar list */
  span.tribe-events-calendar-list__event-daynum-and-weekday {
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: bold;
  }
}

@media (max-width: 799px) {
  .tribe-events-calendar-list__event-date-tag,
  .date-and-button {
    width: 150px !important;
  }
}

@media (min-width: 800px) {
  /* Drew the shape around the date and weekday on the calendar list */
  .tribe-events-calendar-list
    > div
    > div.date-and-button
    > div.tribe-events-calendar-list__event-date-tag.tribe-common-g-col
    > time
    > span.tribe-events-calendar-list__event-daynum-and-weekday {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 2px solid var(--ir-blue);
    border-top-width: 0px;
    background-color: white;
    width: 60px;
    font-weight: bold;
    line-height: 1.6em;
    margin: 0 auto;
  }

  .date-and-button {
    /* Center the date vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
  }

  /* Format the month on the calendar list */
  span.tribe-events-calendar-list__event-date-tag-month {
    background: var(--ir-blue);
    width: 60px;
    font-family: 'Chakra Petch Bold', sans-serif;
    text-transform: uppercase;
    line-height: 1.15em;
    color: white;
    font-weight: bold;
  }

  /* Race calendar list view date */
  .tribe-events-calendar-list
    div.tribe-events-calendar-list__event-date-tag.tribe-common-g-col {
    color: var(--race-calendar-list-text-blue);
    word-break: normal;
    overflow-wrap: anywhere;
    margin: 0;
    border: 0;
    display: table-cell;
    width: 5%;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    font-size: 16px;
    position: relative;
    font-family: 'Chakra Petch', sans-serif;
  }

  /* Race calendar list view title */
  .tribe-events-calendar-list > div > h3 {
    color: var(--race-calendar-list-text-blue);
    word-break: normal;
    overflow-wrap: anywhere;
    font-family: 'Chakra Petch Bold', sans-serif;
    display: table-cell;
    width: 30%;
    vertical-align: middle;
    padding: 10px;
    font-size: 22px;
    position: relative;
    text-transform: uppercase;
    line-height: 1.15em;
  }

  /* Format address on the race calendar list */
  .tribe-events-calendar-list > div > address {
    color: var(--race-calendar-list-text-blue);
    word-break: normal;
    overflow-wrap: anywhere;
    display: table-cell;
    width: 30%;
    vertical-align: middle;
    padding: 10px;
    font-size: 18px;
    position: relative;
  }

  .tribe-events-calendar-list
    div.race-info
    > address
    > span.tribe-events-calendar-list__event-venue-title {
    font-weight: bold;
  }

  /* Format extra fields on the race calendar list */
  .tribe-events-calendar-list > div > div.theme-extra-event-fields {
    color: var(--race-calendar-list-text-blue);
    word-break: normal;
    overflow-wrap: anywhere;
    margin: 0;
    border: 0;
    display: table-cell;
    width: 30%;
    vertical-align: middle;
    padding: 10px;
    font-size: 18px;
    position: relative;
    font-family: 'Chakra Petch', sans-serif;
  }
}

/* Format the "Get Details" button on the calendar list */
a.btn.get-details-button {
  background: var(--ir-blue);
  color: white !important;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

@media (max-width: 799px) {
  /* Format race titles on the race list */
  div.titleItem {
    padding-top: 5px;
    font-family: 'Chakra Petch', sans-serif;
  }

  /* Format extra event fields on the race list */
  div.theme-extra-event-fields {
    padding-left: 2px;
    font-family: 'Chakra Petch', sans-serif;
  }

  /* Format the date and weekday on the calendar list (1st, 3rd, 5th, then 2nd, 4th, 6th ... rows */
  span.tribe-events-calendar-list__event-daynum-and-weekday {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 2px solid var(--ir-blue);
    border-top-width: 0px;
    background-color: white;
    width: 60px;
    font-size: 16px;
    color: var(--race-calendar-list-text-blue);
    margin-left: 40px !important;
    margin-right: 40px !important;
    line-height: 1.6em;
  }

  /* Format the month on the calendar list */
  span.tribe-events-calendar-list__event-date-tag-month {
    background: var(--ir-blue);
    width: 60px;
    color: white;
    font-weight: bold;
    margin-left: 40px !important;
    margin-right: 40px !important;
  }

  /* Format the "Get Details" button on the calendar list (2nd, 4th, 6th, ... rows) on a small screen */
  a.btn.get-details-button {
    padding: 3px 8px;
    margin-left: 5px;
    margin-right: 0px;
    line-height: 20px;
    width: fit-content;
    display: inline-block;
  }

  .hideOnSmallScreen a.btn.get-details-button {
    display: none;
  }
}

@media (min-width: 800px) {
  /* Move the calendar list view down so the menu doesn't cover it */
  div.tribe-events-calendar-list {
    margin-top: 15px;
  }

  section.tribe-common-l-container,
  .tribe-events-l-container {
    padding-top: 36px !important;
  }
}

span.tribe-events-calendar-list__event-date-tag-month {
  padding-top: 5px;
  padding-bottom: 5px;
  border-color: var(--ir-blue);
  margin: 0 auto;
}

@media (min-width: 800px) {
  .tribe-events .tribe-events-calendar-list__event-col {
    flex-wrap: nowrap;
  }

  .tribe-common .tribe-common-g-col {
    display: flex;
    justify-content: space-between !important;
    color: var(--ir-blue);
  }

  /* Put the distance, race type, and course on separate lines on the race calendar */
  .tribe-common .tribe-common-g-col div {
    flex-direction: column;
  }

  div.race-info {
    flex-direction: row !important;
    flex-grow: 1; /* Take up remaining space */
    flex-basis: 0; /* Reset initial width to allow flex-grow to work */
    vertical-align: middle;
    display: flex;
    align-items: center;
  }
  .theme-extra-event-fields.bd-highlight.mb-3.tribe-common-g-col {
    flex-direction: column;
  }

  .dateItem {
    width: 100px;
  }

  .tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
    padding-top: 0;
  }

  .getDetailsItem {
    width: 100px;
    height: 30px;
    display: table-cell;
    vertical-align: middle;
  }

  /* Override Event Calendar plugin's CSS bottom margin to center the venue
  vertically on the race calendar */
  #tc-page-wrap > div > div > div.tribe-events-calendar-list > div > address {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 799px) {
  .hideOnLargeScreen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dateItem,
  .getDetailsItem {
    flex: 0 0 100px;
  }

  .titleItem,
  .extraFieldsItem {
    flex: 1 0 calc(100% - 100px);
  }
}

/* Format "Get Details" button at the end of each race in the race list (1st, 3rd, 5th, etc.) */
@media (max-width: 799px) {
  a.btn.get-details-button {
    margin-top: 20px;
  }

  /* Format address/location on the small screen */
  div > address {
    font-size: 16px;
    line-height: 100%;
  }

  /* Find Events button on the small screen */
  #tribe-events-events-bar-search > form > button {
    color: white;
    font-weight: bold !important;
    background-color: var(--action-button);
    border: 2px;
    border-color: var(--action-button);
    font-size: 16px;
    border-radius: 10px;
    border-width: 0px;
  }
}

@media (min-width: 800px) {
  a.btn.get-details-button {
    height: 30px;
    line-height: 30px;
    width: 110px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 25px;
  }

  /* Format the "Find Events" button on the large screen */
  #tribe-events-events-bar-search > form > button {
    background: var(--action-button);
    border-radius: 10px !important;
    border-color: var(--action-button);
    border-width: 0;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 16px;
    color: white;
    font-weight: bold;
    margin: 10px 5px 10px 15px;
    padding: 5px 10px;
    text-align: center;
  }

  /* "Search for events" box */
  #tribe-events-events-bar-keyword {
    margin: 0 5px;
  }

  /* On the race details page, move the title down as it's partially covered */
  #tribe-events-content > h1 {
    margin-top: 30px;
  }

  .tribe-events-schedule {
    margin-bottom: 48px;
  }

  .tribe-events-single-event-description {
    line-height: 1.4em;
  }
}

/* Format the "Add/Edit a Race For Free" button */
.center-contents.align-middle {
  width: auto;
  white-space: nowrap;
  display: inline-block;
}
.tribe-events-c-top-bar.tribe-events-header__top-bar
  > div.center-contents.align-middle
  > a {
  background: var(--action-button);
  border-color: var(--action-button);
  font-size: 16px;
  color: white !important;
  font-weight: bold !important;
  height: 30px;
  margin: 10px 5px 10px 15px;
  padding: 5px 10px;
  text-align: center;
  line-height: 20px;
  /* Centers the text in vertically in the "button" */
  width: auto;
  display: block;
}

/* Hide the ability to change from the list view on both large and small screens */
/* #tribe-events-view-selector-content
  > ul
  > li
  > a
  > span.tribe-events-c-view-selector__list-item-text,
.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
  > div.tribe-events-c-events-bar__views
  > div
  > button {
  display: none;
} */

/* Effectively remove the background for the date picker date */
.tribe-events-c-top-bar.tribe-events-header__top-bar
  > div.tribe-events-c-top-bar__datepicker
  > button {
  background-color: white;
  color: var(--ir-blue);
  border: none;
}

/* Formatting the single race event to be like the tribe formatted event */
#tribe-events-content,
div.tribe-events-single-event-description.tribe-events-content > p,
#tribe-events-content > div.tribe-events-schedule.tribe-clearfix {
  background-color: var(--background-white);
}

.tribe-events-single-section.tribe-events-event-meta.primary.tribe-clearfix,
.tribe-events-single-section.tribe-events-event-meta.secondary.tribe-clearfix {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin: 16px;
}

@media (max-width: 799px) {
  #tribe-events-content,
  div.tribe-events-single-event-description.tribe-events-content > p,
  #tribe-events-content > div.tribe-events-schedule.tribe-clearfix {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 16px;
  }

  .tribe-events-single-event-title {
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (min-width: 800px) {
  #tribe-events-content,
  div.tribe-events-single-event-description.tribe-events-content > p,
  #tribe-events-content > div.tribe-events-schedule.tribe-clearfix {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 0px;
  }

  .tribe-events-single-event-title {
    margin-left: 16px;
    margin-right: 16px;
  }

  div.tribe-events-schedule.tribe-clearfix {
    margin-bottom: 32px;
  }
}

/* On the single event screen, change the color of the event title */
h1.tribe-events-single-event-title {
  color: var(--ir-red);
}

a.fpc-btn {
  background-color: var(--ir-blue);
}

/* On the single event screen, hide the top notice of the previous and next events on the calendar */
#tribe-events-header > nav > ul {
  display: none;
}

@media (min-width: 800px) {
  /* View Race Details format the details, organizer, other */
  .tribe-events-event-meta .column,
  .tribe-events-event-meta .tribe-events-meta-group {
    box-sizing: border-box;
    float: left;
    margin: 0 0 20px;
    padding: 0 4%;
    text-align: left;
    vertical-align: top;
    width: 33.3333%;
    transform: scale(1);
  }

  /* View Race Details page details, organizer, other, and venue background */
  div.tribe-events-single-section.tribe-events-event-meta.secondary.tribe-clearfix,
  div.tribe-events-single-section.tribe-events-event-meta.primary.tribe-clearfix {
    background: var(--background-white);
    border-top: 1px solid var(--ir-blue-50);
  }

  /* View Race Details page details, organizer, other, and venue text */
  div.tribe-events-single-section.tribe-events-event-meta.secondary.tribe-clearfix
    > div.tribe-events-venue-map,
  div.tribe-events-single-section.tribe-events-event-meta.secondary.tribe-clearfix,
  div.tribe-events-single-section.tribe-events-event-meta.primary.tribe-clearfix {
    font-family: 'Chakra Petch', sans-serif;
    line-height: 1.6em;
    color: var(--text-main-color);
    font-size: 14px;
  }

  /* Make the venue location bold on the race list calendar */
  .tribe-events-calendar-list
    > div
    > address
    > span.tribe-events-calendar-list__event-venue-title.tribe-common-b2--bold {
    font-weight: bold;
  }

  /* Website page title */
  header > h1 {
    background-color: var(--background-white);
  }
}

@media (max-width: 799px) {
  div.tribe-events-single-section.tribe-events-event-meta.primary.tribe-clearfix,
  div.tribe-events-single-section.tribe-events-event-meta.secondary.tribe-clearfix {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: inherit;
    line-height: 1.6em;
    color: var(--text-main-color);
    transform: scale(1);
    background: var(--background-white);
    font-size: 14px;
    margin: 15px 0 20px;
    padding: 4% 0;
    border-top: 1px solid var(--ir-blue-50);
  }

  /* Format the venue location on the race list calendar */
  .tribe-events-calendar-list
    .titleItem
    address
    .tribe-events-calendar-list__event-venue-title {
    font-weight: bold;
    color: var(--ir-blue);
  }

  /* Move the calendar list down so that the search bar and date range is visible */
  section.tribe-events-l-container {
    margin-top: 10px;
  }

  /* TBD - Entire date block */
  div.dateItem {
    width: 100px;
    margin-top: 4px;
  }

  div.getDetailsItem {
    margin-top: 12px;
  }

  div.tribe-common-g-col {
    display: flex !important;
  }

  div.tribe-events-calendar-list__event-date-tag.tribe-common-g-col {
    width: 150px;
  }

  /* Add a little blank space between the phone number and map on a small screen */
  div.tribe-events-single-section.tribe-events-event-meta.secondary.tribe-clearfix
    > div.tribe-events-meta-group.tribe-events-meta-group-venue
    > dl
    > dd.tribe-venue-tel {
    margin-bottom: 10px;
  }
}

.tribe-events-c-top-bar.tribe-events-header__top-bar > a {
  border: 1px solid white;
  border-color: var(--ir-blue);
  color: var(--ir-blue) !important;
  padding: 5px;
}

/* Color the '<', '>', date range, and Today button on the large screen event calendar list */
.tribe-events-c-top-bar__nav-link-icon-svg,
.tribe-events-c-top-bar__datepicker-button,
.tribe-events-c-top-bar__today-button {
  color: var(--ir-blue);
  font-weight: bold;
}

/* Remove the previous/next races listed at the bottom of the single race page */
#tribe-events-footer > nav > ul > .tribe-events-nav-previous,
#tribe-events-footer > nav > ul > .tribe-events-nav-next {
  display: none;
}

/* Format "<< All Events" on the single race page */
#tribe-events-content > p {
  color: var(--ir-blue);
}

/* Format "Previous Events" and "Next Events" at the bottom of the race calendar list */
.tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next-label {
  color: var(--ir-blue);
  font-weight: bold;
  font-size: 22px;
}

/* Format the race calendar list of my events */
#tribe-events-pg-template
  > div.tribe-community-events-content
  > div.tribe-community-events-list.tribe-community-no-items {
  color: white;
  font-weight: bold;
}

/* Format the page for adding races to the race calendar */
#tribe-community-events .events-community-post-title > label,
#tribe-community-events .events-community-post-content > label,
#event_tribe_venue .tribe_sectionheader > h4,
#tribe-community-events
  .event-datepickers.event-time.eventForm
  > div.tribe-section-header
  > h3,
#tribe-community-events
  .tribe-section-image-uploader
  > div.tribe-section-header
  > h3,
#event_tribe_venue > div > h3,
#event_tribe_organizer > div > h3,
#tribe-community-events .tribe-section-website > div > h3,
#tribe-community-events .tribe-section-custom-fields > div > h3,
#tribe-community-events .tribe-section-terms > div.tribe-section-header > h3 {
  margin: 11px 0;
  text-shadow: 0 1px 0 white;
  font-size: 32px;
  line-height: 40px;
  font-family: 'Chakra Petch', sans-serif;
  color: var(--ir-blue);
}

/* Format a mid-sized race calendar list date range */
.tribe-events-c-top-bar.tribe-events-header__top-bar
  > div.tribe-events-c-top-bar__datepicker
  > button
  > time
  > span.tribe-events-c-top-bar__datepicker-mobile {
  color: var(--ir-blue);
}

/* "Required" on the community events edit event page */
#tribe-community-events
  > form
  > div.events-community-post-title
  > label
  > span {
  color: var(--ir-red);
}

#tribe-community-events
  > form
  > div.events-community-post-content
  > label
  > span {
  color: var(--ir-red);
}

#tribe-community-events
  > form
  > div.tribe-section.tribe-section-terms
  > div.tribe-section-content
  > label
  > span {
  color: var(--ir-red);
  font-weight: bold;
}

.req {
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  color: var(--ir-red);
}

/* Format the "Add New Event" title on the add race page */
#tribe-community-events > header > h2 {
  color: var(--ir-blue);
}

/* Format the "VIEW YOUR SUBMITTED EVENTS" button on the add race page */
/* NOTE: I set this font size because otherwise the characters were different heights. I don't know why. */
#tribe-community-events > header > a {
  background-color: var(--ir-red);
  color: white !important;
  font-size: 14px;
}
.race-calendar-header a {
  background-color: var(--ir-red);
}

/* Format the "Upcoming Events" and "Past Events" buttons on the community list */
/* NOTE: I set this font size because otherwise the characters were different heights. I don't know why. */
.tribe-button-secondary,
.tribe-button-tertiary,
input[type='submit'].tribe-button.submit {
  font-family: 'Chakra Petch', sans-serif !important;
  background-color: var(--ir-blue);
  background-image: none;
  color: white;
  font-size: 14px !important;
}

#tribe-events-pg-template > div.tribe-community-events-content > h2,
#tribe-events-pg-template > div.tribe-community-events-content > a,
#tribe-events-pg-template
  > div.tribe-community-events-content
  > div.tribe-event-list-search {
  margin-top: 30px;
  font-family: 'Chakra Petch', sans-serif;
}

#tribe-events-pg-template > div.tribe-community-events-content > h2 {
  color: white;
}

/* Format "Please log in first." on the login screen */
#tribe-events-pg-template > div.tribe-community-events > p {
  color: var(--ir-red);
}

/* Format "There were no events found" on large screen */
@media (min-width: 800px) {
  .tribe-events-header__messages.tribe-events-c-messages.tribe-common-b2
    > div
    > ul
    > li {
    color: var(--ir-blue);
  }
}

/* Add vertical blank lines between numbered list items */
ol > li {
  margin-bottom: 20px;
}

/* Community events calendar list "View", "Edit", and "Delete" links */
#tribe-community-events-list .tribe-list-column-title .view a,
#tribe-community-events-list .tribe-list-column-title .edit a,
#tribe-community-events-list .tribe-list-column-title .delete a {
  color: white;
  background-color: var(--ir-blue);
  border: 1px solid var(--ir-blue);
  border-radius: 5px;
  font-size: 14px;
  padding: 5px;
}

/* Community calendar my events list row */
#tribe-community-events-list .tribe-list-column-title.tribe-active > span > a,
#tribe-community-events-list .tribe-list-column-organizer.tribe-active > a,
#tribe-community-events-list .tribe-list-column-venue.tribe-active > a,
#tribe-community-events-list .tribe-list-column-category.tribe-active,
#tribe-community-events-list .tribe-list-column-recurring.tribe-active,
#tribe-community-events-list .tribe-list-column-start_date.tribe-active,
#tribe-community-events-list .tribe-list-column-end_date.tribe-active {
  font-size: 16px;
  line-height: 22px;
  font-family: 'Chakra Petch', sans-serif;
}

@media (min-width: 800px) {
  #tribe-events-pg-template {
    margin: 0px auto !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Background single event view */
#tribe-events-pg-template {
  background-color: #fafafa;
}

@media (min-width: 800px) {
  div#tribe-community-events.form.venue {
    padding-top: 50px;
    padding-left: 60px;
    padding-right: 60px;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-left-width: 1px;
    border-right-width: 1px;
  }
}

small.req {
  cursor: pointer;
  text-shadow: 0 1px 0 white;
  line-height: 40px;
  font-family: 'Chakra Petch', sans-serif;
  box-sizing: border-box;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  text-transform: none;
  color: var(--ir-red);
}

/* Format the "My Events" header */
#tribe-events-pg-template > div.tribe-community-events-content > h2 {
  color: var(--ir-blue);
  margin: 0;
}

#tribe-events-pg-template
  > div.tribe-community-events-content
  > div.tribe-community-events-list.tribe-community-no-items {
  color: var(--ir-blue);
}

#login-head {
  padding: 70px 0;
  color: var(--ir-red);
}

/* Remove the end date/time, recurrence section, and All Day Event option from the community calendar add race page */
#EventEndDate,
#EventEndTime,
.recurrence-row,
#tribe-community-events
  > form
  > div.tribe-section.tribe-section-datetime.event-datepickers.event-time.eventForm
  > table
  > tbody
  > tr:nth-child(3)
  > td.tribe-section-content-field {
  display: none !important;
}

.dashicons.dashicons-screenoptions.move-linked-post-group {
  display: none;
}

@media (max-width: 799px) {
  #tribe-community-events
    > form
    > div.tribe-section.tribe-section-datetime.event-datepickers.event-time.eventForm
    > table
    > tbody
    > tr:nth-child(5)
    > td.recurrence-rules-header,
  #tribe-community-events
    > form
    > div.tribe-section.tribe-section-datetime.event-datepickers.event-time.eventForm
    > table
    > tbody
    > tr:nth-child(5)
    > td:nth-child(2) {
    display: none;
  }
}

/* Indent bullets */
ul {
  list-style-position: inside;
}

@media (min-width: 800px) {
  .tribe-filter-bar-c-clear-button.tribe-common-c-btn-border.tribe-filter-bar__action-clear {
    padding: 8px 12px;
  }

  /* Filter bar formatting */
  div.tribe-filter-bar__filters-slide.tribe-swiper-slide,
  .tribe-filter-bar-c-clear-button {
    background-color: var(--ir-blue);
  }

  button.tribe-filter-bar-c-pill__remove-button {
    border: none;
  }

  .tribe-common-c-svgicon.tribe-common-c-svgicon--messages-not-found {
    color: white;
  }

  div.tribe-events-c-search__input-group {
    height: 64px;
    padding: 10px;
  }

  div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border {
    height: 62px;
    width: 100%;
  }

  .tribe-events-c-events-bar__filter-button-text {
    font-family: 'Inter Bold', sans-serif;
  }

  #tribe-events-events-bar-keyword {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .tribe-events-c-events-bar__filter-button-container {
    margin-top: 11px;
    margin-bottom: 10px;
    padding-top: 12px;
  }

  #tribe-events-view-selector-content {
    display: none;
  }
}

@media (min-width: 768px) {
  button.tribe-events-c-events-bar__filter-button {
    background-color: white;
    border-width: 0;
    padding: 12px 16px !important;
    margin: 0 0 0 5px !important;
  }
}

.submit-a-race-button {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: bold !important;
  background-color: var(--ir-blue);
  margin-left: 5px !important;
}

@media (max-width: 799px) {
  .tribe-events .tribe-events-c-events-bar__views {
    display: none;
  }
}

.tribe-events.tribe-events-view.tribe-events-view--list
  div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
  > div.tribe-events-c-events-bar__filter-button-container
  > button {
  border-radius: 14px !important;
  border: 1px solid var(--ir-blue);
}

.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
  > div.tribe-events-c-events-bar__filter-button-container {
  padding: 0;
  display: inline-block;
}

#main-wrapper {
  border-radius: 5px;
}

/* Change the accordion heading to the desired color */
.su-spoiler-style-fancy > .su-spoiler-title {
  background-color: var(--ir-blue) !important;
  color: white;
  font-family: 'Chakra Petch', sans-serif;
}

div.entry-content > ul {
  padding-left: 8px;
}

div.entry-content > ul li {
  list-style-image: url('../../uploads/2024/09/BlueCheckmarkForBulletPoint.png');
  list-style-position: outside;
  padding: 10px 0;
  line-height: 1;
  height: auto;
}

a.su-button.su-button-style-default > span {
  background-color: var(--ir-blue);
  border-color: var(--ir-blue) !important;
}

.tablepress thead th,
.tablepress tfoot th {
  background-color: var(--ir-blue) !important;
  color: white;
}

.tablepress {
  table-layout: auto;
  width: 95%;
  margin: 0 auto;
}

.tribe-community-events.form {
  border-radius: 5px;
  background-color: white;
  box-sizing: border-box;
  display: block;
}

@media (min-width: 800px) {
  .tribe-community-events.form {
    padding: 56px;
  }
}
@media (max-width: 799px) {
  .tribe-community-events.form {
    padding: 15px;
  }
}

.my-events-header {
  display: flex;
  border-bottom: none !important;
  padding-left: 19.5px !important;
  padding-right: 19.5px !important;
}
.my-events-header > .tribe-button-secondary {
  margin-left: auto;
}

/* Add back in if recurrence is ever added to our race calendar */
#recurrence-changed-row {
  display: none;
}

div.tribe-events-c-events-bar__filter-button-container {
  height: 22px;
  width: 138px;
}

div.tribe-community-events {
  margin-top: 30px;
}

/* Put the checkbox and label next to each other for checking the TOS */
#tribe-community-events
  > form
  > div.tribe-section.tribe-section-terms
  > div.tribe-section-content
  > label,
#terms {
  display: inline-block;
  vertical-align: middle;
}

/* Format labels on the "Edit Race" page */
.tribe-section-content-label > label,
.tribe-section-content > div > div > label,
.saved-venue-table-cell > label,
.saved-organizer-table-cell > label,
.tribe-section-content-label > label {
  color: var(--ir-blue);
  font-weight: bolder;
}

#tribe-community-events {
  border: none;
}

/* "Add New" button on the "My Events" page */
.tribe-button.tribe-button-primary.add-new {
  background-color: var(--ir-red) !important;
  padding: 15px 35px 15px 35px !important;
  font-weight: bold;
  font-size: 14px;
  font-family: 'Inter Regular', sans-serif;
}

/* Round corners of the gray and white background sections of the single race page */
#tribe-events-pg-template,
#tribe-events-content {
  border-radius: 5px;
}

/* Format general bullet points */
main ul > li {
  list-style-image: url('../../uploads/2023/06/CheckmarkForBulletPoint.png');
  padding: 10px 0;
  line-height: 1;
  height: auto;
  margin-left: 50px;
  margin-right: 50px;
}

/* Format the Events Calendar affiliate link for their non-profit program */
.tribe-events-promo {
  color: var(--ir-blue);
}

.tribe-events-event-url {
  max-width: 100%;
}

#tribe-events-content {
  overflow-wrap: break-word;
}

.tribe-events-meta-group {
  margin-right: 0px;
}

/* Shrink padding at the bottom of the race calendar */
#tc-page-wrap section.tribe-events-l-container {
  padding-bottom: 40px;
}

/* Format the border around the spoiler */
div.su-spoiler {
  border-width: 1px;
  background-color: var(--off-white);
}

div.wp-block-group__inner-container {
  border-top: 1px solid var(--ir-blue);
}

h2.wp-block-heading {
  margin-top: 42px;
}

/* Format buttons on the race calendar filter bar */
.tribe-filter-bar-c-pill__pill-label,
.tribe-events-c-events-bar__filter-button,
.tribe-events-c-events-bar__filter-button-container
  .tribe-events-c-events-bar__search-button {
  color: white;
  font-weight: bold;
}

.tribe-filter-bar,
button.tribe-filter-bar-c-filter__toggle {
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.tribe-filter-bar__selected-filters-label,
.tribe-filter-bar-c-pill__pill-label,
.tribe-filter-bar-c-pill__pill-selections {
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

@media (max-width: 799px) {
  .tribe-filter-bar-c-pill__pill-label,
  .tribe-filter-bar-c-pill__pill-selections {
    color: var(--ir-blue);
  }
}

@media (min-width: 800px) {
  .tribe-filter-bar-c-pill__pill-label,
  .tribe-filter-bar-c-pill__pill-selections {
    color: white;
  }
}

/* Format other buttons on the race calendar filter bar */
div.tribe-events-header__events-bar.tribe-events-c-events-bar
  div.tribe-events-c-events-bar__filter-button-container
  > button
  > span,
div.tribe-events-header__events-bar.tribe-events-c-events-bar
  div.tribe-events-c-events-bar__filter-button-container
  > button
  > svg {
  color: var(--ir-blue) !important;
  font-weight: bold;
}

/* Format other buttons on the race calendar filter bar */
@media (min-width: 800px) {
  #tc-page-wrap
    header
    > div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
    > div.tribe-events-c-events-bar__filter-button-container
    > button {
    padding: 5px 10px;
  }
  #tc-page-wrap
    header
    > div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
    > div.tribe-events-c-events-bar__filter-button-container {
    margin-top: 26px;
  }
}

/* Color notice of past race on the race details page */
.tribe-events-notices {
  color: var(--ir-red);
}

.theme-extra-event-fields,
.tribe-events-calendar-list__event-venue {
  flex-grow: 1; /* Take up remaining space */
  flex-basis: 0; /* Reset initial width to allow flex-grow to work */
  vertical-align: middle;
  line-height: 1.2em;
  padding-right: 10px !important;
}
.tribe-events-calendar-list__event-venue {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

.theme-extra-event-fields {
  display: block !important;
}

.tribe-common.tribe-events.tribe-events-view.tribe-events-view--list
  .tribe-events-calendar-list
  .race-info
  .tribe-events-calendar-list__event-row--featured {
  width: 90px !important;
  flex-grow: 0;
  /* Vertically center "Get Details" button */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center !important;
  margin-right: 10px;
}

header.tc-header {
  border-top-color: white;
  border-bottom-color: white;
}

@media (max-width: 799px) {
  header.tc-header {
    margin-bottom: 10;
  }
}

@media (min-width: 800px) {
  header.tc-header {
    margin-bottom: 165px;
  }
}

#EventStartDate,
#EventStartTime,
#EventURL {
  font-family: 'Chakra Petch', sans-serif;
}

a.post-edit-link {
  background-color: var(--ir-blue);
  color: white !important;
  font-family: 'Chakra Petch', sans-serif;
}
span.edit-link {
  background-color: var(--ir-blue) !important;
  background-image: none !important;
}
a.fpc-btn {
  background-color: var(--ir-blue) !important;
  background-image: none;
  color: white !important;
  font-family: 'Chakra Petch', sans-serif;
}

#tribe-community-events > header > h2 {
  color: var(--ir-red);
}

.tribe-events-c-search__input {
  font-family: 'Chakra Petch', sans-serif;
}

#tribe-events-pg-template
  > div
  > div.tribe-nav.tribe-nav-top
  > div.my-events-display-options.ce-top
  > a.tribe-button.tribe-button-small.tribe-upcoming.tribe-button-secondary {
  color: white;
}

#tc-page-wrap
  > header
  > div.navbar-wrapper.clearfix.span9.tc-submenu-move.tc-open-on-click.pull-menu-center.pull-menu-right
  > div
  > div {
  box-shadow: none;
  background: #fafafa;
}
#tc-page-wrap > header {
  background: #fafafa;
}

#tc-page-wrap {
  background-color: var(--ir-blue);
}

#tc-page-wrap > div > div {
  background-color: white;
}

.tribe-filter-bar-c-clear-button {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: bold;
}

@media (min-width: 800px) {
  button.tribe-filter-bar-c-clear-button {
    color: white;
  }
}

.tribe-filter-bar-c-filter__filters-legend {
  font-family: 'Chakra Petch', sans-serif;
  font-style: normal;
  color: var(--ir-blue);
}

/* Border around club events on race calendar */
.tribe-events-calendar-list__event-row--featured:has(
    div .tribe-events-calendar-list__event-featured-image-wrapper
  ) {
  border: 2px solid var(--ir-red) !important;
}

@media (max-width: 799px) {
  .hideOnSmallScreen.tribe-events-calendar-list__event-featured-image {
    display: none;
  }
}

@media (min-width: 800px) {
  .hideOnLargeScreen.tribe-events-calendar-list__event-featured-image {
    display: none;
  }
}

.title-and-featured-image {
  flex-grow: 1; /* Take up remaining space */
  flex-basis: 0; /* Reset initial width to allow flex-grow to work */
  vertical-align: middle;
  /* Center the title vertically */
  display: flex;
  flex-direction: column;
  justify-content: center !important;
}

.tribe-events-calendar-list__event-featured-image-wrapper {
  display: flex;
  flex-direction: row;
}

.hideOnLargeScreen.container.tribe-events-calendar-list__event-row--featured
  > div.tribe-events-calendar-list__event-featured-image-wrapper.tribe-common-g-col
  > img {
  max-width: 100px;
  max-height: 100px;
}

input[type='checkbox'] {
  accent-color: var(--ir-blue);
}

.tribe-hidden {
  display: none !important;
}

/* Remove the country name from the race details page */
span.tribe-country-name {
  display: none;
}

/* Wrap the web address on the race details page */
dd.tribe-events-event-url > a {
  word-wrap: anywhere;
}

.tribe-filter-bar-c-multiselect__input li[aria-selected='true'] {
  background-color: var(--ir-blue) !important;
}

header
  > div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
  > button {
  color: var(--ir-blue);
}
div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
  > div.tribe-events-c-events-bar__filter-button-container
  > button
  > svg {
  color: white;
}
div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
  > div.tribe-events-c-events-bar__filter-button-container
  > button {
  border-color: white;
}

@media (min-width: 800px) {
  header
    > div.tribe-events-c-top-bar.tribe-events-header__top-bar
    > div.tribe-events-c-top-bar__datepicker
    > button
    > time
    > span.tribe-events-c-top-bar__datepicker-mobile {
    color: var(--ir-blue);
  }

  header
    > div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
    > div.tribe-events-c-events-bar__filter-button-container
    > button {
    border-color: var(--ir-blue);
  }

  header
    > div.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border
    > div.tribe-events-c-events-bar__filter-button-container
    > button
    > svg {
    color: var(--ir-blue);
  }
}

.tribe-events-c-top-bar .tribe-events-header__top-bar {
  margin-top: 100px;
}

@media (max-width: 799px) {
  div.theme-extra-event-fields {
    line-height: 16px;
  }
}

.setBold {
  font-weight: bold;
}

/* Small screen filter titles (City, State/Province, etc.) */
button.tribe-filter-bar-c-filter__toggle {
  color: var(--ir-blue);
}

button.tribe-events-c-events-bar__search-button {
  border-color: var(--ir-blue);
  border-width: 1px;
  background-color: white;
}

img {
  box-shadow: none !important;
  border: none !important;
}

#add-event-help-message,
#venue-bug-message {
  text-align: center;
  color: var(--ir-red);
  font-weight: bold;
  font-size: 22px;
  line-height: 1.15em;
}

@media (max-width: 799px) {
  #add-event-help-message,
  #venue-bug-message {
    margin-left: 5px;
    margin-right: 5px;
  }
}

@media (min-width: 800px) {
  #add-event-help-message,
  #venue-bug-message {
    margin-left: 40px;
    margin-right: 40px;
  }
}

/* Time zone on the add/edit race page */
#tribe-community-events td.tribe-section-content-field > a {
  text-wrap: wrap;
}

/* Set font size to match other H1 elements */
h1.my-events,
h1.tribe-community-events-list-title {
  font-size: 38px !important;
}

.tribe-events-calendar-list__event-title {
  font-size: 24px !important;
  font-family: 'Chakra Petch Bold', sans-serif;
  text-transform: uppercase;
  line-height: 1.15em;
  font-weight: bold !important;
  padding-right: 10px !important;
}

.race-calendar-header {
  background-color: var(--ir-blue);
  color: white;
  padding-left: 90px !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  font-size: 3.5em !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  line-height: 1em;
}

section.tribe-common-l-container.tribe-events-l-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

div.tribe-common.tribe-events.tribe-events-view.tribe-events-view--list {
  margin-top: 0px !important;
}

@media (max-width: 799px) {
  div.race-info {
    display: flex;
    flex-direction: column;
    background-color: var(--ir-blue-6) !important;
  }

  address.tribe-events-calendar-list__event-venue.tribe-common-b2 {
    order: 2;
  }

  div.theme-extra-event-fields.bd-highlight.mb-3.tribe-common-g-col {
    flex-direction: column;
    order: 3;
  }

  /* On the event calendar, format the date range on the top bar */
  div.tribe-common.tribe-events.tribe-events-view.tribe-events-view--list
    section.tribe-common-l-container.tribe-events-l-container
    > header
    > div.tribe-events-c-top-bar.tribe-events-header__top-bar
    > div.tribe-events-c-top-bar__datepicker
    > button
    > time
    > span.tribe-events-c-top-bar__datepicker-mobile {
    color: var(--ir-blue);
  }
}

@media (max-width: 799px) {
  .race-calendar-header {
    font-size: 2em !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-bottom: 25px !important;
  }

  .get-details-button {
    display: block !important;
    margin-left: 20px !important;
    font-size: 14px;
  }
}

@media (max-width: 799px) {
  div.race-info {
    color: var(--ir-blue);
    background-color: var(--off-white) !important;
  }
  .tribe-events-calendar-list__event-venue-title {
    margin-top: 10px !important;
    font-weight: bold;
  }
  .theme-extra-event-fields {
    margin-top: 10px !important;
    font-size: 16px;
  }

  div.tribe-common-g-col {
    background-color: var(--off-white) !important;
    box-shadow: none !important;
  }

  .tribe-events-calendar-list > div.tribe-common-g-col {
    border-style: solid;
    border-width: 1px !important;
  }
}

/* Add padding to the left and right sides of the event calendar */
.tribe-common.tribe-events.tribe-events-view.tribe-events-view--list.tribe-events--has-filter-bar.tribe-events--filter-bar-horizontal.alignwide {
  padding-left: 19.5px;
  padding-right: 19.5px;
}

div.tribe-events-calendar-list > div.tribe-common-g-col {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Race calendar page footer buttons text color */
.before-footer a span {
  color: white;
}

/* Remove extra padding at the bottom of the race calendar */
.tribe-common-l-container.tribe-events-l-container {
  padding-bottom: 20px !important;
}

#tribe-community-events {
  width: initial !important;
  padding: initial !important; /* or padding: 0; */
}

main#tribe-events-pg-template {
  margin: 0 !important;
  max-width: none !important;
}

@media (min-width: 800px) {
  #tribe-community-events > form {
    padding-left: 19.5px !important;
    padding-right: 19.5px !important;
  }
}

/* Race details page */
h2.tribe-events-single-section-title {
  font-size: 40px;
}

dl dt {
  color: var(--ir-blue) !important;
}

@media (max-width: 999px) {
  /* Center the footer in the PHP files. Not sure why this is the solution. */
  .vc_column-inner,
  .before-footer div.row_col_wrap_12.col.span_12.custom.center {
    justify-content: center !important;
  }
  .before-footer div.row_col_wrap_12.col.span_12.custom.center > div {
    margin-left: 5% !important;
  }
}

/* Added so that the text on an individual race web page is not cut
off on the right on a small screen. The bug was only noticeable on an
actual phone (not a shrunk browser on a laptop). */
@media (max-width: 799px) {
  #tribe-events-pg-template {
    margin: 0 5px !important;
  }
}

@media (min-width: 1000px) {
  .footer-mobile-1,
  .footer-mobile-2,
  .footer-mobile-3 {
    display: none !important;
  }
}
@media (max-width: 999px) {
  .footer-desktop-1,
  .footer-desktop-2,
  .footer-desktop-3 {
    display: none !important;
  }
}
@media (min-width: 1000px) {
  #become-a-members-desktop-button {
    width: 100% !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.footer-container a {
  text-decoration: none !important;
}

.footer-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin: 0;
  padding: 0 8%;
}

.footer-column {
  flex: 1 1 20% !important;
  padding: 20px 5px;
  text-align: center;
  border-radius: 5px;
}

.footer-icon-row {
  display: flex !important;
}

.footer-icon-row a.center img {
  width: 30px;
  height: 30px;
}

/* .nectar-global-section.before-footer {
  position: static;
  left: auto;
  right: auto;
  margin: 0px;
  justify-self: center;
  width: 336px !important;
} */

.get-details-button:not(:hover),
div.tribe-filter-bar__filters-slide.tribe-swiper-slide:not(:hover),
a.add-new:not(:hover),
a.tribe-upcoming:not(:hover),
a.tribe-past:not(:hover),
span.view:not(:hover),
span.edit:not(:hover),
span.delete:not(:hover) {
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    transform 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    border-color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    background-color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    box-shadow 0.45s cubic-bezier(0.25, 1, 0.33, 1);
}

/* For some reason, for span.view:hover, span.edit:hover, and span.delete:hover,
the hover effect of "-webkit-transform: translateY(-3px); transform: translateY(-3px);" is not being applied below. AI suggests that before hovering 
the position is errantly set to static, but I couldn't figure out how to change that as the attempt below doesn't seem to do anything. */
span.view:not(:hover),
span.edit:not(:hover),
span.delete:not(:hover) {
  position: relative !important;
}

.get-details-button:hover,
div.tribe-filter-bar__filters-slide.tribe-swiper-slide:hover,
a.add-new:hover,
a.tribe-upcoming:hover,
a.tribe-past:hover,
span.view:hover,
span.edit:hover,
span.delete:hover {
  opacity: 0.87;
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    transform 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    border-color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    background-color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    box-shadow 0.45s cubic-bezier(0.25, 1, 0.33, 1);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

/* span.view:hover,
span.edit:hover,
span.delete:hover {
  -webkit-transform: translateY(0) !important;
  transform: translateY(10px) !important;
} */

/* span.tribe-filter-bar-c-pill__pill-label:hover {
  -webkit-font-smoothing: antialiased;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  box-sizing: border-box;
  font-size: 12px;
  position: relative;
  top: 0;
  line-height: 20px;
  display: inline-block;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: bold !important;
  background-color: var(--ir-blue);
  border: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0.87;
  color: #fff;
  text-transform: uppercase !important;
  padding: 11px 20px;
  -webkit-border-radius: 1px !important;
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    transform 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    border-color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    background-color 0.45s cubic-bezier(0.25, 1, 0.33, 1),
    box-shadow 0.45s cubic-bezier(0.25, 1, 0.33, 1);
  width: auto;
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16) !important;
  -webkit-transform: translateY(-3px);
  flex: none;
  margin-top: 0;
} */

abbr.tribe-events-start-date,
abbr.tribe-events-abbr {
  text-decoration: none;
}