#settingsPanel {
	position: fixed;
	top: 0;
	width: 248px;
	right: -300px;
	height: 100%;
	font-family: "robotoCondensed";
	box-shadow: -5px 0 32px 4px rgba(86, 86, 86, 0.567);
	border-left: 1px solid #979797;
	z-index: 1000;
}

#settingsPanel img {
	box-sizing: border-box;
	float: left;
	width: var(--d48);
	height: var(--d48);
}


#settingsHd {
	width: 256px;
	float: left;
	font-size: 110%;
	height: var(--d48);
	font-weight: 800;
	background-color: var(--panelHdBck);
}

#settingsHd a {
	height: inherit;
	float: left;
}

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

.settingsTitle {
	font-family: 'robotoCondensed';
	color: white;
	float: left;
	padding-left: 1em;
	line-height: 46px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


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

#settingsFrame {
	box-sizing: border-box;
	height: 100%;
	width: calc(100% + var(--scrollbarWidth) );
	overflow-y: scroll;
	/* to ensure momentum scrolling in IOs: */
	-webkit-overflow-scrolling: touch;
/* 	z-index: 50; */
}


/************ l1 ************/

#settingsFrame .h1 {
	position: relative;
	float: left;
	height: var(--d48);
 	width: 100%;
	overflow: hidden;
	z-index: inherit;
}

#settingsFrame .h1 img {
	background-color: var(--middleGray);
}

#settingsFrame .h1 p {
	box-sizing: border-box;
	position: relative;
	float: left;
	color: var(--white);
	font-size: 110%;
 	padding-left: 20px;
	line-height: 48px;
	width: 150px;
	width: calc(100% - 48px);
	height: var(--d48);
	overflow: hidden;
	background-color: var(--lightGray2);
	white-space: nowrap;
	text-overflow: ellipsis;
	z-index: inherit;
}


/**************** l2 ********************/

#settingsFrame .h2 {
	position: relative;
	float: left;
 	width: 100%;
}

#settingsFrame .h2 a {
	width: 100%;
	float: left;
}

#settingsFrame .h2 img {
 	float: left;
	background-color: var(--white);
	width: var(--d48);
	height: calc( var(--d48) + 1px);
	border-bottom: 1px dotted var(--containerBorder);
}

#settingsFrame .h2 p {
	box-sizing: border-box;
	padding-left: 22px;
	position: relative;
	width: calc(100% - 48px);
	float: left;
	line-height: 48px;
	font-size: 1em;
	color: var(--middleGray2);
	background-color: var(--panelBackground);
	border-bottom: 1px dotted var(--containerBorder);
}

#settingsFrame .h2 p[class="itString"],  #settingsFrame .h2 img[alt="it"],
#settingsFrame .h2 p[class="fontSizeMinusStr"], #settingsFrame .h2 img[alt="fontSizeMinus"] {
	border-bottom: unset;
}

#settingsFrame .h2 img[alt="it"], #settingsFrame .h2 img[alt="fontSizeMinus"] {
	height: 48px
}

/**********************************/

#settingsFrame .toggleMaps {
	position: relative;
	float: left;
	width: 100%;
	background-color: var(--panelBackground);
	border-bottom: 1px dotted var(--containerBorder);
	z-index: inherit;
}

#settingsFrame .toggleMaps img {
	border-bottom: unset;
}

#settingsFrame .toggleMaps p {
	box-sizing: border-box;
	position: relative;
	float: left;
  	padding-right: 16px;
	padding-left: 16px;
	line-height: 48px;
	width: 44px;
	border-bottom: unset;

}


#settingsFrame .toggleMaps div {
	position: relative;
	float: left;
	width: 42px;
	height: 16px;
	transform: translateY(14px);
	border: 1px solid var(--lightGray1);
	background-color: var(--white);
	border-radius: 8px;
	z-index: inherit;
}

#settingsFrame .toggleMaps div:hover {
	cursor: pointer;
}

#settingsFrame .toggleMaps .mapSwitch {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: var(--green);
}


#settingsFrame .on {
	float: right;
}

#settingsFrame .off {
	float: left;
}