/* Custom Help Scout StyleSheet - by Devan Sabaratnam (founder of HR Partner - www.hrpartner.io) */
/* Color pallette chosen from https://coolors.co/54494b-7e8287-9da39a-b98389-db2955 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,400i,500,700');
/* */

body {
	font-family: "Open Sans", sans-serif;
}

/* Home Page Category Title*/

.category-list h3 {
	color: #5fc26b;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3em;
	font-family: "Open Sans", sans-serif;
}

/* Category Styles */

.category-list .category p {
	color: #7e8287;
	font-family: "Open Sans", sans-serif;
	font-weight: 100;
	font-size: 15px;
	letter-spacing: 0.25px;
}
.category-list .category {
	background-color: #fff;
	background-position: top 20px center !important;
	background-repeat: no-repeat !important;
	background-size: 100px auto !important;
	box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	min-height: 183px;
	padding: 120px 20px 15px;
	position: relative;
	width: 31.5%;
	transition: all 0.2s;
}
.category-list .category:hover {
	text-decoration: none;
	background: #f7f7f9;
}

/* Home Page Search Button */

#searchBar button {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #AFE0B5;
	border-radius: 0 5px 5px 0;
	border: 1px solid #b98389;
	font-size: 18px;
	padding: 0 1.5em;
	height: 50px;
	position: absolute;
}
#searchBar button:hover {
	background: #5fc26b;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	border: 1px solid #5fc26b;
}
input, button, select, textarea {
	font-family: "Open Sans", sans-serif;
}

.uneditable-input:focus, input:focus, input[type="text"]:focus, input[type="search"]:focus, textarea:focus {
  border-color: #5fc26b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 4px rgba(106,155,208,.4);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 4px rgba(106,155,208,.4);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 4px rgba(106,155,208,.4);
  outline: 0 !important;
}

/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/

/* Temp icons from Iconify */


/* Overview  */
/* Iconify name - tabler:live-view */
#category-22 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235fc26b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2m-8-5v.01M12 18l-3.5-5a4 4 0 1 1 7 0z'/%3E%3C/svg%3E");
}

/* Getting Started */
/* Iconify name - ion:rocket-outline */
#category-25 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%235fc26b' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M461.81 53.81a4.4 4.4 0 0 0-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a295 295 0 0 0-33.09 39.08c-21-1.9-42-.3-59.88 7.5c-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 0 0 9.8 10.4l81.07-8.9a180 180 0 0 0 1.1 18.3a18.15 18.15 0 0 0 5.3 11.09l31.39 31.39a18.15 18.15 0 0 0 11.1 5.3a180 180 0 0 0 18.19 1.1l-8.89 81a9 9 0 0 0 10.39 9.79c24.9-4 83-18.69 105.07-69.17c7.8-17.9 9.4-38.79 7.6-59.69a294 294 0 0 0 39.19-33.09c68.38-68 115.47-190.86 102.37-247.95M298.66 213.67a42.7 42.7 0 1 1 60.38 0a42.65 42.65 0 0 1-60.38 0'/%3E%3Cpath fill='none' stroke='%235fc26b' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M109.64 352a45.06 45.06 0 0 0-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 0 0 160 402.32'/%3E%3C/svg%3E");
}

/* TrackTrade Academy */
/* Iconify name - vaadin:academy-cap */
#category-5 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235fc26b' d='M15.09 12.79a1 1 0 0 0-.086-1.638L15 5.33L14 6v5.15a1 1 0 0 0-.092 1.629l-.378.502a2.48 2.48 0 0 0-.53 1.498v1.222h.815a.88.88 0 0 0 .853-.664l.331-1.336v2h1v-1.21a2.5 2.5 0 0 0-.534-1.505zM8 0L0 4l8 5l8-5z'/%3E%3Cpath fill='%235fc26b' d='M8 10L3 6.67v1.71C3 9.29 5.94 12 8 12s5-2.71 5-3.62V6.67z'/%3E%3C/svg%3E");
}

/* How-Tos */
/* Iconify name - ri:guide-line */
#category-23 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235fc26b' d='M13 8v8a3 3 0 0 1-3 3H7.83a3.001 3.001 0 1 1 0-2H10a1 1 0 0 0 1-1V8a3 3 0 0 1 3-3h3V2l5 4l-5 4V7h-3a1 1 0 0 0-1 1M5 19a1 1 0 1 0 0-2a1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}

/* Reference */
/* Iconify name - ix:user-manual */
#category-24 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235fc26b' fill-rule='evenodd' d='M384 319.997V85.331H149.333c-11.782 0-21.333 9.551-21.333 21.333v216.975a63.9 63.9 0 0 1 21.333-3.642zM85.333 106.664v298.667c0 35.346 28.654 64 64 64h277.334v-85.334h-21.334v42.667h-256c-11.782 0-21.333-9.551-21.333-21.333v-21.334c0-11.782 9.551-21.333 21.333-21.333h277.334v-320H149.333c-35.346 0-64 28.654-64 64m149.334 170.667v-85.334h42.666v85.334zM256 170.664c11.782 0 21.333-9.551 21.333-21.333s-9.551-21.334-21.333-21.334s-21.333 9.552-21.333 21.334s9.551 21.333 21.333 21.333M149.333 383.997H384v21.334H149.333z' clip-rule='evenodd'/%3E%3C/svg%3E");
}







/* Side Bar Styles */

#sidebar .nav-list a {
	display: inline-block;
	color: #4333d6;
	font-size: 14px;
	padding: 6px 15px 6px 0;
	line-height: 20px;
	margin-left: 0;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
}
#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
	font-weight: 500;
	color: #06b9dd;
	background: 0 0;
	text-shadow: none;
	text-decoration: underline;
}
#sidebar h3 {
	text-transform: uppercase;
	font-size: 16px;
	color: #7e8287;
    font-weight: 400;
	margin-bottom: 4px;
	font-family: "Open Sans",
	sans-serif;
	letter-spacing: 2px;
}
/* Article Styles */

#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle .title, .contentWrapper h1 {
	margin: 0 30px .5em 0;
	font-family: "Open Sans",
	sans-serif;
	color: #5fc26b;
	font-weight: 700;
}
#fullArticle .printArticle {
	position: absolute;
	right: 46px;
	top: 40px;
}
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
	color: #7e8287;
	font-family: "Open Sans",
	sans-serif;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .01em;
}
#categoryHead .sort select {
	width: 150px;
	height: 24px;
	margin: 0;
	line-height: 24px;
	font-size: 13px;
	color: #7e8287;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
	color: #7e8287;
}
#fullArticle h2 {
	font-size: 24px;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 400;
	color: #5fc26b;
}
#fullArticle h3 {
	font-size: 20px;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 700;
	color: #5fc26b;
}
#fullArticle h4 {
	font-size: 16px;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
	color: #7e8287;
    font-style: italic;
}
.contentWrapper p {
	margin-top: -4px;
	word-wrap: break-word;
	font-family: "Open Sans",
	sans-serif;
	color: #7e8287;
	font-weight: 300;
	font-size: 16px;
	letter-spacing: .01em;
}

/* Article Footers */

.articleFoot p, .articleFoot time {
	color: #7e8287;
	display: inline-block;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
	font-style: italic;
}
/* remove the 'Last Updated on Thu 25th Jan' footer msg */
.articleFoot time.lu {
	display: none;
}

/* Page Footers */

footer p a {
	color: #7e8287;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
}

/* Remove 'Powered by HelpScout' msg */
footer p span {
	display:none
}


/* Contact Modal */

#contactModal h2, .abuse h2 {
	background: #fff;
	margin: 0;
	padding: 11px 0 10px 18px;
	font-size: 22px;
	border-bottom: 1px solid #ccc;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	font-family: "Open Sans",
	sans-serif;
	color: #58A4B0;
	font-weight: 300;
}
#contactModal .control-label {
	width: 110px;
	font-family: "Open Sans",
	sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #7e8287;
}

.btn {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #03d3d5;
	border-radius: 5px;
	border: 1px solid #b98389;
	font-size: 14px;
	padding: .5em;
	/* height: 50px; */
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #8fa7c2;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #8fa7c2;
	border-radius: 5px;
	border: 1px solid #9da39a;
	font-size: 18px;
	padding: 0 1.5em;
	height: 50px;
}

.category-list {
    text-align: center;
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
	section.category-list .category {
		width: 48.2%;
	}
}
@media screen and (max-width: 760px) {
	section.category-list .category {
		box-sizing: border-box;
		margin: 0 0 20px;
		padding: 120px 20px 15px;
		width: 100%;
	}
}
/* RESPONSIVE */

@media (max-width: 768px) {
	.navbar .btn-navbar {
		margin-top: 16px;
		right: -10px;
	}
	.related {
		padding: 30px 25px 25px;
	}
	.related ul {
		margin-left: 0;
	}
	.related h3 {
		padding-left: 0;
	}
	.related ul>li a {
		margin-left: 0;
	}
}
@media (max-width: 480px) {
	#searchBar button {
		color: transparent;
		text-shadow: 0;
		background: transparent;
		border-radius: 0 5px 5px 0;
		border: 0;
		font-size: 18px;
		padding: 0 1.5em;
		height: 50px;
		position: absolute;
	}
	#searchBar button .icon-search {
		display: block;
		text-shadow: none;
		margin-top: 15px;
	}
	#searchBar button:hover .icon-search:hover {
		display: block;
		text-shadow: none;
		margin-top: 15px;
		background-color: transparent;
	}
}
@media (max-width: 480px) {
	#fullArticle .title, .contentWrapper h1 {
		font-size: 24px;
	}
	#fullArticle h2 {
		font-size: 20px;
	}
}


/* Collection Titles  */
.collection-category h2 a {
    color: #54494b;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    padding-left: .65%;
    font-family: "Open Sans",
    sans-serif;
    text-align: center;
}