html {
	scroll-behavior: smooth;
	}

.button-18 {
  align-items: center;
  background-image: linear-gradient(-180deg, #37AEE2 0%, #1E96C8 100%);
  border: 0;
  border-radius: 10px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  line-height: 30px;
  
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  touch-action: manipulation;
  
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
	
	opacity:1.0;
	z-index:100;
}

.button-18:hover,
.button-18:focus { 
  background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%);
  color: rgb(255, 255, 255,1.0);
}

.button-18:active {
  background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 50%);
  color: rgb(255, 255, 255,1.0);
	
}

.button-18:disabled { 
  cursor: not-allowed;
  background: rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, 1.0);
}

.data-icon 
{	
	display:block;
	float:left;
	overflow: auto;
	padding: 15px;
	background-color: #f0f3f8;
	border-radius:10px;	
	box-sizing: border-box;
	width:100%;
}

.data-icon strong 
{    
	
	line-height:1.5rem;	
    font-size: 2rem;
	font-weight:600;
	padding-left:5px;
	width:100%;
}

.data-icon.fixed-height {
	height: 190px;
}

.data-icon strong.center
{    
	display:block;
	line-height:1.5rem;	
    font-size: 2rem;
	font-weight:600;
	padding-left:5px;
	width:100%;
}

.data-icon span.data
{    
	float:left;
    font-size: 4rem;
	font-weight:500;
	margin-top:10px;
	margin-bottom:5px;
	width:100%;
	color:#617fb8;
}

.data-icon span.compare 
{
	float:left;
  font-size:2rem;	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:100%;
}

.data-icon img.lock
{
	display:block;
	height:64px;
	display: block;
	margin: 20px auto;
	
}

.row-grid 
{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}


.row-grid .s4 
{
    grid-column: auto / span 4;
}

.dt-icon 
{
	float:left;
	width: 32px;
	height: 24px;
	
}

#dt-pop
{
	background-color:red;
	width:16px;
	stroke:#bbb;
}

.grid-card-container {
	display: grid;
	grid-template-columns: 50% 25% 25%;	
	padding:5px;	
	background-color:#f0f3f8;
	border-radius:10px;
}

.flex-card-layout {
	
	display:grid;
	grid-template-rows: 1fr auto auto;/* repeat(3, 1fr); */
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: column;
	gap:5px;
	margin:20px 0;
}

.flex-card-layout.col-2 
{	
	grid-template-columns: repeat(2, 1fr);	
}

.grid-card
{	
	padding:5px;		
	/* box-sizing: border-box; */
	
	font-size: 10pt;
	/* text-align: left; */	
		
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;		
}

.grid-card.icon
{	
	background-repeat: no-repeat;
	background-size: 16px auto;
	background-position: center;		
}

.grid-card.icon.walking
{	
	background-image: url( '/images/pedestrian.svg' );	
}

.grid-card.icon.driving
{	
	background-image: url( '/images/car.svg' );		
}

.grid-card.center
{	
	text-align:center;
}

.lock-small
{
	display:block;
	height:24px;
	display: block;
	margin: 10px 0;
}

.min-lock
{
	font-size:24px;
	color:#2D80B1;
}

.msg-box
{
		background-color:#eeffee; border:2px solid #c1f2c1; padding:20px; font-weight: 600; border-radius: 10px;
		text-align:center;
}

.ct-chart 
{		
	position:relative;
	width:100%;
}

.area-income
{
	position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	padding:50px;
	background-color:white;
	opacity: 0.95;
	font-size:18px;
}

.ct-series-a .ct-bar {
  fill: none;
  stroke-width: 25px;	
	stroke: #617fb8;	
}

.ct-series-b .ct-bar {
  fill: none;
  stroke-width: 25px;
	stroke: #7899d0;
}

.ct-series-c .ct-bar {
  fill: none;
  stroke-width: 25px;
	stroke: #a0bcea;
}

.ct-label {
  font-size: 12px;
	color: #555;
}

.ct-chart-bar
{
	padding-right:15px;
	padding-top:10px;
	background-color:#f0f3f8;
	border-radius:10px;
}

/* -------------------------	chartist legend plugin CSS --------------------------*/
.ct-chart {
   position: relative;
}
.ct-legend {	
   position: relative;
   z-index: 10;
   list-style: none;
   text-align: center;
   
}
.ct-legend li {
   position: relative;
   padding-left: 23px;
   margin-right: 10px;
   margin-bottom: 3px;
   cursor: pointer;
   display: inline-block;
	 line-height:40px;
}
.ct-legend li:before {
   width: 12px;
   height: 12px;
   position: absolute;
   left: 0;
   top:14px;
   content: '';
   border: 3px solid transparent;
   border-radius: 2px;
	 
}
.ct-legend li.inactive:before {
   background: transparent;
}
.ct-legend.ct-legend-inside {
   position: absolute;
   top: 0;
   right: 0;
}
.ct-legend.ct-legend-inside li{
   display: block;
   margin: 0;
}
.ct-legend .ct-series-0:before {
   background-color: #617fb8;
   border-color: #617fb8;
}
.ct-legend .ct-series-1:before {
   background-color: #82a4db;
   border-color: #82a4db;
}
.ct-legend .ct-series-2:before {
   background-color: #a0bcea;
   border-color: #a0bcea;
}
.ct-legend .ct-series-3:before {
   background-color: #d17905;
   border-color: #d17905;
}
.ct-legend .ct-series-4:before {
   background-color: #453d3f;
   border-color: #453d3f;
}

.ct-chart-line-multipleseries .ct-legend .ct-series-0:before {
	background-color: #d70206;
  border-color: #d70206;
}

.ct-chart-line-multipleseries .ct-legend .ct-series-1:before {
  background-color: #f4c63d;
  border-color: #f4c63d;
}

.ct-chart-line-multipleseries .ct-legend li.inactive:before {
  background: transparent;
}
/* -------------------------	chartist legend plugin CSS --------------------------*/


/* -------------------------	responsive code --------------------------*/

@media (width <= 1024px) {
		body {
			margin:10px;
		}
}	

@media (width <= 768px) {
	#msb  {
		padding-top:5px;
	}
	
	.search-box svg {
		top:6px;
	}
}
	
@media (width <= 800px) 
{
  .data-icon strong {
    font-size: 16px;
	}	
	
	.data-icon span.compare {
		font-size: 16px;
	}
	
	.key-findings {
		padding:2rem 1.5rem;
	}
	
	.key-findings h2 {
		font-size: 21px;
	}
	
	.page-header h1 {
		font-size:24px;
	}
}

@media (width <= 680px) 
{
	.row-grid {
		grid-template-columns: none;
	}
	
  .data-icon strong {
    font-size: 24px;
		
	}	
	
	.data-icon span.compare {
		font-size: 21px;
	}
	
	.key-findings h2 {
		font-size: 18px;
	}
	
	#mobile-chart
	{
		display:none;
	}
}


	#nav {	
		background-color:#eaf1ff;
		width:100%;
		height:50px;
		display:block;
		border-radius: 10px;
	}
	#nav ul {
		z-index:1000;
		/*border:1px solid #CCC;*/
		border-radius:10px;
	}
	#nav li {
		float:left;
		position:relative;
		width:12.5%;	/*allows for 8 top menu items*/
		margin:0;
		
		line-height:50px;	
		list-style-type: none;
	}
	#nav a {
		display:block;
		text-align:center;
		padding:0px 10px;
		margin:0;
		color:#555;
		font-size:10pt;
		font-weight:600;
		height:100%;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		outline:0;	
		text-decoration:none;
		color:#2d80b1;
	}

	#nav a:hover {
		overflow:visible;
		background-color:#279fd2;
		border-radius:10px;
		color:white;
	}	
	
.data-icon span.data {
    float: left;
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 5px;
    width: 100%;
    color: #617fb8;
}	

.center, .center-align {
    text-align: center;
}
.data-icon span.step {
    float: left;
    width: 20%;
    text-align: center;
}

.green.lighten-1 { background-color:#66bb6a; }
.green.lighten-2 { background-color:#81c784; }
.yellow.lighten-1 { background-color:#ffee58; }
.orange.lighten-2 { background-color:#ffb74d; }
.orange.darken-1 { background-color:#fb8c00; }
	
span.line-height
{
	line-height:30px;
}

.data-icon .panel
{
	float:left;	
	width:50%;
	border-right:1px solid lightgray;
	margin-top:10px;
}

.data-icon .panel:nth-child(odd)
{
	border-right:none;
}		


div.scrollmenu 
{
	overflow: auto;
	white-space: nowrap;
	scrollbar-color: #cfd8ea #f0f3f8;
	scrollbar-width: thin;
	padding-bottom:7px;
}

div.scrollmenu a {
	background-color: #617FB8;
	display: inline-block;
	color: white;
	text-align: center;
	padding: 10px;
	margin:0 5px;
	text-decoration: none;
	border-radius:10px; 
}

div.scrollmenu a:hover {
	background-color: #73a5c3;
}