@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@600&family=Noto+Sans:wght@100&display=swap');


body{
}

svg{
  overflow: visible;
}

canvas{
  image-rendering: pixelated;
}
.headline{
  max-width: 500px;
}
.paint-container{
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-column-gap: 10px;

  width: 500px;
  position: relative;
  margin: 0px auto;
  margin-bottom: 30px;
  margin-top: 30px;
}

.paint-container .title{
  font-weight: 600;
  text-align: center;
}

.paint-container .prediction{
  text-align: center;
}

.big-prediction{
  font-size: 233px;
  line-height: 1em;
  margin-top: 10px;
}
.prediction-container{
  position: relative;
  height: 1.7em;
}
.prediction-container > div{
  position: absolute;
}
.percentage, .confidence{
  line-height: 1.1em;
}

.percentage{
  width: 100%;
  top: .2em;
  color: #fff;
}



.img-picker{
  position: relative;
  text-align: center;
}

#mnist-ensemble{
  width: 600px;
}

#mnist-ensemble .models{
  display: inline-block;
  position: relative;
  /*z-index: -100;*/
  vertical-align: top;
}
#mnist-ensemble .models .title{
  position: relative;
  left: -34px;
}

#mnist-ensemble .predict-percent{
  /*font-family: monospace;*/
  font-size: 12px;
  width: 60px;
  text-align: right;
  display: inline-block;
  margin-left: -5px;
  color: #fff;
}

g.is-dragging{
  cursor: pointer;
}

p strong{
/*  background: #000;
  padding: 2px;
  color: #fff;
*/  
  font-weight: 600;
}








.ensemble-2d{
  margin: 0px auto;
  width: calc(100% + 10px);
  margin-left: -5px;
/*  width: 300px;*/
}
.ensemble-2d .control{
  text-align: center;
  display: block;
  margin: 0px auto;
/*  margin-top: 10x;*/
  margin-bottom: 15px;
  margin-top: 5px;
}

.ensemble-2d input{
  width: 170px;
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

input[type='range']::-webkit-slider-runnable-track{
  background: #eee;
  height: 5px;
  outline: 1px solid #999;
}
input[type='range']::-moz-range-track {
  background: #eee;
  height: 5px;
  outline: 1px solid #999;
}

input[type='range']::-webkit-slider-thumb{
  appearance: none;
  margin-top: -4px;
  background-color: #000;
  height: 13px;
  width: 5px;
  border-radius: 10px;
  position: relative;
  z-index: 1000;
}
input[type='range']::-moz-range-thumb {
   appearance: none;
   margin-top: -4px;
   background-color: #000;
   height: 13px;
   width: 5px;
   border-radius: 10px;
   position: relative;
   z-index: 1000;
}
input[type='range']:hover::-webkit-slider-runnable-track{
  outline: 1px solid #000;
}
input[type='range']:hover::-moz-range-track {
  outline: 1px solid #000;
}



.control .button{
  padding: 1px 10px;
/*  margin-left: 20px;*/
  background: #eee;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 10px;
  font-family: Noto Emoji,'Roboto', Helvetica, sans-serif;
}

.ensemble-2d .title{
  font-weight: 600;
  text-align: center;
  white-space: nowrap;

}


path.model{
/* https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode */
  mix-blend-mode: normal;
}

svg{
  isolation: isolate;
}






.annotation-container{
  position: absolute;
  pointer-events: none;
}
.annotation-container.is-draggable{
  pointer-events: all;
}

.annotation-container path{
  stroke: #000;
  fill:  none;
}

.annotation-container div{
  font-style: italic;
  font-family: sans-serif;
  padding: 2px;
  padding-right: 5px;
  line-height: 1.05em;
  font-size: 14px;
  /*outline:  1px solid #000;*/
  /*background: yellow;*/
}

.annotation-container svg{
  position: relative;
}

.annotation-container div ni{
  display: inline-block;
  font-family: sans-serif;
  font-style: normal;
  font-size: 10px;
}

.button{
  outline: 1px #555 solid;
  padding: 0px 2px;
  margin: 0px 2px;
  cursor: pointer;
  user-select: none;
  background: #eee;
}
.button:hover{
  outline: 3px #fff solid;
  filter: invert(1);
  color: #000;
  background: #fff;

}



* > *{
/*  outline: 1px solid #f0f;*/
}