#suggestionsPanel {
	position: fixed;
	top: 0;
	left: -382px;
	/*  == 22em + 30px to hide shadow */
	height: 100%;
	width: 352px;
	/* 22em */
	z-index: 1000;
	box-shadow: 5px 0 32px 4px rgba(86, 86, 86, 0.567);
	border-right: 1px solid #979797;
}


.suggestionsHd {
	position: relative;
	height: 40px;
	background-color: var(--panelHdBck);
}

#closeSuggestions{
	float: right;
	height: inherit;
}

#closeSuggestions img {
	width: auto;
	height: inherit;
	background-color: var(--closeImgBck);
}

.suggestionsTitle {
	float: left;
	font-family: "robotoCondensed";
	font-size: 1.25rem;
	font-weight: 800;
	color: white;
	padding-left: 0.8333333rem;
	line-height: 40px;
}

#suggestionsContainer {
	position: absolute;
	overflow: hidden;
 	height: calc(100% - 40px);
	width: 100%;
	background-color: var(--white);

}

#suggestionsFrame {
	position: relative;
	font-family: "sourceSerifPro";
	box-sizing: border-box;
	height: 100%;
	padding: 0 0.8333333em;
	width: calc( 100% + var(--scrollbarWidth) );
	overflow-y: scroll;
	/* to ensure momentum scrolling in IOs: */
	-webkit-overflow-scrolling: touch;
	text-align: justify;
}


#suggestionsFrame h2 {
	font-family: 'EBGaramond';
	font-size: 1.3rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

#suggestionsFrame p {
	font-size: 1.1rem;
	line-height: 1.55rem;
	text-align: justify;
	color: #424242;
	margin-bottom: 0.4rem;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}