body {background-color: #ddd; padding-right: 150px; font-family:"Montserrat",sans-serif;}
button {font-size: 18px; background-color: #0003; margin: 2px 0;}
hr {margin: 10px 0;}
.mybutton {font-size: 24px; background-color: #0003; padding: 2px; box-shadow:1px 1px 1px #0007, -1px -1px 1px #000f;}

.thecontrols {position: absolute; right: 10px; text-align: right; top: 10px; font-size: 14px; color:#900;}
.thecontrols {scrollbar-width: thin; overflow-y: scroll; height: 94vh; top: 3vh; background: #eee; padding: 5px 8px; width: 20%;}
.thecontrols .somebuttons {text-align: center;}
.thecontrols .somebuttons button {width: 140px;}
.thecontrols p {position: initial; width: 200px; text-align: left;}
.error {font-size: 0.9em; text-transform: uppercase; color: #f55;}
.todo {color:black; font-size:10px; cursor:default; margin-top:100px;}
svg {cursor: pointer;}

#info {width: 90%; height: 20vh; margin: 0 auto; overflow-y: auto; padding: 10px; box-sizing: border-box; box-shadow: 2px 3px 9px #666; font-size: 10px;}
.showinfo {background-color: #ffd; padding: 0;}
.showinfo p {padding: 0; margin: 0;}
.showinfo .debug {color:#b00; font-size: 0.7em; padding-left: 20px;}
.showinfo {display: none;}

#theframe {width: 83%; height: 90vh; margin: 10px auto; margin-right: 20%; box-shadow: inset 5px 5px 23px #666;}
.showgraph {background-color: #fff;}
input, output {display: inline-block; vertical-align: middle;}
.disabledcontrol {color:#999; cursor:not-allowed!important;}

.invalid {color: red;}
.clickentry {border: 2px solid orange;}

.littlenote {color: black; font-weight: bold; padding: 2px; cursor: help; padding-left: 5px; padding-right: 5px; margin-right: 5px; font-size: 0.7em; width: 30px; height: 30px; border-radius: 30px; border: 1px solid #444;}

#ctrlnote {padding: 2px;}
.redbg {background-color: red; color: white; border-radius: 3px;}

.navigation {z-index:100; position:fixed; margin:0; padding:5px; background-color:#444; border-radius:3px; top:5px; left:5px;}
.navigation {border:1px solid black;}
.navigation a {color:orange;}
.navigation a:hover {color:white;}
.navigation .navspan {color:orange; cursor:pointer;}
.navigation .navspan:hover {color:white;}
.navigation ul {margin:0; padding:0;}
.navigation ul li {float:left; list-style-type:none; margin:2px 5px; text-transform:uppercase; font-size: 11px;}
.navigation {box-shadow: 5px 5px 4px #99a;}
.navshadow {pointer-events:none; height:26px; width:73%; position:absolute; bottom:-2px; right:-2px; box-shadow: 10px 10px 7px #99a;}

#extracontrols {
 width: 20px;
 height: 500px;
 overflow: hidden;
 box-sizing: border-box;
 padding: 10px;
 border-radius:4px 0 0 2px;
 border:2px solid #bbb;
 border-right: none;
 /* box-shadow: inset -5px 0 16px 0 #444;*/
 background:#999e;
 background:#444d;
 top:calc(50% - 250px);
 right:0;
 /* right:-50px; */
 /* clip-path:inset(0 50px 0 0); */
 z-index:1;
 position:absolute;
 color: #ed0;
 transition: all ease 0.41s;
}

/* this breaks once the "show all controls" button has been pressed (it puts in-line CSS on the element): */
/* (but leave it for now until we sort something out) */
#extracontrols:hover {
 width: 250px;
 padding: 10px;
 transition: all ease 0.41s;
}

.extracontrolpanel {display:inline-block; width:230px;}
.midptlabel {display:none;}
.nodelabel {font-family:'Noto Serif', serif;}
.edgelabel {font-family:'Noto Serif', serif;}
.demobutton {font-size: 12px; border-radius:4px;}
#neoautomorphismbutton {font-size: 1em;}

.instructions {font-size: 12px; color:#777; float:right;}

.alabel {transition: fill 2s ease;} /* allows us to fade out labels (see automorphism.js) */

.clicktoedit {cursor: pointer;}