.pc-component-tab .tabs{
    text-align: center;
    border-top: 1px solid #d4d5d7;
    border-bottom: 1px solid #d4d5d7;
    padding: 30px 0;
}
.pc-component-tab .tabs li{
    display: inline-block;
    /* 2019-1-21 jaydon: font size responsive */
    font-size: 2rem;
	}
	.pc-component-tab .tabs li:not(:last-child){
		/* border-right: 1px solid lightgrey; */
	}
	.pc-component-tab .tabs li a{
		color: rgba(39,47,56,.7);
    font-weight: 300;
		padding: 5px 20px;
		display: block;
}
.pc-component-tab .tabs li a.selected{
    color: #272f38;
    font-weight: 600;
}
/* .pc-component-tab .tabs .slash{
    display: inline-block;
    position:relative;
    width:26px;
    height:26px;
    box-sizing:border-box;
    background:linear-gradient(-65deg, transparent 49.5%, rgb(39,47,56) 49.5%, rgb(39,47,56) 50.5%, transparent 50.5%);
} */

.pc-component-tab .tabs .slash{
    position: relative;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    display: inline-block;
}
  
.pc-component-tab .tabs .slash:not(:last-child)::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #d4d5d7;
    transform-origin: bottom center;
    transform: rotateZ(-65deg) scale(1.414);
    animation: slash 5s infinite ease;
}

.pc-component-tab .tabs .slash:last-child {
	display:none;
}

.pc-component-tab .tab-content-container{
	padding-top: 30px;
}
/* 2018-12-22 jaydon: grid item in tab use relative */
/* 
.pc-component-tab .grid-stack-item{
    position: relative;
    display: inline-block;
    top: 0 !important;
    left: 0 !important;	
}
 */

/* 2020-1-30 - TK: FUJY fix tab too big in mobile */
@media only screen and (max-width: 768px) {
	.pc-component-tab .tabs {
		padding:15px 0;
	}
	.pc-component-tab .tabs li {
		padding:0 5px;
		font-size:14px;
	}
}
  
/* 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;
}
.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 {
	overflow:auto;
}
.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:#999;
}
.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;
}

.tab-component-wrapper.horizontal.sticky .tabs.fixed { 
	position:fixed;
	z-index:999;
	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 */
	/* 2020-3-11 - TK: FO KEL!!!! */
	/*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;
}
 */

/* 2020-3-16 - TK: add css for sticky mobile select menu */
.tab-component-wrapper .mobi-tabs-select {
	width:100%;
	padding:10px;
	display:none;
	position:fixed;
	left:0;
	z-index:999;
	background-color:#fff;
}
.tab-component-wrapper.vertical .mobi-tabs-select .select2 {
	width:100% !important;
}
@media only screen and (max-width: 768px) {
	.pc-component-tab .tab-content-container {
		padding-top:0;
	}
	.tab-component-wrapper.vertical .mobi-tabs-select {
		display:block;
	}
	.tab-component-wrapper.vertical.sticky .sticky-wrapper {
		display:none !important;
	}
}