.line {
	fill: none; 
	stroke-width: 4 
}
.per-site { 
	stroke: #103D4D; 
}
.total-cost { 
	stroke: #ff9613; 
}
#pricing-box rect.per-site { fill: #103D4D; }
#pricing-box rect.total-cost { fill: #ff9613; }

#pricing-box svg { border: 1px solid #ddd; margin: 20px auto; padding: 30px 30px 0 30px; background-color: #eee; box-shadow: 20px 20px 40px rgba(0, 0, 0,  0.2); }

#pricing-box { 
	text-align: center; 
	max-width: 1250px; 
	margin: 20px auto; 
	padding-top: 30px; 
	clear: both;
}

#pricing-box .pricing-slider-wrap { 
	width: 100%; height: 15px; 
	border: none;
	padding: 0px 47px 0 40px;
	background: white; 
	box-sizing: border-box; 
	background-color: #103d4d; 
	border-radius: 20px; 
	background: linear-gradient(to right, #103d4d 50%, white 50%)
}
#pricing-box .sites-box {
	margin-right: 30px;	
}
#pricing-box .pricing-slider { height: 15px; border: none; }
#pricing-box .ui-slider-range-max {
	position: absolute;
	top: 0;
	height: 100%;
	right: 0;
	position: absolute;
}

#pricing-box .ui-slider-handle {
	width: 50px;
	margin-left: -22px;
	height: 26px;
	border-radius: 30px;
	background-color: #FF9613;
	border: none;
	margin-top: -3px;
	text-align: center;
	font-weight: bold;
	line-height: 26px;
	font-size: 14px;
	color: black;
	cursor: pointer;
	position: absolute;
	top: -3.8px;
}
#pricing-box .ui-slider-handle:focus {
	border: none;
	outline: none;
}

#pricing-box circle { fill: #4ABFA4; stroke: #4abfa4; }

#pricing-box .ui-slider.ui-widget-content { border: none; background: #103d4d; position: relative; }
#pricing-box .ui-slider-range-max { background-color: white; border: none; }

#pricing-box .pricing-bottom-block { 
	background: #eee; 
	padding: 10px 5px 20px 5px; 
}
#pricing-box .sites-box {
	max-width: 520px;
	margin: 0px auto;
	padding: 0px 20px;
}
#pricing-box .usages-box { 
	max-width: 680px;
	margin: 0px auto;
}	
#pricing-box .extra-val {
	width: 55px;
	background-color: white;
	padding: 5px;
	font-weight: bold;
	font-family: Helvetica;
	font-size: 18px;
	margin-right: 10px;
	box-sizing: content-box;
}

a { text-decoration: none; }

#pricing-box .bottom-slider-line-total { width: 92%; /* 95% of 96.5% which is visible row width */ margin: 12px auto 5px auto; border-top: 3px solid gray; }

#pricing-box .pricing-bottom-block .extra-val { border: 1px solid #ddd; vertical-align: top; }
#pricing-box .pricing-bottom-block .pre-extra-val { margin: 5px 10px 0 0; color: grey; }
#pricing-box .pricing-bottom-block .extra-text { width: 70px; text-align: left; white-space: nowrap; }
#pricing-box .bottom-slider-site .extra-text { margin-top: 3px; }
#pricing-box .bottom-slider-total .extra-val { width: 100px; }
#pricing-box .bottom-slider-total, #pricing-box .bottom-slider-total .extra-val { font-size: 22px; }
#pricing-box .bottom-slider-block {
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	min-height: 45px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
.gray {
	color: #888;
}

#pricing-box .bottom-slider-wrap {
	height: 15px; 
	border: none;
	padding: 0px 40px 0 40px;
	background: white; 
	background-color: #103d4d; 
	border-radius: 20px; 
	background: linear-gradient(to right, #103d4d 50%, white 50%)
}

@media (max-width: 550px) {
	#pricing-box .bottom-slider-wrap {
		margin: 50px 0 20px 0;
	}

	/* This is a temporary solution. Consider fixing `scale` rules below instead. */
	#pricing-box .svg-container {
		margin-top: -140px;
		margin-left: -18px;
		height: 480px;
	}
}

@media (min-width: 551px) {
	#pricing-box .bottom-slider-wrap {
		position: absolute;
		top: 15px;
		right: 170px;
		bottom: 5px;
		left: 120px;
	}
}

@media (min-width: 1230px) {
	.pricing-subbox {
		float: left;
	}
}

#pricing-box .bottom-slider-right {float: right;}
#pricing-box .bottom-slider-right > div {display: inline-block;}

#pricing-box .bottom-slider-subtitle {font-size: 12px; color: gray; white-space: nowrap;}

#pricing-box .bottom-slider-wrap .ui-slider-horizontal {height: 15px;}
#pricing-box .usage-slider .ui-slider-handle
{
	width: 60px; 
	margin-left: -32.5px;
}

.val-box { fill: white; stroke: #ddd; stroke-width: 1; }

.step-box { margin-top: -3px; }
.step-box-auto { text-align: left; position: relative; margin-left: -15px; }
.tick { text-align: center; display: inline-block; }
.step-box-auto .tick { position: absolute; }
#pricing-box .tick:not(.tick-auto) {width: 16.6%; }

#pricing-box .pricing-bottom-block .step-box { font-size: 10px; min-height: 30px; }
#pricing-box .pricing-bottom-block .tick:not(.tick-auto) {width: 8%; }

/* FIXME: This rendering is ugly.  Should use width & height attributes of SVG */

@media only screen and (max-width: 780px) {
	#pricing-box svg {
		margin-left: -30px;
		transform: scale(0.8);
	}
}

@media only screen and (max-width: 650px) {
	#pricing-box svg {
		margin-left: -60px;
		transform: scale(0.6);
	}
}

@media only screen and (max-width: 550px) {
	#pricing-box svg {
		margin-left: -85px;
		transform: scale(0.6);
		margin-top: 80px;
	}
}