#trips {
	height: 100%;
}

#tripInfo {
	margin: 0;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
	z-index: 1;
	font-size: x-large;
	background-color: #FFFFFF;
	top: 64px;
	width: 100%;
}

#tripInfoUpper {
	background-color: #323239;
	color: #FFFFFF;
	padding: 16px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

#tripInfoLower {
	padding: 16px;
	font-size:large;
}

#tripInfo p {
	margin: 0;
	font-size:18px;
}

#tripInfo details summary {
	outline:none;
	cursor:pointer;
}

#tripInfo details summary p.company {
	display:inline-block;
}
#tripInfo p.company {
	margin-bottom: 10px;
	font-size: 14px;
}
#tripInfo p.company span{
		color:#FFFFFF;
}
#tripInfo p.company a{
	color:#FFFFFF;
	text-decoration:none;
	cursor:pointer;
}

#tripInfo p.company a img{
	width: 12px;
	margin-left: 5px;
}

#tripInfoUpper .price{
	font-size:14px;
}

#tripInfoUpper .price img{
	height:14px;
	vertical-align:middle;
	margin-left:5px;
}

#tripInfoUpper .price #linkWrap {
		display: inline-block;
		float: right;
}
#tripInfoUpper .price #linkWrap span{
	background-color: #F4434B;
	text-align: center;
	padding: 5px;
	margin-left: 20px;
	border-radius: 10px;
	margin-left: 5px;
	width:50px;
	display:inline-block;
}
#tripInfoUpper .price a {
	color: #FFFFFF;
	text-decoration: none;
}

#tripInfo p.headsign {
	margin-bottom: 10px;
	font-weight: bold;
}

#tripInfo p.time {
	font-size:16px;
}

#tripInfo p span {
	color: grey;
}

#tripInfo button {
	float: right;
	position: absolute;
	bottom: 0;
	right: 5%;
	transform: translateY(-50%);
	background-color: red;
	border: none;
	color: white;
	padding: 5px 15px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
}

#trips ul {
	background-color: #FFFFFF;
	position:relative;
}

#tripInner {
	background-color: #DDDDDD;
	padding: 20px;
	height: calc(100% - 40px);
}

#tripInner .tableWrap {
	background-color: #FFFFFF;
	border-radius: 20px;
	padding: 20px;
}

#tripInner .tableWrap .routeTable {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}

#trips .routeTable tr th.nameData {
	width: 100%;
	white-space:unset;
}

#trips .routeTable tr th.nameData span {
	width: 100%;
}
#trips .routeTable th.nameData span {
	white-space:inherit;
	text-overflow:inherit;
}
#legend{
	margin:5px 0;
}
#legend p{
	margin:0;
	height:34px;
	display:inline;
}
#legend span.color{
	width: 12px;
	height: 12px;
	display: inline-block;
	margin: auto 5px;
	border-radius: 100%;
}
#legend #dep{
	background-color:#24C284;
}
#legend #arr{
	background-color:#EE4B7D;
}
#legend #both{
	background-color:#AAAA00;
}
#legend span.text{
	
}