/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .dt-event-list .event-content {
    display: flex;
    flex-wrap: wrap;
}

.dt-event-list .event-card-container {
    width: calc(100%/3);
}

.dt-event-list .event-card {
    margin: 15px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.dt-event-list .event-card:link {
    text-decoration: inherit;
    color: inherit;
}

.dt-event-list .event-card:visited {
    text-decoration: inherit;
    color: inherit;
}

.dt-event-list .event-title, 
.dt-event-list .event-date-time, 
.dt-event-list .event-venue, 
.dt-event-list .event-price {
    padding: 7px 15px 0px 15px;
}

.dt-event-list .event-title {
    font-weight: 600;
}

.dt-event-list .event-date-time {
    font-weight: 500;
    color: var(--tcb-skin-color-0);
}

.dt-event-list .filters button {
    background: white;
    margin: 15px;
    margin-left: 0px;
    border-radius: 100px;
}

.dt-event-list .filters button.active {
    border-color: var(--tcb-skin-color-0);
    color: var(--tcb-skin-color-0);
}

.dt-event-list .paginate-pagination li {
    margin: -1px !important;
}

.dt-event-list .paginate-pagination li a.page {
    padding: 10px;
}

.dt-event-list .paginate-pagination li a.page.page-prev {
    border-radius: 100px 0px 0px 100px;
}

.dt-event-list .paginate-pagination li a.page.page-next {
    border-radius: 0px 100px 100px 0px;
}

@media (max-width: 576px) {
    .dt-event-list .event-card-container {
        width: calc(100%);
    }
}


.registration-open-dot {
    width: 200px;
    position: absolute;
    top:10px;
    overflow: visible;
    display: block;
}

.registration-open-dot .dot {
    width: 15px;
    height: 15px;
    background: #0be900;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
}

.animated-dot {
    width: 15px;
    height: 15px;
    background: #0be900;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    opacity: 0.7;
    animation-name: pulsating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* animation-direction: alternate; */
}

@keyframes pulsating {
    0% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.8;
    }
    70% {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0.0;
	}
    100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.0;
    }
}