form .form-row {
  display: flex;
  justify-content: flex-end;
  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,
form .form-row > button {
  padding: .5em;
}
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;
  margin: 0;
  padding: 0;
}
.sui ul {
  padding: 0;
}
.sui ul li {
  margin: 0 0 0 0;
}
.sui p {
  padding: 0;
  margin: 0;
}
.sui > .content {
  padding: 32px;
}
.sui > .content .heading {
  font-size: 1.2em;
  margin-bottom: 16px;
  display: block;
}
.sui > .content .container {
  background: #333333;
  padding: 16px;
  border-radius: 4px;
  border: solid 1px #555555;
  margin-bottom: 8px;
}
.sui > .content input[type="text"] {
  height: 16px;
}
.sui > .content input[type="checkbox"] {
  transform: scale(2);
}
.sui > .content .form-row > button {
  background: #097479;
  color: white;
  border: 0;
}
/*
.spiro-control {    
    label {
    	width: 10%;
    	display: inline-block;
    }
    input[type="range"] {        
    	width: 80%;
    	display: inline-block;
    }
}
*/