@font-face {
  font-family: "PixelOperator";
  src: url("fonts/PixelOperator8.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "PixelOperator";
  src: url("fonts/PixelOperator8-Bold.ttf");
  font-weight: bold;
}

:root {
  --title-size: 14pt;
  --norm-size: 8pt;
  --button-size: 8pt;

  --bright-color: #84bb6d; /* main color*/
  --hover-color: rgba(167, 206, 151, 0.15);
  --bright-mid-color: #499360; /* border-color for buttons*/
  --dark-mid-color: #295651;
  /* --dark-color: #205038; text */
  --dark-color: #091810;
  /*
  --bright-color: #DBF4B4;
  --bright-mid-color: #ABC396;
  --dark-mid-color: #4C625A;
  --dark-color: #374c3d;
  */
  /*
  --bright-color: #ffe;
  --bright-mid-color: #ABC396;
  --dark-mid-color: #7B9278;
  --dark-color: #3f3f3f;
  box: rgba(30,30,30,0.4);
  box:hover: rgba(30,30,30,0.65);

  */
}

html {
  touch-action: manipulation;
}

body {
  background-color: var(--bright-mid-color);
  color: var(--dark-color);

  font-family: "PixelOperator";
  font-size: var(--norm-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "PixelOperator";
  font-size: var(--title-size);
  font-weight: bold;
}

button,
select {
  font-family: "PixelOperator";
}

.footer {
  position: fixed;
  bottom: 0px;
  height: 90px;
  width: 100%;
  background-image: url("img/footer1.png");
  background-repeat: repeat-x;
  z-index: -1;
}

#credits {
  position: absolute;
  bottom: 10%;
  right: 50%;
  transform: translateX(50%);
}

.debug-red {
  background-color: red;
}

.slider-handle {
  background-color: var(--bright-mid-color);
  border-radius: 5px;
}

.slider-handle:active,
.slider-handle:hover {
  background-color: var(--dark-mid-color);
  border-color: var(--dark-color);
}

/* style of tooltip */
.info-exists {
  position: relative;
  display: inline-block;
}

.info-exists .info {
  visibility: hidden;
  background-color: var(--bright-color);
  color: var(--dark-mid-color);
  text-align: center;
  padding: 0px 5px;
  border-style: solid;
  border-color: var(--bright-mid-color);
  border-width: 2px;
  white-space: nowrap;
  position: absolute;
  z-index: 1;
  transition: visibility 0s;
}
.info-exists:hover .info {
  visibility: visible;
  transition: visibility 0s linear 600ms;
}
.info:hover {
  display: none;
}
/*end of style for tooltip */

.main-column {
  padding: 0px 7px 0px 7px;
}

.relative {
  position: relative;
}

.title-tab {
  position: absolute;
  top: -6px;
  left: -44px;
}

/* style for all clickable elements */
.clickable {
  border-style: outset;
  border-width: 3px;
  border-color: var(--bright-mid-color);
}

.clickable:hover {
  background-color: var(--hover-color);
  border-style: outset;
}

.clickable:active {
  border-style: inset;
}

.popup {
  font-size: 10pt;
  text-align: center;
  padding: 40px;
  background-color: var(--bright-color);
  line-height: 25pt;
}

.tea-icon-main {
  transform: translate(0%, -6.6px);
}

.tea-icon {
  width: 12px;
  transform: translate(0%, -3.2px);
}

.icon-spacing {
  margin: 0 0.5rem;
}

.map {
  /* This is needed for equal aspect ratio */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Equal aspect ratio container */
.equal-aspect-ratio {
  position: relative;
  width: 100%;
  padding: 0px;
}

.equal-aspect-ratio:before {
  content: "";
  display: block;
  padding-top: 100%;
}

#map-container1 {
  width: 50%;
}

#map1 {
  border-width: 1px;
  border-color: var(--dark-color);
}

.center {
  text-align: center;
}

.img-focus {
  margin-bottom: 16px;
  width: 40px;
}

/*STANDARD UI ELEMENTS*/
.box {
  background-color: var(--bright-color); /*rgba(48,48,48,0.4);*/

  border-radius: 3px;
  border-style: double;
  border-width: 6px;
  border-color: var(--dark-color);

  padding: 11px;

  margin-bottom: 14px;
  margin-left: 0px !important;
  margin-right: 0px !important;

  font-family: "PixelOperator";
  word-spacing: 20% !important;

  transition-duration: 700ms;
  transition-property: background;
}

.more-line-height {
  line-height: 30px;
}

#focus {
  font-size: var(--title-size);
  font-weight: normal;
}

/*GAME PHASE 0*/
#ui-game-phase0,
#ui-game-phase1,
#ui-game-phase2 {
  padding: 30px;
  padding-top: 30px;
  display: none;
  min-width: 80%;
}

.tea-container {
  text-align: right;
}

.tea-container.inf {
  text-align: left;
}

#teabags,
#teabags1,
#teabags2 {
  font-size: var(--title-size);
  font-weight: bold;
}

#alef {
  position: absolute;
  font-size: var(--title-size);
  transform: translate(-120%, -1.2rem);
}

#make-teabag {
  margin-bottom: 5px;
}

button {
  color: var(--dark-color);
  background-color: var(--bright-color);

  border-style: outset;
  border-width: 3px;
  border-color: var(--bright-mid-color);
  border-radius: 3px;

  padding: 9px 12px;
  text-align: center;
  text-decoration: none;
  font-size: var(--button-size);
}

button:hover,
.btn:hover {
  background-color: var(--hover-color);
  border-style: outset;
}

button:active,
.btn:active {
  border-style: inset;
}
button:focus {
  outline: none;
}

.btn-big {
  padding: 0.8rem;
  font-size: 0.9rem;
}

#ui-projects,
#ui-projects1,
#ui-projects2 {
  padding: 0px;
  padding-top: 12px;
}

.project {
  padding: 12px;
  margin: auto;
  padding-bottom: 10px;
  margin-bottom: 20px;
  width: 90%;
  font-size: var(--norm-size);
  font-weight: normal;
  background-color: var(--bright-color);
  display: none;
  color: var(--dark-color);
}

.project-title {
  font-weight: bold;
  font-size: var(--norm-size);
}

.project-price {
  font-size: var(--norm-size);
  font-weight: bold;
  width: 100%;
  text-align: right;
  margin-top: 8px;
}

.btn-plus {
  font-weight: bold;
  font-size: var(--norm-size);
}

.btn-buy {
  font-weight: bold;
  font-size: var(--norm-size);
  font-family: "PixelOperator";
  padding: 5px;
}

.btn-buy.minus {
  padding: 5px;
}

#strategies {
  text-align: center;
}

.buyable,
.buyable:hover {
  background-color: rgba(211, 209, 167, 0.5);
}

#strategy-smart,
#strategy-home {
  opacity: 0;
  cursor: default !important;
}

#ui-compost,
#ui-garden,
#ui-garden1,
#ui-garden2,
#ui-coll-strategy,
#ui-coll-steps,
#ui-compost1,
#ui-compost2 {
  display: none;
}

#ui-processors1,
#ui-processors2,
#ui-collectors,
#ui-collectors2,
#ui-map-fertilizer {
  display: none;
}

#intro,
#ui-projects,
.ui-rates {
  display: none;
}

#ui-greenhouse-speed,
#ui-greenhouse-use,
#ui-factory-speed,
#ui-factory-efficiency,
#ui-factory-use {
  display: none;
}

#ui-focus,
#ui-greenhouse-bonus,
#ui-factory-bonus {
  display: none;
}

#auto-compost-box0,
#auto-compost-box1,
#auto-compost-box2 {
  display: none;
  color: var(--dark-color);
}

.composts {
  text-align: center;
  padding: 5px;
}

.btn-set-compost,
.progress.compost,
.compost-active {
  display: none;
}

.auto-compost {
  font-size: 6pt;
  color: var(--dark-color);
  accent-color: var(--dark-color);
}

.compost-active {
  font-size: 9pt;
  animation: blinker 1s infinite;
}

@keyframes blinker {
  from {
    color: rgb(255, 63, 4);
  }
  50% {
    color: rgb(32, 30, 30);
  }
  to {
    color: rgb(255, 63, 4);
  }
}

.compost-price-tag {
  width: 56px;
  text-align: center;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 24px;
  font-size: 6pt;
  color: var(--dark-mid-color);
  font-weight: 500;
  margin-bottom: 30px;
}

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

/* The slider */
.compost-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-color: var(--bright-color);
  border: 2px solid var(--bright-mid-color);
  border-style: inset;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.compost-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--bright-mid-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .compost-slider {
  background-color: #acc68a;
}

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

input:checked + .compost-slider:before {
  background-color: var(--bright-mid-color);
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

/* end of switch */

.columns.no-padding {
  padding-right: 0px;
  padding-left: 5px;
}

.btn-compost {
  width: 56px;
  height: 56px;
}

/*Strategy*/

#strategy-left {
  transform: rotate(-90deg);
}

#strategy-right {
  transform: rotate(90deg);
}

#strategy-down {
  transform: rotate(180deg);
}

#strategy-up,
#strategy-down,
#strategy-left,
#strategy-right,
#strategy-random,
#strategy-smart,
#strategy-home {
  cursor: pointer;
  padding: 4px;
  margin: 3px;
}

#free-workers-display {
  display: flex;
  align-items: center;
  height: 44px;
  margin-top: -5px;
  margin-bottom: 5px;
}

.free-workers-highlight {
  color: rgb(255, 30, 4);
  font-size: 11pt;
  /* padding-top: 5px; */
  animation: blinker 0.8s alternate linear infinite;
}

#worker-monks {
  display: none;
}

.info-btn {
  font-size: 6pt;
  width: 16px;
  height: 16px;
  margin: 0px;
  padding: 0px;
  border-radius: 50%;
  background-color: #205038;
}

/* Progressbar */
.progress {
  height: 8px;
  border-radius: 2px;
  margin-bottom: 0;
}

#meter-fertilizer,
#meter-power {
  background-color: #205038;
  border-radius: 2px;
}

.flex-v-center {
  display: flex;
  align-items: center;
}

/*Focus Projects*/
#ui-focus {
  background-color: #152222;
  color: #bdccd4;
}

.focus-project {
  position: relative;
  font-size: var(--norm-size);
  /* background-color: var(--bright-color); */

  color: var(--dark-mid-color);
  height: 106px;
  transition: all 1500ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-focus-project {
  height: 22px;
  width: auto;
  padding-left: 2px;
  padding-right: 2px;
}

.arrow-focus-project {
  height: 22px;
  width: auto;
}

.focus-icons {
  display: flex;
  justify-content: center;
}

.focus-icons-btn {
  padding: 5px;
  padding-bottom: 7px;
  width: 95px;
}

.btn-light {
  background-color: rgba(248, 248, 248, 0.1);
  border: solid 3px rgb(200, 200, 200);
  border-style: outset;
  color: rgb(200, 200, 200);
}

.btn-light:hover {
  background-color: rgba(248, 248, 248, 0.3);
}

.btn-light:active {
  border-style: inset;
}

.btn-light.inactive {
  border: solid 3px rgb(60, 60, 60);
  background-color: rgba(248, 248, 248, 0.04);
}

.focus-actions-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.icon-focus-actions {
  height: 30px;
  padding-left: 4px;
  padding-right: 4px;
}

.focus-swirl {
  position: absolute;
  width: 120px;
  top: 50%;
  left: 53%;
  display: none; /*set to flex to make it always visible */
}

.focus-swirl.converter {
  top: 52%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: 0 0;
  width: 120px;
  height: 55%;
}

.focus-swirl.generator {
  -webkit-animation: rotation linear 10s infinite;
  animation: rotation linear 10s infinite;
}

@keyframes rotation {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(-359deg);
  }
}

.img-project-resource {
  width: 25px;
}

.btn-cheat {
  background-color: var(--bright-color);
  color: var(--dark-color);
}

.focus-header {
  margin-bottom: 15px;
}

#monks-focus-box {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  margin: 0 0 10px 0;
  border-bottom: 3px solid rgb(200, 200, 200);
}

.monk {
  width: 18%;
  padding: 0px;
  float: left;
  position: relative;
}

#full-charge0,
#full-charge1,
#full-charge2,
#full-charge3,
#full-charge4 {
  opacity: 0;
}

.leader-box {
  display: none;
  justify-content: space-between;
}

.leader-box input {
  visibility: hidden;
}

.leader-box input + label {
  margin: 0;
}

.leader-box input[type="radio"]:checked + label {
  background-color: rgba(248, 248, 248, 0.3);
  box-shadow: 0px 0px 5px 4px rgba(248, 248, 248, 0.1);
}

#leader-strategies-box {
  opacity: 0;
}

.btn-leader {
  padding: 5px;
  height: 40px;
}

.btn-leader img {
  width: auto;
  height: 100%;
}

.small-price-tag {
  display: flex;
  align-items: center;
  padding-top: 5px;
}

.small-price-tag img {
  height: 18px;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.pb-small {
  padding-bottom: 12px;
}

.pb-xsmall {
  padding-bottom: 6px;
}

#progress-season {
  height: 3px;
  width: 110px;
  margin: 3px 0px 0px 0px;
}

#meter-season {
  background-color: #205038;
}

#worker-leaders {
  display: none;
}

/* MEDITATION */

#worker-meditators,
#start-meditation {
  display: none;
}

#ui-meditation {
  display: none;
  background-color: #152222;
  color: #bdccd4;
}

#meditation-target-bg {
  height: 40px;
  width: 300px;
  background-image: linear-gradient(to right, #303030, #ffe);
  border: 2px solid #fff;
}

#meditation-target-container {
  display: none;
  margin-top: 0px;
  margin-bottom: 60px;
}

.meditation-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background-color: #3f3f3f;
  border: solid 3px rgb(200, 200, 200);
  border-style: outset;
}

.meditation-box.done {
  border: 0px;
  box-shadow: 0 0 8px 2px #fff;
}

.meditation-box-container {
  display: flex;
  justify-content: center;
}

.meditation-btn {
  min-height: 48px;
  margin: 15px auto;
}

#meditation-box0 {
  animation: CycleColors 0.5s alternate linear infinite;
  animation-play-state: paused;
}

#meditation-box1 {
  animation: CycleColors 0.7s alternate linear infinite;
  animation-play-state: paused;
}

#meditation-box2 {
  animation: CycleColors 0.85s alternate linear infinite;
  animation-play-state: paused;
}

@keyframes CycleColors {
  0% {
    background-color: #303030;
  }
  100% {
    background-color: #ffe;
  }
}

#meditation-target {
  width: 20px;
  height: 36px;
  background-color: none;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.75);
  clip-path: inset(0px -15px 0px -15px);
  transform: translateY(2px) translateX(-50%);
  display: none;
}

#meditation-current {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #f09e07;
  transform: translateY(13px) translateX(-50%);
  z-index: 10;
  display: none;
}

#meditation-line {
  height: 4px;
  width: 100px;
  background-color: #f09e07;
  transform: translateY(19px);
}

.meditation-try {
  width: 4px;
  height: 16px;
  background-color: #f09e07;
  display: none;
  z-index: 10;
  transform: translateY(13px) translateX(-50%);
}

.stacked {
  position: absolute;
}

#meditation-win,
#meditation-lose {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 16pt;
  display: none;
  animation: Wobble 0.6s alternate linear infinite;
}

@keyframes Wobble {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.6);
  }
}

.focus-icon-meditation {
    width: 24px;
}

.meditation-try-monk {
    width: 40px;
}

.meditation-outcome-icon {
    width: 40px;
}

#glow {
    color-interpolation-filters: sRGB;
}

.fmonk-width {
    width: 101px;
}

#popup-end-img {
  margin-bottom: 15px;
}

#popup-end-img:hover {
  filter: drop-shadow(0 0 5px white);
}