﻿/* HORIZONTAL TABS */

.hr-tabs-nav-icon {margin-right: 5px; vertical-align: middle; }
.hr-tabs-nav-icon + span {vertical-align: middle; }

/* tabs style 1 */
.tab-content>.tab-pane {display: block !important; visibility: hidden; height: 0; overflow: hidden; min-height: auto; position: absolute; width: 100%; left: -9999px; }
.tab-content>.tab-pane.active { visibility: visible; height: auto; overflow: visible; position: relative; left: auto; }

.tabs_style1 {background:#fff; border:1px solid #ececec;}
.tabs_style1 > ul.nav {margin-bottom:0; background: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#F9F9F9)); background: -webkit-linear-gradient(top, #fff 0%, #F9F9F9 100%); background: linear-gradient(to bottom,  #fff 0%,#F9F9F9 100%); border-bottom: 1px solid #ececec;}
.tabs_style1 > ul.nav > li {float:left; margin-bottom: -3px;}
.tabs_style1 > ul.nav > li > a {padding: 14px 20px 15px; line-height: 1.4;  border-right:1px solid #ececec; color:#343434;margin-bottom: 2px;}
.tabs_style1 > ul.nav > li.active > a,
.tabs_style1 > ul.nav > li > a:hover {background-color:#fff;}
.tabs_style1 > ul.nav > li.active > a {border-top: 3px solid #cd2122; border-left:0; font-weight:700; padding: 13px 20px 15px; margin-top: -2px;}
.tabs_style1 .tab-content {display: block; width: 100%;padding: 0 15px 15px; }
.tabs_style1 .tab-content>.active{ padding-top: 10px;}
/* Dark tabs style1 */
.tabs_style1.tabs--dark {background:#000; border-color: #131313;}
.tabs_style1.tabs--dark > ul.nav {background: #000; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#060606)); background: -webkit-linear-gradient(top, #000 0%, #060606 100%); background: linear-gradient(to bottom,  #000 0%,#060606 100%); border-bottom-color:#131313;}
.tabs_style1.tabs--dark > ul.nav > li > a {border-right-color:#131313; color:#CBCBCB;}
.tabs_style1.tabs--dark > ul.nav > li.active > a,
.tabs_style1.tabs--dark > ul.nav > li > a:hover {background-color:#000;}
@media (min-width: 768px) and (max-width: 991px) {
    .tabs_style1 > ul.nav > li > a { padding: 8px 10px;}
}

/* tabs style 2 */
.tabs_style2 {margin:10px 0;}
.tabs_style2 > ul.nav {margin-bottom:10px;}
.tabs_style2 > ul.nav > li {float:left; border-left:1px dotted #ccc; line-height:18px; }
.tabs_style2 > ul.nav > li:first-child {border-left:0;}
.tabs_style2 > ul.nav > li:first-child a {border-left:0; padding-left:0; }
.tabs_style2 > ul.nav > li > a {padding: 4px 20px; line-height: 18px; color:#555; font-weight:bold;}
.tabs_style2 > ul.nav > li.active > a,
.tabs_style2 > ul.nav > li > a:hover {background:none; color:#222;}
.tabs_style2 .tab-content {display: block; width: 100%; padding:0;}
/* Dark tabs style2 */
.tabs_style2.tabs--dark > ul.nav > li {border-left-color:#333333; }
.tabs_style2.tabs--dark > ul.nav > li > a {color:#AAAAAA;}
.tabs_style2.tabs--dark > ul.nav > li.active > a,
.tabs_style2.tabs--dark > ul.nav > li > a:hover {color:#DDDDDD;}

/* tabs style 3 */
.tabs_style3 {background:#fff; border:1px solid #ececec;border-radius: 5px;position: static;overflow: hidden;}
.tabs_style3 > ul.nav {margin-bottom:0; background: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#F9F9F9)); background: -webkit-linear-gradient(top,  #fff 0%,#F9F9F9 100%); background: linear-gradient(to bottom,  #fff 0%,#F9F9F9 100%);}
.tabs_style3 > ul.nav > li {float:left; margin-bottom:-1px;}
.tabs_style3 > ul.nav > li > a {padding: 8px 20px; line-height: 18px; border: 1px solid transparent; border-left:1px solid #fff; border-right:1px solid #ececec; color:#343434;}
.tabs_style3 > ul.nav > li.active > a,
.tabs_style3 > ul.nav > li > a:hover {background-color:#fff;}
.tabs_style3 > ul.nav > li.active > a {border-left:0; font-weight:700; }
.tabs_style3 .tab-content {display: block; width: 100%;padding: 10px 15px 15px;}
/* Dark tabs style3 */
.tabs_style3.tabs--dark {background:#000; border-color:#131313;}
.tabs_style3.tabs--dark > ul.nav {background: #000; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#060606)); background: -webkit-linear-gradient(top,  #000 0%,#060606 100%); background: linear-gradient(to bottom,  #000 0%,#060606 100%);}
.tabs_style3.tabs--dark > ul.nav > li > a {border-color: transparent; border-left-color: #000; border-right-color:#131313; color:#CBCBCB;}
.tabs_style3.tabs--dark > ul.nav > li.active > a,
.tabs_style3.tabs--dark > ul.nav > li > a:hover {background-color:#000;}

/* tabs style 4 */
.tabs_style4 > ul.nav {margin-bottom:0;}
.tabs_style4 > ul.nav > li {float:left; margin-bottom:-1px;}
.tabs_style4 > ul.nav > li > a {padding: 8px 20px; line-height: 18px; color:#343434;}
.tabs_style4 > ul.nav > li.active > a,
.tabs_style4 > ul.nav > li > a:hover {color:#222;}
.tabs_style4 > ul.nav > li.active > a { background:#fff; border:1px solid #ececec; border-bottom:0; border-top-left-radius:5px; border-top-right-radius:5px; }
.tabs_style4 .tab-content {display: block; width: 100%;padding: 10px 15px 15px; border:1px solid #ececec; background:#fff; }
/* Dark tabs style4 */
.tabs_style4.tabs--dark > ul.nav > li > a {color:#CBCBCB;}
.tabs_style4.tabs--dark > ul.nav > li.active > a,
.tabs_style4.tabs--dark > ul.nav > li > a:hover {color:#DDDDDD; background-color:#111111;}
.tabs_style4.tabs--dark > ul.nav > li.active > a { background:#000; border-color:#131313; border-bottom:0; }
.tabs_style4.tabs--dark .tab-content {border-color:#131313; background:#000; }

/* tabs style 5 */
.tabs_style5 > ul.nav {border-bottom: 2px solid #dfdfdf;}
.tabs_style5 > ul.nav > li { float: left; margin-bottom: -2px;}
.tabs_style5 > ul.nav li > a { color: #909090;}
.tabs_style5 > ul.nav li > a:hover { color: #535353;}
.tabs_style5 > ul.nav > li.active > a { color: #535353; border-bottom: 2px solid #cd2122; background: none;}
/*.tabs_style5 > ul.nav > li:first-child > a { padding: 8px 20px 8px 0;}*/
.tabs_style5 > ul.nav > li > a { padding: 8px 20px; line-height: 18px; }
.tabs_style5 > ul.nav > li > a:hover { background: none; }
.tabs_style5 .tab-content h5 { color: #4d4d4d; }
.tabs_style5 .tab-content {display: block; width: 100%; padding: 10px 0 15px;}
/* Dark tabs style5 */
.tabs_style5.tabs--dark > ul.nav {border-bottom-color: #202020;}
.tabs_style5.tabs--dark > ul.nav li > a { color: #6F6F6F;}
.tabs_style5.tabs--dark > ul.nav li > a:hover { color: #ACACAC;}
.tabs_style5.tabs--dark > ul.nav > li.active > a { color: #ACACAC;}
.tabs_style5.tabs--dark .tab-content h5 { color: #B2B2B2; }

/* Centered Tabs */
ul.nav.nav-alignment--center {text-align: center;}
ul.nav.nav-alignment--center > li {float:none !important; display: inline-block;}
/* Style5 tweak */
.tabs_style5 > ul.nav.nav-alignment--center > li:first-child > a { padding-left:20px;}

/* Right aligned Tabs */
ul.nav.nav-alignment--right {text-align: right;}
ul.nav.nav-alignment--right > li {float:none !important; display: inline-block;}
/* Style5 tweak */
.tabs_style5 > ul.nav.nav-alignment--right > li:first-child > a { padding-left:20px;}
.tabs_style5 > ul.nav.nav-alignment--right > li:last-child > a { padding-right:0;}


@media (max-width: 767px) {
	.tabbable.hr-tabs .hr-tabs-nav { white-space: nowrap; overflow: hidden; overflow-x: auto;}
	.tabbable.hr-tabs .hr-tabs-nav-item { display: inline-block; border:0; float:none;}
	.tabbable.hr-tabs .hr-tabs-nav-item a { padding-top: 12px; padding-bottom: 12px;}

	.hr-tabs-nav::-webkit-scrollbar {-webkit-appearance: none; }
	.hr-tabs-nav::-webkit-scrollbar:vertical {width: 11px; }
	.hr-tabs-nav::-webkit-scrollbar:horizontal {height: 11px; }
	.hr-tabs-nav::-webkit-scrollbar-thumb {border-radius: 8px; border: 2px solid white; background-color: rgba(0, 0, 0, .3); }
	.hr-tabs-nav::-webkit-scrollbar-track {background-color: #fff; border-radius: 8px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
}