body {
  background-color: #e8e8e8;
  padding-top: 8px;
  padding-bottom: 32px;
}
.sublabel {
  font-weight: initial;
  font-size: 80%;
  color: #888;
}
/* outrageously ugly arrows in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
a {
  text-decoration: none;
}
.hilight {
  color: #C10031;
}
.pager {
  font-size: 150%;
  padding-bottom: 8px;
  text-align: center;
}
.pager .arrow {
  width: 64px;
  display: inline-block;
  text-align: center;
}
.grenade {
  font-size: 140%;
  font-weight: bold;
}
.big {
  font-size: 125%;
}
.bold {
  font-weight: bold;
}
.green {
  color: #3a3;
}
.orange {
  color: #d90;
}
.red {
  color: #a33;
}
.help {
  padding-top: 64px;
  text-align: center;
}
.login-container {
  max-width: 512px;
  margin: 64px auto 0 auto;
}
.ppoint {
  background-color: #fff;
  box-shadow: 0px 0px 8px 0px #888;
  border-radius: 4px;
  margin-bottom: 32px;
}
.ppoint .main {
  display: flex;
}
.ppoint .main .image {
  flex: 0 0 96px;
  height: 96px;
  background-image: url("../img/meter-empty.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
.ppoint .main .image.full {
  background-image: url("../img/meter-full.png");
}
.ppoint .main .image.full-p1 {
  background-image: url("../img/meter-full-p1.png");
}
.ppoint .main .image.full-p2 {
  background-image: url("../img/meter-full-p2.png");
}
.ppoint .main .image .sn {
  width: 100%;
  position: absolute;
  bottom: 0px;
  text-shadow: 0px 0px 4px #fff, 0px 0px 4px #fff, 0px 0px 4px #fff;
  font-weight: bold;
  text-align: center;
}
.ppoint .main .image .sn.smaller {
  font-size: 90%;
}
.ppoint .main .info {
  flex-grow: 1;
  padding: 8px;
}
.ppoint .main .info > * {
  padding-left: 8px;
  padding-right: 8px;
}
.ppoint .main .info .addr {
  border: 1px dashed #ddd;
  border-radius: 4px;
  background: url("../img/map.png");
}
.ppoint .main .info .problems * {
  color: #d00;
}
.ppoint .actions {
  display: flex;
  border-top: 1px solid #ddd;
  border-radius: 0px 0px 4px 4px;
  text-transform: uppercase;
  padding: 4px 0px;
}
.ppoint .actions .action {
  text-align: center;
}
.ppoint .actions .action.install a {
  color: #080;
}
.ppoint .actions .action.install a:hover {
  color: #0d0;
}
.ppoint .actions .action.modify a {
  color: #840;
}
.ppoint .actions .action.modify a:hover {
  color: #d60;
}
.ppoint .actions .action.remove a {
  color: #800;
}
.ppoint .actions .action.remove a:hover {
  color: #d00;
}
.ppoint .actions .action.report a {
  color: #088;
}
.ppoint .actions .action.report a:hover {
  color: #0dd;
}
.ppoint .one.actions .action {
  width: 100%;
}
.ppoint .two.actions .action {
  width: 50%;
}
.ppoint .three.actions .action {
  width: 33.333%;
}
.sidebyside {
  display: flex;
  flex-wrap: wrap;
}

.sidebyside > * {
  flex-grow: 1.0;
  white-space: nowrap;
}


.spinner {
  height: 48px;
  background-image: url("../img/spinner.gif");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* :-) */
.troll {
  background-image: url("../img/tf.png");
  display: inline-block;
  width: 39px;
  height: 32px;
  background-size: cover;
  position: absolute;
}
.gsmtest {
  border: 1px dashed #ddd;
  border-radius: 4px;
  background: url("../img/gsm.png");
}
.gsmtest .h {
  border-bottom: 1px solid #ddd;
  font-size: 80%;
}
.button-secondary {
  border-color: #c10031 !important;
  color: #c10031 !important;
}
#grenade_input_switch {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, height 0.5s;
  height: 2px;
}
#grenade_input_switch.visible {
  opacity: 100;
  pointer-events: auto;
  height: 125px;
}
button[disabled] {
  border: none;
  text-decoration: line-through;
}
.hidden {
  display: none;
}