/**
 * This a sample CSS for online-help generation.
 */
 
/*************** OH navigation & content ***************/

#help-nav {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 24rem;
	height: 100vh;
	box-shadow: 0 4px 8px rgba(0,0,0,0.24);
	z-index: 99;
	overflow: hidden;
}

#help-nav:lang(ar) {
	right: 0;
	left: inherit;
}

#help-content {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0 1rem;
	width: calc(100vw - 24.5rem);
	height : 100vh;
	overflow: auto;
}

#help-content:lang(ar) {
	left: 0;
	right: inherit;
}

/*************** OH topics & index ***************/

#help-topics, 
#help-index {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 2.2rem;
	height: auto;
	width: 100%;
	margin: 0;
	padding: 10px;
	overflow: auto;
}

#help-topics, 
#help-index {
	display: none;
}

#help-topics ul, 
#help-index ul {
	position: relative;
	list-style: none outside none;
	margin: 0;
	padding: 0;
	text-align: left;
}

#help-topics ul:lang(ar), 
#help-index ul:lang(ar) {
	text-align: right;
}

#help-topics ul li, #help-index ul li {
	line-height: 1.25;
	padding: 0.25rem 0;
}

#help-topics > ul > li {
	padding: 0.5rem 0;
}

#help-topics li.opened > span.icon,
#help-topics li.closed > span.icon,
#help-topics li.leaf > span.icon {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 1.15rem 1.15rem;
	background-position: top center;
	content: "";
	text-decoration: none;
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
}

#help-topics li.opened > span.icon {
	background-image: url("../images/caret-right-45.svg");
}

#help-topics li.closed > span.icon {
	background-image: url("../images/caret-right.svg");
}

#help-topics li.leaf > a:before,
#help-topics li.opened > a:before,
#help-topics li.closed > a:before {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 1.15rem 1.15rem;
	background-position: top center;
	content: "";
	text-decoration: none;
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
}

#help-topics li.opened > a:before,
#help-topics li.closed > a:before {
	background-image: url("../images/closed.svg");
}

#help-topics li.leaf > a:before {
	background-image: url("../images/leaf.svg");
}

#help-topics li > a > span.text {
	display: inline-block;
	padding: 0 0 0 1.5rem;
}

#help-topics li ul {
	padding-left: 1.5rem;
}

#help-topics li ul:lang(ar) {
	padding-right: 1.5rem;
	padding-left: inherit;
}

#help-topics a,
#help-topics a:visited {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	padding-left: 1.5rem;
	display: inline-block;
}

#help-topics a:lang(ar),
#help-topics a:visited:lang(ar) {
	padding-right: 1.5rem;
}

#help-topics a:hover, 
#help-index a:hover {
	color: #1D70B7;
}

#help-topics a span, 
#help-index a span {
	text-decoration: none !important;
}

#help-topics a.selected {
	color: #1E2F58;
	font-weight: bold;
}

#help-index a,
#help-index a:visited {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

#help-index p {
	/*color: #555555;
    font-style: italic;*/
    font-weight: bold;
    margin: 0;
    padding: 0;
    margin-bottom: 0.25rem;
}

#help-index input {
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	margin: 0;
	margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #FFF;
    background-clip: padding-box;
    border: 1px solid #CED4DA;
    border-radius: .25rem;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}

#help-index input:focus {
	color: #495057;
    background-color: #FFF;
    border-color: #A3CDEF;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 0 3px rgba(54,147,220,0.25);
}

/*************** OH tabs ***************/

#help-tabs {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2.2rem;
	width: 100%;
	margin: 0;
	padding: 2px 0 0 0;
	overflow: hidden;
	background-color: #FFF;
}

#help-tabs ul {
	position: relative;
	display: block;
	height: 2.2rem;
	margin: 0;
	padding: 0;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.24);
	list-style: none outside none;
}

#help-tabs li {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	background-color: #F5F5F5;
}

#help-tabs li:lang(ar) {
	float: right;
}

#help-tabs a {
	display: inline-block !important;
	font-weight: bold;
	margin: 0;
	padding: 0.3rem 0.5rem;
	outline-style: none;
	text-decoration: none;
	color: #555555;
	border: 1px solid #E0E0E0;
	border-top-width: 0px !important;
	cursor: pointer;
}

#help-tabs a.selected {
	position: relative;
	top: -2px;
	color: #000000;
	background-color: #FEFEFE;
}

#help-tabs a:before {
	content: "";
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 1.15rem 1.15rem;
	background-position: center center;
	text-decoration: none;
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
}

#help-tabs a#help-topics-tab:before {
	background-image: url("../images/topics.svg");
}

#help-tabs a#help-index-tab:before {
	background-image: url("../images/index.svg");
}

#help-tabs a span {
	padding-left: 1.55rem;
	text-decoration: none;
}

#help-tabs a span:lang(ar) {
	padding-left: inherit;
	padding-right: 1.55rem;
}

/*************** OH index menu ***************/

.context-menu {
	position: absolute;
	min-width: 15rem;
	width: 22rem;
	opacity: 1;
	margin: 0;
	padding: 0;
	z-index: 10000;
	background-color: #FFF;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
	text-align: left;
}

.context-menu ul {
	display: block;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.context-menu li {
	list-style: none outside none;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.context-menu li a {
	display: block;
	margin: 0;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color: #000;
}

.context-menu a:hover {
	background-color: #EAF4FB;
	color: #000;
}

.context-menu a span {
	text-decoration: none !important;
}

/*************** Other ***************/

.doc-oh .doc-cover-page-title {
	border-bottom: none !important;
}

.help-not-available {
	text-align: center;
}