:root { 
	--color-black:#000000;
	--color-white: #ffffff;
	--color-nav-background: #FCB714;
	--color-footer-background: #E1E6E9;
	--color-background:#EBEEF0;
	--color-gray-light: #E1E6E9;
	--color-gray-semilight: #BECAD0;
	--color-gray-medium: #81888d;
	--color-gray-dark: #5e6164;
	--color-blue-dark: #091F40;
	--color-blue-medium: #027CC3;
	--color-blue-light:#64BDF2;
	--color-blue-light: #79C8FF;
	--color-blue-light: #73CCFF;
	--color-blue-light: #5DB9FA;
	--color-blue-light: #81D1FF;
	--color-blue-light: #69C7FD;
	
	--color-blue-light: #68BEFB;
	



	--color-red:#FF3B30;
	--color-orange:#FF8800;
	--color-yellow:#FFCC00;
	--color-green: #3BA73D;
	--color-blue: #259BF0;

	--navbar-height: 44px;
	--footer-height: 90px;

	--text-size-small: 17px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
	--text-size-medium: 20px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
	--text-size-large: 24px/28px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;
	--text-size-giant: 28px/32px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;
	--max-width: 520px;
	--border-radius: 8px;
	--box-shaddow: 0 1px 3px rgba(0,0,0,0.1) !important;
}


html, body {
  height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  margin: 0;
}

body {
  padding: 0;
  background-color: var(--color-background);
}
nav {
	width: 100%;
	box-sizing: border-box;
//	height: 100dvh;
	position: fixed;
	top: 0;
	background-color: var(--color-nav-background);
	}		
footer {
	width: 100%;
	height: var(--footer-height);
	background-color: var(--color-footer-background);
	}
h2 {
	font: bold var(--text-size-large);
	margin: 0 0 24px 0;
	}
h3 {
	font: bold var(--text-size-large);
	margin: 0 0 24px 0;
	}
p {
	font: var(--text-size-medium);
	margin: 0 0 24px 0;
	}
a {
	color: var(--color-blue-medium);		
	}
	a:hover {
		color: var(--color-nav-background);
		text-decoration: underline;
		}

/* 	TEXT SIZES   * * * * * * * * * * * * * * * * * * * * * * * * * * * */		
	
	.text-size-small {
		font: var(--text-size-small);
		color: var(--color-black);
//		margin: 0 0 18px 0 !important;
		} 
	.text-size-medium {
		font: var(--text-size-medium);
		color: var(--color-black);
//		margin: 0 0 21px 0 !important;
		}
	.text-size-large {
		font: var(--text-size-large);
		color: var(--color-black);
//		margin: 0 0 18px 0;
		} 
	.text-size-giant {
		font: var(--text-size-giant);
		color: var(--color-black);
		margin: 0;
		}
			
/*  TEXT LAYOUTS  * * * * * * * * * * * * * * * * * * * * * * * * * * * */		
	
	.text-align-center {
		text-align: center;
		}
		
	
/*  TEXT COLORS  * * * * * * * * * * * * * * * * * * * * * * * * * * * */		
	
	.text-color-dark {
		color: var(--color-gray-dark);
		}
	.text-color-medium {
		color: var(--color-gray-medium);
		}
	.text-color-light {
		color: var(--color-gray-semilight);
		}





.label {
	margin: 0;	
	color: var(--color-gray-medium);
	}

.card {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shaddow);
	margin-bottom: 16px;
	}
	
.card-add-link {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shaddow);
	margin: 24px 0 32px 0;
	padding: 16px;
	}
	.card-add-link p {
		padding: 0 !important;
		margin: 0 !important;
		color: var(--color-black);
		}	
	.card-add-link a {
		text-decoration: underline;
		color: var(--color-black);
		}	


.screen_container {
	top: 0;
	position: fixed;
	height: 100dvh;
	width:100%;
	min-width: 360px;
	overflow: scroll;
	background-color: var(--color-background);
	}

.content_container {
	box-sizing: border-box;
	padding-top: 44px; /* your navbar space */
	/* Fill the visible viewport minus your footer height */
	min-height: calc(100svh - 90px);
//	min-height: calc(-webkit-fill-available - 90px);
	/* Ensure content reaches into/past the home-indicator area */
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	}
	.content_span {
		width: 100px;
		background-color: var(--color-blue-light);
		margin: 0;
		}
	.content_centered {
		margin: 0 auto 0 auto;	
		max-width: var(--max-width);
		}
	.content_centered_padded {
		margin: 0 auto 0 auto;	
		padding: 16px 16px 16px 16px;
		max-width: var(--max-width);
		}
	.content_header_padded {
		margin: 0 auto 0 auto;	
		padding: 18px 16px 18px 16px;
		max-width: var(--max-width);
		}

	#content_nearby_home {
		margin: 0 auto 0 auto;	
		padding: 16px 16px 4px 16px;
		max-width: var(--max-width);
		}


.body_container {
	overflow-y: auto; 
	}
	
.header_container {
	background-color: var(--color-blue-light);
	}
	.header_content {
		padding: 16px 16px 16px 16px;	
		margin: 0 auto 0 auto;
		max-width: var(--max-width)	
		}
		.header_container p {
			font: var(--text-size-medium);
			color: var(--color-blue-dark);
			margin: 0;
		}
		.header_container h2 {
			font: bold var(--text-size-large);
			color: var(--color-blue-dark);
			margin: 0;
		}
		.header_container h1 {
			font: bold var(--text-size-large);
			color: var(--color-blue-dark);
			margin: 0;
		}
	
		
.navbar {
	position:fixed;
	left: 0;
	height:44px;
	top:0;
	padding-top: 0;
	background-color: var(--color-nav-background);
	text-align:center;
	width:100%;	
	min-width: 360px;
	box-sizing: border-box;
//	z-index: 10;
	}		
	.navbar a {
		color: var(--color-black);
		text-decoration: none;
		}
	.navbar_button {
		padding-left: 4px;
		width: 44px;
		height: 44px;
		float:left;
		filter: invert(100%);
		}
	.navbar_title {
		box-sizing: border-box;
		text-align:center;
		padding: 0;	
		margin: 9px 50px 0 50px;
		font: bold 20px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
		color: var(--color-black);
		}
		
	.navbar_title h1,
	.navbar_title h2 {
		font: bold 20px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
		color: var(--color-black);
		
		
		}
							
		
	.footer_container {
		background-color: #E1E6E9 !important;
		height: 90px;
		box-sizing: border-box;
		}
		.footer_content {
			padding: 12px 16px 12px 16px;
			
			}
		.footer_content p {
			font: var(--text-size-small);
			margin: 0 0 8px 0 !important;
			color: var(--color-gray-medium);
			}
		.footer_content a {
			color: var(--color-gray-medium);
			}
		.footer_content a:hover {
			color: var(--color-black);
			}

//  Nearby Station  //  //  //  //  //  //  //  //  //  //
			
	.nearby_station {}
	
	.nearby_station_card {
		display:block;
		box-sizing: border-box;
		margin: 0 0 16px 0;
		padding: 12px 16px 16px 16px;
		background-color: #fff;
		cursor: pointer;
		}
		.nearby_station_name {
			padding: 0 0 10px 0;
			}
			.nearby_station_name p {
				margin: 0 !important;
				}
		.nearby_station_details {
			display: flex; 
			justify-content: space-between;;
			align-items: bottom;
			height: 28px;
			}
			.nearby_station_distance {
				margin-bottom: 0 !important;
				font: var(--text-size-small);
				text-align: right;
				text-wrap: nowrap;
				padding-top:4px;
				color: var(--color-gray-medium)
				}
		#nearby_message {
			margin: 0 0 -6px 0 !important;
			padding: 16px 0 0 0 !important;
			}
	
	
	.divider_container {
		width: 100%;
		padding: 8px 16px 24px 16px;
		margin: 0;
		}	
		.divider_line {
			max-width: var(--max-width);
			height: 1px;
			background-color: var(--color-gray-semilight)
			}		


		
	.route_name {
					clear: both;
			//		padding: 4px 1px 4px 1px;
					padding: 12px 16px 12px 12px;
					border-bottom: 1px solid #e8e8e8;
			/*		box-sizing: content-box;
			*/	}
			
					.route_name h3 {
						font: bold var(--text-size-medium);
						margin: 0;
					}
			
				.direction_set {
					}
			
				.direction {
					clear:both;
					margin: 0 0 0 16px;
					padding: 16px 16px 16px 0;
					border-top: 1px solid #e8e8e8;
					}
			
					.direction:first-of-type {
						border-top: none;
						}
			/*
					.direction:last-of-type {
						border-bottom:none;
						}
			*/
					.direction:after {
						content: "";
						display: table;
						clear: both;
					}
			
						.direction_name {
							float:left;
							width: 66%;
							padding:left;
							font: var(--text-size-medium);
							}			
						.direction_times {
							float:left;
							width:34%;
							margin: 0;
							padding: 0;
							text-align: right;
							font: var(--text-size-medium);
							color: var(--color-gray-medium);
							}
							.direction_times p,
							.direction_name p {
								display: block;
								}
							.direction_times p span {
								display: block;
								}		
	  .times-group {}
	  .time_comma:last-of-type {
		display:none;
	  }		
		
		
		
.table-title {
		  margin: 0 0 10px 16px;
		  font: 400 15px/20px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
		  color: #777777;
		  text-transform: uppercase;
		  }
	  .table-wrapper {
		  box-sizing: border-box;
		  clear: both;
		  margin: 0 0 32px 0;
		  padding: 0;
		  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		  border-radius: 8px;
		  background-color: #fff;
		  }	
		  .table-wrapper a {
			  color: var(--color-black);
			  text-decoration: none;
			  }	
		  .table-wrapper li {
			  margin:0 0 0 16px;
			  padding: 12px 16px 12px 0;
			  border-top:1px solid #e6e5e4;	
			  list-style: none;
			  line-height: inherit;
			  font: 400 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
			  }
		  .table-wrapper li:first-of-type {
			  border-top: 0;	
			  }
		  .table-cell-stopname {
			  max-width: calc(100vw - 154px);
			  display: inline-block;
			  font: 400 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
			  color: #222222;
			  text-decoration: none;
			  }
	  
		  .table-cell-right-chevron {
			  padding-right: 32px !important;
			  background-position: right center;
			  background-repeat: no-repeat;
			  background-image: url("https://munitime.app/images/ui/chevron-32x32@3x.png"); 
			  background-size: 32px 32px;		
			  }
	  
		  .table-cell {
			  padding-right: 32px !important;
			  background-position: right center;
			  background-repeat: no-repeat;
	  //		background-image: url("https://munitime.app/images/ui/chevron-32x32@3x.png"); 
			  background-size: 32px 32px;
			  cursor: pointer;
			  }
		  
		  
		  .table-cell-id {
			  float:right;
			  vertical-align: middle;
			  max-width: 90px;
			  font: 400 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
			  color: #b6b6b6;
			  }			
		
		.table-cell-no-click {
			cursor: default;

		}


 #add-link-block {
	 display:block;
 }