/* Ported from https://ifconfig.co/ inline styles (+ small Blazor additions) */

html,
.pure-g [class*="pure-u"] {
  background-color: white;
  font-family: "Open Sans", sans-serif;
}

pre {
  font-family: "Monaco", "Menlo", "Consolas", "Courier New", monospace;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

a {
  text-decoration: underline;
  color: #000;
}

a:hover,
a:active {
  background: #d7d7d7;
}

.ip {
  border: 1px solid #cbcbcb;
  background: #f2f2f2;
  font-size: 36px;
  padding: 6px;
  word-wrap: break-word;
}

svg.github-corner {
  fill: #151513;
  color: #fff;
}

.footer {
  margin-top: 34px;
  border-top: 1px solid #cbcbcb;
}

.content {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
  max-width: 1024px;
}

/* Pure's marketing templates often use a "gutters" helper; keep spacing stable */
.gutters > [class*="pure-u"] {
  box-sizing: border-box;
}

.center {
  justify-content: center;
}

.info-table td,
.info-table th {
  padding: 5px;
  border: 2px solid #ababab;
  word-wrap: break-word;
}

.info-table th[scope="row"] {
  background-color: #d5d5d5;
  text-align: left;
}

.widgetbox {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid grey;
  font-family: "Courier New", Courier, monospace;
  margin-top: 0.5rem;
  box-sizing: border-box;
}

.widgetbox.input :first-child::before {
  content: "$ ";
  white-space: pre;
}

.widgetbox.output {
  min-height: 4em;
  white-space: pre;
  overflow-x: scroll;
}

.l-box {
  margin: 0 1rem;
}

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

.medium-input {
  width: 10em;
}

button.selected {
  background-color: rgb(208 208 208);
}

.input-buttons {
  line-height: 2.6em;
  font-size: smaller;
}

.leafcloud-logo .letters {
  fill: black;
}

.narrow-input {
  width: 6em;
}

.FAQ h3 {
  margin-top: 1.25rem;
}

.hidden {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  html,
  .pure-g [class*="pure-u"],
  a {
    background-color: #161719;
    color: #d8d9da;
  }

  .ip {
    border: 1px solid #313233;
    background: #212223;
  }

  .footer {
    color: #8e8e8e !important;
    border-top: 1px solid #313233;
  }

  a:hover,
  a:active {
    background: #3d3e3f;
  }

  svg.github-corner {
    fill: #f8f9fa;
    color: #161719;
  }

  .info-table th[scope="row"] {
    background-color: #2e2e2e;
    color: rgb(220, 220, 220);
    text-align: left;
  }

  .pure-button {
    background-color: #2e2e2e;
    color: rgb(220, 220, 220);
  }

  .pure-button.selected {
    background-color: rgb(125 125 125);
  }

  .pure-input {
    background-color: #e6e6e6;
    color: #666;
  }

  .pure-input::placeholder {
    color: #bbb;
  }

  .leafcloud-logo .letters {
    fill: white;
    max-width: 100%;
  }

  .widgetbox {
    border-color: #555;
  }

  .info-table td,
  .info-table th {
    border-color: #555;
  }
}

@media (min-width: 768px) {
  .leafcloud-placement {
    text-align: right;
  }

  .leafcloud-logo {
    height: 80px;
    margin: 2em 0 -0.5em 0;
  }
}

@media (max-width: 768px) {
  .leafcloud-logo {
    margin-right: 1em;
  }
}

#blazor-error-ui {
  background: #ffffe0;
  bottom: 0;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.55rem;
}