.slider > .dragger {
  background: #8DCA09;
  background: -webkit-linear-gradient(top, #0097db, #0E76BD);
  background: -moz-linear-gradient(top, #0097db, #0E76BD);
  background: linear-gradient(top, #0097db, #0E76BD);

  -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  border: 1px solid #0E76BD;
  width: 16px;
  height: 16px;
}

.slider > .dragger:hover {
  background: -webkit-linear-gradient(top, #0097db, #0097db);
}


.slider > .track, .slider > .highlight-track {
  background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 1px solid #aaa;
  height: 4px;
}

.slider > .highlight-track {
	background-color: #8DCA09;
	background: -webkit-linear-gradient(top, #8DCA09, #72A307);
	background: -moz-linear-gradient(top, #8DCA09, #72A307);
	background: linear-gradient(top, #8DCA09, #72A307);
	
	border-color: #496805;
}

.slider-volume {
  width: 300px;
}

.slider-volume > .dragger {
	width: 16px;
	height: 16px;
	margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.6);

  -moz-box-shadow: 0 0px 2px 1px rgba(0,0,0,0.5), 0 2px 5px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0px 2px 1px rgba(0,0,0,0.5), 0 2px 5px 2px rgba(0,0,0,0.2);
  box-shadow: 0 0px 2px 1px rgba(0,0,0,0.5), 0 2px 5px 2px rgba(0,0,0,0.2);

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

  background: #c5c5c5;
  background: -moz-linear-gradient(90deg, rgba(180,180,180,1) 20%, rgba(230,230,230,1) 50%, rgba(180,180,180,1) 80%);
	background:	-webkit-radial-gradient(  50%   0%,  12% 50%, hsla(0,0%,100%,1) 0%, hsla(0,0%,100%,0) 100%),
  	          -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
              -webkit-radial-gradient(	50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}

.slider-volume > .track, .slider-volume > .highlight-track {
  height: 11px;

  background: #787878;
  background: -moz-linear-gradient(top, #787878, #a2a2a2);
  background: -webkit-linear-gradient(top, #787878, #a2a2a2);
  background: linear-gradient(top, #787878, #a2a2a2);

  -moz-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.slider-volume > .highlight-track {
  background-color: #c5c5c5;
  background: -moz-linear-gradient(top, #c5c5c5, #a2a2a2);
  background: -webkit-linear-gradient(top, #c5c5c5, #a2a2a2);
  background: linear-gradient(top, #c5c5c5, #a2a2a2);
}
.calculator_box{font-size:14px;}
.calculator_box label {font-size:14px; font-weight:normal;}
.calculator_left,.calculator_right{padding:20px 20px 20px 30px; background:#ffffff; float:left;width:100%; min-height:360px;}
.calculator_left h3,.calculator_right h3{text-align:center; padding:10px 0px;width:100%;color:#0097db;}
#state{background: #f0f0f0;padding: 3px 12px;min-width:80px; border: none; margin-right:-6px;}
.row_details{padding-bottom:12px; float:left; width:100%; min-height:60px;}
#state_out{text-align:right;}
#slider1_out .output{background: #f0f0f0;float: right;margin: -23px -90px 0 0;padding: 3px 12px;min-width:80px;}
#slider2_out .output{background: #f0f0f0;float: right;margin: -23px -90px 0 0;padding: 3px 12px;min-width:80px;}
.row_recommendation{padding-bottom:12px; float:left; width:100%; min-height:44px;}
.row_recommendation_right input{ background: #ffffff;border: 0px solid #ffffff;border-radius: 0;font-size: 14px;height: 26px;padding: 4px 6px; text-align:left; width:100%;}
.row_recommendation_right input.blue_box{background: #0097db; color:#ffffff;}
.row_calculator_graphs{margin-top:30px; padding:20px;background:#ffffff; float:left; width:100%;}
.row_calculator_graphs h3{text-align:center; padding:10px 0px;width:100%;color:#0097db;}
.chart {width: 100%; height:100%;}
.graph_column_center{border-left:1px solid #cccccc;border-right:1px solid #cccccc;}
.graph_copy{min-height:100px;}
.row_graph{padding-bottom:10px; float:left; width:100%; min-height:34px;}
.row_graph_left input.blue_box{background: #0097db; color:#ffffff;border: 0px solid #ffffff;border-radius: 0;font-size: 14px;height: 26px;padding: 4px 6px; text-align:left; width:100%;}
#chart_div1,#chart_div2,#chart_div3{float:left;}
.row_calculator_disclaimer{font-size:12px; padding:10px 0px;}
@media (min-width: 767px) and (max-width: 979px) {
.slider > .track {width:90% !important;}
#slider1_out .output,#slider2_out .output{background: #f0f0f0;float: right;margin: -23px -30px 0 0;min-width:80px;}
}

@media (max-width: 767px) {
#slider1_out .output,#slider2_out .output{background: #f0f0f0;float: left;margin: 10px 0;min-width:80px;}
}