@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body, .chipbox *, iframe {
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	--foreforeground: #3788ae;
	--foreground: #082f41;
	--background: #03141c;
	color: white;
	background: var(--background);
	/*padding: 1cm;*/
	font-size: 12pt;
	font-family: 'Raleway', sans-serif;
	height: 100%;
}

body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	display: grid;
	grid-template-areas: 
	"searcher graph";
	grid-column-gap: 0;
	grid-row-gap: 0;
	--chip-scale: 1.5rem !important;
}

iframe#searcher {
	height: 100vh;
	width: 13cm;

	margin: 0;
	grid-area: searcher;
	position: relative;
}

div#graph {
	width:100vw;
	--graphOffsetX: 0;
	--graphOffsetY: 0;
	grid-area: graph;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAA3SURBVDhPY2RgYPgPxBQDZhEZMM0EJqkIRg2kHIwaSDkYNZByMGog5YARWNJSpcSGASq7kIEBAL94Aos8Ra5sAAAAAElFTkSuQmCC");
	background-repeat: repeat;
	background-position-x: calc(var(--graphOffsetX) * 1px);
	background-position-y: calc(var(--graphOffsetY) * 1px);
}

#searchbox[open] + div#graph {
	width: calc(100vw - 13cm);
}

#searchbox:not([open]) > summary::marker {
	content: ">>>";
}
#searchbox[open] > summary::marker {
	content: "<<<";
}

#searchbox[open] > summary {
	left: 13cm;
}

#searchbox > summary::marker {
	position: absolute;
}

#searchbox > summary {
	position: absolute;
	z-index: 99999;
	top: 50%;
	bottom: 50%;
	padding-left: 1mm;
	height: calc(1rem + 1mm);
	border: 1mm solid var(--foreground);
	border-right: 2mm solid var(--foreground);
	background: var(--foreground);
	border-top-right-radius: 2mm;
	border-bottom-right-radius: 2mm;
}

#searchbox {
	border-right: 2mm var(--foreground) solid;
	z-index: 999999;
}

div.chipbox {
	z-index: 100;
	--chipOffsetX: 0;
	--chipOffsetY: 0;
	position: absolute;
	user-select: none;
  transform: translate(
		calc((var(--graphOffsetX) + var(--chipOffsetX)) * 1px),
		calc((var(--graphOffsetY) + var(--chipOffsetY)) * 1px));
}

div.chipbox > div#selected {
	padding: -1mm;
	border: 1mm white solid;
}

div.chipbox > div#selected + .ui {
	display: unset;
}
div.chipbox > div:not(#selected) + .ui {
	display: none;
}

canvas {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: 10;

	pointer-events: none;
}

#helpbox > summary {
	height: 1.5cm;
	width: 1.5cm;
	display: flex;
	background: #0000;
	border: #fff7 solid 0.9mm;
	color: #fff7;
	border-radius: 1.5cm;
	padding: 0;
	font-size: 1.5cm;
	align-items: center;
	justify-content: center;
	float: left;
	position: absolute;
	bottom: 0;
	right: 0;
	user-select: none;
}
#helpbox[open] > summary {
	margin-bottom: 0;
	background: #fff7;
	border: #0000 solid 0.9mm;
	color: #fff;
}

#helpbox {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	background: #0000;
	border-radius: 0;
	z-index: 100;
}

#helpbox > div {
	background: var(--foreground);
	border-radius: 0.5cm;
	height: 60vh;
	width: 10cm;
	overflow-x: auto;
	padding: 1rem;
	position: relative;
	bottom: 2cm;
	box-shadow: black 1mm 1mm 3mm
}

#plbox > summary::marker {
	content:'';
}
#plbox > summary {
	height: 3rem;
	width: 3rem;
	background: #0000;
	color: #fff7;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	user-select: none;
}
#plbox[open] > summary {
	color: #fff;
}

#plbox {
	position: fixed;
	top: 2rem;
	right: 2rem;
	background: #0000;
	border-radius: 0;
	z-index: 100;
}

#plbox > div {
	background: var(--foreground);
	border-radius: 0.5cm;
	width: 10cm;
	padding: 1rem;
	position: relative;
	top: 4rem;
	box-shadow: black 1mm 1mm 3mm
}


hr {
	border: 0.5mm solid var(--foreforeground);
	background: var(--foreforeground);
	width: 100%;
	height: 0%;
	
}

kbd {
  background: white;
  color: black;
  padding: 0.5mm;
  border-radius: 1mm;
  box-shadow: inset black -0.25mm -0.25mm 1mm;
}

.icon {
	font-family: "Icons";
	font-size: 2rem;
	height: 2rem;
	width:  2rem;
}

button, input {
	color: white;
	background: var(--background);
	padding: 0.5rem;

	border: none;
	border-radius: 1rem;
	font-size: 13pt;
	margin: 0.5rem;
}

button:hover {
	background: var(--foreforeground);
}

a {color: white;}