.pcom-tablist {
	display: flex;
}

.pcom-tablist button {
	background: var(--pcom-dark-blue);
	color: var(--pcom-white);
	border: solid 2px var(--pcom-dark-blue);
	border-radius: var(--pcom-border-radius) var(--pcom-border-radius) 0 0;
	padding: 0.375rem .625rem;
	position: relative;
	font-weight: bold;
}

.pcom-tablist button:focus {
	outline: solid 2px currentColor;
	outline-offset: -6px !important;
	border-radius: var(--pcom-border-radius) var(--pcom-border-radius) 0 0;
}

.pcom-tablist button[aria-selected="true"] {
	background: var(--white);
	color: var(--pcom-text);
}
/* cover up the bottom border */
.pcom-tablist button[aria-selected="true"]:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 4px;
	bottom: -4px;
	left: 0;
	background: var(--pcom-white);
}

.pcom-tablist button[aria-selected="false"]:hover {
	background: var(--pcom-yellow);
	color: var(--pcom-text);
}

.pcom-tablist .spacer {
	width: 0.25em;
	border-bottom: solid 2px var(--pcom-dark-blue);
}
.pcom-tablist .hfill {
  flex: 1 0 auto;
	border-bottom: solid 2px var(--pcom-dark-blue);
}

.pcom-tab-content {
	border: solid 2px var(--pcom-dark-blue);
	border-top: 0;
	background: var(--white);
	padding: .875rem;
}

.pcom-tab-content .bold {
	font-weight: 400;
}

.pcom-tab-content .tab-pane {
	display: none;
}

.pcom-tab-content .tab-pane.active {
	display: block;
}

.pcom-tab-content .tab-pane > div h2.muted {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.pcom-tablist.onstartup {
	display: none;
}
.pcom-tab-content.onstartup {
	border-top: solid 2px var(--pcom-dark-blue);
}
.pcom-tab-content.onstartup .tab-pane {
	display: block;
}
.pcom-tab-content.onstartup .tab-pane + .tab-pane {
	margin-top: 20px;
}