.tabs {
   position: relative;
   overflow-x: auto;
   overflow-y: hidden;
   height: 48px;
   width: 100%;
   background-color: #fff;
   margin: 0 auto;
   white-space: nowrap;
   font-weight: 700;
   border-bottom: 1px solid #dadada;
   text-align: center;
}
 .tabs.tabs-transparent {
   background-color: transparent;
}
 .tabs.tabs-transparent .tab a, .tabs.tabs-transparent .tab.disabled a, .tabs.tabs-transparent .tab.disabled a:hover {
   color: rgba(255, 255, 255, 0.7);
}
 .tabs.tabs-transparent .tab a:hover, .tabs.tabs-transparent .tab a.active {
   color: #fff;
}
 .tabs.tabs-transparent .indicator {
   background-color: #fff;
}
 .tabs.tabs-fixed-width {
   display: flex;
}
 .tabs.tabs-fixed-width .tab {
   flex-grow: 1;
}
 .tabs .tab {
   display: inline-block;
   text-align: center;
   line-height: 48px;
   height: 48px;
   padding: 0;
   margin: 0;
   text-transform: uppercase;
   top: -48px;
}
 .tabs .tab a {
   color: rgba(47, 47, 47, .7);
   display: block;
   width: 100%;
   height: 100%;
   padding: 0 24px;
   font-size: 14px;
   text-overflow: ellipsis;
   overflow: hidden;
   transition: color 0.28s ease;
}
 .tabs .tab a:hover, .tabs .tab a.active {
   background-color: transparent;
   color: #2f2f2f;
}
 .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
   color: rgba(47, 47, 47, .7);
   cursor: default;
}
 .tabs .indicator {
   position: absolute;
   bottom: 0;
   height: 2px;
   background-color: #fd6225;
   will-change: left, right;
}
 @media only screen and (max-width: 1024px) {
   .tabs {
     display: flex;
  }
   .tabs .tab {
     flex-grow: 1;
  }
   .tabs .tab a {
     padding: 0 12px;
  }
}