/**
 * Tabs
 */

.tabs {
	display: flex;
	flex-wrap: wrap;
	// make sure it wraps: ;
	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
}

.tabs label {
	background: rgba(15,15,15,0.88);
	color: #fff;
	order: 1;
	// Put the labels first
	display: block;
	padding: 1rem 2rem;
	margin-right: 0.2rem;
	cursor: pointer;
	transition: background ease 0.2s;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: none;
	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
	font-weight: bold;
}

.tabs .tab {
	background: rgba(15,15,15,0.88);
	width: 100%;
	order: 99;
	// Put the tabs last
	flex-grow: 1;
	display: none;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 14px;
}

.tabs input[type="radio"] {
	display: none;
}

.tabs input[type="radio"]:checked + label {
	background: rgba(15,15,15,0.28);
	color: #325ad2 ;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 13px;
}

.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
}

.tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
}


}