.f-carousel {
    position: relative;
    outline: none;
}

/* .is-pointer-down a, */
.is-dragging a {
    pointer-events: none;
}

.f-carousel-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* cursor: move;
    cursor: w-resize;
    cursor: -webkit-grab;
    cursor: grab; */
}
.f-carousel.is-dragging .f-carousel-items {
    cursor: move;
    /*cursor: w-resize;*/
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.f-carousel .f-carousel-items {
    position: relative;
    height: 100%;
}
.f-carousel .f-carousel-items::after {
    display: block;
    clear: both;
    content: "";
}
/* .f-carousel .f-carousel-items .item.active {
    display: block;
} */
/* .carousel-control.inactive {
    opacity: 0.17 !important;
    cursor: default;
} */
/* .carousel-control.inactive:hover .icon {
    transform: scale(1) !important;
} */


.f-carousel .carousel-control {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    width: 33px;
    height: 55px;
    text-align: center;
    /* background-color: #b7b7b7; */
    background-color: transparent;
    color: #fff;
    border: none;
    outline: none;
    opacity: 0.65;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.f-carousel .carousel-control.disabled,
.f-carousel .carousel-control:disabled {
    opacity: 0.25 !important;
}
@media (prefers-reduced-motion: reduce) {
    .f-carousel .carousel-control {
        transition: none;
    }
}
.f-carousel .carousel-control-prev {
    right: 0;
    left: auto;
    padding-right: 5px;
    border-radius: 0 3px 3px 0;
}
.f-carousel .carousel-control-next {
    left: 0;
    right: auto;
    padding-right: 7px;
    border-radius: 3px 0 0 3px;
}
.f-carousel .carousel-control:focus,
.f-carousel .carousel-control:hover {
    opacity: 0.9;
    text-decoration: none;
    outline: 0;
}
.f-carousel .carousel-control .icon {
    display: inline-block;
    font-size: 1.5rem;
    vertical-align: middle;
    transition: all 0.3s;
}
.f-carousel .carousel-control:hover .icon {
    transform: scale(1.2);
}


.slider-cards-container {
    overflow: hidden;
    white-space: nowrap;
}
/* .slider-cards-container .card {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
} */
/* .slider-cards-wrapper {
    white-space: normal;
} */
.f-carousel-items .card {
    display: inline-block;
    position: relative;
    direction: rtl;
    white-space: normal;
    /* height: inherit; */
}


/* .f-carousel-items .card-info > div:first-child {
    touch-action: pan-y;
} */

/* در صورتی که مرورگر قدیمی باشد یا به هر دلیلی استایل "touch-action: pan-y"
را ساپورت نکند به جای استایل بالا می شود از این استایل ها استفاده کرد */
/* .not-scrollable-children * {
    overflow-x: visible;
    overflow-y: visible;
} */


/* .card {
    z-index: 0;
}
.card.is-selected {
    z-index: 1;
} */


.ltr .f-carousel .carousel-control-prev {
    right: auto;
    left: 0;
    border-radius: 3px 0 0 3px;
}
.ltr .f-carousel .carousel-control-next {
    left: auto;
    right: 0;
    border-radius: 0 3px 3px 0;
}



/* ---- page dots ---- */

.f-carousel-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
}
.f-carousel-rtl .f-carousel-page-dots {
    direction: rtl;
}
.f-carousel-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: 0.25;
    cursor: pointer;
}
.f-carousel-page-dots .dot.is-selected {
    opacity: 1;
}