/*
    - Name: "upcoming_events.scss"
    - Description: "Add custom styles to Upcoming events component"
*/
.component-upcoming-events .upcoming-events-title {
  padding-bottom: var(--spacingMd);
}

.component-upcoming-events .upcoming-events-contain {
  position: relative;
}

.component-upcoming-events .upcoming-events-contain .dateEvents {
  display: block;
  font-family: var(--desktopH3BoldFontFamily), sans-serif;
  font-size: var(--mobileH3BoldFontSize);
  font-weight: var(--desktopH3BoldFontWeight);
  line-height: var(--mobileH3BoldLineHeight);
  text-align: center;
  padding: 0 var(--spacing3xl) var(--spacingMd);
  border-bottom: 1px solid var(--colorGreys500);
  text-transform: capitalize;
}

@media all and (min-width: 36rem) {
  .component-upcoming-events .upcoming-events-contain .dateEvents {
    font-size: var(--desktopH3BoldFontSize);
    line-height: var(--desktopH3BoldLineHeight);
  }
}
@media all and (min-width: 50.0625rem) {
  .component-upcoming-events .upcoming-events-contain .dateEvents {
    text-align: left;
    padding: 0 0 var(--spacingMd);
  }
}
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-exposed-form .form-item {
  display: none;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-exposed-form #upcoming-events-day-controls {
  display: flex;
  justify-content: space-between;
  gap: var(--spacingXs);
  position: absolute;
  top: -10px;
  right: 0;
  width: 100%;
}

@media all and (min-width: 50.0625rem) {
  .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-exposed-form #upcoming-events-day-controls {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-exposed-form #upcoming-events-day-controls button {
  width: var(--size2xl);
  height: var(--size2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid var(--colorBlack);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-exposed-form #upcoming-events-day-controls button:hover {
  cursor: pointer;
  background: var(--colorGreys100);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-exposed-form #upcoming-events-day-controls button svg {
  color: var(--colorBlack);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row {
  padding: var(--spacingSm);
  border-bottom: 1px solid var(--colorGreys500);
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  position: relative;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row:hover {
  border-bottom: 2px solid var(--textInputBorderColor);
}

@media all and (min-width: 50.0625rem) {
  .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row {
    grid-template-columns: 80% auto;
  }
}
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field .field-content {
  font-family: var(--baseDefaultFontFamily), sans-serif;
  font-size: var(--baseDefaultFontSize);
  font-weight: var(--baseDefaultFontWeight);
  line-height: var(--baseDefaultLineHeight);
  text-align: left;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-title {
  grid-area: 1/1/2/2;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-title a {
  font-family: var(--mobileH4BoldFontFamily), sans-serif;
  font-size: var(--mobileH4BoldFontSize);
  font-weight: var(--mobileH4BoldFontWeight);
  line-height: var(--mobileH4BoldLineHeight);
  text-align: left;
  text-decoration: none;
  color: var(--colorBlack);
}

@media all and (min-width: 36rem) {
  .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-title a {
    font-size: var(--desktopH4BoldFontSize);
    line-height: var(--desktopH4BoldLineHeight);
  }
}
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-title a:hover {
  text-decoration: underline;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-nothing {
  grid-area: 2/1/3/2;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-nothing .field-content {
  display: flex;
  align-items: baseline;
  gap: var(--spacing2xs);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image, .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image-context {
  grid-area: 1/2/3/3;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image .field--name-field-media-image, .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image-context .field--name-field-media-image {
  display: flex;
  justify-content: flex-end;
  margin-left: var(--spacingLg);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image .field--name-field-media-image img, .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image-context .field--name-field-media-image img {
  max-width: 80px;
  width: 100%;
  height: auto;
}

@media all and (min-width: 36rem) {
  .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image .field--name-field-media-image img, .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .views-row .views-field-media-image-context .field--name-field-media-image img {
    max-width: 134px;
  }
}
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .not-values {
  padding: 1rem;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager {
  padding: var(--spacingMd) 0 0;
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacingXs);
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

@media all and (min-width: 50.0625rem) {
  .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items {
    justify-content: flex-start;
  }
}
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous a, .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous.disabled span,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next a,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next.disabled span {
  width: var(--size2xl);
  height: var(--size2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid var(--colorBlack);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous a svg, .component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous.disabled span svg,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next a svg,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next.disabled span svg {
  color: var(--colorBlack);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous:not(.disabled) a:hover,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next:not(.disabled) a:hover {
  cursor: pointer;
  background: var(--colorGreys100);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous.disabled span,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next.disabled span {
  border-color: var(--colorGreys400);
}

.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--previous.disabled span svg,
.component-upcoming-events .upcoming-events-contain .upcoming-events-container .view-upcoming-events .pager .js-pager__items .pager__item--next.disabled span svg {
  color: var(--colorGreys400);
}

.component-upcoming-events .upcoming-events-footer {
  display: flex;
  justify-content: center;
  margin: var(--spacingLg) 0;
}

.component-upcoming-events .upcoming-events-footer form {
  width: 100%;
  display: flex;
  justify-content: center;
}

.component-upcoming-events .upcoming-events-footer form button {
  width: 100%;
}

@media all and (min-width: 50.0625rem) {
  .component-upcoming-events .upcoming-events-footer form button {
    width: auto;
  }
}