@charset "utf-8";
/*** 基本規則 */
/** 大原則*/
:root {
	/* snorql_ldb.cssの基本変数定義はすべてここにコピーもしくは上書き。YMAのsnorql_ldb.cssでは削除する。*/
	/* basic HLS bg / link text color values */
	/* color-background basic hsl components */
	--cb-hue: 24deg; /*240deg */
	--cb-sat: 52%;
	--cb-lgh: 82%;	/*88%*/
	/* color-background multiplier */
	--cb-mul-dk: 0.82;	/* color-background multiplier darker */
	--cb-mul-md: 0.87;	/* color-background multiplier middle */
	--cb-mul-lg: 1.09;	/* color-background multiplier lighter */
	
	/* color-link decoration multipliers */
	--cl-deco-sat: 87%;
	--cl-deco-lgh: 50%;
	--cl-deco-alph: 0.4;
	
	/* size related */
	--pimg-w: 200px;
	--s-mg-l: 1rem;	/* sectionの左右マージン */
	--wd-term: round(calc((100vw - var(--s-mg-l))* 0.22), 1px);
}
/** snorqlでは用いないYMA共通設定*/
html {
	--mdsp: 40px;	/* main div space */
	/*--secpad: 2.5rem;*/	/* section padding */
	--lspace: calc(var(--mdsp) + var(--secpad));	/* left space */
	--rspace: 3rem;
	--hdsp: var(--mdsp);
	/*--hdsp: var(--lspace);*/
	--main-w: 1400px;
	--bgwr-w: 40px;	/* .bgwrap width */
	/*--bgwr-m: calc(var(--secpad) - var(--bgwr-w));*/	/* .bgwrap margin */
	--bgwr-m: 6px; 
	--bgwr-disp: inline-bloc;
	--secpad: calc(var(--bgwr-w) + var(--bgwr-m));	/* section padding */
	--form-l: var(--secpad);
	--foot-h: 42px;	/* footer height w/ border-box */
	/*--form-l: calc(var(--bgwr-w) + var(--bgwr-m));*/
	--msec-pt:	0.8rem;
	
	font-family: san-serif;
	--gate-img: url("yma-bg-shelf.png");
}
/** snorqlとも共有する設定*/
body {
	--db-sat: 24%;	/* dark background saturation */
	--cb-sat: var(--db-sat);	/*body.describeは極端な色設定のテスト用に2%*/
	/*--tx-visited: hsl(var(--cv-hue) var(--cv-sat) 34%); */
	
	/*background: linear-gradient(var(--bg-l3), var(--bg-basic));*/

	/*snorql_ldbの変数を上書きしたものは--bg-s-l0 などとして利用可能にする */
	--bg-s-type: hsl(var(--cb-hue) var(--cb-sat) 95% / 0.95);
	
	--bgd-l: calc(var(--cb-lgh) * var(--cb-mul-dk));	/* background dark -- lightness */
	/* changed vars from snorql_ldb.css */
	--bg-basic: hsl(var(--cb-hue) var(--cb-sat) 85% / 0.6);
	--bgt-l: 90%;
	--bgth-l: 75%;
	--bgb-l: 93%;
	--bg-ha-alph: 0.8;
	--bg-he-alph: 0.75;
	/* copy from original */
	--bg-body: hsl(from var(--bg-basic) h s var(--bgb-l));
	--bg-dark: hsl(from var(--bg-basic) h s var(--bgd-l));
	--bg-table: hsl(from var(--bg-basic) h s var(--bgt-l));
	--bg-th: hsl(from var(--bg-basic) h s var(--bgth-l));
	--bg-header: hsl(from var(--bg-th) h s l / var(--bg-ha-alph));
	--bg-hdeven: hsl(from var(--bg-th) h s l / var(--bg-he-alph));
	/* changed vars from snorql_ldb.css */
	--bg-l0: hsl(from var(--bg-table) h s l / 0.8);
	--bg-l1: hsl(from var(--bg-table) h s l / 0.7);
	--bg-l2: hsl(from var(--bg-table) h s l / 0.55);
	--bg-l3: hsl(from var(--bg-table) h s l / 0.4);
	--bg-l4: hsl(from var(--bg-table) h s l / 0.25);
	
	--bg-term: hsl(from var(--bg-basic) h s 89% / 0.2);
	--bg-type: hsl(from var(--bg-basic) h s 96% / 0.2);
	--bg-agential: hsl(57deg var(--cb-sat) 96% / 0.2);
	--bg-spatial: hsl(40deg var(--cb-sat) 95% / 0.2);
	--bg-temporal: hsl(31deg var(--cb-sat) 96% / 0.2);
	
	/* link text colors */
	--tx-link: hsl(0deg 50% 40%);
	--tx-llink: hsl(from var(--tx-link) h s l / 0.5);
	--tx-dlink: hsl(from var(--tx-link) h s calc(l * 0.7));
	--tx-dhead: hsl(from var(--tx-link) h s calc(l * 0.7));
	--tx-blink: hsl(from var(--tx-link) h s calc(l * 1.3));
	--tx-link-decor: hsl(from var(--tx-link) h s l / var(--cl-deco-alph));
	--tx-visited: hsl(242deg 100% 30%); 
	--tx-visited-decor: hsl(from var(--tx-visited) h s l / var(--cl-deco-alph));

	/* color general theme */
	--cg-theme: hsl(var(--cb-hue) var(--db-sat) calc(var(--cb-lgh) * 0.6));
	--cg-theme-m: hsl(from var(--cg-theme) h s calc(l * 1.1));
	--cg-theme-l: hsl(from var(--cg-theme) h s l / 0.2);
	--cg-accent: hsl(0deg 59% 41%); /* brown */
	
	/* event categories */
	--ev-ga1: hsl(41deg 100.0% 42.4%);	/* #d89500 */
	--ev-ga2: hsl(42deg 93.5% 63.9%);	/* #f9c44d */
	--ev-ga3: hsl(277deg 87.5% 47.1%);	/* #920fe1 */
	--ev-ga4: hsl(240deg 64.2% 73.7%);	/* #9191e7 */
	--ev-gc1: hsl(300deg 100.0% 26.3%);	/* #860086 */	/* 教職 */
	--ev-gc2: hsl(244deg 76.0% 67.3%);	/* #756ceb */	/* 公職 */
	--ev-gc3: hsl(162deg 94.1% 26.7%);	/* #04845d */
	--ev-gc4: hsl(162deg 57.0% 47.5%);	/* #34be94 */	/* 文化財団 */
	--ev-gw0: hsl(240deg 92.0% 43.9%);	/* #0909d7 */
	--ev-gw1: hsl(24deg 22% 43.2%);	/* 演劇 */
	--ev-gw2: hsl(86deg 14% 53%);
	--ev-gw3: hsl(192deg 54% 40%);
	--ev-gw4: hsl(0deg 21.6% 40.0%);
	--ev-gw5: hsl(300deg 65.9% 74.7%);	/* #e994e9 */
	--ev-gw6: hsl(0deg 0% 84%);	/* #e994e9 */
}
body {
	background-image: none;	/* snorql_ldbのlinear-gradientを打ち消す */
	background-color: var(--bg-body);
	padding: 0;
	margin: 0;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/** データ種別の色スキーム定義 */
body[data-urisig^=W],
body.work {
	/* 作品 */
	--cb-hue: 233.1deg;
	--db-sat: 18%;
	--cb-lgh: 55%;
}
body[data-urisig^=E] {
	/* 掲載内容 */
	--cb-hue: 294.8deg;
	--db-sat: 11%;
	--cb-lgh: 57%;
}
body.work #searchres li li:before,
body[data-urisig^=M] {
	/* 図書 */
	--cb-hue: 7.8deg;
	--db-sat: 23%;
	--cb-lgh: 58%;
}
body[data-urisig^=U] {
	/* 図書グループ */
	--cb-hue: 350.5deg;
	--db-sat: 20%;
	--cb-lgh: 55%;
}
body[data-urisig^=B],
body[data-dbase=bkshelf],
body.bkshelf {
	/* 蔵書 */
	--cb-hue: 31.3deg;
	--db-sat: 23%;
	--cb-lgh: 58%;
}
.work .digit:after,
.work .mainbooks p.misc:before,
body[data-urisig^=D] {
	/* デジタル化 */
	--cb-hue: 51.2deg;
	--db-sat: 45%;
	--cb-lgh: 49%;
}
body[data-dbase=annot],
body.da {
	/* 注釈 */
	--cb-hue: 85.0deg;
	--db-sat: 14%;
	--cb-lgh: 49%;
}

body[data-type=Quotation] {
	/* 引用 */
	--cb-hue: 231.4deg;
	--db-sat: 8%;
	--cb-lgh: 49%;
}
body[data-urisig=ST],
body[data-type$=Event],
body[data-urisig^=A],
body.calendar,
body.timeliner {
	/* イベント */
	--cb-hue: 192.3deg;
	--db-sat: 24%;
	--cb-lgh: 52%;
}
/* .commonは扉ページ */
body.common {
	--bgb-l: 95%;
}

/** header、h1、gate関連 */
body.snorql header,
header {
	border: none;
	/*padding: 10px var(--lspace) 1px; */
	padding: 7px var(--hdsp) 4px; /*3px*/
	/*background: var(--bg-dark);*/
	/*background: #9f7d5d;*/
	/*background: linear-gradient(to bottom, var(--bg-l3) 0%, var(--bg-l4) 15%, white 40%);*/
	background: white;
	/*box-shadow: inset 0 2px 10px var(--bg-l4);*/
	border-top: black 2px solid;
	margin-top: 0;
	position: relative ;
}
header nav {
	display: inline-block;	/*jk */
	margin: 5px 0 0;
	vertical-align: top;
}
header a,
header a:visited {
	/*color: white;*/
	color: black;
	text-decoration: none;
	font-weight: bolder;
	display: inline-block;
}
header a img {
	vertical-align: middle;
	margin: 5px 0;	/* for svg */
}
header ul {
	display: inline-block;
	padding-left: 0;
	margin: 0;
}
header li {
	display: inline-block;
	padding-left: 0.75em;
}
header span.menu {
	display:none;
}
p.leader {
	/*margin-left: var(--lspace);*/
	color: var(--cg-accent);
}

body > hgroup {
	/*＠＠背景画像h1から移動*/
	background-color: var(--cg-theme);
	/*background-image: linear-gradient(to right, var(--cg-theme) 600px, hsl(from var(--cg-theme) h s l / 0.6) 1250px, var(--cg-theme) 1400px), url("yma-bg-shelf.png") ;*/
	background-image: linear-gradient(to right, var(--cg-theme) 600px, hsl(from var(--cg-theme) h s l / 0.6) 1250px, var(--cg-theme) 1400px), var(--gate-img) ;
	background-repeat: no-repeat;
	background-position: left top;
}
body.snorql h1,
body.iaview h1,
/*.bkshelf h1,
.iaview h1,
header h1 */
h1 {
	color: white;
	padding: 0 var(--hdsp);
	text-align: left;
	/*font-size: 1rem;*/
	font-size: 1.8rem;
	font-weight: normal;
	/*text-shadow: 1px 1px 2px var(--bg-l3);*/
	margin-top: 0;
	margin-bottom: 0;
	/*＠＠背景画像実験→paddingを設定したのでbody > hgroupに移動*/
}

h1 {	/* ymadefから */
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	
	display: flex;
	align-items: center;
}

h1 .bgwrap {
	/*background: var(--bg-l1);*/
	/*height: 70px;*/
	display: var(--bgwr-disp);
	width: var(--bgwr-w);
	height: 40px;
}
.snorql h1 .bgwrap {
	margin-right: 5px;	/* type記述の<small>が入るので狭めておく */
}
.common h1 .bgwrap {
	margin-right: var(--bgwr-m);
}
.bgwrap img {
	display: inline-block;
	/*vertical-align: sub;*/
	/*vertical-align: bottom;*//*text-top*/
}

.common section.gate {
	padding: 0;
	margin: 0;
	background-color: var(--cg-theme);
	/*background-image: linear-gradient(to right, var(--cg-theme-l) 1300px, var(--cg-theme) 1400px), url("yma-bg-shelf.png");*/
	background-image: var(--gate-img);	/*url("yma-bg-shelf.png") ;*/
	background-repeat: no-repeat;
	background-position: left top;
	border: solid transparent 0px;	/*おまじない*/
}
/* すべてのh1はhgroupの子要素にした */
hgroup {
	background-color: var(--cg-theme);
	padding: 0.44em 0;
	/*margin-bottom: 1em;*/	/* 通常のh1もmargin-bottomを0にしたので調整する */
}

section.gate hgroup {
	/*background: hsl(from var(--cg-theme) h s l / 0.75);*/
	/*height: 5rem;*/
	/*height: 6rem;*/
	height: 5.2rem;
	box-sizing: border-box;
	background: linear-gradient(to bottom, hsl(from var(--cg-theme) h s l / 0.85) 2.5rem, hsl(from var(--cg-theme) h s l / 0) 6.5rem);
	/*background: linear-gradient(to bottom, hsl(from var(--cg-theme) h s l / 0.85) 3rem, hsl(from var(--cg-theme) h s l / 0) 5.2rem);*/
	/*background: linear-gradient(to bottom, hsl(from var(--cg-theme) h s l / 0.85) 2.6rem, hsl(from var(--cg-theme) h s l / 0) 4.8rem);*/
	padding-top: 0.58em;
	margin-bottom: 0; /* こちらは元に戻す*/
}
section.gate h1 {
	background: transparent;
	font-size: 1.6rem;
	line-height: 1.3;
	margin-bottom: 0;
}
section.gate .bgwrap img {
	height: 36px;
}
/*section.gate*/ 
hgroup p {
	color: white;
	/*text-shadow: -1px -1px 2px rgb(0 0 0 / 0.6);*/
	line-height: 1.3;
	/*margin: 0.3rem 0 0;*/
	margin: 0;
	/*padding: 0 var(--lspace) 0.3em calc(var(--lspace) + var(--form-l));*/
	/*padding: 0 var(--lspace) 0 calc(var(--lspace) + var(--bgwr-w) + var(--bgwr-m));*/
	padding: 0 var(--lspace) 0;
	font-size: 85%;
	height: 32px;
}

/** メインセクション関連 */
div.main {
	background-color: var(--bg-body);
	/*padding: 0 var(--rspace) 1em var(--mdsp);*/
	padding: 0 var(--mdsp) 1em;
	/*max-width: var(--main-w);*/
	flex: 1;
}

div.main > section {
	padding: var(--msec-pt) var(--secpad);
}
h2 {
	font-size: 1.3em;
	color: var(--cg-theme);
}
h3 {
	font-size: 1.15em;
	margin: 0 0 0.3em;
	clear: left;
}

/** .common関連 */
.common h2, .work h3 {
	border-left-style: solid;
	border-left-width: 5px;
	padding-left: 10px;
}
.common h2 {
	margin: 1em 0;
	border-left-color: var(--cg-accent);;
}
.common section h2 {
	margin-top: 0;
}
.work h3 {
	margin-top: 1em;
	
}
.common section {
	background: white;
}

.common #result h2 {
	display: inline-block;
	margin-right: 1em;
}
.common #result .ctrl0 {
	display: inline-block;
}
.snorql section {
	margin: 1em 0;
}


/** form関連 */
form#fsbq {
	/*margin-bottom: 2em;*/
	margin: 1em 0 2em;
}

section.gate form {
	/*margin: 0 var(--rspace) 2rem var(--lspace);*/
	margin: 0 var(--hdsp) 2rem;
	max-width: var(--main-w);
	border: gray solid 1px;
	background: white;
	display: flex;
}
section.gate form fieldset {
	padding: 3rem var(--form-l) 2rem;
	margin: 0;
	border: none;
}
section.gate form fieldset:first-child {
	flex: 1;
	position:relative;
	/*width: calc(100% - 10em);*/
	box-sizing: content-box;
}
section.gate h2,
section.gate fieldset:first-child legend {
	position:absolute;
	top: 10px;
	left: var(--form-l);
	font-size: 1rem;
	font-weight: bolder;
	white-space: nowrap;
	background: rgb(255 255 255 / 0.5);
	color: black;
	border: none;
	margin: 0;
	padding: 0;
}
section.gate h2:before,
section.gate fieldset legend:before {
	content: "🔍";
	font-weight: normal;
	filter: grayscale(100%) opacity(0.5);
}
section.gate fieldset div {
	/* checkbox group */
	display: flex;
	flex-wrap: wrap;;
	gap: 0.5em;
	margin-top: 0.8em;
	margin-bottom: -0.6em;
}
input#qkwd {
	display: block;
	width: 100%;
	height: 3em;
	box-sizing: border-box;
}
@supports (-webkit-backdrop-filter: none) {
	/* safari */
	input#qkwd {
		border: 1px solid gray;
		border-radius: 3px;
		font-size: 90%;
	}
}
section.gate fieldset:last-child {
	flex: 0;
	/*width: fit-content;
	display: flex;
	align-items: center;
	*/
	background: #ddd;
}
section.gate fieldset:last-child input {
	width: 10rem;
	height: 3rem;
	margin-top: -0.1em;
	/*filter: grayscale(100%);*/
	/*filter: contrast(0%) sepia(100%);*/
	background: #333;
	color: white;
	border-width: 1px;
	font-size: 1.2em;
}

/** footer関連 */
footer {
	color: white;
	background: var(--cg-theme-m);
	width: auto;
	margin: 1em 0 0;
	/*min-height: 2.5em;*/
	height: var(--foot-h);
	padding: 12px var(--lspace) 0;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}
footer a,
footer a:link,
footer a:visited {
	color: white;
}
footer a:before {
	content: " | ";
	color: silver;
	margin: 0 0.5em;
}
footer p {
	margin: 0;
}
#snorql_credit {
	margin: 0.4em 0 -0.4em;
	/*text-align: center;*/
	font-size: 80%;
}
#snorql_credit .misc {
	font-size: 100%;
}
#snorql_credit,
#snorql_credit * {
	color: gray;
}
.hide #snorql_credit {
	display: none;
}


/*** event genre */
.ga1::before {
	background: var(--ev-ga1);
}
.ga2::before {
	background: var(--ev-ga2);
}
.ga3::before {
	background: var(--ev-ga3);
}
.ga4::before {
	background: var(--ev-ga4);
}
.gc1::before {
	background: var(--ev-gc1);
}
.gc2::before {
	background: var(--ev-gc2);
}
.gc3::before {
	background: var(--ev-gc3);
}
.gc4::before {
	background: var(--ev-gc4);
}
.gw0::before {
	background: var(--ev-gw0);
}
.gw1::before {
	background: var(--ev-gw1);
}
.gw2::before{
	background: var(--ev-gw2);
}
.gw3::before {
	background: var(--ev-gw3);
}
.gw4::before {
	background: var(--ev-gw4);
}
.gw5::before {
	background: var(--ev-gw5);
}
.gw6::before {
	background: var(--ev-gw6);
}
input.ga1 {
	accent-color: var(--ev-ga1);
}
input.ga2 {
	accent-color: var(--ev-ga2);
}
input.ga3 {
	accent-color: var(--ev-ga3);
}
input.ga4 {
	accent-color: var(--ev-ga4);
}
input.gc1 {
	accent-color: var(--ev-gc1);
}
input.gc2 {
	accent-color: var(--ev-gc2);
}
input.gc3 {
	accent-color: var(--ev-gc3);
}
input.gc4 {
	accent-color: var(--ev-gc4);
}
input.gw0 {
	accent-color: var(--ev-gw0);
}
input.gw1 {
	accent-color: var(--ev-gw1);
}
input.gw2 {
	accent-color: var(--ev-gw2);
}
input.gw3 {
	accent-color: var(--ev-gw3);
}
input.gw4 {
	accent-color: var(--ev-gw4);
}
input.gw5 {
	accent-color: var(--ev-gw5);
}
input.gw6 {
	accent-color: var(--ev-gw6);
}

/*** メディアクエリ */
@media (min-width: 1200px){
	html {
		/*--secpad: 2.5rem;*/
		--rspace: 5rem;
	}
	section.gate form {
		min-height: 145px;
	}
}
/*＠＠ test 2024-11-22 */
@media (min-width: 1400px) {
	/* 画像幅いっぱいになったら */
	.common section.gate {
		background-size: cover;
		background-position: center;
	}
}
@media (min-width: 1580px) {
	/* ここまでは画像を拡大し、それ以降はスペースを開ける*/
	html {
		--mimg-w: 1480px;
		--mdsp: calc((100% - var(--mimg-w)) / 2);
		/*--mdsp: calc(((100% - var(--mimg-w)) / 2) + var(--secpad) );*/
		/*--secpad: calc((var(--mimg-w) - var(--main-w)) / 2);*/
		--rspace: 5vw;
	}
	.common section.gate {
		background-size: var(--mimg-w);
	}
	/*＠＠ snorqlもhgroupを適用する。2024-11-22 */
	/* section.gate */
	body.snorql header, header {
		/*padding-left: calc((100% - var(--main-w)) / 2);*/
	}
	section.gate hgroup h1 /*,
	div.main*/ {
		margin: 0 auto;
		width: var(--main-w);
	}
	section.gate form#fmain{
		margin: 0 var(--lspace) 2rem;
		/*margin-left: auto;
		margin-right: auto;*/
	}
}
@media (max-width: 1000px){
	html {
		--mdsp: 0.5rem;
		--secpad: 0.5rem;
		--rspace: 1rem;
	--msec-pt:	0.5rem;
	}
	div.main {
		/*padding-right: var(--lspace);*/
	}
	header li {
		font-size: 85%;
		padding-left: 0.65em;
	}
}
/*↑＠＠ test 2024-11-22 */

@media (max-width: 840px){
	html {
		--form-l: 1em;
		--bgwr-m: 4px;
	}
	/* --s-mg-lはsnorql_def.cssで!important設定している */
	body.snorql header,
	header {
		/*padding: 5px 0.9em;*/
		padding-top: 3px;
		padding-bottom: 1px;
	}
	header span.menu {
		display: block;
		cursor: pointer;
		font-size: 24px;
		position: absolute;
		top: 5px;
		right: 10px;
	}
	header span.menu:hover {
		color: blue;
	}
	header nav {
		display: none; /* デフォルトは非表示 */
	}
	header ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		/*position: absolute;
		top: 40px;
		right: 10px;
		*/
		background-color: white;
		border-radius: 2px;
		width: 180px;
		/*width: max-content;*/
		z-index: 200;
		border: solid 1px silver;
	}
	header nav.show {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 10px;
	}
	header .show ul {
		display: block;
	}
	header ul.additional-menu {
		position: static;
	}
	header ul li {
		display: list-item;
		border-top: 1px dotted silver;
		padding: 8px 12px 8px 8px;
	}
	header ul li:first-child {
		border-top: none;
	}
	header ul li:before {
		content: "▶";
		font-size: 80%;
		color: gray;
		margin-right: 5px;
	}
	body.snorql h1,
	.bkshelf h1,
	header h1 {
		font-size: 1.5rem;
	}
	section.gate form fieldset {
		min-height: 0;
	}
	section.gate form fieldset {
		padding: 2.5em var(--form-l) var(--form-l);
		margin: 0;
		border: none;
	}
	fieldset div {
		display: block;
	}
	section.gate form fieldset {
		padding-bottom: 1.5em;
	}
}
@media (max-width: 740px){
	hgroup p {
		font-size: 80%;
		display: flex;
		align-items: center;
	}
}
@media (max-width: 690px){
	section.gate  div small {
		/* not in use */
		display: none;
	}
	hgroup p {
		margin-top: -0.1rem;
		line-height: 1.2;
	}
}
@media (max-width: 600px){
	.gate hgroup small {
		display: none;
	}
	section.gate fieldset:last-child input {
		width: 6rem;
		height: 2em;
		font-size: 1rem;
		margin-top: 0;
	}
	input#qkwd {
		height: 2em;
	}
	section.gate hgroup p {
		font-size: 90%;
	}
	section.gate form fieldset {
		padding-bottom: 1em;
	}
}
@media (max-width: 540px){
	section.gate .haschoice fieldset:last-child {
		padding: 0.8em var(--form-l);
	}
	section.gate .haschoice {
		display: block;
	}
}

/*** cytoscape */
#cytoscape {
	height: 8em;
	width: 104%; /*100%;*/
	margin-left: -2%;
}
.tooltip {
	position: absolute;
	pointer-events: none;
	background: #fcfcfc;
	color: black;
	padding: 2px;
	border-radius: 2px;
	font-size: 0.8em;
	display: none;
}
@media (max-width: 900px){
	#cytoscape {
		height: 36vw;
	}
}