@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Climate+Crisis&family=Ceviche+One&display=swap");
@font-face {
  font-family: Panton;
  src: url("/panton.black-caps.otf") format("opentype");
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

svg {
  fill: #333;
}

body {
  background-color: #eee;
  color: #111;
  font-family: 'Roboto', sans-serif;
  padding-bottom: 2em;
}

body > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 2em;
}

body > div > div {
  max-width: 800px;
  font-size: 2em;
}

body.dark {
  background-color: #111;
  color: #eee;
}

body.dark a {
  color: #eee;
}

body.dark :is(#login-dialog, #donate-dialog, #status-filter-dialog, #select-template-dialog, #edit-pool-template-dialog, #settings-dialog, #tokens-dialog) > div {
  background-color: #111;
}

body.dark :is(#login-dialog, #donate-dialog, #status-filter-dialog, #select-template-dialog, #edit-pool-template-dialog, #settings-dialog, #tokens-dialog) > div > div > button {
  background-color: #000;
  color: #eee;
}

body.dark #thank-you-overlay > div {
  background-color: #111;
}

body.dark #dacs .dac.active {
  background-color: #eee;
  color: #111;
  border-radius: 1em;
}

body.dark svg {
  fill: #fff;
}

[aria-hidden="true"] {
  display: none;
}

#login-dialog, #donate-dialog, #status-filter-dialog, #select-template-dialog, #edit-pool-template-dialog, #settings-dialog, #tokens-dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

#login-dialog > div, #donate-dialog > div, #status-filter-dialog > div, #select-template-dialog > div, #edit-pool-template-dialog > div, #settings-dialog > div, #tokens-dialog > div {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  top: 10vh;
  left: calc(50vw - 200px);
  width: 400px;
  font-family: 'Panton';
  background-color: #fff;
  text-align: center;
  border-radius: 2em;
  padding: 1em;
}

#login-dialog > div > h5, #donate-dialog > div > h5, #status-filter-dialog > div > h5, #select-template-dialog > div > h5, #edit-pool-template-dialog > div > h5, #settings-dialog > div > h5, #tokens-dialog > div > h5 {
  margin: 0;
  font-size: 2em;
}

#login-dialog > div > button, #donate-dialog > div > button, #status-filter-dialog > div > button, #select-template-dialog > div > button, #edit-pool-template-dialog > div > button, #settings-dialog > div > button, #tokens-dialog > div > button {
  margin-top: 1em;
  font-family: 'Panton';
}

#login-dialog > div > button > img, #donate-dialog > div > button > img, #status-filter-dialog > div > button > img, #select-template-dialog > div > button > img, #edit-pool-template-dialog > div > button > img, #settings-dialog > div > button > img, #tokens-dialog > div > button > img {
  margin: 0 auto 8px auto;
  display: block;
}

#donate-button {
  display: none;
}

#donate-button.show {
  display: block;
  margin: 2em 0;
  cursor: pointer;
}

#donate-button.show {
  display: block;
  margin: 2em 0;
  cursor: pointer;
}

.show:is(#login-dialog, #donate-dialog, #status-filter-dialog, #select-template-dialog, #edit-pool-template-dialog, #settings-dialog, #tokens-dialog) {
  display: block;
}

#select-template-dialog > div {
  width: 80vw;
  max-width: 80vw;
  left: 10vw;
  background-color: #222;
  border: solid 3px #666;
}

#select-template-dialog > div > div {
  max-height: 80vh;
  overflow: auto;
}

#login-dialog > div > div {
  margin-top: 1em;
}

#login-dialog label {
  font-family: 'Panton';
}

#donate-dialog > div > button {
  background: #CF4952;
  color: #fff;
  font-family: 'Panton';
}

#donate-dialog > div sub {
  font-size: 0.6em;
}

#donate-dialog > div svg {
  -webkit-transition: max-width 1s ease-in-out;
  transition: max-width 1s ease-in-out;
  max-width: 60%;
}

#donate-dialog.grow > div svg {
  max-width: 100%;
}

ul > li {
  margin-left: 2em;
}

h1 {
  font-family: 'Climate Crisis';
}

h2 {
  font-family: 'Ceviche One';
}

h1, p, ul {
  margin-bottom: 1em;
}

ul, h2 {
  clear: both;
}

.no-bottom-margin {
  margin-bottom: 0;
}

button {
  padding: 1em;
  font-family: 'Climate Crisis';
  font-size: 0.8em;
}

#thank-you-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 3;
}

#thank-you-overlay > div {
  padding: 1em 2em;
  background-color: #fff;
  border-radius: 2em;
  margin-bottom: 2em;
}

#thank-you-overlay > div > h2 {
  text-align: center;
}

#thank-you-overlay > div > p {
  margin-top: 1em;
}

select[data-currency] {
  display: none;
  width: 100%;
  font-size: 0.9em;
  padding: 0.4em;
}

select[data-currency].show {
  display: block;
}

ul.approvals {
  list-style: none;
}

ul.approvals > li {
  white-space: nowrap;
  line-height: 1.4rem;
}

b.approved, b.not-approved {
  width: 1rem;
  display: inline-block;
  margin-right: 0.2rem;
}

b.approved {
  color: green;
  font-size: 1.3em;
  padding-left: 3px;
}

table.proposals {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  width: 90vw;
  max-width: 1280px;
  margin: 1em auto;
  color: #fff;
}

table.proposals thead tr {
  background-color: #009879;
  text-align: left;
}

table.proposals thead tr th {
  padding: 12px 15px;
  font-family: 'Panton';
}

table.proposals thead tr th:nth-child(7) {
  text-align: center;
}

table.proposals tbody tr {
  border-bottom: 1px solid #dddddd;
}

table.proposals tbody tr:nth-of-type(even) {
  background-color: #292929;
}

table.proposals tbody tr:nth-of-type(odd) {
  background-color: #111;
}

table.proposals tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

table.proposals td {
  vertical-align: top;
  white-space: nowrap;
  padding: 12px 15px;
}

table.proposals td.no-pad {
  padding: 0;
}

table.proposals td:last-of-type {
  border-right: 2px solid #009879;
}

table.proposals td:nth-of-type(6) {
  white-space: normal;
}

table.proposals td:nth-of-type(7) {
  text-align: center;
}

table.proposals td:nth-of-type(7) p {
  font-family: 'Panton';
}

table.proposals td:nth-of-type(7) ul {
  text-align: left;
}

table.proposals td:nth-of-type(8) {
  font-family: 'Panton';
}

table.proposals td:last-of-type, table.proposals th:last-of-type {
  border-right: 2px solid #009879;
}

table.proposals td:first-of-type, table.proposals th:first-of-type {
  border-left: 2px solid #009879;
}

mobile-only {
  display: none;
}

.header {
  font-family: 'Panton';
  white-space: pre;
}

tr[data-proposal-state] {
  display: none;
}

.state-filter {
  display: inline-block;
  text-align: left;
}

.state-filter > label {
  display: block;
}

#result table thead {
  background-color: rgba(255, 255, 255, 0.3);
}

#result table th, #result table td {
  padding: 1em;
}

#result table td {
  border: solid 1px rgba(255, 255, 255, 0.3);
}

#dragonsbay table.proposals tfoot td > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.2em;
}

#dragonsbay table.proposals tfoot td > div > span {
  font-size: 0.6em;
}

#dragonsbay table.proposals tfoot td > div > span.jewel {
  font-size: 1em;
  margin-top: -0.4em;
}

#dragonsbay table.proposals tfoot td > div > span.time {
  font-size: 1em;
  margin-top: -0.1em;
}

#dragonsbay table.proposals input {
  width: 100%;
  line-height: 2em;
}

#dragonsbay table.proposals input[name="eggs"], #dragonsbay table.proposals input[name="grows"] {
  width: 3em;
}

#dragonsbay table.proposals input[name="dragon"], #dragonsbay table.proposals input[name="hatchling"], #dragonsbay table.proposals input[name="egg"], #dragonsbay table.proposals input[name="land"], #dragonsbay table.proposals input[name="template_id"] {
  width: 5em;
}

#dragonsbay table.proposals button {
  padding: 0;
}

#dragonsbay table.proposals button.green-button {
  padding: 0 1em;
  height: 26px;
}

#dragonsbay table.proposals button.green-button.search {
  padding: 0;
  background: inherit;
  background-color: #f0f0f0;
  width: 2.2em;
}

#dragonsbay table.proposals button.green-button.search::after {
  content: '🔎';
}

body#dragonsbay > div#settings-dialog > div {
  padding-top: 1em;
  max-height: 80dvh;
  overflow: auto;
  width: 80dvw;
  left: 10dvw;
}

#dragonsbay button.green-button {
  padding: 0 1em;
  height: 26px;
}

#dragonsbay button.green-button.search {
  padding: 0;
  background: inherit;
  background-color: #f0f0f0;
  width: 2.2em;
}

#dragonsbay button.green-button.search::after {
  content: '🔎';
}

#dragonsbay table.proposals td {
  vertical-align: middle;
}

#select-template-dialog h3 {
  clear: both;
}

#dragonsbay #growmap-config table.proposals td:nth-of-type(3), #dragonsbay #growmap-config table.proposals td:nth-of-type(6), #dragonsbay #growmap-config table.proposals td:nth-of-type(7), #dragonsbay #growmap-config table.proposals td:nth-of-type(8), #dragonsbay #growmap-config table.proposals td:nth-of-type(13) {
  font-family: 'Panton';
  text-align: right;
  font-size: 2em;
  white-space: nowrap;
}

#dragonsbay #growmap-config table.proposals td:nth-of-type(3) > span, #dragonsbay #growmap-config table.proposals td:nth-of-type(6) > span, #dragonsbay #growmap-config table.proposals td:nth-of-type(7) > span, #dragonsbay #growmap-config table.proposals td:nth-of-type(8) > span, #dragonsbay #growmap-config table.proposals td:nth-of-type(13) > span {
  font-size: 0.6em;
}

#dragonsbay #water-config table.proposals td:nth-of-type(3), #dragonsbay #water-config table.proposals td:nth-of-type(4), #dragonsbay #water-config table.proposals td:nth-of-type(5), #dragonsbay #water-config table.proposals td:nth-of-type(6), #dragonsbay #water-config table.proposals td:nth-of-type(7) {
  font-family: 'Panton';
  text-align: right;
}

#incubators, .nice-shape {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(45deg, #00FF34 0%, #DFFF00 100%);
  border-radius: 10% 90% 10% 90% / 90% 10% 90% 10%;
  padding: 1em 1em 1em 2em;
  margin: 0 0.2em;
  border: solid 3px #006014;
  min-height: 1em;
}

#incubators > .lbl, .nice-shape > .lbl {
  position: absolute;
  top: 0.3em;
  left: 0;
  width: calc(8vw + 6em);
  background: #000;
  padding: 0 0.3em;
  border-radius: 0.3em;
  color: #d5ff02;
  text-align: right;
}

#incubators.purple, .nice-shape.purple {
  background-image: linear-gradient(45deg, #6E1CFF 0%, #FF349D 100%);
  border: solid 5px rgba(0, 0, 0, 0.2);
}

#incubators.purple > .lbl, #incubators.purple div.template.active::after, .nice-shape.purple > .lbl, .nice-shape.purple div.template.active::after {
  color: #f833a2;
}

#incubators.red, .nice-shape.red {
  background-image: linear-gradient(45deg, #e11616 0%, #ffa600 100%);
  border: solid 5px rgba(0, 0, 0, 0.2);
}

#incubators.red > .lbl, #incubators.red div.template.active::after, .nice-shape.red > .lbl, .nice-shape.red div.template.active::after {
  color: #ffae18;
}

#incubators.blue, .nice-shape.blue {
  background-image: linear-gradient(45deg, #404fff 0%, #6fbeff 100%);
  border: solid 5px rgba(0, 0, 0, 0.2);
}

#incubators.blue > .lbl, #incubators.blue div.template.active::after, .nice-shape.blue > .lbl, .nice-shape.blue div.template.active::after {
  color: #74beff;
}

#incubators.wrap-children > div:not(.lbl), .nice-shape.wrap-children > div:not(.lbl) {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 1rem;
  position: relative;
  overflow: auto;
  display: inline-block;
  margin: 1.5rem 1rem 1rem 1rem;
  border-radius: 10% 90% 10% 90% / 90% 10% 90% 10%;
  border: solid 5px rgba(0, 0, 0, 0.2);
}

#incubators.wrap-children > div:not(.lbl) > .template:nth-child(2), .nice-shape.wrap-children > div:not(.lbl) > .template:nth-child(2) {
  margin-left: 0;
}

div.template {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  float: left;
  margin: 1em;
  position: relative;
  overflow: hidden;
  font-size: 0.8em;
  border-radius: 1rem;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

div.template > img {
  max-height: 8em;
  /*13em;*/
  border-radius: 1rem;
}

div.template .odds {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0;
  border-top-right-radius: 1rem;
  padding: 0.5em 1em 0.3em 0.7em;
  border-bottom-left-radius: 0.5rem;
  font-family: 'Panton';
  font-size: 0.8em;
  border-bottom: solid 0.3em rgba(0, 0, 0, 0.25);
}

div.template .pet-name {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  text-align: center;
  padding: 0.5em 0;
  white-space: normal;
  border-bottom: solid 0.3em rgba(0, 0, 0, 0.25);
}

div.template .pet-name > span:nth-child(1) {
  font-family: 'Roboto';
}

div.template .pet-name > span:nth-child(2) {
  font-family: 'Panton';
  font-size: 0.6em;
}

div.template::after {
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  content: ' ';
}

div.template.active::after {
  background-color: #0008;
  content: '✔';
  font-size: 7em;
  text-align: center;
  color: #d5ff02;
}

div.template.active > button {
  bottom: -8em;
}

div.template.can-abort > div.abort {
  display: inline-block;
}

div.template.can-grow > div.grow {
  display: inline-block;
}

div.template.can-claim > div.claim {
  display: inline-block;
  bottom: 1em;
  font-size: 1em;
}

div.template > div.grow, div.template > div.abort, div.template > div.claim {
  display: none;
  position: absolute;
  bottom: 0;
  z-index: 3;
  font-size: 0.6em;
}

div.template > div.grow > button, div.template > div.abort > button, div.template > div.claim > button {
  padding: 1em 2em;
  background: rgba(31, 73, 64, 0.7);
  color: #fff;
  border: solid 3px rgba(0, 0, 0, 0.3);
  border-radius: 1rem;
  cursor: pointer;
  z-index: 2;
  -webkit-transition: bottom 0.4s;
  transition: bottom 0.4s;
}

div.template > div.grow > button:hover, div.template > div.abort > button:hover, div.template > div.claim > button:hover {
  background: rgba(31, 73, 64, 0.9);
}

div.template > button {
  position: absolute;
  padding: 1em 2em;
  background: rgba(31, 73, 64, 0.7);
  color: #fff;
  border: solid 3px rgba(0, 0, 0, 0.3);
  border-radius: 1rem;
  cursor: pointer;
  z-index: 2;
  -webkit-transition: bottom 0.4s;
  transition: bottom 0.4s;
  bottom: calc(50% - 2em);
}

div.template > button:hover {
  background: rgba(31, 73, 64, 0.9);
}

div.template > div.abort {
  bottom: 3em;
}

div.template > div.grow > button {
  font-family: monospace;
}

div.template > div.grow > button > center {
  font-family: 'Climate Crisis';
}

div.template .centered-label {
  position: absolute;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.3em 0;
  width: 100%;
}

div.template > svg {
  position: absolute;
  font: 10em monospace;
  width: 100%;
  height: 100%;
}

div.template > svg text {
  fill: white;
  stroke: black;
  stroke-width: 5px;
  stroke-linejoin: round;
}

div.template > svg text.pulsate {
  -webkit-animation: 2s pulsate infinite;
          animation: 2s pulsate infinite;
}

div.template[data-state="expired"] .centered-label > span, div.template[data-state="ready"] .centered-label > span {
  color: #792127;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 0.2em;
  font-weight: bold;
  border-radius: 2px;
}

div.template[data-state="busy"] .centered-label > span, div.template[data-state="ready-no-expire"] .centered-label > span {
  color: #009879;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 0.2em;
  font-weight: bold;
  border-radius: 2px;
}

.breeding-parent-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.breeding-parent-select > div {
  width: 50vw;
  text-align: center;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.breeding-parent-select > div:nth-of-type(2) > div > img {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.breeding-parent-select > div:nth-of-type(2) > div > img.selected {
  -webkit-transform: none;
          transform: none;
}

.breeding-parent-select > div > div {
  width: 30vw;
  height: 30vw;
}

.breeding-parent-select > div > div > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-filter: blur(8px) grayscale(1);
          filter: blur(8px) grayscale(1);
  -webkit-transition: -webkit-filter 1s;
  transition: -webkit-filter 1s;
  transition: filter 1s;
  transition: filter 1s, -webkit-filter 1s;
}

.breeding-parent-select > div > div > img.selected {
  -webkit-filter: none;
          filter: none;
}

.breeding-parent-select > div > div > button {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 3px 3px 5px #333;
}

.breeding-parent-select > div > div > button:hover {
  background: rgba(255, 255, 255, 0.4);
}

.gray-and-blurry {
  -webkit-filter: blur(8px) grayscale(1);
          filter: blur(8px) grayscale(1);
}

#breeding-config-rows td > img {
  max-width: 100px;
  border-radius: 1rem;
}

#breeding-config-rows td > div {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

table.proposals > tfoot > tr:last-of-type > td, table.proposals > tfoot > tr:last-of-type > th {
  border-bottom: 2px solid #009879;
}

body#dragonsbay > div > div {
  max-width: inherit;
  margin: 0 1rem;
}

body#dragonsbay > div > div #breeding-config-rows td:nth-of-type(9) {
  white-space: normal;
}

.tab-container > ul > li[data-show] {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1em 2em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.tab-container > ul > li[data-show].active {
  border: solid 2px #fff;
}

.tab-container div[class$="-tab"] {
  display: none;
}

.tab-container div[class$="-tab"].show-tab {
  display: block;
}

@media (prefers-color-scheme: dark) {
  body:not(.light) {
    background-color: #111;
    color: #eee;
  }
  body:not(.light) a {
    color: #eee;
  }
  body:not(.light) svg {
    fill: #fff;
  }
  /*
    body:not(.light) #login-dialog > div, 
    body:not(.light) #donate-dialog > div, 
    body:not(.light) #status-filter-dialog > div,
    body:not(.light) #settings-dialog > div */
  body:not(.light) :is(#login-dialog, #donate-dialog, #status-filter-dialog, #select-template-dialog, #edit-pool-template-dialog, #settings-dialog, #tokens-dialog) > div {
    background-color: #111;
  }
  body:not(.light) #login-dialog > div > button,
  body:not(.light) #status-filter-dialog > div > button {
    background-color: #000;
    color: #eee;
  }
  body:not(.light) #thank-you-overlay > div {
    background-color: #111;
  }
  body:not(.light) #dacs .dac.active {
    background-color: #eee;
    color: #111;
    border-radius: 1em;
  }
}

@media screen and (max-width: 1300px) {
  table.proposals thead {
    display: none;
  }
  table.proposals tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  table.proposals tr[data-proposal-state] {
    display: none;
  }
  mobile-only {
    display: inline-block;
    font-family: 'Panton';
    color: #009879;
    white-space: pre;
  }
  table.proposals tbody tr {
    border: 2px solid #009879;
    margin-bottom: 1em;
  }
  table.proposals td:last-of-type,
  table.proposals th:last-of-type,
  table.proposals td:first-of-type,
  table.proposals th:first-of-type {
    border-right: none;
    border-left: none;
  }
  .show-data-proposal-state-0 tr[data-proposal-state="0"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .show-data-proposal-state-1 tr[data-proposal-state="1"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .show-data-proposal-state-2 tr[data-proposal-state="2"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.loader {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.loader.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.loader > img {
  max-width: 100px;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 6rem;
  font-size: 2em;
  background: #bbb;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

nav > a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  padding: 0 0.2em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

nav > a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.clear {
  clear: both;
  position: relative;
  overflow: auto;
}

.progress {
  display: block;
  height: 100%;
  background-color: #2bc253;
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
          box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.progress.fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 255, 0, 0.2);
  -webkit-transition: height 1s;
  transition: height 1s;
}

.progress.fill.negative {
  background-color: rgba(255, 0, 0, 0.4);
}

.progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  z-index: 1;
  background-size: 50px 50px;
  overflow: hidden;
}

#staked-hatchlings .template button, #hatchlings-in-progress .template button {
  white-space: pre;
  text-align: left;
  padding: 0.2em 1em;
}

#staked-hatchlings .template button center span, #hatchlings-in-progress .template button center span {
  font-size: 0.5em;
}

#settings-dialog tr :nth-child(1) {
  text-align: left;
}

#settings-dialog tr :nth-child(2) {
  text-align: center;
}

div#hatchlings-in-progress .template .pet-name {
  display: none;
}

div#hatchlings-in-progress .template .odds {
  padding: 0.2em 0.4em 0 0.4em;
}

[data-on-load="load-available-water"] .template {
  cursor: pointer;
}

[data-on-load="load-available-water"] .template .pet-name {
  display: none;
}

[data-on-load="load-available-water"] .template button {
  bottom: 0;
  white-space: pre-line;
  text-align: left;
  padding: 0.2em 0.8em;
}

[data-on-load="load-available-water"] .template button > span {
  font-size: 0.5em;
}

[data-on-load="load-staked-hatchlings"] .template button > span {
  font-size: 0.5em;
}

#content > p, #content > h1, #content > h2, #content table {
  max-width: calc(min(60rem, 95dvw));
  margin: 2rem auto;
}

#content > .two-part-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: calc(min(60rem, 95dvw));
  margin: 2rem auto;
}

#content > .two-part-header > div:first-of-type {
  width: 100%;
}

#content > .two-part-header h1 {
  margin-bottom: 0;
}

#content > .two-part-header table th {
  white-space: nowrap;
}

.big-border {
  position: relative;
  padding: 1.5em 1em 0 1em;
  min-width: 26em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.big-border > button {
  margin-bottom: 1em;
  border-radius: 1em;
  border: none;
  cursor: pointer;
}

.big-border > div.header {
  position: absolute;
  top: -1.7em;
  left: 1em;
  background-color: #111;
  padding: 0.2em 0.4em;
  font-family: 'Climate Crisis';
  z-index: 2;
}

.big-border > div.header > svg {
  fill: #fff;
}

.big-border > div.header.right {
  right: 1em;
  left: auto;
  padding: 0.2em 0.4em 0.2em 0.2em;
}

.big-border > div.header > div {
  position: absolute;
  bottom: -2.2em;
  right: 1em;
  border: solid 3px;
  padding: 0.2em 0.4em 0.6em 0.4em;
  font-size: 0.4em;
  background-color: #111;
}

.big-border > div.header > div > div {
  position: absolute;
  bottom: -1em;
  background-color: #111;
  border: solid 2px;
  padding: 0 0.4em 0.2em 0.4em;
  font-size: 0.5em;
  right: 1em;
}

.big-border > div.header > button {
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 0;
  border: 0;
  position: absolute;
  bottom: -1.4em;
  right: 1em;
  font-size: 1rem;
}

.big-border.purple {
  border-top: solid 1em #8038FF;
  border-right: solid 1em #8038FF;
  border-bottom: solid 1em #6E1CFF;
  border-left: solid 1em #6E1CFF;
}

.big-border.purple > div.header {
  border: solid 0.3em #8038FF;
  color: #6E1CFF;
}

.big-border.purple > div.header > svg {
  fill: #6E1CFF;
}

.big-border.purple > button {
  background-color: #000;
  color: #6E1CFF;
  border: solid 4px #5400e8;
}

.big-border.purple > button:hover {
  background-color: #8f4fff;
  color: #000;
}

.big-border.pink {
  border-top: solid 1em #FF38A8;
  border-right: solid 1em #FF38A8;
  border-bottom: solid 1em #FF0290;
  border-left: solid 1em #FF0290;
}

.big-border.pink > div.header {
  border: solid 0.3em #FF38A8;
  color: #FF0290;
}

.big-border.pink > div.header > svg {
  fill: #FF0290;
}

.big-border.pink > button {
  background-color: #000;
  color: #FF0290;
  border: solid 4px #ce0074;
}

.big-border.pink > button:hover {
  background-color: #ff68bd;
  color: #000;
}

.big-border.green {
  border-top: solid 1em #C2FF6A;
  border-right: solid 1em #C2FF6A;
  border-bottom: solid 1em #98FF02;
  border-left: solid 1em #98FF02;
}

.big-border.green > div.header {
  border: solid 0.3em #C2FF6A;
  color: #98FF02;
}

.big-border.green > div.header > svg {
  fill: #98FF02;
}

.big-border.green > button {
  background-color: #000;
  color: #98FF02;
  border: solid 4px #7ace00;
}

.big-border.green > button:hover {
  background-color: #c2ff68;
  color: #000;
}

#content .big-border > table {
  margin: 0 0 1em auto;
}

@-webkit-keyframes pulsate {
  50% {
    stroke-width: 2px;
    font-size: 1.1em;
  }
}

@keyframes pulsate {
  50% {
    stroke-width: 2px;
    font-size: 1.1em;
  }
}

.hide-templates .template, .hide-templates .hide-when-templates-are-hidden {
  display: none;
}

.hide-no-owned-nfts [data-no-owned-nfts] {
  display: none;
}

nav > .right {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

nav .balance {
  display: none;
  font-size: 0.5em;
  color: #333;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}

nav .balance.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

nav .balance > span:first-of-type {
  font-family: 'Ceviche One';
  font-size: 2em;
}

nav .balance > span:nth-of-type(2) {
  font-family: 'Panton';
}

nav .balance > span:nth-of-type(2):before {
  content: '💎 ';
}

nav .balance > span:nth-of-type(3) {
  font-family: 'Panton';
}

nav .balance > span:nth-of-type(3):before {
  content: '👛💎 ';
}

@-webkit-keyframes tilt-shaking {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(0eg);
            transform: rotate(0eg);
  }
  75% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes tilt-shaking {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(0eg);
            transform: rotate(0eg);
  }
  75% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes rotate-y {
  0% {
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
  15% {
    -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
  }
  35% {
    -webkit-transform: rotateY(150deg) rotateX(15deg);
            transform: rotateY(150deg) rotateX(15deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  65% {
    -webkit-transform: rotateY(150deg) rotateX(-15deg);
            transform: rotateY(150deg) rotateX(-15deg);
  }
  85% {
    -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
  }
  100% {
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
}

@keyframes rotate-y {
  0% {
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
  15% {
    -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
  }
  35% {
    -webkit-transform: rotateY(150deg) rotateX(15deg);
            transform: rotateY(150deg) rotateX(15deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  65% {
    -webkit-transform: rotateY(150deg) rotateX(-15deg);
            transform: rotateY(150deg) rotateX(-15deg);
  }
  85% {
    -webkit-transform: rotateY(30deg);
            transform: rotateY(30deg);
  }
  100% {
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translateX(9px) translateY(-10px) rotate(0deg) scale(0.8);
            transform: translateX(9px) translateY(-10px) rotate(0deg) scale(0.8);
  }
  100% {
    -webkit-transform: translateX(9px) translateY(-10px) rotate(360deg) scale(0.8);
            transform: translateX(9px) translateY(-10px) rotate(360deg) scale(0.8);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: translateX(9px) translateY(-10px) rotate(0deg) scale(0.8);
            transform: translateX(9px) translateY(-10px) rotate(0deg) scale(0.8);
  }
  100% {
    -webkit-transform: translateX(9px) translateY(-10px) rotate(360deg) scale(0.8);
            transform: translateX(9px) translateY(-10px) rotate(360deg) scale(0.8);
  }
}

.tilt-shake-on-hover:hover {
  -webkit-animation: tilt-shaking 0.25s linear infinite;
          animation: tilt-shaking 0.25s linear infinite;
}

.rotate-y-on-hover:hover {
  -webkit-animation: rotate-y 3s linear infinite;
          animation: rotate-y 3s linear infinite;
}

svg:hover #Lock {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
}

.stars > div {
  position: absolute;
  top: 0;
  left: 0;
}

.stars > div > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.stars > div > div:nth-child(1)::before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 7px;
  top: 7px;
  border-left: solid 8px #fff;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-right: none;
}

.stars > div > div:nth-child(1)::after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 7px;
  border-right: solid 8px #fff;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-left: none;
}

.stars > div > div:nth-child(2)::before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 6px;
  top: 0;
  border-bottom: solid 8px #fff;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  border-top: none;
}

.stars > div > div:nth-child(2)::after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 6px;
  top: 8px;
  border-top: solid 8px #fff;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  border-bottom: none;
}

nav > a > .stars > div {
  opacity: 0;
}

nav > a > .stars > div:nth-child(1) {
  top: 28px;
  left: 52px;
}

nav > a > .stars > div:nth-child(2) {
  top: 25px;
  left: 23px;
}

nav > a > .stars > div:nth-child(3) {
  top: 32px;
  left: 35px;
}

nav > a:hover > .stars > div:nth-child(1) {
  -webkit-animation: blink-stars-1 2s linear infinite;
          animation: blink-stars-1 2s linear infinite;
}

nav > a:hover > .stars > div:nth-child(2) {
  -webkit-animation: blink-stars-2 4s linear infinite;
          animation: blink-stars-2 4s linear infinite;
}

nav > a:hover > .stars > div:nth-child(3) {
  -webkit-animation: blink-stars-3 3s linear infinite;
          animation: blink-stars-3 3s linear infinite;
}

@-webkit-keyframes blink-stars-1 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink-stars-1 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blink-stars-2 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink-stars-2 {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blink-stars-3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink-stars-3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.insufficient-funds-warning {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: rgba(138, 0, 0, 0.9);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: 'Panton';
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.insufficient-funds-warning:before {
  font-size: 8em;
  margin-top: -0.3em;
  content: '×';
}

.insufficient-funds-warning:after {
  margin-top: -2em;
  font-size: 0.8em;
  content: 'Insufficient funds';
}

.insufficient-funds .insufficient-funds-warning {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.insufficient-funds button {
  display: none;
}

#select-template-dialog .template .odds {
  font-size: 0.6em;
}

#breeding-queue > div {
  border-top: 1rem dashed #222;
}

.unstake-list div.template :is(.pet-name, .odds) {
  font-size: 0.5em;
}

[data-on-load="show-wallet-nfts"] div.template .pet-name {
  font-size: 0.5em;
}

[no-wcw] #wcw-login-button {
  display: none;
}

button {
  cursor: pointer;
}

@media screen and (max-width: 800px) {
  nav {
    height: 3em;
    font-size: 1em;
  }
  nav img {
    max-height: 100%;
  }
  #content {
    font-size: 1em;
  }
  #content > .two-part-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #content > .two-part-header table th {
    text-align: left;
  }
  body#dragonsbay > div#settings-dialog > div {
    font-size: 1em;
  }
  #select-template-dialog > div > div {
    max-height: calc(100dvh - 10em);
  }
  #login-dialog > div > h5,
  #donate-dialog > div > h5,
  #status-filter-dialog > div > h5,
  #select-template-dialog > div > h5,
  #edit-pool-template-dialog > div > h5,
  #settings-dialog > div > h5,
  #tokens-dialog > div > h5 {
    font-size: 1em;
  }
}

@media screen and (max-width: 450px) {
  nav {
    height: 3em;
    font-size: 0.8em;
  }
  nav img {
    max-height: 100%;
  }
}
/*# sourceMappingURL=db.css.map */