div.tabbar {
	overflow: hidden;
}

div.tabbar button {
	background-color: var(--button-color);
	border: solid 2px var(--button-color);
	color: var(--link-color);
	float: left;
	outline: none;
	cursor: pointer;
	padding: 1ex 1ex;
	transition: 0.2s;
	font-size: large;
}

div.tabbar button.card {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border: none;
}

div.tabbar button.card.active {
	background-color: #1a1a1a;
}

div.tabbar button:hover {
	background-color: var(--button-hover-color);
}

div.tabbar button.active {
	background-color: var(--button-selected-color);
	color: #c7cedf;
}

div.tabbar button.show-warning { /* dumb name, but warning and error already exist */
	background-color: #b30000;
	border-color: #b30000;
}

div.tabbar button.show-warning:hover {
	background-color: #e60000
}

div.tabbar button.show-warning.active {
	background-color: #4d0000;
}

div.tabbar a.active {
	color: white;
	pointer-events: none;
	cursor: default;
}

.tabcontent:not(.noFade) {
	display: none;
	padding: 6px 12px;
	-webkit-animation: fadeEffect 0.3s;
	animation: fadeEffect 0.3s;
}

.tabcontent.card {
	border-radius: 0 8px 8px 8px;
	background-color: #1a1a1a;
	border: 0;
}

.tabcontent.card .slaveSummary.card {
	background-color: #252525;
}

@-webkit-keyframes fadeEffect {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeEffect {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

src/003-assets/CSS/tabs.css