body {
  font: 10px sans-serif;
  background-image: linear-gradient(45deg,  #c60b1e 25%, #ffc400 25%,  #ffc400 75%,#c60b1e 75%, #c60b1e);
  background-attachment: fixed;
}
.dot {
  fill:none;
  stroke: none;
  stroke-width: 0.3px;
}
g.data:hover .dot {
  fill:#999;
  stroke-width: 1px;
}
g.data path {
  stroke:#aaa;
  stroke-width: 0.7px;
  opacity:0.3;
}
.dottext {
  text-anchor:middle;
  baseline-shift : -35%;
  font: 3px sans-serif;
  color: black;
  opacity:1.0;
}
g.data:hover .dottext{
  font-weight: bold;
  fill:purple;
  opacity:1;
  z-index:20;
}
.dot.wrong {
  fill: pink;
}
.dot.right {
  fill: #c0f3c0;
}
.state0 {
  font-weight: bold;
  fill:black;
}
.state1 {
  fill:red;
}
.state2 {
  fill:green;
}
.state3 {
  fill:yellow;
}
.state4 {
  fill:purple;
}
.state5 {
  fill:orange;
}
* {
  user-select: none;  
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */ 
}
#main,#list, #data {
	display:inline-block;
}
#list{
	text-align:left;
}
#mainDiv {
	text-align:center;
}
@media all and (orientation:portrait) {  
	#main {
		border:1px solid #aaa;
		width:70vw;
		max-width:90vw;
		height:70vw;
		max-height:90vw;
	}
	#list {
		height:70vw;
		max-height:70vh;
		overflow:hidden;	
		
	}
}
@media all and (orientation:landscape) {
	#main {
		border:1px solid #ccc;
		width:70vh;
		height:70vh;
		max-height:90vh;
	}
	#list {
		height:70vh;
		max-width:70vh;
		max-height:70vh;	
		overflow:auto;	
	}
}
svg {
	background-color: rgba(255,255,255,0.8);
}
#list, #data {
	background-color: rgba(255,255,255,0.5);
}
.running {
	background-color: #eee;
}
#thing2 {
	margin:10px;
	font: 20px sans-serif;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

#list .tooltip .tooltiptext{
	width:100px;
}
#list ul, #data ul {
	list-style: none;
	padding:10px;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
	font: 16px sans-serif;
    width: 300px;
    background-color: green;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.tooltip  .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: green transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover  .tooltiptext, .tooltip:active  .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.hint{
		font: 12px italic sans-serif;
}
/* data */
#data { 
   border:2px solid white;
}
#data span.title{
		font: 18px  sans-serif;	
		color:black;
		font-weight:bold;
}	
#data span.primary{
		font: 16px sans-serif;	
		color:brown;
		font-weight:bold;
}	
#data ul li{
		font: 12px serif;
		font-style:italic;
}