/* Mixings &  Variables */
.clearfix,
.clearfix:before,
.clearfix:after {
  display: block;
  content: " ";
  clear: both;
  zoom: 1;
}
/* Resets */
#MainContent_graph1, #MainContent_Listbox1, #MainContent_Listbox2, #MainContent_Listbox3, #MainContent_Listbox4, #MainContent_Listbox5, #MainContent_Listbox6, #MainContent_Listbox7 {
	display: none;
}
* {
  -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.wrap {
  float: none;
  padding: 2%;
  width: 100%;
}
/* Bar Graph Class */
.barGraph {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 400px;
  margin-bottom: 50px;
}
.graph {
  position: relative;
  z-index: 200;
  list-style-type: none;
  border-bottom: 1px solid #808080;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 310px;
}
.barGraph h3 {
	clear: both;
	display: block;
	padding: 2%;
	width: 100%;
	border-bottom: 1px solid #808080;
	border-top: 1px solid #808080;
	text-align: center;
}
.graph-wrapper {
	display: block;
	position: relative;
	width: 100% !important;
	margin: 10px;
}
.group-graphs {
	display: block;
	width: 100%;
}
/*container bar*/
.graph-barBack {
  border-radius: 2px 2px 0 0;
  background: #DAE4EB;
  margin-right: 10px;
  display: block;
  float: left;
  height:300px;
  width: 6.3%;
  margin:10px;
  transform:rotate(180deg);
}

.group-graphs p {
	clear: both;
	display:inline-block;
	width: 100px;
	text-align: center;
}
/*dynamic bar*/
.graph-bar {
  background-color: #59BAC0;
  -webkit-transition: all 1s ease-out;
     -moz-transition: all 1s ease-out;
       -o-transition: all 1s ease-out;
          transition: all 1s ease-out;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 9999;
  display: block;
  width: 100%;
  height: 0;
}
.graph-bar:hover {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
  background: #428D92;
}
.graph-bar:last-child {
  margin-right: 0;
}
.graph-bar:before {
	padding-bottom: 50px;
	position: relative;
	text-align: center;
	content: attr(data-lic-valid);
	font-weight: 600;
	display: block;
	color: #FF0D00;
	font-size: 1.1em;
	width: 80%;
	transform: rotate(180deg);
	top: 100px;
	left: 12px;
}
.graph-bar:after {
  padding-bottom: -100px;
  text-align: center;
  font-weight: 600;
  font-size: 1.1em;
  content: attr(data-value);
  display: block;
  transform: rotate(180deg);
  color: #000000;
  width: 80px;
  top: 100%;
  left: 0;
}
.group-graphs li p {
	width: 6.3%;
}

.trend line {
  stroke: rgba(204, 51, 51, 0.8);
}