/**
 * Standard colours.
 */
/**
 * Apply background colour and matching text colour.
 */
#which, #left .header, #right .header, #footer {
  background-color: #4caf50;
  color: rgba(0, 0, 0, 0.87);
}
#which .primaryText, #which #union a.sel, #union #which a.sel, #left .header .primaryText, #left .header #union a.sel, #union #left .header a.sel, #right .header .primaryText, #right .header #union a.sel, #union #right .header a.sel, #footer .primaryText, #footer #union a.sel, #union #footer a.sel {
  color: rgba(0, 0, 0, 0.87);
}
#which .secondaryText, #which #fixtures table th, #fixtures table #which th, #which #rankings table th, #rankings table #which th, #which #edit-seeds, #which #seed-entry .seed-field label, #seed-entry .seed-field #which label, #which #union a:not(.sel), #union #which a:not(.sel), #which label:not(.sel), #left .header .secondaryText, #left .header #fixtures table th, #fixtures table #left .header th, #left .header #rankings table th, #rankings table #left .header th, #left .header #edit-seeds, #left .header #seed-entry .seed-field label, #seed-entry .seed-field #left .header label, #left .header #union a:not(.sel), #union #left .header a:not(.sel), #right .header .secondaryText, #right .header #fixtures table th, #fixtures table #right .header th, #right .header #rankings table th, #rankings table #right .header th, #right .header #edit-seeds, #right .header #seed-entry .seed-field label, #seed-entry .seed-field #right .header label, #right .header #union a:not(.sel), #union #right .header a:not(.sel), #footer .secondaryText, #footer #fixtures table th, #fixtures table #footer th, #footer #rankings table th, #rankings table #footer th, #footer #edit-seeds, #footer #seed-entry .seed-field label, #seed-entry .seed-field #footer label, #footer #union a:not(.sel), #union #footer a:not(.sel) {
  color: rgba(0, 0, 0, 0.54);
}
#which .disabledText, #left .header .disabledText, #right .header .disabledText, #footer .disabledText {
  color: rgba(0, 0, 0, 0.38);
}

#rankings table tr:nth-child(even), #rankings table tr:nth-child(odd), #union, #leftright {
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
}
#rankings table tr:nth-child(even) .primaryText, #rankings table tr:nth-child(odd) .primaryText, #union .primaryText, #union a.sel, #leftright .primaryText {
  color: rgba(0, 0, 0, 0.87);
}
#rankings table tr:nth-child(even) .secondaryText, #rankings table tr:nth-child(odd) .secondaryText, #rankings table tr:nth-child(even) th, #rankings table tr:nth-child(odd) th, #rankings table tr:nth-child(even) #edit-seeds, #rankings table tr:nth-child(odd) #edit-seeds, #rankings table tr:nth-child(even) #seed-entry .seed-field label, #rankings table tr:nth-child(odd) #seed-entry .seed-field label, #seed-entry .seed-field #rankings table tr:nth-child(even) label, #rankings table #seed-entry .seed-field tr:nth-child(even) label, #seed-entry .seed-field #rankings table tr:nth-child(odd) label, #rankings table #seed-entry .seed-field tr:nth-child(odd) label, #union .secondaryText, #union #fixtures table th, #fixtures table #union th, #union #rankings table th, #rankings table #union th, #union #edit-seeds, #union #seed-entry .seed-field label, #seed-entry .seed-field #union label, #union a:not(.sel), #rankings table tr:nth-child(even) #which label:not(.sel), #rankings table tr:nth-child(odd) #which label:not(.sel), #union #which label:not(.sel), #which #rankings table tr:nth-child(even) label:not(.sel), #rankings table #which tr:nth-child(even) label:not(.sel), #which #rankings table tr:nth-child(odd) label:not(.sel), #rankings table #which tr:nth-child(odd) label:not(.sel), #which #union label:not(.sel), #leftright .secondaryText, #leftright #fixtures table th, #fixtures table #leftright th, #leftright #rankings table th, #rankings table #leftright th, #leftright #edit-seeds, #leftright #seed-entry .seed-field label, #seed-entry .seed-field #leftright label, #leftright #which label:not(.sel), #which #leftright label:not(.sel) {
  color: rgba(0, 0, 0, 0.54);
}
#rankings table tr:nth-child(even) .disabledText, #rankings table tr:nth-child(odd) .disabledText, #union .disabledText, #leftright .disabledText {
  color: rgba(0, 0, 0, 0.38);
}

#rankings table tr.ptsUp td.ptsDiff, #rankings table tr.posUp td.posDiff {
  color: rgba(56, 142, 60, 0.87);
}
#rankings table tr.ptsUp td.ptsDiff .primaryText, #rankings table tr.posUp td.posDiff .primaryText, #rankings table tr.ptsUp td.ptsDiff #union a.sel, #rankings table tr.posUp td.posDiff #union a.sel, #union #rankings table tr.ptsUp td.ptsDiff a.sel, #rankings table tr.ptsUp #union td.ptsDiff a.sel, #union #rankings table tr.posUp td.posDiff a.sel, #rankings table tr.posUp #union td.posDiff a.sel {
  color: rgba(56, 142, 60, 0.87);
}
#rankings table tr.ptsUp td.ptsDiff .secondaryText, #rankings table tr.posUp td.posDiff .secondaryText, #rankings table tr.ptsUp td.ptsDiff th, #rankings table tr.posUp td.posDiff th, #rankings table tr.ptsUp td.ptsDiff #edit-seeds, #rankings table tr.posUp td.posDiff #edit-seeds, #rankings table tr.ptsUp td.ptsDiff #seed-entry .seed-field label, #rankings table tr.posUp td.posDiff #seed-entry .seed-field label, #seed-entry .seed-field #rankings table tr.ptsUp td.ptsDiff label, #rankings table tr.ptsUp #seed-entry .seed-field td.ptsDiff label, #seed-entry .seed-field #rankings table tr.posUp td.posDiff label, #rankings table tr.posUp #seed-entry .seed-field td.posDiff label, #rankings table tr.ptsUp td.ptsDiff #union a:not(.sel), #rankings table tr.posUp td.posDiff #union a:not(.sel), #union #rankings table tr.ptsUp td.ptsDiff a:not(.sel), #rankings table tr.ptsUp #union td.ptsDiff a:not(.sel), #union #rankings table tr.posUp td.posDiff a:not(.sel), #rankings table tr.posUp #union td.posDiff a:not(.sel), #rankings table tr.ptsUp td.ptsDiff #which label:not(.sel), #rankings table tr.posUp td.posDiff #which label:not(.sel), #which #rankings table tr.ptsUp td.ptsDiff label:not(.sel), #rankings table tr.ptsUp #which td.ptsDiff label:not(.sel), #which #rankings table tr.posUp td.posDiff label:not(.sel), #rankings table tr.posUp #which td.posDiff label:not(.sel) {
  color: rgba(56, 142, 60, 0.54);
}
#rankings table tr.ptsUp td.ptsDiff .disabledText, #rankings table tr.posUp td.posDiff .disabledText {
  color: rgba(56, 142, 60, 0.38);
}

#addrow button, #seed-entry button {
  background-color: #dd2c00;
  color: white;
}
#addrow button .primaryText, #seed-entry button .primaryText, #addrow button #union a.sel, #seed-entry button #union a.sel, #union #addrow button a.sel, #addrow #union button a.sel, #union #seed-entry button a.sel, #seed-entry #union button a.sel {
  color: white;
}
#addrow button .secondaryText, #addrow button #fixtures table th, #fixtures table #addrow button th, #addrow #fixtures table button th, #addrow button #rankings table th, #rankings table #addrow button th, #addrow #rankings table button th, #addrow button #edit-seeds, #seed-entry button .secondaryText, #seed-entry button #fixtures table th, #fixtures table #seed-entry button th, #seed-entry button #rankings table th, #rankings table #seed-entry button th, #seed-entry button #edit-seeds, #addrow button #seed-entry .seed-field label, #seed-entry button #seed-entry .seed-field label, #seed-entry .seed-field button label, #addrow button #union a:not(.sel), #seed-entry button #union a:not(.sel), #union #addrow button a:not(.sel), #addrow #union button a:not(.sel), #union #seed-entry button a:not(.sel), #seed-entry #union button a:not(.sel), #addrow button #which label:not(.sel), #seed-entry button #which label:not(.sel), #which #addrow button label:not(.sel), #addrow #which button label:not(.sel), #which #seed-entry button label:not(.sel), #seed-entry #which button label:not(.sel) {
  color: rgba(255, 255, 255, 0.7);
}
#addrow button .disabledText, #seed-entry button .disabledText {
  color: rgba(255, 255, 255, 0.5);
}

#rankings table tr.ptsDown td.ptsDiff, #rankings table tr.posDown td.posDiff {
  color: rgba(221, 44, 0, 0.87);
}
#rankings table tr.ptsDown td.ptsDiff .primaryText, #rankings table tr.posDown td.posDiff .primaryText, #rankings table tr.ptsDown td.ptsDiff #union a.sel, #rankings table tr.posDown td.posDiff #union a.sel, #union #rankings table tr.ptsDown td.ptsDiff a.sel, #rankings table tr.ptsDown #union td.ptsDiff a.sel, #union #rankings table tr.posDown td.posDiff a.sel, #rankings table tr.posDown #union td.posDiff a.sel {
  color: rgba(221, 44, 0, 0.87);
}
#rankings table tr.ptsDown td.ptsDiff .secondaryText, #rankings table tr.posDown td.posDiff .secondaryText, #rankings table tr.ptsDown td.ptsDiff th, #rankings table tr.posDown td.posDiff th, #rankings table tr.ptsDown td.ptsDiff #edit-seeds, #rankings table tr.posDown td.posDiff #edit-seeds, #rankings table tr.ptsDown td.ptsDiff #seed-entry .seed-field label, #rankings table tr.posDown td.posDiff #seed-entry .seed-field label, #seed-entry .seed-field #rankings table tr.ptsDown td.ptsDiff label, #rankings table tr.ptsDown #seed-entry .seed-field td.ptsDiff label, #seed-entry .seed-field #rankings table tr.posDown td.posDiff label, #rankings table tr.posDown #seed-entry .seed-field td.posDiff label, #rankings table tr.ptsDown td.ptsDiff #union a:not(.sel), #rankings table tr.posDown td.posDiff #union a:not(.sel), #union #rankings table tr.ptsDown td.ptsDiff a:not(.sel), #rankings table tr.ptsDown #union td.ptsDiff a:not(.sel), #union #rankings table tr.posDown td.posDiff a:not(.sel), #rankings table tr.posDown #union td.posDiff a:not(.sel), #rankings table tr.ptsDown td.ptsDiff #which label:not(.sel), #rankings table tr.posDown td.posDiff #which label:not(.sel), #which #rankings table tr.ptsDown td.ptsDiff label:not(.sel), #rankings table tr.ptsDown #which td.ptsDiff label:not(.sel), #which #rankings table tr.posDown td.posDiff label:not(.sel), #rankings table tr.posDown #which td.posDiff label:not(.sel) {
  color: rgba(221, 44, 0, 0.54);
}
#rankings table tr.ptsDown td.ptsDiff .disabledText, #rankings table tr.posDown td.posDiff .disabledText {
  color: rgba(221, 44, 0, 0.38);
}

/**
 * Font size and weight all applied directly here as we have so few
 */
body {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
}

h3 {
  font-size: 20px;
  font-weight: 500;
}

table th {
  font-size: 12px;
  font-weight: 500;
}
table td {
  font-size: 13px;
  font-weight: 400;
}
table td input, table td select {
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: "Roboto", sans-serif !important;
}

#which, #union {
  font-size: 14px;
  font-weight: 500;
}

#footer {
  font-size: 12px;
  font-weight: 400;
}

/**
 * Attempt to combine z-index and shadow into height.
 */
/**
 * Layout magic
 */
@media only screen and (min-width: 840px) {
  html {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #leftright {
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    flex: 1;
  }
  #footer {
    flex: 0;
  }
  #left {
    z-index: 6;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.64);
    transition: box-shadow 0.1s ease-in-out;
    height: 100%;
    flex: 0.5;
    display: flex;
    flex-direction: column;
  }
  #right {
    z-index: 0;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.1s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  #left .header h3, #right .header h3 {
    flex: 0;
  }
  #which, #union {
    flex-shrink: 0;
  }
  #rankings {
    flex: 1;
    overflow-y: scroll;
  }
  #fixtures {
    flex: 1;
    overflow-y: scroll;
  }
  #addrow {
    flex: 0;
  }
}
@media only screen and (max-width: 839px) {
  #leftright {
    display: flex;
    flex-direction: column-reverse;
  }
  #left, #right {
    display: flex;
    flex-direction: column;
  }
}
/**
 * Standard styling.
 */
body {
  margin: 0;
  padding: 0;
}

#footer {
  padding: 2px;
  text-align: center;
}

#left .header h3, #right .header h3 {
  text-align: center;
}

#which {
  display: flex;
  height: 48px;
  line-height: 48px;
  width: 100%;
}
#which label {
  flex-grow: 1;
  text-align: center;
  border-bottom: 2px solid #4caf50;
}
#which label.sel {
  border-bottom-color: #dd2c00;
}
#which label input {
  display: none;
}

#union {
  display: flex;
  height: 24px;
  line-height: 24px;
  width: 100%;
}
#union a,
#union span {
  flex-grow: 1;
  text-align: center;
  border-bottom: 2px solid #ffffff;
  display: block;
  text-decoration: none;
  padding: 0 6px;
}
#union span:not(.sel) {
  color: rgba(0, 0, 0, 0.54);
}
#union a.sel,
#union span.sel {
  border-bottom-color: #dd2c00;
}
#union select {
  flex-grow: 1;
}
#seed-entry {
  padding: 16px;
  max-width: 400px;
}
#seed-entry h4 {
  margin-top: 0;
}
#seed-entry .seed-field {
  margin-bottom: 12px;
}
#seed-entry .seed-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}
#seed-entry .seed-field input[type=text] {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  padding: 4px;
  width: 160px;
}
#seed-entry .seed-field textarea {
  font-family: monospace;
  font-size: 12px;
  padding: 4px;
  display: block;
}
#seed-entry button {
  border: none;
  padding: 8px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

#edit-seeds {
  text-align: right;
  padding: 2px 8px;
  font-size: 11px;
}

#rankings {
  padding: 5px;
}
#rankings table {
  margin: 0 auto;
  border-collapse: collapse;
}
#rankings table th {
  text-align: left;
}
#rankings table th, #rankings table td {
  padding: 2px 4px;
}
#rankings table th.pos, #rankings table td.pos {
  text-align: right;
}
#rankings table th.name, #rankings table td.name {
  padding: 0 10px;
}
#fixtures {
  padding: 10px 2px 0;
}
#fixtures table {
  margin: 0 auto;
  border-collapse: collapse;
}
@media only screen and (min-width: 840px) {
  #fixtures table {
    margin-bottom: 82px;
  }
}
@media only screen and (max-width: 839px) {
  #fixtures table {
    margin-bottom: 30px;
  }
}
#fixtures table tr.details td, #fixtures table tr.possible-changes td {
  font-size: 9px;
}
#fixtures table tr.details td.details-left, #fixtures table tr.possible-changes td.details-left {
  text-align: left;
}
#fixtures table tr.details td.details-center, #fixtures table tr.possible-changes td.details-center {
  text-align: center;
}
#fixtures table tr.details td.details-right, #fixtures table tr.possible-changes td.details-right {
  text-align: right;
}
#fixtures table th, #fixtures table td {
  padding: 0 4px;
}
#fixtures table tbody.fixture tr:first-child td {
  padding-top: 10px;
}
#fixtures table input[type=number] {
  width: 3em;
}

#addrow {
  position: relative;
}
#addrow button {
  position: absolute;
  right: 24px;
}
@media only screen and (min-width: 840px) {
  #addrow button {
    bottom: 24px;
  }
}
@media only screen and (max-width: 839px) {
  #addrow button {
    bottom: -28px;
  }
}
#addrow button {
  height: 56px;
  width: 56px;
  font-size: 48px;
  border-radius: 50%;
  box-shadow: #000000;
  z-index: 6;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.64);
  transition: box-shadow 0.1s ease-in-out;
}
#addrow button:active {
  z-index: 12;
  box-shadow: 0 6px 12px 0 rgb(0, 0, 0);
  transition: box-shadow 0.1s ease-in-out;
}
#addrow button {
  border: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAAABlBMVEX///////9VfPVsAAAAAXRSTlMAQObYZgAAABZJREFUCNdjYLBhYCAG////HwUTqQ8AH00QpSze/owAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}