/* 2019-1-23 - TK: css for vertical tab */
.tab-component-wrapper.vertical {
	display:flex;
}
.tab-component-wrapper.vertical .tabs {
	flex:0 1 auto;
	border:none;
	margin-right:25px;
	flex-direction: column;
}
.tab-component-wrapper.vertical .tabs > li {
	display:block;
	text-align:left;
	font-size:16px;
	line-height:26px;
}
.tab-component-wrapper.vertical:not(.sticky) .tabs > li > a::before {
	font-family:FontAwesome;
	content:"\f144";
	display:inline-block;
	padding-right:8px;
	vertical-align:middle;
	color:#ccc;
}
.tab-component-wrapper.vertical:not(.sticky) .tabs > li > a.selected::before {
	color:#009688;
}
.tab-component-wrapper.vertical.sticky .tabs > li {
	border-radius:18px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.selected {
	background-color:#009688;
	border-radius:18px;
}
.tab-component-wrapper.vertical.sticky .tabs > li > a {
	font-weight:400;
	color:#fff;
}
.tab-component-wrapper.vertical.sticky .tabs > li > a.selected {
	color:#fff;
}
.tab-component-wrapper.vertical .tabs > .slash {
	display:none;
}
.tab-component-wrapper.vertical .tab-content-container {
	flex:1 1 auto;
}
.tab-component-wrapper.vertical.sticky .tab-content-container > .tab-pane {
	display:block !important;
	margin-bottom:50px;
}
.tab-component-wrapper.vertical.sticky .tabs.fixed {
	position:fixed;
	z-index:999;
	margin-top:55px;
	background-color:#fff;
	-webkit-perspective:1000;
	-webkit-animation-duration:0.5s;
	animation-duration:0.5s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-name:stickyMenu;
	animation-name:stickyMenu;
}
/* 2019-1-25 - TK: css for mobile */
@media only screen and (max-width: 768px) {
	.tab-component-wrapper.vertical {
		display:block;
	}
	/* 2019-2-25 - TK: also hide for non-sticky tabs */
	.tab-component-wrapper.vertical .tabs {
		display:none !important;
	}
}
/* 2019-2-25 - TK: css for vertical non-sticky tab for */
.tab-component-wrapper.vertical .tab-content-container > .tab-pane > li.mobile-tab-title {
	display:none;
}
@media only screen and (max-width: 768px) {	
	.tab-component-wrapper.vertical .tab-content-container > .tab-pane > li.mobile-tab-title {
		display:block;
		text-align: left;
		font-size: 16px;
		line-height: 26px;
		padding:5px 20px;
	}
	.tab-component-wrapper.vertical .tab-content-container > .tab-pane > li.mobile-tab-title > a {
		color:rgba(39,47,56,.7);
		font-weight:300;
	}
	.tab-component-wrapper.vertical .tab-content-container > .tab-pane > li.mobile-tab-title > a::before {
		font-family:FontAwesome;
		content:"\f144";
		display:inline-block;
		padding-right:8px;
		vertical-align:middle;
		color:#ccc;
	}
	.tab-component-wrapper.vertical .tab-content-container > .tab-pane > li.mobile-tab-title.selected > a {
		color: #272f38;
		font-weight: 600;
	}
	.tab-component-wrapper.vertical .tab-content-container > .tab-pane > li.mobile-tab-title.selected > a::before {
		color:#009688;
	}
}
/* 2019-3-27 - TK: add class for tree structure tab */
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-0 {
	/* color: black; */
}

.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-0 > a {
	color: black;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-1 {
	margin-left: 10px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-2 {
	margin-left: 20px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-3 {
	margin-left: 30px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-4 {
	margin-left: 40px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-5 {
	margin-left: 50px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-6 {
	margin-left: 60px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-7 {
	margin-left: 70px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-8 {
	margin-left: 80px;
}
.tab-component-wrapper.vertical.sticky .tabs > li.tab-level-9 {
	margin-left: 90px;
}

/* 2019-4-10 kelvin: tree-tab-pane */
.tab-component-wrapper.vertical.sticky .tab-content-container > .tree-tab-pane {
	margin-bottom: 16px;
	/* for tab navigate and a href # position */
	margin-top: -90px;
	padding-top: 90px;
}

@media only screen and (max-width: 768px) {	
	.tab-component-wrapper.vertical.sticky .tab-content-container > .tree-tab-pane {
		margin-bottom: 10px;
	}
}

/* 2019-4-18 kelvin: css for show-one-by-one */
.tab-component-wrapper.show-one-by-one .tabs > li.selected {
	background-color:#009688;
	border-radius:18px;
}
.tab-component-wrapper.show-one-by-one .tabs > li > a {
	font-weight:400;
	color:#999;
}
.tab-component-wrapper.show-one-by-one .tabs > li > a.selected {
	color:#fff;
}
.tab-component-wrapper.show-one-by-one .tabs > .slash {
	display:none;
}
.tab-component-wrapper.show-one-by-one .tab-content-container {
	flex:1 1 auto;
}

.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-0 > a {
	color: black;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-1 {
	margin-left: 10px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-2 {
	margin-left: 20px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-3 {
	margin-left: 30px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-4 {
	margin-left: 40px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-5 {
	margin-left: 50px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-6 {
	margin-left: 60px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-7 {
	margin-left: 70px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-8 {
	margin-left: 80px;
}
.tab-component-wrapper.show-one-by-one .tabs > li.tab-level-9 {
	margin-left: 90px;
}

.tab-component-wrapper.show-one-by-one .tabs > li > a::before {
	content: none !important;
}


/* 
.tab-component-wrapper.show-one-by-one .tab-content-container > .tab-pane {
	display:block !important;
	margin-bottom:50px;
}
 */
/* 
.tab-component-wrapper.show-one-by-one .tabs.fixed {
	position:fixed;
	z-index:999;
	margin-top:55px;
	background-color:#fff;
	-webkit-perspective:1000;
	-webkit-animation-duration:0.5s;
	animation-duration:0.5s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-name:stickyMenu;
	animation-name:stickyMenu;
}
 */