.nav-tabs { margin: 0px; padding: 0; list-style: none; display: flex; background-repeat: repeat-y; }
.nav-tabs li { cursor: pointer; position: relative; display: block; width:100%; }
.nav-tabs li.addtab { width:100px; }
.nav-tabs li.current:after, .nav-tabs li:hover::after { opacity: 1; }
.tab-content { display: none; }
.tab-content.active { display: block; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-name: fade-in; -moz-animation-name: fade-in; animation-name: fade-in; }
.tabs .mobile-tabs { display: none; }
.tabs select { display: none; cursor: pointer; margin: 0; outline: none; }
.tab-content .element-bar { display: none !important; }
.tab-content .element-bar.showit { display: block !important; }
ul.sub-tabs {position: absolute; opacity: 0; pointer-events: none; transition: all 0.25s ease-in-out; padding: 15px 30px; margin: 0px; list-style: none; background-color: #ffffff; z-index: 1; width: 100%; left: 0px; top: 100%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);}
ul.sub-tabs > li {text-align: left; padding: 4px 0px; background-color: white; color: black;}
.nav-tabs > li.has-sub::before {content: '\f107'; font-family: 'Font Awesome 5 Pro'; font-weight: 400; position: absolute; right: 15px; top: 15px;}
.nav-tabs > li.has-sub:hover ul.sub-tabs {opacity: 1; pointer-events: all;}

/* DESIGN RELATED */
.nav-tabs li { background:#000; color:#FFF; font-weight: 700; font-size: 13px; line-height: 18px; padding: 10px 20px; text-align: center; }
/* .nav-tabs li:hover, .nav-tabs li.current { color:#FFF; }  */
.nav-tabs li:after { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #e2cc9f; opacity: 0; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.nav-tabs li a { color: #FFF; }
.tab-content { padding:0; }
.tabs .mobile-tabs { margin-bottom: 7px; padding-top: 7px; }
.tabs select { font-weight:700; font-size: 16px; /*border:none; */ background: url("../img/tab_select.png") no-repeat; background-position: calc(100% - 10px) center; padding: 7px 10px;  width: 100%; max-width:300px; }
.nav-tabs > li.has-sub:hover:after { background-color: #898989; }
ul.sub-tabs > li:hover {color: #898989;}

@media screen and (max-width: 1023px) {
	.tabs .mobile-tabs, .tabs select { display: block; }
	ul.nav-tabs { display: none; }
}

@-webkit-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-in {
    0% { opacity: 0; }
  100% { opacity: 1; }
}