.application {
  background-color:black;
  color: white;
  font-size: 16px;
}
.application input[disabled], 
.application button[disabled], 
.application select[disabled] {
  opacity: 0.3;
}
.application input[type=text], 
.application textarea, 
.application select,
.application button,
.application a.button {
  border: #fff 1px solid;
  font-size: 15px;
  line-height: 1.2em;
  width: 100%;
  color: #000;
  background-color: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 0.5em;

}
.application {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}
.application .command {
  height: 100%;
  margin-right: 25px;
}
.layout.application  {
  padding-top: 64px;
  padding-bottom: 64px;

}
.layout.application.arena {
  padding-top: 0px;
  padding-bottom: 100px;
}
.application .panel {
  padding-left: 1em;
  padding-right: 1em;
  width:100%;
  position: absolute;
  box-sizing:border-box;
  left:0px;
}

.arena.panel.bottom {
  border-top: solid 1px green;
  bottom:0px;
  height:100px;
}
.application .panel.bottom {
  border-top: solid 1px green;
  bottom:20px;
  height:64px;
}

.application .commands {
  height:100%;
  margin: 10px 0;
}
.application .command {
  height:100%;
}
.application .panel.top{
  border-bottom: solid 1px green;
  top:0px;
  height:64px;
}
.application .main {
  position:relative;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

.application .wrapper, .application .d3wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}
.application svg {
  /*border: solid 1px white;*/
  box-sizing:border-box;
  margin: 0px;
  padding: 0px;
  width:100%;
  height:100%;
}
.application .form {
  padding: 20px;
}
.application .cell {
  fill: grey;
  stroke: white;
}
.application .cell.black {
  fill: red;
  stroke: white;
}
.application .cell.white {
  fill: blue;
  stroke: white;
}

.application .cell.selected {
  fill:yellow;
}
.application .pattern .cell {
  fill: yellow;
  opacity:0.5;
  stroke:yellow;
  stroke-width:0.2px;
  stroke-dasharray:0.1;
}
.application .debug {
  fill:none;
  stroke: red;
}
.application .debug.window {
  stroke: red;
}

.application .debug.selection {
  stroke: yellow;
}
.application #qr-code {
  height:150px;
  position:absolute;
  bottom:0px;
  right:0px;
}
.application #qr-code svg {
  height:90%;
  background:white;
}
.application #qr-code path {
  fill: green;
  stroke: none;
}

.application .label-value {
  margin-bottom: 10px;
}

.application .label-value:first-of-type {
  margin-bottom: 15px;
}

.application .label-value:last-of-type {
  margin-bottom: 25px;
}

.application button, 
.application a.button {
  background:    #8a8a8a;
  background:    -webkit-linear-gradient(#8a8a8a, #5c5c5c);
  background:    linear-gradient(#8a8a8a, #5c5c5c);
  border-radius: 5px;
  box-shadow:    0 1px 0 0 #444;
  color:         #fff;
  display:       inline-block;
  padding:       20px 30px;

  font:          normal 700 24px/1 "Calibri", sans-serif;
  text-align:    center;
  text-shadow:   1px 1px 0 #000;
}


.application li {
  margin-bottom: 15px;
}


.application .agree {
  margin-bottom: 20px;
}


.application .stats .player-1 {
  background-color: blue;
}
.application .stats .player-2 {
  background-color: red;
  float:right;
}
.application .stats .player-score {
  font-size:42px;
  float:right;
}
.application .stats .player-name {
  float:left;
}
.application .stats > div {
  float: left;
  padding: 10px;
  width: 500px;
  margin-top: 5px;
}
.application .stats .generation {
  font-size:36px
}

.application .stats .generation .label{
  margin-right:25px;
}
.application h1 {
  display: block;
  font-size: 2em;
  line-height: 1.17;
  font-weight: bold;
}