/* We only handle two tabs. Do not use this for other scenarios. */
.react-tabs [role=tablist] {
	border-bottom: 0;
	margin: 0 0 0 0;
	padding: 0;
	background: #6b6b6b;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
}

.react-tabs [role=tablist]:after {
	content: " ";
	position: absolute;
	height: 100%;
	left: 50%;
	top: 0;
	width: 0;
	border-left: 1px solid #3d3d3d;
}

.react-tabs [role=tab] {
	display: inline-block;
	border: 0 solid transparent;
	border-bottom: 1px solid #3d3d3d;
	bottom: 0;
	position: relative;
	list-style: none;
	padding: 9px 0 8px;
	font-weight: 500;
	font-size: 11px;
	cursor: pointer;
	font-family: 'Helvetica', sans-serif;
	width: 50%;
	text-align: center;
	color: #ccc;
}

.react-tabs [role=tab][aria-selected=true] {
	background: #535353;
	border-color: transparent;
	color: black;
	border-radius: 0 0 0 0;
	-moz-border-radius: 0 0 0 0;
	-webkit-border-radius: 0 0 0 0;
	color: #fff;
}

.react-tabs [role=tab][aria-disabled=true] {
	color: GrayText;
	cursor: default;
}

.react-tabs [role=tab]:focus {
	box-shadow: 0 0 5px hsl(208, 99%, 50%);
	border-color: hsl(208, 99%, 50%);
	outline: none;
}

.react-tabs [role=tab]:focus:after {
	content: "";
	position: absolute;
	height: 5px;
	left: -4px;
	right: -4px;
	bottom: -5px;
	background: #6b6b6b;
}

.react-tabs [role=tabpanel] {
	padding: 15px;
}


/* This style is react-header-tabs, which is used for header app component. */
.react-header-tabs [role=tabpanel] {
	padding: 0;
	border-top: 1px solid #3b3b3b;
}

.react-header-tabs [role=tablist] {
	padding-top: 6px;
}

.react-header-tabs [role=tab] {
	width: initial;
	padding: 5px 15px 7px;
	margin-left: 7px;
	border: 1px solid #3b3b3b;
	background: #666666;
	font-weight: 600;
	max-height: 25px;
	border-bottom-width: 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.react-header-tabs [role=tab]:hover {
	background: #737373;
}

.react-header-tabs [role=tab][aria-selected=true] {
	background: #8c8c8c;
	border: 1px solid #3b3b3b;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-width: 0;
}

.react-header-tabs [role=tab]:focus {
	box-shadow: none;
	border-color: #3b3b3b;
}

.react-header-tabs [role=tablist]:after {
	display: none;
}

/* Temporary hiding the tab */
/*
.react-header-tabs [role=tablist] {
	display: none;
}
*/