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

:root {
  --fontSize: 1px;
  --transition: .2s;
  --mainColor: #262626;
  --whiteColor: #fff;
  --blackColor: #262A37;
  --gradientColor: linear-gradient(44.44deg,#f24e4e 7.79%,#262626 94.18%);
  --paragraphColor: #4102fe;
  --fontFamily: Inter, sans-serif;
}

.filterBox {
  width: 100%;
  padding: 0px;
  background: #000000;
  border-radius: 70px;
  margin: 0 auto; /* Center horizontally */
}

.filterBox .input-search {
  width: 100%;
  background-color: black;
  border-radius: 10px;
  position: relative;
}

.filterBox .input-search input {
  width: 100%;
  border-radius: 2px;
  border: 2;
  background: #ffffff;
  font-family: var(--fontFamily);
  font-size: 20px;
  padding-left: 70px;
  color: #000000;
  outline: 10;
  letter-spacing: 1px;
  height: 100%; /* reducing the height by 20% */
}

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

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

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

.filterBox .input-search span {
    display: block;
    width: 60px;
    padding-top: -1px;
    position: absolute;
    left: 3px;
    text-align: center;
    color: #000000;
    font-size: 30px
}

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

.categories-box ul {
    width: 100%;
    padding: 0;
    margin: 0
}

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

.categories-box ul li a {
    background: linear-gradient(44.44deg,#DBFF00 7.79%,#DBFF00 94.18%);
    text-decoration: none;
    color: #000000;
    font-size: 19px;
    padding: 3px 10px;
    font-family: var(--fontFamily);
    font-weight: 800;
    letter-spacing: 1px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    margin-right: 2px
}

.categories-box ul li a:before {
    content: '+';
    display: inline-block;
    margin-right: 9px;
    width: 8.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: #DBFF00;
    border-bottom-left-radius: 1px
}

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

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

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

.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: #f53030;
    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: #DBFF00;
    cursor: pointer;
    font-family: var(--fontFamily);
    font-size: 20px;
    padding: 5px 1px;
    direction: ltr
}

.filter-countries-box .selected {
    background: linear-gradient(279.99deg,#000000 -1.19%,#2c2c2c 50.96%,#000000 99.95%)
}

.row.box-data {
    margin-top: 1px;
    margin-bottom: 0px
}

.chaineShow {
    border-left: 2px solid rgb(255 255 255);
    padding: 5 30px;
    height: 400px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative
}

.chaineShow a {
    display: block;
    padding: 1px 0px;
    font-size: 16px;
    text-decoration: none;
    color: #b1b1b1;
    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: 0px;
    height: 5px;
    border-radius: 50%;
    background-color: #000000;
    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,#DBFF00 -1.19%,#DBFF00 50.96%,#DBFF00 99.95%);
    color: black;
    font-weight: bold;
    margin: 6px 0
}