/** 
    * Common External Pagination Styles
*/

.wdt-external-pagination-wrapper { text-align: center; margin: 20px 0; }
.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: -8px; }
.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"] { padding: 10px;
    width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; margin: 0 8px; }
.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"] { 
    color: var(--wdtHeadAltColor); height: 50px; font-size: calc(var(--wdtFontSize_H6) - 2px); overflow: hidden; position: relative;
    width: 50px; -webkit-border-radius: var(--wdtRadius_Full); border-radius: var(--wdtRadius_Full); border: 1px solid; background-color: transparent; background-image: none; }
.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:before{
    content: ""; height: auto; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: auto; z-index: -1; 
    -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); -webkit-transition: inherit; transition: inherit; 
    background-image: var(--wdt-linear-gradient-nrml-bg); opacity: 0; }
.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"].swiper-button-disabled{cursor: not-allowed; opacity: 0.6;}

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

.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:before { 
   content: ""; height: auto; margin: auto; position: absolute; 
    bottom: 0; left: 0; right: 0; top: 0; width: auto; z-index: -1; -webkit-border-radius: var(--wdtRadius_Zero); 
    border-radius: var(--wdtRadius_Zero); -webkit-transition: inherit; transition: inherit;  background-image: var(--wdt-linear-gradient-nrml-bg); opacity: 0; }
.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:hover{color: var(--wdtAccentTxtColor); border-color: transparent;}
.wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:hover:before { opacity: 1; }

/* Dark Mode Styles */
.wdt-dark-bg .wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"] { color: var(--wdtHeadAltColor); border-color: var(--wdtHeadAltColor);  }
.wdt-dark-bg .wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:hover { color: var(--wdtAccentTxtColor); border-color: transparent; }
.wdt-dark-bg .wdt-external-pagination-wrapper .wdt-carousel-arrow-pagination > div[class*="wdt-arrow-pagination-"]:hover:before { opacity: 1; }

/* Icon Animation Styles */
.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;  backface-visibility: hidden;}

@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; }

@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; }