/* * {
	font-family: verdana;
	font-size: 12px;
	margin: 0px;
} */
.left {
	float: left;
}

.right {
	float: right;
}

.cell {
	display: table-cell;
}

.clear {
	clear: both;
}

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

#stop_schedules {
	/*text-align: right;*/
	width:100%;
}
/*New Styles 3/18/2016*/
.panel_heading {
    padding: 10px 15px;
}

#favorites_text {
    padding-left: 15px;
    text-indent: -15px;
    font-family: verdana;
    font-size: 13px;
    font-weight: normal;
}
input[type=checkbox].glyphicon {
    visibility: hidden;
    font-size: 1.3em;
    top: -2px;
}

.glyphicon.glyphicon-star-empty:checked:before {
   content: "\e006";
}

.glyphicon:before {
    visibility: visible;
}

.attractions h4 {
    margin-left: 5px;
    margin-top: 7px !important;
    margin-bottom: 0px !important;
}

.popup-color-box {
	height: 16px;
	margin-left: 5px;
	font-size: 12px;
	line-height: 14px;
	min-width: 25px;
	text-align: center;
}

.popup-color-arrivalbox {
    width: 30px;
    height: 30px;
    margin-top:3%;
    display: inline-block;
    margin-left: 12%;
    border: 1px solid white;
    box-shadow: 0px 0px 1px 1.5px #C3B0B0;
}
h4.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    font-family: verdana;
}
h4.panel-title .fa {
	font-size:	20px; 
}
.clicker {
	cursor: pointer;
	text-decoration: underline;
}

@media (min-width: 767px) {
	#info_width {
		max-width: 350px;
	}
	#choose {
	    width: 150px;
	    height: 27px;
	    margin-left: 50px;
	    margin-top: 4px;
	    font-size: 15px;
	    color: #fff;
	}
	.station {
		font-size: 13px;
		white-space: normal;
	}
	#Schedule_Modal {
	    width: 415px;
	    max-height: 500px;
	    padding-top: 30px;
	    padding-bottom: 30px;
	}
	.alerts {
		margin-left: 335px;
		margin-top: 7px;
		margin-bottom: 2px;
		width: 400px;
		height: 19px;
		display: none;
		position: absolute;
		/* initial state, will be displayed if there are alerts */
	}
	
	.fav_view{
           
           position: fixed;
           right: 9px;
           margin-top: 300px;
    }
	
	.clear_map{
            
           position: fixed;
           right: 10px;
           margin-top: 350px;
    }
	
	button.s_button {
		border: 1px solid #ffffff; /*border color dark blue */
		background: #fff; /*the color of the button is blue */
		padding: 5px 15px; /*add padding inside of the button*/
		-moz-border-radius: 5px; /* add rounded corners */
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); /* add drop shadows */
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
		box-shadow: 0 0 4px rgba(0, 0, 0, .75);
		color: #000; /* text color is white */
		font-size: 1em; /* font size is 1em */
		cursor: pointer; /* change cursor when hover */
	}

	button.s_button:hover, button.s_button:focus {
		border: 1px solid #ef7d00;
		background-color: #ef7d00; /* the background a little darker*/
		color: #fff;
		-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
		/* drop shadow is narrower to give a pushed effect */
		-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
		box-shadow: 0 0 1px rgba(0, 0, 0, .75);
	}
	   
	
	.alerts marquee {
		width: 450px;
		height: 19px;
	}
	
	/* Stop Popup Style */
	.StopInfoContainer {
		overflow: hidden;
		width: 450px;
	}
}
/* Scroller Style */
@media screen and (max-width: 767px) {
	.alerts {
		margin-left: 5px;
		margin-top: 87px;
		margin-bottom: 2px;
		width: 400px;
		height: 19px;
		display: none;
		position: absolute;
		/* initial state, will be displayed if there are alerts */
	}
	.alerts marquee {
		width: 290px;
		height: 19px;
	}
	
	.fav_view{
           position: fixed;
           margin-top: 115px;
		   right : 5px
    }
	
	.clear_map{
           right : 5px;
           position : fixed;
           margin-top: 150px;
    }
	
	button.s_button {
		border: 1px solid #ffffff; /*border color dark blue */
		background: #fff; /*the color of the button is blue */
		
		-moz-border-radius: 5px; /* add rounded corners */
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75); /* add drop shadows */
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
		box-shadow: 0 0 4px rgba(0, 0, 0, .75);
		color: #000; /* text color is white */
		font-size: 1em; /* font size is 1em */
		cursor: pointer; /* change cursor when hover */
	}
	button.s_button:hover, button.s_button:focus {
		border: 1px solid #ef7d00;
		background-color: #ef7d00; /* the background a little darker*/
		color: #fff;
		-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
		/* drop shadow is narrower to give a pushed effect */
		-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
		box-shadow: 0 0 1px rgba(0, 0, 0, .75);
	}

	.get-app {
		display: block;
	}
	
	#Schedule_Modal {
	    width: 375px;
	    max-height: 500px;
	    padding-top: 30px;
	    padding-bottom: 30px;
	}
	
	#Schedule {
		z-index: 1050;
	}

	#choose {
	    margin-top: 4px;
	   font-size: 16px;
	    color: #fff;
		margin-left:15px;
		width:125px;
	}

	.asset-info-eta tbody td {
		font-size: 10px !important;
	}

	.asset-info-container::after {
		display: none;
	}
}

#Schedule_Modal {
	color:#333;
}

#Schedule_Modal .modal-body {
	max-height: 300px;
	overflow-y: auto;
}
.alertHeading {
	height: 19px;
	width: 80px;
}

.alertHeadingText {
	font-size: 16px;
	margin-left: 5px;
	margin-top: 2px;
	font-weight: bold;
}

.alertLightHeadingBar {
	width: 4px;
	height: 19px;
	overflow: hidden;
}

.alertDarkHeadingBar {
	width: 8px;
	height: 19px;
	overflow: hidden;
}

.alerts p {
	font-size: 16px;
	font-weight: bold;
	position: absolute;
}

/* Scroller Style */
/* New Popup Generic Style */
.lightBar {
	width: 20px;
	height: 40px;
	overflow: hidden;
}

.darkBar {
	height: 40px;
	overflow: hidden;
}

div.HeaderBarText {
	font-size: 18px;
	font-weight: bold;
	margin-top: 4px;
	margin-left: 2px;
}

.InfoHeader {
	width: 100%;
	overflow: hidden;
	background-position: left 6px top 6px;
	color: #ddd;
    padding-left: 5px;
}

.route-name {
   margin-top: 2px;
   margin-bottom: 2px;
   max-width: 300px;
   overflow: hidden; 
}

.stopLocationDesc{
	word-break: break-word;
   white-space: pre-wrap;
   padding-bottom: 6px;
}

.stop-name {
	margin-top: 4px;
	margin-left: -2px;
}

.NextStopText {
	font-weight: bold;
	/*font-size: 14px;*/
}

td.StatusHeaderText {
	font-weight: bold;
	font-size: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
}

div.StatusHeaderText {
	font-weight: bold;
	font-size: 14px;
}

.HRow {
	margin: 0px;
	width: 100%;
	height: 1px;
}

.HRow2 {
	margin: 0px;
	width: 100%;
	height: 2px;
}

.cleanTable {
	margin: 0px;
	padding: 0px;
	width: 100%;
	table-layout: fixed;
	border-spacing: 0px;
	text-align: center;
}

.cleanTable tr {
	margin: 0px;
	padding: 0px;
}

.cleanTable td {
	overflow: hidden;
	padding: 4px !important;
	border-top: 0px solid #DDD !important;
	font-size: 14px;
}

/* New Popup Generic Style */

/* Vehicle Popup Style */
div.InfoVehicleID {
	font-size: 28px;
	line-height: 35px;
	color: #545555;
	font-weight: bold;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 4px;
	*padding-bottom: -6px; /* IE 7 Hacks to fix image and text paddings */
	*padding-top: -4px; /* IE 7 Hacks to fix image and text paddings */
}

div.InfoVehicleID img {
	vertical-align: initial;
}

.VehiclePopupStop {
	width: 140px;
	overflow: hidden;
	padding: 0 4px;
	overflow: hidden;
	margin: 0 5px;
}

.VehiclePopupTrack {
	width: 50px;
}

.VehiclePopupTime {
	width: 90px;
}

.VehiclePopupStatus {
	width: 120px;
}

.LoopVehiclePopupStop {
	width: 50%;
}

.LoopVehiclePopupETA {
	width: 35%;
}
/* Vehicle Popup Style */




.modal .StopInfoContainer {
	overflow: hidden;
	margin-left: -3px;
	/* max-width: 345px; */
}

.StopPopupRoute {
	width: 120px;
}

td.StopPopupRouteLabel {
	width: 40%;
	text-align: center;
	/*font-size: 18px;*/
	padding: 3px;
}

.StopPopupData {
	width: 260px;
	/*font-size: 14px;*/
}

td.StopPopupVehicle {
	width: 30%;
	padding-left: 5px;
	font-weight: bold;
}

.StopPopupTime {
	width: 30%;
}

.PopupDir {
	width: 50px;
}

.StopPopupStatus {
	width: 45%;
}

.StopPopupETA {
	width: 30%;
	font-weight: bold;
}

.StopPopupNoVehicles {
	width: 100%;
	font-weight: bold;
	font-size: 14px;
}
.StopPopupTrack,.VehiclePopupTrack {
	width: 50px;
}
/* Stop Popup Style */
.routeColorBar {
	width: 100%;
	height: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

.routeName {
	margin-left: 30px;
	font-weight: bold;
	line-height: 20px;
	font-size: 20px;
	margin-bottom: -10px;
	cursor: pointer;
}

.modal .routeName {
	margin-left: 30px;
	font-weight: bold;
	line-height: 15px;
	font-size: 20px;
	margin-bottom: -25px;
	cursor: pointer;
}

.InfoStop {
	float: left;
	width: 35%;
}

.InfoTime {
	float: left;
	width: 25%;
}

.InfoStatus {
	float: left;
	width: 40%;
}

.marquee {
    animation: marquee 3s linear infinite;
    animation-play-state:paused;
    -webkit-transition: all 1s ease;                  
    -moz-transition: all 1s ease;                 
    -o-transition: all 1s ease;   
    -ms-transition: all 1s ease;          
    transition: all 1s ease;
}

.marquee:hover {
    animation-play-state: running
}


@keyframes marquee {
    0%   { text-indent: 10% }
    100% { text-indent: -120% }
}

@media screen and (max-width: 470px) {
	.VehiclePopupStop {width:130px}
	.VehiclePopupTime { width:85px}
	.VehiclePopupStatus {width:80px}
	.modal-dialog {padding: 0px;}
}

.icon {
	display: inline-block;
}

#FSchedule tbody tr:nth-child(even) {
	background-color: #f1f1f1;
}

#FSchedule .modal-dialog {
	width: inherit !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

#content tbody td {
	text-overflow: ellipsis;
}

.asset-info-container {
	max-width: 430px;
	white-space: normal;
	box-shadow: 5px 5px 1px rgb(30 30 30 / 40%);
}

.asset-info-container::after {
	content: '';
    position: absolute;
    left: 50%;
    margin-left: -15px;
    margin-top: -1px;
    width: 0;
    height: 0;
    box-sizing: border-box;
    border: 1em solid black;
    border-color: transparent transparent #ffffff #ffffff;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -1px 5px 1px rgb(30 30 30 / 40%);
}

.asset-info-header {
	padding: 10px;
}

.asset-info-name {
	color: #ffffff; 
	font-size:24px; 
	font-weight:bold; 
	padding-left:10px
}

.asset-info-content {
	background-color: #ffffff;
}

.asset-info-psx {
	display: flex;
	font-size:14px;
	background-color: #ffffff;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 30px;
	justify-content: space-between;
}

.asset-info-psx .icon {
	padding-left: 15px;
}

.asset-info-psx .icon-handicap, .asset-info-psx .icon-bicycle {
	font-weight: bold;
}

.asset-info-wcbk {
	display:flex; 
	gap:25px;
}

.asset-info-psx span {
	margin-left:5px;
	font-size:11px;
	font-weight:normal;
}

.asset-info-route {
	display:flex;
	background-color: #f1f1f1;
	font-size: 16px; 
	font-weight: bold;
	line-height: normal;
	padding: 10px;
	margin-bottom: 5px;
}

.asset-info-eta table {
	width: 100%;
	margin: 0px;
	padding: 0px;
	table-layout: fixed;
	border-spacing: 0px;                                            
}

.asset-info-eta thead {
	font-size: 14px;
	background-color: #f1f1f1;                                        
}

.asset-info-eta td {
	overflow: hidden;
	font-weight: bold;
	padding: 5px 10px;
}

.asset-info-eta tbody tr:nth-child(even) {
	background-color: #f1f1f1;
}