html, body { margin: 0; padding: 0; }
body { background: #ddd; font-family: sans-serif; }

.group:after {
  content: "";
  display: table;
  clear: both;
}

.pull-left { float: left; }
.pull-right { float: right; }

.totals-bar {
  background: #fff;
  border-top: solid 1px #ccc;
  color: #888;
  display: table;
  font-size: 5vw;
  line-height: 5vw;
  padding: 5vw 0;
  /* position: fixed; */
  /* top: 0; */
  width: 100%;
  /* z-index: 5; */
}

.totals-bar .all-tally {
  border-right: solid 1px #ccc;
  display: table-cell;
  height: 30px;
  padding-left: 10px;
  padding-right: 5px;
  width: 54%;
}
.totals-bar .grand-totals {
  display: table-cell;
  margin-right: 10px;
  width: 40%;
  text-align: center;
  vertical-align: middle;
}
.totals-bar .die-total {
  font-size: 12px;
  line-height: 28px;
}
.totals-bar .die-total .divider { color: #000; }
.totals-bar .die-total:first-child .divider { display: none; }

.clear {
  font-weight: 700;
  background: #c13333;
  color: #fff;
  font-size: 20px;
  padding: 30px 0;
  text-align: center;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5;
}

.all-dice {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  bottom: 45px;
  width: 100vw;
  margin: 0px auto 40px;
}

.roll-a {
  cursor: pointer;
  display: inline-block;
  position: relative;
  background: #fff;
  text-align: center;
  padding: 50px 0px;
  width: 50%;
  border-top: solid 1px #ccc;
}

.roll-a i { font-size: 10vw }

.roll-a:nth-child(odd) {
  border-color: #ccc;
  border-bottom: 0px;
  border-left: 0px;
  border-right: solid 1px #ccc;
  width: calc(50% - 1px);
}

.roll-a img {
  max-height: 40px;
  width: auto;
  margin: 0 auto;
}

.roll-a .roll-count-container {
  position: absolute;
  top: 10px; left: 10px;
}

.roll-a .total-container {
  position: absolute;
  top: 10px; right: 10px;
}

.roll-a .total, .totals-bar .all-total, .totals-bar .all-tally .total { color: #2550cd; }
.roll-a .roll-count, .totals-bar .all-tally .roll_count { color: #702caf; }
.grand-total { color: #3547ad; float: left; margin-left: 2vw; }
.current { color: #e05a38; float: right; margin-right: 2vw; }

.roll-a .dice { position: relative; display: inline-block; }
.roll-a .dice .advantage, .roll-a .dice .disadvantage { font-weight: 700; position: absolute; line-height: 50px; top: 0; }
.roll-a .dice .advantage { right: -25px; color: #20bd41; }
.roll-a .dice .disadvantage { left: -25px; color: #e41919; }

.roll-a .rolls-container {
  color: #888;
  margin: 5px 10px 0;
  min-height: 18px;
}

.breakdown { margin: 0; }

.slot {
  color: #444444;
  font-size: 4.5vw;
  padding: 10px 2.5vw 10px;
  border-bottom: dashed 2px #777777;
}