body {
  background-color: lightgrey;
  padding: 0;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

@media (max-width: 639px) {
  .wrapper {
    font-size: .75em; } }
@media (min-width: 767px) {
  .wrapper {
    font-size: 1.5em; } }

.calc {
  color: black; }

.penaltyBox {
  display: inline-block;
  background-color: white;
  border-radius: .5em;
  border: .2em solid grey;
  height: 1.5em;
  width: 1em;
  margin: .2em;
  text-align: center;
  line-height: 1.5em;
  vertical-align: middle; }
  .penaltyBox.done::before {
    content: 'X'; }

.pointsExample {
  background-color: white;
  border-radius: .5em;
  width: 2em;
  display: inline-block;
  margin: .5em .4em;
  font-size: .75em;
  vertical-align: middle; }
  .pointsExample .valueHolder {
    text-align: center; }
  .pointsExample hr {
    margin: .3em .2em;
    border: 0;
    border-top: 1px solid grey; }

.pointsBox {
  border-radius: .5em;
  display: inline-block;
  margin: .1em .2em;
  padding: .5em;
  background-color: white;
  border: .2em solid grey;
  vertical-align: middle; }
  .pointsBox input {
    width: 2.5em;
    border: 0;
    height: 1.5em;
    text-align: center;
    font-size: 1em; }
  .pointsBox.total input {
    width: 4em; }
  .pointsBox.red {
    background-color: #ffcccc;
    border-color: red; }
    .pointsBox.red input {
      background-color: #ffcccc; }
  .pointsBox.yellow {
    background-color: #fff7cc;
    border-color: gold; }
    .pointsBox.yellow input {
      background-color: #fff7cc; }
  .pointsBox.green {
    background-color: #94e594;
    border-color: forestgreen; }
    .pointsBox.green input {
      background-color: #94e594; }
  .pointsBox.blue {
    background-color: #ccccff;
    border-color: blue; }
    .pointsBox.blue input {
      background-color: #ccccff; }
  body.trinity .pointsBox.red {
    background-color: white;
    border-color: hotpink; }
    body.trinity .pointsBox.red input {
      background-color: white; }
  body.trinity .pointsBox.yellow {
    background-color: #ff4dff;
    border-color: purple; }
    body.trinity .pointsBox.yellow input {
      background-color: #ff4dff; }

.scoreRow {
  border-radius: .5em;
  padding: .1em;
  margin: .1em;
  display: inline-block; }
  .scoreRow .scoreBox {
    margin: .2em;
    padding: .5em;
    display: inline-block;
    border-radius: .5em;
    width: 1em;
    height: 1em;
    text-align: center;
    vertical-align: middle;
    font-size: 1.35em; }
    .scoreRow .scoreBox.disabled {
      font-family: 'Material Icons';
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
      /* Support for IE. */
      font-feature-settings: 'liga';
      color: grey; }
      .scoreRow .scoreBox.disabled::before {
        content: 'delete'; }
    .scoreRow .scoreBox.done {
      font-family: 'Material Icons';
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
      /* Support for IE. */
      font-feature-settings: 'liga'; }
      .scoreRow .scoreBox.done::before {
        content: 'done'; }
    .scoreRow .scoreBox.lock {
      border-radius: 1em;
      font-family: 'Material Icons';
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
      /* Support for IE. */
      font-feature-settings: 'liga'; }
      .scoreRow .scoreBox.lock::before {
        content: 'lock_open'; }
      .scoreRow .scoreBox.lock.locked::before {
        content: 'lock'; }
  .scoreRow.red {
    background-color: red; }
    .scoreRow.red .scoreBox {
      background-color: #ffcccc; }
  .scoreRow.yellow {
    background-color: gold; }
    .scoreRow.yellow .scoreBox {
      background-color: #fff7cc; }
  .scoreRow.green {
    background-color: forestgreen; }
    .scoreRow.green .scoreBox {
      background-color: #94e594; }
  .scoreRow.blue {
    background-color: blue; }
    .scoreRow.blue .scoreBox {
      background-color: #ccccff; }
  body.trinity .scoreRow.red {
    background-color: hotpink; }
    body.trinity .scoreRow.red .scoreBox {
      background-color: white; }
  body.trinity .scoreRow.yellow {
    background-color: purple; }
    body.trinity .scoreRow.yellow .scoreBox {
      background-color: #ff4dff; }

#reset {
  border: solid .2em grey;
  border-radius: .5em;
  font-size: 1.5em; }