/*
// CSS Classes  below can be populated and changed to modify your calculator deployment.
// IMPORTANT: Do Not Modify the KJE.css file!  The KJE.css file is replaced during the update process
// All CSS customization must be done in this file (you can override KJE.css classes)
//
// For information on customizing this file please see:
// https://www.dinkytown.net/money/V3customize.html
*/

#KJEAllContent {
    font-family: "Poppins", sans-serif;
}

#KJECalculatorTable {
}

#KJETitle {
background-image: url('/icon1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}

.KJECommandButton, .KJEMoreButton {
}

/**CUSTOMCSS**/

.KJECommandButton{
  background: #053c39;
  color: white;
  padding:10px 20px;
  border-radius: 10px;
  font-size: 18px;
}

.KJECommandButton:hover{
  color: #053c39;
  border: 1px solid #053c39;
  background: white;
} 

/*Change the color of the definition/help "?" button */
button.KJEDefinitionIcon:active,
button.KJEDefinitionIcon:focus,
button.KJEDefinitionIcon:hover,
button.KJECloseButton:active,
button.KJECloseButton:focus,
button.KJECloseButton:hover {
color:#053c39;
background:#fff;
}

button.KJEDefinitionIcon {
color:#fff;
background:#053c39;
}

button.KJECloseButton {
color:#fff;
background:#053c39;
}

/* Colors for Slider Thumb - Changes in three places: */

/* Web-Kit Browsers*/
.KJEInputContainer input[type=range]::-webkit-slider-thumb {
border-bottom: 12px solid #053c39;
-webkit-box-shadow: 0 2px #053c39;
}
.KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
border-bottom: 12px solid #053c39;
-webkit-box-shadow: 0 2px #053c39;
box-shadow: 0 2px #053c39;
}

/* Modzilla Browsers*/
.KJEInputContainer input[type=range]::-moz-range-thumb {
border-bottom: 12px solid #053c39;
-moz-box-shadow: 0 2px #053c39;
box-shadow: 0 2px #053c39;
}

.KJEInputContainer input[type=range]:active::-moz-range-thumb {
border-bottom: 12px solid #053c39;
-moz-box-shadow: 0 2px #053c39;
box-shadow: 0 2px #053c39;
}

/* Microsoft Browsers*/
.KJEInputContainer input[type=range]::-ms-thumb {
border-bottom: 12px solid #053c39;
box-shadow: 0 2px 0 #053c39;
}

.KJEInputContainer input[type=range]:active::-ms-thumb {
border-bottom: 12px solid #053c39;
-webkit-box-shadow: 0 2px #053c39;
box-shadow: 0 2px #053c39;
}

.KJEInputContainer .KJEArrow {
border-bottom: 12px solid #053c39;
box-shadow: 0 2px 0 #053c39;
-webkit-box-shadow: 0 2px #053c39;
-moz-box-shadow: 0 2px #053c39;
}

.KJEInputContainer .KJEArrow.active {
border-bottom: 12px solid #053c39;
}

#KJEAllContent, body.KJEBody {
    font-family: "Poppins", sans-serif;
}

body.KJEBody table,  body.KJEBody td, body.KJEBody ul, body.KJEBody ol, body.KJEBody dd, body.KJEBody dl, body.KJEBody p, body.KJEBody br, body.KJEBody dt,
body.KJEBody, #KJEAllContent table, #KJEAllContent td, #KJEAllContent ul, #KJEAllContent ol, #KJEAllContent dd, #KJEAllContent dl, #KJEAllContent p, #KJEAllContent br, #KJEAllContent dt,
#KJEAllContent th, body.KJEBody th,
.KJEInputContainer input.KJEInputModern, .KJEInputContainer select.KJEDropBoxModern {
    font-family: "Poppins", sans-serif;
}

.KJECommandButton, .KJEMoreButton, #KJEAllContent input.KJEMenuButton[type=button] {
    font-family: "Poppins", sans-serif;
}

.KJEInputContainer .KJEHelp:hover{
    color:#053c39;
}

table.KJEReportTable tr.KJEEvenRow:hover{
    background-color: #b5e48c;
    color: #053c39;
}

table.KJEReportTable tr.KJEOddRow:hover{
    background-color: #b5e48c;
    color: #053c39;
}

table.KJEReportTable .KJELabel:hover{
    background-color: #053c39;
    color: white;
}

table.KJEReportTable tr.KJEFooterRow:hover{
    background-color: #053c39;
    color: white;
}

table.KJEReportTable td.KJECell:hover{
    background-color: #053c39;
    color: #fff;
}   

table.KJEReportTable caption.KJEHeaderRow:hover{
    background-color: #053c39;
    color: white;
}

table.KJEScheduleTable tr.KJEScheduleHeaderRow:hover{
    background-color: #053c39;
    color: white;
}   

.KJEInputContainer input.KJEInputModern[type='radio']:focus, .KJEInputContainer input.KJEInputModern[type='radio']:active,
.KJEInputContainer input.KJEInputModern[type='checkbox']:focus, .KJEInputContainer input.KJEInputModern[type='checkbox']:active {
    outline-offset: 0px;
    box-shadow: none;
    outline: none;
    border: 2px solid #053c39;
}

#KJEGuiDataPoint,
#KJEMenuItems,
div.KJEGuiDefnPopup,
span.KJEGuiErrorPopup,
span.KJERequired:hover span.KJERequiredShowHover {
    color:#222222;
    background-color:#FFFFFF;
    border-color: #053c39;
}

#KJEGuiDataPoint:before,
#KJEMenuItems:before,
div.KJEGuiDefnPopup:before,
span.KJEGuiErrorPopup:before,
span.KJERequired:hover span.KJERequiredShowHover:before {
    border-color:#053c39 transparent;
}

button.KJEDefinitionIcon, button.KJECloseButton {
    color:#053c39;
    border-color:#053c39;
    background-color: #FFFFFF/*PAGE_BACKGROUND_COLOR*/;
}

button.KJEDefinitionIcon:active,
button.KJEDefinitionIcon:focus,
button.KJEDefinitionIcon:hover,
button.KJECloseButton:active,
button.KJECloseButton:focus,
button.KJECloseButton:hover {
    color:#FFFFFF;
    background-color:#053c39;
    outline-color: #444444/*KJECommandButton*/;
}

.KJEInputContainer .KJEHelp:hover {
    color: #053c39;
}

.KJEIncrementMinus, .KJEIncrementPlus, .KJEIncrementPlus:after, .KJEIncrementMinus:after  {
    border-color: #053c39;
    color: #FFFFFF;
}

.KJEIncrementMinus:hover, .KJEIncrementPlus:hover {
    background-color: #0000D4;
    border-color: #0000D4;
}

table.KJEIndexTable th.KJELabel a, #KJEAllContent a {
    color:#0000D4;
}

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
{
    color: #FFFFFF;
    background-color: #053c39;
}

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
{
    color: #FFFFFF;
    background-color: #053c39;
}

.KJEInputContainer input[type=range]::-webkit-slider-thumb, .KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #053c39;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    background: #053c39;
    cursor: pointer;
    box-shadow: none;
    margin-top: -5px; /* You need to specify a margin in Chrome */
}

.KJEInputContainer input[type=range]::-moz-range-thumb, .KJEInputContainer input[type=range]:active::-moz-range-thumb {
    -webkit-appearance: none;
    border: 1px solid #053c39;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: #053c39;
    cursor: pointer;
    box-shadow: none;
    -mox-box-shadow: none;
}

.KJEInputContainer input[type=range]::-ms-thumb, .KJEInputContainer input[type=range]:active::-ms-thumb  {
    -webkit-appearance: none;
    margin-top: 0;
    box-shadow: none;
    cursor: pointer;
    border: 1px solid #053c39;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: #053c39;
}

body.KJEBody a, body.KJEBody a:hover, body.KJEBody a:visited, body.KJEBody a:active {
    color: #053c39;
}

.KJEGuiDefnPopup:focus {
    outline: 2px solid #b5e48c;
}

div.KJEDropper:focus, div.KJEGraphDropper:focus {
    outline: 2px solid #b5e48c;
}

.KJEInputContainer input.KJEInputModern[type='radio']:focus,.KJEInputContainer input.KJEInputModern[type='radio']:active {
    box-shadow:0 0 5px 0px #b5e48c inset;
    outline: 2px dashed #444444/*KJECommandButton*/;
}

.KJEInputContainer input.KJEInputModern[type='checkbox']:focus,.KJEInputContainer input.KJEInputModern[type='checkbox']:active {
    box-shadow:0 0 5px 0px #b5e48c inset;
    outline: 2px dashed #444444/*KJECommandButton*/;
}

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 {
    color: #053c39;
    background-color: #b5e48c;
}

.KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
    border: 1px solid #b5e48c;
    background: #b5e48c;
    box-shadow: none;
}

.KJEInputContainer input[type=range]::-webkit-slider-runnable-track, .KJEInputContainer input[type=range]:active::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    box-shadow: none;
    background: #BBBBBB;
    border-radius: 0;
    border: none;
    margin-top: -6px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    background-image: linear-gradient(
            90deg,
            #b5e48c var(--webkitProgressPercent),
            #BBBBBB var(--webkitProgressPercent)
    );
}

.KJEInputContainer input[type=range]:active::-moz-range-thumb {
    border: 1px solid #b5e48c;
    background: #b5e48c;
}
input[type="range"]::-moz-range-progress {
    background-color: #b5e48c;
}

.KJEInputContainer input[type=range]:active::-ms-thumb {
    border: 1px solid #b5e48c;
    background: #b5e48c;
}

.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: #b5e48c;
    border: none;
    border-radius: 0;
    box-shadow: none;
}