@charset "utf-8";
/** total */
:root {
	--pseudo-color: #666;
}
body.detail section h3 {
	/*font-size: 1rem;*/
}
/** table */
.yasr table {
	border-color: silver;
	border-radius: 8px;
	overflow: hidden;
	max-width: var(--main-w);
}
.yasr table.hasqname {
	table-layout: auto;
}
.yasr table.simplemode {
	table-layout: fixed;
}
div.yasr .dataTables_wrapper .dataTable.no-footer {
	border-bottom: solid 1px silver;
}
.yasr td {
	border: none;
}
.yasr tr.odd > td {
	background: #f3f3f3;
}
.yasr thead > tr > th:first-child{
	padding-right: 10px !important;
}
.yasr tbody > tr:first-child > td{
	border-top: solid 1px silver;
}

div.yasr .dataTables_wrapper .grip-padding>tbody>tr>td:has(div.rowNumber){
	background: #fafafd;
	border-right: #f0f0f0 solid 1px;
	padding-right: 10px !important;
	color: gray;
	font-size: 90%;
}
div.rowNumber {
	user-select: none !important;
}
.yasr .dataTables_wrapper {
    font-size: 1em !important;
}

/*.yasr table a.iri::before*/
.yasr table span.uri::before {
	content: "<";
	color: var(--pseudo-color);
}
/*.yasr table a.iri::after*/
.yasr table span.uri::after {
	content: ">";
	color: var(--pseudo-color);
}
/*.yasr table span[data-meta]::before*/
.yasr table span.nonIri::before,
.yasr table span.nonIri::after {
	content: '"';	/*"*/
	color: var(--pseudo-color);
}
.yasr table span.bnode::before {
	content: "_:";
	color: var(--pseudo-color);
	font-size: 90%;
}
.yasr table div[data-meta]::after {
	content: attr(data-meta);
	font-weight: normal;
	margin-left: 0.2em;
	color: var(--pseudo-color);
	vertical-align: super;
	font-size: 90%;
}
table.ellipseTable:not(.simplemode) span:has(span.qname) span.uri,
table:not(.ellipseTable) span.qname,
.yasr table.simplemode span.qname,
.yasr table.simplemode span::before,
.yasr table.simplemode span::after,
.yasr table.simplemode div[data-meta]::after {
	display:none;
}
.yasr .yasr_btnGroup {
	margin-bottom: 2px;
}
.yasr .yasr_btnGroup .yasr_btn {
	padding-bottom: 4px;
}

html[lang=ja] select[lang=ja],
html[lang=en] select[lang=en] {
	display: block;
}
html[lang=ja] select[lang=en],
html[lang=en] select[lang=ja] {
	display: none;
}

.yasqe.allowTurtle :is(.parseErrorIcon, .warningIcon) svg {
	opacity: 0;
}


/** Yasr */
.yasr .yasr_results {
	--gv-height: 400px;;
	min-height: var(--gv-height); /*400px;*/
}
body.sparql .yasr .yasr_results {
	--gv-height: max(calc(100vh - 650px), 400px);
}
.yasr.wait .yasr_results {
	opacity: 0.5;
}
.yasr.wait:has(.yasr_results div) .yasr_response_chip {
	display:none;
}
.yasr.wait:has(.yasr_results div) .yasr_btnGroup:after {
	content: "前クエリの結果を表示中";
	padding: 5px 12px;
	font-size: 90%;
	color: maroon;
	background: #f5f5f5;
	border-radius: 6px;
}

.graph-container {
	width: 100%;
	height: 100%;
}
.yasr label span {
	display: inline;
}
.yasr_header span {
	font-size: 0.85rem;
	line-height: 1.2;
}
.yasr .yasr_response_chip {
	line-height: 1.2;
	min-width: 186px;
	height: 16pt;	/*yasgui.min.cssのmin-htight*/
}
.yasr.asking .yasr_response_chip {
	justify-content: left;
}
.yasr .yasr_btn > span {
	height: 15px;
}
.yasr_btn.disabled {
	pointer-events: none;
}
.tabsList .exq {
	margin-left: auto;
	width: 12em;
	height: 2em;
}
.tabsList .exq > option:first-child {
	text-align: center;
}

.graph-container {
	min-width: 100%;
	/*height: 400px;*/
	border: solid 1px transparent;
	flex-shrink: 0;
	resize: both;
	overflow: auto;
}

.graph-container,
.graph-container canvas {
	height: var(--gv-height);
}
.graph-container:hover {
	border-color: #f3f3f3;
	z-index: 10;
}

div.vis-tooltip {
	font-size: 75%;	/*基本はnode.font.sizeと同じになるが縮小されたグラフでもそのままなので大きすぎる*/
}

/** Yasqe */
.yasqe_buttons select {
	display: block;
	margin-top: 10px;
	position: absolute;
	right: 0;
}
.yasgui .controlbar {
	display: none;
}

/** ndlsh */
body.detail :is(
	.yasgui .autocompleteWrapper,
	.tabsList,
	.controlbar,
	.yasqe,
	.yasr_header,
	.ldVizControls
) {
	display: none !important;
}
body.detail #yasgui {
	position: relative;
}
/*body.detail */
#gview .yasr_results {
  display: flex;
  align-items: flex-start;
}
#yasgui .msg {
	position: absolute;
	left: 0.5em;
	top: 100%;
	color: #444;
	font-size: 80%;
	margin: 0;
	background: #fefefe;
	cursor: default;
}
body.detail #yasgui .msg {
	position: absolute;
	left: 0.1em;
	top: -1.3em;
}
#yasgui .msg:hover {
	background: #fcfcfc;
}
#yasgui .msg.done {
	font-size: 75%;
	color: #333; /*gray*/
}
#yasgui .msg span.suppl {
	margin-left: 1em;
	text-decoration: underline;
	color: #44f;
	cursor: pointer;
}
#yasgui .msg span.suppl:before,
#yasgui .msg span.suppl:after {
	color: black;
	display: inline-block;
	text-decoration: none;
}
#yasgui .msg span.suppl:before {
	content: "(";
}
#yasgui .msg span.suppl:after {
	content: ")";
}
/** graph legend */
.legend {
	--legsize: 0.85em;
	background: rgba(255, 255, 255, 0.9);  /* 背景を少し白く */
	padding: 8px;
	border: 1px solid #f3f3f3;
	border-radius: 6px;
	z-index: 1000;
	font-size: var(--legsize);
	color: #666;
	flex: 0 0 auto;	/* 親のflexに対して */
	display: flex;
	flex-direction: column;
	gap: 4px;  /* item同士の間隔 */
	position: relative
}

.legend-item {
	display: flex;
	align-items: center;
}

.legend-color {
	width: var(--legsize);
	height: var(--legsize);
	border-radius: 50%;
	border: 1px solid #666;
	box-shadow: 1px 1px 4px #ccc;
	flex-shrink: 0; /* ← 縦横比維持のために重要 */
	/*align-self: baseline;*/
	margin-top: 1px;
}

.legend-label {
	display: flex;           /* ← inline-block や block ではなく flex */
	flex-direction: row;     /* 横並び */
	flex-wrap: wrap;         /* 折り返し可能にする */
	align-items: center;
	/*min-width: 3em;*/          /* ← 短すぎる内容に対抗する幅の下限 */
	word-break: break-word;
	margin-left: 0.5em;
}

.legend-label span {
	display: inline-block;
	white-space: normal;
}
.legend input[type=color]{
	position: absolute;
	bottom: 0;
	/*visibility: hidden; focusされないので不可*/
	opacity: 0;
	width: 0;
	height: 1;
	border: none;
}

/** navigation */

.graph-container div.vis-navigation {
	display: none;
}
.graph-container:hover div.vis-navigation {
	display: block;
}

div.vis-network div.vis-navigation div.vis-button {
	filter: grayscale(1) opacity(50%);
}

/** media query */
@media (max-width: 1160px){
	.yasr.wait:has(.yasr_results div) .yasr_btnGroup:after {
		content: "前クエリの結果";
	}
}