#controlPanel {
  top: 0px;
  left: 0px;
  width: 195px;
  background: #ffffff;
  padding: 0px 0px 0px 0px;
  white-space: nowrap;
  overflow: auto;
  position: fixed;
  border: solid 1px #999999;
  display: none;

	/* briteViewerのヘッダーより前面にする。*/
	z-index: 5;
}

#controlPanel .leave-margin-top {
	margin-top: 5px !important;
}

#controlPanel.closed {
  border: none;
  padding: 0px 0px 0px 0px;
  background: transparent;
}

#controlPanel h5 {
  margin: 0px;
  padding: 5px 0px 5px 10px;
  vertical-align: middle;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  background: #eeeeee;
  /* ui-iconの位置調整のために必要 */
  position: relative;
}
#controlPanel h5::before {
  content: url(/Fig/get_htext/open.svg);
  margin: 0px 5px 0px 0px;
}
#controlPanel h5.closed::before {
  content: url(/Fig/get_htext/close.svg);
  margin: 0px 5px 0px 0px;
}
#controlPanel h5:first-child {
  border-top: none;
}
#controlPanel h5:hover {
  cursor: pointer;
}
#controlPanel h5 + div {
  padding: 5px 1px 5px 10px;
}
/*
 * Pruning ボタン
 */
#controlPanel h5 .ui-icon.pruning {
  display: inline-block;
  position: absolute;
  right: 26px;
  top: 50%;
  margin-top: -8px;
  cursor: pointer;

	border-bottom: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
	border-radius: 3px;
}
#controlPanel h5 .ui-icon.pruning.on {
	border: solid 1px #777777;
}
/*
 * Join の ID ハイライトボタン
 */
#controlPanel h5 .ui-icon.id-highlight {
  -display: inline-block;
  display: none;
  position: absolute;
  right: 49px; /* (16px) + (16px + 1px + 1px) + (5px x 3) */
  top: 50%;
  margin-top: -8px;
  cursor: pointer;

	border-bottom: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
	border-radius: 3px;
}
#controlPanel h5 .ui-icon.id-highlight.on {
	border: solid 1px #777777;
}
#controlPanel h5 .ui-icon.clear-filter {
  display: inline-block;
  position: absolute;
  right: 26px;
  top: 50%;
  margin-top: -8px;
  cursor: pointer;
}
#controlPanel h5 .ui-icon-plus {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -8px;
  cursor: pointer;
}
#controlPanel .ui-icon.clear-query {
  display: inline-block;
  cursor: pointer;
}
#controlPanel li .ui-icon.edit {
  display: inline-block;
  cursor: pointer;
	position: absolute;
	top: 50%;
	right: 26px;
	margin-top: -8px;
}
#controlPanel li .ui-icon.delete {
  display: inline-block;
  cursor: pointer;
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -8px;
}

#controlPanel h6 {
  margin: 0px;
  padding: 2px 0px 2px 0px;
}

#controlPanel input[type=button],
#controlPanel input[type=submit],
#controlPanel input[type=reset] {
	padding: 1px 3px;
}

#controlPanel input[type=checkbox] {
	margin-left : 0px;
}

#controlPanel input[type=radio] {
	margin : 2px;
}

#controlPanel button {
  /* Safariでボタンの周りに入る余白を削除 */
  margin: 0px;
  padding: 0px;
  /* ボタンを押した時に表示されるボーダーを非表示にする */
  outline: none;
}

#controlPanel button.close, #controlPanel button.open {
  border: none;
  padding: 0px;
  position: absolute;
  right: 5px;
  top: 7px;
}

#controlPanel button.close {
  /* コントロールパネルに合わせて初期は非表示 */
  display: none;
}

#controlPanel button:hover {
  cursor: pointer;
}

#controlPanel button img {
  /* 画像の下に入る余白を無くす */
  display: block;
}

#controlPanel .row * {
  vertical-align: middle;
}

#controlPanel fieldset.expandable {
	border: none;
	padding: 0px 0px 0px 10px;
}
#controlPanel fieldset.expandable legend {
	position: relative;
	left: -15px;
}
#controlPanel fieldset.expandable legend::before {
	content: url(/Fig/get_htext/open.svg);
	margin-right: 3px;
}
#controlPanel fieldset.expandable.collapsed legend::before {
	content: url(/Fig/get_htext/close.svg);
	margin-right: 3px;
}
#controlPanel fieldset.expandable legend:hover {
	cursor: pointer;
}
#controlPanel fieldset.expandable.collapsed > *:not(legend) {
	display: none;
}

#controlPanel ul.simple {
	margin: 0px;
	padding: 0px;
}
#controlPanel ul.simple li {
	list-style-type: none;
}
#controlPanel ul.simple li * {
	vertical-align: middle;
}
#controlPanel ul.simple.margin li:not(:first-child) {
	margin-top: 3px;
}
#controlPanel ul.simple li:last-child {
	-margin-bottom: 5px;
}

/* 検索ボックスとマッパー一覧の間に余白を設ける */
#controlPanel .mapper.search-brite form.query + ul {
	margin-top: 3px;
}

/* 検索ヒット件数と現在のハイライト位置
 * ハイライト位置（.current）の桁数が変わっても
 * 幅が一定になるように固定値を設定する。 */
#controlPanel .search .searchResult .current {
	display: inline-block;
	width: 35px;
	text-align: right;
}
#controlPanel .search .searchResult .all {
	display: inline-block;
	width: 35px;
	text-align: left;
}


/* 
 * チェックボックスのトグルスイッチ化
 *
 * HTMLの定義
 *   <div class="toggleSwitch">
 *     <input type="checkbox" id="ID">
 *     <label for="ID"></label>
 *   </div>
 *
 */
.toggleSwitch {
	display: inline-block;
	font-size: 10px;
}
.toggleSwitch > input {
	display: none;
}
.toggleSwitch > label {
	display: block;
	position: relative;
	width: 1.8em;
	height: 1em;
	border-radius: 1em;
	background-color: #999999;
	cursor: pointer;
}
/* ON の場合のスタイル */
.toggleSwitch > input:checked + label {
	background-color: #6495ed;
}
/* 無効にした場合のスタイル */
.toggleSwitch > input:disabled + label {
	background-color: #999999;
	cursor: default;
}
.toggleSwitch > label::before {
	position: absolute;
	top: 0.1em;
	left: 0.1em;
	width: calc(1em - 0.2em);
	height: calc(1em - 0.2em);
	border-radius: calc(1em - 0.1em);
	background-color: #fff;
	transition: 0.5s;
	content: "";
}
.toggleSwitch > input:checked + label::before {
	left: calc(100% - 1em + 0.1em);
}