.tabs-navs {   
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab {  
  cursor: pointer;
  display: flex;
  padding: .55em;
  font-size: .9rem;
  font-weight: bold;
  border-bottom: 3px solid transparent; 
  color: var(--flex-text-muted);
  margin-right: .5em;
}

.tab:hover {
  color: var(--flex-text-primary);  
}

.tab.active {
  border-color: var(--flex-bg-primary) !important; 
  color: var(--flex-text-primary) !important;
  cursor: default !important;
}

.tab.disabled {
  pointer-events: none;
}


.tab > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tab-stretch > * {
  flex-grow: 1;
  justify-content: center;
}

.tab-icon {
  font-size: 1rem;  
}
.tab-icon.icon-left {
  margin-right: 2px;
}
.tab-icon.icon-right {
  margin-left: 2px;
}
.text-capitalize {
  text-transform: capitalize;
}
.tabs-content-container {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.no-tab-found {
  text-transform: initial; 
}

.xxs > span, .xxs > .tab-icon { font-size: var(--flex-text-xxs); }
.xs > span, .xs > .tab-icon { font-size: var(--flex-text-xs); }
.sm > span, .sm > .tab-icon { font-size: var(--flex-text-sm); }
.md > span, .md > .tab-icon { font-size: var(--flex-text-base); }
.lg > span, .lg > .tab-icon { font-size: var(--flex-text-lg); }
.xl > span, .xl > .tab-icon { font-size: var(--flex-text-xl); }
.xlx2 > span, .xlx2 > .tab-icon { font-size: var(--flex-text-2xl); }
.xlx3 > span, .xlx3 > .tab-icon { font-size: var(--flex-text-3xl); }
.xlx4 > span, .xlx4 > .tab-icon { font-size: var(--flex-text-4xl); }
.xlx5 > span, .xlx5 > .tab-icon { font-size: var(--flex-text-5xl); }
.xlx6 > span, .xlx6 > .tab-icon { font-size: var(--flex-text-6xl); }