/** Rate Calculator Front End Styles **/

.rate-cal-widget-wrapper {
  position: relative;
  opacity: 1;
  transition: opacity .2s ease-in-out;
  color: var(--color-primary);
}
.rate-cal-widget-wrapper .button {
  color: var(--color-button-text);
  background-color: var(--color-button-background);
}
.rate-cal-widget-wrapper.processing {
  opacity: .5;
}
.rate-cal-form-wrapper .messages {
  margin: 1rem;
  padding: 1rem;
}

.rate-cal-form-wrapper .message .message {
  margin-bottom: 1rem;
  padding: 1rem;
}

.rate-cal-widget-wrapper .results-wrapper {
  padding: 1rem;
  box-sizing: border-box;
}
.rate-cal-widget-wrapper .results-wrapper .results-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
  border-bottom: 1px solid;
}
.rate-cal-widget-wrapper .results-wrapper .result-total {
  margin-bottom: 1rem;
  border-bottom-width: 0;
}
.rate-cal-widget-wrapper .results-wrapper .result-row.header {

}
.rate-cal-form-wrapper .field {
  display: flex;
  flex-direction: row;
}
.rate-cal-form-wrapper .field .prefix {
  flex-basis: 20px;
}
.rate-cal-form-wrapper .field .suffix {
  flex-basis: 20px;
}
.rate-cal-form-wrapper input {
  margin-bottom: 0;
}
.rate-cal-form-wrapper .field-wrapper {
  margin-bottom: 1rem;
}
.rate-cal-form-wrapper .label {
  text-transform: uppercase;
}
.rate-cal-form-wrapper .field-description {
  font-size: 0.8rem;
}
@media screen and ( min-width: 868px ) {
  .rate-cal-form-wrapper .field-wrapper {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
      "message message"
      "label field"
      "label description"
}
  .rate-cal-form-wrapper .field-wrapper .field-error-message {
    grid-area: message;
  }
  .rate-cal-form-wrapper .field-wrapper .label {
    grid-area: label;
  }
  .rate-cal-form-wrapper .field-wrapper .field {
    grid-area: field;
  }
  .rate-cal-form-wrapper .field--submit--wrapper {}
}
.button.close-results {
  display: none;
}
.results-modal.open {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.results-modal.open .results-shade {
  position: fixed;
  top: 0;
  background: rgba(0,0,0,.5);
  z-index: -1;
  left: 0;
  width: 100%;
  height: 100%;
}
.results-modal .button.close-results {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
}
.results-modal .results {
  background-color: var(--color-secondary);
  padding: 1rem;
}
.rate-cal-email-modal {
  display: none;
}
.rate-cal-email-modal.open {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
}
.results-modal .rate-cal-email-modal.open {
}
.rate-cal-email-modal .rate-cal-header {
  display: flex;
  justify-content: flex-end;
}
.rate-cal-email-modal .modal-content {
  padding: 1rem;
}