.myRewardsDashPadding {
    padding: 35px 15px;
    height: 535px;
}

.myUsageNoDataPadding {
    padding: 35px 15px;
    height: 535px;
}

.myUsageFailedAPI {
	padding: 35px 15px;
    height: 510px;
}

.rewardsDash .rewardDescriptionWidth {
	width: 40%;
	float: left
}

.rewardsDash .rewardDateWidth {
	width: 30%;
	float: left
}

.rewardsDash .header_OAM {
    margin-bottom: 72px;
}

 #ChartCurrentYearElect
{
	font-family: 'Effra';
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	text-align: center;
	margin-top:25px;
}

#ChartCurrentYearGas
{
	font-family: 'Effra';
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	text-align: center;
	margin-top:25px;
}

#totalUsageElect{
	font-family: 'Effra';
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	color: #999999;
	text-align: center
}

#totalUsageGas{
	font-family: 'Effra';
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	color: #999999;
	text-align: center
} 

#ChartCurrentYearElectPage, #ChartCurrentYearGasPage{
	font-size: 20px;
	color: #000000;
	text-align: center;
	line-height: 20px;
	margin-top: 5px;
}

@media only screen and (max-width: 500px)  {
	#ChartCurrentYearElectPage, #ChartCurrentYearGasPage{
		width: 110%;
	}
	.highLowMrgn {
		display: none;
	}
}

#totalUsageElectPage, #totalUsageGasPage{
	font-family: EffraLight, Arial, Verdana, Helvetica, sans-serif;
	font-size: 24px;
	color: #000000;
	text-align: center;
	line-height: 20px;
	margin-top:25px;
}

#totalUsageGasPage{
	text-transform: capitalize;
}

#electUsageChart > div > div:nth-child(1) > div > svg > g:nth-child(3) > g:nth-child(4) > g > text,
#usageHistoryChart > div > div:nth-child(1) > div > svg > g:nth-child(3) > g:nth-child(4) > g > text{
	font-family: EffraLight, Arial, Verdana, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
}

#electUsageChart > div > div:nth-child(1) > div > svg > g:nth-child(4)> g>text, 
#usageHistoryChart > div > div:nth-child(1) > div > svg > g:nth-child(4)> g>text{
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

#electUsageChart > div > div:nth-child(1) > div > svg > g:nth-child(5) > g > text, 
#usageHistoryChart > div > div:nth-child(1) > div > svg > g:nth-child(5) > g > text {
    font-size: 20px;
    font-style: normal;
    font-family: Effra, Arial, Verdana, Helvetica, sans-serif;
}

.tempDataTable {
	width: 82%;
    margin: 0 auto;
    table-layout: fixed;
    margin-left: 11%;
}

.highDataValueHeader, .lowDataValueHeader{
	font-family: Effra, Arial, Verdana, Helvetica, sans-serif !important;
	font-weight: 400;
    font-style: normal;
    font-size: 20px !important;
}

.tempDataTable td {
	font-family: EffraLight, Arial, Verdana, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
} 

.tempDataTable th {
	display: none;
}

.usageChartText {
	margin-left: 12%;
	font-family: 'Effra';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #777777;
    width: 87%;
    margin-top:5px;
	margin-bottom: 7px;
} 


.leftarrowid{
margin-left: 1em;
cursor: pointer;
margin-top: 50px;

}

.rightarrowid{
margin-right: 1em;
cursor: pointer;
margin-top: 50px;
}

#usageHistoryChart{
	width: 100%;
	display: flex;
   	justify-content: center;
}

.loaderUsage{
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}

.rewardsRecordScroll {
	max-height: 270px !important;
    overflow-y: auto;
}


.OAMpromoWrapper .Yes, .OAMpromoWrapper .No{
	display: none;
}

.OAMpromoWrapper .Yes {
	margin-top: 0px;
}

.errorMsgGasPop {
	color: #f00;
    margin-top: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

#electUsageChart > div > div:nth-child(1) > div > svg > g:nth-child(3) > g:nth-child(2) > g > text,
	#electUsageChart > div > div:nth-child(1) > div > svg > g:nth-child(3) > g:nth-child(3) > g > text,
	#usageHistoryChart > div > div:nth-child(1) > div > svg > g:nth-child(3) > g:nth-child(3) > g > text,
	#usageHistoryChart > div > div:nth-child(1) > div > svg > g:nth-child(3) > g:nth-child(2) > g > text{
	font-family: EffraLight, Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
}

.usageChartLabelGas, .usageChartLabelElec {
	display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: -40px !important;
    z-index: 0;
    position: relative;
}

.actualRateUnitImg, .avgDailyTempImg {
	width: 16px;
	margin-right: 5px;
}

.graphLabels{
	padding: 0 10px;
	display: flex;
    align-items: center;
}

.graphLabels *{
	font-family: EffraLight, Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

@media only screen and (min-width: 960px) and (orientation: landscape) {
	.myRewardsDashPadding {
		padding: 27px 25px;
	}
	#ChartCurrentYearGas {
		font-family: 'Effra';
		font-weight: 400;
		font-style: normal;
		font-size: 22px;
		text-align: center;
		margin-top: 25px;
	}
	/* #usageHistoryChart {
		width: 100%;
		display: flex;
    	justify-content: center;
	} */
	
	#totalUsageElect {
		font-family: 'Effra';
		font-weight: 400;
		font-style: normal;
		font-size: 18px;
		color: #999999;
		text-align: center
	}
	#totalUsageGas {
		font-family: 'Effra';
		font-weight: 400;
		font-style: normal;
		font-size: 18px;
		color: #999999;
		text-align: center
	}
	.tempDataTable {
		width: 82%;
    	margin: 0 auto;	
    	table-layout: fixed;
	} 
	.highDataValueHeader, .lowDataValueHeader {
		text-align: left;
	}
	.leftarrowid {
		margin-left: 7%;
		cursor: pointer;
		margin-top: 50px;
	}
	.rightarrowid {
		margin-right: 7%;
		cursor: pointer;
		margin-top: 50px;
	}

	.tempDataTable th {
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		color: #777777;
		text-align: right;
	}
	.usageChartText {
		margin-left: 14%;
		font-weight: 400;
		font-style: normal;
		font-size: 12px;
		color: #777777;
		margin-top:5px;
		margin-bottom: 7px;
	}
	#usageHistoryChart #electUsageChart {
		font-size: 13px;
	}
	
}

@media only screen and (max-width : 414px) {
	.tempDataTable td {
	    font-size: 9px;
	}
}

@media only screen and (max-width : 320px) {
	.tempDataTable td {
	    font-size: 8px;
	}
}
