/*
 * CMG brand overrides for the KJE (Dinkytown) calculators.
 *
 * Loaded AFTER Dinkytown's hosted KJE.css (the always-current base stylesheet), so
 * these declarations win. This file intentionally contains ONLY brand-colored
 * declarations (teal #32A4AC / #185154 / #138890, navy #1D272F, and the semantic
 * report green/red colors). All layout, structure and neutral styling comes from the
 * hosted KJE.css, so engine updates no longer require patching a local copy.
 *
 * Dinkytown's hosted KJESiteSpecific.css for this account (981940) is empty, which is
 * why these overrides are kept locally. Regenerated from the previous calculators.css.
 */

body.KJEBody a, body.KJEBody a:hover, body.KJEBody a:visited, body.KJEBody a:active {
  color: #32A4AC;
}
.KJEGuiDefnPopup:focus {
  outline: 2px solid #32A4AC;
}
button.KJEDefinitionIcon:focus,
button.KJECloseButton:focus {
  outline: 2px dashed #1D272F;
}
.KJEInputContainer input.KJEInputModern:focus, .KJEInputContainer select.KJEDropBox:focus, input.KJEMenuInputItem:focus {
  outline: 2px dashed #1D272F;
}
.KJEInputContainer input.KJEInputModern[type='radio']:focus, .KJEInputContainer input.KJEInputModern[type='radio']:active,
.KJEInputContainer input.KJEInputModern[type='checkbox']:focus, .KJEInputContainer input.KJEInputModern[type='checkbox']:active {
  border: 2px solid #32A4AC;
}
input.KJEInput[type='radio']:before {
  color: #32A4AC !important;
}
input.KJEInput[type='radio']:active {
  background-color: #32A4AC !important;
}
.KJEInputContainer input.KJEInputModern[type='radio']:checked:before {
  background:#1D272F;
}
.KJEInputContainer input.KJEInputModern[type='radio']:checked,
#KJEAllContent input[type='radio']:checked {
  color: #32A4AC !important;
  border-color: #32A4AC !important;
  background-color: #32A4AC !important;
}
#KJEAllContent input[type='radio']:focus {
  --tw-ring-color: #32A4AC !important;
}
div.KJEMenuSelectedRow {
  background: #2fa22f;
}
#KJECalculatorTable {
  border-color: #dfe0db;
}
.KJEError, .KJEMissing, span.KJERequired {
  color:#BB3333;
}
.KJEInputContainer input.KJEInputErrorField {
  border-color: #BB3333;
}
div.KJEError {
  color:#BB3333 !important;
}
#KJEGuiDataPoint,
#KJEMenuItems,
div.KJEGuiDefnPopup,
span.KJEGuiErrorPopup,
span.KJERequired:hover span.KJERequiredShowHover {
  border-color: #32A4AC;
}
#KJEGuiDataPoint:before,
#KJEMenuItems:before,
div.KJEGuiDefnPopup:before,
span.KJEGuiErrorPopup:before,
span.KJERequired:hover span.KJERequiredShowHover:before {
  border-color:#32A4AC transparent;
}
button.KJEDefinitionIcon, button.KJECloseButton {
  color:#32A4AC;
  border-color:#32A4AC;
}
button.KJEDefinitionIcon:active,
button.KJEDefinitionIcon:focus,
button.KJEDefinitionIcon:hover,
button.KJECloseButton:active,
button.KJECloseButton:focus,
button.KJECloseButton:hover {
  background-color:#32A4AC;
  outline-color: #1D272F;
}
/* Controls — match button-primary-light + button-size-sm (rounded pill, small font).
   The hosted KJE.css defaults to a 4px radius / 1.2rem font, so the shape and typography
   are part of the CMG design-system override, not just the colors. */
.KJECommandButton, .KJEMoreButton, #KJEAllContent input.KJEMenuButton[type=button] {
  color: #F5F7F2;
  background-color: #185154;
  border-color: #185154;
  border-radius: 9999px;
  border-width: 1px;
  height: 40px;
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  .KJECommandButton, .KJEMoreButton {
    width: 130px;
    border-radius: 9999px;
    font-size: 0.75rem;
  }
}
.KJECommandButton:focus, .KJEMoreButton:focus, #KJEAllContent input.KJEMenuButton[type=button]:focus {
  background-color: #185154;
  outline: 3px solid #6D8C1B;
}
.KJECommandButton:hover, .KJEMoreButton:hover, .KJECommandButton:active, .KJEMoreButton:active, #KJEAllContent input.KJEMenuButton[type=button]:hover, #KJEAllContent input.KJEMenuButton[type=button]:active {
  background-color: #D1E29C;
  border-color: #D1E29C;
  color: #185154;
}
div.KJEDropper:focus, div.KJEGraphDropper:focus {
  outline: 2px solid #32A4AC;
}
.KJEInputContainer .KJEHelp:hover {
  color: #32A4AC;
}
.KJEInputContainer input.KJEInputModern[type='radio']:focus,.KJEInputContainer input.KJEInputModern[type='radio']:active {
  box-shadow:0 0 5px 0px #32A4AC inset;
  outline: 2px dashed #1D272F;
}
.KJEInputContainer input.KJEInputModern[type='checkbox']:focus,.KJEInputContainer input.KJEInputModern[type='checkbox']:active {
  box-shadow:0 0 5px 0px #32A4AC inset;
  outline: 2px dashed #1D272F;
}
div.KJEDropBoxDivModern {
  border-color:#32A4AC;
}
.KJEToggleIcon {
  color: #138890;
}
.KJEIncrementMinus, .KJEIncrementPlus, .KJEIncrementPlus:after, .KJEIncrementMinus:after {
  border-color: #32A4AC;
}
.KJEIncrementMinus:hover, .KJEIncrementPlus:hover {
  background-color: #32A4AC;
  border-color: #32A4AC;
}
input.KJEMenuButton[type=button] {
  color:#F5F7F2;
  background-color:#185154;
  border-color: #185154;
}
button.KJEMenu:active,
button.KJEMenu:focus,
button.KJEMenu:hover,
button.KJEMenu:active,
button.KJEMenu:focus,
button.KJEMenu:hover {
  outline: #1D272F dashed 2px;
}
hr.KJEDivide {
  background: #dfe0db;
}
table.KJEIndexTable th.KJELabel a, #KJEAllContent a {
  color:#32A4AC;
}
table.KJEScheduleTable tr.KJEScheduleHeaderRow:hover, table.KJEReportTable tr.KJEHeaderRow:hover, table.KJECalcTable tr.KJEHeaderRow:hover,
table.KJEScheduleTable tr.KJEScheduleFooterRow:hover, table.KJEReportTable tr.KJEFooterRow:hover, table.KJECalcTable tr.KJEFooterRow:hover,
table.KJEScheduleTable tr.KJEScheduleEvenRow:hover, table.KJEReportTable tr.KJEEvenRow:hover, table.KJECalcTable tr.KJEEvenRow:hover,
table.KJEScheduleTable tr.KJEScheduleOddRow:hover, table.KJEReportTable tr.KJEOddRow:hover, table.KJECalcTable tr.KJEOddRow:hover,
table.KJEScheduleTable  thead.KJEScheduleTHeader tr.KJEScheduleHeaderRow:hover, table.KJEReportTable  thead.KJEReportTHeader tr.KJEHeaderRow:hover {
  background-color: #32A4AC;
}
table.KJEReportTable caption.KJEHeaderRow:hover,
table.KJEScheduleTable caption.KJEHeaderRow:hover,
table.KJEReportTable th.KJEHeading:hover,
table.KJEReportTable td.KJECell:hover,
table.KJEReportTable td.KJECellStrong:hover,
table.KJEReportTable .KJELabel:hover,
table.KJECalcTable th.KJEHeading:hover,
table.KJECalcTable td.KJECell:hover,
table.KJECalcTable td.KJECellStrong:hover,
table.KJECalcTable .KJELabel:hover,
table.KJEScheduleTable th.KJEScheduleHeading:hover,
table.KJEScheduleTable th.KJEScheduleCell:hover,
table.KJEScheduleTable td.KJEScheduleCell:hover,
table.KJEScheduleTable td.KJEScheduleCellStrong:hover {
  background-color: #32A4AC;
}
.KJEInputContainer input[type=range]::-webkit-slider-thumb, .KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
  border: 1px solid #32A4AC;
  background: #32A4AC;
}
.KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
  border: 1px solid #32A4AC;
  background: #32A4AC;
}
.KJEInputContainer input[type=range]::-webkit-slider-runnable-track, .KJEInputContainer input[type=range]:active::-webkit-slider-runnable-track {
  background-image: linear-gradient(
            90deg,
            #32A4AC var(--webkitProgressPercent),
            #BBBBBB var(--webkitProgressPercent)
    );
}
.KJEInputContainer input[type=range]::-moz-range-thumb, .KJEInputContainer input[type=range]:active::-moz-range-thumb {
  border: 1px solid #32A4AC;
  background: #32A4AC;
}
.KJEInputContainer input[type=range]:active::-moz-range-thumb {
  border: 1px solid #32A4AC;
  background: #32A4AC;
}
input[type="range"]::-moz-range-progress {
  background-color: #32A4AC;
}
.KJEInputContainer input[type=range]::-ms-thumb, .KJEInputContainer input[type=range]:active::-ms-thumb {
  border: 1px solid #32A4AC;
  background: #32A4AC;
}
.KJEInputContainer input[type=range]:active::-ms-thumb {
  border: 1px solid #32A4AC;
  background: #32A4AC;
}
.KJEInputContainer input[type=range]::-ms-fill-lower, .KJEInputContainer input[type=range]:active::-ms-fill-lower, .KJEInputContainer input[type=range]::-ms-fill-upper, .KJEInputContainer input[type=range]:active::-ms-fill-upper {
  background: #32A4AC;
}