/* styles to support template of calendar doctype and the vue components */

@keyframes calendarDataChange {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.8;
  }
}
.calendar-container .desktop-only {
  display: block;
  visibility: visible;
}
.calendar-container .mobile-only {
  display: none;
  visibility: hidden;
}
@media (max-width: 768px) {
  .calendar-container .desktop-only {
    display: none;
    visibility: hidden;
  }
  .calendar-container .mobile-only {
    display: block;
    visibility: visible;
  }
}
.calendar-container .btn {
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.calendar-container .btn:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.cal-title {
  margin-top: 64px;
  text-align: center;
}

.calendar-container {
  width: calc(100% - 2rem);
  margin: 0 auto;
}
.calendar-container .row {
  margin-left: 0;
  margin-right: 0;
}
.calendar-container .list-unstyled {
  list-style: none;
}
.calendar-container .date-navigator {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  color: #385D70;
  text-align: center;
  padding: 0 0 32px 0;
}
.calendar-container .date-navigator:hover {
  color: #11476d;
}
.calendar-container .date-navigator .row.text-center.mt-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
}
.calendar-container .date-navigator .date-navigator {
  flex-direction: row;
}
.calendar-container .parkops-list {
    width: 100%;
    flex-direction: row;
    display: flex;
    justify-content: center;
    gap: 64px;
    margin-top: 32px;

    h6 {
        font-weight: 600;
    }
}
.calendar-container .sort-and-filter {
  display: none;
  visibility: hidden;
}
.calendar-container h3 .date-header {
  color: #385D70;
  text-align: center;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .calendar-container h3 .date-header {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}
.calendar-container .daily-schedule-header {
  border-top: 1px solid #D1D5DB;
  border-bottom: 1px solid #D1D5DB;
  padding: 0.5rem;
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;

    .nav-list-by {
        display: flex;
        gap: 32px;
    }

    .nav-return-month a {
        color: var(--color_driftwood);
        text-decoration: none;
        font-weight: 600;
    }

    .nav-return-month a:hover {
        text-decoration: underline;
    }
}
@media (max-width: 768px) {
  .calendar-container .daily-schedule-header {
    flex-direction: column;
  }
  .calendar-container .daily-schedule-header .col-md-6 {
    width: 100%;
  }
  .calendar-container .daily-schedule-header .text-left {
    text-align: center !important;
  }
}
.calendar-container .cal-day {
  border: solid 0.5px #D1D5DB;
  height: auto;
  min-height: 200px;
  width: 14.2857142857%;
  padding: 0.25rem;
  float: left;
  font-size: 0.75rem;
  line-height: 1.5;
  position: relative;
}
@media (max-width: 1440px) {
  .calendar-container .cal-day {
    min-height: 220px;
  }
}
@media (max-width: 992px) {
  .calendar-container .cal-day {
    min-height: 260px;
  }
}
@media (max-width: 768px) {
  .calendar-container .cal-day {
    width: 100%;
  }
}
.calendar-container .cal-day.prev-day {
  background-color: #E5E7EB;
}
@media (max-width: 768px) {
  .calendar-container .cal-day.prev-day {
    display: none !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
}
.calendar-container .cal-day.prev-day .purchase-container {
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}
.calendar-container .cal-day.next-day {
  background-color: #E5E7EB;
}
@media (max-width: 768px) {
  .calendar-container .cal-day.future-month.future-day {
    display: none !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
}

.calendar-container .hours-container {
    .mb-1 {
        margin-bottom: 12px;
    }

    .text-muted {
        opacity: 0.75;
    }
}
.calendar-container .cal-day .hours-container .day-park {
  font-size: 0.75rem;
}
.calendar-container .cal-day .hours-container .day-hours {
  font-size: 0.75rem;
}
.calendar-container .cal-day .hours-container span {
  font-size: 0.75rem;
}
.calendar-container .cal-day .hours-container a {
  font-size: 0.75rem;
  font-weight: 700;
}
.calendar-container .cal-day .hours-container a i {
  font-size: 0.75rem;
  font-weight: 700;
}
.calendar-container .cal-day .featured-container {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.calendar-container .cal-day .featured {
  background-color: #b95537;
  color: #FFFFFF;
  margin: 0 -4px;
  padding: 0 0.25rem;
  width: 100%;
}
.calendar-container .cal-day .featured a {
  color: #FFFFFF !important;
  font-size: 0.67rem;
  line-height: 1;
}
.calendar-container .cal-day .darkText a {
  color: #4B5563 !important;
}
.calendar-container #times-list + .row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.calendar-container .activity-list, .calendar-container .activity-detail {
  width: 49%;
}
@media (max-width: 768px) {
  .calendar-container #times-list + .row {
    flex-direction: column;
  }
  .calendar-container .activity-list, .calendar-container .activity-detail {
    width: 100%;
  }
}
.calendar-container .activity-detail .activityMetaLabel {
  text-transform: uppercase;
  font-weight: 400;
}
.calendar-container .activity-detail .img-max {
  width: 100%;
  height: auto;
  max-width: 600px;
  margin-bottom: 16px;
}
.calendar-container .activity-detail .activityAdditionalInfo {
  font-weight: 700;
}
.calendar-container .activity-detail .showtimes {
  border-top: solid 1px #4B5563;
  border-bottom: solid 1px #4B5563;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}
.calendar-container .activity-detail a {
    text-transform: uppercase;
    outline: 0px;
    cursor: pointer;
    padding-bottom: 8px;
    margin-top: 24px;
    color: var(--color_black);
    text-decoration: none;
    font: var(--font_navigation_medium);
    letter-spacing: 0.5px;
    line-height: 1;
    transition: color 0.3s;
    gap: 10px;
    align-items: center;
    display: flex;
    width: fit-content;
    position: relative;
}
.calendar-container a:not([href]) {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.calendar-container .activity-detail .mt-5.mobile-only a {
  padding: 32px !important;
}
.calendar-container .activity-list .activity {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: solid 1px #D1D5DB;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;

  .col-md-8 {
    width: 75%;
  }
  .col-md-3 {
    width: 20%;
  }
  .col-md-1 {
    width: 5%;
  }
}
@media (max-width: 768px) {
  .calendar-container .activity-list .activity {
    flex-direction: column;

    .col-md-8 {
      width: 100%;
      text-align: center;
    }
    .col-md-3 {
      width: 100%;
      text-align: center;
    }
    .col-md-1 {
      width: 100%;
      text-align: center;
    }
  }

}
.calendar-container .activity-list .activity .activityMetaLabel {
  text-transform: uppercase;
  font-weight: 400;
}
.calendar-container .activity-list .events-banner-featured {
  background-color: #b95537;
  color: #fff;
  text-transform: uppercase;
  padding: 0.25rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  letter-spacing: 1.5;
  font-weight: 700;
}
.calendar-container .activity-list .events-banner-all {
  background-color: #385D70;
  color: #FFFFFF;
  text-transform: uppercase;
  padding: 0.25rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  letter-spacing: 1.5;
  font-weight: 700;
}
.calendar-container .nav-list-by .list-by-item .active {
  padding: 0.5rem 0;
  color: #374151;
  border-bottom: 3px solid #DC2626;
}
.calendar-container .nav-list-by .list-by-item a {
  color: #374151;
  padding: 0.5rem 0;
  text-decoration: none !important;
}
.calendar-container .nav-list-by .list-by-item a:hover {
  color: #374151;
  border-bottom: 3px solid #DC2626;
  text-decoration: none !important;
}
@media (max-width: 768px) {
  .calendar-container .nav-list-by.text-left {
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  .calendar-container .nav-return-month.text-right {
    text-align: center !important;
  }
}
.calendar-container .loading {
  animation: calendarDataChange 2s infinite;
}
@media (max-width: 768px) {
  .calendar-container .calnav-center {
    width: 67%;
  }
}
@media (max-width: 768px) {
  .calendar-container .calnav-left {
    width: 15%;
  }
}
@media (max-width: 768px) {
  .calendar-container .calnav-right {
    width: 15%;
  }
}

.opsinfo-list .col {
  border-bottom: 1px solid #4B5563;
  padding: 0;
}
.opsinfo-list div, .opsinfo-list span {
  color: #4B5563;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.opsinfo-list div {
  padding-bottom: 1rem;
}
.opsinfo-list h6 {
  padding: 0.5rem;
  background-color: #4B5563;
  color: #fff;
  text-transform: uppercase;
}

.cal-week-legend-row {
  padding: 0.5rem 0;
  border-top: 1px solid #D1D5DB;
  border-bottom: 1px solid #D1D5DB;
}
@media (max-width: 768px) {

    .cal-week-legend-row {
        display: none;
        visibility: hidden;
    }
}
.cal-week-legend-cell {
  width: 14.2857142857%;
  font-size: 0.75rem !important;
  letter-spacing: 1.5px;
  text-align: center;
  text-transform: uppercase;
  color: #4B5563;
  font-weight: 700;
  display: inline-block !important;
  visibility: visible !important;
}

/* for hiding classes for the calendar subapp
----------------------------------------------- */
body:not(.calendar-daily):not(.calendar-monthly) .hidden-calendar-daily,
body:not(.calendar-daily):not(.calendar-monthly) .hidden-calendar-monthly {
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

body.calendar-daily .hidden-calendar-daily, body.calendar-daily .cal-month-bottom-grid {
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

body.calendar-monthly .hidden-calendar-monthly, body.calendar-monthly .cal-daily-bottom-grid {
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}