@charset "utf-8";
/* CSS Document */

/*
Title :    graph CSS
Author :   Peter waldock
Company :  Fishree
Date :     10/09/2012
Standard : CSS Level 2.1 + 3
*/
/*********************
 * Graph Holder styles *
 *********************/

.contentResources .container {
	width: 100%;
	max-width: 700px;
	max-width: 750px;
	margin-top: -75px;
	margin-bottom:40px;
	margin-right:-220px;
	font-size:38px!important;
	float:left!important;
	clear:none;
	margin-left:5.5%;
	position:static;
}
.axisLable_y, .axisLable_x {
	color: #999;
	text-shadow: white 1px 1px 1px;
	font: 15px "ft_font", tahoma, sans-serif;
	position:absolute;
	margin:200px 0 0 -35px;
}
.axisLable_y {
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg); /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Safari and Chrome */
	-o-transform: rotate(-90deg); /* Opera */
	-moz-transform: rotate(-90deg); /* Firefox */
}
.axisLable_x {
	margin:340px 0 0 610px;
}

@-moz-document url-prefix() {
.panel.insights {
 min-height:335px;
}
}
/** Graph Holder container **/
.graph-container {
	position: relative; /* required Y axis stuff, Graph Holder's left and bottom sides to be positions properly */
	display: inline-block; /* display: table may also work.. */
	padding: 0; /* let the bars position themselves */
	list-style: none; /* we don't want to see any default <ul> markers */
	margin: 45px 0 0 70px!important;
	background-repeat: no-repeat;
	background-position: 0 -2.5em;
}
/* Graph Holder bottom side */
.graph-container:before {
	position: absolute;
	content: "";
	bottom: -0.5em;
	left: -1.0em; /* skew pushes it left, so we move it a bit in opposite direction */
	width: 83%; /* make sure it is as wide as the whole graph */
	height: 1.5em;
	/* Make it look perspective */
    -webkit-transform: skew(-45deg);
	-moz-transform: skew(-45deg);
	-o-transform: skew(-45deg);
	-ms-transform: skew(-45deg);
	transform: skew(-45deg);
	box-shadow: inset 3px 2px 10px 0px #c2c2c2;
	background-color:#fafafa;
}
/* Graph Holder left side */
.graph-container:after {
	position: absolute;
	content: "";
	top: 2.35em; /* skew pushes it up so we move it down a bit */
	left: -1.8em;
	box-shadow: inset -1px -5px 10px 0px #c2c2c2;
	width: 1.5em;
	background-color:#eaeaea;
	/* Make it look perspective */
    -webkit-transform: skew(0deg, -45deg);
	-moz-transform: skew(0deg, -45deg);
	-o-transform: skew(0deg, -45deg);
	-ms-transform: skew(0deg, -45deg);
	transform: skew(0deg, -45deg);
}
/* Bars and X-axis labels holder */
.graph-container > li {
	float: left; /* Make sure bars are aligned one next to another */
	position: relative; /* Make sure X-axis labels are positioned relative to this element */
}
/* A small hack to make Graph Holder's background side be wide enough
   ..because our bottom side is skewed and pushed to the right, we have to compensate it in Graph Holder's background */
.graph-container > li:nth-last-child(2) {
	margin-right: 2.5em;
}
/* X-axis labels */
.graph-container > li > span {
	position: absolute;
	top:31em;
	left:-14.1em;
	width: 100%; /* play with this one if you change perspective depth */
	text-align: right!important;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
	font-size: 1.5em;
	width:100px;
	padding:5px 0px 5px 0px;
	z-index:10;
	/* Make it look perspective */
transform: rotate(-56deg);
	-ms-transform: rotate(-56deg);
	-webkit-transform: rotate(-56deg);
	-o-transform: rotate(-56deg);
	-moz-transform: rotate(-56deg);
	font-size:9px;
	opacity:0;
}
.graph-container > li:hover {
	cursor:pointer;
}
.graph-container > li:hover span {
	opacity:1;
}
.graph-container > li span.toolTip_graph, .graph-container > li:hover span.toolTip_graph {
	padding:10px 18px 10px 18px;
	width:185px!important;
	text-align:center;
	color:#aaa;
	margin-top:0px;
	margin-left:-10px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .01s ease-in-out;
	-o-transition: all .01s ease-in-out;
	-ms-transition: all .01s ease-in-out;
	transition: all .01s ease-in-out;
	opacity:0.3;
}
.graph-container > li:hover span.toolTip_graph {
	width:190px!important;
	opacity:0.9;
	color:#111;
}
.graph-container > li span.toolTip_graph.alert {
	color:#da6a6a;
	opacity:0.9;
}

/*******************************
 * Graph Y-axis Markers styles *
 *******************************/

/* Markers container */
.graph-container > li:last-child {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;/*display:none;*/
}
/* Y-axis Markers list */
.graph-marker-container > li {
	position: absolute;
	left: -2.5em;
	bottom: 0;
	width: 100%;
	margin-bottom: 0.2em;
	list-style: none;
}
/* Y-axis lines general styles */
.graph-marker-container > li:before, .graph-marker-container > li:after {
	content: "";
	position: absolute;
	border-style: none none none;
	border-color: #ececec;
	border-width: 1px;
	background: rgba(133, 133, 133, .15);
}
/* Y-axis Side line */
.graph-marker-container > li:before {
	width: 3.55em;
	height: 0;
	bottom: -1.22em;
	left: -.55em;
	z-index: 2; /* be above .graph-container:after */
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* Y-axis Background line */
.graph-marker-container li:after {
	width: 100%;
	bottom: 0;
	left: 2.5em;
}
/* Y-axis text Label */
.graph-marker-container span {
	position: absolute;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
	top: -5px;
	left: -3.7em; /* just to push it away from the graph.. */
	width: 3.5em; /* give it absolute value of left offset */
	font-size: 10px;
}
/*********************
 * Graph Bars styles *
 *********************/

/* Bar wrapper - hides the inner bar when it goes below the bar, required */
.bar-wrapper {
	overflow: hidden;
}
/* Bar container - this guy is a real parent of a bar's parts - they all are positioned relative to him */
.bar-container {
	position: relative;
	margin-top: 2.5em; /* should be at least equal to the top offset of background casing */
	/* because back casing is positioned higher than actual bar */
    width: 9px; /* required, we have to define the width of a bar */
	margin-right:-1.3em;
}
/* right bottom patch - make sure inner bar's right bottom corner is "cut" when it slides down */
.bar-container:before {
	content: "";
	position: absolute;
	z-index: 3; /* to be above .bar-inner */
	bottom: -0em;
	right: 0;
	/* Use bottom border to shape triangle */
    width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 5px 5px;
	border-color: transparent transparent #fafafa;
}
.bar-background:before, .bar-background:after {
	content: "";
	position: absolute;
}
/* Front panel */
.bar-foreground {
	z-index: 3; /* be above .bar-background and .bar-inner */
}
.bar-foreground, .bar-inner {
	position: absolute;
	/*width: 0.5em;*/
	width: 4px;
	height: 100%;
	top: 0;
	left: 0;
}
.bar-foreground:before, .bar-foreground:after, .bar-inner:before, .bar-inner:after {
	content: "";
	position: absolute;
}
/* Right front panel */
.bar-foreground:before, .bar-inner:before {
	top: -3px;
	right: -4px;
	width: 4px;
	height: 115%;
}
/* Top front panel */
.bar-foreground:after, .bar-inner:after {
	top: -3px;
	right: -2px;
	width: 4px;
	height: 4px;
	/*background-color: #ebebeb;*/
	-webkit-transform: skew(-45deg);
	-moz-transform: skew(-45deg);
	-o-transform: skew(-45deg);
	-ms-transform: skew(-45deg);
	transform: skew(-45deg);
}
/** BAR's inner block **/
.bar-inner {
	z-index: 2; /* to be above .bar-background */
	top: auto; /* reset position top */
	height: 0;
	color: transparent; /* hide text values */
	-webkit-transition: height 0.8s ease-out, bottom 0.8s ease-out;
	-moz-transition: height 0.8s ease-out, bottom 0.8s ease-out;
	-o-transition: height 0.8s ease-out, bottom 0.8s ease-out;
	-ms-transition: height 0.8s ease-out, bottom 0.8s ease-out;
	transition: height 0.8s ease-out, bottom 0.8s ease-out;
	background-color: #b3cfe0;
}
/* Right panel */
.bar-inner:before {
	background-color:#8da7b7;
}
/* Top panel */
.bar-inner:after {
	background-color:#c3e296;
}
/****************
 * FILL BUTTONS  *
 ****************/
input[name^="fill-"] {
	width: 65px;
	height: 25px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
}
.insights input[name^="fill-"] + label, .insights .btn_viewAll {
	/*display: inline-block;
	margin: 0px;*/
	width: 65px;
	padding: 0px 6px;
	color: #777;
	line-height: 20px;
	font-size: 13px;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #fff;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* W3C */
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
	position:relative;
	/*left:5px;*/
	display:block;
}
.btn_graphLatest, .btn_graphNext, .btn_graphPrevious, .btn_viewAll {
	top:10px;
	left:10px;
	border-radius:3px;
	left:0px;
	width:8em!important;
	text-align:center;
	padding:8px 8px 0px 8px;
	line-height:0;
	top:43px;
	margin-left:5px!important;
	float:right;
}
.btn_viewAll {
	border-radius:3px;
	margin-left:5px!important;
	width:auto!important;
	font: 13px "ft_font", tahoma, sans-serif;
	padding:2px 8px 2px 8px;
}
label.btn_graphNext, label.btn_graphPrevious {
	width:30px!important;
	margin-right:50px;
}
label.btn_graphPrevious {
	display:none!important;
}
/* activity buttons selected */
input[name^="fill-"]:checked + label {
}
/* activity buttons selected */
.insights input:hover + label:hover {
	background-image: -webkit-linear-gradient(bottom, #606060 1%, #444 100%);
	background: #fafafa;
	box-shadow: inset 1px 1px 4px 0px #aaa!important;
	margin-top:3px;
	margin-bottom:-3px;
	color: #aaa;
	text-shadow: none;
}




/* Change bars fill when a Product is selected */
/* None */
input#f-none:checked ~ .graph-container > li:nth-child(1) .bar-inner {
height: 0;
bottom: -2.5em;
}
input#f-none:checked ~ .graph-container > li:nth-child(2) .bar-inner {
height: 0;
bottom: -2.5em;
}
input#f-none:checked ~ .graph-container > li:nth-child(3) .bar-inner {
height: 0;
bottom: -2.5em;
}
input#f-none:checked ~ .graph-container > li:nth-child(4) .bar-inner {
height: 0;
bottom: -2.5em;
}
input#f-none:checked ~ .graph-container > li:nth-child(5) .bar-inner {
height: 0;
bottom: -2.5em;
}
/* Product 1 */
input#f-product1:checked ~ .graph-container > li:nth-child(1) .bar-inner {
height: 87%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(2) .bar-inner {
height: 79%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(3) .bar-inner {
height: 57%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(4) .bar-inner {
height: 64%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(5) .bar-inner {
height: 25%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(6) .bar-inner {
height: 94%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(7) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(8) .bar-inner {
height: 67%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(9) .bar-inner {
height: 55%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(10) .bar-inner {
height: 98%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(11) .bar-inner {
height: 61%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(12) .bar-inner {
height: 72%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(13) .bar-inner {
height: 82%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(14) .bar-inner {
height: 85%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(15) .bar-inner {
height: 89%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(16) .bar-inner {
height: 91%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(17) .bar-inner {
height: 13%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(18) .bar-inner {
height: 84%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(19) .bar-inner {
height: 72%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(20) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(21) .bar-inner {
height: 64%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(22) .bar-inner {
height: 72%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(23) .bar-inner {
height: 74%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(24) .bar-inner {
height: 78%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(25) .bar-inner {
height: 60%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(26) .bar-inner {
height: 55%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(27) .bar-inner {
height: 74%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(28) .bar-inner {
height: 77%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(29) .bar-inner {
height: 74%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(30) .bar-inner {
height: 85%;
bottom: 0;
}
input#f-product1:checked ~ .graph-container > li:nth-child(31) .bar-inner {
height: 86%;
bottom: 0;
}
/* Product 2 */
input#f-product2:checked ~ .graph-container > li:nth-child(1) .bar-inner {
height: 80%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(2) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(3) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(4) .bar-inner {
height: 80%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(5) .bar-inner {
height: 29%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(6) .bar-inner {
height: 95%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(7) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(8) .bar-inner {
height: 78%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(9) .bar-inner {
height: 76%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(10) .bar-inner {
height: 87%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(11) .bar-inner {
height: 65%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(12) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(13) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(14) .bar-inner {
height: 76%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(15) .bar-inner {
height: 93%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(16) .bar-inner {
height: 87%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(17) .bar-inner {
height: 25%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(18) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(19) .bar-inner {
height: 72%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(20) .bar-inner {
height: 93%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(21) .bar-inner {
height: 74%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(22) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(23) .bar-inner {
height: 71%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(24) .bar-inner {
height: 62%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(25) .bar-inner {
height: 88%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(26) .bar-inner {
height: 77%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(27) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(28) .bar-inner {
height: 76%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(29) .bar-inner {
height: 87%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(30) .bar-inner {
height: 67%;
bottom: 0;
}
input#f-product2:checked ~ .graph-container > li:nth-child(31) .bar-inner {
height: 69%;
bottom: 0;
}
/* Product 3 */
input#f-product3:checked ~ .graph-container > li:nth-child(1) .bar-inner {
height: 87%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(2) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(3) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(4) .bar-inner {
height: 80%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(5) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(6) .bar-inner {
height: 85%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(7) .bar-inner {
height: 85%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(8) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(9) .bar-inner {
height: 71%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(10) .bar-inner {
height: 77%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(11) .bar-inner {
height: 76%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(12) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(13) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(14) .bar-inner {
height: 84%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(15) .bar-inner {
height: 74%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(16) .bar-inner {
height: 65%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(17) .bar-inner {
height: 24%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(18) .bar-inner {
height: 100%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(19) .bar-inner {
height: 72%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(20) .bar-inner {
height: 59%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(21) .bar-inner {
height: 74%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(22) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(23) .bar-inner {
height: 71%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(24) .bar-inner {
height: 62%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(25) .bar-inner {
height: 87%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(26) .bar-inner {
height: 84%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(27) .bar-inner {
height: 75%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(28) .bar-inner {
height: 50%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(29) .bar-inner {
height: 90%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(30) .bar-inner {
height: 95%;
bottom: 0;
}
input#f-product3:checked ~ .graph-container > li:nth-child(31) .bar-inner {
height: 59%;
bottom: 0;
}
/****************
 * COLOR BUTTONS  *
 ****************/
input[name^="paint-"] {
	width: 25px;
	height: 25px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
}
/* unselected color switch */
.insights input[name^="paint-"] + label {
	color: #989da4;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	width: 25px;
	height: 25px;
	overflow: hidden;
	background: rgba(34, 35, 36, .7);/*#171b20;*/
	margin: 0 2px -7px;
	position: relative;
	cursor: pointer;
	color: transparent;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 1px 1px 3px rgba(0, 0, 0, 0.3);
	text-align: center;
}
#graph-blue + label {
	background: #2972c3;
	background: -webkit-radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
	background: -moz-radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
	background: -o-radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
	background: -ms-radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
	background: radial-gradient(rgba(39, 118, 205, 1), rgba(44, 106, 174, .9));
}
#graph-green + label {
	background: #5f9a3f;
	background: -webkit-radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
	background: -moz-radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
	background: -o-radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
	background: -ms-radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
	background: radial-gradient(rgba(98, 160, 60, .9), rgba(43, 148, 48, 1));
}
#graph-rainbow + label {
	background: transparent url(../Animated3DBarChart/img/rainbow.gif) no-repeat;
}
#graph-green:checked + label, #graph-blue:checked + label, #graph-rainbow:checked + label {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 1px 1px 3px rgba(0, 0, 0, 0.3);
}
 input#graph-blue:checked ~ .graph-container .bar-inner, input#graph-blue:checked ~ .graph-container .bar-inner:before {
}
input#graph-blue:checked ~ .graph-container .bar-inner:after {
background-color: #c8e2eb;
}
 input#graph-green:checked ~ .graph-container .bar-inner, input#graph-green:checked ~ .graph-container .bar-inner:before {
background-color: red;
}
input#graph-green:checked ~ .graph-container .bar-inner:after {
background-color: green;
}
 input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner, input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner:before {
background-color: purple;
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(1) .bar-inner:after {
background-color: green;
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner, input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner:before {
background-color: rgba(5, 123, 5, .3);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(2) .bar-inner:after {
background-color: rgba(63, 122, 47, .4);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner, input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner:before {
background-color: rgba(255, 0, 0, .3);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(3) .bar-inner:after {
background-color: rgba(255, 71, 71, .3);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner, input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner:before {
background-color: rgba(255, 248, 136, .3);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(4) .bar-inner:after {
background-color: rgba(252, 248, 182, .5);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner, input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner:before {
background-color: rgba(5, 62, 123, .6);
}
input#graph-rainbow:checked ~ .graph-container li:nth-child(5) .bar-inner:after {
background-color: rgba(47, 83, 122, .7);
}
.bar-wrapper.alert .bar-inner {
	background-color:#eaa9a9;
}
.bar-wrapper.alert .bar-inner:before {
	background-color: #da6a6a;
}
.bar-wrapper.alert .bar-inner:after {
	background-color: #f0c3c3!important;
}
.insights input[name^="resize-"] {
	/*position: absolute; */
	opacity: 0;
	cursor: pointer;
	z-index: 100;
	width: 70px;
	height: 35px;
	z-index: 100;
}
/* unselected color switch */
.insights input[name^="resize-"] + label {
	color: #fff;
	display: inline-block;
	background: rgba(183, 172, 172, .7);
	width: 70px;
	line-height: 35px;
	height: 35px;
	text-align: center;
	position: relative;
}
.insights input[name^="resize-"]:checked + label {
	background: rgba(34, 35, 36, .7);
	color: #fff;
	box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3);
}
 input#graph-small:checked ~ .graph-container .bar-container, input#graph-small:checked ~ .graph-container:after, input#graph-small:checked ~ .graph-container > li:last-child {
 height: 10em;
}
 input#graph-normal:checked ~ .graph-container .bar-container, input#graph-normal:checked ~ .graph-container:after, input#graph-normal:checked ~ .graph-container > li:last-child {
 height: 20em;
}
 input#graph-large:checked ~ .graph-container .bar-container, input#graph-large:checked ~ .graph-container:after, input#graph-large:checked ~ .graph-container > li:last-child {
 height: 60em;
}
/* spacing between bars */
.graph-container > li .bar-container {
	margin-right: 9px;
}
/* spacing before first bar */
.graph-container > li:first-child {
	margin-left: 0.3em;
}
/* spacing after last bar */
.graph-container > li:nth-last-child(2) .bar-container {
	margin-right: 1em;
}
/****************
 *    Colors    *
 ****************/
 
/* Bar's Back side */
.bar-background {
/* background-color: rgba(160, 160, 160, .1);*/
}
/* Bar's Bottom side */
.bar-background:before {
	background-color:#ccc;
	-webkit-box-shadow: 1px 1px 4px 0px black;
}
/* Bar's Left Back side */
.bar-background:after {
	background-color: rgba(160, 160, 160, .05);
}
/* Bar's Front side */
.bar-foreground {
}
.button-label {
	color: #aaa;
	line-height: 40px;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
	display: inline;
	margin: 0 10px 0 20px;
}
.button-label:before {
	content: " ";
	white-space: wrap;
}
.main span:first-of-type {
	margin-left: 15px;
	text-align:right;
	color:#aaa;
}
/* un-needed buttons from demo files */
input[name^="paint-"], input[name^="paint-"] + label, #graph-blue + label, #graph-green + label, #graph-rainbow + label, #graph-green:checked + label, #graph-blue:checked + label, #graph-rainbow:checked + label, input[name^="resize-"], input[name^="resize-"] + label, input[name^="resize-"]:checked + label, .button-label, .btn_none {
	opacity:0;
	display:none;
}

/******************************************************************************
 **                                                                          **
 ** RESPONSIVENESS                                                           **
 **                                                                          **
 **                                                                          **
 ******************************************************************************/

@media screen and (max-width: 1825px) {
.graph-container {
}
}
ul.graph-container {
	font-size: 10px!important;
}
.button-label {
	margin: 0 5px 0 0;
}
.main, .main ul li {
	padding:0px!important;
}