/*****************  calendar ****************/
.eventCalendar td {
  vertical-align: top;
}
.calendar .beforeToday {
  background: #f0f0f0;
}
.calendar h1 {
  text-align: center;
  margin-bottom: 16px;
}
.calendar .openHourName {
  font-size: 12px;
  font-weight: bold;
}
.calendar .openHourTime,
.calendar .exceptionTime {
  font-size: 12px;
}
.topNav .openHoursMessage {
  line-height: 40px;
  float: left;
}
.topNav .openHoursMore {
  float: left;
  text-decoration: underline;
  font-weight: bold;
  font-size: 12px;
  line-height: 40px;
}
/*.topNav .openHoursText{
	margin:0;
	padding:0;
}*/
.topNav .openHoursMessage {
  line-height: 40px;
  float: left;
  font-size: 13px;
}
.openHours .openHoursMessage {
  display: inline-block;
}
.openHoursMessage span {
  padding-right: 3px;
}
.openHours .openHoursMessage span {
  float: left;
}
.openHours .openHoursMessage {
  margin: 8px 0 16px 0;
}
.calNav {
  display: grid;
  justify-items: center;
  text-align: center;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas: ". . calPrev calCurrent calNext  . .";
}
.calNav .calPrev {
  grid-area: calPrev;
  font-size: 1.5em;
}
.calNav .calCurrent {
  grid-area: calCurrent;
  align-self: center;
}
.calNav .calNext {
  grid-area: calNext;
  font-size: 1.5em;
}
.calTable,
.eventTags,
.ticketInfo {
  margin-bottom: 24px;
}
.calDay {
  padding: 0;
  overflow: hidden;
}
.calDay .cellDay {
  padding: 5px;
}
.calDay .cellRow {
  display: grid;
  grid-template-columns: 50px 1fr;
  padding: 0 5px;
  width: 100%;
  gap: 5px;
  align-items: center;
}
.calDay .cellRow .eventTitle {
  font-size: 0.8em;
}
.eventList .eventRow {
  display: grid;
  grid-gap: 12px;
  padding: 0 12px;
  min-height: 55px;
  grid-template-columns: 60px 90px 90px 1fr 1fr 1fr 160px;
  grid-template-areas: "eventDate eventDay eventTime eventTitle eventPlace eventPartner eventDetails";
  align-items: center;
}
.eventList .eventRow .eventDateRange {
  grid-area: 1/1/2/4;
  font-weight: bold;
}
.eventList .eventRow .eventDate {
  grid-area: eventDate;
  font-weight: bold;
}
.eventList .eventRow .eventDay {
  grid-area: eventDay;
  font-size: 16px;
}
.eventList .eventRow .eventTime {
  grid-area: eventTime;
  font-weight: bold;
  align-self: center;
}
.eventList .eventRow .eventTitle {
  grid-area: eventTitle;
}
.eventList .eventRow .eventPlace {
  grid-area: eventPlace;
}
.eventList .eventRow .eventPartner {
  grid-area: eventPartner;
}
.eventList .eventRow .eventDetails {
  grid-area: eventDetails;
  justify-self: right;
}
.eventDetails .calNav {
  margin-bottom: 24px;
}
.eventDetails .ticketInfo {
  align-items: center;
}
.eventDetails .ticketInfo .ticketInfoText {
  line-height: 1.5;
  font-size: 1.5em;
  font-weight: bold;
}
.eventDetails .ticketInfo .ticketUrl {
  justify-self: right;
}
@media (min-width: 1024px) {
  .eventCalendar .mobileVisible {
    display: none;
  }
  .eventList .eventRow .eventDate {
    font-size: 2em;
  }
  .eventList .eventRow .eventTime {
    font-size: 1.5em;
  }
}
@media (max-width: 1024px) {
  .calNav {
    grid-template-areas: " . calPrev calCurrent calCurrent calCurrent calNext .";
  }
  .eventList .eventRow {
    row-gap: 6px;
    grid-template-columns: minmax(60px, auto) 85px 65px 1fr auto;
    grid-template-areas: "eventDate eventDay eventTime eventPlace eventPlace" ". eventTitle eventTitle eventTitle eventTitle" ". eventPartner eventPartner eventPartner eventDetails";
  }
  .eventList .eventRow .eventDetails {
    justify-self: end;
  }
  .eventCalendar .desktopVisible {
    display: none;
  }
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
  .eventList .eventRow {
    padding: 12px;
    grid-template-columns: minmax(60px, auto) 85px 1fr;
    grid-template-areas: "eventDate eventDay eventTime " "eventPlace eventPlace eventPlace" "eventTitle eventTitle eventTitle" "eventPartner eventPartner eventPartner" "eventDetails eventDetails eventDetails";
  }
  .calNav {
    grid-template-areas: "calPrev calCurrent calCurrent calCurrent calCurrent calCurrent calNext ";
  }
}