body,
button,
html,
input,
td,
textarea,
tr {
  margin           : 0;
  padding          : 0;
  color            : white;
  background-color : black;
  font-family      : 'Segoe UI',
                     'Tahoma',
                     'Arial',
                     'Sans';
  line-height      : 1.4;
}

.footer,
.header {
  display          : flex;
  background-color : hsla(240, 10%, 10%, 1);
  align-items      : center;
  flex-direction   : row;
}

.footer p {
  opacity : 0.7;
}

.row {
  padding : 0.8rem 1.5rem;
}

.row-content {
  margin-bottom : 1rem;
}

.col:not(:last-child) {
  margin-right : 1rem;
}

.col-filler {
  width            : 100%;
  background-color : transparent;
  flex             : 100%;
}

textarea {
  min-height   : 4rem;
  padding      : 0.6rem 1rem;
  border-color : hsla(240, 20%, 30%, 1);
  flex         : 5;
}

button {
  padding          : 1.1rem 1rem;
  color            : black;
  border           : 1px solid hsla(240, 10%, 10%, 1);
  border-radius    : 0.2rem;
  background-color : hsla(240, 100%, 90%, 1);
  font-size        : 1.2rem;
  cursor           : pointer;
}

button.inactive {
  color            : grey;
  background-color : hsla(240, 100%, 40%, 1);
}

button.button-inline {
  padding   : 0.3rem 0.7rem;
  font-size : 1.0rem;
}

button.help {
  padding          : 0.0rem 0.55rem;
  color            : hsla(120, 100%, 0%, 1);
  border-radius    : 2rem;
  background-color : hsla(120, 30%, 50%, 1);
  font-size        : 1.0rem;
  font-weight      : 800;
}

button.help-head, button.help-info-only {
  background-color : hsla(120, 10%, 100%, 0.3);
}

button.help:focus {
  outline : 0;
}

.title {
  font-size   : 1.5rem;
  font-style  : italic;
  font-weight : 700;
}

.app-name {
  font-style  : italic;
  font-weight : 600;
}

.info {
  float         : right;
  border-radius : 2rem;
  background    : green;
}

h1 {
  color     : hsla(240, 60%, 80%, 1);
  font-size : 1.3rem;
}

h1:not(:first-child) {
  margin-top : 1.5rem;
}

tr.overused td {
  color            : hsla(0, 50%, 90%, 1);
  background-color : hsla(0, 30%, 10%, 1);
}

tr:last-child td {
  padding-bottom : 0.3rem;
}

tr:first-child td {
  border-top : 2px solid hsla(240, 20%, 50%, 1);
}

table {
  margin        : 0;
  padding       : 0;
  border-bottom : 2px solid hsla(240, 20%, 20%, 1);
}

td,
th {
  padding          : 0.1rem 0.5rem;
  background-color : hsla(240, 20%, 10%, 1);
}

td:first-child,
th:first-child {
  padding-left : 0.6rem;
}

td.num {
  text-align : right;
}

td.graph,
th.graph {
  text-align : center;
}

td.help {
  color            : hsla(120, 20%, 70%, 1);
  background-color : hsla(240, 20%, 10%, 1);
}

tr td.help-icon {
  background-color : hsla(240, 20%, 10%, 1);
  text-align       : center;
}

th {
  padding          : 0.3rem 0.5rem;
  background-color : hsla(240, 20%, 20%, 1);
  text-align       : left;
  font-weight      : 600;
  white-space      : nowrap;
}

.filter-group {
  margin : 1rem 0.15rem 0 0.15rem;
}

.filter {
  display          : inline-block;
  margin           : 0 0;
  padding          : 0.3rem 0.6rem 0.3rem 0.6rem;
  color            : hsla(240, 90%, 90%, 1.0);
  border           : none;
  border-radius    : 0.3rem 0.3rem 0 0;
  background-color : hsla(240, 10%, 30%, 1);
  font-size        : 1.1rem;
  cursor           : pointer;
}

.filter:not(:last-child) {
  margin-right : 0.4rem;
}

button.filter:not(.selected) {
  box-shadow : inset 0px -20px 20px -20px hsla(240, 20%, 0%, 0.3);
}

.selected {
  color            : white;
  background-color : hsla(240, 20%, 50%, 1);
}

.hidden {
  display : none;
}

.tabs_rule {
  width            : 100%;
  height           : 2px;
  background-color : hsla(240, 20%, 50%, 1);
}

.help-text {
  padding : 0.7rem;
  color   : hsla(240, 10%, 60%, 1);
}

.help-text > ol {
  margin-bottom : 0;
}

.occurrences {
  color : hsla(240, 20%, 90%, 0.8);
}

.word-in-context {
  color : white;
}

.word-tag-group {
  margin     : 0.8rem -0.7rem 0 0rem;
  text-align : center;
}

.word-tag {
  display       : inline-block;
  margin-right  : 0.7rem;
  margin-bottom : 0.7rem;
  padding       : 0.2rem 0.7rem;
  border-radius : 0.3rem;
  font-size     : 4vh;
}

/*  */

.spinner-inline,
.spinner-inline:after,
.spinner-inline:before {
  width                       : 2.5em;
  height                      : 2.5em;
  border-radius               : 50%;
  -webkit-animation           : load7 1.8s infinite ease-in-out;
  animation                   : load7 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode : both;
  animation-fill-mode         : both;
}

.spinner-inline {
  position                : relative;
  top                     : -2.5em;
  margin                  : 8px auto;
  color                   : hsla(240, 20%, 50%, 0.4);
  text-indent             : -9999em;
  font-size               : 10px;
  -webkit-animation-delay : -0.16s;
  animation-delay         : -0.16s;
  -ms-transform           : translateZ(0);
  -webkit-transform       : translateZ(0);
  transform               : translateZ(0);
}

.spinner-inline:after,
.spinner-inline:before {
  content  : '';
  position : absolute;
}

.spinner-inline:before {
  left                    : -3.5em;
  -webkit-animation-delay : -0.32s;
  animation-delay         : -0.32s;
}

.spinner-inline:after {
  left : 3.5em;
}

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow : 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow : 0 2.5em 0 0;
  }
}

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow : 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow : 0 2.5em 0 0;
  }
}

/* char */

a,
a:visited {
  color : hsla(240, 20%, 90%, 1);
}

a.help-link {
  padding          : 0.1rem 0.5rem;
  color            : black;
  border-radius    : 0.2rem;
  background-color : hsla(120, 20%, 50%, 1);
  text-decoration  : none;
  cursor           : pointer;
}

.subtle {
  opacity : 0.7;
}

.subtle2 {
  opacity : 0.5;
}

.tag-hint {
  padding          : 0.3rem 0.6rem;
  color            : hsla(120, 90%, 90%, 1.0);
  background-color : hsla(120, 40%, 30%, 1);
}