/********************************************************************************
--- Responsive Tabs ---
*********************************************************************************/
/*-----------Universal Tabs-----------*/
.resp-tabs-list {list-style:none; margin: 0; padding: 0;}
.resp-tabs-list li {display: inline-block; margin: 0; padding:0; cursor: pointer; float: left; background-color: var(--lightest-gray); color: var(--black); }
.resp-tabs-list li.resp-tab-active { background: #fff; color: var(--primary); position: relative; }
.resp-tabs-container {padding: 0; background-color: #fff; clear: left;}
.resp-content-active, .resp-accordion-active, .resp-tab-content-active { display: block; }
.resp-tab-content { display: none; padding: 1.667em 1.944em; border: 1px solid var(--light-gray);}
.resp-accordion { cursor: pointer; display: none; border: 1px solid var(--light-gray); margin: 0; padding: 0.667em; }
.resp-tab-active {border-bottom:none;}
.resp-arrow { position: absolute; top: 0.833em; right: 0.833em; }
.resp-arrow:after { content: "\e911"; font-family: var(--icon-family); }
.resp-tab-active .resp-arrow:after { content: "\e917"; }
body:not(.user-is-tabbing) .resp-accordion:focus { outline: none !important; }
/*-----------Vertical tabs-----------*/
.resp-tabs--vertical .resp-tab-content {word-wrap: break-word; }
.resp-tab-item:focus, .resp-accordion:focus  { position: relative; z-index: 2;}

@media only screen and (min-width: 768px) {
	/*-----------Horizontal tabs-----------*/
	.resp-tabs--horizontal .resp-tabs-list li { padding: 0.833em; border-top: 1px solid var(--light-gray); border-left: 1px solid var(--light-gray); }
	.resp-tabs--horizontal .resp-tabs-list li:before { content: none; }
	.resp-tabs--horizontal .resp-tabs-list li:last-child { border-right: 1px solid var(--light-gray); }
	.resp-tabs--horizontal .resp-tabs-list li.resp-tab-active:after { content: ""; display: block; background: #fff; height: 1px; width: 100%; position: absolute; bottom: -1px; left: 0; }
	body:not(.user-is-tabbing) .resp-tabs--horizontal .resp-tabs-list li:focus { outline: none; }
	/*-----------Vertical tabs-----------*/
.resp-tabs--vertical {overflow: hidden; padding-top: 3px; padding-left: 3px; /*padding is so focus ring shows completely */}
.resp-tabs--vertical .resp-tabs-list { float: left; width: 30%; border: 1px solid var(--light-gray); border-right: none; }
.resp-tabs--vertical .resp-tabs-list li { display: block; padding: 0.778em 1.111em; cursor: pointer; float: none; border-bottom: 1px solid var(--light-gray); }
.resp-tabs--vertical .resp-tabs-list li:before { content: none; }
.resp-tabs--vertical .resp-tabs-list li:last-child {border-bottom:none;}
.resp-tabs--vertical .resp-tabs-container { border: 1px solid var(--light-gray); float: left; width: 70%; min-height: 250px; clear: none; }
.resp-tabs--vertical .resp-tab-content { border: none; }
.resp-tabs--vertical .resp-tab-active { position: relative; z-index: 1; margin-right: -1px !important; }
.resp-tab-content.resp-tab-content-active {display:block!important;}
.resp-accordion-closed {display:block;}
body:not(.user-is-tabbing) .resp-tabs--vertical .resp-tabs-list li:focus { outline: none; }
}

@media only screen and (max-width: 767px) {
	.resp-tabs-list { display: none; }
	.resp-accordion { display: block; background-color: var(--lightest-gray); color: var(--black); position: relative; font-size: 1.125em;}
	.resp-accordion:not(:last-of-type) {border-bottom:none; }
	.resp-accordion.resp-tab-active { background: #fff; color: var(--primary); }
	.resp-tab-content { border: 1px solid var(--light-gray); border-bottom:none; }
	.resp-tab-content:last-of-type {border-bottom:1px solid var(--light-gray);}
	.resp-tabs--verticalvtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: 100px; clear: none; }
}