@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
    --fontSize: 14px;
    --transition: .5s;
    --mainColor: #ed2775;
    --whiteColor: #fff;
    --blackColor: #262a37;
    --gradientColor: linear-gradient(44.44deg, #ed2775 7.79%, #ff7448 94.18%);
    --paragraphColor: #716c80;
    --fontFamily: Inter, sans-serif
}

.filterBox {
    width: 100%;
    padding: 30px;
    background: #262a37;
    border-radius: 70px
}

.filterBox .input-search {
    width: 100%;
    background-color: #f7f7ff;
    border-radius: 50px;
    position: relative
}

.filterBox .input-search input {
    width: 100%;
    border-radius: 50px;
    border: 0;
    background: transparent;
    font-family: var(--fontFamily);
    font-size: 30px;
    padding-left: 100px;
    color: #262a37;
    outline: 0;
    letter-spacing: 1px
}

.filterBox .input-search input::placeholder {
    color: #262a37;
    opacity: 1
}

.filterBox .input-search input:-ms-input-placeholder {
    color: #fff
}

.filterBox .input-search input::-ms-input-placeholder {
    color: #fff
}

.filterBox .input-search span {
    display: block;
    width: 60px;
    padding-top: 10px;
    position: absolute;
    left: 32px;
    text-align: center;
    color: #262a37;
    font-size: 20px
}

.categories-box {
    padding: 30px 0;
    overflow-x: scroll;
    overflow-y: hidden
}

.categories-box ul {
    width: 130%;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.categories-box ul li {
    display: inline-block;
    height: 35px

}

.categories-box ul li a {
    background: linear-gradient(44.44deg, #ed2775 7.79%, #ff7448 94.18%);
    text-decoration: none;
    color: white;
    font-size: 18px;
    padding: 4px 18px;
    font-family: var(--fontFamily);
    font-weight: 600;
    letter-spacing: 1px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    margin-right: 6px
}

.categories-box ul li a:before {
    content: "+";
    display: inline-block;
    margin-right: 7px;
    width: 11.5px
}

.categories-box ul li a:hover {
    background: var(--mainColor);
    color: #fff;
    border-bottom-left-radius: 10px
}

.categories-box ul li a.selected {
    background: var(--mainColor);
    color: #fff;
    border-bottom-left-radius: 10px
}

.categories-box ul li a.selected:before {
    content: "-"
}

.filter-countries-box {
    height: 460px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    direction: rtl
}

.filter-countries-box::-webkit-scrollbar {
    width: 20px
}

.filter-countries-box::-webkit-scrollbar-track {
    background: rgb(13, 13, 13);
    background: linear-gradient(90deg, rgba(13, 13, 13, 1) 40%, rgba(37, 37, 37, 1) 40%, rgba(37, 37, 37, 1) 57%, rgba(13, 13, 13, 1) 57%)
}

.filter-countries-box::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 3px solid #fff
}

.chaineShow::-webkit-scrollbar {
    width: 20px
}

.chaineShow::-webkit-scrollbar-track {
    background: rgb(13, 13, 13);
    background: linear-gradient(90deg, rgba(13, 13, 13, 1) 40%, rgba(37, 37, 37, 1) 40%, rgba(37, 37, 37, 1) 57%, rgba(13, 13, 13, 1) 57%)
}

.chaineShow::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 3px solid #fff
}

.filter-countries-box .country {
    color: #fff;
    cursor: pointer;
    font-family: var(--fontFamily);
    font-size: 21px;
    padding: 10px 35px;
    direction: ltr
}

.filter-countries-box .selected {
    background: linear-gradient(279.99deg, #9f5ff1 -1.19%, #ff54b0 50.96%, #ff9f5a 99.95%)
}

.row.box-data {
    margin-top: 30px;
    margin-bottom: 35px
}

.chaineShow {
    border-left: 2px solid rgba(37, 37, 37, 1);
    padding: 0 30px;
    height: 460px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative
}

.chaineShow a {
    display: block;
    padding: 6px 10px;
    font-size: 16px;
    text-decoration: none;
    color: #b6b6b6;
    border-radius: 20px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap
}

.chaineShow a:after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #0d0d0d;
    position: absolute;
    right: 18px;
    top: 18px;
    display: none
}

.chaineShow a:hover:after {
    display: block
}

.chaineShow a:hover {
    background: #191919
}

.chaineShow a.sign:after {
    display: block
}

.chaineShow a.sign {
    background: linear-gradient(279.99deg, #9f5ff1 -1.19%, #ff54b0 50.96%, #ff9f5a 99.95%);
    color: white;
    font-weight: bold;
    margin: 10px 0
}

.paul-nav-tabs-wrapper {
    --n-tabs-color-accent-fallback: #61ce70;
    --n-tabs-color-secondary-fallback: #54595f;
    --n-tabs-default-padding-block: 15px;
    --n-tabs-default-padding-inline: 35px;
    --n-tabs-background-color: var(--e-global-color-primary);
    --n-tabs-display: flex;
    --n-tabs-direction: column;
    --n-tabs-gap: 10px;
    --n-tabs-heading-display: flex;
    --n-tabs-heading-direction: row;
    --n-tabs-heading-grow: initial;
    --n-tabs-heading-justify-content: center;
    --n-tabs-heading-width: initial;
    --n-tabs-heading-overflow-x: initial;
    --n-tabs-heading-wrap: nowrap;
    --n-tabs-border-width: 1px;
    --n-tabs-border-color: #d5d8dc;
    --n-tabs-content-display: flex;
    --n-tabs-title-color: var(--e-global-color-secondary, var(--n-tabs-color-secondary-fallback));
    --n-tabs-title-color-hover: #fff;
    --n-tabs-title-color-active: #fff;
    --n-tabs-title-background-color: #f1f2f3;
    --n-tabs-title-background-color-hover: var(--e-global-color-accent, var(--n-tabs-color-accent-fallback));
    --n-tabs-title-background-color-active: var(--e-global-color-accent, var(--n-tabs-color-accent-fallback));
    --n-tabs-title-width: initial;
    --n-tabs-title-height: initial;
    --n-tabs-title-font-size: 1rem;
    --n-tabs-title-white-space: initial;
    --n-tabs-title-justify-content-toggle: initial;
    --n-tabs-title-align-items-toggle: center;
    --n-tabs-title-justify-content: center;
    --n-tabs-title-align-items: center;
    --n-tabs-title-text-align: center;
    --n-tabs-title-direction: row;
    --n-tabs-title-gap: 10px;
    --n-tabs-title-flex-grow: 0;
    --n-tabs-title-flex-basis: content;
    --n-tabs-title-flex-shrink: initial;
    --n-tabs-title-order: initial;
    --n-tabs-title-padding-top: var(--n-tabs-default-padding-block);
    --n-tabs-title-padding-bottom: var(--n-tabs-default-padding-block);
    --n-tabs-title-padding-left: var(--n-tabs-default-padding-inline);
    --n-tabs-title-padding-right: var(--n-tabs-default-padding-inline);
    --n-tabs-title-border-radius: initial;
    --n-tabs-title-transition: .3s;
    --n-tabs-icon-color: var(--e-global-color-secondary, var(--n-tabs-color-secondary-fallback));
    --n-tabs-icon-color-hover: var(--n-tabs-title-color-hover);
    --n-tabs-icon-color-active: #fff;
    --n-tabs-icon-gap: 5px;
    max-width: 100%;
    width: 100%;
    --n-tabs-title-padding-inline-start: var(--n-tabs-title-padding-left);
    --n-tabs-title-padding-inline-end: var(--n-tabs-title-padding-right);
    --n-tabs-title-padding-block-start: var(--n-tabs-title-padding-top);
    --n-tabs-title-padding-block-end: var(--n-tabs-title-padding-bottom);
    --n-tabs-title-border-radius: 10px 10px 10px 10px
}

.paul-nav-tabs {
    display: var(--n-tabs-heading-display);
    flex-basis: var(--n-tabs-heading-width);
    flex-direction: var(--n-tabs-heading-direction);
    flex-shrink: 0;
    flex-wrap: var(--n-tabs-heading-wrap);
    gap: var(--n-tabs-title-gap);
    justify-content: var(--n-tabs-heading-justify-content);
    overflow-x: var(--n-tabs-heading-overflow-x);
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: 40px;
    border-bottom: 0
}

.paul-nav-tabs .paul-nav-link {
    align-items: var(--n-tabs-title-align-items-toggle, var(--n-tabs-title-align-items));
    background-color: var(--n-tabs-background-color);
    border-radius: var(--n-tabs-title-border-radius);
    border-style: none;
    border-width: var(--n-tabs-border-width);
    display: flex;
    flex-basis: var(--n-tabs-title-flex-basis);
    flex-direction: var(--n-tabs-title-direction);
    flex-grow: var(--n-tabs-title-flex-grow);
    flex-shrink: var(--n-tabs-title-flex-shrink);
    gap: var(--n-tabs-icon-gap);
    height: var(--n-tabs-title-height);
    justify-content: var(--n-tabs-title-justify-content-toggle, var(--n-tabs-title-justify-content));
    padding-block-end: var(--n-tabs-title-padding-block-end);
    padding-block-start: var(--n-tabs-title-padding-block-start);
    padding-inline-end: var(--n-tabs-title-padding-inline-end);
    padding-inline-start: var(--n-tabs-title-padding-inline-start);
    position: relative;
    transition: background var(--n-tabs-title-transition), color var(--n-tabs-title-transition), border var(--n-tabs-title-transition), box-shadow var(--n-tabs-title-transition), text-shadow var(--n-tabs-title-transition), stroke var(--n-tabs-title-transition), stroke-width var(--n-tabs-title-transition), -webkit-text-stroke-width var(--n-tabs-title-transition), -webkit-text-stroke-color var(--n-tabs-title-transition), transform var(--n-tabs-title-transition);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: var(--n-tabs-title-white-space);
    width: var(--n-tabs-title-width);
    color: var(--n-tabs-title-color)
}

.paul-nav-tabs .paul-nav-link.active {
    background-color: var(--e-global-color-secondary);
    color: var(--n-tabs-title-color-active)
}