.wc_tabset { display: flex; flex-direction: column; height: 100%; width: 100%; }

.wc_tabset > ul { display: flex; flex-direction: row; flex-wrap: wrap; flex: 0; list-style: none; margin: 0; padding-left: 3px; }
.wc_tabset > ul:empty { border-bottom: none; }
.wc_tabset > ul > li { display: flex; height: 34px; }
.wc_tabset > ul > li img { width: 24px; }
.wc_tabset > ul > li > a { text-decoration: none;  width: 100%; display: flex; flex-direction: row; padding: 0px 12px; align-items: center; justify-content: center; }
.wc_tabset > ul > li > a span { flex: 1; white-space: nowrap; }

.wc_tabset > ul > li.closeable > a span { padding: 0 10px 0 5px; }
.wc_tabset > ul > li a.close-tab { font-size: 14px; text-decoration: none; color: #aaa; }
.wc_tabset > ul > li a.close-tab:hover { color: #BD362F; }

/**********************************************************************************************************************
 * Style: tabs
 **********************************************************************************************************************/

.wc_tabset > ul.tabs { border-bottom: 1px solid #ddd; }
.wc_tabset > ul.tabs:empty { border-bottom: none; }
.wc_tabset > ul.tabs > li { border-radius: 4px 4px 0 0; background-color: #f4f4f4; border: 1px solid transparent; border-bottom-color: #ddd; position: relative; top: 1px; min-width: 50px; margin-left: 2px; }
.wc_tabset > ul.tabs > li > a { border-radius: 4px 4px 0 0; color: #aaa; }

.wc_tabset > ul.tabs > li.active { border-color: #ddd; border-bottom-color: white; background-color: white; }
.wc_tabset > ul.tabs > li.active > a span { color: #555; }

.wc_tabset.dark ul.tabs { border-color: #444; }
.wc_tabset.dark ul.tabs > li { background-color: #444; border-color: #444; border-bottom-color: #444; }
.wc_tabset.dark > ul.tabs > li > a { color: white; }

.wc_tabset.dark ul.tabs > li.active { background-color: #666; border-color: #444; border-bottom-color: #666; }
.wc_tabset.dark > ul.tabs > li.active > a span { color: white; }

/**********************************************************************************************************************
 * Style: pills
 **********************************************************************************************************************/

.wc_tabset > ul.pills { padding-top: 5px; padding-bottom: 5px; }
.wc_tabset > ul.pills > li { border-radius: 5px; background-color: transparent; margin-left: 5px; }
.wc_tabset > ul.pills > li > a { border-radius: 5px; color: #08c; }

.wc_tabset > ul.pills > li.active { background-color: #08c; }
.wc_tabset > ul.pills > li.active > a { color: white; }