/***** Formatting for information panel in location view *****/

#assistancePanel {
	position: fixed;
	top: 0;
	width: 288px;
	right: -320px;
	height: 100%;
	overflow: hidden;
	box-shadow: -5px 0 32px 4px rgba(86, 86, 86, 0.567);
	border-left: 1px solid #979797;
	z-index: 1000;
	background-color: var(--lightGray1);
}

#assistancePanel .assistanceBox {
	display: block;
	margin: 24px auto 16px auto;
	float: unset;
	vertical-align: unset;
	width: 220px;
}


#assistanceHd {
	height: var(--d48);
	width: 290px;
	background-color: var(--panelHdBck);
}

#closeAssistanceHd {
	display: inline;
}

#closeAssistanceHd img {
	vertical-align: middle;
	width: inherit;
	height: inherit;
	float: left;
	background-color: var(--closeImgBck);
}


#assistanceHdTitle {
	font-family: 'robotoCondensed';
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--white);
	display: inline-block;
	float: left;
	width: 226px;
	margin-left: 16px;
	font-size: 120%;
	line-height: 48px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


#locationAssistanceContainer {
	height: calc( 100% - var(--d48) );
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: white;
}

#locationAssistanceFrame {
	box-sizing: border-box;
	height: 100%;
	width: calc(100% + var(--scrollbarWidth) );
	overflow-y: scroll;
	text-align: left;
	font-size: 1em;
	line-height: 140%;
	-webkit-overflow-scrolling: touch;
	/* to ensure momentum scrolling in IOs */
}

#locationAssistanceFrame h4 {
	font-family: 'robotoCondensed';
	font-weight: 600;
	font-size: 1.5em;
	padding-top: 1.2em;
	padding-bottom: 0.5em;
	padding-left: 0.9em;
	margin: 0;
	background-color: white;
}

/* //////////// Formatting for overview view /////////////////// */


#overviewAssistanceContainer {
	position: relative;
	box-sizing: border-box;
	margin-right: 48px;
	float: right;
	width: calc(50% - 59px);
	height: calc(50% - 48px);
	border: 1px solid #b5b5b5;
	box-shadow: 3px 3px 4px 1px #cdcdcd;
	background-color: white;
	overflow: hidden;
}

#overviewAssistanceFrame {
	position: absolute;
	left: 0; top: 0;
	bottom: 0;
	padding-top: 24px;
	width: calc(100% + var(--scrollbarWidth) );
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#overviewAssistanceFrame:last-child {
	padding-bottom: 1em;
}

#overviewAssistanceContainer .assistanceBox {
 	display: block;
	 margin: 0 3em;
}

.assistanceBox p {
	font-family: 'oldStandard';
	float: left;
	font-size: 1.25rem;
	line-height: 1.9rem;
	overflow: hidden;
	width: 80%;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.assistanceBox a {
	color: blue;
	text-decoration-line: underline;
}

.overviewAssistanceBody {
	height: auto;
	display: block;
	font-family: 'sourceSerifPro';
	color: var(--textLightGray);
	font-size: 1rem;
	line-height: 1.65rem;
	padding: 0.4rem 0 0.8rem 0;
	hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
}


/* ///////// css valid both for "overview" and "location" views //////////// */

.durationHeader {
	float: left;
	font-size: 1rem;
	width: 100%;
	border-bottom: 1.5px solid var(--pink);
	margin-bottom: 8px;
}
.durationHeader img {
 	float: left;
	display: inline;
	height: 1.8rem;
	width: auto;
	vertical-align: middle;
}
.durationStr {
	color: var(--pink);
}


.distanceHeader {
	float: left;
	width: 100%;
	border-bottom: 1.5px solid #97b929;
	margin-bottom: 8px;
}
.distanceHeader img {
	float: left;
	height: 1.8rem;
	width: auto;
	vertical-align: bottom;
}
.distanceStr {
	color: #93b919;
}

.itineraryHeader {
	float: left;
	width: 100%;
	border-bottom: 1.5px solid var(--blueMetal);
	margin-bottom: 8px;
}
.itineraryHeader img {
	float: left;
	height: 1.8rem;
	width: auto;
	vertical-align: middle;
}
.itineraryStr {
	color: var(--blueMetal);
}

.weatherHeader {
	float: left;
	width: 100%;
	border-bottom: 1.5px solid #f6a400;
}
.weatherHeader img {
	float: left;
	height: 1.8rem;
	width: auto;
	vertical-align: middle;
}
.weatherStr {
	color: #f6a400;
}

.touristOfficeHeader {
	float: left;
	width: 100%;
	border-bottom: 1.5px solid #00c4ff;
	margin-bottom: 8px;
}
.touristOfficeHeader img {
	float: left;
	height: 1.8rem;
	width: auto;
	vertical-align: middle;
}
.touristOfficeStr {
	color:#00c4ff;
}