a {
  color: #00f;
}

a:visited {
  color: #808;
}

.efBackground {
  background-color: #def;
  color: #000;
}

.efBordered {
  border: 1px solid #000;
}

.efDialog {
  background-color: #ccc;
  border: 1px solid black;
  color: #000;
}

.efDialogTranslucent {
  background-color: #dddd;
  border: 1px solid #bbb;
  color: #000;
}

.efDialogEthereal {
  background-color: #adfd;
  border: 1px solid #bbb;
  color: #000;
}

.efButton {
  background-color: #ddd;
  border: 1px solid black;
  color: #000;
}

.efButtonCantAfford {
  background-color: #ccc;
  border: 1px solid black;
  color: #777;
}

.efTextCantAfford {
  color: #777;
}

.efButtonHighlighted {
  background-color: #888;
  border: 1px solid black;
  color: #000;
}

.efButtonTranslucent {
  background-color: #0000;
  border: 1px solid black;
  color: #000;
}

.efButtonTranslucent:hover {
  background-color: #0001;
}

.efButtonTranslucentCantAfford {
  background-color: #0000;
  border: 1px solid black;
  color: #777;
}

.efButtonTranslucentCantAfford:hover {
  background-color: #0001;
}

.efInfo {
  border: 1px solid black;
}

.efSeasonBgSpring {
  background-color: #dbecc8;
}

.efSeasonBgSummer {
  background-color: #ee7;
}

.efSeasonBgAutumn {
  background-color: #d3be9c;
}

.efSeasonBgWinter {
  background-color: #eef;
}

.efUpgradeChip {
  background-color: #eee;
  border: 1px solid #000;
}

.efEtherealUpgradeChip {
  background-color: #9df;
  border: 1px solid #ff0;
}

.efPlantChip {
  background-color: #dbecc8;
  border: 1px solid #080;
}

.efEtherealPlantChip {
  background-color: #9df;
  border: 1px solid black;
}

.efWeatherOn {
  text-shadow: 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff;
  color: #f00;
}

.efWeatherOff {
  text-shadow: 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff;
  color: #000;
}

.efWeatherPerma {
  background-color: #9448;
}

.efWatercressHighlight {
  text-shadow: 0 0 0.3em #0f0;
}

.efWarningOnDialogText {
  color: #c00;
}


/* Indicates the element is scrollable, especially in case the device decides not to show scrollbars.
There exists a scrollbox concept in CSS that can automatically make the shadows appear/disappear,
but it doesn't work on translucent background, so cannot use it here. So this must be combined with some JS*/
.efScrollGradient {
  background:
  radial-gradient(farthest-side at 50% 0, #0003, #0000), radial-gradient(farthest-side at 50% 100%, #0003, #0000) 0 100%;
  background-repeat: no-repeat;
	background-size: 100% 5%, 100% 5%, 100% 5%, 100% 5%;
}

.efAutomatonManual {
  color: #000;
  background-color: #f00;
}

.efAutomatonAuto {
  color: #000;
  background-color: #0f0;
}

.efAutomatonAuto2 {
  color: #000;
  background-color: #0ff;
}

.efAutomatonGlobalOff {
  color: #000;
  background-color: #888;
}

.efDropDown {
  color: #000;
  background-color: #aaa;
  border: 1px solid #000;
}

.efConnector {
  background-color: #000;
}

.efConnectorTriangle {
  background-color: #000;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%)
}

.efSquirrelBought {
  background-color: #4a4;
  color: #000;
  border: 1px solid #990;
}

.efSquirrelBuy {
  background-color: #aa4;
  color: #000;
  border: 1px solid #990;
}

.efSquirrelCantAfford {
  background-color: #aa4;
  color: #666;
  border: 1px solid #990;
}

.efSquirrelNext {
  background-color: #b44;
  border: 1px solid #100;
}

.efSquirrelUnknown {
  background-color: #444;
  border: 1px solid #100;
}

.efSquirrelGated {
  background-color: #4ff;
  color: #666;
  border: 1px solid #100;
}

.efAmberInfo {
  color: #c60;
}

.efButtonAmberActive {
  background-color: #ccc;
  border: 1px solid #c60;
  color: #c60;
}

.efStatsValue {
  color: #830;
}

.efGoal {
  background-color: #fff;
  border: 2px solid red;
  border-radius: 8px;
  color: red;
  padding-left: 4px;
}

.efGoalSmall {
  background-color: #000;
  border: 2px solid #e66;
  border-radius: 8px;
  color: #e66;
  padding-left: 4px;
}

@keyframes efGoalAnimFrame {
  from {
    font-size: 100%;
    opacity: 0%;
  }
  50% {
    font-size: 98%;
    opacity: 0%;
  }
  to {
    font-size: 100%;
    opacity: 100%;
  }
}

.efNoOutline {
  outline: unset;
}
.efNoOutline:focus {
  outline: unset;
}