.horizontal-scrollable-tabs {
  min-height: 50px;
}

.horizontal-scrollable-tabs .arrow-right {
  float: right;
}
.horizontal-scrollable-tabs .arrow-left {
  float: left;
}
/* Customize your arrows here */
.horizontal-scrollable-tabs .scroller {
  font-size: 18px;
  color: red;
  padding: 10px 10px;
  display: none;
}
.horizontal-scrollable-tabs .scroller.disabled {
  color: #82868b;
  border-color: #82868b;
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
  flex-wrap: nowrap;
}
/* As it has a mobile focus the scrollbar is removed */
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal::-webkit-scrollbar {
  width: 0 !important;
}
/* It's good to add a min-width so that the items have the same width */
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li {
  float: none;
  min-width: 50px;
  text-align: center;
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li > a.dropdown-toggle{
  color: var(--bs-secondary);
  border: none;
  min-width: auto;
  font-weight: 450;
  padding: 0.61rem 1.2rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li > a.dropdown-toggle>i{
  margin-right: 0.5rem;
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li > a.dropdown-toggle.active{
  position: relative;
  color: var(--bs-primary);
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li > a.dropdown-toggle::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: -webkit-linear-gradient(60deg,var(--bs-primary),rgba(var(--bs-primary-rgb),.5))!important;
  background: linear-gradient(30deg,var(--bs-primary),rgba(var(--bs-primary-rgb),.5))!important;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  -webkit-transform: translate3d(0,150%,0);
  transform: translate3d(0,150%,0);
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li > a.dropdown-toggle.active:before {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal > li > a.dropdown-toggle.active:after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EABAF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}