@charset "utf-8";

/*** general ***/
	.clearfix { clear:both; }
	.hidden { display:none; }

	.ccalc5 svg { display:block; width:100%; max-width:540px; margin:0 auto; }
	.ccalc5 .group { position:relative; margin-bottom:20px; }
	.ccalc5 .group.error { position:relative; padding-left:40px; margin-top:20px; border:2px solid #dc4646; background:#ededed; }
	.ccalc5 .group.error p { padding:15px; border-left:2px solid #dc4646; }
	.ccalc5 .group.error p:before { content:'\f071'; position:absolute; top:50%; left:8px; display:block; font-family:'FontAwesome'; font-size:28px; color:#dc4646; transform:translateY(-50%); }

	.ccalc5 .col50-wrapper { margin-left:-20px; }
	.ccalc5 .col50-wrapper:after { content:''; display:block; clear:both; }
	.ccalc5 .col50 { float:left; width:50%; padding-left:20px; margin-bottom:15px; box-sizing:border-box; }

	.ccalc5 .col33-wrapper { margin-left:-20px; }
	.ccalc5 .col33-wrapper:after { content:''; display:block; clear:both; }
	.ccalc5 .col33 { float:left; width:33.33%; padding-left:20px; margin-bottom:15px; box-sizing:border-box; }

	.ccalc5 h2 { margin-top:50px; }
	.ccalc5 h3 { display:inline-block; width:100%; margin-top:0; margin-bottom:10px; padding:5px; font-size:17px; line-height:20px; font-weight:500; color:#fff; background-color:#888; box-sizing:border-box; }
	.ccalc5 h4 { font-weight:bold; color:black; margin-top:35px; margin-bottom:15px; }
	.ccalc5 .subtitle { margin-top:0; margin-bottom:10px; font-size:17px; line-height:20px; font-weight:500; padding:5px; color:#666; }

	.ccalc5 input[type="radio"],
	.ccalc5 input[type="checkbox"] { display:none; }

	.ccalc5 label { display:block; width:100%; min-height:40px; padding:5px 10px; font-weight:bold; font-size:15px; line-height:30px; text-align:center; box-sizing:border-box; }
	.ccalc5 label + i { display:block; margin-top:5px; }
	.ccalc5 label input { border:none; }

	.ccalc5 label.lbl-box,
	.ccalc5 label.lbl-btn { border:1px solid #ccc; color:#000; background:#f5f5f5; font-weight:bold; cursor:pointer; }

	.ccalc5 label.lbl-box.active,
	.ccalc5 label.lbl-btn.active { border:1px solid #da0a14; color:#da0a14; }

	.ccalc5 label.lbl-box { padding:3% 0; }

	.ccalc5 label.ctrl-text { display:block; width:100%; line-height:30px; background:none; text-align:left; }
	.ccalc5 label.ctrl-text > input[type="text"] { display:block; width:50%; margin-right:10px; border:1px solid #ccc; text-align:right; }
	.ccalc5 label.ctrl-text.active > input[type="text"] { border:1px solid #da0a14; color:#da0a14; }
	.ccalc5 label.ctrl-text > span { float:left; padding-right:15px; }

	.ccalc5 .ctrl-box-wrapper { margin-left:-10px; }
	.ccalc5 .ctrl-box-wrapper:after { content:''; display:block; clear:both; }
	.ccalc5 .ctrl-box { float:left; display:block; width:50%; padding-left:10px; margin-bottom:10px; box-sizing:border-box; }

	.ccalc5 a.btn-link { padding:5px 15px; background:#da0a14; color:#fff; }

	.ccalc5 .aselect { position:relative; border:1px solid #ccc; }
	.ccalc5 .aselect > div { padding:0 10px; cursor:pointer; background:#f5f5f5; font-weight:700; font-size:15px; line-height:30px; }
	.ccalc5 .aselect > div:after { content:'\f078'; display:block; position:absolute; top:0; right:10px; font-family:'FontAwesome'; font-size:20px; line-height:30px; color:#666; }
	.ccalc5 .aselect > ul { display:none; padding:0; list-style:none; max-height:300px; overflow:auto; }
	.ccalc5 .aselect > ul.in { display:block; position:absolute; width:100%; border:1px solid #ccc; background:#fff; z-index:1; }
	.ccalc5 .aselect > ul li { padding:0 10px; cursor:pointer; font-size:15px; line-height:30px; }
	.ccalc5 .aselect > ul li.active,
	.ccalc5 .aselect > ul li:hover { background:#ededed; }

	.ccalc5 .green-box { padding:15px; background:#4CAF50; font-size:20px; line-height:1.5; color:#fff; }

	.ccalc5 .txt { padding:30px 15px; font-size:17px; line-height:1.5; color:#000; }
	.ccalc5 .txt > p:last-of-type { padding-bottom:0; }

/*** result ***/
	#result-calc5 .tab-nav { position:relative; width:100%; border-bottom:1px solid #666; }
	#result-calc5 .tab-nav:after { content:''; display:block; clear:both; }
	#result-calc5 .tab-nav a { float:left; display:block; width:33.33%; padding-bottom:10px; text-align:center; transition:all 0.7s; }
	#result-calc5 .tab-nav a.active { font-weight:bold; }
	#result-calc5 .tab-nav-marker { position:absolute; bottom:-2px; left:0; width:33.33%; height:3px; background:#666; transition:all 0.7s; -webkit-transition-timing-function:ease; transition-timing-function:ease; }
	#result-calc5 .tab-nav-marker.active-2 { left:33.33%; }
	#result-calc5 .tab-nav-marker.active-3 { left:66.66%; }

	#result-calc5 .tab > div { position:relative; border-bottom:1px solid #ccc; }
	#result-calc5 .tab > div:after { content:""; display:block; clear:both; }
	#result-calc5 .tab > div > .icon-box { position:absolute; top:30%; left:0; width:70px; transform:translateY(-50%); }
	#result-calc5 .tab > div > .icon-box span { font-weight:bold; color:#000; }
	#result-calc5 .tab > div > canvas { margin-left:120px; width:calc(100% - 120px); }

/*** DEV SECTION ***/
	pre.log { position:fixed; top:50%; right:0; max-height:100vh; width:400px; background:#fff; transform:translateY(-50%); overflow:auto; z-index:99; }