.graph{
	border: 1px solid #737373 !important;
	box-sizing: border-box;
	position:relative;
}
.graph tr{
	box-sizing: border-box;
}
.graph td{
	position: relative;
	border-color: #737373 !important;
	border-bottom: 1px solid transparent !important;
	border-right: 1px solid transparent !important;
	box-sizing: border-box;
	/* overflow: hidden; */
}
.graph td:nth-child(1)::before{
	content: '';
	position: absolute;
	border-bottom: 1px solid #737373;
	display: block;
	width: 10px;
	top: -1px;
	left: -10px;
}						
.graph td:nth-child(1)::after{
	content: '';
	position: absolute;
	border-bottom: 1px solid #737373;
	display: block;
	width: 10px;
	bottom: -1px;
	left: -10px;
}
.graph tr:first-child td::after{
	content: '';
	position: absolute;
	border-right: 1px solid #737373;
	display: block;
	width: 122%;
	height: 10px;
	bottom: -1px;
	right: -1px;
	top: -10px;
}
.top-left{
	position: absolute;
	height: 100%;
	width: 100%;
	border-left: 1px solid #737373;
	display: block;
	left: -1px;
	top: -10px;
}
.zero, .five, .hundred{
	position:absolute;
	left: -35px;
}
.five, .hundred{
	top: -10px;
	left: -49px;
	text-align: right;
	width: 35px;
}
.zero{
	bottom: -10px;
}
.top-number{
	position: absolute;
	width: 100%;
	top: -30px;
	left: -16px;
	width: 30px;
	text-align: center;							
}
.top-number-last{
	position: absolute;
	width: 100%;
	top: -30px;
	right: -16px;
	width: 30px;
	text-align: center;					
}
.inZone{
	/* background: #EBEBEB; */
}
.inZoneText{
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 20px;
	text-transform: uppercase;
	color: white;
	background: #868686;
	left: 0;
	height: 58px;
	top: 0px;
	line-height: 58px;
	z-index: 1;
}
.recharge{
	color: #0047ba;
	padding: 5px 15px;
	position: absolute;
	right: -55px;
	top: -23px;
	text-transform: uppercase;
	font-size: 16px;
	z-index: 1;
}	
.sawtooth{
	position: absolute;
	top: 0px;
	left: 0px;
	border-right: 1px solid #0047ba;
	/* margin-left: 0px; */
	z-index: 3;
}	
@media(max-width:500px){
	.recharge{
		font-size: 12px;
		top: -14px;
		z-index: 4;
		right: -35px;
	}
	.sawtooth{		
		margin-left: 0px;
	}
}
@media(min-width:501px) AND (max-width:767px){
	.recharge{
		font-size: 12px;
		top: -13px;
		z-index: 4;
		right: -52px;
	}
	.sawtooth{
		margin-left: -6px;
	}
}	
@media(min-width:768px) AND (max-width:991px){
	.sawtooth{
		margin-left: -5px;
	}
}
@media(min-width:992px) AND (max-width:1199px){
	.sawtooth{
		margin-left: -5px;
	}
}
.sawtooth:first-child{
	
}
.sawToothHolder{
	box-sizing: border-box;
	/* width: 100%; */
	overflow: hidden;
	/* display: inline; */
	/* position: relative; */
}
.line{
	position: absolute;
	z-index: 20;
	width: 100%;
	left: 0px;
	bottom: -24.45px;
}
.line hr{
	border-bottom: 1px solid #0047ba !important;
	opacity: 0.5;
	border-top: none;
	margin: 0px;
}

/* Override Styles */
.calculatorInputs{
	background: #59595b;
	display: inline-block;
	border-radius: 10px;
	padding-bottom: 10px;
	width: 390px;
	position: absolute;
	top: 65px;
	z-index: 5;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
}
@media(min-width:992px) AND (max-width:1199px){
	.calculatorInputs{
		width: 293px;
	}
}
@media(min-width:768px) AND (max-width:991px){
	.calculatorInputs{
		width: 355px;
	}
}
.calculatorInputs label{
	color: white;
	background: #0047ba;
	padding: .8rem .75rem;
	padding-left: 17px;
	border-radius: 5px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	font-size: 12px;
}
@media (min-width:992px) AND (max-width:1199px){
	.calculatorInputs label{
		width: 50%;
	}
}
.calculatorInputs .input-group-addon{
	color: white;
	background: none;
	border: none;
}
.calculatorInputs .user-input{
	border-radius: 5px !important;
	font-size: 14px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	padding: .8rem .75rem;
}

@media(min-width:768px){
	.form-control.user-input {
		width: 73px;
	}
}
@media(max-width:767px){
	.form-control.user-input {
		width: 96%;
	}
}
.calculatorInputs .form-group{
	padding-left: 15px;
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
}
@media(max-width:767px){
	.calculatorInputs{
		position: initial;
		width: 100%;
		margin-bottom: 20px;
	}
	.calculatorInputs label{
		width: 80%;
		margin-left: 15px;
	}
}
.graphInputs h4,
.calculatorInputs h3{
	margin: 0px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	width: 100%;
	display: block;
	font-size: 20px;
	margin: 20px auto;
}
.calculatorResultInputs {
	background: #efefef;
	border-radius: 5px;
	padding-bottom: 50px;
	width: 525px;
	float: right;
	/* display: block; */
}
@media(min-width:992px) AND (max-width:1199px){
	.calculatorResultInputs {
		background: #efefef;
		border-radius: 5px;
		padding-bottom: 50px;
	}
}
@media(max-width:767px){
	.calculatorResultInputs {
		
display: block;
		
width: 100%;
		
float: none;
	}
}
.calculatorResultInputs .form-group{
	display: inline-block;
	padding-left: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
}
.calculatorResultInputs label{
	color: #0047ba;
	padding: .5rem .45rem;
	padding-left: 17px;
	border-radius: 5px;
	text-align: right;
}
.calculatorResultInputs input{
	border-radius: 5px !important;
	font-size: 14px;
	padding: .5rem .45rem;
	background: white !important;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}
.calculatorResultInputs .input-group-addon{
	color: #0047ba;
	background: none;
	border: none;
}
.calculatorResultInputs h3{
	margin: 0px;
	text-align: center;
	color: #0047ba;
	text-transform: uppercase;
	width: 100%;
	display: block;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 1rem;
}
.calculatorResultInputs h4{
	margin: 0px;
	text-align: center;
	color: #0047ba;
	text-transform: uppercase;
	width: 100%;
	display: block;
	font-size: 16px;
	margin-bottom: 10px;
	margin-top: 1rem;
}
.calculatorResultInputs .progress{
	margin-left: -34px;
	z-index: 0;
	position: relative;
	height: 25px;
	margin-bottom: 0px;
	margin-top: 5px;
}
#whcResult{
	text-align: center;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.bubble-table{
	border: none;
	background: transparent !important;
}
.bubble-table td{
	border: 1px dotted #CCC;
	/* border-style: dotted; */
	/* border-color: black; */
	position: relative;
	padding: 1.2rem;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	background: transparent !important;
}
.bubbleContainer{
	padding: 0px 80px;
	padding-bottom: 50px;
	position: relative;
	height: 197px;
	padding-top: 0px;
	width: 337px;
	float: right;
}
@media(max-width:767px){
	.bubbleContainer{
		float: none;
		width: 100%;
		padding-top: 0p;
	}
}
.excellentBubble{
	width: 60px;
	position: absolute;
	right: -65px;
	top: 46px;
	color: #0047ba;
	font-size: 12px;
	text-transform: uppercase;
}
.goodBubble{
	width: 60px;
	position: absolute;
	right: -65px;
	font-size: 12px;
	top: 9px;
	text-transform: uppercase;
}
.lowBubble{
	width: 61px;
	position: absolute;
	right: -65px;
	font-size: 12px;
	color: #cccbcb;
	top: 9px;
	text-transform: uppercase;
}
.bubbleMeasure{
	position: absolute;
	width: 30px;
	font-size: 12px;
	left: -38px;
	text-align: right;
	bottom: -7px;
}
.bubbleContainer svg{
	position: absolute;
	top: 20px;
	left: 0px;
	width: 100%;
	height: 206px;
	z-index: 5;
}
.svgCover svg{
	position: absolute;
	top: -7px;
	left: 91px;
	width: 155px;
	height: 210px;
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.svgCover{
	position: absolute;
	width: 100%;
	left: 0;
	overflow: hidden;
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	bottom: -24px;
	z-index: 6;
	height: 186px;
}
.svgCoverInner{
	position: relative;
	width: 100%;
	overflow: hidden;
}
@media(max-width:767px){
	.bubbleContainer svg{
		left: 0;
		width: 100%;
		top: 20px;
		/* bottom: -14px; */
		height: 207px;
	}
	.svgCover svg{		
		left: 0;				
		top: -5px;				
		height: 205px;				
		/* width: 155px; */
	}
	.svgCover{	
		bottom: -26px;			
		height: 186px;
	}
}
.graphInputs{
	border-radius: 5px;
	background: #59595b;
	padding: 20px 0px;
	width: 420px;
	margin-left: 0px;
	margin-bottom: -185px;
	position: relative;
	z-index: 1;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
}
.graphInputs label{
    color: white;
    background: #0047ba;
    padding: .8rem .75rem;
    padding-left: 17px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
    font-size: 13px;
}
.graphInputs input{
	border-radius: 5px !important;
    font-size: 14px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
    padding: .8rem .75rem;
}
.graphInputs .form-group{
	display: inline-block;
	padding-left: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
}
@media(max-width:767px){
	.graphInputs{
		width: 100%;
		margin-bottom: 0px;
	}
	.graphInputs label{	
		width: 92%;			
		margin-left: 15px;
	}
	.graphInputs input{
	
	}
	.graphInputs .form-group{
		
	}
}
.graphInputs h4{
	margin: 0px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	width: 100%;
	display: block;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}
.graph-holder{
	position: relative;
	clip: 100px;
}
.graph-output{
	position: relative;
	margin-top: 50px;
	background: #efefef;
	padding: 150px 100px 50px 100px;
	border-radius: 5px;
	width: 95%;
	float: right;
}
@media(max-width:500px){
	.graph-output{
		padding: 20px 50px;
		margin-top: 20px;
	}
}
@media(min-width:501px) AND (max-width:767px){
	.graph-output{
		padding: 20px 60px 84px 60px;
		margin-top: 20px;
	}
}
.graphInputs .input-group-addon{
	color: white;
	background: none;
	border: none;
}
.graph-background{
	position: absolute;
	background: white;
	left: -55px;
	right: -55px;
	top: -40px;
	bottom: -40px;
	border-radius: 5px;
}
.systemPotential{
	margin-bottom: 100px;
	text-align: center;
	margin-left: -50px;
	margin-right: -50px;
	margin-top: 40px;
}
@media(max-width:767px){
	.systemPotential{
	margin-left: -20px;
	margin-right: -20px;
	}
	.graph-background{
		left: -49px;
		right: -49px;
		/* width: 100%; */
		bottom: -20px;
	}
}
.systemPotential .progress{
	height: 3rem;
}
.progress {
	display: block;
	width: 0%;
	min-width: 0%;
	max-width: 100%;
	height: 1rem;
	margin-bottom: 1rem;
}
.progress[value] {
	background-color: white;
	border: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 5px;
}
.progress[value]::-ms-fill {
	background-color: #59595b;
	border: 0;
}
.progress[value]::-moz-progress-bar {
	background-color: #59595b;
	border-bottom-left-radius: 0.25rem;
	border-top-left-radius: 0.25rem;
}
.progress[value]::-webkit-progress-value {
	background-color: #59595b;
	border-bottom-left-radius: 0.25rem;
	border-top-left-radius: 0.25rem;
}
.waterStorage{
	background: #0047ba;
	padding: 10px 40px;
	margin-left: 50px;
	margin-right: 35px;
	margin-top: 60px;
	text-align: center;
	border-radius:  5px;
	width: 265px;
	float: right;
}
@media(max-width:767px){
	.waterStorage{
		float: none;
		width: 100%;
		margin: auto;
		margin-top: 60px;
	}
}
.waterStorage h4{
	color: white;
	margin-top: 10px;
}
.waterStorageText{
	padding: 15px 20px;
	color: #0047ba;
	background: white;
	border-radius:  5px;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	width: 175px;
	margin: auto;
}
hr:not(.custom){
	border-bottom: 2px solid #efefef;
}
hr.custom{
	border-bottom: 8px solid #0047ba;
}
hr.dotted{
	border-bottom: 2px dotted #efefef;
	margin: 10px 5px;
}
.graph-output h3{
	margin: 0px;
	text-align: right;
	color: #0047ba;
	text-transform: uppercase;
	width: 100%;
	display: block;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	right: 50px;
	position: absolute;
}
@media(max-width:767px){
	.graph-output h3{
		position: initial;
		text-align: center;
	}
}
.calculatorResultInputs form{
	width: 350px;
	float: right;
}
@media(max-width:767px){
	.calculatorResultInputs form{
		float: none;
		width: 100%;
		margin-bottom: -110px;
	}
}
.print-results{
	margin-top: 10px;
	margin-bottom: 20px;
}

/* Some hacks for firefox */
@-moz-document url-prefix() {	
	.graph td:nth-child(1)::before{		
		left: -11px;
		top: -2px;
	}
	.graph tr:first-child td::after{
		top: -11px;
		width: 122%;
	}
	.graph td:nth-child(1)::after{
		left: -11px;
		bottom: 0px;
	}
	.top-left{
		left: -2px;
	}
	.graph{
		border: 1px solid transparent !important;
	}
	.inZoneText{
		left: -1px;
	}
	.line{
		left: -1px;
		bottom: -24px;
	}
}
@media print{
	.calculatorInputs{
		float: left;
		width: 50%;
	}
	.calculatorResultInputs{
		float: right;
		width: 49%;
	}
	.graphInputs{
		float: left;
		width: 50%;
	}
	hr.custom{
		display: none;
	}
	.graph-output{
		width: 100%;
		text-align: center;
	}
	.graph-holder{
		width: 486px;
		margin-left: auto;
		margin-right: auto;
	}
	#back-top{
		display: none !important;
	}
}
.calculate{
	color: white;
	text-transform: uppercase;
	background: #3c3b3b;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
}
.calcBtnContainer{
	text-align: center;
}
.bubbleTableLabel{
	position: absolute;
	left: -60px;
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
	top: 44px;
}
.progressBackground{
	background: white;
	border-radius: 2px;
}	
.systemPotential .progress{
	background: #59595b;
	border-radius: 2px;
}

.systemPotential .col-xs-4:nth-child(1){
	color: #cccbcb;
	text-transform: uppercase;
}
.systemPotential .col-xs-4:nth-child(2){
	color: black;
	text-transform: uppercase;
}
.systemPotential .col-xs-4:nth-child(3){
	color: #0047ba;
	text-transform: uppercase;
}
.daysDiv{
	position: absolute;
	top: -64px;
	text-transform: uppercase;
	left: 46%;
}
.soilMoistureDiv{
	position: absolute;
	left: -160px;
	transform: rotate(-90deg);
	top: 45%;
	text-transform: uppercase;
	color: #0047ba;
}
#irrigateDays{
	padding-left: 60px;
}
.irrigateDays{
	position: relative;	
}
.irrigateDays::before{
	content: 'Every';
	position: absolute;
	z-index: 5;
	top: 12px;
	left: 15px;
}
.waterStorage p{
	width: 100%;
	color: white;
	font-size: 11px;
	margin-top: -5px;
}
.customP{
	margin-top: -5px;
	text-align: center;
	font-size: 11px;
}
#sawtoothGraph{
	padding: 10px;
	position: relative;
	z-index: 1;
	height: 300px;
}
.inZoneContainer{
	position: absolute;
	width: 77.5%;
	z-index: 2;
	top: 32.5%;
	left: 71px;
}
.inZone{
	width: 100%;
	color: white;
	text-transform: uppercase;
	text-align: center;
	background: rgba(134, 134, 134, 0.5);
	height: 59px;
	font-size: 20px;
	line-height: 59px;
}
.inZoneContainer hr{
	border-bottom: 1px solid #0047ba !important;
	opacity: 0.5;
	border-top: none;
	margin: 0px;
	margin-top: -9px;
}
.recharge{
	color: #0047ba;
	padding: 5px 15px;
	position: absolute;
	right: -10px;
	top: 22px;
	text-transform: uppercase;
	font-size: 16px;
	z-index: 1;
}
.graph-holder{
	margin-left: -80px;
	margin-right: -80px;
}