.inputsContainer, .outputsContainer {
    margin: 20px auto; max-width: 800px; padding: 20px;
    background-color: #00000006; box-shadow: 5px 5px 5px #00000016; border-radius: 5px;
}
.inputsContainer>.row, .outputsContainer>.row { margin: 10px; }
.inputsContainer label { display: block; text-align: right; padding: 7px; margin: 5px; }
.inputsContainer input[type=text], .inputsContainer select {
    width: 100%; padding: 7px; margin: 5px;
    background-color: #FFFA; border: 1px solid #DDD; box-shadow: 3px 3px 3px #00000016;
}

.inputPair { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }
.outputPair { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; }

#app.calculator .note { text-align: right; margin-top: -5px !important; margin-bottom: 25px !important; }
.noteLink:before { content: "\025B8"; }
.noteLink { text-decoration: none; }
.noteLink:visited { color: #0a58ca; }
button.noteLink { border: none; background: none; padding: none; margin: none; color: #0a58ca; text-align: right; }

.outputsContainer label { display: block; text-align: right; margin: 5px; }
.outputsContainer .value { display: block; text-align: left; margin: 5px; }

.featuredResults { margin: 10px auto; padding: 10px; max-width: 500px; background-color: #FFFC; }

.scenario { margin: 15px 0px; padding: 15px; background-color: #0001; border: 1px solid #0004; border-radius: 5px; }

.benefitStreamContainer { display: block; max-height: 200px; overflow-y: scroll; border: 1px solid #AAA; }
.benefitStream { width: 100%; }
.benefitStream { border-spacing: 5px; border-collapse: separate; }
.benefitStream td, .benefitStream th { padding: 5px; background-color: #EEE; }

.validationText { width: 100%; padding: 7px; margin: 5px; margin-top: -5px; background-color: #FeeA; border: 0px solid #A22; color: #A22; text-align: left; }

.hide { display: none; }

@media (max-width: 992px) {
    .inputPair { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; }
    .inputPair label { text-align: left; margin-bottom: 0px; margin-top: 15px; }
    
    .outputPair { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; }
    .outputPair label { text-align: left; margin-bottom: 0px; margin-top: 15px; }

    .inputsContainer { padding-left: 0px; padding-right: 0px; }
    .outputsContainer, .outputsContainer>div>.container { padding-left: 0px; padding-right: 0px; }
}

@media print {
    body { margin: 0px; width: 800px; }
    .inputsContainer, .outputsContainer { margin: 20px auto; max-width: 100%; padding: 20px 0px; background-color: transparent; box-shadow: none; border: none; }
    .inputsContainer input[type=text], .inputsContainer select { background-color: transparent; border: 1px solid #000; box-shadow: none; }
    .featuredResults { background-color: transparent; border: 3px double #000; }
    .scenario { margin: 15px 0px; padding: 15px 5px; background-color: transparent; border: 2px solid #000; border-radius: 5px; }

    .benefitStreamContainer { display: block; max-height: none; overflow-y: visible; border: 1px solid #000; max-width: 500px; margin: auto; }
    .benefitStream { border-spacing: 0px; border-collapse: separate; }
    .benefitStream td, .benefitStream th { padding: 0px; background-color: transparent; }

    .validationText { font-weight: bold;  color: black; background-color: transparent; border: none; }

    #app.calculator .btn { display: none; }
}