/*original bootstrap4 variable definitions */
/**
 * css for calendar frontend output
 * Addon: /specific/cal_frontend.css
*/
.today {
  background: transparent url(../cssbg/heute.jpg) no-repeat scroll right bottom;
}

/*
//event hor 4 default (mobile first style)untereinander

.event-hor-4-wrapper {
	padding: 0;
	margin: 0 15px
}

.event-hor-4 .event-item {
	padding: 5px;
	float: none;
	clear: both;
	width: 100%;
	border: $calendar-common-border;
	border-top-width: 0;
	margin: 0
}

.event-hor-4 .event-item:first-child {
	border-top-width: 1px;
}



//event hor-4 ab 368px 2x2


@media (min-width:368px) {

	.event-hor-4-wrapper {
		width: 100% !important;
		overflow-x: hidden;
		margin: 0;
		padding: 0
	}

	.event-hor-4 {
		padding: 0;
		margin: 0;
		list-style: none;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		justify-content: space-around
	}

	.event-hor-4 .event-item {
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		box-sizing: border-box;
		//use less than 50%, because ie11 makes troubles!
		flex-basis: 35%;
		overflow: hidden;
		border: 1px solid #ccc;
		border-bottom-width: 1px;
		border-left-width: 1px;
		border-top-width: 0;
		border-right-width: 0;

	}

	.event-hor-4 .event-item:nth-child(2n),
	.event-hor-4 .event-item:last-child {
		border-right-width: 1px;
	}

	.event-hor-4 .event-item:nth-child(1),
	.event-hor-4 .event-item:nth-child(2) {
		border-top-width: 1px;
	}


	.lt-ie9 .event-hor-4 .event-item {
		border-right-width: 1px;
		//border: 1px solid silver !important;
	}


}


//event hor-4 ab 768px 1x4
@include media-breakpoint-between(sm, md) {


	.event-hor-4 {
		justify-content: flex-start;

		h3 {
			text-overflow: ellipsis;
		}

		.event-item {
			max-width: 50% !important;
		}
	}
}

@include media-breakpoint-up(md) {


	.event-hor-4 {
		justify-content: flex-start;

		.event-item {
			flex-basis: 0;
			border-top-width: 1px;
			max-width: 25% !important;
		}

		.event-item:nth-child(2n) {
			border-right-width: 0px;
		}

		.event-item:last-child {
			border-right-width: 1px;
		}

	}

	// IE < 9 
	.lt-ie9 {
		.event-hor-4-wrapper {
			border-collapse: collapse !important;
			border-spacing: 0;
			padding: 0;
			margin: 0;
			display: table;
			table-layout: fixed;
			width: 100% !important;
			overflow-x: hidden
		}

		.event-hor-4 .event-item {
			float: none;
			display: table-cell;
			overflow: hidden;
			border: 1px solid silver !important;
			margin: 0;
			width: 24.99%;

		}

		.event-hor-4 {
			display: table-row;
			margin: 0
		}
	}

}

.event-day {
	font-size: 25px;
	font-weight: 700
}

.event-month {
	font-size: 15px;
	font-weight: 700
}

.event-time {
	font-size: 25px;
	font-weight: 700;
	float: right
}

.event-title {
	vertical-align: top;
	min-height: 80px;
	word-wrap: break-word
}


*/
.event-grid {
  --grid-columns: 2;
  margin: 1em 2px;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-column-gap: 1px;
  grid-auto-rows: 1fr;
  grid-row-gap: 1px;
}
.event-grid .event-item {
  outline: 1px solid silver;
  padding: 0.5em;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .event-grid {
    --grid-columns: 3;
  }
}
@media (min-width: 992px) {
  .event-grid {
    --grid-columns: 6;
  }
}

table.calendar {
  border-collapse: collapse;
  font-size: 0.8em;
  width: 100%;
  max-width: 200px;
}

table.calendar a,
table.calendar a:hover {
  text-decoration: none;
}

table.calendar td {
  height: 17px;
  text-align: right;
  padding: 0px 2px 0px 0px;
}

table.calendar td.calendarMonth {
  text-align: center;
  padding: 0;
}

table.calendar td.calendarWeek,
table.calendar td.calendarWeekNoTitle {
  font-weight: 700;
  color: #dee2e6;
  text-align: left;
  padding-left: 0px;
}

table.calendar td.calendarDayName {
  font-weight: 700;
  color: #dee2e6;
  text-align: left;
  text-align: center;
  padding: 0;
}

table.calendar td.activeday {
  border: 1px solid #dee2e6 !important;
}

td.activeday a {
  background-color: inherit;
  color: #ad0000 !important;
}

td.activeday:hover {
  background-color: #eee;
}

table.calendar .calendarlink {
  font-weight: 700;
  position: relative;
  display: block;
  width: 100%;
}

table.calendar .calendarPrev a {
  float: left;
  display: inline-block;
  min-width: 1.5rem;
  border: 1px solid #dee2e6;
}

table.calendar .calendarNext a {
  float: right;
  display: inline-block;
  min-width: 1.5rem;
  border: 1px solid #dee2e6;
}

table.calendar .calendarPrev a:hover,
table.calendar .calendarNext a:hover {
  text-decoration: none;
  background: #eee;
}

.activeday .popover {
  min-width: 300px;
}

.activeday .popover-title {
  color: #222;
  font-weight: 700;
}

.ajaxevent {
  color: #000;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.ajaxevent:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}

.calTitle {
  text-transform: uppercase;
  color: #ad0000;
}

.calTime {
  font-weight: 600;
}

.calLocation {
  font-weight: 600;
}

.calDescription {
  font-size: 0.8em;
}

/* eventtabellenausgabe auf kalenderseite */
.table-calendar-next-events .table-calendar-month > h2 {
  text-align: center;
  background: #eee;
  margin: 0;
  padding: 0.2em 0;
  border-bottom: 1px solid #ccc;
}
.table-calendar-next-events .calendar-date {
  text-align: center;
  vertical-align: top;
  min-width: 75px;
  width: 75px;
  float: left;
}
.table-calendar-next-events .event-item {
  margin-left: 75px;
  border-left: 1px solid #ccc;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.table-calendar-next-events .event-item:last-child {
  border-bottom: 0px solid #ccc;
}
.table-calendar-next-events .calendar-weekday,
.table-calendar-next-events .calendar-month {
  display: block;
  font-size: 0.8em;
}
.table-calendar-next-events .calendar-weeknumber {
  font-size: 1.5em;
  font-weight: 700;
  color: #ccc;
  border-bottom: 1px solid #ccc;
}
.table-calendar-next-events .table-calendar-day {
  border-bottom: 1px solid #ccc;
}
.table-calendar-next-events .calendar-day {
  font-size: 2.5em;
  display: block;
  font-weight: bold;
}
.table-calendar-next-events .event-time {
  font-size: 25px;
  font-weight: 700;
  float: left;
  margin-bottom: 10px;
}
.table-calendar-next-events .event-location {
  display: block;
  margin-bottom: 10px;
  margin-left: 90px;
  font-weight: 600;
}
.table-calendar-next-events .event-title {
  clear: both;
  min-height: 0px;
}
.table-calendar-next-events .event-item-inner {
  float: left;
}

/*min 992*/
@media (min-width: 768px) {
  /*der minikalender mit popovers*/
  table.calendar {
    font-size: 1em;
    max-width: 100%;
  }
  table.calendar td {
    height: 25px;
    padding: 0px 8px 0px 0px;
  }
  table.calendar .calendarPrev a {
    min-width: 40px;
  }
  table.calendar .calendarNext a {
    min-width: 40px;
  }
}