/* Tabs */
body[data-color-scheme="light"] {
	--active-tab-color: #1d1d1f;
	--inactive-tab-color: #999 !important;
	--tab-bg-color: #fff;
	--inactive-tab-bg-color: #fafafa;
	--tab-shadow: 2px 4px 12px #00000010;
}

body[data-color-scheme="dark"] {
	--active-tab-color: #fff;
	--inactive-tab-color: #666 !important;
	--tab-bg-color: #333;
	--inactive-tab-bg-color: #222;
	--tab-shadow: 2px 4px 12px #00000010;
}

.tab-title {
	display: flex;
	justify-content: left;
	gap: 2em;
	margin: 0.5em 0 1.5em;
}

.tab-title .tab {
	cursor: pointer;
	color: var(--inactive-tab-color);
	padding: 1em 3em;
	background-color: var(--inactive-tab-bg-color);
	opacity: 0.95;
	border-radius: 5px;
	box-shadow: var(--tab-shadow);
}

@media only screen and (max-width: 1068px) {
	.tab-title .tab {
		font-size: 14px;
		padding: 10px 10px;
		flex-basis: 100%;
		/* flex-grow: 1; */
	}

	.tab-title {
		gap: 5px;
		flex-wrap: wrap;
	}
}

.tab-title .tab.active,
.tab-title .tab:hover {
	color: var(--active-tab-color);
	background-color: var(--tab-bg-color);
	/* border-bottom-color: var(--active-tab-color); */
	border: 1px solid var(--tab-shadow);
	opacity: 1;
}