.product-roadmap * {
    box-sizing: border-box
}

.product-roadmap *::after,.product-roadmap *::before {
    box-sizing: border-box
}

.flex-wrap {
    display: flex
}

.flex-wrap .flex-left,.flex-wrap .flex-right {
    width: 100%;
    max-width: 50%
}

.product-roadmap * {
    box-sizing: border-box
}

.product-roadmap *::after,.product-roadmap *::before {
    box-sizing: border-box
}

.flex-wrap {
    display: flex;
    width: 100%;
    align-items: center
}

.flex-wrap .flex-left,.flex-wrap .flex-right {
    width: 100%;
    max-width: 50%
}

.button-wrap a {
    background: #f0483e;
    color: #fff;
    text-transform: uppercase;
    font-family: var(--zf-primary-bold);
    display: inline-block;
    padding: 12px 30px;
    font-size: 15px
}

.banner-inner-section .flex-right {
    text-align: right
}

.banner-inner-section {
    padding: 40px 0
}

.product-roadmap {
    background: #f9f9f9;
    padding-bottom: 100px
}

.filter-inner-section input,.filter-inner-section select {
    width: 100%;
    height: 45px;
    line-height: 22px;
    font-size: 15px;
    padding: 5px 20px 5px 10px;
    border: 1px solid #bdbdbd;
    background: #fff;
    margin-bottom: 0;
    box-sizing: border-box;
    color: #000;
    margin-bottom: 0;
    -moz-appearance: none !important;
    -webkit-appearance: none;
    font-family: var(--zf-primary-regular);
    vertical-align: top
}

.filter-inner-section .flex-wrap {
    justify-content: space-between;
    gap: 10px
}

.flex-search::before {
    content: '';
    background: url(/sites/zweb/images/vault/roadmap-sprite-icons.png);
    background-repeat: no-repeat;
    background-size: auto 23px;
    position: absolute;
    left: 10px;
    top: 50%;
    -webkit-transform: translateY(-45%);
    transform: translateY(-45%);
    width: 20px;
    height: 25px
}

input.rd-search-field {
    padding: 5px 10px 5px 35px
}

.drpdwn_option {
    position: relative
}

.drpdwn_option::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -3px
}

.roadmap-list-inner-section li {
    background: #fdf3e8;
    border: 1px solid #edddcc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 30px
}

.rd-list-title {
    font-family: var(--zf-secondary-bold);
    color: #000;
    font-size: 24px;
    margin: 0 0 10px;
    display: block
}

.tag-status::before,.tag-last-feedback::before,.tag-module::before {
    content: '';
    background: url(/sites/zweb/images/vault/roadmap-sprite-icons.png);
    background-repeat: no-repeat;
    background-size: auto 23px;
    background-position: -25px 0;
    width: 23px;
    height: 23px;
    position: absolute;
    left: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

span.tag-last-feedback {
    position: relative;
    padding: 0 0 0 25px
}

span.tag-last-feedback::before {
    background-position: -55px -1px;
    left: 0
}

.tags-wrap span {
    display: inline-block;
    font-size: 14px;
    margin: 0 15px 0 0
}

.roadmap-list-inner-section li .flex-wrap .flex-left {
    padding: 40px;
    width: 75%;
    max-width: 75%
}

.roadmap-list-inner-section li .flex-wrap .flex-right {
    width: 25%;
    padding: 40px 20px;
    position: relative;
    max-width: 25%;
    text-align: center
}

.banner-inner-section .flex-wrap {
    align-items: center
}

.banner-inner-section h1 {
    margin-bottom: 0
}

section.filter-section {
    margin-bottom: 40px
}

.rd-list-title {
    font-family: var(--zf-secondary-bold);
    color: #000;
    font-size: 24px;
    margin: 0 0 10px;
    display: block
}

.tag-last-feedback::after {
    content: '|';
    position: absolute;
    right: -18px;
    font-size: 18px;
    top: -4px;
    color: #929292
}

span.tag-module {
    position: relative;
    padding: 0 0 0 35px;
    cursor: pointer
}

span.tag-module::before {
    background-position: -80px 0
}

.roadmap-list-inner-section li .flex-wrap .flex-right::before {
    content: '';
    background: -webkit-linear-gradient(to bottom,transparent 33%,#3e3e3e40 0%) left/1px 10px repeat-y;
    background: -webkit-linear-gradient(top,transparent 33%,#3e3e3e40 0%) left/1px 10px repeat-y;
    background: linear-gradient(to bottom,transparent 33%,#3e3e3e40 0%) left/1px 10px repeat-y;
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 0
}

span.rd-record-count {
    font-family: var(--zf-secondary-bold);
    font-size: 40px;
    display: block;
    color: #f04141;
    line-height: 36px
}

a.rd-feedback-button {
    background: #000;
    display: block;
    max-width: 220px;
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 30px auto 0;
    position: relative;
    overflow: hidden
}

span.rd-record-text {
    color: #000
}

a.rd-responses-wrap {
    cursor: initial
}

.flex-wrap:not(.completedstatus) .rd-responses-wrap {
    cursor: pointer
}

.flex-search {
    width: 40%;
    position: relative
}

.flex-module.drpdwn_option {
    width: 21%
}

.flex-status.drpdwn_option {
    width: 20%
}

.flex-sort.drpdwn_option {
    width: 20%
}

.tag-status {
    background: #ffeaea;
    border: 1px solid #e8afaf;
    border-radius: 50px;
    padding: 5px 15px 5px 40px;
    position: relative;
    font-size: 13px;
    text-transform: capitalize
}

.in_progress {
    background: #fffaea;
    border: 1px solid #e3d6a9;
    padding: 5px 15px 5px 40px;
    position: relative
}

.completed {
    background: #eafff0;
    border: 1px solid #a4e5b7;
    border-radius: 50px;
    padding: 5px 15px 5px 40px;
    position: relative;
    font-size: 13px
}

.completed::before {
    background-position: -108px 0
}

.in_progress::before {
    background-position: -140px 0
}

#pagination {
    display: inline-block;
    text-align: right;
    width: 100%
}

#pagination button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #000;
    margin: 0 5px;
    cursor: pointer
}

#pagination .active {
    background: #000;
    color: #fff
}

div#pagination button:only-child {
    display: none
}

.no-record {
    background: #fdf3e8;
    border: 1px solid #edddcc;
    text-align: center;
    padding: 30px;
    margin: 30px 0 0
}

.completedstatus .rd-feedback-button {
    display: none
}

@media(max-width: 767px) {
    .roadmap-list-inner-section li .flex-wrap .flex-right {
        width:100%;
        max-width: 100%;
        padding: 0 0 40px
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .roadmap-list-inner-section li .flex-wrap .flex-left {
        max-width: 100%;
        width: 100%
    }

    .tag-last-feedback::after {
        content: none
    }

    span.tag-module {
        padding-left: 25px
    }

    .tag-module::before {
        left: 0
    }
}

@media(max-width: 767px) {
    .flex-wrap .flex-left,.flex-wrap .flex-right {
        max-width:100%
    }

    .banner-inner-section {
        text-align: center
    }

    .banner-inner-section .flex-right {
        text-align: center;
        margin-top: 10px
    }

    .flex-search {
        width: 100%
    }

    .flex-wrap>.drpdwn_option {
        width: 30%
    }

    .content-sec {
        text-align: center
    }

    .tags-wrap {
        width: 290px;
        margin: 0 auto;
        text-align: center
    }

    .tags-wrap span {
        margin-right: 0
    }

    a.rd-feedback-button {
        margin-top: 15px
    }
}