:root.dark-mode {
  color-scheme: dark;
  --ss-border-color: rgb(118, 118, 118)!important;
}
:root {
  --ss-main-height: 20px!important;
  --ss-spacing-l: 4px!important;
  --ss-spacing-m: 0px!important;
  --ss-spacing-s: 0px!important;
  --ss-bg-color: field!important;
  --ss-border-color: rgb(133, 133, 133)!important;
  --ss-font-color: fieldtext!important;
}
.ss-main {
  padding: 0 4px!important;
}
h1, h2 {
  display: none;
}
.maincontainer {
  display: grid;
  grid-template-columns: 240px 780px 280px;
  grid-template-rows: 352px 24px 24px 376px 24px;
  font-family: "Barlow Condensed", sans-serif;
  white-space: nowrap;
}

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

.tileinfo {
  display: grid;
  grid-template-rows: 1fr 4fr;
  background-color: red;
  overflow-y: scroll;
}

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

.tileinfopic {
}

.tileinfotitle {
  font-weight: bold;
  align-self: center;
  margin-left: 5px;
}

.tileinfobody {
  background-color: lightblue;
}

:root.dark-mode .tileinfobody {
  background-color: #335f8b;
}

.recipes {
  display: grid;
  grid-template-rows: auto;
}

.recipesheader {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1px;
}

.recipeheader {
  grid-column: 1 / 4;
  position: relative;
  line-height: 18px;
}

.reciperow {
  display: grid;
  font-size: 18px;
  grid-template-rows: 1fr 1fr auto;
  grid-template-columns: 1fr 8fr 2fr;
  margin-top: 5px;
}

.recipecraft {
  height:100%;
  margin: auto 2px auto 5px;
}

.recipetitle {
  position: absolute;
  width: 80%;
  white-space: nowrap;
}

.recipeimage {
  width: auto;
  height: 23px;
  vertical-align: middle;
}

.recipetimer {
  grid-column: 2 / 4;
}

.cellcraft {
  position: absolute;
  z-index: 1;
  height: 24px;
  width: 24px;
  object-fit: contain;
  left: -2px;
  bottom: 0;
  -webkit-filter: drop-shadow(1px 1px 1px #000);
  filter: drop-shadow(1px 1px 1px #000);
}

.timer {
  margin-right: 3px;
  border-radius: 2px;
}

.timerselected {
  border: 1px solid black;
}

:root.dark-mode .timerselected {
  border-color: white;
}

.besttimer {
  background-color: lightgreen;
}

:root.dark-mode .besttimer {
  background-color: darkgreen;
}

.oktimer {
  background-color: yellow;
}

:root.dark-mode .oktimer {
  background-color: #8b8000;
}

.badtimer {
  background-color: yellow;
}

:root.dark-mode .badtimer {
  background-color: #8b8000;
}

.worsttimer {
  background-color: red;
}

:root.dark-mode .worsttimer {
  background-color: darkred;
}

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

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

.gamegrid {
  background-color: green;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
}

.buildingmenu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30px 30px 6fr;
}

.categories {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1fr;
  background-color: #338b9f;
}

.buildings {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.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 white;
  font-size: 2em;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

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

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

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

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

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

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

.buildingcontrolcategorybuttons {
  display: none;
}

.selectedbuildingmenubutton {
  border: 2px solid black!important;
}

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

.eastborder {
  background-color: tan;
}

.westborder {
  background-color: tan;
}

.northborder {
  background-color: tan;
}

.southborder {
  background-color: tan;
}

.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;
}

.pond {
  background-color: blue;
}

.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;
}

.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: #9fcffb!important;
}

.river {
  background-color: blue!important;
  color: #ccc!important;
}

.mountains {
  background-color: brown!important;
  color: #ccc!important;
}

.desert {
  background-color: #f3b48b!important;
}

.forest {
  background-color: #85bf85!important;
}

.plains {
  background-color: #c9cc3f!important;
}

.goldenrod {
  color: goldenrod;
}

.red {
  color: red;
}

.grey {
  color: grey;
}

.brown {
  color: brown;
}

.blue {
  color: blue;
}

.lightblue {
  color: lightblue;
}

.orange {
  color: orange;
}

.darkgreen {
  color: darkgreen;
}

.proximity-display {
  position: absolute;
  font-size: 16px;
  color: white;
  text-shadow: black 0 0 3px;
  top: 0;
  left: 0;
  pointer-events: none;
}

#planner-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: 0px 8px;
  margin: 1px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  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: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  background-color: #eee;
  border-color: #666;
}

:root.dark-mode #stages-body div.stage,
:root.dark-mode #stage-control-container div,
:root.dark-mode #add-stage-container div {
  color: #eee;
  background-color: #333;
  border-color: #ccc;
}

#stages-body div.stage:hover,
#stage-control-container div:hover,
#add-stage-container div:hover {
  background-color: #ddd;
}

:root.dark-mode #stages-body div.stage:hover,
:root.dark-mode #stage-control-container div:hover,
:root.dark-mode #add-stage-container div:hover {
  background-color: #666;
}

#stages-body div.stage.active {
  background-color: #333;
  color: #ccc;
}

:root.dark-mode #stages-body div.stage.active {
  background-color: #ccc;
  color: #333;
}

#overlays-container {
  display: inline-block;
  width: 75%;
}

#stage-info-container {
  height: 24px;
}

#stage-import-export-container input {
  margin-right: 4px;
}

#stage-control-container {
  text-align: right;
}

#stage-control-container div {
  width: 24px;
  height: 24px;
  padding:0;
}

#stage-delete, #add-stage-div {
  padding: 2px!important;
}

#stage-delete {
  width: 20px!important;
  height: 20px!important;
}

#add-stage-div {
  width:16px!important;
  height:16px!important;
}

#stage-delete i,
#add-stage-div i {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: cover;
}

#stage-delete i {
  background-image: url("https://cdn-icons-png.flaticon.com/512/1214/1214428.png")!important;
}

#add-stage-div i {
  background-image: url("https://cdn-icons-png.flaticon.com/512/2997/2997933.png")!important;
}

:root.dark-mode #stage-delete i,
:root.dark-mode #add-stage-div i{
  -webkit-filter: invert(1);
  filter: invert(1);
}

#add-stage-container {
  display: inline-block;
}

#add-stage-name {
  width: 115px;
}

.startingtemplatecontrols {
  position: relative;
}

#new-layout {
  position: absolute;
  right: 0;
  margin-right: 4px;
  color: #fff;
  background-color: red;
  cursor: pointer;
}

#northborder, #eastborder, #southborder, #westborder {
  position: relative;
  display:grid;
  color: #666;
  user-select: none;
  background-color: #ccc;
  text-align: center;
  cursor: pointer;
}

#northborder i, #eastborder i, #southborder i, #westborder i {
  position: absolute;
  text-transform: capitalize;
}

#northborder i, #southborder i {
  left: 50%;
  transform: translate(-50%, 0)
}

#eastborder i, #westborder i {
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}

#northborder i {
  top: 0;
}

#southborder i {
  bottom: 0;
}

#northborder, #southborder {
  grid-template-columns: repeat(16, 1fr);
}

#eastborder, #westborder {
  grid-template-columns: repeat(16, 1fr);
  align-items: end;
  writing-mode: vertical-rl;
}

#eastborder div, #westborder div {
  writing-mode: vertical-rl;
}

#eastborder div {
  transform: rotate(-90deg);
}

#westborder div {
  transform: rotate(90deg);
}

#northborder {
  align-items: end;
}

#southborder {
  align-items: start;
}

#westborder {
  transform: rotate(180deg);
}

.categorybutton.selected {
  border: 0;
  filter:brightness(150%);
}

.category {
  overflow-y: scroll;
  background-color: lightblue;
}

:root.dark-mode .category {
  background-color: #335f8b;
}

#search-building-container {
  display: grid;
}

#search-building {
  padding: 0 5px;
  z-index: 0;
}

#All {
  display: none;
}

.buildingmenubutton {
  border: 2px solid transparent;
}

.eastborder div, .southborder div, .westborder div, .northborder div {
  pointer-events: none;
}

#info-container {
  display: grid; grid-area: 1 / 3 / 5 / 3;
  grid-template-rows: 30px auto;
}

#tab-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#tab-container div {
  color: #52a5d2;
  background-color: #335f8b;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

:root.dark-mode #tab-container div {
  color: #335f8b;
  background-color: #52a5d2;
}

.title {
  text-align: center;
}

#calculation-container {
  padding: 4px 0;
}

#product-rate-product {
  padding: 0 32px;
}

#product-rate-product-select {
  width: 100%;
}

#product-rate-product-rate {
  text-align: center;
}

#town-guide-eu-container {
  grid-area: 7 / 1 / 7 / 1;
}

#stages-container {
  grid-area: 7 / 2 / 7 / 2;
}

#div-display-txtArea {
  margin: 0!important;
}

#info-content-container {
  overflow: hidden;
}

#product-rate-content {
  overflow: auto;
  margin: 4px;
}

#product-rate-content .recipeimage {
  margin-left: auto;
}

#product-rate-content .ingredient {
  display: grid;
  grid-template-columns: 2fr 6fr 3fr;
}

.product-rate-name {
  overflow: hidden;
}

.product-rate-value {
  padding: 0 32px 0 4px;
  text-align: right;
}

#product-rate-container {
  display: grid; height: 100%;
  grid-template-rows: 22px 22px 22px;
}

#tab-container div.selected {
  border: 0;
  color: #335f8b;
  background-color: lightblue;
}

:root.dark-mode #tab-container div.selected {
  border: 0;
  color: lightblue;
  background-color: #335f8b;
}

#setup-container {
  padding: 0 8px
}

.setup-title {
  margin-top: 4px;
}

#setup-container-content-container {
  display: grid;
  grid-template-rows: 44px auto;
}

#biomes {
  width: 75px;
}

#planner-credit {
  grid-area: 5 / 3 / 8 / 3;
  white-space: pre-line;
}

#planner-credit span {
  padding-right: 4px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input.checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 10px;
}

.slider.round:before {
  border-radius: 50%;
}

#planner-credit-maintained, #planner-credit-credit {
  font-size: 12px;
}