.content {
margin-left: auto;
margin-right: auto;
padding-left: 0.2em;
padding-right: 0.2em;
}
@media (min-width: 37.65em) {
.content {
width: 36em;
}
}
div .flex {
display: flex;
}
label {
background-color: #efefef;
border: 1px solid #d0d0d0;
border-radius: 4px;
flex: 1;
margin: 4px;
}
label span {
text-align: center;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0.4em 0;
font-size: 2em;
}
.btn-submit {
display: inline-block;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background-color: #337ab7;
background-image: none;
border: 1px solid #2e6da4;
border-radius: 4px;
flex: 1;
margin: 15px 4px 0;
padding: 6px 12px;
font-size: 2em;
font-weight: normal;
line-height: 1.42857;
}
.btn-submit:focus,
.btn-submit:active:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-color: #286090;
border-color: #122b40;
}
.btn-submit:hover {
text-decoration: none;
background-color: #286090;
border-color: #204d74;
}
.btn-submit:active {
outline: 0;
background-color: #286090;
background-image: none;
border-color: #204d74;
box-shadow: inset 0 3px 5px #00000020;
}
@media (max-width: 30em) {
label span {
padding: 0.3em 0;
font-size: 1.9em;
}
.btn-submit {
font-size: 1.9em;
}
}
@media (max-width: 27em) {
label span {
padding: 0.2em 0;
font-size: 1.8em;
}
.btn-submit {
font-size: 1.8em;
}
}
@media (max-width: 20em) {
div .flex {
flex-flow: column;
}
label span {
padding: 0.2em 0;
}
}
label input {
display: none;
}
input:checked + span {
color: #f7f7f7;
background-color: #404040;
border-radius: 4px;
}
.rowtitle {
text-align: center;
display: block;
padding-top: 10px;
}
form {
padding-bottom: 4px;
border-radius: 4px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 4px 8px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.12);
}
.statusbar {
text-align: center;
padding: 6px 2px;
margin-top: 30px;
border-radius: 4px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.05),
0 4px 8px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.12);
font-size: 1.1em;
}
.status-unknown {
background-color: lightgray;
color: #202020;
}
.status-idle {
background-color: #edf7ed;
color: #428946;
}
.status-busy {
background-color: #fff4e5;
color: #ee7918;
}
.status-error {
background-color: #fdeded;
color: #d74444;
}