
nav.navbar-event-list {
	margin: 0 -15px 15px -15px;
	min-height: unset;
	border-left: unset;
    border-right: unset;
    border-radius: unset;
}

nav.navbar-event-list .navbar-nav>li>a {
	margin: 10px 5px;
	padding: 5px 15px;
	text-shadow: unset
}

nav.navbar-event-list .navbar-nav>li>a.btn-primary:focus,
nav.navbar-event-list .navbar-nav>li>a.btn-default:focus,
nav.navbar-event-list .navbar-nav>li>a.btn-primary:hover,
nav.navbar-event-list .navbar-nav>li>a.btn-default:hover {
	background-position: unset
}

nav.navbar-event-list .navbar-nav>li>a.btn-primary {
	color: #fff
}

nav.navbar-event-list .navbar-nav>li>a.btn-primary:hover {
	background-color: #337ab7
}

nav.navbar-event-list .navbar-nav>li>a.btn-default {
	color: #333
}

nav.navbar-event-list .navbar-nav>li>a.btn-default:hover {
	background-color: #e0e0e0
}


/* Filtering */

.event-filters {
    display: flex;
    flex-flow: row wrap;
    column-gap: 15px;
    row-gap: 15px;
    margin-bottom: 15px;
}

.event-filters .filter-control,
.event-filters .search {
    flex: 1 1;
}

@media (max-width: 991px) {
    .event-filters {
        flex-flow: column wrap;
    }

    #event-search {
        order: 1;
    }

    #filter-type {
        order: 2;
    }

	#filter-category {
        order: 3;
    }

    #filter-date {
        order: 4;
    }

    #filter-start {
        order: 5;
    }

    #filter-orderby {
        order: 6;
    }

    #filter-location {
        order: 7;
    }

    #filter-reset {
        order: 8;
    }
}


#event-list-container {
	position: relative;
	margin-bottom: 1rem;
}

#event-list {
	padding: 0;
}

#event-list .header > div {
	flex: 1 1 auto;
	padding: 0.5rem;
	font-weight: bold;
}

#event-list .card {
	margin-bottom: 1rem;
	cursor: pointer;
    box-shadow: 1px 1px 0px 0px var(--bs-secondary), 2px 2px 0px 0px var(--bs-secondary), 3px 3px 0px 0px var(--bs-secondary), 4px 4px 0px 0px var(--bs-secondary);
}

#event-list .card .card-heading {
	margin: 0;
	padding: 0.5rem;
	border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

#event-list .card .card-body {
	padding: 0;
}

#event-list .card-body .row {
	margin: 0;
}

#event-list .card-body .row > div {
	padding: 0.5rem;
}

@media (min-width: 992px) {
	#event-list .body .card {
		margin-bottom: 0;
		border: none !important;
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        border-radius: 0;
		box-shadow: none;
	}
}

#event-list .card a,
#event-list .card a:active,
#event-list .card a:hover,
#event-list .card a:visited {
	color: var(--bs-secondary);
}


/* Table Columns - Medium */
@media (min-width: 992px) {
	.col-name { width: 50%; }
    .col-start { width: 15%; }
    .col-type { width: 10% }
    .col-category { width: 10% }
    .col-location { width: 15% }
}

/* Table Columns - Large+ */
@media (min-width: 1200px) {
	.col-name { width: 40%; }
    .col-start { width: 15%; }
    .col-type { width: 15% }
    .col-category { width: 15% }
    .col-location { width: 15% }
}


.table-event-item-list,
.table-event-item-list tr.event-item,
.table-event-item-list tr.event-item-detail {
    border: 1px solid #666;
}

.table-event-item-list tr.event-item > td,
.table-event-item-list tr.event-item-detail > td {
    border-top: 1px solid #666;
}

.table-event-item-list tbody tr.event-item {
    background-image: -webkit-linear-gradient(top,#f5f5f5 0,#ddd 100%);
    background-image: -o-linear-gradient(top,#f5f5f5 0,#ddd 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#ddd));
    background-image: linear-gradient(to bottom,#f5f5f5 0,#ddd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffdddddd', GradientType=0);
    background-repeat: repeat-x;
}

.table-event-item-list tbody tr.event-item.open {
    background-image: -webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -o-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));
    background-image: linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
    background-repeat: repeat-x;
    color: #fff;
}

.table-event-item-list tbody td {
    cursor: pointer;
}

.table-event-item-list .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.table-event-item-list .heading {
    font-size: 1.75rem;
    font-weight: bold;
}

.table-event-item-list .photo {
    flex: 0 0 auto;
    width: 160px;
    padding-left: 1rem;
}

.table-event-item-list .col {
    flex: 1 0 0%;
    width: 100%;
    max-width: 100%;
    padding: 0.25rem 1rem;
}

.table-event-item-list .col-60 {
    flex: 0 0 auto;
    width: 60%;
}

.table-event-item-list .col-40 {
    flex: 0 0 auto;
    width: 40%;
    text-align: right;
}

.table-event-item-list .indicator {
    position: absolute;
    display: flex;
    right: 0;
    margin-right: 2.5rem;
    align-self: flex-end;
}

.table-event-item-list tbody tr.event-item.open .photo,
.table-event-item-list tbody tr.event-item.open .extra,
.table-event-item-list tbody tr.event-item.open .indicator {
        display: none;
}

@media (max-width: 767px) {
    .table-event-item-list .photo {
        display: none;
    }
}


/* Pagination */

.event-pagination {
    display: flex;
    flex-flow: row wrap;
    column-gap: 15px;
    row-gap: 15px;
    justify-content: flex-start;
	margin-bottom: 1rem;
}

.event-pagination ul.pagination {
    margin: 0;
}

#filter-per-page {
    max-width: 240px;
}



.panel.panel-dark {
	border-color: #222
}

.panel.panel-dark>.panel-heading {
	color: #fff;
	background-color: #222;
	border-color: #222;
	font-size: 24px;
	display: flex;
	flex-wrap: wrap
}

.panel.panel-dark>.panel-heading span {
	flex-grow: 1;
	width: 33%
}

.panel.panel-dark>.panel-heading .break {
	flex-basis: 100%;
	height: 0
}

@media (max-width:767px) {
	.panel.panel-dark>.panel-heading span.text-left {
		width: 100%;
		text-align: center !important
	}

	.panel.panel-dark>.panel-heading span.text-center {
		text-align: left !important
	}
}

@media (min-width:768px) {
	.panel.panel-dark>.panel-heading .break {
		display: none
	}
}

.panel.panel-dark>.panel-heading+.panel-collapse>.panel-body {
	border-top-color: #222
}

.panel.panel-dark>.panel-heading .badge {
	color: #222;
	background-color: #fff
}

.panel.panel-dark>.panel-footer+.panel-collapse>.panel-body {
	border-bottom-color: #222
}

.event-loader {
	min-height: 50vmin;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	overflow: hidden;
	z-index: 1001;
}

.event-loader__inner {
	font-size: 10px;
	margin: 50px auto;
	text-indent: -9999em;
	width: 11em;
	height: 11em;
	border-radius: 50%;
	background: #000;
	background: -moz-linear-gradient(left, #000 10%, rgba(0, 0, 0, 0) 42%);
	background: -webkit-linear-gradient(left, #000 10%, rgba(0, 0, 0, 0) 42%);
	background: -o-linear-gradient(left, #000 10%, rgba(0, 0, 0, 0) 42%);
	background: -ms-linear-gradient(left, #000 10%, rgba(0, 0, 0, 0) 42%);
	background: linear-gradient(to right, #000 10%, rgba(0, 0, 0, 0) 42%);
	position: relative;
	-webkit-animation: event-loader 1s infinite linear;
	animation: event-loader 1s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0)
}

.event-loader__inner:before {
	width: 50%;
	height: 50%;
	background: #000;
	border-radius: 100% 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	content: ''
}

.event-loader__inner:after {
	background: #fff;
	width: 75%;
	height: 75%;
	border-radius: 50%;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0
}

@-webkit-keyframes event-loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes event-loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
