html,
body,
#content,
.root {
  min-height: 100%;
  height: 100%;
}
@media only screen and (max-width: 900px) {
  html,
  body,
  #content,
  .root {
    min-height: 100%;
    height: auto;
  }
}
body {
  font-size: 11pt;
  font-family: 'PT Sans', sans-serif;
}
@media only screen and (max-width: 900px) {
  body {
    overflow: auto;
  }
}
div {
  box-sizing: border-box;
}
.settings-item .title-normal {
  font-weight: bold;
  border-top: 1px solid #BDBDBD;
}
.root {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
}
@media only screen and (max-width: 900px) {
  .root {
    flex-direction: column;
  }
}
.options {
  width: 15rem;
  padding: 0 2rem;
  flex-shrink: 0;
  background: #FFE082;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
@media only screen and (max-width: 900px) {
  .options {
    margin: 1rem 2rem;
    padding: 1rem;
    width: auto;
  }
}
.options h3 {
  margin-top: 2rem;
}
@media only screen and (max-width: 900px) {
  .options h3 {
    margin: 0.5rem 0;
  }
}
.options label {
  padding: 0.2rem 0;
}
.options label input {
  margin-right: 0.5rem;
}
.table-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0 2rem;
}
@media only screen and (max-width: 900px) {
  .table-container {
    overflow: auto;
    height: auto;
  }
}
.settings-row .value {
  background: #DCEDC8;
  border-top: 1px solid #BDBDBD;
  width: 10rem;
  word-wrap: anywhere;
}
.settings-row .value.value-blocked {
  background: #FFCDD2;
  font-style: italic;
  font-size: 0.8rem;
}
.settings-row .value.value-hidden-with-value,
.settings-row .value.value-hidden-no-value {
  background: #ccc;
  font-size: 0.8rem;
}
.settings-row .value.value-hidden-no-value {
  font-style: italic;
}
.settings-row .value.value-not-set {
  background: white;
  font-style: italic;
  font-size: 0.8rem;
}
table {
  border-collapse: collapse;
  position: relative;
  padding: 0 2rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
table thead {
  position: sticky;
  top: 0;
}
table th,
table td {
  text-align: left;
  height: 1.3rem;
  padding: 0.1rem 0.5rem;
}
table th {
  background: #FFE082;
  border-bottom: 1px solid #BDBDBD;
}
table td {
  background: white;
}
table td.title {
  vertical-align: top;
}
.key-prompt-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.key-prompt-container .key-prompt {
  width: 500px;
  max-width: 100%;
  border: 0.2rem solid #FFA000;
}
.key-prompt-container .key-prompt header {
  background: #FFA000;
  padding: 0.5rem;
  font-weight: bold;
}
.key-prompt-container .key-prompt .body {
  padding: 1rem 0.5rem;
}
.key-prompt-container .key-prompt .body form {
  display: flex;
  flex-direction: row;
}
@media only screen and (max-width: 600px) {
  .key-prompt-container .key-prompt .body form {
    flex-direction: column;
  }
}
.key-prompt-container .key-prompt .body form label {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
}
.key-prompt-container .key-prompt .body form label input {
  flex-grow: 1;
  border: 0.15rem solid #FFA000;
  margin: 0 1rem;
}
.key-prompt-container .key-prompt .body form input[type=submit] {
  border: none;
  background: #FFA000;
  font: inherit;
  padding: 0 1rem;
  cursor: pointer;
}
@media only screen and (max-width: 600px) {
  .key-prompt-container .key-prompt .body form input[type=submit] {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
}
.key-prompt-container .key-prompt .body .error-message {
  margin-top: 1rem;
  padding: 0.5rem;
  background: #DD2C00;
  color: white;
  font-weight: bold;
}
.key-prompt-container .key-prompt .body .computer-note {
  margin-top: 1rem;
  font-style: italic;
}