.mgc-event-list .event-list__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}

.mgc-event-list.grid .event-list__filters ~ .event-list__content {
    margin-top: 1em;
}

.mgc-event-list .card {
    box-shadow: 0.25rem 0.25rem 1rem #666;
}

.mgc-event-list a.event-panel__toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.mgc-event-list .event-panel__image {
	position: relative;
}

.mgc-event-list .event-panel__status {
	position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem;
    background-color: #5cb85c;
    color: #fff;
    border-left: 1px solid #4cae4c;
    border-bottom: 1px solid #4cae4c;
    border-bottom-left-radius: .75rem;
}

.mgc-event-list .event-panel__status svg {
    margin-top: -0.25rem;
}

.mgc-event-list .event-panel__title h3 {
    margin-top: 1rem;
}

.mgc-event-list.grid .event-panel__content {
	display: table;
    position: relative;
	margin: 10% auto;
	float: none;
	background-color: #fff;
	border: 4px solid #ccc;
	border-radius: 16px;
	padding: 15px;
}

.mgc-event-list.grid .event-panel__content img {
	max-width: 380px;
	min-width: 200px;
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
}

.mgc-event-list.grid .event-panel__schedule,
.mgc-event-list.list .event-panel__schedule {
	display: flex;
    flex-direction: column;
	margin-top: 1rem;
}

.mgc-event-list.grid .event-panel__schedule > div,
.mgc-event-list.list .event-panel__schedule > div {
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-secondary-border-subtle);
}

.mgc-event-list.grid .event-panel__schedule > div:first-child,
.mgc-event-list.list .event-panel__schedule > div:first-child {
    border-top: 1px solid var(--bs-secondary-border-subtle);
}

.mgc-event-list.grid .event-panel__schedule > div:nth-child(odd),
.mgc-event-list.list .event-panel__schedule > div:nth-child(odd) {
    background-color: var(--bs-light);
}

.mgc-event-list.grid .btn-group,
.mgc-event-list.list .btn-group {
	display: flex;
	float: right;
}

.mgc-event-list.schedule .btn-group {
    margin: 0 auto;
}


/* --------------------------------------------------------------- */

.event-placeholder-box {
    width: 100%;
    padding-bottom: 100%;
    background-color: #444;
    position: relative;
    animation: placeholder-anim 1.5s infinite;
}

.event-placeholder-text {
    width: 100%;
    margin-top: 0.5rem;
    padding-bottom: 1.5rem;
    background-color: #444;
    animation: placeholder-anim 1.5s infinite;
}

@keyframes placeholder-anim {
	0% {
		opacity: 0.1;
	}
	
	50% {
		opacity: 0.2;
	}
	
	100% {
		opacity: 0.1;
	}
}

.event-spinner {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 14px;
}
  
.event-spinner div {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 4px;
	background: #fff;
	animation: event-spinner 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.event-spinner div:nth-child(1) {
	left: 0;
	animation-delay: -0.24s;
}

.event-spinner div:nth-child(2) {
	left: 6px;
	animation-delay: -0.12s;
}

.event-spinner div:nth-child(3) {
	left: 12px;
	animation-delay: 0;
}

@keyframes event-spinner {
	0% {
		top: 2px;
		height: 14px;
	}

	50%, 100% {
		top: 6px;
		height: 6px;
	}
}

/* --------------------------------------------------------------- */

.event-details-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    background-color: rgba(0, 0, 0, 0.50);
}

.event-details-panel .panel {
	position: absolute;
	top: 10vh;
	bottom: 10vh;
	left: 50%;
    width: 90%;
    margin: 0;
	transform: translateX(-52%);
	background-color: #fff;
    border: 2px solid #fff;
}

@media (min-width: 1200px) {
    .event-details-panel .panel {
        width: 1170px;
    }
}

@media (min-width: 992px) {
    .event-details-panel .panel {
        width: 970px;
    }
}

@media (min-width: 768px) {
    .event-details-panel .panel {
        width: 750px;
    }
}

.event-details-panel .close {
    font-size: 31px;
    opacity: unset;
    filter: unset;
}

.event-details-panel .panel-heading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
}

.event-details-panel .panel-heading h1,
.event-details-panel .panel-heading h2,
.event-details-panel .panel-heading h3 {
    font-size: calc( min( 4vw, 24px ) );
    margin: 0;
}

.event-details-panel .panel-body {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}