#map {
  height: 320px;
}
label.calc-type {
  display: block;
}
label.calc-type input {
  display: none;
}
label.calc-type input + span.calc-type-label {
  display: block;
  padding: 18px 20px;
  border-radius: 4px;
  border: 1px solid #c4c4c4;
  background-color: #fbfaf5;
  text-align: center;
  cursor: pointer;
  color: #444;
  margin: 0;
  font-size: 1.6rem;
}
label.calc-type input + span.calc-type-label:hover {
  background-color: #fff;
  border-color: #000;
  color: #000;
}
label.calc-type input:checked + span.calc-type-label {
  background-color: #fff;
  color: #000;
  border-color: #83caeb;
}
.calc-result {
  font-size: 2rem;
  width: 100%;
}


.calc-result td,
.calc-result th {
  text-align: left;
  padding: 15px;
  border: 1px solid #aaa;
}
.calc-result th {
  font-size: 1.6rem;
  color: #444;
}
.calc-result tbody td,
.calc input[type="number"].txt {
  background-color: #FFF2C4;
  background-image: -webkit-linear-gradient(left, #FFF2C4, #F7E3A0);
  background-image: -o-linear-gradient(left, #FFF2C4, #F7E3A0);
  background-image: linear-gradient(to right, #FFF2C4, #F7E3A0);
  font-weight: bold;
}
.calc-result tfoot td {
  padding: 15px;
  background-color: #fafafa;
  border-top: 1px solid #000;
}

@media screen and (max-width: 35em) {
  .calc-result tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .calc-result tbody td {
    box-sizing: border-box;
    width: 50%;
  }
}