.material-charts-chart-area {
	position: relative;
	color: #666666;
}

.material-charts-hover {
	position: fixed;
	display: none;
	background-color: #FFFFFF;
	padding: 10px;
	border-radius: 3px;
	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
	z-index: 10;
}

/* Shadow Styles */

.material-charts-shadow-1 {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.material-charts-shadow-2 {
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.material-charts-shadow-3 {
	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.material-charts-shadow-4 {
	box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.material-charts-shadow-5 {
	box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

/* Colors */

.material-charts-blue {
	background-color: #1976d2;
}

.material-charts-red {
	background-color: #d32f2f;
}

.material-charts-green {
	background-color: #388e3c;
}

.material-charts-yellow {
	background-color: #fbc02d;
}

.material-charts-grey {
	background-color: #616161;
}

.material-charts-black {
	background-color: #000000;
}

/* Chart Text */

.material-charts-chart-title {
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	text-align: center;
}

.material-charts-error-message {
	position: absolute; 
	margin: auto; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	height: 18px; 
	width: 200px
}

/* Axes */

.material-charts-box-chart-y-axis {
	background-color: #777777;
	position: absolute;
	width: 1px;
	top: 35px;
	left: 25px;
	bottom: 25px;
}

.material-charts-box-chart-x-axis {
	background-color: #777777;
	position: absolute;
	height: 1px;
	right: 25px;
	left: 25px;
	bottom: 25px;
}

.material-charts-box-chart-vertical-tick {
	background-color: #777777;
	position: absolute;
	height: 1px;
	left: 20px;
	width: 10px;
}

.material-charts-box-chart-vertical-tick-label {
	position: absolute;
	left: 5px;
	font-size: 8px;
}

.material-charts-box-chart-horizontal-label {
	position: absolute;
	bottom: 5px;
	font-size: 12px;
}

.material-charts-box-chart-vertical-bar {
	position: absolute;
	bottom: 25px;
	box-shadow: 2px -2px 15px 0 rgba(0, 0, 0, 0.16), 2px -2px 15px 0 rgba(0, 0, 0, 0.12);
	border-radius: 3px 3px 0 0;

	-webkit-transition: all 0.2s ease; /* Safari and Chrome */
	-moz-transition: all 0.2s ease; /* Firefox */
	-ms-transition: all 0.2s ease; /* IE 9 */
	-o-transition: all 0.2s ease; /* Opera */
	transition: all 0.2s ease;
}

.material-charts-box-chart-vertical-bar:hover {
	box-shadow: 2px -5px 30px 0 rgba(0, 0, 0, 0.24), 2px -5px 30px 0 rgba(0, 0, 0, 0.19);

	-webkit-transition: all 0.2s ease; /* Safari and Chrome */
	-moz-transition: all 0.2s ease; /* Firefox */
	-ms-transition: all 0.2s ease; /* IE 9 */
	-o-transition: all 0.2s ease; /* Opera */
	transition: all 0.2s ease;

	cursor: pointer;
}

/* Pie Chart Components */

.material-charts-pie-chart {
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.material-charts-pie-sector {
	position: absolute;
	height: inherit;
	width: inherit;
	border-radius: inherit;

	-webkit-transition: all 0.2s ease; /* Safari and Chrome */
	-moz-transition: all 0.2s ease; /* Firefox */
	-ms-transition: all 0.2s ease; /* IE 9 */
	-o-transition: all 0.2s ease; /* Opera */
	transition: all 0.2s ease;
}

.material-charts-pie-sector:hover {
	box-shadow: 2px -2px 15px 0 rgba(0, 0, 0, 0.16), 2px -2px 15px 0 rgba(0, 0, 0, 0.12);

	-webkit-transition: all 0.2s ease; /* Safari and Chrome */
	-moz-transition: all 0.2s ease; /* Firefox */
	-ms-transition: all 0.2s ease; /* IE 9 */
	-o-transition: all 0.2s ease; /* Opera */
	transition: all 0.2s ease;

	cursor: pointer;
}