.tab-elements {
	margin-bottom: 20px;
}

.tab-elements > input[type=radio] {
	display: none;
}

.tab-btns {
	display: table;
	position: static;
	z-index: 2;
	border-collapse: separate;
	border-spacing: 1px;
}

.responsive-tabs {
	max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.responsive-tabs label {
    padding: 12px 14px 12px 14px;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .3s;
    text-align: center;
    box-sizing: border-box;
    -webkit-appearance: none;
	display: table-cell;
	margin: 0 1px 0 0;
	white-space: nowrap;
	cursor: pointer;
	color: #444;
	background-color: #eee;
	border: 1px solid #dbdbdb;
}

.dark-theme .responsive-tabs label {
	color: #eee;
	background-color: #111;
	border: 1px solid #222;
}

.responsive-tabs label:hover {
    background-color: #fff;
    transition: background-color .3s;	
}

.dark-theme .responsive-tabs label:hover {
    background-color: #222;
    transition: background-color .3s;	
}

.tab-info {
	display: none;
	box-sizing: border-box;
	padding: 20px;
	margin:-1px 1px 20px 1px;
	background: #222;
	border: 1px solid #222;
}

.tab-elements .responsive-tabs {
	margin-bottom: -3px;
}

.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(1):checked ~ .responsive-tabs label:nth-child(1),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(2):checked ~ .responsive-tabs label:nth-child(2),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(3):checked ~ .responsive-tabs label:nth-child(3),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(4):checked ~ .responsive-tabs label:nth-child(4),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(5):checked ~ .responsive-tabs label:nth-child(5),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(6):checked ~ .responsive-tabs label:nth-child(6),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(7):checked ~ .responsive-tabs label:nth-child(7),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(8):checked ~ .responsive-tabs label:nth-child(8),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(9):checked ~ .responsive-tabs label:nth-child(9),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(10):checked ~ .responsive-tabs label:nth-child(10),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(11):checked ~ .responsive-tabs label:nth-child(11),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(12):checked ~ .responsive-tabs label:nth-child(12),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(13):checked ~ .responsive-tabs label:nth-child(13),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(14):checked ~ .responsive-tabs label:nth-child(14),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(15):checked ~ .responsive-tabs label:nth-child(15),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(16):checked ~ .responsive-tabs label:nth-child(16),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(17):checked ~ .responsive-tabs label:nth-child(17),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(18):checked ~ .responsive-tabs label:nth-child(18),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(19):checked ~ .responsive-tabs label:nth-child(19),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(20):checked ~ .responsive-tabs label:nth-child(20),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(21):checked ~ .responsive-tabs label:nth-child(21),
.tab-elements:not(.bio-tabs) input[type=radio]:nth-child(22):checked ~ .responsive-tabs label:nth-child(22) {
	background-color: #fff;
	border: 1px solid #dbdbdb;
	border-bottom: 2px solid #fff;
	color: inherit;
	position: relative;
	z-index: 2;
}

.dark-theme .tab-elements input[type=radio]:nth-child(1):checked ~ .responsive-tabs label:nth-child(1),
.dark-theme .tab-elements input[type=radio]:nth-child(2):checked ~ .responsive-tabs label:nth-child(2),
.dark-theme .tab-elements input[type=radio]:nth-child(3):checked ~ .responsive-tabs label:nth-child(3),
.dark-theme .tab-elements input[type=radio]:nth-child(4):checked ~ .responsive-tabs label:nth-child(4),
.dark-theme .tab-elements input[type=radio]:nth-child(5):checked ~ .responsive-tabs label:nth-child(5),
.dark-theme .tab-elements input[type=radio]:nth-child(6):checked ~ .responsive-tabs label:nth-child(6),
.dark-theme .tab-elements input[type=radio]:nth-child(7):checked ~ .responsive-tabs label:nth-child(7),
.dark-theme .tab-elements input[type=radio]:nth-child(8):checked ~ .responsive-tabs label:nth-child(8),
.dark-theme .tab-elements input[type=radio]:nth-child(9):checked ~ .responsive-tabs label:nth-child(9),
.dark-theme .tab-elements input[type=radio]:nth-child(10):checked ~ .responsive-tabs label:nth-child(10),
.dark-theme .tab-elements input[type=radio]:nth-child(11):checked ~ .responsive-tabs label:nth-child(11),
.dark-theme .tab-elements input[type=radio]:nth-child(12):checked ~ .responsive-tabs label:nth-child(12),
.dark-theme .tab-elements input[type=radio]:nth-child(13):checked ~ .responsive-tabs label:nth-child(13),
.dark-theme .tab-elements input[type=radio]:nth-child(14):checked ~ .responsive-tabs label:nth-child(14),
.dark-theme .tab-elements input[type=radio]:nth-child(15):checked ~ .responsive-tabs label:nth-child(15),
.dark-theme .tab-elements input[type=radio]:nth-child(16):checked ~ .responsive-tabs label:nth-child(16),
.dark-theme .tab-elements input[type=radio]:nth-child(17):checked ~ .responsive-tabs label:nth-child(17),
.dark-theme .tab-elements input[type=radio]:nth-child(18):checked ~ .responsive-tabs label:nth-child(18),
.dark-theme .tab-elements input[type=radio]:nth-child(19):checked ~ .responsive-tabs label:nth-child(19),
.dark-theme .tab-elements input[type=radio]:nth-child(20):checked ~ .responsive-tabs label:nth-child(20),
.dark-theme .tab-elements input[type=radio]:nth-child(21):checked ~ .responsive-tabs label:nth-child(21),
.dark-theme .tab-elements input[type=radio]:nth-child(22):checked ~ .responsive-tabs label:nth-child(22) {
	background-color: #222;
	border: 1px solid #222;
	border-bottom: 2px solid #222;
	color: inherit;
	position: relative;
	z-index: 2;
}

.tab-elements input[type=radio]:nth-child(1):checked ~ .tab-info-wrap > .tab-info:nth-child(1),
.tab-elements input[type=radio]:nth-child(2):checked ~ .tab-info-wrap > .tab-info:nth-child(2),
.tab-elements input[type=radio]:nth-child(3):checked ~ .tab-info-wrap > .tab-info:nth-child(3),
.tab-elements input[type=radio]:nth-child(4):checked ~ .tab-info-wrap > .tab-info:nth-child(4),
.tab-elements input[type=radio]:nth-child(5):checked ~ .tab-info-wrap > .tab-info:nth-child(5),
.tab-elements input[type=radio]:nth-child(6):checked ~ .tab-info-wrap > .tab-info:nth-child(6),
.tab-elements input[type=radio]:nth-child(7):checked ~ .tab-info-wrap > .tab-info:nth-child(7),
.tab-elements input[type=radio]:nth-child(8):checked ~ .tab-info-wrap > .tab-info:nth-child(8),
.tab-elements input[type=radio]:nth-child(9):checked ~ .tab-info-wrap > .tab-info:nth-child(9),
.tab-elements input[type=radio]:nth-child(10):checked ~ .tab-info-wrap > .tab-info:nth-child(10),
.tab-elements input[type=radio]:nth-child(11):checked ~ .tab-info-wrap > .tab-info:nth-child(11),
.tab-elements input[type=radio]:nth-child(12):checked ~ .tab-info-wrap > .tab-info:nth-child(12),
.tab-elements input[type=radio]:nth-child(13):checked ~ .tab-info-wrap > .tab-info:nth-child(13),
.tab-elements input[type=radio]:nth-child(14):checked ~ .tab-info-wrap > .tab-info:nth-child(14),
.tab-elements input[type=radio]:nth-child(15):checked ~ .tab-info-wrap > .tab-info:nth-child(15),
.tab-elements input[type=radio]:nth-child(16):checked ~ .tab-info-wrap > .tab-info:nth-child(16),
.tab-elements input[type=radio]:nth-child(17):checked ~ .tab-info-wrap > .tab-info:nth-child(17),
.tab-elements input[type=radio]:nth-child(18):checked ~ .tab-info-wrap > .tab-info:nth-child(18),
.tab-elements input[type=radio]:nth-child(19):checked ~ .tab-info-wrap > .tab-info:nth-child(19),
.tab-elements input[type=radio]:nth-child(20):checked ~ .tab-info-wrap > .tab-info:nth-child(20),
.tab-elements input[type=radio]:nth-child(21):checked ~ .tab-info-wrap > .tab-info:nth-child(21),
.tab-elements input[type=radio]:nth-child(22):checked ~ .tab-info-wrap > .tab-info:nth-child(22) {
	display: block;
}


.tab-elements.bio-tabs input[type=radio]:nth-child(1):checked ~ .responsive-tabs label:nth-child(1),
.tab-elements.bio-tabs input[type=radio]:nth-child(2):checked ~ .responsive-tabs label:nth-child(2),
.tab-elements.bio-tabs input[type=radio]:nth-child(3):checked ~ .responsive-tabs label:nth-child(3),
.tab-elements.bio-tabs input[type=radio]:nth-child(4):checked ~ .responsive-tabs label:nth-child(4),
.tab-elements.bio-tabs input[type=radio]:nth-child(5):checked ~ .responsive-tabs label:nth-child(5),
.tab-elements.bio-tabs input[type=radio]:nth-child(6):checked ~ .responsive-tabs label:nth-child(6),
.tab-elements.bio-tabs input[type=radio]:nth-child(7):checked ~ .responsive-tabs label:nth-child(7),
.tab-elements.bio-tabs input[type=radio]:nth-child(8):checked ~ .responsive-tabs label:nth-child(8),
.tab-elements.bio-tabs input[type=radio]:nth-child(9):checked ~ .responsive-tabs label:nth-child(9),
.tab-elements.bio-tabs input[type=radio]:nth-child(10):checked ~ .responsive-tabs label:nth-child(10),
.tab-elements.bio-tabs input[type=radio]:nth-child(11):checked ~ .responsive-tabs label:nth-child(11),
.tab-elements.bio-tabs input[type=radio]:nth-child(12):checked ~ .responsive-tabs label:nth-child(12),
.tab-elements.bio-tabs input[type=radio]:nth-child(13):checked ~ .responsive-tabs label:nth-child(13),
.tab-elements.bio-tabs input[type=radio]:nth-child(14):checked ~ .responsive-tabs label:nth-child(14),
.tab-elements.bio-tabs input[type=radio]:nth-child(15):checked ~ .responsive-tabs label:nth-child(15),
.tab-elements.bio-tabs input[type=radio]:nth-child(16):checked ~ .responsive-tabs label:nth-child(16),
.tab-elements.bio-tabs input[type=radio]:nth-child(17):checked ~ .responsive-tabs label:nth-child(17),
.tab-elements.bio-tabs input[type=radio]:nth-child(18):checked ~ .responsive-tabs label:nth-child(18),
.tab-elements.bio-tabs input[type=radio]:nth-child(19):checked ~ .responsive-tabs label:nth-child(19),
.tab-elements.bio-tabs input[type=radio]:nth-child(20):checked ~ .responsive-tabs label:nth-child(20),
.tab-elements.bio-tabs input[type=radio]:nth-child(21):checked ~ .responsive-tabs label:nth-child(21),
.tab-elements.bio-tabs input[type=radio]:nth-child(22):checked ~ .responsive-tabs label:nth-child(22) {
	background-color: #fff;
	border: 1px solid #dbdbdb;
	border-bottom: 2px solid #fff;
	color: inherit;
	position: relative;
	z-index: 2;
}

/* Vertical Tabs */
.tabs-vertical {
	position: relative;
	width: 100%;
	display: table;
}

.tabs-vertical > div {
	display: block;
	display: table-cell;
	width: 150px;
	box-sizing: border-box;
	vertical-align: top;
	z-index: 2;
	position: relative;
	margin: 0 0 0 -3px;
	border:0;
}

.tabs-vertical .tab-info-wrap {
	display: block;
	display: table-cell;
	box-sizing: border-box;
	width: calc(100% - 150px);
	vertical-align: top;
	min-height: 100%;
	position: relative;
	z-index: 1;
	border: 1px solid #ccc;
	border-left: 1px solid #ccc;
}


.tabs-vertical .tab-info-wrap .tab-info {
	padding: 10px 10px 10px 25px;
}

.tabs-vertical .tab-btns label {
	float: none;
	display: block;
}

.tabs-vertical .tab-btns {
	position: static;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
}

.tabs-vertical .tab-btns .btn {
	margin: 0 0 1px 0;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ccc;
	border-right: 0;
	text-align: left;
	position: relative;
}

.tabs-vertical .tab-btns .btn:first-child {
	margin: -1px 0 1px 0;
}

.tabs-vertical .tab-btns .btn:last-child {
	margin: 0;
}

.tabs-vertical .tab-info {
    margin: 0px 0px 0px 0px;
	height: 100%;
	border: 0;
}


.tab-elements.tabs-vertical input[type=radio]:nth-child(1):checked ~ div label:nth-child(1),
.tab-elements.tabs-vertical input[type=radio]:nth-child(2):checked ~ div label:nth-child(2),
.tab-elements.tabs-vertical input[type=radio]:nth-child(3):checked ~ div label:nth-child(3),
.tab-elements.tabs-vertical input[type=radio]:nth-child(4):checked ~ div label:nth-child(4),
.tab-elements.tabs-vertical input[type=radio]:nth-child(5):checked ~ div label:nth-child(5),
.tab-elements.tabs-vertical input[type=radio]:nth-child(6):checked ~ div label:nth-child(6),
.tab-elements.tabs-vertical input[type=radio]:nth-child(7):checked ~ div label:nth-child(7),
.tab-elements.tabs-vertical input[type=radio]:nth-child(8):checked ~ div label:nth-child(8),
.tab-elements.tabs-vertical input[type=radio]:nth-child(9):checked ~ div label:nth-child(9),
.tab-elements.tabs-vertical input[type=radio]:nth-child(10):checked ~ div label:nth-child(10) {
	background-color: #fff;
	border: 1px solid #ccc;
	border-right: 0;
	color: inherit;
}


.tab-elements.tabs-vertical input[type=radio]:nth-child(1):checked ~ div label:nth-child(1):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(2):checked ~ div label:nth-child(2):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(3):checked ~ div label:nth-child(3):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(4):checked ~ div label:nth-child(4):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(5):checked ~ div label:nth-child(5):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(6):checked ~ div label:nth-child(6):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(7):checked ~ div label:nth-child(7):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(8):checked ~ div label:nth-child(8):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(9):checked ~ div label:nth-child(9):after,
.tab-elements.tabs-vertical input[type=radio]:nth-child(10):checked ~ div label:nth-child(10):after {
	content: "";
	width: 2px;
	background-color: #fff;
	height: calc(100% + 2px);
	position: absolute;
	top: -1px;
	right: -2px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
}


.tab-sep {
	display: table-cell;
	margin: 0;
	box-sizing: border-box;
	width: 5px;
}



.tab-elements.line-tabs input[type=radio]:nth-child(1):checked ~ .responsive-tabs label:nth-child(1), .tab-elements.line-tabs input[type=radio]:nth-child(2):checked ~ .responsive-tabs label:nth-child(2), .tab-elements.line-tabs input[type=radio]:nth-child(3):checked ~ .responsive-tabs label:nth-child(3), .tab-elements.line-tabs input[type=radio]:nth-child(4):checked ~ .responsive-tabs label:nth-child(4), .tab-elements.line-tabs input[type=radio]:nth-child(5):checked ~ .responsive-tabs label:nth-child(5), .tab-elements.line-tabs input[type=radio]:nth-child(6):checked ~ .responsive-tabs label:nth-child(6), .tab-elements.line-tabs input[type=radio]:nth-child(7):checked ~ .responsive-tabs label:nth-child(7), .tab-elements.line-tabs input[type=radio]:nth-child(8):checked ~ .responsive-tabs label:nth-child(8), .tab-elements.line-tabs input[type=radio]:nth-child(9):checked ~ .responsive-tabs label:nth-child(9), .tab-elements.line-tabs input[type=radio]:nth-child(10):checked ~ .responsive-tabs label:nth-child(10), .tab-elements.line-tabs input[type=radio]:nth-child(11):checked ~ .responsive-tabs label:nth-child(11), .tab-elements.line-tabs input[type=radio]:nth-child(12):checked ~ .responsive-tabs label:nth-child(12), .tab-elements.line-tabs input[type=radio]:nth-child(13):checked ~ .responsive-tabs label:nth-child(13), .tab-elements.line-tabs input[type=radio]:nth-child(14):checked ~ .responsive-tabs label:nth-child(14), .tab-elements.line-tabs input[type=radio]:nth-child(15):checked ~ .responsive-tabs label:nth-child(15), .tab-elements.line-tabs input[type=radio]:nth-child(16):checked ~ .responsive-tabs label:nth-child(16), .tab-elements.line-tabs input[type=radio]:nth-child(17):checked ~ .responsive-tabs label:nth-child(17), .tab-elements.line-tabs input[type=radio]:nth-child(18):checked ~ .responsive-tabs label:nth-child(18), .tab-elements.line-tabs input[type=radio]:nth-child(19):checked ~ .responsive-tabs label:nth-child(19), .tab-elements.line-tabs input[type=radio]:nth-child(20):checked ~ .responsive-tabs label:nth-child(20) {
    background: none;
    border: 0;
    border-bottom: 2px solid #05a8e9;
    color: inherit;
}

.tab-elements.line-tabs .responsive-tabs label {
	color: #555;
}

.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(1):checked ~ .responsive-tabs label:nth-child(1), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(2):checked ~ .responsive-tabs label:nth-child(2), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(3):checked ~ .responsive-tabs label:nth-child(3), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(4):checked ~ .responsive-tabs label:nth-child(4), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(5):checked ~ .responsive-tabs label:nth-child(5), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(6):checked ~ .responsive-tabs label:nth-child(6), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(7):checked ~ .responsive-tabs label:nth-child(7), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(8):checked ~ .responsive-tabs label:nth-child(8), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(9):checked ~ .responsive-tabs label:nth-child(9), 
.dark-theme .tab-elements.line-tabs input[type=radio]:nth-child(10):checked ~ .responsive-tabs label:nth-child(10) {
    color: #fff;
}

.dark-theme .tab-elements.line-tabs .btn:focus, 
.dark-theme .tab-elements.line-tabs .btn:hover {
    color: #fff;
    text-decoration: none;
}

.dark-theme .tab-elements.line-tabs .btn{
    color: #ccc;
    text-decoration: none;
}

.line-tabs .btn, .line-tabs a.btn, .line-tabs input.btn, .line-tabs label.btn, .line-tabs button.btn, .line-tabs .form-elements input[type=submit], .line-tabs .form-elements input[type=reset] {
    background: none;
}

.line-tabs .responsive-tabs label {
    border: none;
    border-bottom: 2px solid rgba(150,150,150,.5);
    margin-right: 1px;
	font-weight: 400;
}

.line-tabs .btn, .line-tabs a.btn, .line-tabs input.btn, .line-tabs label.btn, .line-tabs button.btn, .line-tabs .form-elements input[type=submit], .line-tabs .form-elements input[type=reset] {
    background: none;
}

.line-tabs .btn:active {
    box-shadow: none;
}

.line-tabs .tab-btns {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
	margin-bottom: 5px;
}

.line-tabs  .tab-info {
    background: transparent;
    border: 0 !important;
	padding: 10px 0px 0px 0px;
}



@media all and (max-width: 1024px) {
	
	.responsive-tabs {
		max-width: 100%;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		webkit-overflow-scrolling: touch;	
	}
	
	.responsive-tabs {
		margin-bottom: -1px;
	}
	
	.tabs-vertical .tab-btns .btn {
		font-size: 12px;
	}
	
	.tabs-vertical > div {
		width: 100px;
	}
	
	.tabs-vertical .tab-info-wrap {
		width: calc(100% - 98px);
		margin-left: 98px;
	}

	
}

@media all and (max-width: 500px) {
	

	.tabs-vertical .tab-btns .btn {
		font-size: 10px;
	}
	
	.tabs-vertical > div {
		width: 80px;
	}
	
	.tabs-vertical .tab-info-wrap {
		width: calc(100% - 78px);
		margin-left: 78px;
	}
	
	.tab-info {
		padding: 20px 6px 20px 6px;
	}
	
}