/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.proforma form, .proforma .results {
  display: flex;
  flex-wrap: wrap;
}


.proforma form .field, .proforma .results .result {
  flex: 40%;
  margin: 10px;
  padding: 10px;
}

.proforma .results {
  margin-top: 30px;
  padding: 30px;
  border: 3px solid;
}

@media screen and (max-width: 768px) {
  .proforma form .field, .proforma .results .result {
    flex: 100%;
  }
}

.proforma form .field input {
  float: right;
  width: 130px;
  height: 45px;
}

.proforma .field label {
  max-width: calc(100% - 130px);
}

.proforma .buttons {
  margin-top: 40px;
  display: flex;
  width: 100%;
  justify-content: center;
}

.proforma form .buttons input:hover, .proforma .results .clear:hover, .blueButton:hover {
  background-color: #ffffff;
  color: #029ADE !important;
  text-decoration: none;
}

.proforma form .buttons input, .proforma .results .clear, .blueButton {
  background-color: #029ADE;
  border: 1px solid #029ADE;
  color: #FFFFFF !important;
  padding: 10px 30px;
  margin-right: 25px;
  cursor: pointer;
  text-decoration: none;
}


.proforma .buttons a.clear {
  display: none;
  color: #029ADE;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
}

.proforma .results h3 {
  width: 100%;
  padding-left: 20px;
  font-size: 22px;
  margin-top: 35px;
}

.proforma .results .result span {
  float: right;
}

.proforma form input::-webkit-outer-spin-button,
.proforma form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.proforma form input[type=number] {
  -moz-appearance: textfield;
}