body {padding:12px;}

div#container {text-align:center; background-color:#E6F1FE; color:#222; max-width:600px; border-radius:8px; padding:12px;}

div#container div.inputGroup {background:rgba(0,0,0,0.1); padding:12px; border-radius:5px;}

/*div#container div.row {padding-top:4px; padding-bottom:4px;}*/

div#container div.head-row h2 {text-align:center; margin-bottom:24px;}
div#container div.head-row h2 img {height:34px; position:relative; bottom:3px;}

div#container div.inputGroup div.input-row label {width:100%; text-align:left; padding:4px 8px;}
div#container div.inputGroup div.input-row input {width:100%; border-radius:6px; border:1px solid #888; padding:4px 8px; text-align:right;}

div#container div.inputGroup div.button-row {margin-top:12px;}
div#container div.inputGroup div.button-row > div:nth-of-type(1) {padding-right:4px;}
div#container div.inputGroup div.button-row > div:nth-of-type(2) {padding-left:4px; padding-right:4px;}
div#container div.inputGroup div.button-row > div:nth-of-type(3) {padding-left:4px;}

div#container div.inputGroup div.button-row button {width:100%; border-radius:5px; border:1px solid #888; padding:6px; background-color:#EEE; font-weight:bold;}
div#container div.inputGroup div.button-row > div:nth-of-type(1) button {background-color:#efefef;}
div#container div.inputGroup div.button-row > div:nth-of-type(2) button {background-color:dodgerblue; color:#fff;}
div#container div.inputGroup div.button-row > div:nth-of-type(3) button {background-color:#efefef;}

div#container div.output-row {display:none;}
div#container div.output-row div#output {border-radius:5px; border:1px solid #888; margin-top:12px; padding:18px 36px; background-color:#CCC; background-color:rgba(0,0,0,0.25); transition:.5s;}
div#container div.output-row div#output button.shareBtn {border-radius:5px; border:1px solid #888; background-color:#EEE;}
div#container div.output-row div#output div#textOutput {text-align:left;}
div#container div.output-row div#output div#textOutput .result {font-weight:bold; text-align:right;}
div#container div.output-row div#output div#purchaseBar {background-color:transparent; padding:0; border:0; margin:0; border-radius:8px; overflow:hidden; /*height:1em;*/}
div#container div.output-row div#output div#purchaseBar .innerBar {display:inline-block; padding:0; border:0; margin:0; font-size:0; text-align:center; transition:1.5s; position:relative; height:1em; min-width:0.1%; max-width:99.9%;}
div#container div.output-row div#output div#purchaseBar #loanBar {background-color:#F00; color:#FFF; width:0; /*border-radius:8px 0 0 8px;*/}
div#container div.output-row div#output div#purchaseBar #dpBar {background-color:#0F0; color:#000; width:0; /*border-radius:0 8px 8px 0;*/}
div#container div.output-row div#output div#purchaseBar .innerBar label {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;}

div#popupContainer {display:none; position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index:10;}
div#popupContainer .popupBackground {position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.25); z-index:2;}
div#popupContainer .popupBox {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-color:#000; padding:24px; max-width:100%; width:500px; z-index:3;}
div#popupContainer .popupBox #reportText {width:100%;}
div#popupContainer .popupBox .closeBtn {position:absolute; top:12px; right:12px; color:#888; cursor:pointer; font-size:40px;}

/* Tablet/Mobile (sm,xs) */
@media screen and (max-width:767px) {
	body {padding:6px;}
	div#container div.output-row div#output {padding:12px 24px;}
}