body {
  background: #0d1033;
  padding: 0;
  margin: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

#app {
  position: relative;
  /* background: #9c68a5; */
  background: #111;
  color: #fff;
  font-family: "Helvetica", "Arial", sans-serif;
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}

.flexRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flexCol {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

#mainPanel {
  position: relative;
  box-sizing: border-box;
  padding: 6px;
  flex-grow: 1;
}

#footer {
  color: #eee;
  width: 100%;
  font-size: 12px;
  /* background: #7c4885; */
  background: #010101;
  box-sizing: border-box;
  padding: 6px;
  flex-shrink: 0;
}

#focusPanel {
  margin-top: 25px;
  position: relative;
}

#title {
  font-size: 30px;
  text-align: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 15px;
}

a {
  color: #0adcff;
}

.control {
  padding: 0 10px;
  width: 50px;
}

@media (max-width: 779px) {
  #title {
    font-size: 20px;
  }

  .control {
    font-size: 15px;
  }
}

.buttonBase {
  background: none;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.buttonBase.buttonDark {
  color: #222;
  border-color: #222;
}

.buttonEffects:hover {
  background: #fff !important;
  color: #111 !important;
}

.buttonEffects:active {
  background: #aaa !important;
  color: #111 !important;
}

.buttonEffects.buttonDark:hover {
  background: #222 !important;
  color: #fff !important;
}

.buttonEffects.buttonDark:active {
  background: #555 !important;
  color: #fff !important;
}

.buttonEffects:disabled {
  color: #ddd !important;
  border: 1px solid #ddd !important;
  cursor: default !important;
  filter: brightness(0.65) !important;
}

.buttonEffects:disabled:hover,
.buttonEffects:disabled:active {
  background: none !important;
  color: #ddd !important;
}

#footerContent {
  padding: 15px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}

.footerBlock {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.footerBlock > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 20px;
}

/* me again */
.hide {
  visibility: hidden;
  display: none;
}

.buttonFooter {
  padding: 5px 10px;
  margin-right: 10px;
}

#sourceContainer {
  margin-right: 15px;
}

#nextMessage {
  font-style: italic;
  font-size: 18px;
  display: block;
  position: relative;
  top: 100%;
}

.flexRowCenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.fullPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  color: #fff;
}

.overlayPanel {
  /* background: #5c2865; */
  background: #000;
}

.verticalPanel {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.panelContent {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: top;
  text-align: center;
}

.fullPanel h1,
#titlePanel h1 {
  font-size: 40px;
}

#helpContent p {
  font-size: 1.2em;
  width: 55%;
  margin: 10px auto;
}

#helpContent li {
  width: 60%;
  margin: 7px auto;
  text-align: left;
}

.textDark {
  color: #222;
}

.textDark a {
  color: #0d1033;
}

hr {
  width: 100%;
  border-bottom: 1px solid white;
}

input[disabled=""] {
  background: #cccccc;
  color: #222222;
  font-style: italic;
}

/** this app **/

#playPanel {
  min-width: 90vw;
  max-width: 95vw;
}

#input, #prompt, .stat {
  font-family: monospace;
}

#input, #prompt {
  flex-grow: 1;
}

#prompt, #input, #inputLabel, #promptLabel, #result {
  height: 45px;
  font-size: 20px;
  line-height: 45px;
  padding: 10px;
  border: 1px solid #fff;
}

#prompt, #promptLabel {
  background: #333;
  color: #eee;
  border-bottom: none;
  pointer-events: none;
}

#prompt, #input, #inputLabel, #promptLabel {
  border-bottom: none;  
}

#inputLabel, #input, #result {  
  background: #000;
  color: #fff;
  border-top: none;
}

#input, #prompt {  
  border-left: none;
}

#inputLabel, #promptLabel {
  border-right: none;
}

#result {
  text-align: center;  
}

#result.resultNeutral {
  background: #165095;
}

#result.resultSuccess {
  background: #637f47;
}

#result.resultFailure {
  background: #9e302d;
}

#result.resultSkipped {
  background: #7723bb;
}

.markWrong {
  background: #9e302d;
}

#input:focus {
  outline: none;
}

#statsPanel {
  gap: 5vw;
  margin: 40px auto 20px auto;
}

.statBlock {
  text-align: center;
  font-size: 20px;
  min-width: 14vw;
  gap: 10px;
}

#optionsPanel {
  gap: 20px;
  margin-top: 30px;
}

.featuresPanel {
  gap: 10px;
}

.controlPanel {
  gap: 20px;
}

.controlPanel .control {
  width: 75px;
  font-size: 16px;
}

#input {
  white-space: pre;
}

/* jquery ui */


.ui-checkboxradio-label {
  display: flex;
  flex-direction: column;
  justify-content: start;
  text-align: center;
}

.ui-checkboxradio-icon {
  display: block;
  margin: 0 auto 5px auto;
}

label.ui-checkboxradio-label {
  background: #333;
  color: #fff;
}

label.ui-checkboxradio-label:hover {
  background: #555;
  color: #fff;
}

label.ui-checkboxradio-checked {
  background: #165095;
}

label.ui-state-active:hover {
  background: #3670b5 !important;
}