/* CALCULATOR - HANCOCKSELFSTORAGE.COM */

form[name="comp"] {max-width: 620px; font-size: .88em; margin: 0 auto; text-align: center; border: 1px solid #ccc; border-radius: 4px; line-height: 1;}
form[name="comp"] fieldset {display: flex; flex-wrap: wrap; gap: 1rem; text-align: center; max-width: 650px;
  margin: 1em auto; padding-top: 1em; background-color: rgba(255,255,255,.3); border: none;}
form[name="comp"] fieldset:first-of-type {margin-top: 0;}
form[name="comp"] fieldset legend {font-size: 1.25em; background-color: #d4ebdb; padding: 0.5em 1em; border-radius: 4px; font-weight: bold; width: 100%;}

/* Default: 3 per row */
form[name="comp"] .form-group {flex: 1 1 calc((100% - 2rem) / 3); min-width: 0;}
@media (max-width: 767px) and (min-width: 501px) {form[name="comp"] .form-group {flex: 1 1 calc((100% - 1rem) / 2);}}
@media (max-width: 500px) {form[name="comp"] .form-group {flex: 1 1 100%;}}

form[name="comp"] input[type="number"] {
width: 7ch; /* ~3 digits + spinner arrows */
max-width: 100%; /* never overflow container */
padding: 0.25em 0.5em 0.25em .25em; /* for touch targets */
text-align: right; margin: 0 auto;}

/* Stack and left-align labels, inputs and help text */
.form-group {margin-bottom: .25em; padding-bottom: .5em; border-bottom: 1px solid #E2E2E2;}
.form-group label, .form-group input, .form-group small {display: block; text-align: center; width: 100%;}
.form-group label { text-align: center; margin-bottom: 4px; }

.form-actions {margin-top: 1.5em;}
.form-actions button {margin: 0 1em; text-align: center;}

section[aria-labelledby] table, section[aria-labelledby] th, section[aria-labelledby] td {text-align: center;}

.frm-btn {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 4px; font-size: 1rem; line-height: 1.2; text-align: center; display: inline-block; cursor: pointer; transition: background-color 0.2s ease-in-out;}
.btn-calc {background-color: #114334; color: #fff; padding: 0.75em 1.5em;}
.btn-clr {background-color: #e8e8e8; color:#333; padding: .5em 1em;}

.btn-calc:hover, .btn-calc:focus {background-color: #0e392d; outline: none;}
.btn-clr:hover, .btn-clr:focus {background-color: #0e392d; color: #fff; outline: none;}

#ans {border: none; background-color: transparent; font-size: 1.375em; font-weight: bold; padding: 10px; max-width: 90px; margin: 0 auto;}
/* only show border when this class is present */
#ans.show-border {border: 1px solid #f63; background-color: #ff6;}