#trendData {
	max-width : 300px !important;
}

svg {
	font: 10px sans-serif;
}

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

.x.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.line {
	fill: none;
	stroke-width: 2px;
}

.col-md-3 select {
	width: 100%;
}

.button-container {
	text-align:center;
	width: 100%;
}

.button-container>* {
	cursor: pointer;
    width: 90px;
}

#map {
	text-align: center;
}

h2 {
	font-size: 20px;
}

#dataTable {
	margin-top: 20px;
}

#dataTable tr:nth-child(2) {
	font-weight : bold;
}

#legendTitle, #txtTotal {
	font-size: 0.9em;
}

#txtTotal {
	height : 40px;
	text-align:left;
}

#legendData {
	max-width: 300px;
}

.slider-container input {
	margin-top : 8px;
	cursor : pointer;
}

.slider-container > label {
	width: 100%;
	padding:0px 15px;
	text-align:left;
}

#sliderStart, #sliderEnd {
	font-size : 0.8em;
	font-weight : normal;
	margin-top:4px;
	padding : 0px 15px;
}

#sliderStart {
	float:left;
}

#sliderEnd {
	float:right;
}

.world-container {
    position: absolute;
    right: 50px;
    top: 5px;
    z-index: 1000;
    padding: 8px;
    background: white;
    border-radius: 6px;
    font-size: 0.9em;
    border: solid thin silver;
    background-color: white;
}


/* The slider itself */
#slider {
  appearance:none;
  -webkit-appearance : none;
  -moz-appearance: none;

  transition: .2s;
  -webkit-transition: .2s; 
  -moz-transition: opacity .2s;
  
  cursor: pointer; /* Cursor on hover */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
}

/* Mouse-over effects */
#slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

#slider::-webkit-slider-runnable-track {
  appearance:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  height: 12px;
  background: #d3d3d3;  
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#slider::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  width: 15px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius:3px;
  background: rgb(50,130,190); 
}

#slider::-webkit-slider-thumb {
  margin : -7px 0px;
}

#slider::-moz-range-thumb {
  appearance:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  width: 15px; /* Set a specific slider handle width */
  height: 26px; /* Slider handle height */
  border-radius:3px;
  background: rgb(50,130,190); 
}

#slider::-moz-range-track {
  appearance:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  height: 12px;
  background: #d3d3d3;  
}

#slider::-ms-track {
  overflow:visible;
  appearance:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  height: 12px;
  background: #d3d3d3;  
  
  border-left:solid 14px transparent;
  border-right:solid 14px transparent;
}

#slider::-ms-fill-lower {
	height: 8px;
	background: army-green;
}

#slider::-ms-fill-upper {
	background: beige-yellow;
}

@media only screen and (max-width: 991px) {
	#textarea {
		margin-top: 20px;
	}
}

@media only screen and (min-width: 991px) {
	.charts-col {
		padding: 0px;
	}
}
	
@media only screen and (max-width: 525px) {
	/*
	.btn-info {
		margin: 5px 0px!important;
		width: 100%!important;
	}
	*/
	.button-container > * {
		width: 40px;
	}

	.inner-button {
		display:none;
	}
	
	.world-container {
		position: relative;
		display:block;
		right: initial;
		top: initial;
	}
}