body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #A5ADB6;
}

div.content {
  margin: 0 auto 0 auto;
  width: 640px;
}

/* unvisited link */
a:link {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: black;
  background-color: #CCC;
}

a:active {
  color: black;
  background-color: #EEE;
  text-decoration: none;
}

.floatRow > div {
  float:left;
  margin-right: 5px;
  margin-bottom: 5px;
}

.floatRow::before, .floatRow::after {
  content: "";
  display: block;
}

.floatRow::after {
  clear: both;
}

.tags {
    font: 12px/1.5 'PT Sans', serif;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }

  .tags li {
    float: left;
  }

  .tag {
    background: #eee;
    border-radius: 3px 0 0 3px;
    color: #999;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding: 0 20px 0 23px;
    position: relative;
    margin: 0 10px 10px 0;
    text-decoration: none;
    transition: color 0.2s;
  }

  .tag::before {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
    content: '';
    height: 6px;
    left: 10px;
    position: absolute;
    width: 6px;
    top: 10px;
  }

  .tag::after {
    background: #A5ADB6;
    border-bottom: 13px solid transparent;
    border-left: 10px solid #eee;
    border-top: 13px solid transparent;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
  }

  .tag:hover {
    background-color: crimson;
    color: white;
  }

  .tag:hover::after {
     border-left-color: crimson;
  }

  a.taglink:hover {
    color: black;
    background-color: #A5ADB6;
  }
  
  a.taglink:active {
    color: black;
    background-color: #A5ADB6;
  }
.hero-image {
    /* Fixed height */
    height: 200px;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }


/**
Range of bright contrasting colors that go well together.
*/
.color0 {
    /* blank/empty space */
    background-color: hsl(216, 27%, 20%);
}

.color1 {
    background-color: hsl(216, 78%, 60%);
}

.color2 {
    background-color: hsl(20, 78%, 60%);
}

.color3 {
    background-color: hsl(131, 53%, 48%);
}

.color4 {
    background-color: hsl(263, 72%, 65%);
}

.color5 {
    background-color: hsl(68, 78%, 60%);
}

.color6 {
    background-color: hsl(8, 78%, 60%);
}

.color7 {
    background-color: hsl(178, 78%, 60%);
}

.color8 {
    background-color: hsl(0, 44%, 72%);
}

/*
Range of colors with semantic meaning.
these indicate good, bad, etc.
*/
.color100 {
    background-color: #360c31;
}

.color101 {
    background-color: #d62828;
}

.color102 {
    background-color: #f77f00;
}

.color103 {
    background-color: hsl(40, 95%, 63%);
}

.color104 {
    background-color: #6a994e;
}

.color105 {
    background-color: hsl(98, 100%, 42%);
}

.color106 {
    background-color: #666666;
}

.color107 {
    background-color: #d2d2d2;
}

/* Gradient Colors*/
.color200 {
    background-color: hsl(226, 80%, 0%);
}

.color201 {
    background-color: hsl(226, 80%, 9%);
}

.color202 {
    background-color: hsl(226, 80%, 17%);
}

.color203 {
    background-color: hsl(226, 80%, 25%);
}

.color204 {
    background-color: hsl(226, 80%, 34%);
}

.color205 {
    background-color: hsl(226, 80%, 42%);
}

.color206 {
    background-color: hsl(226, 80%, 50%);
}

.color207 {
    background-color: hsl(226, 80%, 58%);
}

.color208 {
    background-color: hsl(226, 80%, 66%);
}

.color209 {
    background-color: hsl(226, 80%, 75%);
}

.color210 {
    background-color: hsl(226, 80%, 83%);
}

.color211 {
    background-color: hsl(226, 80%, 91%);
}

.color212 {
    background-color: hsl(226, 80%, 100%);
}

/* Checkerboard / Alternating Colors*/
.color301 {
    background-color: #EDB458;
}

.color302 {
    background-color: #b97832;
}


/* https://codepen.io/simon-sant-cassia/pen/QWGdOgV */

.tabs-container {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
}

/* hide the actual radio buttons */
.tabs-container > input[type=radio] {
  display: none;
}

/* let user hide all labels if they want */
.tabs-container.hide-labels > .tab-label {
  display: none;
}

/* rounded corners */
.tabs-container > input[type=radio]:first-child + .tab-label {
  border-radius: 5px 0 0 0px;
}

/* rounded corners */
.tabs-container > input[type=radio]:last-of-type + .tab-label {
  border-radius: 0 5px 0px 0;
}

/* non-selected tabs */
.tabs-container .tab-label {
    padding: 5px 15px;
    color: #eee;
    background-color: darkslategray;
}

/* selected tab */
.tabs-container > input[type=radio]:checked + .tab-label {
  background-color: #eee;
  color: darkslategray;
}

/* hide content if not selected */
.tabs-container > input[type=radio]:not(:checked) + .tab-label + .tab-content {
  display: none;
}

.tabs-container .tab-content {
  order: 99;
  width: 100%;
  display: block;
}
* {
    box-sizing: border-box;
}

.map {
    /*margin: 20px;*/
    user-select: none;
    overflow: hidden;
}

.map.small {
    width: 200px;
}

.map.large {
    width: 600px;
}

div.caption {
   background-color: lightgrey;
   text-align: center;
   padding: 3px; 
}

.actualMap {
    display: grid;
    padding: 15px;
    /** grid-auto-rows: 1fr; /* introduces hairline gaps between rows, resolves others. See /puzzle/rendering/widgets/ for details. */
    grid-gap: 0px;
    background-color: #eee;
}

.map-cell {
    display: flex;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.map-cell .cell-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;    
}

  /* Elevation Map */  
  .map .but {
    float: left;
    width: 62px;
    height: 62px;
    line-height: 62px;
    text-align: center;
  }
  
  .map .but.active {
    background-color: #DDD;
    border-top: 3px solid #0D0;
    border-bottom: 3px solid #F00;
    border-left: 3px solid #00F;
    border-right: 3px solid #00F;
  }
  
  .map .but:hover {
    background-color: #FFF;
    background: #94ff9b;
  }
  
  .map .but.active:hover {
    background-color: #FFF;
    background: linear-gradient(45deg, #ff9d9b 50%, #94ff9b 50%);
  }
  
  /* Text Area */
  .points {
    float: left;
    width: 200px;
    height: 200px;
    margin: 20px;
  }
  
  .points textarea {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    resize: none;
  }
  
  .compact {
    float: left;
    width: 200px;
    height: 200px;
    margin: 20px;
  }
  
  .compact textarea {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    resize: none;
  }
/* Overall */
* {
    box-sizing: border-box;
  }
  
  body {
    font-family: sans-serif;
    margin: 20px;
  }
  
  /* 3D Scene */
  .is_spinning {
    animation: spinCube 40s infinite linear;
  }
  
  @keyframes spinCube {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
  
  div.scene {
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 20px;
    perspective: 400px;
    user-select: none;
  }
  
  /*
  Zooms to fit the screen reasonably well
  Adjusts viewing angle too.
  */
  .zoomer {
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-1000px) rotateX(-30deg);
  }
  
  /* defines the rotation */
  .spinner {
    position: relative;
    transform-style: preserve-3d;
  }
  
  /* this is centered around axis of rotation */
  .polycube {
    /*transform: translateX(-200px) translateZ(-200px);*/
    position: relative;
    transform-style: preserve-3d;
  }
  
  .cube {
    width: 200px;
    height: 200px;
    position: absolute;
    transform-style: preserve-3d;
  }

  .opaque_cube_faces .cube__face {
    background: hsla(0, 100%, 45%, 1.0);
  }

  .dotted_cube_edges .cube__face{
    border: 5px dotted black;
  }

  .transparent_cube_faces .cube__face {
    background: transparent;
  }

  .cube__face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 5px solid black;
    line-height: 200px;
    color: black;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
  }
  
  .cube__face--front {
    background: hsla(0, 100%, 45%, 0.8);
    transform: rotateY(0deg) translateZ(100px);
  }
  .cube__face--right {
    background: hsla(240, 100%, 50%, 0.8);
    transform: rotateY(90deg) translateZ(100px);
  }
  .cube__face--back {
    background: hsla(120, 100%, 40%, 0.8);
    transform: rotateY(180deg) translateZ(100px);
  }
  .cube__face--left {
    background: hsla(240, 100%, 50%, 0.8);
    transform: rotateY(-90deg) translateZ(100px);
  }
  .cube__face--top {
    background: hsla(60, 100%, 50%, 0.8);
    transform: rotateX(90deg) translateZ(100px);
  }
  .cube__face--bottom {
    background: hsla(60, 100%, 50%, 0.8);
    transform: rotateX(-90deg) translateZ(100px);
  }

.constraintsTemplate::before {
    content: "TEMPLATE";
            color: #4467da89;
            margin-left: -5px;
}

.constraintsTemplate {
    border: #4467da dashed 4px; padding: 15px;
    background: #4467da5a;
}

.constraintsGenerated {
    border: #4467da solid 4px; padding: 15px;
    background: #4467da5a;
}


/* Outermost container: viewport plus caption. Set width only.
div.tile__outer {
}
*/

/* User-visible viewport, not including caption. Set height only. */
div.tile__viewport {
    background-color: #CDF;
    overflow: hidden;
}

/* The full map of, and direct parent to, all tiles. Might be partially hidden. Does not include margin. Set width and height. */
div.tile__fullmap {
    position: relative;
}

/* One individual square */
div.tile__square {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TODO: deprecate + remove this */
/* Optional caption/label inside a square */
div.tile__square .cell-content {
    text-align: center;
    line-height: 50px;
}
.plotReport__rootContainer {
    width:900px;
}

.plotReport__exploded {
    width:200px;
    height: 695px;
    overflow: scroll;
}

.plotReport__exploded--loading {
    background-color: #ccccff;
}

.plotReport__middleColumn {
    width: 270px;
}

.plotReport__rightColumn {
    width:410px;
}

.plotReport__rightColumn--loading {
    background-color: #ccccff;
    height: 695px;
}

.plotReport__textBox {
    float: left;
    resize:none;
}

.plotReport__textBox--loading {
    background-color: #ccccff;
}

.plotReport__textBox--error {
    background-color: #ffcccc;
}

.plotReport__textBox--success {
    background-color: #ccffcc;
}

.plotReport__statusLog {
    float: left;
    clear: left;
}

.plotReport__statusMessage--loading {
    background-color: #ccccff;
}

.plotReport__statusLog--loading {
    background-color: #ccccff;
}

.plotReport__controls--loading {
    background-color: #ccccff;
}

.plotReport__button {
    font-size: xx-large;
}

.solve__bar {
    display: inline-flex;    
    position: relative; 
    margin-top: 30px;
}

.solve__bar::before {
    color: #d2eed0;
    background-color: rgb(77, 93, 83);
    top: -25px;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    height: 20px;    
    border-radius: 10px 10px 0 0;
    padding-top: 5px;
    white-space: nowrap;
}

.solve__supplyBar::before {
    content: "Piece Supply";
}

/**
.solve__supplyBar {
}
**/

.solve__orientationBar::before {
    content: "Orientation Picker";
}

/**
.solve__orientationBar {
}
**/

.solve__supplyBar--loading {
    background-color: #ccccff;
    width:900px;
}

.solve__orientationBar--loading {
    background-color: #ccccff;
    width:900px;
}

.solve__solutionPicker--loading {
    background-color: #ccccff;
    width:900px;
}

.DecisionTree--loading {
    background-color: #ccccff;
    width:900px;
}

.DecisionTree {
    display: flex;
    flex-direction: row;
}

.DecisionTree__checkpoint {
    width: 20px;
    height: 60px;
    background-color: #666666;
}

.DecisionTree__triple {
    width: 20px;
    height: 60px;
}

.DecisionTree__cell {
    width: 20px;
    height: 20px;
}

.DecisionTree__someSolutionsCell {
    background-color: #407646;
}

.DecisionTree__unknownCell {
    background-color: #862c87;    
}

.DecisionTree__noSolutionsCell {
    background-color: #780a0a;    
}