/**
 * @file
 * Views Vanilla Javascript Slideshow, customized version of the original
 * vvjs.css for the City theme.
 *
 * Filename:     vvjs.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */
.vvjs,
.vvjs .vvjs-items {
    overflow: hidden;
}

.vvj-slideshow,
.vvj-slideshow .view-content {
    width    : 100%;
    min-width: 100%;
    display  : block !important;
}

.hidden-element {
    display: none;
}

.vvjs .vvjs-items>.vvjs-item {
    display   : none;
    transition: transform 0.5s ease-in-out;
}

.vvjs .vvjs-items>div:first-of-type {
    display: block;
}

.vvjs .vvjs-inner {
    position: relative;
}

/* Arrows */
.vvjs .vvjs-inner>.slide-indicators {
    background-color: transparent !important;
    width           : 100%;
}

.vvjs .slide-indicators button {
    all             : unset;
    overflow        : hidden;
    position        : absolute;
    cursor          : pointer;
    transition      : 0.4s;
    outline         : none;
    min-height      : var(--margin-xxxl);
    min-width       : var(--margin-xxxl);
    font-size       : var(--font-size-xxl);
    text-decoration : none !important;
    background-color: transparent !important;
}

.vvjs .slide-indicators button {
    top: calc(50% - 1.5rem);
}

.vvjs .vvjs-inner.not-zero>.slide-indicators button,
.vvjs .vvjs-inner.numbers.zero>.slide-indicators button,
.vvjs .vvjs-inner.numbers.not-zero>.slide-indicators button,
.vvjs .vvjs-inner.dots.zero>.slide-indicators button,
.vvjs .vvjs-inner.dots.not-zero>.slide-indicators button {
    top: calc(50% - 3rem);
}

.vvjs .slide-indicators .next-arrow {
    right: 3rem;
}

.vvjs .slide-indicators .prev-arrow {
    left: 3rem;
}

.vvjs .slide-indicators.arrows-sides {
    opacity: 1;
}

.vvjs.arrows-top .slide-indicators {
    opacity   : 0.2;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.vvjs.arrows-top .slide-indicators:hover {
    opacity         : 100;
    outline         : none;
    background-color: transparent !important;
}

.vvjs.arrows-sides .vvjs-inner {
    width : calc(100% - 7.5rem);
    margin: 0 auto;
}

.vvjs.arrows-sides .slide-indicators .next-arrow {
    right: -3.75rem;
}

.vvjs.arrows-sides .slide-indicators .prev-arrow {
    left: -3.75rem;
}

.vvjs .display-0 {
    display: none;
}

.next-arrow svg,
.prev-arrow svg {
    width : var(--icon-size);
    height: var(--icon-size);
    fill  : gray;
}

/* Bottom nav */
.play-pause-button svg {
    width : var(--icon-size);
    height: var(--icon-size);
    fill  : gray;
}

.nav-dots-numbers:not(.dots, .numbers)>.dots-numbers-button {
    opacity    : 0;
    height     : 0;
    padding    : 0;
    margin     : 0;
    width      : 0;
    font-size  : var(--font-size-xxs);
    line-height: 0;
}

.vvjs .nav-dots-numbers.dots .dots-numbers-button {
    all   : unset;
    border: none;
    cursor: pointer;
}

.vvjs .nav-dots-numbers.numbers .dots-numbers-button {
    cursor       : pointer;
    padding      : var(--margin-xxs) var(--margin-xs);
    margin       : 0 var(--margin-xxs);
    font-size    : var(--font-size-sm);
    font-weight  : bold;
    color        : currentColor;
    border       : var(--border-thick) solid transparent;
    border-radius: var(--rounding);
    transition   : color 0.3s ease, background-color 0.3s ease;
}

.vvjs .nav-dots-numbers.numbers .dots-numbers-button {
    transform: scale(1);
}

.vvjs .nav-dots-numbers.numbers .dots-numbers-button:hover {
    transform: scale(1.1);
}

.vvjs .nav-dots-numbers.numbers .dots-numbers-button.active {
    transform     : scale(1.2);
    animation     : activeBounce 0.6s ease-in-out;
    pointer-events: none;
    cursor        : default;
}

@keyframes activeBounce {
    0% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.2);
    }

}

.vvjs .nav-dots-numbers.dots>.dots-numbers-button,
.vvjs .nav-dots-numbers.numbers>.dots-numbers-button {
    opacity: 100;
}

.vvjs .nav-dots-numbers.dots>.dots-numbers-button {
    padding      : 0 !important;
    margin       : var(--margin-xs) var(--margin-sm);
    width        : var(--margin-xs) !important;
    height       : var(--margin-xs) !important;
    border-radius: 50% !important;
    font-size    : 0 !important;
    line-height  : initial !important;
    transition   : width 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease;
    border-width : var(--border-thick);
    border-style : solid;
    border-color : currentColor;
}

.vvjs .nav-dots-numbers.dots>.dots-numbers-button:hover {
    transform : scale(1.2);
    box-shadow: 0 0 var(--margin-xs) rgba(0, 0, 0, 0.3);
}

.vvjs .nav-dots-numbers.dots>.dots-numbers-button.active {
    width        : calc(2 * var(--margin-xs)) !important;
    border-radius: 50% !important;
    border-width : var(--border-thick);
    animation    : activePulse 1.5s infinite alternate;
}

/* Container styling for the animation */
.echo-total,
.echo-animation {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : var(--icon-size);
    height         : var(--icon-size);
    position       : relative;
    margin         : var(--margin-xs);
}

.progressbar {
    overflow     : hidden;
    --progress   : 0%;
    --size       : var(--icon-size);
    --bar-width  : var(--margin-xs);
    width        : var(--size);
    height       : var(--size);
    border-radius: 50%;
    background   : conic-gradient(#007bff var(--progress), #e6e6e6 0%);
    display      : grid;
    place-items  : center;
    position     : relative;
    transition   : background 0.3s linear, transform 0.3s ease;
}

.progressbar::after {
    content      : attr(aria-valuenow) "%";
    width        : calc(100% - var(--bar-width));
    height       : calc(100% - var(--bar-width));
    border-radius: inherit;
    background   : #fff;
    display      : grid;
    place-items  : center;
    font-size    : var(--font-size-xs);
    font-weight  : var(--font-weight-bold);
    color        : #007bff;
    /* Blue text */
    position     : absolute;
    transition   : color 0.3s ease-in-out;
}

.progressbar[aria-valuenow="100"] {
    background: conic-gradient(#007bff 100%, #007bff 0%);
    transform : scale(1.05);
    /* Subtle zoom at full progress */
}

.progressbar[aria-valuenow="100"]::after {
    content: "100%";
    color  : #fff;
}

@keyframes activePulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

/* For any slideshow */
.vvjs.slideshow.a-fade .vvjs-item {
    animation: opac 0.8s ease-out;
}

@keyframes opac {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.vvjs.slideshow.a-zoom .vvjs-item {
    animation: animatezoom 0.6s ease-out;
}

@keyframes animatezoom {
    from {
        transform: scale(0.8);
        opacity  : 0;
    }

    to {
        transform: scale(1);
        opacity  : 1;
    }
}

.vvjs.slideshow.a-top .vvjs-item {
    position : relative;
    animation: animatetop 0.6s ease-out;
}

@keyframes animatetop {
    from {
        top    : -100px;
        opacity: 0;
    }

    to {
        top    : 0;
        opacity: 1;
    }
}

.vvjs.slideshow.a-left .vvjs-item {
    position : relative;
    animation: animateleft 0.6s ease-out;
}

@keyframes animateleft {
    from {
        left   : -100px;
        opacity: 0;
    }

    to {
        left   : 0;
        opacity: 1;
    }
}

.vvjs.slideshow.a-right .vvjs-item {
    position : relative;
    animation: animateright 0.6s ease-out;
}

@keyframes animateright {
    from {
        right  : -100px;
        opacity: 0;
    }

    to {
        right  : 0;
        opacity: 1;
    }
}

.vvjs.slideshow.a-bottom .vvjs-item {
    position : relative;
    animation: animatebottom 0.6s ease-out;
}

@keyframes animatebottom {
    from {
        bottom : -100px;
        opacity: 0;
    }

    to {
        bottom : 0;
        opacity: 1;
    }
}