@font-face {
  font-family: "Roboto Mono";
  src: url(RobotoMono-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto Mono Bold";
  src: url(RobotoMono-Bold.ttf) format("truetype");
}
html, body {
  margin: 0;
  padding: 0;
  background: #1b1b1b;
  color: white;
  font-family: "Roboto Mono", monospace;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rem;
}

.icon {
  height: 1.5rem;
  padding: 0.875rem;
  padding-right: 0;
  vertical-align: text-bottom;
}

a {
  color: white;
}

.input {
  margin: 2rem 0;
}

input {
  background: #2c2c2c;
  border: none;
  height: 2.5rem;
  box-sizing: border-box;
  padding-left: 0.75rem;
  color: white;
}

.tldr div {
  padding: 0.4rem 0;
}

.tldr .error {
  color: #ff1741;
}

.tldr .warning {
  color: #ff941a;
}

.tldr .info {
  color: #1ad1ff;
}

.block, .error {
  width: 90vw;
  margin-bottom: 3rem;
  border: none;
}

.head .icon {
  opacity: 0;
}

.connection, .dns {
  margin: 3rem 0;
}

.dns .table .header {
  font-weight: bold;
  box-shadow: none;
  display: flex;
}
.dns .col {
  padding: 1rem 1.5rem;
  width: 25%;
}

.connection.err {
  color: #B00020;
}

.table {
  border-spacing: 0 15px;
  box-sizing: border-box;
  width: 100%;
}
.table .row, .table .head {
  background-color: #2c2c2c;
  margin-bottom: 1rem;
  text-align: left;
  display: flex;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.table .head {
  padding: 1rem 1.5rem;
  margin: 0;
  background-color: transparent;
  font-weight: bold;
  box-shadow: none;
}
.table .col {
  flex: 1 1 auto;
  padding: 1rem;
}
.table .bool {
  flex-basis: 10vw;
  flex: 0 1 auto;
}
.table .toggle {
  cursor: pointer;
}
.table .bool {
  color: white;
  text-align: center;
  width: 10vw;
}
.table .true {
  background: #36b300;
}
.table .false {
  background: #B00020;
}
.table .warn {
  background: #b35f00;
}
.table .info {
  background: #008fb3;
}
.table .tree-1 {
  margin-left: 3vw;
}
.table .tree-2 {
  margin-left: 6vw;
}
.table .tree-3 {
  margin-left: 9vw;
}

.infoRow .false, .infoRow .true {
  background: #464646;
}

.sk-cube-grid {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  vertical-align: top;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.sk-cube-grid span {
  position: absolute;
  line-height: 2.5rem;
  width: 100%;
  left: 0;
  text-align: center;
  color: #2c2c2c;
  cursor: pointer;
  z-index: 2;
}
.sk-cube-grid .sk-cube {
  width: 33.3333333333%;
  height: 33.3333333333%;
  background-color: white;
  float: left;
}

.sk-cube-grid.active span {
  display: none;
}
.sk-cube-grid.active .sk-cube {
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid.active .sk-cube .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-cube-grid.active .sk-cube .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-cube-grid.active .sk-cube .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.sk-cube-grid.active .sk-cube .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-cube-grid.active .sk-cube .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-cube-grid.active .sk-cube .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-cube-grid.active .sk-cube .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.sk-cube-grid.active .sk-cube .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-cube-grid.active .sk-cube .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

.dns .error {
  color: #B00020;
}

.dns .body.error {
  color: #ff1741;
}