*{
 box-sizing: border-box;
}

p{
clear: both;
position: relative;
}

.tabs-wrpr{
 /*margin-bottom: 120px;*/
 /*min-height: 570px;*/
 clear: both;
 position: relative;
}

.tabs{
	margin: 0px;
	padding: 0px !important;
	position: relative;
	list-style-type: none !important;
}

.tabs li{
	/*list-style-type: none;*/
	float: left;
	border: 0px solid red;
	width: auto;
	/*margin-left: -1px;*/
	/*margin-bottom: -1px;*/
	background-color: #f0f0f0;	
	margin-right: 3px;
	border-radius: 3px 3px 0px 0px;	
	font-size: 18px;	
	font-family: Arial;
}

.tabs  li a{
	display: block;
	padding: 10px 10px;
	text-decoration: none;
	color: #333;
	user-select: none;
	cursor: pointer;	
}

.tabs a:hover{
	font-weight: bold;
	background: #e0e0e0;
	color: #333;
	border-radius: 3px 3px 0px 0px;	
}

/*.tabs li a:hover span.arrow-right{
	transform: rotate(90deg);
}*/

.tabs li a > span.arrow-right{
	float: right;
	margin-right: 2px;
	display: none;
}

.tabs li a > span.arrow-down{
	transform: rotate(90deg);
	float: right;
	margin-right: 2px;
	display: none;	
}

.tabs li ul{
	margin: 0px;
	padding: 0px !important;
	z-index: 2;
}

.tabs li li{
	position: absolute;
	width: 100%;
	display: none;
	padding: 20px 20px 18px 20px;
	color: #333;
	left: 0px;	
	margin-top:-2px;
	background: #e0e0e0;	
	border-radius: 3px;
	z-index: 0;
}

.tabs li li.visible{
 display: block;
}

.tabs .active{
	font-weight: bold;
	background: #e0e0e0;
	color: #333;
	border: 1px solid #e0e0e0;	
	position: relative;
	border-radius: 3px 3px 0px 0px;	
}

.tabs .active:hover{
	border: 1px solid #e0e0e0;	
}

/*.tabs li:hover li{
	display: block !important;
	position: absolute;
	left: 0px;
}


.tabs:hover a:not(:hover){
	font-weight: normal;
	background: #f0f0f0;
	color: #333;
}

.tabs:hover ul li:not(:hover){
	display: none;
}


.tabs li a:has(~ ul li:hover){
 color: #333 !important;
 background: #e0e0e0 !important;
 font-weight: bold !important;
 display: block !important; 
}*/

.accordion, .toggle{
	display: block !important;
	position: relative !important;
}

.accordion li, .toggle li{
	display: block !important;
	position: relative !important;
	border: 1px solid #e0e0e0 !important;
	padding: 0px !important;
	margin-left: 0px !important;
	background-color: #fafafa !important;	
}

.accordion .item, .toggle .item{
	display: block;
	border: 0px solid red;
	float: none !important;	
	cursor: pointer;
	padding: 10px !important;	
	margin-right: 0px !important;	
	user-select: none;
	cursor: pointer;	
	font-size: 18px;		
}

.accordion .item span, .toggle .item span{
	display: block !important;
	float: right;
}

.accordion .item:hover, .toggle .item:hover{
	background: #f0f0f0;
	color: #333;
	font-weight: bold;
}

/*.accordion .item:hover span, .toggle .item:hover span{
	transform: rotate(90deg);
}*/

.accordion span.arrow-down, .toggle span.arrow-down{
	transform: rotate(90deg);
	float: right;
	margin-right: 2px;	
}

.accordion li div, .toggle li div{
	padding: 10px 20px !important;
	display: none;
	border: 0px solid red !important;
	border-top: 0px !important;
	background: #fafafa !important;	
	font-size: 18px;	
}

/*.accordion li:hover div, .toggle li:hover div{
	display: block;
}*/

.accordion .visible, .toggle .visible{
	display: block;
}

.accordion .active, .toggle .active{
	background: #f0f0f0 !important;
	color: #333 !important;
	font-weight: bold;
}

.accordion .active:hover, .toggle .active:hover{
	border: 0px;
}

.accordion div .ordered, .toggle div .ordered{
    list-style-type: decimal;
    display:list-item;
	margin-left: 30px;
	font-size: 18px;
}

.accordion div .unordered, .toggle div .unordered{
    list-style-type: disc;
    display:list-item;
	margin-left: 30px;
	font-size: 18px;
}

.accordion div a, .toggle div a{
	display: inline !important;
	background: none !important;
	padding: unset !important;
	color: #1abc9c;
}

.accordion div a:hover, .toggle div a:hover{
	color: #1abc9c;
	text-decoration: underline;
}

@media (max-width:980px){
	.tabs{
		height: auto !important;
	}
	.tabs li{
		float: none;
		width: 100%;
		margin-left: 0px;
		border-radius: 0px;
		margin-right: 0px;
	}
	.tabs li.visible{
		display: none;
	}
	.tabs li li{
		position: relative;
		padding-top: 5px;
		border-left: 0px;
		border-right: 0px;
	}
	.tabs li:hover li{
		position: relative;
	}
	.tabs-wrpr{
		 margin-bottom: 0px;
	}
	.tabs span.arrow-right{
		display: block !important;
	}
	.tabs span.arrow-down{
		display: block !important;
		transform: rotate(90deg);
	}
	.tabs a:hover{
	    border-top: 1px solid #fafafa;
	    border-bottom: 1px solid #fafafa;	    
	}	
}