input.intel { width: 110; }
a { color: black; }
td { padding: 4px; }
table { border-spacing: 4px; border-collapse: separate; }
.main {
	font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif
}
.item {
	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
	font-size: 10px;
}
.data {
	font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
	font-size: 76.5%;
}

.inner {
 margin: 10px;
 border: 1px solid black;
 display: flex;
 flex-direction: column;
 height: 100%; 
}

.indent {
 margin: 10px;
}

.text {
/*color: inherit; background-color: inherit;*/
 box-sizing: border-box;
 height: 100%;
 margin: 10px;
/* font-family: monospace; */
 font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
 font-size: medium;
 resize: vertical; }
.wide {
	width: 100%;
}

.row0 {
 background-color: lightgrey;
}

.normal, .matrix th, td {
  padding: 4px;
}

.matrix td:last-child {
  width: 48px;
}

.normal th, td {
  white-space: pre;
}

table.normal, table.matrix {
  border-spacing: 4px;
  border-collapse: separate;
}

.matrix td {
  width: 40px;
  vertical-align: middle;
  text-align: right;
}

.matrix th.col {
  height: 150px;
  width: 40px;
  position: relative;
  vertical-align: bottom;
}

.matrix th.col > div {
  position: relative;
  top: 0px;
  left: 22px;
  height: 100%;
  width: 100%;
  transform: skew(-15deg,0deg);
  overflow: hidden;
}

.matrix th.col > div > span {
  transform: skew(15deg,0deg) rotate(-75deg);
  position: absolute;
  bottom: 40px;
  left: -25px;
  display: inline-block;
  width: 85px;
  text-align: left;
  white-space: nowrap;
}

.center { text-align: center; }

.mtt {
  position: relative;
  display: inline-block;
}

.mtt .mtth {
  visibility: hidden;
  background-color: rgba(0,0,0,.85);
  color: #fff;
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: -60px;
  right: 105%;
}

.tt th {
  padding: 0 2px;
  text-align: right;
  font-style: italic;
}

.tt td {
  padding: 0 2px;
  text-align: left;
}

.mtt:hover .mtth {
  visibility: visible;
}

button {
 border: 0;
 line-height: 2.5;
 padding: 0 20px;
 font-size: 1rem;
 color: #fff;
 text-shadow: 1px 1px 1px #000;
 border-radius: 10px;
 background-image: linear-gradient(
  to top left,
  rgba(0, 0, 0, .2),
  rgba(0, 0, 0, .2) 30%,
  rgba(0, 0, 0, 0)
 );
 box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, .6),
  inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.go { background-color: rgba(0, 171, 102, 1); }
.atn { background-color: rgba(238, 210, 2, 1); }
.stop { background-color: rgba(211, 33, 45, 1); }

.go:hover { background-color: rgba(0, 207, 123, 1); }
.atn:hover { background-color: rgba(255, 226, 3, 1); }
.stop:hover { background-color: rgba(242, 39, 49, 1); }

button:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}