/* ==============================
   Custom jQuery UI Tabs Theme
   Based on old ui-darkness-like colors
   Applies only to Tabs
   ============================== */

.ui-tabs {
	position: relative;
	padding: 0.2em;
	border: 1px solid #fff;
	background: #fff;
	color: #000;
	border-radius: 6px;
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 1.1em;
}

/* タブ見出しエリア */
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: 0.2em 0.2em 0;
	border: 1px solid #fff;
	background: #fff;
	color: #fff;
	font-weight: bold;
	border-radius: 6px;
}

/* タブ項目 */
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 0 0.4em 0.4em 0;
	padding: 0;
	white-space: nowrap;
	border: 1px solid #fff;
	background: #555;
	color: #eee;
	font-weight: bold;
	border-radius: 999px;
}

/* タブリンク */
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: 0.5em 1em;
	color: #eee;
	text-decoration: none;
	outline: none;
	border-radius: 999px;
}

/* hover / focus */
.ui-tabs .ui-tabs-nav li.ui-state-hover,
.ui-tabs .ui-tabs-nav li.ui-state-focus,
.ui-tabs .ui-tabs-nav li:hover {
	border: 1px solid #fff;
	background: #0078a3;
	color: #fff;
	border-radius: 999px;
}

.ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-focus .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li:hover .ui-tabs-anchor {
	color: #fff;
}

/* 選択中タブ */
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
	margin-bottom: 0.4em;
	padding-bottom: 0;
	border: 1px solid #fff;
	background: #fff;
	color: #444;
	border-radius: 999px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-active .ui-tabs-anchor {
	color: #000;
	cursor: text;
}

/* collapsible時 */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}

/* 無効タブ */
.ui-tabs .ui-tabs-nav li.ui-state-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor {
	cursor: text;
}

/* タブ本文 */
.ui-tabs .ui-tabs-panel {
	display: block;
	padding: 1em 1.4em;
	border: 1px solid #fff;
	border-top: 0;
	background: #fff;
	color: #444;
	border-radius: 0 0 6px 6px;
}

/* タブ内リンク */
.ui-tabs .ui-tabs-panel a {
	color: #444;
}

/* jQuery UI baseテーマの背景画像・余計な装飾をタブ内だけ無効化 */
.ui-tabs,
.ui-tabs .ui-tabs-nav,
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-panel,
.ui-tabs .ui-state-default,
.ui-tabs .ui-state-hover,
.ui-tabs .ui-state-focus,
.ui-tabs .ui-state-active {
	background-image: none;
}

/* clearfix */
.ui-tabs .ui-tabs-nav::after {
	content: "";
	display: block;
	clear: both;
}

/* 外側ボーダーを消す */
.ui-tabs.ui-widget.ui-widget-content {
	border-color: #fff;
}