:root {
    --white-color: #ffff;
    --backgroundBody-color: #f2f1f1;
    --background-gray-md-color: #c7c7c7;
    --background-gray-light-color: #f0f0f1;
    --background-socket: 201, 201, 201;
    --black-main-color: 32, 32, 32;
    --gray-seprator: #d4d4d4;
    --primary-color: 229, 81, 183;
    --primary-medium-color: 236, 175, 212;
    --primary-light-color: 236, 175, 212;
    --success-color: 76, 175, 80;
    --secondary-medium-color: 79, 158, 208;
    --gray-md-color: 153, 153, 153;
    --gray-dark-color: 51, 51, 51;
    --gray-light-color: 255, 229, 254;
    --gray-blur-color: 255, 255, 255;
    --menu-height: 12rem;
    --phone-menu-height: 16rem;
    --gap-small: 2rem;
    --gap-md: 4rem;
    --gap-lg: 6rem;
    --nav-font-light: 1.3rem;
    --nav-font-md: 1.5rem;
    --nav-font-lg: 2rem;
    --font-extra-lg: 3.5rem;
    --review-height: 60rem;
}
@media (max-width: 37.5em) {
    :root {
        --nav-font-light: 2rem;
        --nav-font-md: 2.5rem;
    }
}

.loader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    filter: hue-rotate(0deg);
    background: rgba(var(--primary-color), 0.4);
    backdrop-filter: blur(1rem);
    z-index: 1000000000;
    transition: all 0.2s;
    /*   animation:hue 10000ms infinite linear; */
}
.loader__header {
    font-family: inherit;
    color: var(--white-color);
    text-shadow: 0 2px 3px rgba(var(--black-main-color), 0.4);
    position: absolute;
    top: calc(50% - 12rem);
    left: calc(50% - 11rem);
    z-index: 100000000000;
    margin-bottom: 1rem;
}

.loader .b1 {
    left: 42%;
}

.loader .b2 {
    left: 50%;
    animation-delay: 100ms;
}

.loader .b3 {
    left: 58%;
    animation-delay: 200ms;
}

.loader .b1,
.loader .b2,
.loader .b3 {
    width: 10px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 50%;
    transform: rotate(0);
    animation-name: spinify;
    animation-duration: 1600ms;
    animation-iteration-count: infinite;
}

@keyframes spinify {
    0% {
        transform: translate(0px, 0px);
    }
    33% {
        transform: translate(0px, 24px);
        border-radius: 100%;
        width: 10px;
        height: 10px;
    }
    66% {
        transform: translate(0px, -16px);
    }
    88% {
        transform: translate(0px, 4px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes hue {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(10rem);
    }
    80% {
        opacity: 0.9;
        transform: translateX(-1rem);
    }
    100% {
        opacity: 1;
        transform: translate(0px);
    }
}

@keyframes moveInButton {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }
    100% {
        opacity: 1;
        transform: translate(0px);
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
    direction: inherit;
}

::selection {
    background: rgba(var(--primary-color), 1);
    color: var(--white-color);
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* "auto" or "thin" */
    scrollbar-color: #eb51b7 white;
    font-size: 10px;
}
@media (min-width: 122.5em) {
    html {
        font-size: 75%;
    }
}
@media (max-width: 75em) {
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 56.25em) {
    html {
        font-size: 50%;
    }
}
@media (max-width: 37.5em) {
    html {
        font-size: 27%;
    }
}
@media (max-width: 20em) {
    html {
        font-size: 19%;
    }
}

body {
    box-sizing: border-box;
    direction: rtl;
    height: auto;
    background-color: var(--backgroundBody-color);
    width: 100vw;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}
body::after {
    content: "";
    display: table;
    clear: both;
}

main {
    min-height: 100vh;
    margin-bottom: 10rem;
}

.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.active-dot {
    color: rgba(var(--primary-color), 1);
}

.active-category {
    opacity: 1 !important;
    visibility: visible !important;
}

.active-category > .category__item-about {
    opacity: 1 !important;
    visibility: visible !important;
}

.active-category .category__item-link {
    height: 16rem;
    width: inherit;
    transition: all 0.3s;
    z-index: 1;
}

.active-category .category__item-img {
    transform: scale(2) !important;
    transition: all 0.3s;
}

.prev-category {
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s;
}

.prev-category .category__item-link {
    width: 14rem;
    height: 14rem;
    z-index: 1;
    transform: translate(-224%, 9%);
    transition: all 0.3s;
}
@media (max-width: 75em) {
    .prev-category .category__item-link {
        transform: translate(-160%, 9%);
    }
}
@media (max-width: 56.25em) {
    .prev-category .category__item-link {
        transform: translate(-120%, 10%);
    }
}

input,
a {
    -webkit-appearance: none;
    appearance: none;
}

.prev-category .category__item-img {
    transition: all 0.3s;
    transform: translate(3%, 10%);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    direction: ltr;
}

.next-category {
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s;
}

.next-category .category__item-link {
    width: 14rem;
    height: 14rem;
    z-index: 1;
    transform: translate(246%, 10%);
    transition: all 0.3s;
}
@media (max-width: 75em) {
    .next-category .category__item-link {
        transform: translate(160%, 10%);
    }
}
@media (max-width: 56.25em) {
    .next-category .category__item-link {
        transform: translate(120%, 10%);
    }
}

.next-category .category__item-img {
    transition: all 0.3s;
    transform: translate(11%, 5%);
}

/* width */
::-webkit-scrollbar {
    width: 9px;
    border-radius: 1rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    box-shadow: inset 0 1px 4px rgba(var(--black-main-color), 0.3);
    border-radius: 1rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-light-color), 1);
    border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-color), 0.6);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(var(--primary-color), 1);
}

.active-shop {
    color: rgba(var(--primary-color), 1);
}

.fixed {
    position: fixed !important;
    top: var(--menu-height);
    right: auto;
}

.mt-min {
    margin-top: 2rem;
}

.mt-medium {
    margin-top: 4rem;
}

.text_active {
    color: rgba(var(--primary-color), 1);
}

@font-face {
    font-family: Vazir;
    font-style: normal;
    src: url("../../css/fonts/vazir/Vazir-Regular-FD.ttf");
    src: url("../../css/fonts/vazir/Vazir-Regular-FD.eot");
    src: url("../../css/fonts/vazir/Vazir-Regular-FD.woff");
    src: url("../../css/fonts/vazir/Vazir-Regular-FD.woff2");
}

@font-face {
    font-family: Vazir-thin;
    font-style: normal;
    src: url("../../css/fonts/vazir/Vazir-Thin-FD.ttf");
    src: url("../../css/fonts/vazir/Vazir-Thin-FD.eot");
    src: url("../../css/fonts/vazir/Vazir-Thin-FD.woff");
    src: url("../../css/fonts/vazir/Vazir-Thin-FD.woff2");
}

@font-face {
    font-family: vazir-bold;
    font-style: normal;
    src: url("../../css/fonts/vazir/Vazir-Bold-FD.ttf");
    src: url("../../css/fonts/vazir/Vazir-Bold-FD.eot");
    src: url("../../css/fonts/vazir/Vazir-Bold-FD.woff");
    src: url("../../css/fonts/vazir/Vazir-Bold-FD.woff2");
}

body {
    font-family: Vazir;
    font-weight: 400;
    font-size: 1.6rem;
    color: #202020;
    line-height: 1.7;
}

a {
    text-decoration: none;
    color: rgba(var(--black-main-color), 1);
}

ul {
    list-style: none;
}

.u-text-center {
    text-align: center;
}

.u-mg-btm-sml {
    margin-bottom: 1.5rem !important;
}

.u-mg-btm-md {
    margin-bottom: 4rem !important;
}

.u-mg-btm-big {
    margin-bottom: 8rem !important;
}

.u-mg-top-big {
    margin-top: 7rem !important;
}

.u-mg-top-huge {
    margin-top: 10rem !important;
}

.btn,
.btn:link,
.btn:visited {
    font-family: inherit;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    padding: 1.5rem 4rem;
    border-radius: 10rem;
    transition: all 0.2s ease-in;
    position: relative;
    animation: moveInButton 1s ease-out 0.75s;
    animation-fill-mode: backwards;
    border: none;
    cursor: pointer;
}

.btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    border-radius: 10rem;
    transition: all 0.2s;
}

.btn--white {
    background-color: #fff;
    color: #202020;
}
.btn--white:hover {
    transform: translateY(-0.1rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.btn--white:active {
    transform: translateY(0rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}
.btn--white::after {
    background-color: #fff;
}

.btn:hover::after {
    transform: scaleX(1.5) scaleY(1.7);
    opacity: 0;
}

.btn--custom {
    background-color: #e551b7;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.5rem;
    width: 20rem;
    height: 4.5rem;
}
@media (max-width: 56.25em) {
    .btn--custom {
        font-size: 1.5rem;
    }
}
.btn--custom-back {
    background-color: #006b99;
    color: #fff !important;
    font-size: 1.8rem;
    line-height: 1.5rem;
    width: 95%;
    height: 4.5rem;
}
@media (max-width: 37.5em) {
    .btn--custom-back {
        width: 95%;
        height: 8.5rem;
        font-size: 4.5rem;
        margin-top: 4rem;
    }
}
@media (max-width: 37.5em) {
    .btn--custom {
        width: 95%;
        height: 8.5rem;
        font-size: 4.5rem;
    }
}
@media (max-width: 37.5em) {
    .btn--custom-forgot {
        width: 40rem;
        margin-right: -5rem;
        font-size: 4rem;
    }
}

.btn-text:link,
.btn-text:visited {
    text-decoration: none;
    color: #e551b7;
    display: inline-block;
    border-bottom: 1px solid #e551b7;
    padding: 3px;
    font-size: 1.6rem;
}

.btn-mirror {
    background: white;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.11);
    padding: 1.1rem;
    border-radius: 3rem;
}
@supports (backdrop-filter: blur(20px)) {
    .btn-mirror {
        background: rgba(214, 214, 214, 0.25);
        mix-blend-mode: normal;
        backdrop-filter: blur(3px);
    }
}

.btn_base {
    font-family: inherit;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    padding: 1.5rem 4rem;
    border-radius: 10rem;
    transition: all 0.2s ease-in;
    position: relative;
    border: none;
    cursor: pointer;
}

.row {
    max-width: 114rem;
    margin: 0 auto;
}
.row:not(:last-child) {
    margin-bottom: 8rem;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}
.row [class^="col-"] {
    float: left;
}
.row [class^="col-"]:not(:last-child) {
    margin-right: 6rem;
}
.row .col-1-of-2 {
    width: calc((100% - 6rem) / 2);
}
.row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3);
}
.row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem);
}
.row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4);
}
.row .col-2-of-4 {
    width: calc(2 * ((100% - 3 * 6rem) / 4) + 6rem);
}
.row .col-3-of-4 {
    width: calc(3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem);
}

.fw {
    width: 100vw;
}

.head-section {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("/img/category-background.jpg");
    background-size: 100%;
    background-position: center;
    height: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--menu-height) + 1rem);
}
.head-section__searchInput {
    padding: 2rem 6rem 2rem 3rem;
    border: none;
    height: 5.5rem;
    border-radius: 3rem;
    width: 43%;
    transition: all 0.2s;
    outline: none;
    margin-left: 3%;
}
.head-section__searchInput:focus {
    box-shadow: inset 1px 0.3rem 0.4rem rgba(var(--black-main-color), 0.4);
}
.head-section__search-icon {
    width: 3rem;
    position: absolute;
    transform: rotateY(-180deg);
    right: 23%;
    cursor: pointer;
}
.head-section__btn {
    background: rgba(var(--secondary-medium-color), 1);
    color: white;
    text-shadow: 0 2px 3px #00000061;
    position: relative;
    border: none;
    outline: none;
    border-bottom: 0.5rem solid #3d7ba2;
}
.head-section__btn:active {
    color: white !important;
    border-bottom: 0.1rem solid #3d7ba2;
}

.head_container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cart__addressDelivery--deliveryPack.forums__filter--item {
    margin-top: 1.5rem;
}

.cart__priceAddress.forums__filter--container {
    padding: 2rem;
    margin: 0 auto 2rem auto;
}

.cart.forums__main {
    grid-template-columns: [main-start] minmax(78%, 1fr) [main-end price-start] 1fr;
}

.forums__discuss.forums__answer--question {
    height: auto;
}
.forums__discuss.forums__answer--question:hover {
    transform: scale(1);
    box-shadow: 0 2px 0.9rem rgba(0, 0, 0, 0.2);
}

.forums__answer--question > .forums__discuss--description {
    overflow: visible;
    height: auto;
    display: block;
    word-break: break-word;
}

.forums__answer--question > .forums__discuss--tags {
    grid-column: usersAnswered-start/ usersAnswered-end;
    grid-row: 1/2;
    align-self: start;
}

.forums__time-filter {
    display: flex;
    width: 50%;
    height: 5rem;
    justify-content: space-around;
    align-items: center;
    font-size: 1.3rem;
    transition: all 0.2s;
}
.forums__time-filter__btn {
    cursor: pointer;
    transition: all 0.2s;
}
.forums__time-filter__btn--active {
    background: rgba(var(--primary-color), 0.5);
    padding: 0.5rem;
    color: white;
    border-radius: 3rem;
    text-shadow: 0 1px 2px #00000099;
}

.forums__discuss:hover {
    transform: scale(1.01);
    box-shadow: 0 0.8rem 1.2rem rgba(0, 0, 0, 0.2);
}

.forums__discuss {
    width: 100%;
    padding: 1rem 1rem 1.5rem 1rem;
    margin: 2rem 0 1rem 0;
    height: auto;
    box-shadow: 0 2px 0.9rem rgba(0, 0, 0, 0.2);
    border-radius: 3rem;
    display: grid;
    transition: all 0.2s linear;
    grid-column-gap: 2rem;
    grid-template-columns: [icon-start] 10rem [icon-end header-start] 1fr [header-end usersAnswered-start] 5rem [usersAnswered-end answerLength-start] 6rem [answerLength-end];
    grid-template-rows: auto 1fr;
    position: relative;
    grid-row-gap: 2rem;
}
.forums__discuss:not(:last-child) {
    margin-bottom: 6rem;
}
.forums__discuss--user-icon {
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    grid-column: icon-start / icon-end;
    grid-row: 1/2;
}
.forums__discuss--header {
    grid-column: header-start/header-end;
    grid-row: 1/2;
}
.forums__discuss--usersAnswered {
    grid-column: usersAnswered-start / usersAnswered-end;
    display: flex;
    justify-content: flex-end;
}
.forums__discuss--answerLength {
    grid-column: answerLength-start/ answerLength-end;
    grid-row: 1/2;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: white;
    text-shadow: 0 2px 3px #00000061;
    position: absolute;
    width: 6rem;
    top: -41%;
    height: 7rem;
    left: -18%;
}
.forums__discuss--answerBg {
    width: 110%;
    height: 110%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -41%);
    z-index: 1;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.forums__discuss--answerLength--header {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
}
.forums__discuss--answerLength--small {
    position: relative;
    z-index: 2;
    margin-top: -1rem;
    padding-bottom: 1rem;
}
.forums__discuss--usersIcon {
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    margin-right: -1.5rem;
    border: 1px solid #ffffff;
    filter: drop-shadow(0px 0px 0px #ffff);
}
.forums__discuss--description {
    grid-row: 2/3;
    grid-column: icon-start/ usersAnswered-end;
    text-indent: 2rem;
    padding-right: 2rem;
    overflow: hidden;
    display: -webkit-box;
    height: 8rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.forums__discuss--tags {
    grid-column: answerLength-start / answerLength-end;
    grid-row: 2/3;
    align-self: end;
}
.forums__discuss--tags > a {
    color: rgba(var(--secondary-medium-color), 1);
}
.forums__discuss--buttons {
    grid-column: usersAnswered-start / -1;
    grid-row: 2/3;
    align-self: end;
    padding: 1rem 0rem 0 1rem;
    justify-self: end;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.forums__discuss--item {
    margin-left: 1rem;
    transition: all 0.3s;
}
.forums__discuss--item:hover {
    color: rgba(var(--primary-color), 1);
}

.forums__filter {
    position: sticky;
    top: 13rem;
    left: 0;
    height: fit-content;
}
.forums__filter--header {
    width: 100%;
    padding: 0 0 1rem 2rem;
    border-bottom: 1px solid #00000026;
}

.forums__answer-item > .forums__discuss--description {
    overflow: visible;
    height: auto;
    display: block;
    word-break: break-word;
    transition: all 0.2s;
}

.forums__answer-item:hover {
    transform: scale(1);
    box-shadow: 0 2px 0.9rem rgba(0, 0, 0, 0.2);
}

.forums__myAnswer--box {
    display: grid;
    grid-template-columns: [icon-start] 10rem [icon-end name-start] 20rem [name-end other-start] 1fr [other-end submit-start] max-content [submit-end];
    grid-template-rows: 10rem 1fr 5rem;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    width: 100%;
    padding: 1rem 1rem 1.5rem 1rem;
    margin: 2rem 0 1rem 0;
    height: auto;
    box-shadow: 0 2px 0.9rem rgba(0, 0, 0, 0.2);
    border-radius: 3rem;
    transition: all 0.2s linear;
}

.forums__myAnswer--userName {
    grid-row: 1/2;
    padding-top: 1rem;
    grid-column: name-start/name-end;
}

.forums__myAnswer--main-description {
    grid-row: 2/3;
    grid-column: icon-start / submit-end;
}

.forums__myAnswer--rules {
    grid-row: 3/4;
    grid-column: icon-start/other-end;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.forums__myAnswer--checkbox {
    width: 2rem;
    height: 2rem;
    visibility: visible;
    opacity: 1;
    -webkit-appearance: checkbox;
    margin: 0 1rem;
    outline: none;
}

.forums__myAnswer--submit {
    grid-row: 3/4;
    grid-column: submit-start/submit-end;
    background: rgba(var(--secondary-medium-color), 1);
    color: white;
    text-shadow: 0 2px 3px #00000061;
    position: relative;
    border: none;
    outline: none;
}

.forums__question {
    display: grid;
    grid-template-columns: [icon-start] 10rem [icon-end main-start] 1fr [main-end submit-start] max-content [submit-end];
    grid-auto-flow: row;
    width: 100%;
    height: 100%;
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
}

.forums__header {
    grid-column: main-start/main-end;
}

.forums__title {
    grid-column: 1/-1;
    height: 3rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 6rem;
}
.forums__title--label {
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.6);
}
.forums__title--input {
    height: 5rem;
    padding: 1rem 2rem;
    border-radius: 0.2rem;
    border: 1px solid #00000040;
    margin-top: 1rem;
}

.forums__main {
    grid-column: 1/-1;
}

.forums__tags {
    grid-column: 1/-1;
    height: 3rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 6rem;
}
.forums__tags--label {
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.6);
}
.forums__tags--input {
    height: 5rem;
    padding: 1rem 2rem;
    border-radius: 0.2rem;
    border: 1px solid #00000040;
    margin-top: 1rem;
}

.forums__rules {
    grid-column: icon-start/ main-end;
    display: flex;
    align-items: center;
}

.forums__submit {
    grid-column: submit-start/submit-end;
    background: rgba(var(--secondary-medium-color), 1);
    color: white;
    text-shadow: 0 2px 3px #00000061;
    position: relative;
    border: none;
    outline: none;
    width: 16rem;
    display: flex;
    height: 5rem;
    align-items: center;
    justify-content: center;
}

.secondary-answer {
    margin-right: 8rem;
    margin-top: -3rem;
    max-width: calc(100% - 8rem);
    transition: all 0.2s;
    box-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.4);
}
.secondary-answer:hover {
    transform: scale(1);
    box-shadow: 0 2px 0.9rem rgba(0, 0, 0, 0.2);
}

.ck.ck-reset.ck-editor.ck-rounded-corners {
    grid-row: 2/3;
    min-height: 28rem;
    height: auto;
    grid-column: icon-start / submit-end;
}

.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
    height: auto;
    min-height: 23rem;
    border: 1px solid #00000026;
    border-radius: 0rem 0 1rem 1rem;
}

.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred
    > p {
    height: 23rem !important;
}
.forums__filter__div{
    margin: 4px 0;
}
.forums__filter__label {
    width: 100px !important;
    display: inline-block;
}

.select2-selection .select2-selection--multiple {
    width: 100%;
}
#filter_area{
    background: #efefef;
    box-shadow: 1px 3px 10px #d6d6d6;
    border-radius: 7px;
    padding: 10px;
}

.filter-header {
    padding-right: 20px;
}
.forums__filter_searchbut {
    background: rgba(var(--primary-color), 0.3);
    padding: 10px;
    width: 30%;
    margin: 0 auto;
    border-radius: 4px;
    border: 1px solid rgba(var(--primary-color));
    margin:10px 0;
}
.text-center{
    text-align: center !important;
}