.container--tabs {
	 margin: 2rem;
}

@media only screen and (max-width : 430px) {
	.container--tabs {
		margin: 0px;
		width: 100%;
   }
 }

.container--tabs .nav-tabs {
	 float: left;
	 width: 100%;
	 margin: 0;
	 list-style-type: none;
	 border-bottom: 1px solid #ddd;
}

@media only screen and (max-width : 430px) {

	/* do we need to dup all of this? */
	/* looks like no */
	.container--tabs .nav-tabs {
		/*
		float: left;
		width: 100%;
		margin: 0;
		list-style-type: none;
		border-bottom: 1px solid #ddd;
		*/
		padding-inline-start: 8px;
   }
}

.container--tabs .nav-tabs > li {
	 float: left;
	 margin-bottom: -1px;
}

.container--tabs .nav-tabs > li > a {
	 float: left;
	 margin-right: 2px;
	 line-height: 1.42857143;
	 font-weight: normal;
	 font-size: 12px;
	 padding: 10px;
	 border: 1px solid transparent;
	 border-radius: 4px 4px 0 0;
	 text-decoration-line: none;
}

.container--tabs .nav-tabs > li > a:hover {
	 border-color: #eee #eee #ddd;
}

.container--tabs .nav-tabs > li.active > a, .container--tabs .nav-tabs > li.active > a:hover, .container--tabs .nav-tabs > li.active > a:focus {
	 color: #555;
	 cursor: default;
	 background-color: #fff;
	 border: 1px solid #ddd;
	 border-bottom-color: transparent;
}

.container--tabs .tab-content {
	 float: left;
	 width: 100%;
	 overflow: hidden;
}

.container--tabs .tab-content > .tab-pane {
	 display: none;
}

.container--tabs .tab-content > .tab-pane.active {
	 display: block;
	 padding: 2.5% 3.5%;
	 background-color: white; /* #efefef; */
}

/*
@media only screen and (max-width : 375px) {
	
	.container--tabs .tab-content > .tab-pane.active {
		background-color: #ffffff;
	}
}

*/

.container--tabs .tab-content > .active {
	 display: block;
	 height: 90%;
}

.tablabel {
	font-size: 12px;
}