:root {
  color-scheme: light;
  --cloverdale-blue: #0087c8;
  --cloverdale-olive: #808262;
  --line: #AAAAAA;
  --text: #111111;
  --muted: #808262;
  --background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--background);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

.calculator-intro h2,
.calculator-intro .intro {
  margin: 0;
}

.calculator-intro {
  display: grid;
  gap: 8px;
}


/*
.calculator-shell {
  width: min(100%, 742px);
  padding: 12px 13px 26px;
}
*/

.paint-calculator {
  display: grid;
  gap: 31px;
}


.paint-calculator h2 {
  text-align: left;
font: normal normal bold 30px/34px Lato;
color: #757855 !important;
opacity: 1;
margin-top: 18px;
  padding-top: 0px;
  margin-bottom: 0px;
}
 
.intro {
  color: var(--body-copy-646464);
text-align: left;
font: normal normal normal 14px/24px Source Sans Pro;
letter-spacing: 0px;
color: #646464;
opacity: 1;
}
 

.calculator-section {
  padding: 0;
}

.calculator-section h3 {
  margin: 1px 0 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);

text-align: left;
        font: normal normal bold 20px / 24px Lato;
        letter-spacing: 0px;
        color: #000000;
        opacity: 1;

}

.heading-with-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.help-tooltip {
  position: relative;
  display: inline-flex;
}

.help-button {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #777777;
  border-radius: 50%;
  background: #ffffff;
  color: #555555;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.tooltip-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 2;
  display: grid;
  width: min(260px, 80vw);
  gap: 8px;
  padding: 14px 12px;
  background: #3f3d49;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-transform: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.tooltip-panel em {
  color: #d8d6df;
  font-style: normal;
}

.help-tooltip:hover .tooltip-panel,
.help-tooltip:focus-within .tooltip-panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 78px;
  align-items: center;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;

  color: var(--unnamed-color-757855);
text-align: left;
font: normal normal bold 15px/22px Lato;
letter-spacing: 0px;
color: #757855;
opacity: 1;

}

.radio-option small {
  font-size: inherit;
  font-weight: 400;
  text-transform: none;
}

.radio-option input {
  display: grid;
  width: 18px;
  height: 18px;
  margin: 0;
  place-content: center;
  border: 2px solid #036FAD;
  border-radius: 50%;
  background: #ffffff;
  appearance: none;
}

.radio-option input::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #A8AD7B;
  content: "";
  opacity: 0;
}

.radio-option input:checked::before {
  opacity: 1;
}

.control-grid {
  display: grid;
  gap: 48px;
  align-items: end;
}

.three-column {
  grid-template-columns: repeat(3, 157px);
}

.two-column {
  grid-template-columns: repeat(2, 157px);
}

.stepper-field {
  min-width: 0;
}

.stepper-field label {
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  text-align: left;
font: normal normal bold 15px/22px Lato;
letter-spacing: 0px;
color: #757855;
opacity: 1;
}

.stepper {
  display: grid;
  grid-template-columns: 36px 83px 36px;
  gap: 8px;
  width: 170px;
  align-items: stretch;
}

.stepper input {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 0;
  border-top: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  border-radius: 0;
  padding: 0 8px;

  background: #ffffff;
  appearance: textfield;

  text-align: center;
font: normal normal bold 20px/24px Lato;
letter-spacing: 0px;
color: #000000;
opacity: 1;

}

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

.stepper-button {
  width: 36px;
  height: 36px;
  border: 2px solid #036FAD;
  border-radius: 0;
  background: #ffffff;
  color: #056FAD;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.stepper-button:hover,
.stepper-button:focus-visible {
  background: #eaf6fc;
}

.stepper-button:focus-visible,
.calculate-button:focus-visible,
.radio-option input:focus-visible,
.stepper input:focus-visible {
  outline: 2px solid var(--cloverdale-blue);
  outline-offset: 2px;
}

.calculate-button {
  width: 156px;
  min-height: 50px;
  border: 0;
  border-radius: 0;
 background: #036FAD 0% 0% no-repeat padding-box;

  text-align: center;
font: normal normal bold 20px/22px Source Sans Pro;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;

  cursor: pointer;
}
.calculator-shell {
  margin-bottom: 40px;
}
.calculate-button:hover {
  background: #003b5c;
}

.result-line {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: baseline;
  font-size: 1.38rem;
  font-weight: 700;
  margin-top: 1px;
}

.result-line[hidden] {
  display: none;
}

.result-line strong {
  text-align: left;
font: normal normal bold 30px/34px Lato;
letter-spacing: -0.3px;
color: #000000;
opacity: 1;
}

.validation-message {
  margin: -6px 0 -10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: red;
    line-height: 1.5em;
}

.calculator-divider {
  height: 4px;
  margin: 48px 0 30px;;
  background: #707070;
}

.result-line.is-error {
  display: block;
  color: red;
  font-size: 0.9rem;
  line-height: 1.45;
}

.result-line.is-error > span:not(.result-error) {
  display: none;
}

.paint-calculator > *:first-child {
    margin-bottom: -8px;
}

/***************/

/* iPad / tablet */
@media (min-width: 721px) and (max-width: 1023px) {
  .calculator-shell {
    width: 100%;
    max-width: 742px;
    
  }

  .three-column {
    grid-template-columns: repeat(2, 165px);
  }

  .two-column {
    grid-template-columns: repeat(2, 165px);
  }

  .result-line {
    gap: 22px;
    font-size: 1.28rem;
  }

  
  .paint-calculator > *:first-child {
    margin-bottom: -21px; /* 31px - 10px = 21px reduction */
  }

  .control-grid {
      display: grid;
      gap: 24px;
  }

}

/* Mobile phone */
@media (max-width: 720px) {
    .paint-calculator h2 {
    margin-top: 8px;
  }


  .calculator-shell {
    width: 100%;    
  }

  .paint-calculator {
    gap: 24px;
  }

  .calculator-section h3 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .radio-row {
    gap: 18px;
  }

  .three-column,
  .two-column {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stepper {
    width: 165px;
  }

  .calculate-button {
    width: 156px;
  }

  .result-line {
    display: grid;
    gap: 8px;
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .calculator-divider {
    margin: 30px 0 24px;
  }

  .radio-option span {
    margin-bottom: 0px !important;
  }

  .help-tooltip {
    margin-bottom: 0px !important;
  }
}


/*
@media (max-width: 720px) {
  .calculator-shell {
    padding: 12px 13px 26px;
  }

  .three-column,
  .two-column {
    grid-template-columns: 1fr;
  }

  .stepper {
    width: 157px;
  }

  .result-line {
    display: grid;
    gap: 8px;
    font-size: 1.15rem;
  }
}
*/