/* Browser Default Styles */
body {
  font-family: Cairo, sans-serif;
  font-size: 17px;
  padding: 16px;
  margin: 0;
}
table {
  border-collapse: collapse;
}
table td,
table th {
  padding: 0.2em 0.7em;
  border: 1px solid #004e8d;
  text-align: left;
  vertical-align: top;
}
button {
  text-transform: uppercase;
}
/* Re-usable Styles */
.word-plus-score {
  display: block;
  margin-bottom: 9px;
  line-height: 1.1;
}
.word-alone {
  margin-right: 0.3em;
  line-height: 1.1;
}
.word-item .word {
  display: inline-block;
  background-color: #d4f3fd;
  padding: 0 5px 2px 5px;
  border-radius: 5px;
}
.word-item.pangram .word {
  border: 2px solid white;
  outline: 2px solid #ffb26f;
}
.word-item.pangram:first-child .word {
  margin-top: 0.5em;
}
.petals-table th {
  text-align: center;
}
.petals-table td,
.words-used,
.all-words {
  line-height: 2;
}
.all-words {
  padding: 0.8em;
  border: 1px solid #004e8d;
  border-radius: 5px;
}
/* Widget Styles */
#FormArea .form-control,
#FormArea .form-select {
  width: 300px;
}
#FormArea .button-area {
  margin-top: 0.5em;
}
#InputForm label {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 2px 0;
}
#InputForm .label-text {
  width: 220px;
}
#InputForm input {
  text-transform: uppercase;
}
#Output .petal,
#Output .petal-column-label {
  text-transform: uppercase;
}
#Output h2 {
  margin-top: 1em;
}
/* hint modes */
.mode-hints-1 .words-used-row,
.mode-hints-1 .petals-table,
.mode-hints-1 .petals-table-heading,
.mode-hints-1 .all-words,
.mode-hints-1 .all-words-heading {
  display: none;
}
.mode-hints-2 .word :not(:nth-child(1)) {
  filter: blur(4px);
}
.mode-hints-2 .all-words,
.mode-hints-2 .all-words-heading,
.mode-hints-3 .all-words-heading,
.mode-hints-3 .all-words {
  display: none;
}
.mode-hints-3 .word :not(:nth-child(1)):not(:nth-child(2)) {
  filter: blur(4px);
}
