.icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

.dn { display: none !important; }

.modal.lightbox {
    position: fixed;
    top:0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(0.2rem);
    background-color: var(--panel-tr95);
    overflow-y: auto;
}

.modal > .content {
    padding: 1rem;
    border-radius: 0.5rem;
}

.modal > .content.center {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/*.modal > .content.standard {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 3rem;
    width: 50rem;
    height: 40rem;
}*/

.modal > .content.default { width: 50rem; height: 50rem; }
.modal > .content.slim { width: 30rem; }
.modal > .content.narrow { width: 40rem; }
.modal > .content.fit { width: 50rem; }
.modal > .content.wide { width: 65rem; }
.modal > .content.fat { width: 80rem; }

.modal > .content.low { width: 25rem; }
.modal > .content.small { width: 35rem; }
.modal > .content.high { width: 65rem; }
.modal > .content.tall { width: 80rem; }


.calendar {
    cursor: pointer;
    width: 3.25rem;
    height: 3.25rem;
    aspect-ratio: 1 / 1;
    padding: 0.65rem 1rem;
}

.calendar svg {
    width: 1.25rem;
    height: 1.875rem;
}

/*indicator*/
.further {
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--cta-color);
    transition: opacity 0.2s ease-out;
}

body[scrolling] .further {
    transition-delay: 0.5s;
}

.further svg { stroke: var(--black); }

.further.invert {
    border: 1px solid var(--outline);
    background: transparent;
}

.further.invert svg { stroke: var(--cta-color) }

:not(:hover) .further.invert { background-color: transparent; }

.further.centered {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

:not(:hover) .further.hovering {
    opacity: 0;
}

.further svg {
    width: 0.75rem;
    height: 0.75rem;
}

.card {
}

.card.entry .details {
    position: absolute;
}

.card.entry .details .overview .title {
    font-weight: 800;
}

.card.entry .details .overview .venue {
    font-weight: 400;
}

.card.entry .details .date {
    position: absolute;
    font-weight: 800;
    text-align: center;
}

.card .fader {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card:not(.large) .fader { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); }
.card.large .fader { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49.71%, rgba(0, 0, 0, 0.6) 100%); }
.card:hover .fader { background: rgba(0,0,0,0.6); }

.card.event .tags {
    position: absolute;
    top:0.75rem;
    right: 0.75rem;
}

/*general elements*/
.card.event .tag {
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: 1.2rem;
    letter-spacing: 0.1em;
    height: 2rem;
    border-radius: 1.25rem;
    /*cursor: pointer;*/
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

.card.event:hover .tag {
    color: var(--cta-color);
    background-color: var(--cta-color-20);
}


/*@ROWS | general through multiple pages*/
.rows .row {
    position: relative;
    width: 100%;
    margin-bottom: 3.25rem;
}

.rows .row [data-ui-dac="lane"]{
    width: 100%;
    height: 12.5rem;
    overflow: hidden;
    margin-bottom: 2.25rem;
}

[data-component-slider][data-horizonatal-min] [data-control-left] {
    opacity: 0.4;
    pointer-events: none;
}

[data-component-slider][data-horizonatal-max] [data-control-right] {
    opacity: 0.4;
    pointer-events: none;
}

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"].bar {
    position: relative;
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--gray-two);
}

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"].bar [data-ui-dac="indicator"] {
    border-radius: 4rem;
    background-color: var(--progress);
}

.rows .row .entries {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap:1rem;
    justify-items: start;
}

.rows .row .entry {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 1.5rem;
    cursor:pointer
}

.rows .row .entry .details {
    position: absolute;
}

.rows .row .entry .details .overview {
    position: absolute;
    left: 0;
    bottom: 0;
}

.rows .row .entry .details .overview .title {
    font-weight: 800;
    text-transform: uppercase;
}

.rows .row .entry .details .date {
    text-align: center;
    position: absolute ;
    font-weight: 800;
}

.rows .row .entry:not(:last-child) { margin-right: 0.5rem; }

.rows .row .entry.more {
    position: relative;
    /*display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;*/
    background-color: inherit;
    width: 12rem;
    flex-shrink: 0;
    aspect-ratio: unset;
    color: var(--cta-color);
    /*border-style: solid;*/
    /*border-image: repeating-linear-gradient(90deg, var(--outline), rgba(0,0,0,0)) 1;*/
    border-image-source: linear-gradient(to right,var(--outline) 20% var(--complementary) 0%);
    border-image-repeat: stretch;
    border-image-width: 2;
    border-image-slice: 100%;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/*.rows .row .entry.more::after {
    position: absolute;
    top: -1px; bottom: -1px;
    left: -1px; right: -1px;
    background:linear-gradient(90deg, var(--outline), rgba(0,0,0,0));
    content: '';
    z-index: -1;
    border-radius: 1.5rem;
}*/

.rows .row .entry.more:hover::after {
    border-image: linear-gradient(90deg var(--outline) 20% var(--complementary) 0%) 30;
}

.rows .row .entry.more > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.25rem;
}

.rows .row .entry.more .further {
    margin-bottom: 1rem;
}

.rows .row .entry.more:hover .further {
    border-color: var(--hover);
}

.rows .row .entry.more div div:last-child {
    text-align: center;
}