/* --- vis --- */

rect.background{
	fill: #F2EFED;
}

path {
  fill: #FFFFFF;
  stroke: #F2EFED;
  stroke-width: 0.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.arrow_box:before {
	border-width: 13px;
	margin-top: -13px;
}
.arrow_box:after {
	border-width: 12px;
	margin-top: -12px;
}

/* -- legend -- */
.legend svg{
	width: 220px;
	height: 110px;

}

.legenddiv {
	position:absolute;
	top: -120px;
	right: 15px;
	width: 240px;
	height:auto;
	color:#838383;
	background:#F2EFED;
	padding:0;
	display:none;

}
.legendItem text{
	fill: #838383;
	font-size: 12px;
}

/* -- scroller styles -- */

#questions {
	position:absolute;
  	padding-top: 40px;
	z-index: 110;
}
#sections {
	position: relative;
}
#sectionq00{
	margin-top: 0px;
	pointer-events: all;
}
#sectionq00 ol{
	padding-left: 10px;
}
#sectionq00.step{
	font-size: 16px;
}
.step {
	margin-bottom: 30px;
	padding-bottom:30px;
	font-size: 15px;
	font-weight: bold;
	line-height: 23px;
	color: #333333;
	/*width:530px;*/
}

.theme-title{
	line-height: 125%;
	font-size: 12px;
	margin: 0;
	padding-top:2px;
	color: #000;
	text-transform: uppercase;
}
#vis{
	position: relative;
	top:240px;
	z-index: -1;
	pointer-events:all;
	margin-left: 0;
	background:#F2EFED;
	border-top: 1px #000 solid;
}
#extra-space{
	height: 600px;
}
.surveyvis-header{
	display:block;
	background: #F7F5F4;
	height:auto;
	padding: 3px 0 2px 5px;
	margin-top:0px;
	z-index:120;
  	border-top: 1px #DBDBDB solid;
}
.surveyvis-header .row .col-md-5 {
	padding:6px;
	height:auto;
}
.surveyvis-header .row .col-md-3 {
	padding:6px 10px 4px;
	height:auto;
}
.fixed-container {
  	z-index: 100;
  	position: relative;
  	left: 0;
  	right: 0;
}

#close{
	display: block;
	width: 16px;
	height: 16px;
	background: url('../img/ic_detail_close_normal.png') bottom;
	text-indent: -99999px;
}
#close:hover{
	background: url('../img/ic_detail_close_hover.png') bottom;
}
#close:active{
	background: url('../img/ic_detail_close_pressed.png') bottom;
}
#scroll{
  	margin: 7px auto 0 auto;
  	left: 0;
  	right: 0;
	display: block;
	width: 36px;
	height: 38px;
	background: url('../img/ic_scroll_normal.png') bottom;
	text-indent: -99999px;
	/*z-index:200;*/
}
#scroll:hover{
	background: url('../img/ic_scroll_hover.png') bottom;
}
/*#legend{
	display: block;
	margin: 0 0 0 20px;
	width: 34px;
	height: 34px;
	background: url('../img/ic_legend_normal.png') bottom;
	text-indent: -99999px;
	border:1px;
}
#legend:hover{
	background: url('../img/ic_legend_hover.png') bottom;
}
#legend:active{
	background: url('../img/ic_legend_pressed.png') bottom;
}*/
#legendclose{
	display:none;
}

.borderleft{
	border-left: 0;
}
.borderright{
	border-right: 0;
}
.no-events{
	pointer-events:none;
}

circle.citycircle, circle.q_circle {
	stroke: #FFF;
	stroke-width: 0.5;
	shape-rendering: geometricPrecision;
}
circle.highlighted-0{
	stroke:#555;
	stroke-width:4px;
}
circle.highlighted-1{
	stroke:#888;
	stroke-width:4px;
}
circle.highlighted-2{
	stroke:#bbb;
	stroke-width:4px;
}
circle.highlighted-3{
	stroke:#FFF;
	stroke-width:4px;
}

circle.mouseover{
	stroke:#BDC3C7;
	stroke-width:2px;
}
circle.selected{
	stroke:#333333;
	stroke-width:2px;
}
#city-info{
	position: fixed;
	left: 20px;
	top: 210px;
	padding:15px;
	font-size: 14px;
	background:#FFF;
    -webkit-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
   	-moz-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
    height:auto;
    color:#646464;
	display:none;
	z-index: 1000;
	pointer-events:all;
}
#city-info .title{
	padding: 10px 0 5px;	
	color: #9D9D9D;
	/*line-height: 95%;*/
}
.city-data{
	/*line-height: 95%;*/
}
.city-name{
	color:#3D3D3D;
	font-size: 15px;
	border-bottom: 1px #dddddd solid;
	padding-top: 2px;
	padding-bottom: 10px;
	margin-bottom: 8px;
	/*line-height: 90%;*/
}
.map-toggle{
	font-family: 'Lato', sans-serif;
	cursor:pointer;
	background: #FF0009;
	height: 30px;
	padding-top:3px;
	margin: 20px 30px 10px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-mozilla-border-radius: 4px;
	border:0;
	color: white;
	text-align: center;
	font-size: 15px;

}
.map-toggle:hover{
	background:#f45f49;
}
.map-toggle:active{
	background:#d63a23;
}

/* autocomplete */
.ui-widget{
	font-family: 'Lato', sans-serif;
}
input {
	height: 30px;
	width: 570px;
	border: 1px #DBDBDB solid;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-mozilla-border-radius: 4px;
	font-family: 'Lato', sans-serif;
	padding-left: 15px;
	font-size: 15px;
	color: #A8A8A8;
}
/* dropdown */
.dropdown{
	font-family: 'Lato', sans-serif;
	z-index: 2000;
}
.dropdown #mainitem, .dropdown #mainitem-sort{
	height:32px;
	margin:0px;
	padding:0;
	cursor:pointer;
	border: 1px #DBDBDB solid;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-mozilla-border-radius: 4px;
	font-size: 15px;
	color: #A8A8A8;
	background: #FFFFFF;
}
.dropdown #mainitem{
	/* width:140px; */
}

.dropdown #mainitem .selected-item{
	padding: 3px 3px 0 10px;
}
.dropdown .split {
	height:30px;
	width:30px;
	padding:0;
	background: url(../img/split_button-small_transparent.png) right top #FF0009 no-repeat;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
}
.dropdown #subitem {
	color: #A8A8A8;
	position:absolute;
	margin-top:0px;
	height:auto;
	background: #FFFFFF;
	padding: 10px 20px;
	-webkit-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
	box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
}
.dropdown #subitem{
	width:130px;
}

.dropdown ul{
	list-style-type: none;
	padding:0px;
	margin: 0px;
	cursor:pointer;
}
.dropdown ul li{
	padding: 4px 0;
}
.dropdown ul li:hover{
	color: #000000;
}
.colourby{
	margin:5px;
	color: #999999;
}
#vis .label{
	font-size: 13px;
    fill: #333333;
    font-weight: normal;	
}
.label-single-horizontal{
	font-size: 15px;
    fill: #333333;
}
.axis-line, .xaxis-line, .yaxis-line {
	stroke: #FFFFFF;
	stroke-width: 1;
}

.labels, .amount{
	font-family: 'Lato', sans-serif;
}

.amount {
	fill: #999999;
}
.amount-line {
	stroke: #999999;
	stroke-width: 1;
}

/* overlay city count */
.overlay {
	background:#FFF;
	display: block;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-mozilla-border-radius: 4px;
  	-webkit-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4);
    position: absolute;
   	left:30px;
    z-index:110;
    pointer-events: all;
}

.overlay .top{
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-mozilla-border-radius: 4px;
	height: 100px;
	background: #FEFDFD;
	color: #000000;
	font-size: 20px;
	padding: 5px 20px;
	text-align: center;
}
.overlay .bottom{
	font-family: 'Lato',sans-serif;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	background: #F44228;
	color: white;
	text-align: center;
	font-size: 1.5rem;
	padding:8px 0px;
}
.overlay .bottom:hover{
	background:#f45f49;
}
.overlay .bottom:active{
	background:#d63a23;
}
.overlay-big{
	color: #F44228;
	font-size: 42px;
	font-weight: normal;
}
.overlay a{
	color: #FFF;
}

/* ----------------- */

.container-large {
    max-width: 100%;
}

@media(min-width:992px){
	#city-info{
		left: 10px;
		top: 130px;
	}
	.borderleft{
		border-left: 1px #DBDBDB solid;
	}
	.borderright{
		border-right: 1px #DBDBDB solid;
	}
	.question-area{
		height:220px;
	}
	#vis{
		border-top:0;
		top:0px;
	}
	.step {
		width:auto;
		pointer-events:all;
		cursor:pointer;
		font-weight: normal;
	}
	.legenddiv{
		top: 43px;
		padding:0 0 20px 0;
		background: #ffffff;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.4);
		box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.4);
		display:none;
	}
	#legendclose{
		display:block;
		font-family: 'Lato', sans-serif;
		text-align:center;
		position:absolute;
		bottom: 0;
		height:24px;
		font-size: 14px;
		width:100%;
		padding-top: 2px;
		cursor:pointer;
		background: #ff0009;
		color:#FFFFFF;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	#legendclose:hover{
		background:#f45f49;
	}
	#legendclose:active{
		background:#d63a23;
	}	
	.legendtoggle{
		display:none;
		margin:0px 10px 10px;
	}
	.next-previous{
		display:block;
		height:34px;
	}
}

@media(min-width:992px){
	.surveyvis-header {
		display:none;
	}
}

@media(min-width:1250px){
	.dropdown #mainitem,.dropdown #subitem{
		width: 180px;
	}
	.colourby{
		margin: 5px 0 0 30px;
	}
	.container-large {
        width: 1600px;
    }
	
}