main.css

body {
  margin: 0;
  padding: 0;
  color:rgba(0,0,0,.87);
  background: whitesmoke;
}

header {
  margin: 0;
  padding: 15px;
  background: #242e67/*#3f51b5*/;
  color:rgba(255,255,255,1);
  box-shadow: 0 0 1px 1.5px #dadada;
}

li a {
  display:block;
  text-decoration: none;
  color: inherit;
}

header nav .header-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

header nav .header-nav li {
  font-size: 1.5em;
}

header nav .header-nav li.back-arrow ~ li:not(:last-child) {
  display: none;
}

header nav .header-nav li.back-arrow ~ li:last-child {
  font-size: 1.5em;
  font-weight: bold;
}

header nav .header-nav li {
  margin-right: 15px;
  display: inline-block;
}

header nav .header-nav li a {
  margin: 0;
  padding: 0;
  display: block;
}

main {
  margin: 5% 3% 3% 3%;
  padding:10px;
}

main section {
  margin: 0 0 3% 0;
}

h1 {
  margin-bottom: 1.5em;
}

h1 .sub-h1 {
  font-size: .8em;
  color: rgba(0,0,0,.54);
}

h2 {
  color:rgba(0,0,0,.54);
  font-size: .8em;
}

ul.list {
  list-style:none;
  padding:0;
}

.list li {
  margin-bottom:15px;
  padding:0;
  line-height:2.5;
  background: transparent;
  border-left: 5px solid #242e67/*#3f51b5*/;
  box-shadow:1px 1px 2px #555;
}

.list li a {
  margin:0;
  padding: 0 0 0 1em;
}

.list li a:hover {
  cursor: pointer;
  background: #242e67/*#3f51b5*/;
  color: rgba(255,255,255,1);
}

.list li.done {
  border-color: #888;
}

.list li.done a:hover {
  background: #888;
}

.list li a .item-description {
  margin-left:15px;
  margin-top:5px;
}

.list li a .item-description,
.list li a .item-status {
  font-size: .8em;
  color:rgba(0,0,0,.54);
}

.list li a:hover .item-description,
.list li a:hover .item-status {
  color: rgba(255,255,255,.7);
}

.list li a > .right-box {
  float:right;
  text-align: right;
}

.list li a .item-status {
  font-style: italic;
  bottom:10px;
  margin-right: 15px;
}

.list li a .item-arrow {
  margin-right: 15px;
  color: #242e67/*#3f51b5*/;
}

.list li a:hover .item-arrow,
.list li.done a:hover .item-arrow {
  color: rgba(255,255,255,1);
}

.list li.done a .item-arrow {
  color: #888;
}

.button {
  width:100%;
  line-height: 2.5;
  font-size: 1em;
  border: none;
  outline: none;
  box-shadow:1px 1px 2px #555;
  background: transparent;
}

a.button {
  text-decoration: none;
  color:inherit;
  padding:0 10px;
}

.button:hover {
  cursor: pointer;
  opacity: .87;
}

.center {
  text-align: center;
  margin:15px auto;
}

.fg-primary {
  color: #242e67/*#3f51b5*/!important;
}

.fg-accent {
  color:#ff3f80!important;
}

.fg-secondary__light {#242e67
  color: rgba(0,0,0,.54)!important;
}

.fg-secondary__dark {
  color: rgba(0,0,0,.7)!important;
}

.bg-primary {
  background: #242e67/*#3f51b5*/;
  color:rgba(255,255,255,1)!important;
}

.bg-accent {
  background: #ff3f80;
  color: rgba(255,255,255,1)!important;
}

.searchbox {
  margin:0 0 15px 0;
  padding:0;
  position: relative;
}

.searchbox input[type=search] {
  line-height: 2;
  font-size: 1em;
  border:1px solid #dadada;
  outline:none;
  padding:10px 48px 10px 10px;
  min-width:280px;
  width:100%;
  height:100%;
}

.searchbox .search-button {
  position: absolute;
  right:10px;
  bottom: 6px;
  line-height: 1.5;
  font-size: 1em;
  border-radius: 50%;
  border:1px solid #dadada;
  outline:none;
  background: transparent;
}

.panel {
  margin:0 0 2em 0;
}

.progressbar {
  list-style: none;
  display: flex;
  padding: 0;
}

.progressbar li {
  flex:1;
  text-align: center;
  position: relative;
}

.progressbar li:not(:last-child) {
  margin-right:5px;
}

.progressbar li::before {
  content:"";
  display: inline-block;
  border:1px solid #dadada;
  margin-bottom: 10px;
  background: #dadada;
  border-radius: 50%;
  width:16px;
  height:16px;
  z-index:1;
}

.progressbar li:not(:last-child)::after {
  content: "";
  display: inline-block;
  border-width:1px;
  border-color: #dadada;
  border-style: solid none;
  background: #dadada;
  width: calc(100% + 5px);
  height:4px;
  position: absolute;
  top:6px;
  left:50%;
  z-index:-1;
}

.progressbar li.current::before,
.progressbar li.done::before,
.progressbar li.done::after {
  border-color: #242e67/*#3f51b5*/;
  background: #242e67/*#3f51b5*/;
}

.progressbar li a {
  color:rgba(0,0,0,.38);
}

.progressbar li.done a,
.progressbar li.current a {
  color:rgba(0,0,0,.87);
}

.progressbar li.current a {
  font-weight: bold;
}

.panel.gov,
.panel.opp,
.panel.winner,
.panel.no-header {
  box-shadow:1px 1px 2px #555;
}

.panel header {
  margin:0;
  padding:0;
  box-shadow: none;
}

.panel.gov header {
  background: #65a952/*#0c6f0c*//*#4caf50*/;
}

.panel.opp header {
  background: #3b8abf/*#e91e63*/;
}

.panel header > a {
  display: flex;
  margin:0;
  padding:0;
  color:inherit;
  text-decoration: none;
}

.panel header > a > * {
  padding:15px 0;
}

.panel header > a > *:first-child {
  padding:15px 0 15px 15px;
}

.panel header > a > *:last-child {
  padding:15px 15px 15px 0;
}

.panel header .position-header {
  flex: .8;
  font-size: .8em
  color:rgba(0,0,0,.7);
  text-align: right;
}

.panel header .team-header {
  flex: 4;
  font-weight: bold;
  font-size: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width:60%;
}

.panel header .panel-arrow {
  flex: .5;
  text-align: right;
  float: right;
}

.panel header + main {
  padding:1% 3%;
}

.panel main {
  margin:0;
  padding:3% 3%;
  background: rgba(255,255,255,1);
}

.panel main .row {
  margin:1em auto;
  display: flex;
}

.panel main .row .item-role,
.panel main .row .item-speaker {
  flex:1.3;
}

.panel main .row .item-role,
.panel main .row .item-speaker,
.panel main .row .item-score,
.panel main .row .item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel main .row .item-role {
  padding-top:.5em;
}

/*
.panel main .row .item-speaker {
  text-overflow: ellipsis;
}
*/

.panel main .row .item-speaker select {
  width:100%;
  height:2.5em;
  padding-left:10px;
  padding-right:10px;
  background: transparent;
  border:1px solid #dadada;
  outline:none;
  border-radius: 5px;
}

.panel main .row .item-speaker select option {
  padding-left:10px;
  padding-right:10px;
  background: white;
}

.panel main .row.position,
.panel main .row.winner {
  display: flex;
}

.panel main .row.position .item.gov-score,
.panel main .row.position .item.opp-score {
  flex:1;
  text-align: right;
  padding-right:10px;
}

.panel main .row.position .item.gov,
.panel main .row.position .item.opp {
  flex:.5;
  padding-top: 3px;
  padding-bottom: 1px;
}

.panel main .row .gov-score-total,
.panel main .row .opp-score-total {
  font-size: 1.2em;
  font-weight: bold; 
}

.panel main .row.winner .item-checkbox {
  width:100%;
}

.panel main .row .item-speaker + .item,
.panel main .row .item-speaker + .item-role,
.panel main .row .item-speaker + .item-score,
.panel main .row .item-speaker + .item-revise {
  text-align: right;
}


.panel main .row .item-score:not(.item-spinner):not(.total) {
  flex: 1;
}

.panel main .row .item-role {
  flex: .5;
}

.panel main .row .item-revise {
  flex: .5;
}

.panel main .row .item-revise {
  text-align: right;
}

.panel main .row .item-revise a {
  text-decoration: none;
  color: #3f51b5;
  font-size:1.2em;
}

.panel main fieldset.row {
  border: none;
  margin:0 0 1em;
  padding:0;
  display:block;
}

.panel main fieldset.row:last-child {
  margin:0;
}

.panel main fieldset.row legend {
  font-size: .8em;
  color: rgba(0,0,0,.54);
  padding:0;
}

.panel main fieldset.row .row {
  display:flex;
}

.panel main fieldset.row .row .item-spinner,
.panel main fieldset.row .row .item-score.total {
  margin-right:10px;
}

.panel main fieldset.row .row .item-spinner input[type=number],
.panel main fieldset.row .row .item-score.total input[type=number] {
  margin:0;
  padding: 0;
  font-size: 1.2em;
  font-weight: bold;
  outline: none;
  border:1px solid transparent /*1px solid #dadada*/;
  width:2em;
  text-align: center;
  -moz-appearance:textfield;
}

/*.panel main fieldset.row .row .item-checkbox,*/
.panel main fieldset.row .row .item-spinner input[type=number],
.panel main fieldset.row .row .item-score.total input[type=number] {
  transition: border-bottom .2s linear .1s;
}

/*.panel main fieldset.row .row .item-checkbox,*/
.panel main fieldset.row .row .item-spinner input[type=number]:focus,
.panel main fieldset.row .row .item-score.total input[type=number]:focus {
  border-bottom:1px solid #242e67;
  transition: border-bottom .2s linear .1s;
}

.panel main fieldset.row .row .item-score.total input[type=number] {
  margin-right:20px;
}

.panel main fieldset.row .row .item-spinner input[type=number]::-webkit-outer-spin-button,
.panel main fieldset.row .row .item-spinner input[type=number]::-webkit-inner-spin-button,
.panel main fieldset.row .row .item-score.total input[type=number]::-webkit-outer-spin-button,
.panel main fieldset.row .row .item-score.total input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.panel main fieldset.row .row .item-spinner .spinner-up,
.panel main fieldset.row .row .item-spinner .spinner-down {
  font-size: 1.2em;
  cursor: pointer;
}

.panel main .row .item-score-max {
  padding-top:2px;
}

.panel main .row .item-score-max::before {
  content:"/";
  margin-left: 5px;
  margin-right: 5px;
}

.panel main fieldset.row .row .item-spinner input[type=number] {
}

.panel main fieldset.row .row .item-label {
  padding-top:5px;
}

.panel main fieldset.row .row .item-label,
.panel main fieldset.row .row .item-checkbox {
  flex:1;
}

.panel main .item-checkbox {
  display: inline-flex;
  border:1px solid #242e67;
  border-radius: 5px;
}

.panel main .item-checkbox label {
  flex:1;
  cursor: pointer;
  padding:5px;
  text-align: center;
}

.panel main .item-checkbox label:nth-child(2) {
  border-radius: 5px 0 0 5px;
}

.panel main .item-checkbox label:nth-child(n+3) {
  border-left: 1px solid #242e67;
}

.panel main .item-checkbox label:last-child {
  border-radius: 0 5px 5px 0;
}

.panel main .item-checkbox input[type=radio] {
  /*visibility: hidden;
  width:0;
  height:0;
  margin:0;
  padding:0;*/
  display: none;
}

.panel main .item-checkbox input[type=radio] + label {
  background: transparent;
  color: #242e67/*rgba(0,0,0,.38)*/;
}

.panel main .item-checkbox input[type=radio]:checked + label {
  background: #242e67;
  color: rgba(255,255,255,1);
}

.panel.navigation {
  display: flex;
}

.panel.navigation .button {
  flex:1;
}

.panel.navigation .button:first-child {
  text-align: left;
  margin-right:5px;
}

.panel.navigation .button:last-child {
  text-align: right;
  margin-left:5px;
}

/* on desktop (larger than iPad) */
@media only screen and (min-width: 769px) {
  header nav .header-nav li.back-arrow ~ li:not(:last-child) {
    display: inline-block;
  }

  header nav .header-nav li.back-arrow ~ li:nth-child(n+4) {
    margin-left: 10px;
  }
  header nav .header-nav li.back-arrow ~ li:nth-child(n+4)::before {
    content: "/";
    display: inline;
    position: absolute;
    margin-left: -20px;
  }

  header nav .header-nav li.back-arrow ~ li:last-child {
    font-weight: normal;
  }

  header nav .header-nav li.back-arrow + li:nth-child(2) {
    font-weight: bold;
  }
}