.post-carousel-10 {
    position: relative;
}

.post-carousel-10 .slider-content .thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .post-carousel-10 .post-button {
    border: 1px solid #D4D4D4;
} */

.post-carousel-10 .swiper-nav {
    z-index: 9;
    position: relative;
}

.post-carousel-10 .swiper-nav .swiper-nav-button {
    /* border: 2px solid #292D32; */
    cursor: pointer;
}

.post-carousel-10 .carousel-items .swiper-pagination {
    position: relative;
}

.post-carousel-10 .swiper-progress-bar {
    z-index: 999;
    position: absolute;
}

.post-carousel-10 .swiper-progress-bar .slide_progress-bar {
    position: absolute;
    width: auto;
    clear: both;
    opacity: 0;
    left: 0;
    right: 0;
    margin-right: 10px;
    width: 90%;
}

.post-carousel-10 .swiper-progress-bar .slide_progress-bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    content: "";
    transition: 0.1s width linear;
}

.post-carousel-10 .swiper-progress-bar.active .slide_progress-bar {
    opacity: 1;
}

.post-carousel-10 .swiper-progress-bar.animate .slide_progress-bar span {
    transition: width linear;
    transition-delay: unset;
    width: 100%;
}

.post-carousel-10.is-ltr .swiper-nav-button {
    transform: rotateY(180deg);
}

@media (max-width: 767px) {
    .post-carousel-10 .carousel-items .swiper-container div.swiper-nav {
        margin: 0;
    }

    .post-carousel-10 .slider-meta > div {
        width: 100%;
    }

    .post-carousel-10 .slider-content {
        flex-direction: column !important;
    }

    .post-carousel-10 .swiper-nav {
        width: 100% !important;
        height: initial;
        margin-top: 15px;
    }

    .post-carousel-10 .slider-content .thumbnail-container {
        margin-left: 0;
        width: 100% !important;
        height: 245px;
    }

    .post-carousel-10 .slider-content .content-container {
        width: 100% !important;
        max-height: initial;
        margin-top: 15px;
    }

    .post-carousel-10 .swiper-controller-wrapper {
        width: initial !important;
        height: 0;
        margin-left: 0;
    }

    .post-carousel-10 .post-footer-container {
        width: 100% !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .post-carousel-10 .post-footer-container span {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 3px;
    }


    
    .post-carousel-10 .swiper-progress-bar {
        width: 100% !important;
        top: 40%;
        bottom: initial;
        margin-right: 10px;
    }
}

@media (max-width: 575px) {
    .post-carousel-10 .swiper-progress-bar {
        top: 35%;
        margin-right: 5px;
    }
}