/* horizontal__tabs__old */
/* .horizontal__tabs {
  @apply relative z-[3] pt-[15px] shadow-[0px_0px_0px_0px_#0000000a,_4px_5px_14px_0px_#0000000a,_5px_8px_20px_0px_#0000000f,_37px_45px_35px_0px_#00000005,_65px_85px_41px_0px_#00000003,_102px_125px_45px_0px_#0000];
}
.horizontal__tabs .inner__wrapper {
  @apply overflow-x-auto w-full;
}
.horizontal__tabs .horizontal__tab__item {
  @apply inline-block whitespace-pre text-[16px] text-textTertiary font-Biotif__Regular px-[15px] py-[10px] duration-500 relative before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-[0px] before:h-[2px] before:bg-primaryColorSD before:duration-500 hover:bg-primaryBlackSD200;
}
.horizontal__tabs .horizontal__tab__item.active {
  @apply before:w-full text-primaryColorSD;
} */
/* horizontal__tabs__old__end */

/* horizontal__tab */
/* .horizontal__tab__wrapper {
  @apply bg-headerBg shadow-mediumFloatShadow rounded-t-[8px];
}
.horizontal__tab__wrapper .inner__scroll__wrapper {
  @apply overflow-x-auto w-full whitespace-pre inline-flex rounded-t-[8px];
}
.horizontal__tab__wrapper .ht__item {
  @apply inline-flex items-center py-[13px] px-[20px] text-[16px] font-Biotif__Medium text-textSecondary cursor-pointer relative duration-300 before:content-[''] before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-primaryColorSD before:duration-300 hover:bg-primaryBlackSD100 dark:hover:bg-primaryBlackSD700;
}
.horizontal__tab__wrapper .ht__item .i__Icon {
  @apply w-[20px] h-[20px] mr-[10px] relative top-[-1px];
}
.horizontal__tab__wrapper .ht__item .ht__text {
  @apply inline-block max-w-[250px] whitespace-pre overflow-hidden text-ellipsis;
}
.horizontal__tab__wrapper .ht__item:hover .ht__text {
  @apply text-textDark dark:text-[#ffffff];
}
.horizontal__tab__wrapper .ht__item:hover .i__Icon svg {
  @apply fill-textDark;
}
.horizontal__tab__wrapper .ht__item:hover .i__Icon.i__IconAnimated svg *[stroke]{
  @apply stroke-textDark;
}
.horizontal__tab__wrapper .ht__item:hover .i__Icon.i__IconAnimated svg *[fill]{
  @apply fill-textDark;
}
.horizontal__tab__wrapper .ht__item.active {
  @apply text-primaryColorSD shadow-raiseShadow dark:shadow-none before:w-full;
}
.horizontal__tab__wrapper .ht__item.active .i__Icon svg {
  @apply fill-primaryColorSD;
}
.horizontal__tab__wrapper .ht__item.active .i__Icon.i__IconAnimated svg *[stroke]{
  @apply stroke-primaryColorSD;
}
.horizontal__tab__wrapper .ht__item.active .i__Icon.i__IconAnimated svg *[fill]{
  @apply fill-primaryColorSD;
}
.horizontal__tab__wrapper .ht__item.active:hover .ht__text {
  @apply text-primaryColorSD;
}
.horizontal__tab__wrapper .ht__item.active:hover .i__Icon svg {
  @apply fill-primaryColorSD;
}
.horizontal__tab__wrapper .ht__item.active:hover .i__Icon.i__IconAnimated svg *[stroke]{
  @apply stroke-primaryColorSD;
}
.horizontal__tab__wrapper .ht__item.active:hover .i__Icon.i__IconAnimated svg *[fill]{
  @apply fill-primaryColorSD;
} */
/* horizontal__tab__end */


/* v4 new css start */
.horizontal__tab__wrapper .ht__item {
    margin-left: -1px;
    display: inline-flex;
    min-height: 34px;
    width: auto;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--lightBorderSD);
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 7px;
    transition-duration: 300ms
}
.horizontal__tab__wrapper .ht__item:first-child {
    margin-left: 0px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}
.horizontal__tab__wrapper .ht__item:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-right-width: 1px
}
.horizontal__tab__wrapper .ht__item:hover {
    background-color: var(--bgSurface)
}
.horizontal__tab__wrapper .ht__item:is(.dark *) {
    border-color: var(--light-border-100)
}
.horizontal__tab__wrapper .ht__item .ht__text {
    display: inline-block;
    font-family: Matter-Regular;
    font-size: 14px;
    color: var(--textSecondary)
}
.horizontal__tab__wrapper .ht__item.active {
    position: relative;
    z-index: 2;
    border-color: var(--primaryColor2SD);
    background-color: var(--primaryColor2SD100)
}
.horizontal__tab__wrapper .ht__item.active:is(.dark *) {
    background-color: var(--customDark100)
}
.horizontal__tab__wrapper .ht__item.active .ht__text {
    color: var(--primaryColor2SD)
}
/* v4 new css end */