.feedback-request {
    display: flex;
    flex-wrap: wrap;
}

.feedback-request .total-vote {
    display: flex;
    flex: 1 0;
    margin-right: 20px;
    flex-direction: column;
    align-items: center;
}
.feedback-request .request-detail {
    display: flex;
    flex: 2 0 64%;
    flex-direction: column;
}

.quick-feature-upload-img .avatar-upload {
    position: relative;
    max-width: 110px;
}

.quick-feature-upload-img .avatar-upload .avatar-edit {
    position: absolute;
    right: -10px;
    z-index: 1;
    top: -15px;
}

.quick-feature-upload-img .avatar-upload .avatar-preview {
    width: 110px;
    height: 110px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    border: 1px dashed var(--color-light-3);
    box-shadow: none !important;
    overflow: hidden;
    background: #f5f5f5;
}

.switch-product .text {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cursor-scroll {
    cursor: all-scroll !important
}

.roadmap-item {
    height: 80vh;
    min-width: 300px
}

.roadmap-item .item-scroll {
    height: calc(100% - 60px);
}

@media (max-width: 576px) {
    .roadmap-item {
        height: auto;
    }
}
.simplebar-scrollbar::before {
    background: rgba(222,225,234,.8);
}

.drag-enter {
    border: 2px dashed #000;
}

:root {
    --swiper-theme-color: var(--color-primary)
}

.swiper-pagination-bullet {
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: var(--swiper-pagination-bullet-border-radius,50%);
    display: inline-block;
    height: 10px;
    opacity: .3;
    width: 10px
}

.swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color,var(--swiper-theme-color));
    border-color: var(--color-primary);
    opacity: var(--swiper-pagination-bullet-opacity,1)
}

[data-navigation=false] .swiper-navigation {
    display: none;
    opacity: 0;
    visibility: hidden
}

.swiper-pagination-numbers {
    background: #e2e8f0;
    border-radius: 50%;
    color: #000;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    margin: auto 2px;
    width: 28px
}

.swiper-pagination-numbers-active {
    background: var(--color-primary);
    color: #fff;
    opacity: 1
}

.swiper-button-prev {
    background-color: #fff;
    border-radius: 50rem;
    box-shadow: 0 1rem 3rem rgba(2,6,23,.175);
    height: 40px;
    left: 0;
    right: 0;
    width: 40px
}

.swiper-button-prev:after {
    content: "\f060";
    font-family: "Font Awesome 6 Pro";
    font-size: 24px
}

.swiper-button-prev:hover {
    background-color: var(--color-primary);
    color: #fff
}

.swiper-button-next {
    background-color: #fff;
    border-radius: 50rem;
    box-shadow: 0 1rem 3rem rgba(2,6,23,.175);
    height: 40px;
    left: 0;
    right: 0;
    width: 40px
}

.swiper-button-next:after {
    content: "\f061";
    font-family: "font awesome 6 Pro";
    font-size: 24px
}

.swiper-button-next:hover {
    background-color: var(--color-primary);
    color: #fff
}

.pattern-square {
    position: relative;
}

.pattern-square:after {
    background-image: url(../images/bg-pattern-4.png);
    background-position: top;
    bottom: 0;
    content: "";
    height: 312px;
    left: 0;
    -webkit-mask-image: linear-gradient(0deg, transparent 35%, #000 75%);
    mask-image: linear-gradient(0deg, transparent 35%, #000 75%);
    padding: 40px 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.filter-button ul li {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 5px;
}

@media (max-width: 991.98px) {
    .filter-button ul {
        overflow-x: scroll;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

.profile-activity .button:hover {
    background-color: var(--color-light-2);
}

.card-lift {
    border-radius: .75rem;
    transition: transform .2s ease-in-out,border-color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
}

.card-lift.active,.card-lift:focus,.card-lift:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)!important;
    transform: translateY(-.25rem)
}