styles.css

/* OVERIDES */
body {
  min-height: 100vh;
  display:flex;
  flex-direction:column; 
}
/* The main fills all the space between header & footer */
main{
  flex:1;
}
footer {
  margin-top: 20px;
}
blockquote {
  border-left: 5px var(--bs-body-color) solid;
  padding-left: 5px;
}
.accordion {
  display: flow-root;
}
.twitter-typeahead {
  display: contents !important;
}
/* Mark down editor in fullscreen mode */
.editor-toolbar.fullscreen {
  z-index: 2000;
}
.CodeMirror.CodeMirror-fullscreen {
  z-index: 2000;
}
.editor-preview-side.editor-preview-active-side {
    z-index: 2000;
}

/* CUSTOM */
#toaster {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2700;
  padding: 10px;
  padding-right: 30px;
  pointer-events: none;
}

#toaster * {
  pointer-events: all;
}

.clickable {
  cursor: pointer;
}
img.pixel {
  image-rendering: pixelated;
}
/* Images in tables - for example, small item icons next to text */
.table-image {
  height: 2em;
  margin-right: 0.25em;
}
/* Table cell will be as small as possible */
tr.tight,
td.tight {
  width: 0;
}
.table-auto table.table {
  width: auto;
}
.table-tight table.table {
  width: min-content;
}
.table-mutations table.table {
  width: auto;
  background: #5a4242;
  border: #5a4242;
}
.table-mutations table.table td {
  width: 80px;
  height: 80px;
  background-image: url('images/soil.png');
  background-size: cover;
  color: whitesmoke !important;
}
.table-mutations table.table tr td:nth-last-child(1) {
  display: none;
}
.table-mutations table.table td.mutation {
  filter: hue-rotate(300deg);
}
.table-mutations table.table td.mutation > * {
  filter: hue-rotate(-300deg);
}
.table-mutations table.table td a {
  text-decoration: none;
  color: inherit;
}
.table-mutations table.table img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.text-decoration-none a,
.text-decoration-none a:hover {
  text-decoration: none;
  color: inherit;
}


/* THEME OVERIDES */
.sketchy .table-bordered {
  background: rgba(100,100,100,0.05);
}
.sketchy .table-bordered>:not(caption)>*>* {
  border-width: 1px 1px;
}
.slate .tt-selectable .text-primary {
  color: #d5d5d5 !important;
}

/* POKECLICKER */

/* Egg Patterns */
.egg[data-type1=Bug] .egg-main {
  fill: #b9cc33
}

.egg[data-type1=Dark] .egg-main {
  fill: #3d3d3d
}

.egg[data-type1=Dragon] .egg-main {
  fill: #ff0006
}

.egg[data-type1=Electric] .egg-main {
  fill: #ffe600
}

.egg[data-type1=Fairy] .egg-main {
  fill: #f36ec2
}

.egg[data-type1=Fighting] .egg-main {
  fill: #fbbd47
}

.egg[data-type1=Fire] .egg-main {
  fill: #d94c32
}

.egg[data-type1=Flying] .egg-main {
  fill: #a0c7e8
}

.egg[data-type1=Ghost] .egg-main {
  fill: #dbdbdb
}

.egg[data-type1=Grass] .egg-main {
  fill: #a1f173
}

.egg[data-type1=Ground] .egg-main {
  fill: #ad5840
}

.egg[data-type1=Ice] .egg-main {
  fill: #0af
}

.egg[data-type1=Normal] .egg-main {
  fill: #e8e0a0
}

.egg[data-type1=Poison] .egg-main {
  fill: #c183c1
}

.egg[data-type1=Psychic] .egg-main {
  fill: #fa92b2
}

.egg[data-type1=Rock] .egg-main {
  fill: #d2c8ac
}

.egg[data-type1=Steel] .egg-main {
  fill: #b5b4b1
}

.egg[data-type1=Water] .egg-main {
  fill: #379eff
}

.egg[data-type2=Bug] .egg-spot {
  fill: #5ab690
}

.egg[data-type2=Dark] .egg-spot {
  fill: #111
}

.egg[data-type2=Dragon] .egg-spot {
  fill: #432489
}

.egg[data-type2=Electric] .egg-spot {
  fill: #cb0
}

.egg[data-type2=Fairy] .egg-spot {
  fill: #a1382b
}

.egg[data-type2=Fighting] .egg-spot {
  fill: #b94a00
}

.egg[data-type2=Fire] .egg-spot {
  fill: #ff9100
}

.egg[data-type2=Flying] .egg-spot {
  fill: #6896c6
}

.egg[data-type2=Ghost] .egg-spot {
  fill: #7c7c7c
}

.egg[data-type2=Grass] .egg-spot {
  fill: #2f9f59
}

.egg[data-type2=Ground] .egg-spot {
  fill: #763900
}

.egg[data-type2=Ice] .egg-spot {
  fill: #00ffbe
}

.egg[data-type2=Normal] .egg-spot {
  fill: #689050
}

.egg[data-type2=Poison] .egg-spot {
  fill: #682a68
}

.egg[data-type2=Psychic] .egg-spot {
  fill: #a13959
}

.egg[data-type2=Rock] .egg-spot {
  fill: #6d6d6d
}

.egg[data-type2=Steel] .egg-spot {
  fill: #7088b5
}

.egg[data-type2=Water] .egg-spot {
  fill: #445e9c
}

#plotList {
  padding:10px
 }
 #plotList .plot {
  padding:2px
 }
 #plotList .plot:hover {
  filter:brightness(95%);
  -webkit-filter:brightness(95%)
 }
 #plotList .plot:hover .plotLockHover {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex
 }
 #plotList .plotLocked {
  opacity:.7
 }
 #plotList .plotLockHover {
  display:none;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center
 }
 #plotList .plotImage {
  position:relative
 }
 #plotList .plotImage .plotSafeLockIcon {
  position:absolute;
  bottom:5px;
  right:5px;
  height:16px;
  width:16px;
  -webkit-filter:drop-shadow(.2px .2px 0 #000) drop-shadow(-.2px .2px 0 #000) drop-shadow(.2px -.2px 0 #000) drop-shadow(-.2px -.2px 0 #000);
  filter:drop-shadow(.2px .2px 0 #000) drop-shadow(-.2px .2px 0 #000) drop-shadow(.2px -.2px 0 #000) drop-shadow(-.2px -.2px 0 #000)
 }
 #plotList .plotButton {
  top:0;
  left:0;
  width:100%;
  height:100%;
  position:absolute
 }

 #plotList .plot .plot-content.selected {
  box-shadow: 0 0 0 2px #e74c3c;
 }

.Boost_Mulch {
  filter: hue-rotate(200deg);
}

.Rich_Mulch {
  filter: hue-rotate(90deg);
}

.Surprise_Mulch {
  filter: hue-rotate(300deg);
}

.Amaze_Mulch {
  filter: hue-rotate(250deg);
}

.Freeze_Mulch {
  filter: brightness(200%) hue-rotate(210deg);
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 12px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.mouseover-reveal {
  position: absolute;
  opacity: 0;
}

.mouseover-reveal:hover {
  opacity: 1;
}

.custom-tooltip {
  display: inline-block;
  position: relative;
}

.custom-tooltip .custom-tooltip-content {
  visibility: hidden;
  position: absolute;
  bottom: 30%;
  left: 0%;
  z-index: 1;
  pointer-events: none;
}

.custom-tooltip:hover .custom-tooltip-content {
  visibility: visible;
}

#map-container {
  position: relative;
}

#map {
  position: absolute;
}

#map rect {
  fill: #ff00cc;
  opacity: 0.6;
}

.male{
  background-color: rgb(100,100,255) !important;
}

.male:hover {
    background-color: #2a63ec !important;
}

.female {
  background-color: rgba(255,100,100) !important;
}

.female:hover {
  background-color: #d83635 !important;
}

.genderless {
  background-color: lightgray !important;
}

.genderless:hover {
  background-color: gray !important;
}

.custom-tooltip table {
  background-color: var(--bs-body-bg);
}

.obtain-methods .accordion-button img {
  padding-right: 10px;
}