* {
  box-sizing: border-box;
}

dl{
  font-size:small;
}
dl dt{
  margin-left:20px;
  position:relative;
}
dl dt:before{
  content:"▶";
  position:absolute;
  left:-15px;
  top:2px;
  font-size:xx-small;
  color:gray;
}

dl dd{

  font-size:smaller;
  margin-bottom:10px;
  
}

.cta {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.container {
  width: 49%;
  height: 35vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  margin: 0;
  background-image: url("/things/bg.JPG");
  background-position-y: -200px;
  border: 1px solid gray;
}
.container.fullwidth{
  width: 100%;
  height: 45vh;
  min-height:300px;
  
}

.gener.fullwidth{
  width: 100%;
}

.container .but {
  position: absolute;
  width: auto;
  height: auto;
  display:flex;
  text-align: center;
  align-items:center;
  justify-content: space-around;
  margin: 0;
 
  background: #000;
  color: white;
  font-weight: 700;
}
.container .but span.mm {
  color: white;
  font-size: x-small;
}

.gener {
  width: 49%;
  border: 1px solid gray;
  padding: 3px;
  margin: 0;
  color: gray;
  font-size: x-small !important;
  text-align: center;
  font-family: monospace;
}
.container span {
  font-size: small;
  color: #888;
}

.container .gr {
  width: 25%;
  height: 25%;
  margin: 0 !important;
  padding: 0 !important;
  color: #efefef;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: small;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.encoder {
  margin-top: 0;
  margin-bottom: 0;
  height: 30px;
}
.enker {
}
.enker span {
  vertical-align: middle;
  display: inline-block;
  margin: 0;
}
.enker button {
  vertical-align: middle;
  display: inline-block;
  margin-left: 5px;
}
.enker span.enc,
.enker span.enc1 {
  font-size: 11px;
  width: 15px;
  height: 20px;
  padding-top: 2px;
  display: inline-block;
  text-align: center;
  border: 1px solid #ddd;
  color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  font-family: monospace;
}

#org1 span.enc.highlighted,
#org2 span.enc.highlighted.crossed {
  background: rgb(252, 206, 163);
  color: green;
  border-color: black;
}
#org2 span.enc.highlighted,
#org1 span.enc.highlighted.crossed {
  background: lightyellow;
  color: green;
  border-color: black;
}

.enker span.enc1.highlighted {
  background: lightyellow;
  color: black;
}

.enker span.enc.bl {
  background-color: gray;
  color: white;
}
.enc.rr {
  background: #fdf3f4;
}

.enc.gg {
  background: #f8fdf8;
}

.enc.bb {
  background: #e0e9f3;
}

.nwh span {
  padding: 5px;
  display: inline-block;
  border: 1px solid #ddd;
  font-family: monospace;
  margin: 0;
}

.crossover {
  display: none;
}
.mutated {
  background-color: orange !important;
  font-weight: bold;
}
#genome {
  font-family: monospace;
}

span.hh {
  background: black;
  padding: 5px;
  width: 40px;
  height: auto;
  margin-left: 20px;
  display: inline-block;
  font-family: monospace;
}
#runner {
  margin-top: 5px;
  margin-bottom: 5px;
}
#runner * {
  font-size: small;
  display: inline-block;
}
#runner input {
  width: 40px;
}
.IroHandle{
  /* top:12px !important; */
}

.IroSlider{
  background-image:none !important;
}
#picker{


  
}
.IroColorPicker *{
  margin:0;
}

.colours{
  display:flex;
  justify-content: space-between;
  padding:0;
  margin:0 !important;
  
}

.examp{
 position:absolute; 
 top:-5px;
 right:15px;
 border:2px solid lightgrey;
 border-radius:18px;
 padding:8px;
  
}

.fryer{
  
}
.picker_cont{
  text-align:center;
  margin-left:10px;
}
.picker_cont input{
   margin: 10px auto;
}
.chip{
  width:20px; height:20px;
  border:1px solid gray;
  margin:0 5px 0 0;
  display:inline-block;
  background-color:rgba(253,253,253,1)
}

.palettes{
  width:75%;
  min-height:300px;border:1px solid gray;
  padding:20px;
  position:relative;

}
#inper{
  display:block;
  color:red;
  font-size:xx-small;
}
input[type="submit"]{
  background-color:white;
  border-radius:12px;
  -webkit-appearance: none;
  padding:6px 8px;
  color:black;
  border:1px solid gray;

}