/* @group Filters Header
------------------------------------ */

.events-filters-header { position: relative; }

@media only screen
and (min-width : 961px) {
    .events-filters-header { background: none, var(--light-blue); box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.07); }
    .events-filters-header .row { height: 8rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .events-filters-header { padding: 3rem 0; }
    .events-filters-header .filter-time { order: 3; }
}


/* @group Filter Time
------------------------------------ */
.events-filters-header .filter-time { color: var(--navy-blue); }
.events-filters-header .filter-time li,
.events-filters-header .filter-time span { text-transform: uppercase; }
.events-filters-header .filter-time li { font-weight: 600; font-size: 1.55em; line-height: 1.5em; letter-spacing: .07em; }
.events-filters-header .filter-time li a { font: unset; display: inline-block; color: var(--navy-blue); transition: all .3s ease; }
.events-filters-header .filter-time li a.active { font-weight: 800; }
@media only screen
and (min-width : 961px) {
    .events-filters-header .filter-time li { font-size: 1.8em; display: inline-block; }
    .events-filters-header .filter-time li:not(:last-of-type) { margin-right: 5rem; }
    .events-filters-header .filter-time li a { position: relative; }
    .events-filters-header .filter-time li a:not(.active):hover { opacity: .7; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .events-filters-header .filter-time { background: none, var(--light-blue); box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.07); }
    .events-filters-header .filter-time ul { height: 8em; display: flex; justify-content: space-between; align-items: center; }
}


/* @group Filter Search
------------------------------------ */
.events-filters-header .filter-search input { color: var(--navy-blue); text-transform: uppercase; font-size: 1.6em; font-weight: 500; line-height: 1.25em; background-color: unset; border: unset; border-bottom: .1em solid var(--navy-blue); padding: 0 2.3em 1em 0; height: auto; }

.events-filters-header .filter-search .outerInput { position: relative; }
.events-filters-header .filter-search .outerInput i { position: absolute; top: 0; right: 0; width: 100%; height: 100%; text-align: right; color: var(--navy-blue); font-size: 1.6em; pointer-events: none; }
@media only screen
and (min-width : 961px) {
    .events-filters-header .filter-search input { padding: 0 2.3rem 1rem 0; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .events-filters-header .filter-search { margin-bottom: 3em; }
}


/* @group Filter View
------------------------------------ */
.events-filters-header .filter-view ul { background-color: var(--off-white); border-radius: 10rem; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.15) inset; height: 5em; display: inline-flex; align-items: center; column-gap: 1rem; padding: 0 1em;  margin: 0 0 3em;}
.events-filters-header .filter-view ul li { font: unset; height: 3.7em; width: 3.7em; border-radius: 100%; display: inline-flex; align-items: center; justify-content: center; color: var(--navy-blue); background-color: transparent; transition: all .3s ease; }
.events-filters-header .filter-view ul li i { font-size: 1.2em; }

.events-filters-header .filter-view ul li:not(.active):hover { color: var(--yellow); }
.events-filters-header .filter-view ul li.active { background-color: var(--yellow); }
@media only screen
and (min-width : 961px) {
    .events-filters-header .filter-view ul { height: 5rem; padding: 0 1rem; margin: 0; }
    .events-filters-header .filter-view ul li { cursor: pointer; height: 3.7rem; width: 3.7rem; position: relative; }
    .events-filters-header .filter-view ul li::before { content: attr(data-tooltip); position: absolute; top: calc(-100% - 1rem); left: 50%; transform: translate(-50%, 0); text-align: center; text-transform: uppercase; font-weight: 600; font-size: 1.6rem; letter-spacing: .07em; padding: .75rem 3rem; color: var(--navy-blue); background-color: var(--yellow); border-radius: 1rem; width: max-content; vertical-align: middle; }
    .events-filters-header .filter-view ul li::after { content: ''; position: absolute; top: calc(-100% + 1.5rem); left: 50%; margin-left: -2rem; border-width: 2rem; border-style: solid; border-color: var(--yellow) transparent transparent transparent; }
    .events-filters-header .filter-view ul li::before,
    .events-filters-header .filter-view ul li::after { opacity: 0; pointer-events: none; transition: opacity .3s linear; }
    .events-filters-header .filter-view ul li:hover::before,
    .events-filters-header .filter-view ul li:hover::after { opacity: 1; }
    .events-filters-header .filter-view ul li i { font-size: 1.5em; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .events-filters-header .filter-view { margin-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; }
    .events-filters-header .filter-view > span { text-transform: uppercase; font-weight: 700; font-size: 1.6em; line-height: 1em; letter-spacing: .125em; color: var(--navy-blue); }
}

/* @end */