.cercaEventi-container {
	margin: 25px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cercaEventi {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
}

.cercaEventi-title .material-symbols-outlined{
	font-size: 34px;
}
.cercaEventi-title, .cercaEventi-form{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#cercaEventiInput{
	text-transform: uppercase;
}
.cercaEventiInfo-container{
	width: 100%;
	margin: 15px 0;
}
#cercaEventiInfoShow:hover{
	color: var(--primary-text-hover);
}
#events-loading{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 15px;
}
.events-content-container{
	width: 100%;
}
.cercaEventi-keywords-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    padding: 0;
}
.cercaEventi-keyword{
    cursor: pointer;
    margin: 0 10px;
    line-height: 1.5em;
    white-space: pre;
}
.cercaEventi-keyword:hover{
    color: var(--primary-color); /* TODO */
}
.events-container:first-child{
	margin-top: 0;
}
.cercaEventi-filter-container{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	position: relative;
}
.filter-on-circle{
	position: absolute;
    top: -10%;
    right: 5%;
    visibility: hidden;
    font-size: 12px !important;
}

.reset-filter-btn{
	position: absolute;
	right: 0;
}

/***** eventi in programma *****/
.cercaEventi-section{
	width: 100%;
	max-width: 980px;
	width: 100%;
}
.event {
	width: 100%;
	padding: 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--on-surface);
}
.events-container .event:last-child{
	border-bottom: 1px solid var(--on-surface);
}

.event-past{
    color: #777;
}
.event-running{
    font-weight: 600;
}

.events-date {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	width: 100%;
}

.events-date span:nth-child(2){
	text-align: right;
}

.events-container {
	display: none;
	margin: 25px 0;
}

.event-title {
	width: 80%;
	line-height: 1.4em;
}

.start-end-text {
	font-family: var(--monospace);
	font-size: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-time {
	min-width: fit-content;
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-left: 15px;
}

.event-time-start,
.event-time-end {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.event-time-start :nth-child(1),
.event-time-end :nth-child(1) {
	font-size: 1rem;
	margin-right: 3px;
}

.similar-events-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 10px 0;
}

.similar-events-header p{
	margin: 0;
}

.similar-events-header p, .similar-events-header a, .similar-events-header a span{
	font-size: 0.85em !important;
}

.similar-events-header a{
	text-align: right;
}


/***** events loading *****/
.lds-grid {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
}

.lds-grid div {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--on-surface);
	animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
	top: 4px;
	left: 4px;
	animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
	top: 4px;
	left: 16px;
	animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
	top: 4px;
	left: 28px;
	animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
	top: 16px;
	left: 4px;
	animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
	top: 16px;
	left: 16px;
	animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
	top: 16px;
	left: 28px;
	animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
	top: 28px;
	left: 4px;
	animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
	top: 28px;
	left: 16px;
	animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
	top: 28px;
	left: 28px;
	animation-delay: -1.6s;
}


@media only screen and (max-width: 600px) {
	.cercaEventi-filter-container {
		width: 100%;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}
	.cercaEventi{
		flex-direction: column;
	}
	.cercaEventi br{
		display: none;
	}
	.event {
		flex-direction: column;
	}

	.event-title {
		width: 100%;
	}

	.event-time {
		margin: 5px 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.event-time-start,
	.event-time-end {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}