/* Layout */
.helpdocs { overflow: hidden; margin-top: 2rem; }
.helpdocs-content { float: left; width: 66%; }
.helpdocs-aside { float: right; width: 31%; padding: 0 0 0 3%; }

/* Page header section */
.helpdocs-page-title { padding-bottom: 0px; padding-top: 0px; background: #008cc1; background-image: url('title_bg.gif'); background-size: cover; }
.helpdocs-page-title .container.tall { background: none; padding-top: 0px; padding-bottom: 90px; overflow: hidden; }
.helpdocs-page-title img { width: 240px; height: auto; }

.helpdocs-featured {
	max-width: 700px;
	margin: 0 auto 3rem auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: #ffffff;
}
.helpdocs-featured > div {
	padding: 30px 0 0 20px;
	text-align: left;
}
.helpdocs-featured > div:first-of-type {
	padding-left: 0;
}
.helpdocs-featured h1 { text-align: left; margin: 0; padding: 10px 0; font-size: 2.75rem; font-weight: 300; color: #ffffff; }

@media screen and (max-width: 999px) {
	.helpdocs-featured { max-width: 1000px; }
	.helpdocs-page-title .container.tall { padding-bottom: 30px; }
}
@media screen and (max-width: 750px) {
	.helpdocs-featured > div { width: 100%; }
	.helpdocs-page-title img { margin: 0 auto; }
	.helpdocs-featured h1 { text-align: center; padding: 0px 0 10px 0; font-size: 2rem; }
}

.helpdocs-header { margin-top: -90px; margin-bottom: 2rem; }
.helpdocs-header .container { padding-bottom: 0; }
.helpdocs-header-box { background: #fff; border: 1px solid #e5e5e5; }
.helpdocs-search { background: #eaeaea; border-bottom: 1px solid #e5e5e5; }
.helpdocs-search-form { width: 835px; margin: 0 auto; overflow: hidden; padding: 30px 0; }

.helpdocs-search-text { float: left; width: 300px; color: #00709e; font-size: 18px; line-height: 38px; font-weight: bold; }
input[type="text"].hdtext { width: 385px; float: left; padding: 10px; }
.btn.hdsubmit { border: 0; float: right; height: 40px; line-height: 40px; }

.helpdocs-support-links { display: flex; align-items: stretch; text-align: center; font-size: 1rem; line-height: 19px; }
.helpdocs-support-links h3 { font-weight: 400; }
.helpdocs-support-links > div { width: 50%; padding: 30px 40px 25px 40px; }
.helpdocs-support-links > div:nth-of-type(1) { border-right: 1px solid #e5e5e5; }

.hdbtn { display: inline-block; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 14px; line-height: 14px; padding: 10px 18px; margin: 20px 0 10px 0; }
.hdbtn-white { background: #fff; border: 1px solid #e5e5e5; border-radius: 3px; }
.hdbtn-blue { background: #00709e; color: #fff; border: 1px solid #00709e; border-radius: 3px; }

@media screen and (max-width: 999px) {
	.helpdocs-header { margin-top: -20px; }
	.helpdocs-search-form { width: 100%; padding: 30px; }
	.helpdocs-search-text { width: 100%; text-align: center; margin: 0 0 20px 0; line-height: 24px;}
	input[type="text"].hdtext { width: 100%; margin: 0 0 20px 0; }
	.btn.hdsubmit { width: 100%; }
}
@media screen and (max-width: 750px) {
	.helpdocs-support-links { display: block; }
	.helpdocs-support-links > div { width: 100%; padding: 25px 30px 25px 30px; }
	.helpdocs-support-links > div:nth-of-type(1) { border-right: 0px; border-bottom: 1px solid #e5e5e5;}
}

.helpdocs-content { border-top: 1px solid #e5e5e5; padding-top: 20px; }
.helpdocs-content a { color: #2471a8; }
.helpdocs-children { padding-left: 22px; margin-bottom: 20px; border-left: 8px solid #eaeaea; }
.helpdocs-frontpage h2 { margin: 0 0 10px 0; }
.helpdocs-frontpage h3 { margin: 0 0 5px 0; }
.helpdocs hr { height: 1px; border: none; color: #e5e5e5; background-color: #e5e5e5; margin-bottom: 20px; }

.helpdocs-sidebox ul, .helpdocs-sidebox ol { margin: 0; padding: 0; list-style: none; }
.helpdocs-sidebox li { margin: 0; padding: 0; }
.helpdocs-sidebox ul a { padding: 0 0 0 20px; }

.helpdocs-sidebox ol li { counter-increment: section; position: relative; padding-left: 20px; }
.helpdocs-sidebox ol li::before { content: counter(section); position: absolute; top: 5px; left: 0; }

.helpdocs-sidebox { border: 1px solid #e5e5e5; padding: 20px; }
.helpdocs-sidebox h3 { margin: 0; padding: 0 0 10px 0; }
.helpdocs-sidebox a { position: relative; display: block; padding: 5px 0; border: 0; color: #00719d; font-size: 1rem; }

/* Table of contents */
.helpdocs-content .toc { padding: 0 0 20px 0; border-bottom: 1px solid #e5e5e5; margin: 0 0 15px 0; font-size: 1rem; }
.helpdocs-content .toc a, .helpdocs-content .toc strong { display: block; padding: 5px 0; font-size: 1rem; }

/* No longer indicating if something is premium
.premstar:after { content: "\2605"; color: #2471a0; font-size: 20px; margin: 0 0 0 10px; }
*/

@media (max-width: 750px) {
	.helpdocs-content, .helpdocs-aside {
		width: 100%; padding: 20px 0 20px 0;
	}
}

/* Sidebar */
#helpdocs-1 { list-style: none; margin: 20px 0 0 0; padding: 0; }
#helpdocs-1 li { margin: 0 0 20px 0; padding: 0; }

/* Faq-lists */
.helpdocs-faq > ul { list-style:none!important; }
.helpdocs-faq > ul > li { margin: 0 0 10px 0; padding: 0 0 0 40px; position: relative; border-bottom: 1px solid #e5e5e5; }
a.helpdocs-faq-toggle { display: block; border-bottom: 0; color: #000; padding: 5px 10px 5px 0; }
a.helpdocs-faq-toggle:hover { color: #000; }

.helpdocs-faq { padding: 0 0 30px 0; }
.helpdocs-faq-toggle { margin: 0 0 10px 0; }
.helpdocs-faq-content { display: none; }
.helpdocs-faq li.active .helpdocs-faq-content { display: block; border-left: 2px solid #109779; padding: 15px; margin: 0 0 15px 0; }

.plus { display: block; position: absolute; top: 5px; left: 0; width: 20px; height: 20px; }
.plus:before, .plus:after { content: ""; position: absolute; background-color: #109779; transition: transform 0.25s ease-out; }
.plus:before { top: 0; left: 50%; width: 6px; height: 100%; margin-left: -3px; }
.plus:after { top: 50%; left: 0; width: 100%; height: 6px; margin-top: -3px; }
.helpdocs-faq li.active .plus{ cursor: pointer; }
.helpdocs-faq li.active .plus:before{ transform: rotate(90deg); }
.helpdocs-faq li.active .plus:after{ transform: rotate(180deg); }

.helpdocs-content ol { margin: 0; padding: 0 0 10px 0; list-style-position: inside; }
.helpdocs-content ul { margin: 0; padding: 0 0 10px 0; list-style: disc; list-style-position: inside; }
.helpdocs-content li { padding: 0 0 10px 0; }

/* Faq-page */
.faq-page > a > h2 { margin: 0 0 10px 0; }
.faq-page > a > h3 { margin: 0 0 5px 0; }

/* Table formatting */
.helpdocs-content table, .helpdocs-content tr, .helpdocs-content td { border: 0;  font-size: 13px; line-height: 18px; vertical-align: top; }
.helpdocs-content td:nth-of-type(1) { padding: 0 30px 20px 0; white-space: nowrap; font-weight: bold;}
.helpdocs-content td:nth-of-type(2) { padding: 0 0 20px 0; }
@media (max-width: 550px) {
	.helpdocs-content td { width: 100%; float: left; }
	.helpdocs-content td:nth-of-type(1) { padding: 0 30px 5px 0; white-space: normal;}
}

.helpdocs-content code {
	background: #f4f4f4; display: inline-block; font-size:inherit; padding: 0px 5px;
}

#searchsuggest strong { display: inline; margin-left: 15px; }
#searchsuggest strong.shown { display: inline; }
#searchsuggest #suggestions { display: inline; }
.spadding { padding: 10px; }
#searchsuggest {
	-webkit-box-shadow: 3px 3px 10px -3px rgba(241,241,241,1);
	-moz-box-shadow: 3px 3px 10px -3px rgba(241,241,241,1);
	box-shadow: 3px 3px 10px -3px rgba(241,241,241,1);
	display: block; border-bottom: 1px solid #e5e5e5; transition: max-height 1s; overflow: hidden; max-height: 1px; margin-top: -1px;}
#searchsuggest.active { max-height: 600px; transition: max-height 3s; }
#searchsuggest a { display: none; padding: 8px 15px; color: #2471a8; }
#searchsuggest a.shown { display: inline-block; }
@media (max-width: 750px) {
	#searchsuggest strong { display: block; margin: 0; padding: 15px 15px 5px 15px; }
	#searchsuggest a.shown { display: block; }
	.spadding { padding: 10px 15px; }
}
h3.hd-sr {
	padding: 0; margin: 0 0 2px 0;
}

@media (max-width: 550px) {
	table.api-doc {
		thead {
			display: none;
		}
		tr {
			border: 2px solid #ccc;
		}
		td, td:nth-of-type(even), td:nth-of-type(odd) {
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
			padding-top: 0.5rem;
			padding-bottom:0.5rem;
			white-space: normal;
			text-align: left;
			font-weight: normal;
		}

		td:before {
			position: absolute;
			top: 0.5rem;
			left: 0.5rem;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
			text-align:left;
			font-weight: bold;
			content: attr(data-title);
		}
	}
}