body {
	min-height: 100vh;
	margin: 0 auto 0 auto;
	padding: 0;
	background-color: #e8e8e8;
//	color: #222222;
	font: 400 21px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	}
		
p {
	margin: 0 0 18px 0;
	color: #222222;
	font: 400 21px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	}
h1 {
	margin: 0 !important;
	font: 700 28px/32px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	}
h2{
	margin: 0 0 12px 0;
	font: 700 24px/28px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	}
h3 {
	font: 700 24px/28px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	}
/*
h4, h5, h6 {
	font: 700 21px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	}
*/

h4, h5, h6 {
	font: 700 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	}
a {
	color: #222222;
	text-decoration: none;
	}
	a:hover {
		color: #ff8800;
//		text-decoration: underline;
		text-decoration: none;
		}
	a img {
		border: 0;
		}
ul {
	margin-bottom: 36px;
	}
li {
	margin: 0;
	line-height: 36px;
	}
	li:hover {
		color: #ff8800 !important;
		text-decoration: none;
		}
	li:hover a {
		color: #ff8800 !important;
		text-decoration: none;
		}
	
.divider {
	padding: 0 16px 0 16px;
	margin: 18px 0 18px 0;
}	

.divider-line {
	width: 100%;
	height: 2px;
	background-color: #E9E9E9;
}	
	
/* 	TEXT SIZES   * * * * * * * * * * * * * * * * * * * * * * * * * * * */		

.text-size-tiny {
	font: 15px/20px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	margin: 0 0 18px 0 !important;
	} 
.text-size-small {
	font: 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	margin: 0 0 18px 0 !important;
	} 
.text-size-medium {
	font: 21px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	margin: 0 0 21px 0 !important;
	}
.text-size-large {
	font: 24px/28px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	margin: 0 0 18px 0;
	} 
.text-size-giant {
	margin: 0;
	font: 28px/32px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;;
	color: #222222;
	}
		
/*  TEXT LAYOUTS  * * * * * * * * * * * * * * * * * * * * * * * * * * * */		

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

/*  TEXT COLORS  * * * * * * * * * * * * * * * * * * * * * * * * * * * */		

.text-color-dark {
	color: #222222;
	}
.text-color-medium {
	color: #777777;
	}
.text-color-semilight {
	color: #909090;
	}
.text-color-light {
	color: #b6b6b6;
	}
.text-color-orange {
	color: #ff8800 !important;
	}
.text-color-blue {
	color: #259BF0 !important;
	}
.color-orange {
	background-color: #ff8800 !important;
	}
.color-blue {
	background-color: #259BF0 !important;
	}
.color-darker-blue {
	background-color: #259BF0 !important;
	}
.color-indigo {
	background-color:  !important;
	}
.color-green {
	background-color: #3cad48 !important;
	}
.color-background-dark {
	background-color: #c9c9c9 !important;
	}
.color-background-medium {
	background-color: #e8e8e8 !important;
	}
.color-background-light {
	background-color: #f5f5f5 !important;
	}







.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 {
		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;		
		}
	
	
	.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;
		}	
	

	
#header {
	position: fixed;
	display:block;
	z-index: 10;	
	}

	#header-menu {
		display:none;
		}
	#header-search {
		display:none;
		height: 44px;
		background-color: #ff9500;
		background-color: #e8e8e8;
			border-bottom: 0.5px solid #c9c9c9;
			border-width:0.5px
		}



.titlebar {
	position:fixed;
	left: 0;
	top:0;
	padding-top: 44px;
	background-color: #ff8800 !important;
	text-align:center;
	width:100%;	
	box-sizing: border-box;
	z-index: 10;
	}
	.titlebar-subpage {
		z-index: 20 !important;
		}

	.wrapper-main .titlebar {
		background-color: #ff8800 !important;
		}
	.wrapper-menu .titlebar {
		background-color: #259BF0 !important;
		}
	.wrapper-customize .titlebar {
		background-color: #259BF0 !important;
		}
	#x-screen-customize .titlebar {
		background-color: #259BF0 !important;
		}
	#x-screen-stoplist .titlebar {
		background-color: #259BF0 !important;
		}
		
		
	.titlebar-menu {
		background-color: #5ac8fa;
		background-color: #259BF0;
		}

	.titlebar-customize {
		background-color: #777777; 
		}
	.titlebar_title {
		box-sizing: border-box;
//		width:100%;
		text-align:center;
		padding: 0;	
		margin: 9px 50px 0 50px;
		font: bold 21px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
		color: #fff;
		}				
		.titlebar_title a, .titlebar_title a:hover {
			color:#fff;
			text-decoration: none;
			}
	.titlebar_button {
		padding-left: 4px;
		width: 44px;
		height: 44px;
		float:left;
		}
	.titlebar_button_right {
		padding-right: 4px;
		width: 44px;
		height: 44px;
		float:right;
		}		

		.title {
			width:100%;
			text-align:center;
			padding: 10px 0 0 0;
			font: 600 19px/24px "helvetica neue",helvetica,arial,sans-serif;
			color: #fff;
			}				
			#titlebar_button-menu {
				z-index: 5;
				}
			#titlebar_button-close { 
				z-index: 99;
				}



@media screen and (prefers-color-scheme: dark) {

	.titlebar_button {
//			filter: invert(100%);
		}

	.titlebar_title {
//		color: #000;
		}				
		
}		




.screen-wrapper {
	background-color: #e8e8e8;
	box-sizing: border-box;
	padding-top:44px;
	width:100%;	
	height:100%;
	overflow: scroll;
	display:none;
	position:fixed;
	top: 0;
	z-index: 40;
	}
	#screen-main {
		box-sizing: border-box;
		margin: 0 auto 0 auto;
		z-index: 0;
		background-color: #f5f5f5;
		}
	#screen-menu {
		width:100%;	
		height:100%;
		overflow: scroll;
		display:none;
		position:fixed;
		top:0;
		z-index: 10;
		}
	#screen-about,
	#screen-locate,
	#screen-faq {}
	#screen-customize {
		width:100%;	
		height:100%;
		overflow: scroll;
		display:none;
		position:fixed;
		top:0;
		background-color: rgba(255,255,255,0.90);
		background-color: #f2f1f0;
		z-index: 80;
		}
	

	
	
	
	
	
	
	
	
	
	
	.content-wrapper {
		background-color: #f5f5f5;
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
		min-height: calc(100vh - 44px - 90px);
		}
		.content {
			margin: 0 auto 0 auto;	color: #222222;		
			background-color: ;
			padding: 20px 16px 12px 16px;
			max-width: 520px;
			}
			#content-predictions {
				}
			 #content-wrapper-home {
				 box-sizing: border-box;
				background-color: #f6f5f4;
				 }
			 #footer-home {
//				display:block;
				}
				
			#content-stoplist {	
				}

		
		.nav-content a {
			color: #777;			
			}

	
		
	.corner-radius {
		border-radius: 8px;
		}
	
	
	
	.footer {
		height: 96px;
		padding: 12px 20px 12px 20px;
		box-sizing: border-box;
		background-color: #e8e8e8;
		}
		.footer p {
			margin: 0 0 8px 0 !important;
			}
		.footer a {
			color: #b6b6b6;
			}
		.footer a:hover {
			color: #777777;
			text-decoration: underline;
			}






/*-- Stop Predications --*/



#stop-header {
	box-sizing: border-box;
	padding: 2px 0 20px 0;
	margin:0;
	}
	#stop-header p {
		margin: 0;
		}



.nearby-item {
	box-sizing: border-box;
	clear: both;
	margin-bottom: 14px;
	padding: 8px 16px 8px 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	border-radius: 8px;
	background-color: #fff;
	}
	.nearby-item .stop-name {
		margin-bottom: 8px !important;
		}
	.nearby-item .stop-distance {
		margin-bottom: 0 !important;
		text-wrap: nowrap;
		}
	.nearby-item .stop-details {
		display: flex; 
		justify-content: space-between; 
		align-items: top;
//		height: 24px;
		}
	.nearby-item .stop-lines {
//		height: 24px;
		}


.prediction-item {
	box-sizing: border-box;
	clear: both;
	margin-bottom: 16px;
	padding: 0 0 2px 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	border-radius: 8px;
	background-color: #fff;
	}
	.prediction-item:after {
		content: "";
		display: table;
		clear: both;
		}
	.prediction-item p,
	.prediction-item h3 {
		margin: 0 0 0 0 !important;
		}

.prediction-message {
	clear: both;
	margin-top: 4px;
	}
	.prediction-message p {
		font: 400 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
		color: #909090 !important;
		}
	.prediction-message a {
		color: #909090 !important;
		text-decoration: underline;
		}
	.prediction-message a:hover {
//		color: #ff8800 !important;
		text-decoration: underline;
		}

	.route-name {
		clear: both;
		padding: 10px 16px 10px 12px;
		border-bottom: 1px solid #e8e8e8;
		}
	.route-name h2{
		padding: 0;
		margin: 0;
		}

	.direction {
		clear:both;
		margin: 0 0 0 16px;
		padding: 8px 16px 8px 0;
		border-top: 1px solid #e8e8e8;
		}
	.nearby-stop {
		clear:both;
		margin: 0 0 0 16px;
		padding: 10px 16px 10px 0;
		border-top: 1px solid #e8e8e8;
		}


		.nearby-stop a,
		.direction a {
			text-decoration: none;
			}


		.nearby-stop,
		.direction:first-of-type {
			border-top: none;
			}
/*
		.direction:last-of-type {
			border-bottom:none;
			}
*/
		.nearby-stop,
		.direction:after {
			content: "";
			display: table;
			clear: both;
			}

			.direction-name {
				float:left;
				width: 66%;
				}			

			.direction-times {
				float:left;
				width:34%;
				margin: 0;
				padding: 0;
				text-align: right;
/*				background-color: #dddddd;
*/				}

/*
			.nearby-stop-icon {
				float:left;
				width: 20%;
				}

			.nearby-stop-name {
				float:left;
				width:80%;
				
				}
*/

				.direction-times p,
				.direction-name p {
					display: block;
					}

				.direction-times p span {
					display: block;
					}

	.searchbar {
		text-align:center;
		width:100%;	
		box-sizing: content-box;
		height: 88px;
		background-color: #e8e8e8;
		}

		.search_form {
			max-width: 295px;
			margin: 0 auto 0 auto;
			padding: 24px 0px 0px 0px;
			}
		.search_label {
			text-align: left;
			background-image: url("/images/ui/spyglass-cccccc-30x30@2x.png");
			background-size: 24px 24px;
			background-repeat: no-repeat;
			background-position: 9px 8px;
			display: inline-block;
			box-sizing: border-box;
			margin: 0;
			padding: 9px 0 0 42px;
			border: 0;
			border-radius: 8px 0 0 8px;
			margin-right: -245px;
			margin-left: -100px;
			width: 245px;
			height: 40px;
			font: normal 21px/28px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
			background-color: #fff;
			color: #ccc;
			}
		.search_input {
			background-color: transparent;
			display: inline-block;
			width: 295px;
			height: 40px;
			box-sizing: border-box;
			margin: 0 0 0 0;
			padding: 3px 3px 0 116px;
			border: 0;
			border-radius: 8px;
			font: normal 18px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;;
			}
		.search_form input[type="submit"] {
			-webkit-appearance: none !important;
			-webkit-border-radius: 0;
			border-radius: 0px 8px 8px 0;
			}
		
			.search_submit_button {
				display:inline-block;
				box-sizing: border-box;
				width: 100px;
				height: 40px;
				color: #fff;
				background-color: #259BF0; 	/* * blue * */
				margin: 0 -100px 0 -100px;
/*				left: -40px;
*/				padding: 0;
				font: bold 18px/24px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;
				border: 0;
				border-radius: 0px 8px 8px 0;
				}
		
			.search_submit_button:active {
				background-color: #33aadc;  /*  iOS  */ 
				}
						
						
						
			.form_button {

				color: #fff;
				background-color:  #259BF0;
				padding: 12px 8px 12px 8px;
				font: bold 18px/24px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;
				border: 0;
				border-radius: 4px;
				
			}
					


				.custom_form p {
					margin: 0 0 0 0;
				}
			
			
			
			
	.search-label {
		vertical-align: middle;
		display:inline-block;	
		font: 400 20px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
		height: 40px;
		line-height: 40px;
		padding-left: 15px;
		box-sizing: border-box;
		color: #999;
		margin-bottom: -38px;
		z-index: 1;
		position: absolute;
		}
								
	.search-input {
		z-index: 1;
		width: 100%;
		height: 40px;
		margin: 0;
		vertical-align: top;
		display:inline-block;
		box-sizing: border-box;
		border: none;
		padding-left:145px;
		border-radius: 12px 12px 12px 12px;
		font: normal 20px/24px -apple-system-body,"helvetica neue",helvetica,arial,sans-serif;
		display: inline-block;
		}		
													
	.search-submit {
		z-index: 10;
		vertical-align: top;
		background: none;
		display: inline-block;
		border: none;
		margin: 0 0 0 -60px;
		padding-left: 15px;
		padding-top: 4px;
		padding-right: 15px;
		padding-bottom: 6px;
		border-radius: 0px 12px 12px 0px;
		background: #259BF0;
		height: 40px;
		width:60px;
		}
								

				
								
								
			
			
			
			
			
				
				
	.customize-box {
		padding:24px 24px 12px 24px; 
		margin: 32px 0 16px 0; 
		border-radius: 8px;				
		}
				.customize-box p {
					margin: 0 0 0 0;
					padding: 0 0 12px 0 !important;
				}
			
				
	.customize-left-label {
		display: inline-block;
		min-width: 40%;
		}				
	
	.customize-input-field {
		box-sizing: border-box;
		border: none !important;
		width: 60%;		
		font: normal 18px/24px -apple-system-headline,"helvetica neue",helvetica,arial,sans-serif;
		}	

	
					
			
			
			

		.notice {
			font: 600 18px/24px "helvetica neue",helvetica,arial,sans-serif;
			color: #aaa;			
			display: block;
			padding: 20px 10px 1px 10px !important; 
			text-align: left;
			}
			.notice a {
				color: #aaa;
				text-decoration:none;							
				}



		
		

	#standalone {
		display:none;
		 box-sizing: border-box;
		 background-color: #f8f8f8; 
		  margin: 16px 12px 20px 12px;
		}
		#standalone section {
			padding: 0 0 20px 0;
			background-color: #fff;
			 box-shadow: 0 1px 2px rgba(0,0,0,0.10);
			 border-radius: 3px;
			}
		#standalone p {
			font: 500 21px/28px "helvetica neue",helvetica,arial,sans-serif;
			}



.link-block {
	padding: 16px; 
	border-radius:8px; 
	background-color:#e8e8e8; 
	margin: 0 0 48px 0;
	}


.page-header {
	background-color: #e8e8e8;
	border-bottom: 1px solid #d6d5d4;
	border-width: 0.5px;
	}