a, a:hover, a:active, a:visited {text-decoration:none; color:inherit;}

body {padding:12px; transition:.5s;}
div#container {text-align:center; background-color:#CDD; background-color:#AAA; color:#222; max-width:600px; border-radius:8px; padding:1em;}
@media screen and (max-width:520px) {
	body {padding:4px;}
	div#container {padding:12px; font-size:12px; transition:.5s;}
}

@media screen and (max-width:575px) {
	div#container div.head-row p.formula {margin-top:12px; margin-bottom:0;}
	div#container div.head-row p.formula span.discounter {font-size:.9em;}
	div#container div.head-row p.formula span.discounter:before {content:'/';}
	div#container div.head-row p.formula span.formulaLabel {display:block;}
	div#container div.head-row p.formula span.formulaLabel:before {content:'[';}
	div#container div.head-row p.formula span.formulaLabel:after {content:']';}
}
@media screen and (min-width:576px) {
	div#container div.head-row p.formula {position:relative; margin-bottom:0;}
	div#container div.head-row p.formula.main {margin-bottom:32px;}
	div#container div.head-row p.formula span.bracket {position:relative; width:4px; height:1em; display:inline-block; margin:0 2px;}
	div#container div.head-row p.formula span.bracket span {width:4px; height:3em; border:1px solid black; display:inline-block; position:absolute;}
	div#container div.head-row p.formula span.bracket.bracketOpen {/*left:4px;*/}
	div#container div.head-row p.formula span.bracket.bracketOpen span {border-right:none;}
	div#container div.head-row p.formula span.bracket.bracketClose {/*right:4px;*/}
	div#container div.head-row p.formula span.bracket.bracketClose span {border-left:none;}
	div#container div.head-row p.formula span.cfFigure {position:relative; margin:0 2px;}
	div#container div.head-row p.formula span.discounter {position:absolute; top:21px; left:40%; transform:translateX(-50%); border-top:1px solid black; font-size:.9em; width:90%;}
	div#container div.head-row p.formula span.identifier {display:inline-block; position:relative; top:1.25em}
	div#container div.head-row p.formula span.equals, p.formula span.plus,
	div#container div.head-row p.formula span.cfFigure0 {display:inline-block; position:relative; top:.7em;}
	div#container div.head-row p.formula span.plus span.ellipsis {position:relative; top:-.2em;}
	div#container div.head-row p.formula span.formulaLabel {display:block; /*width:80px;*/ font-size:.9em; margin-top:24px; /*position:absolute; top:2em; transform:translateY(-50%); margin-left:8px;*/}
}

div#container div.head-row h2 {/*margin-bottom:0;*/}
div#container div.head-row img {height:100%; height:34px; position:relative; bottom:4px;}
div#container div.head-row div.inputColHead {font-weight:500; margin-bottom:6px;}
@media screen and (min-width:768px) {
	div#container div.head-row div.inputColHead {font-size:1.15em;}
}

div#container div.container-fluid {border:1px solid #888; border-radius:5px; padding:12px; margin-top:1em; background-color:rgba(30,144,255,.9);}
div#container div.output-row div.container-fluid {margin-top:0;}
div#container div.output-row {display:none; margin-top:12px;}

@media screen and (max-width:575px) { /* mobile(xs) */
	div#container div.input-row > div.col-sm-3:nth-child(1) {padding-right:2px;}
	div#container div.input-row > div.col-sm-3:nth-child(2) {padding-left:2px; padding-right:2px;}
	div#container div.input-row > div.col-sm-3:nth-child(3) {padding-left:2px;}
}
@media screen and (min-width:576px) { /* tablet(sm), desktop(md), large desktop(lg,xl) */
	div#container div.input-row > div.col-sm-3:nth-child(1) {padding-right:2px;}
	div#container div.input-row > div.col-sm-3:nth-child(2),
	div#container div.input-row > div.col-sm-3:nth-child(3) {padding-left:2px; padding-right:2px;}
	div#container div.input-row > div.col-sm-3:nth-child(4) {padding-left:2px;}
	/*div#container div.input-row > div.col-6:nth-of-type(2) {padding-left:2px; padding-right:2px;}*/
}

div#container div.input-row label, div#container div.output-row label {text-align:left; padding:2px 0; margin:2px 0; width:100%; font-weight:500;}
div#container div.input-row div.dcf, div#container div.input-row div.npv, 
div#container div.input-row input {text-align:right; width:100%; border-radius:5px; border:1px solid rgba(0,0,0,0.25); padding:2px 8px; margin:2px; font-weight:600; overflow:auto;}
div#container div.input-row input.percent {background-image:url('percent.png'); background-repeat:no-repeat; background-size:auto 45%; background-position:97% center; padding-right:24px;}
div#container div.input-row input#usePTV {/*position:absolute; bottom:26px;*/ width:auto;}
div#container div.input-row button.delta1 {border-radius:5px; border:1px solid #888; background-color:#eee; padding:2px 0; margin:2px auto; width:45%;}
div#container div.input-row button.calcPTV {border-radius:5px; border:1px solid #888; background-color:#eee; padding:4px; margin:0; width:auto; padding:0 2px; float:right;}
div#container div.input-row button#setYears {width:100%; padding:6px; border-radius:5px; border:1px solid #888; background-color:#eee;}
@media screen and (max-width:575px) {
	div#container div.input-row div.dcf, div#container div.input-row div.npv, 
	div#container div.input-row input {padding:2px 4px;}
	div#container div.input-row input#usePTV {bottom:22px;}
}

div#container div.button-row {margin-top:12px;}
div#container div.button-row > div.col-4:nth-child(1) {padding-right:3px;}
div#container div.button-row > div.col-4:nth-child(2) {padding-left:3px; padding-right:3px;}
div#container div.button-row > div.col-4:nth-child(3) {padding-left:3px;}
div#container div.button-row button {width:100%; padding:6px; border-radius:5px; border:1px solid #888; background-color:#eee; font-weight:bold;}
div#container div.button-row > div:nth-of-type(1) button {background-color:#efefef;}
div#container div.button-row > div:nth-of-type(2) button {background-color:dodgerblue; color:#fff;}
div#container div.button-row > div:nth-of-type(3) button {background-color:#efefef;}

div#container div.output-row div#output {border:1px solid #888; border-radius:5px; padding:12px; margin:16px 0 0; background-color:dodgerblue; text-align:left;}
div#container div.output-row div.result {font-weight:600; text-align:right; width:100%; border-radius:5px; border:1px solid rgba(0,0,0,0.25); padding:4px 12px; margin:2px; font-size:1.5em; text-align:center;}
div#container div.output-row div#parameters {display:none;}