.su-events-pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.su-events-pagination ol {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

.su-events-pagination li {
    flex: 1;
    flex-grow: 1;
    width: 48px;
    height: 48px;
}

.su-events-pagination li a {
    display: block;
    padding: 10px;
    text-align: center;
}

.su-events-pagination li.pagination-disabled a {
    color: #ccc;
    cursor: default;
}

.su-events-pagination li.pagination-current a {
    background-color: #eee;
}



.su-events-list .event-summary[data-status-text="Closed"] .event-dates::before,
.su-events-list .event-summary[data-status-text="Finished"] .event-dates::before,
.su-events-list .event-summary[data-multiple-dates="true"] .event-dates::after {
    display: inline-block;
    margin-right: .5rem;
}

.su-events-list .event-summary[data-status-text="Finished"] .event-dates::before {
    content: '(Finished)';
}

.su-events-list .event-summary[data-status-text="Closed"] .event-dates::before {
    content: '(Closed)';
}

.su-events-list .event-summary[data-status-text="Cancelled"] .event-dates::before {
    content: '(Cancelled)';
}

.su-events-list .event-summary[data-multiple-dates="true"] .event-dates::after {
    content: '(Multiple Dates Available)';
}



/**
 * Event data loading animation:
 */
.su-events-list.loading .event-summary {
    position: relative;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #fafafa 8%, #eeeeee 38%, #fafafa 54%);
    background-size: 1000px 640px;
    border-radius: 15px;
}

.su-events-list.loading .event-summary > * {
    visibility: hidden;
}

@keyframes placeHolderShimmer {
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}



.su-events-custom-filters {
    --filter-count: 1;
}

.su-events-custom-filters ul:has(li:nth-child(2)) {
    --filter-count: 2;
}

.su-events-custom-filters ul:has(li:nth-child(3)) {
    --filter-count: 3;
}

.su-events-custom-filters ul {
    display: grid;
    gap: 1rem;
    grid-template-columns: 100%;
    grid-template-rows: repeat(var(--filter-count, 1), 1fr);
    list-style: none;
    justify-items: stretch;
    align-items: stretch;
    margin: 0 0 2rem 0;
    padding: 0;
}

.su-events-custom-filters ul li {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .su-events-custom-filters ul {
        grid-template-columns: repeat(var(--filter-count, 1), 1fr);
        grid-template-rows: 1fr;
    }
}



.filter-dialog {
    max-width: 100%;
    width: 100%;
    background-color: #fff;
    border-color: #fff;
}

@media (min-width: 768px) {
    .filter-dialog {
        max-width: 360px;
    }
}

.filter-dialog-header,
.filter-dialog .form-actions {
    display: flex;
    justify-content: space-between;
}

.filter-dialog .form-ctrl-container {
    margin-bottom: 30px;
}

.form-ctrl-container label {
    display: block;
}

.filter-dialog .form-control {
    display: block;
    width: 100%;
}

.filter-dialog-toggle {
    position: relative;
}

.filter-dialog-toggle::after {
    position: absolute;
    display: none;
    content: ' ';
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #2d55be;
    right: -8px;
    top: -8px;
}

.filter-dialog-toggle.changed::after {
    display: block;
}

@media (min-width: 768px) {
    .filter-dialog-toggle::after {
        width: 24px;
        height: 24px;
        border-radius: 12px;
        right: -12px;
        top: -12px;
    }
}