/*
hack
*/
.modal {
  display: block !important;
}

body {
  overflow: hidden;
  background-color: black;
  background: radial-gradient(rgba(0, 100, 0, 1), white 200%);
  margin: 0;
  color: white;
  font: 1.3rem Inconsolata, monospace;
  text-shadow: 0 0 5px #c8c8c8;
  padding: 10px;
  height: 100vh;
}
/*body:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}*/
::selection {
  background: #28a616;
  text-shadow: none;
}
div.required {
  font-size: 0.5em;
}
label.block.mb-2 {
  float: left;
  margin-right: 30px;
}
.blinking {
  position: absolute;
  left: 9px;
  top: 9px;
  animation: 1s blink ease infinite;
}
.submit {
  outline: none;
  position: relative;
  transition: all 1s;
  cursor: pointer;
  border-radius: 1em;
  color: #fff;
  background: radial-gradient(rgba(0, 100, 0, 1), white 200%);
  border: 0;
  width: 120px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 13px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
}
.submit:disabled {
  background: gray;
}
.terminal.submit {
  box-shadow: 1px 1px 8px -2px #87a77f;
  background: linear-gradient(to bottom, #39b550 5%, #017305 100%);
  background-color: #44c767;
  border-radius: 0px;
  border: 1px solid #ffffff11;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 16px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}
.terminal.submit:disabled {
  background: linear-gradient(to bottom, #b5b5b5 5%, #797979 100%);
  background-color: #cecece;
  display: inline-block;
  cursor: not-allowed;
  color: #c3c3c3;
}
/* position of the spinner when it appears, you might have to change these values */
.spin {
  width: 160px;
}
.spin .spinner {
  left: -0.6em;
  top: 0.65em;
  width: 2.5em;
  display: block;
  position: absolute;
}

/* The actual spinner element is a pseudo-element */
.spin .spinner::before {
  content: "";
  width: 1em; /* Size of the spinner */
  height: 1em; /* Change as desired */
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: solid 0.3em #999; /* Thickness/color of spinner track */
  border-bottom-color: #555; /* Color of variant spinner piece */
  animation: 0.8s linear infinite spinner; /* speed of spinner */
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* spinner animation */
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}
.field {
  margin-top: 10px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .fields .field {
    display: grid;
    grid-template-columns: 1fr 3fr !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .fields .field {
    display: grid;
    grid-template-columns: 1fr 3fr !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .fields .field {
    display: grid;
    grid-template-columns: 1fr 5fr !important;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .fields .field {
    display: grid;
    grid-template-columns: 1fr 5fr !important;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  pre.server-output .log_item {
    grid-template-columns: 1fr 4fr;
  }
  .fields .field {
    display: grid;
    grid-template-columns: 1fr 5fr !important;
  }
}