/* Mobile */

@media (max-width: 768px) {
	
	/* Chloropleth map action */
	#map_traces_container{
		padding-top:5px;
		width:300px;
		height:517px;
		border-bottom:1px #d4d4d4 solid;
		border-top:1px #d4d4d4 solid;
	}

	#map_traces{
		width:300px;
		height:507px;
	}

	#map_traces_map{
		width:300px;
		height:198px;
		display:inline-block;
		vertical-align:bottom;
	}

	.map_map_traces{
		width:289px;
		height:197px;
	}

	#map_traces_text{
		height:110px;
		width:289px;
		padding-top:20px;
		padding-left:5px;
		padding-right:5px;
		font-size:10px;
	}

	#map_traces_chart{
		width:300px;
		height:149px;
		vertical-align:bottom;
	}

	.chart_chart_traces{
		width:289px;
		height:148px;
	}

	/* main event app action */
	
	.states_borders{
	stroke: white;
  stroke-width: 1.5px;
  fill:#f0f0f0;
   /* stroke-dasharray: 1,1;  */
  stroke-linejoin: round;
  stroke-linecap: round;
 
}

.r9-9 { fill:#5d4c6e; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r8-9 { fill:#693261; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r7-9 { fill:#a24b82; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r6-9 { fill:#b35398; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r5-9 { fill:#b3609e; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r4-9 { fill:#a65c95; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r3-9 { fill:#dc7aae; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r2-9 { fill:#f2bed8; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r1-9 { fill:#fbd6f1; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r0-9 { fill:#fbcff1; stroke: #f1f1f1;
  stroke-width: 1.5px;}

.q0-9 { fill:rgb(247,251,255); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q1-9 { fill:rgb(222,235,247); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q2-9 { fill:rgb(198,219,239); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q3-9 { fill:rgb(158,202,225); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q4-9 { fill:rgb(107,174,214); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q5-9 { fill:rgb(66,146,198); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q6-9 { fill:rgb(33,113,181); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q7-9 { fill:rgb(8,81,156); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q8-9 { fill:rgb(8,48,107); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q9-9 { fill:rgb(8,48,107); stroke: #f1f1f1;
  stroke-width: 1.5px;}

.small_year{
	font-size:x-small;
	line-height:0%;
}

.rect{
	fill:#f5c944;
}
.rect:hover {
  fill: #f5af6b;
  cursor:pointer;
}

fieldset {
border: 0;
display:inline-block;
margin: 0;
padding:0;
}

#pipeline_slider_title{
	padding-top:5px;
}

#pipeline_interactive, #pipeline_interactive_container{
	width:300px!important;
}
#pipeline_map{
	width:200px !important;
	padding-left:0 !important;
	background-image:url(../images/pipeline_arrow_mobile.png) !important;
	
}
#pipeline_slider{
	width:64px !important;
}

#pipeline_chart{
	width:300px !important;
	display:default !important;
	margin-right:0 !important;
	padding-right:0 !important;
}

#pipeline_stats_data6, #pipeline_stats_data5, #pipeline_stats_data4, #pipeline_stats_data3, #pipeline_stats_head3, #pipeline_stats_head2{
		display:none !important;
	}
#pipeline_stats, #pipeline_stats_head1{
	display:none !important;
}
 


.destinations_nav{
	font-size:10px;
	margin:0 !important;
	padding:0;
}

.origins_nav{
	font-size:10px;
	margin:0 !important;
}

.ui-menu-item{
	font-size:10px !important;
}

.ui-selectmenu-button, .ui-selectmenu-text{
	padding: 0.1em .1em 0.1em .1em !important;
}

}

@media (min-width: 769px) {
	
/* Desktop style */

/* main app */

/* styling used throughout */
.small_year{
	font-size:x-small;
	line-height:0%;
}

.rect{
	fill:#f5c944;
}
.rect:hover {
  fill: #f5af6b;
  cursor:pointer;
}

fieldset {
border: 0;
display:inline-block;
margin: 0;
padding:0;
}




/* interactive divs */
#pipeline_interactive_container{
	width:100%;
	height:590px;

}
#pipeline_interactive {
	width:1024px;
	height:590px;
	border-top:1px #d4d4d4 solid;
	margin:0 auto;
}

/* navigation */
#origin_navigation{
	width:500px;
	padding-top:25px;
	height:25px;
	display:inline-block;
	padding-left:50px;
	vertical-align:middle;

}

#destination_navigation{
	width:457px;
	padding-top:25px;
	height:25px;
	display:inline-block;
	vertical-align:middle;

}

.destinations_nav{
	font-size:10px;
	margin:0 !important;
	padding:0;
}

.origins_nav{
	font-size:10px;
	margin:0 !important;
}

.ui-menu-item{
	font-size:10px !important;
}

.ui-selectmenu-button, .ui-selectmenu-text{
	padding: 0.1em .1em 0.1em .1em !important;
}

.state_navigation_text{
	font-size:18px;
	font-weight:bold;
	vertical-align: middle;
}
/* slider title */

#pipeline_slider_title{
	padding-left:310px;
	width:calc(100% - 430px);
	margin-top:10px;
	height:20px;
	color:#598ea4;
}

	
}
/* it begins; the map */
#pipeline_map{
	width:350px;
	padding-left:50px;
	height:300px;
	display:inline-block;
	background-image:url(../images/pipeline_arrow.png);
}

/* slider */
#pipeline_slider{
	width:124px;
	height:300px;
	display:inline-block;
	
	vertical-align:top;
}

#pipeline_slider_container{
	width:100%;
	height:319px;
}


#pipeline_slider_hand{
	width:calc(100% - 27px);
	padding-left:27px;
	height:43px;
	padding-bottom:15px;
	
}

#pipeline_slider_container_container{
	width:100%;
	height:205px;
	
	padding-top:20px !important;
}

#pipeline_slider_slider{
	left:30px !important;
	width:8px;
	height:160px;
	margin-left:0 auto!important;
	margin-right:0 auto!important;
	position:default !important;
}



.ui-slider-handle{
	background-image:url(../images/glock.png) !important;
	background-color:transparent !important;
	border: 0!important;
	width:62px !important;
	height:180px !important;
	left:-19px !important;
}

a .ui-slider-handle, .ui-state-default, .ui-widget-content, .ui-slider-vertical, .ui-slider{
	noFocusLine: expression(this.onFocus=this.blur()) !important;
	outline:0 !important;
	cursor: pointer !important;
}

.ui-slider-range {
	background-color:white !important;
	background-image:none !important;
}
.x{
	font-size:10px;
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}


/* chart */
#pipeline_chart{
	padding-right:150px;
	width:350px;
	height:300px;
	display:inline-block;
	vertical-align:top;
	font-family:Arial;
}

#pipeline_chart_title{
	width:98%;
	height:16px;
	vertical-align:bottom;
	bottom:0;
	padding-top:5px;
	font-family:Arial;
}

.d3-tip {
 line-height: 1;
  font-weight: bold;
  padding: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

.tiptext {
 	fill:#5d5d5d;
 	font-size:11px;
 	font-family:helvetica
}

#pipeline_chart_chart_container {
	width:100%;
}
#pipeline_chart_chart_title{
	margin-bottom:-5px;
	text-align:center;
	bottom:0px;
	height:20px;
	font-size:14px;
	vertical-align:bottom;
	padding-top:17px;
	width:calc(100% - 35px);
	
}
#pipeline_chart_chart{
	width:calc(100% - 15px);
	height:225px;
	padding-top:10px;
	vertical-align:bottom;
	font-family:Arial;
	display:inline-block;
}

#pipeline_chart_source{
	width:100%;
	height:15px;
	vertical-align:top;
	font-family:Arial;
	font-size:10px;
	line-height:22px;
	color: #909dbb;
	text-align:center;
}



#pipeline_stats{
	margin-top:10px;
	width:1024px;
	height:110px;
}

#pipeline_stats_head{
	height:20%;
	width:100%;
	border-bottom:1px #d4d4d4 solid;
		font-family:Arial;
}

#pipeline_stats_head1{
	width:33%;
	height:100%;
	display:inline-block;
	text-align:center;
	bottom:0;
	font-size:14px;
	line-height:25px;
}
#pipeline_stats_head2{
	width:33%;
	height:100%;
	display:inline-block;
	text-align:center;
	bottom:0;
	font-size:14px;
	line-height:25px;
}
#pipeline_stats_head3{
	width:33%;
	height:100%;
	display:inline-block;
	bottom:0;
	text-align:center;
	font-size:14px;
	line-height:25px;
}

.pipeline_stats_data_head_year{
	width:calc(16.66% - 1px);
	height:18%;
	display:inline-block;
	text-align:center;
	font-size:13px;
	line-height:30px;
}

.pipeline_stats_data_head_year1{
	width:calc(16.66% - 2px);
	height:18%;
	display:inline-block;
	text-align:center;
	font-size:13px;
	line-height:30px;
}


#pipeline_stats_data_data{
	height:80%;
	
	}

#pipeline_stats_data1{
	display:inline-block;
	width:calc(16.6% - 1px);
	height:calc(60% - 35px);
	padding-top:15px;
	padding-bottom:10px;
	font-size:19px;
	text-align:center;
	
}

#pipeline_stats_data2{
	display:inline-block;
	width:calc(16.7% - 2px);
	height:calc(60% - 35px);
	vertical-align:top;
	padding-top:15px;
	padding-bottom:10px;
	font-size:19px;
	text-align:center;
}

#pipeline_stats_data3{
	display:inline-block;
	width:calc(16.7% - 1px);
	height:calc(60% - 35px);
	vertical-align:top;
	padding-top:15px;
	padding-bottom:10px;
	font-size:19px;
	text-align:center;
}

#pipeline_stats_data4{
	display:inline-block;
	width:calc(16.7% - 1.5px);
	height:calc(60% - 35px);
	vertical-align:top;
	padding-top:15px;
	padding-bottom:10px;
	font-size:19px;
	text-align:center;
}

#pipeline_stats_data5{
	display:inline-block;
	width:calc(16.6% - .5px);
	height:calc(60% - 35px);
	vertical-align:top;
	padding-top:15px;
	padding-bottom:10px;
	font-size:19px;
	text-align:center;
}

#pipeline_stats_data6{
	display:inline-block;
	width:calc(16.6% - .5px);
	height:calc(60% - 35px);
	vertical-align:top;
	padding-top:15px;
	padding-bottom:10px;
	font-size:19px;
	text-align:center;
}



.states_borders{
	stroke: white;
  stroke-width: 1.5px;
  fill:#f0f0f0;
   /* stroke-dasharray: 1,1;  */
  stroke-linejoin: round;
  stroke-linecap: round;
 
}

.r9-9 { fill:#5d4c6e; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r8-9 { fill:#693261; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r7-9 { fill:#a24b82; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r6-9 { fill:#b35398; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r5-9 { fill:#b3609e; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r4-9 { fill:#a65c95; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r3-9 { fill:#dc7aae; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r2-9 { fill:#f2bed8; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r1-9 { fill:#fbd6f1; stroke: #f1f1f1;
  stroke-width: 1.5px;}
.r0-9 { fill:#fbcff1; stroke: #f1f1f1;
  stroke-width: 1.5px;}

.q0-9 { fill:rgb(247,251,255); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q1-9 { fill:rgb(222,235,247); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q2-9 { fill:rgb(198,219,239); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q3-9 { fill:rgb(158,202,225); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q4-9 { fill:rgb(107,174,214); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q5-9 { fill:rgb(66,146,198); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q6-9 { fill:rgb(33,113,181); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q7-9 { fill:rgb(8,81,156); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q8-9 { fill:rgb(8,48,107); stroke: #f1f1f1;
  stroke-width: 1.5px;}
.q9-9 { fill:rgb(8,48,107); stroke: #f1f1f1;
  stroke-width: 1.5px;}



.states_from{
  stroke: white;
  stroke-width: 1.5px;
  fill: #7a4c6e;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.states_to{
  stroke: white;
  stroke-width: 1.5px;
  fill: #2d698b;
  stroke-linejoin: round;
  stroke-linecap: round;
}



/*  Chloropleth trace map styling */


#map_traces_container{
	padding-top:34px;
	width:100%;
	height:302px;
	vertical-align:middle;
	border-bottom:1px #d4d4d4 solid;
	border-top:1px #d4d4d4 solid;
	

}


#map_traces{
	width:1024px;
	height:300px;
	margin: 0 auto;
}

#map_traces_map{
	width:364px;
	height:300px;
	display:inline-block;
	vertical-align:bottom;
}

.map_map_traces{
	width:363px;
	height:240px;
}

#map_traces_text{
	height:280px;
	width:153px;
	padding-left:25px;
	padding-right:25px;
	display:inline-block;
	font-size:10px;
	padding-top:20px;
}

#map_traces_chart{
	width:447px;
	height:300px;
	display:inline-block;
	vertical-align:bottom;
}

.chart_chart_traces{
	width:447px;
	height:220px;
}

}