.maincontainer {
  display: grid;
  font-family: "Barlow Condensed", sans-serif;
  grid-template-areas: "sidebar content";
  grid-template-columns: min-content 900px;
}

img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}


.tileinfoheader {
  background-color: grey;
  display: grid;
  grid-template-columns: 2fr 0fr;

}

.tileinfopic { width:50px; margin-left:10px;
}

.tileinfotitle {

  align-self: center;
  margin-left: 5px;
  font-size: 28px;
  text-transform: uppercase;
}

.tileinfobody {
  background-color: none;
}

.recipes {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  text-indent: 5px;

}

.recipesheader {
  font-size: 28px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.recipeheader {
  grid-column: 1 / 4;
  padding-bottom: 10px;
}

.reciperow {
  display: grid;
  font-size: 18px;
  padding-right: 20px;
  grid-template-rows: 0.5fr 0fr 0fr;
  grid-template-columns: 0.55fr 0.9fr 0.25fr;
  margin-bottom:10px;
  
}

.timer {
  margin-right: 5px;
  padding:3px;
  border-radius: 2px;
  margin-top:10px;
  opacity: 1.0;
}

.timerselected {
  border: 3px solid #757575;
  opacity: 1.0;
}

.besttimer {
  background-color: lightgreen;
  padding-left:10px;
  padding-right:10px;
  margin-left:5px;
  color: #000 !important;
}

.oktimer {
  background-color: yellow;
  padding-left:10px;
  padding-right:10px;
  margin-left:5px;
  color: #000 !important;
}

.badtimer {
  background-color: orange;
  padding-left:10px;
  padding-right:10px;
  margin-left:5px;
  color: #000 !important;
}

.worsttimer {
  background-color: lightcoral;
  padding-left:10px;
  padding-right:10px;
  margin-left:5px;
  color: #000 !important;
}

.ingredient {
  grid-column: 2/3;
}

.gameboard {
  background-repeat: repeat;
  grid-column: 2/3;
  grid-row: 1/5;
  display: grid;
  grid-template-columns: 1fr 16fr 1fr;
  grid-template-rows: 1fr 16fr 1fr;
}



.buildingmenu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2.6fr;
}

.categories {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1fr;
  padding-bottom: 55px;
  grid-gap: 2px;
  padding-top: 5px;
}


.buildings {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(9, 1fr);
  overflow-y: scroll;
  height:270px;
  padding-bottom:10px;
  border:6px solid #757575;
}

.buildingshidden {
  display: none;
}

.nwcorner {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.necorner {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}
.swcorner {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}
.secorner {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.horizontalborder {
  grid-row: 2 / 16;
}

.verticalborder {
  grid-column: 2 / 16;
}
.cell {
/*  text-align: center; */
border: 1px solid #EEE;
  font-size: 1.1em;
  position: relative; 
}

.board {
  width: 720px;
  height: 720px;
}

.header {
  width: 100%;
  height: 24px;
  border: 1px solid black;
}

.leftcolumn {
  float: left;
  width: 300px;
  height: 720px;
}

.buildingcontrolpanel {
  float: left;
  width: 260px;
  height: 212px;
  border: 1px solid black;
  background-color: lightblue;
  margin: 2px;
}

.buildingcontrolcategory {
  float: left;
  width:  0px;
  height: 210px;
  border: 1px solid white;
  background-color: lightskyblue;
}

.buildingcontrolcategorybutton {
  float: left;
  width: 40px;
  height: 40px;
  background-color: lightslategray;
}

.buildingcontrolcategorybuttons {
  display: none;
}

.buildingmenudeletebutton {
  grid-column: 1/2;
  grid-row: 6/7;
}

.eastborder {
  background-color: tan;
  display: flex;
  writing-mode: vertical-lr;
  min-height: 79%;
  vertical-align: middle;
  line-height: 0em;
  justify-content: center;
  color: white;
}

.westborder {
  background-color: tan;
  display: flex;
  writing-mode: vertical-lr;
  min-height: 79%;
  vertical-align: middle;
  line-height: 0em;
  justify-content: center;
  color: white;
}

.northborder {
  background-color: tan;
  display: flex;
  vertical-align: middle;
  line-height: 0em;
  justify-content: center;
  color: white;
}

.southborder {
  background-color: tan;
  display: flex;
  vertical-align: middle;
  line-height: 0em;
  justify-content: center;
  color: white;
  padding-top:10px;
}

.stats {
  float: left;
  width: 720px;
  height: 240px;
}

.statstitle {
  float: left;
  width: 720px;
  height: 20px;
  background-color: grey;
  margin: 1px;
}

.statsline {
  float: left;
  width: 720px;
  height: 20px;
  background-color: lightblue;
  margin: 1px;
}

.grid {
  float: left;
  width: 640px;
  height: 640px;
}


.grass {
  /* background-color: lightgrey; */
}

.selected {
  border: 2.5px solid black;
}

.watered10 {
  border-color: #00008f;
  border-radius: 10%;
  border-width: 3px;
}
.watered9 {
  border-color: #1111ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered8 {
  border-color: #2222ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered7 {
  border-color: #3333ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered6 {
  border-color: #4444ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered5 {
  border-color: #5555ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered4 {
  border-color: #6666ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered3 {
  border-color: #8888ff;
  border-radius: 10%;
  border-width: 3px;
}
.watered2 {
  border-color: #aaaaff;
  border-radius: 10%;
  border-width: 3px;
}
.watered1 {
  border-color: #ccccff;
  border-radius: 10%;
  border-width: 3px;
}
.watered0 {
  /* just in case */
  opacity: 1;
}

.cold10 {
  border-color: #FFFFFF;
  border-radius: 10%;
  border-width: 3px;
}
.cold9 {
  border-color: #FBFFFF;
  border-radius: 10%;
  border-width: 3px;
}
.cold8 {
  border-color: #F6FFFF;
  border-radius: 10%;
  border-width: 3px;
}
.cold7 {
  border-color: #F1FFFF;
  border-radius: 10%;
  border-width: 3px;
}
.cold6 {
  border-color: #ECFFFF;
  border-radius: 10%;
  border-width: 3px;
}
.cold5 {
  border-color: #E7FEFE;
  border-radius: 10%;
  border-width: 3px;
}
.cold4 {
  border-color: #E2FCFC;
  border-radius: 10%;
  border-width: 3px;
}
.cold3 {
  border-color: #DDF9F9;
  border-radius: 10%;
  border-width: 3px;
}
.cold2 {
  border-color: #D8F7F7;
  border-radius: 10%;
  border-width: 3px;
}
.cold1 {
  border-color: #D3F5F5;
  border-radius: 10%;
  border-width: 3px;
}
.cold0 {
  /* just in case */
  opacity: 1;
}

.any10 {
  border-color: #002200;
  border-radius: 10%;
  border-width: 3px;
}

.any9 {
  border-color: #003300;
  border-radius: 10%;
  border-width: 3px;
}

.any8 {
  border-color: #004400;
  border-radius: 10%;
  border-width: 3px;
}

.any7 {
  border-color: #005500;
  border-radius: 10%;
  border-width: 3px;
}

.any6 {
  border-color: #006600;
  border-radius: 10%;
  border-width: 3px;
}

.any5 {
  border-color: #007700;
  border-radius: 10%;
  border-width: 3px;
}

.any4 {
  border-color: #008800;
  border-radius: 10%;
  border-width: 3px;
}

.any3 {
  border-color: #009900;
  border-radius: 10%;
  border-width: 3px;
}

.any2 {
  border-color: #00AA00;
  border-radius: 10%;
  border-width: 3px;
}

.any1 {
  border-color: #00BB00;
  border-radius: 10%;
  border-width: 3px;
}

.any0 {
  /* just in case */
  opacity: 1;
}




.penaltyOverlay3Plus {
  border-color: red;
  border-radius: 10%;
  border-width: 3px;
}

.penaltyOverlay2 {
  border-color: orange;
  border-radius: 10%;
  border-width: 3px;
}

.penaltyOverlay1 {
  border-color: yellow;
  border-radius: 10%;
  border-width: 3px;
}

.noedge {
  border-color: red;
  border-radius: 50%;
  border-width: 2px;
}

.Ocean {
  background-color: cornflowerblue;
}

.River {
  background-color: blue;
}

.Mountains {
  background-color: brown;
}

.goldenrod {
  color: goldenrod;
}

.red {
  color: red;
}

.grey {
  color: grey;
}

.brown {
  color: brown;
}

.blue {
  color: blue;
}

.lightblue {
  color: lightblue;
}

.orange {
  color: orange;
}

.darkgreen {
  color: darkgreen;
}

/* Bottom left text */
.bottom-left {
  position: absolute; 
  bottom: 0; 
  left: 0.1em;  
  font-weight: bold; 
  color: #fff;
  text-shadow: 1px 2px 2px #000000;

}

.text-orientation {
  display: flex;
    writing-mode: vertical-lr;
    min-height: 79%;
    vertical-align: middle;
    line-height: 2em;
    justify-content: center;
    width: 2em;
    color: white;
}
.descr {font-size: 1.0em;margin-top:10px;margin-left:15px;}

p {margin:5px; padding:0px;}


/* for slider sidebars */
.sidebar { 
  grid-area: sidebar;
  width: 600px;
}
.content { 
  grid-area: content;
  height:870px; 
}

.buttonsh {
  background-color: #e7e7e7; 
  color: black;
  border: 1px solid #ccc;
  border-radius: 12px;
  cursor: pointer;
  padding: 5px 5px;
  margin:5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}


.clearable{background: #fff url('http://i.stack.imgur.com/mJotv.gif') no-repeat right -10px center;border: 1px solid #999;padding: 3px 18px 3px 4px;border-radius: 3px;transition: background 0.4s;}
.clearable.x  { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }
.clearable::-ms-clear {display: none; width:0; height:0;}

/*======================================================================
  Selectric
======================================================================*/
.selectricWrapper {
  position: relative;
  margin: 0 0 10px;
  width: 300px;
  cursor: pointer;
}

.selectricResponsive {
  width: 100%;
}

.selectric {
  border: 1px solid #DDD;
  background: #F8F8F8;
  position: relative;
  border-radius: 2px;
}
.selectric .label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 30px 0 0;
  padding: 6px;
  font-size: 12px;
  line-height: 18px;
  color: #444;
  min-height: 18px;
}
.selectric .button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  color: #BBB;
  text-align: center;
  font: 0/0 a;
  /* IE Fix */
  *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial;
}
.selectric .button:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #BBB;
  border-bottom: none;
}

.selectricHover .selectric {
  border-color: #CCC;
}
.selectricHover .selectric .button {
  color: #888;
}
.selectricHover .selectric .button:after {
  border-top-color: #888;
}

.selectricOpen {
  z-index: 9999;
}
.selectricOpen .selectric {
  border-color: #CCC;
  background: #F0F0F0;
}
.selectricOpen .selectricItems {
  display: block;
}

.selectricDisabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}
.selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}

.selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  *font: 0/0 a !important;
  background: none !important;
}

.selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}

/* Items box */
.selectricItems {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #F9F9F9;
  border: 1px solid #CCC;
  z-index: -1;
  box-shadow: 0 0 10px -6px;
}
.selectricItems .selectricScroll {
  height: 100%;
  overflow: auto;
}
.selectricAbove .selectricItems {
  top: auto;
  bottom: 100%;
}
.selectricItems ul, .selectricItems li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  min-height: 20px;
}
.selectricItems li {
  display: block;
  padding: 5px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #EEE;
  color: #666;
  cursor: pointer;
}
.selectricItems li.selected {
  background: #EFEFEF;
  color: #444;
  border-top-color: #E0E0E0;
}
.selectricItems li:hover {
  background: #F0F0F0;
  color: #444;
}
.selectricItems li.disabled {
  background: #F5F5F5;
  color: #BBB;
  border-top-color: #FAFAFA;
  cursor: default;
}



    .cell{position: relative;}
    .proximity-display{position: absolute; font-size: 18px; color: white; 
      
      text-shadow: 1px 1px 5px rgba(0,0,0,0.9);
              bottom: 0; right: 2px; pointer-events: none;}
    .reciperow{grid-template-columns: 1fr 6fr 2fr!important;}
    .recipeheader{position: relative; line-height: 22px; padding-bottom: 20px!important;}
    .recipecraft{height:100%; margin: 5px 2px auto 5px;}
    .recipetitle{position: absolute; width: 80%; white-space: nowrap;}
    .recipeimage{width: 32px; height: 32px; vertical-align: middle;}
    .recipetimer{grid-column: 2 / 4;padding-bottom: 10px;}
    .cellcraft{position: absolute; z-index: 1; height: 24px; width: 24px; object-fit: contain; left: -2px; bottom: 0; -webkit-filter: drop-shadow(1px 1px 4px #666); filter: drop-shadow(1px 1px 4px #666);}

    #addon-version{position: absolute; right: 0; bottom: 0; padding: 5px; pointer-events: none;}
    #town-guide-eu-container input{margin-right: 4px;}
    #stages-body div.stage,
    #stage-control-container div,
    #add-stage-container div {
      display: inline-block;
      padding-left: 5px;

      margin-top:5px;
      margin-bottom:5px;
      margin-left:1px;
      margin-right:1px;
      font-size: 14px;
      font-weight: 400;
      line-height: 2;
      
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;

      border-radius: 4px;
      text-decoration: none;
      color: #000;
      background-color: #eee;
      width:100%;
    }
 
    #stages-body div.stage.active{background-color: #757575; color: #FFF;}
    #stage-info-container{height: 24px;}
    #stage-import-export-container input{margin-right: 4px;}
    .tileinfobody{padding-left: 2px!important;}
    #stage-control-container{text-align: right;}
    #stage-control-container div{width: 32px;
      height: 32px;
      padding: 0;
      font-size: 28px;
      margin: 0;
      line-height: 1;
      background-color: transparent;
      margin-right: 10px;}
    #stages-header {width:150px; text-transform: uppercase;}
    #add-stage-div{background-size: cover; background-origin: content-box; padding: 2px!important; background-repeat: no-repeat!important; width: 20px!important; height: 20px!important;}
    #add-stage-container{display: block; }
    #add-stage-name, #stage-name {width:85%;}
    #add-stage-div, #save-name{
      width: 32px!important;
      height: 32px!important;
      padding: 0!important;
      font-size: 28px!important;
      margin: 0!important;
      line-height: 1!important;
      background-color: transparent!important;margin-left: 5px!important;vertical-align: sub;}
    .startingtemplatecontrols{position: relative;}
    #new-layout{position: absolute; right: 0; margin-right: 4px; color: #fff; background-color: red; cursor: pointer;}