#calcForm {
    margin-top: 18px;
}

::-webkit-input-placeholder {
    text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
    text-align: center;
}

::-moz-placeholder { /* Firefox 19+ */
    text-align: center;
}

:-ms-input-placeholder {
    text-align: center;
}

#calcForm .panel-body {
    padding-top: 0;
}

.row {
    padding-bottom: 10px;
}

div.notvalid {
    position: static;
    display: block !important;
}

#bmiClassifications div {
    padding-left: 4px;
    padding-right: 4px;
}

.bmiClassification {
    text-align: center;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    font-weight: bold;
    border-radius: 4px;
    padding: 4px;

    background: #004fb6;
    border: 1px solid #004fb6;

}

.bmiClassification[selected='selected'] {
    text-align: center;
    color: #004fb6;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    font-weight: bold;
    border-radius: 4px;
    padding: 4px;

    background: #ffd900;
    border-color: #ffd900;
}

#resultsPanel {
    padding: 20px;
    margin-bottom: 20px;
}

#resultsPanel h3 {
    padding-bottom: 10px;
}

#resultsPanel p {
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
}

#calcResults h3 {
    text-align: center;
    font-weight: bold;
}

#whatsIsBmiDialog .modal-body {
    font-size: 18px;
    color: #444444;
    margin-left: 25px;
    margin-right: 25px;
}

#whatsIsBmiDialog li {
    padding: 5px;
}

.switchContainer {
    margin-top: 10px;
    margin-bottom: 10px;
}

form {
    padding-bottom: 10px;
}

#unitType {
    text-align: center;
    margin-top: 10px;
}

/* =========================================
   ACCESSIBLE RADIO GROUP (BMI)
   ========================================= */

/* 0) Prevent stray focus halos on container elements */
#bmiForm *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 1) Fieldset spacing so radios sit away from the grey panel edge */
#bmiForm #unitTypeFieldset.bmi-units {
    padding-top: 14px !important; /* adjust 12–18px if you want it a touch lower/higher */
    overflow: visible !important;
}

/* 2) Radio option row: inline, aligned, no baseline drift */
#bmiForm #unitTypeFieldset.bmi-units .radio-option {
    display: inline-flex !important;
    align-items: center !important; /* keep label + circle on same line */
    line-height: 1 !important;      /* critical: neutralize inherited big line-height */
    margin-right: 26px !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    cursor: pointer !important;
}

/* 3) Radio input reset + tiny cross‑browser baseline nudge */
#bmiForm #unitTypeFieldset.bmi-units input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;

    /* remove theme offsets */
    margin: 0 6px 0 0 !important;
    padding: 0 !important;

    /* small visual nudge upward to match text baseline exactly */
    position: relative !important;
    top: -2px !important; /* <-- If still 1px low/high, tweak to -1px or -3px */

    vertical-align: middle !important;
    line-height: 1 !important;

    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4) Label next to radio: remove extra spacing & inherited tall line-height */
#bmiForm #unitTypeFieldset.bmi-units .radio-option label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* 5) Correct, visible keyboard focus on the option wrapper */
/* Larger + thinner focus rectangle around BMI radio buttons */
#bmiForm #unitTypeFieldset.bmi-units .radio-option:focus-within {
    outline: 1px solid #004fb6 !important;   /* thinner line */
    outline-offset: 4px !important;          /* pushes rectangle outward */
    border-radius: 8px !important;           /* slight rounding */
    padding: 4px !important;                 /* expands hit-area → bigger rectangle */
}

/* 6) Optional: small focus ring on the radio itself */
#bmiForm #unitTypeFieldset.bmi-units input[type="radio"]:focus,
#bmiForm #unitTypeFieldset.bmi-units input[type="radio"]:focus-visible {
    outline: 2px solid #004fb6 !important;
    outline-offset: 2px !important;
    border-radius: 50% !important;
}

/* =========================================
   Screen‑reader only utility
   ========================================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Remove the sprite image and left padding from the label so it doesn’t
   draw a second “fake radio” next to the text. Keep this scoped to BMI. */
#bmiForm #unitTypeFieldset.bmi-units label.radioButtonLabel {
    background-image: none !important; /* kill sprite */
    background-repeat: initial !important;
    background-position: initial !important;
    padding-left: 0 !important;        /* remove sprite spacing gap */
}

/* If the theme hides the input by forcing a radio class (not used here),
   this guarantees the native radios remain visible in BMI. */
#bmiForm #unitTypeFieldset.bmi-units input[type="radio"].radioButton {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    clip: auto !important;
    height: auto !important;
    width: auto !important;
    margin: 0 6px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
}

/* Optional: if the theme changes the label when “checked” using sprite frames,
   keep the text position stable in BMI by neutralizing that shift too. */
#bmiForm #unitTypeFieldset.bmi-units input[type="radio"].radioButton:checked + label.radioButtonLabel {
    background-position: initial !important;
}