/** 
    * Common External Pagination Styles
*/

.wdt-external-pagination-wrapper .wdt-swiper-pagination { text-align: center; margin: 20px 0; }


/** 
    * Dots Pagination Styles
*/

.wdt-external-pagination-wrapper .wdt-swiper-pagination .swiper-pagination-bullet { padding: 0px; 
    margin: 0 5px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--wdt-elementor-color-accent); opacity: 1; }

.wdt-external-pagination-wrapper .wdt-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { 
    width: 22px; border-radius: 6px; } 

/** 
    * Arrow Pagination Styles
*/

.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination { width: auto; margin: -5px; }

.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"] { 
    padding: 10px; width: 50px; height: 50px; font-size: clamp(1rem, 0.9555rem + 0.2454vw, 1.25rem); /*20px - 16px*/ 
    display: inline-flex; align-items: center; justify-content: center; 
    -webkit-transform: scale(1); transform: scale(1); -webkit-transition: var(--wdt-elementor-base-transition); 
    transition: var(--wdt-elementor-base-transition); margin: 5px; }

.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:hover {
    -webkit-transform: scale(1.1); transform: scale(1.1); }

.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"] i { 
    position: relative; display: inline-flex; place-content: center; place-items: center; 
    font-size: inherit; color: inherit; width: 100%; height: 100%; padding: 5px; margin: 0; }


.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div.wdt-arrow-pagination-prev:hover > i {
    animation-name: liviIconMovePre !important;
    animation-duration: 500ms !important;
    animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1) !important;
    will-change: transform !important;
    transition: opacity .4s ease-out,transform .8s !important;
}

@-webkit-keyframes liviIconMovePre {
    0% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }

    50% {
        opacity: 0;
        transform: translateX(-20px);
        transform-origin: center;
    }

    51% {
        opacity: 0;
        transform: translateX(20px);
        transform-origin: center;
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }
}

@keyframes liviIconMovePre {
    0% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }

    50% {
        opacity: 0;
        transform: translateX(-20px);
        transform-origin: center;
    }

    51% {
        opacity: 0;
        transform: translateX(20px);
        transform-origin: center;
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }
}

.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div.wdt-arrow-pagination-next:hover > i {
    animation-name: liviIconMoveNxt !important;
    animation-duration: 500ms !important;
    animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1) !important;
    will-change: transform !important;
    transition: opacity .4s ease-out,transform .8s !important;
}

@-webkit-keyframes liviIconMoveNxt {
    0% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }

    50% {
        opacity: 0;
        transform: translateX(20px);
        transform-origin: center;
    }

    51% {
        opacity: 0;
        transform: translateX(-20px);
        transform-origin: center;
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }
}

@keyframes liviIconMoveNxt {
    0% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }

    50% {
        opacity: 0;
        transform: translateX(20px);
        transform-origin: center;
    }

    51% {
        opacity: 0;
        transform: translateX(-20px);
        transform-origin: center;
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
        transform-origin: center;
    }
}



/** 
    * Progress Bar & Scroll Bar - Pagination Styles
*/

.wdt-external-pagination-wrapper .wdt-swiper-pagination-progressbar,
.wdt-external-pagination-wrapper .wdt-swiper-scrollbar { position: relative; 
    background-color: var(--wdtBorderColor); height: 2px; }

.wdt-external-pagination-wrapper .wdt-swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.wdt-external-pagination-wrapper .wdt-swiper-scrollbar .swiper-scrollbar-drag { width: 100%;
    top: -2px; height: calc(100% + 4px); background-color: var(--wdtPrimaryColor); border-radius: 0px; }