form .form-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: .2em;
}
form .form-row > label {
  padding: .5em 1em .5em 0;
  flex: 1;
}
form .form-row > input {
  flex: 2;
}
form .form-row > span {
  flex: 2;
}
form .form-row input[type="checkbox"] {
  margin-top: 12px;
}
@media screen and (min-width: 768px) {
  form .form-row > input,
  form .form-row > span {
    flex: 3;
  }
}
@media screen and (min-width: 992px) {
  form .form-row > input,
  form .form-row > span {
    flex: 4;
  }
}
@media screen and (min-width: 1200px) {
  form .form-row > input,
  form .form-row > span {
    flex: 5;
  }
}
.sui {
  background: #000000;
  color: #0eb8c0;
}
.sui * {
  margin: 0;
  padding: 0;
}
.sui .hidden {
  display: none;
}
.sui .shown {
  display: block;
}
.sui input,
.sui button {
  padding: .5em;
}
.sui > .content {
  padding: 16px;
}
.sui > .content .heading {
  font-size: 1.2em;
  display: block;
  margin-bottom: 16px;
}
.sui > .content .container {
  background: #333333;
  padding: 16px;
  border-radius: 4px;
  border: solid 1px #555555;
  margin-bottom: 8px;
}
.sui > .content .container.collapsible > .heading {
  margin-bottom: 0;
}
.sui > .content .container.collapsible > .heading:hover {
  cursor: pointer;
}
.sui > .content .container.collapsible .content {
  display: none;
}
.sui > .content .container.collapsible.open > .heading {
  margin-bottom: 16px;
}
.sui > .content .container.collapsible.open .content {
  display: block;
}
.sui > .content input[type="text"],
.sui > .content input[type="password"] {
  height: 16px;
  background: transparent;
  border: none;
  color: #eeeeee;
}
.sui > .content input[type="text"]:focus,
.sui > .content input[type="password"]:focus,
.sui > .content input[type="text"]:hover,
.sui > .content input[type="password"]:hover {
  outline: none;
  border-bottom: solid 1px #097479;
  box-shadow: 3px #097479;
}
.sui > .content input[type="checkbox"] {
  transform: scale(2);
}
.sui > .content button {
  background: #097479;
  color: white;
  border: 0;
}