a {
  color: #88f;
}

a:visited {
  color: #800;
}

/*scrollbar styles for Chromium based browsers. This especially for the dark
color schemes since Chrome's default scrollbar is very bright.
These styles don't work in firefox (which supports CSS's scrollbar-color
instead, see below)*/
::-webkit-scrollbar {
  width: 11px;
}
::-webkit-scrollbar-track {
  background: #666;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/*scrollbar styles for Firefox, and possible for future versions of Chrome (as
of feb 2022)*/
body {
  scrollbar-color:#888 #555;
}

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

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

.efDialog {
  background-color: #333;
  border: 1px solid #999;
  color: #999;
}

.efDialogTranslucent {
  background-color: #444d;
  border: 1px solid #bbb;
  color: #bbb;
}

.efDialogEthereal {
  background-color: #208e;
  border: 1px solid #bbb;
  color: #bbb;
}

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

.efButtonCantAfford {
  background-color: #666;
  border: 1px solid #333;
  color: #444;
}

.efTextCantAfford {
  color: #666;
}

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

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

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

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

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

.efInfo {
  border: 1px solid #888;
}

.efSeasonBgSpring {
  background-color: #fff1;
  color: #7d3;
}

.efSeasonBgSummer {
  background-color: #fff1;
  color: #cc0;
}

.efSeasonBgAutumn {
  background-color: #fff1;
  color: #c96;
}

.efSeasonBgWinter {
  background-color: #fff1;
  color: #ccb;
}

.efUpgradeChip {
  background-color: #333;
  border: 1px solid #990;
}

.efEtherealUpgradeChip {
  background-color: #226;
  border: 1px solid #880;
}

.efPlantChip {
  background-color: #010;
  border: 1px solid #090;
}

.efEtherealPlantChip {
  background-color: #58a;
  border: 1px solid black;
  color: #000;
}

.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: #faa8;
}

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

.efWarningOnDialogText {
  color: #f88;
}

/* 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, #fff3, #fff0), radial-gradient(farthest-side at 50% 100%, #fff3, #fff0) 0 100%;
  background-repeat: no-repeat;
	background-size: 100% 5%, 100% 5%, 100% 5%, 100% 5%;
}

.efAutomatonManual {
  color: #fff;
  background-color: #800;
}

.efAutomatonAuto {
  color: #fff;
  background-color: #080;
}

.efAutomatonAuto2 {
  color: #fff;
  background-color: #088;
}

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

.efDropDown {
  color: #bbb;
  background-color: #444;
  border: 1px solid #bbb;
}

.efConnector {
  background-color: #fff;
}

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

.efSquirrelBought {
  background-color: #4a4;
  color: #0f0;
  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: #400;
  border: 1px solid #100;
}

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

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

.efAmberInfo {
  color: #d80;
}

.efButtonAmberActive {
  background-color: #666;
  border: 1px solid #d80;
  color: #d80;
}

.efStatsValue {
  color: #fff;
}

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