:root {
	--primary: #0798FF;
	--textOnPrimary: #FFFFFF;
	--primaryDarker: #0267AF;
	--primaryLighter: #AADCFF;
	--primaryLightest: #EAF7FF;
	--light: #F3F3F3;
	--lighter: #FAFAFA;
	--highlighter: #FFE561;
	--highlighterTwo: #FFE561;
	--highlighterThree: #DCFFB2;
	--inputBackground: #FFF;
	--inputBorder: #AADCFF;
	--headingText: #222222;
	--bodyText: #373d42;
	--serifFonts: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--monoFonts: "SF Mono", Menlo, monospace, "SF Pro Icons";
	--pageBackground: #FFFFFF;
	--linkForeground: #0599ff;
	--linkBackground: hsla(209, 100%, 52%, 0.07);
	--linkHoverForeground: hsla(50, 100%, 25%, 1);
	--linkHoverBackground: hsla(50, 100%, 50%, 0.51);
	--orangeBigLeaf: #008000;
	--orangeSmallLeaf: #01C201;
	--orangeBodyTop: #FFD500;
	--orangeBodyMiddle: #FFA601;
	--orangeBodyBottom: #FF8000;
	--orangeBorder: #333333;
	--orangeBackground: #FFFFFF;
	--logoTextColor: #0798FF;
	--logoTextShadow: #333333
}

body {
	font-family: var(--serifFonts);
	padding: 0;
	margin: 0;
	text-align: left;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga" on;
	background-color: var(--pageBackground)
}

.videoframe {
	padding-bottom: 240px;
	background-image: url(/images/videocaption.png);
	background-repeat: no-repeat;
	background-size: 168px;
	background-position: calc(50% + 65px) calc(100% - 20px)
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border: #333 solid 5px
}

#mobileFooter {
	display: none
}

#mobileHeader,
#navigationSlider {
	display: none
}

div#mainContent ol li {
	margin-bottom: 12px;
	font-size: 17px;
	color: var(--bodyText)
}

#tutorialInformation {
	overflow: hidden;
	margin-bottom: 30px
}

.authorImage {
	float: left;
	margin-right: 10px;
	margin-top: 4px;
	width: 51px;
	display: none
}

.authorText {
	margin-top: 10px
}

.authorText h1 {
	font-size: 48px;
	font-weight: 700
}

.inlineCode {
	color: #222;
	font-family: var(--monoFonts);
	font-size: 85%;
	background-color: rgba(244, 244, 244, .8);
	border-radius: 3px;
	padding: 2px 5px;
	margin: 0 1px
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--serifFonts);
	font-weight: 700;
	line-height: 1.75em
}

h1 {
	font-size: 40px;
	color: var(--headingText);
	margin-bottom: -5px;
	margin-top: -5px;
	line-height: 60px
}

h2 {
	font-size: 30px;
	margin-bottom: -14px
}

#mainContent h2 {
	border-top: 1px solid #eee;
	margin-top: 35px;
	padding-top: 25px
}

#mainContent ul.navigationContent li h2 {
	border-top: 0 solid #eee;
	margin-top: 0;
	padding-top: 0
}

#mainContent ul li {
	line-height: 1.75;
	margin-bottom: 15px;
	color: #39434c
}

h3 {
	font-size: 26px;
	margin-bottom: -14px
}

h4 {
	font-size: 22px;
	margin-bottom: -14px
}

h5 {
	font-size: 18px;
	margin-bottom: -14px
}

.tutorialInfo {
	font-size: 18px;
	color: #9eaab5;
	margin-bottom: 0;
	margin-top: 15px;
	margin-left: 0
}

.tutorialInfo a {
	color: var(--headingText);
	font-weight: 700;
	text-decoration: none
}

.tutorialInfo a:hover {
	text-decoration: underline
}

.yellowEmphasis {
	color: #937500;
	background-color: #ff9
}

.yellowEmphasis:hover {
	border-style: none none dotted none;
	border-width: 1px
}

p {
	font-family: var(--serifFonts);
	font-size: 17px;
	line-height: 1.75em;
	color: #373d42
}

.centerImage {
	text-align: center
}

.centerImageNoBorder {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 30px
}

p.centerImage iframe {
	border: 5px solid #222
}

p.kCaption {
	color: #000;
	font-family: Verdana;
	font-size: 8pt;
	text-align: center
}

div#mainContent p.grayEmphasis {
	display: none
}

a:link {
	text-decoration: none
}

.greenEmphasis {
	background-color: #ecffb3;
	color: #360
}

a.greenEmphasis {
	background-color: #fff;
	border-style: none none dotted none;
	border-width: 1px
}

a.greenEmphasis:hover {
	background-color: #ecffb3
}

.grayEmphasis {
	background-color: #f7f7f7;
	color: gray
}

a.blueEmphasis {
	text-decoration: none;
	border-radius: 2px;
	transition: background-color .2s ease-out;
	padding: 2px;
	background-color: var(--linkBackground);
	border-radius: 5px;
	padding-left: 4px;
	padding-right: 4px;
	color: var(--linkForeground)
}

a.extraEmphasis:hover {
	background-color: #cbe7f3
}

a.blueEmphasis:hover {
	background-color: var(--linkHoverBackground);
	color: var(--linkHoverForeground)
}

.blueEmphasis {
	background-color: #eef7fb;
	color: #0890ff
}

.redEmphasis {
	background-color: #ffcaca;
	color: #900
}

#rightContents h4 {
	font-size: 16px;
	font-weight: 700;
	border-top: #eee solid 1px;
	padding-top: 30px
}

#rightNewsletter p {
	font-size: 16px
}

#tutorialInformation div.tags p {
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	margin-right: 5px;
	line-height: 1;
	display: inline-block
}

#tutorialInformation div.tags a {
	background-color: #c5e8ff;
	font-size: 12px;
	font-weight: 400;
	padding: 5px;
	color: #2196f3;
	line-height: 0
}

#tutorialInformation div.tags a:hover {
	background-color: #006bb3;
	color: #fff
}

.bookContent {
	display: grid;
	grid-template-columns: 175px 1fr;
	align-items: start;
	padding-top: 30px;
	border-top: 1px solid #eee
}

.bookContent h4 {
	margin-top: 0
}

p.centerImage img {
	border: 2px solid #666
}

iframe.centerImage {
	border: 1px solid #666
}

div #mainContent ol {
	list-style-type: lower-roman;
	font-size: 18px;
	color: #373d42;
	line-height: 1.75em
}

table.data p {
	margin: -5px
}

#tutorialBox {
	display: none;
	background-color: #f8f8f8;
	margin-top: 10px
}

#bookBannerContent {
	margin-top: 0;
	padding-bottom: 1px;
	margin-bottom: 20px;
	padding-right: 10px;
	margin-left: -5px
}

#bookBannerContent img {
	margin-left: 32px;
	margin-top: -10px;
	margin-bottom: 30px
}

#bookBannerContent li {
	margin-bottom: 15px;
	margin-left: 0;
	list-style: none;
	padding-left: 75px;
	padding-top: 5px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: 3px 5px;
	line-height: 20px;
	padding-bottom: 15px;
	background-size: 60px
}

#bookBannerContent li:hover {
	background-size: 63px;
	background-position: 0 3px
}

#bookBannerContent ul {
	padding: 0;
	margin-left: 5px
}

#bookBannerContent ul ul.buyNowRight li {
	padding: 0;
	margin: 0
}

#bookBannerContent ul ul.buyNowRight {
	padding: 0;
	margin: 0
}

#bookBannerContent .bookLink:hover {
	text-decoration: none
}

#bookBannerContent .bookLink {
	color: #333;
	font-size: 14px;
	background-repeat: no-repeat;
	padding-top: 0;
	padding-bottom: 5px;
	background-position: 0 3px;
	margin-top: 0;
	line-height: 1.5em;
	display: inline-block
}

#bookBannerContent .bookLink:hover {
	text-decoration: underline
}

#bookBannerContent li.animationRight {
	background-image: url(https://www.kirupa.com/book/images/anim2.svg);
	background-size: 70px;
	background-position: -4px 0
}

#bookBannerContent li.js101Right {
	background-image: url(https://www.kirupa.com/book/images/js101_2.svg);
	background-size: 70px;
	background-position: -4px 0
}

#bookBannerContent li.learningReactRight {
	background-image: url(https://www.kirupa.com/book/images/react_book.svg);
	background-size: 70px;
	background-position: -4px 0
}

#bookBannerContent li.canvasRight {
	background-image: url(https://www.kirupa.com/images/canvas_book_small.png);
	background-size: 60px
}

#bookBannerContent .lessemphasis {
	color: #666
}

#sigNewsletter {
	padding: 18px;
	background-color: var(--primaryLightest)
}

#sigNewsletter h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700
}

#sigNewsletter p {
	margin: 0;
	font-size: 18px;
	font-weight: 400
}

.strikethrough {
	text-decoration: line-through
}

#sigNewsletter #mce-EMAIL {
	width: 300px;
	margin-right: 18px;
	background-image: url(https://www.kirupa.com/images/mail.svg)
}

#sigNewsletter input {
	margin-top: 15px;
	margin-bottom: 15px
}

#sigNewsletter .smallText {
	font-size: 12px
}

div#mainContent #pageComments {
	background-color: #333;
	color: #fff;
	padding: 10px;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	margin-top: 40px;
	text-align: center;
	background-image: url(https://www.kirupa.com/images/comment_bubble.svg);
	background-repeat: no-repeat;
	background-position: 240px center;
	padding-left: 20px;
	background-size: 80px;
	pointer-events: none;
	border: none
}

#pageCommentsImage {
	height: 0;
	position: relative;
	top: -29px;
	left: 40px
}

#oldComments {
	padding: 10px
}

.articleActions {
	margin-left: 71px
}

.articleActions div {
	display: inline-block;
	position: relative
}

.articleActions a {
	font-size: 14px;
	font-weight: 700;
	padding: 10px;
	color: #222;
	background-repeat: no-repeat;
	padding-left: 22px;
	margin-left: 10px;
	background-position: left center;
	background-size: 19px;
	position: relative;
	z-index: 10
}

.articleActions .articleRead:hover {
	background-color: var(--highlighterTwo)
}

.articleActions .articleRead a {
	background-image: url(https://www.kirupa.com/images/menu.svg)
}

.articleActions .articleRead svg {
	position: absolute;
	left: 7px;
	top: 15px;
	z-index: 1
}

.articleActions .articleDiscuss:hover {
	background-color: var(--highlighterThree)
}

.articleActions .articleDiscuss a {
	background-image: url(https://www.kirupa.com/images/message.svg)
}

.articleActions .articleDiscuss svg {
	position: absolute;
	left: 7px;
	top: 15px;
	z-index: 1
}

.articleList li {
	list-style-type: none
}

#mainContent .articleList li {
	padding-bottom: 20px
}

#mainContent .articleList li {
	line-height: 1.75;
	font-size: 18px;
	margin-bottom: 40px;
	color: #585858;
	padding-bottom: 10px;
	transition: all .2s cubic-bezier(0, .66, 0, .98)
}

#mainContent ul li:last-of-type {
	border-bottom: none
}

.articleList {
	padding: 0;
	margin-top: 40px;
	position: relative;
	z-index: 100
}

.articleList li>a {
	padding: 10px;
	padding-left: 75px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 45px;
	background-position: 12px 12px
}

.articleList li p {
	color: #999;
	margin-left: 5px;
	margin-bottom: 2px;
	margin-top: 3px
}

.articleList li:hover p {}

.articleList li:hover {
	background-color: var(--lighter);
	box-shadow: var(--primaryLighter) 0 0 50px;
	transform: scale(1.03)
}

#mainContent .articleList li a:hover h2 {
	text-decoration: underline
}

#mainContent .articleList li h2 {
	font-size: 22px;
	font-weight: 700;
	color: #222;
	margin: 0;
	padding: 0 5px;
	display: inline-block;
	transition: all .2s ease-out;
	border-top: none;
	margin-top: 2px;
	padding-top: 0
}

#mainContent p sup {
	vertical-align: top;
	position: relative;
	top: -.5em
}

body div#mainContent p.inlineCode.standalone {
	background-color: #f8f8f8!important;
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	color: #000;
	background: 0 0;
	text-shadow: 0 1px #fff;
	font-family: Consolas, monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.75;
	font-size: 16px
}

.callout {
	border-style: solid;
	border-width: 0 0 0 5px;
	border-color: #999;
	background: none repeat scroll 0 0 #fff;
	color: #000;
	margin: 0;
	padding-left: 10px
}

.searchbox {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 32px!important;
	white-space: nowrap;
	box-sizing: border-box;
	visibility: visible!important
}

.searchbox .algolia-autocomplete {
	display: block;
	width: 100%;
	height: 100%
}

.searchbox__wrapper {
	width: 100%;
	height: 100%;
	z-index: 999;
	position: relative
}

.searchbox__input {
	display: inline-block;
	box-sizing: border-box;
	transition: box-shadow .4s ease, background .4s ease;
	border: 0;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px #ccc;
	background: #fff!important;
	padding: 0;
	padding-right: 26px;
	padding-left: 32px;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	white-space: normal;
	font-size: 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.searchbox__input::-webkit-search-decoration,
.searchbox__input::-webkit-search-cancel-button,
.searchbox__input::-webkit-search-results-button,
.searchbox__input::-webkit-search-results-decoration {
	display: none
}

.searchbox__input:hover {
	box-shadow: inset 0 0 0 1px #b3b3b3
}

.searchbox__input:focus,
.searchbox__input:active {
	outline: 0;
	box-shadow: inset 0 0 0 1px #aaa;
	background: #fff
}

.searchbox__input::-webkit-input-placeholder {
	color: #aaa
}

.searchbox__input:-ms-input-placeholder {
	color: #aaa
}

.searchbox__input::-ms-input-placeholder {
	color: #aaa
}

.searchbox__input::placeholder {
	color: #aaa
}

.searchbox__submit {
	position: absolute;
	top: 0;
	margin: 0;
	border: 0;
	border-radius: 16px 0 0 16px;
	background-color: transparent;
	padding: 0;
	width: 32px;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	font-size: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	right: inherit;
	left: 0
}

.searchbox__submit::before {
	display: inline-block;
	margin-right: -4px;
	height: 100%;
	vertical-align: middle;
	content: ''
}

.searchbox__submit:hover,
.searchbox__submit:active {
	cursor: pointer
}

.searchbox__submit:focus {
	outline: 0
}

.searchbox__submit svg {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	fill: #6d7e96
}

.searchbox__reset {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
	border: 0;
	background: 0 0;
	cursor: pointer;
	padding: 0;
	font-size: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	fill: rgba(0, 0, 0, .5)
}

.searchbox__reset.hide {
	display: none
}

.searchbox__reset:focus {
	outline: 0
}

.searchbox__reset svg {
	display: block;
	margin: 4px;
	width: 8px;
	height: 8px
}

.searchbox__input:valid~.searchbox__reset {
	display: block;
	-webkit-animation-name: sbx-reset-in;
	animation-name: sbx-reset-in;
	-webkit-animation-duration: .15s;
	animation-duration: .15s
}

@-webkit-keyframes sbx-reset-in {
	0% {
		-webkit-transform: translate3d(-20%, 0, 0);
		transform: translate3d(-20%, 0, 0);
		opacity: 0
	}
	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

@keyframes sbx-reset-in {
	0% {
		-webkit-transform: translate3d(-20%, 0, 0);
		transform: translate3d(-20%, 0, 0);
		opacity: 0
	}
	100% {
		-webkit-transform: none;
		transform: none;
		opacity: 1
	}
}

.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
	right: 0!important;
	left: inherit!important
}

.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
	right: 48px
}

.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
	left: 0!important;
	right: inherit!important;
	z-index: 1000!important
}

.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before {
	left: 48px
}

.algolia-autocomplete .ds-dropdown-menu {
	position: relative;
	top: -6px;
	border-radius: 4px;
	margin: 6px 0 0;
	padding: 0;
	text-align: left;
	height: auto;
	position: relative;
	background: 0 0;
	border: none;
	z-index: 999;
	max-width: 600px;
	min-width: 500px;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, .2), 0 2px 3px 0 rgba(0, 0, 0, .1)
}

.algolia-autocomplete .ds-dropdown-menu:before {
	display: block;
	position: absolute;
	content: '';
	width: 14px;
	height: 14px;
	background: #fff;
	z-index: 1000;
	top: -7px;
	border-top: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-radius: 2px
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
	position: relative;
	z-index: 1000;
	margin-top: 8px
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover {
	text-decoration: none
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestion {
	cursor: pointer
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple {
	background-color: rgba(69, 142, 225, .05)
}

.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
	background-color: rgba(69, 142, 225, .05)
}

.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
	position: relative;
	border: solid 1px #d9d9d9;
	background: #fff;
	border-radius: 4px;
	overflow: auto;
	padding: 0 8px 8px;
	z-index: 1000
}

.algolia-autocomplete .ds-dropdown-menu * {
	box-sizing: border-box
}

.algolia-autocomplete .algolia-docsearch-suggestion {
	display: block;
	position: relative;
	padding: 0 8px;
	background: #fff;
	color: #02060c;
	overflow: hidden
}

.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
	color: #174d8c;
	background: rgba(143, 187, 237, .1);
	padding: .1em .05em
}

.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight {
	padding: 0 0 1px;
	background: inherit;
	box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, .8);
	color: inherit
}

.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
	padding: 0 0 1px;
	background: inherit;
	box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, .8);
	color: inherit
}

.algolia-autocomplete .algolia-docsearch-suggestion--content {
	display: block;
	float: right;
	width: 70%;
	position: relative;
	padding: 5.33333px 0 5.33333px 10.66667px;
	cursor: pointer
}

.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	height: 100%;
	width: 1px;
	background: #ddd;
	left: -1px
}

.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
	position: relative;
	border-bottom: 1px solid #ddd;
	display: none;
	margin-top: 8px;
	padding: 4px 0;
	font-size: 1em;
	color: #33363d
}

.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
	width: 100%;
	float: left;
	padding: 8px 0 0
}

.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
	float: left;
	width: 30%;
	padding-left: 0;
	text-align: right;
	position: relative;
	padding: 5.33333px 10.66667px;
	color: #a4a7ae;
	font-size: .9em;
	word-wrap: break-word
}

.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	height: 100%;
	width: 1px;
	background: #ddd;
	right: 0
}

.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
	display: none
}

.algolia-autocomplete .algolia-docsearch-suggestion--title {
	margin-bottom: 4px;
	color: #02060c;
	font-size: .9em;
	font-weight: 700
}

.algolia-autocomplete .algolia-docsearch-suggestion--text {
	display: block;
	line-height: 1.2em;
	font-size: .85em;
	color: #63676d
}

.algolia-autocomplete .algolia-docsearch-suggestion--no-results {
	width: 100%;
	padding: 8px 0;
	text-align: center;
	font-size: 1.2em
}

.algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
	display: none
}

.algolia-autocomplete .algolia-docsearch-suggestion code {
	padding: 1px 5px;
	font-size: 90%;
	border: none;
	color: #222;
	background-color: #ebebeb;
	border-radius: 3px;
	font-family: Menlo, Monaco, Consolas, courier new, monospace
}

.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {
	background: 0 0
}

.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
	display: block
}

.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
	display: block
}

@media all and (min-width:768px) {
	.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
		display: block
	}
}

@media all and (max-width:768px) {
	.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
		display: inline-block;
		width: auto;
		text-align: left;
		float: left;
		padding: 0;
		color: #02060c;
		font-size: .9em;
		font-weight: 700;
		text-align: left;
		opacity: .5
	}
	.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before {
		display: none
	}
	.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after {
		content: '|'
	}
	.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
		display: inline-block;
		width: auto;
		text-align: left;
		float: left;
		padding: 0
	}
	.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before {
		display: none
	}
}

.algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion {
	border-bottom: solid 1px #eee;
	padding: 8px;
	margin: 0
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content {
	width: 100%;
	padding: 0
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content::before {
	display: none
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	border: none
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0 {
	opacity: .6;
	font-size: .85em
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1 {
	opacity: .6;
	font-size: .85em
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1::before {
	background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAyMCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS40OSA0LjMxbDE0IDE2LjEyNi4wMDItMi42MjQtMTQgMTYuMDc0LTEuMzE0IDEuNTEgMy4wMTcgMi42MjYgMS4zMTMtMS41MDggMTQtMTYuMDc1IDEuMTQyLTEuMzEzLTEuMTQtMS4zMTMtMTQtMTYuMTI1TDMuMi4xOC4xOCAyLjhsMS4zMSAxLjUxeiIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMUQzNjU3IiAvPjwvc3ZnPg==);
	content: '';
	width: 10px;
	height: 10px;
	display: inline-block
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,
.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline {
	display: none!important
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title {
	margin: 0;
	color: #458ee1;
	font-size: .9em;
	font-weight: 400
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title::before {
	content: '#';
	font-weight: 700;
	color: #458ee1;
	display: inline-block
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text {
	margin: 4px 0 0;
	display: block;
	line-height: 1.4em;
	padding: 5.33333px 8px;
	background: #f8f8f8;
	font-size: .85em;
	opacity: .8
}

.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
	color: #3f4145;
	font-weight: 700;
	box-shadow: none
}

.algolia-autocomplete .algolia-docsearch-footer {
	width: 134px;
	height: 20px;
	z-index: 2000;
	margin-top: 10.66667px;
	float: right;
	font-size: 0;
	line-height: 0
}

.algolia-autocomplete .algolia-docsearch-footer--logo {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTY4JyBoZWlnaHQ9JzI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxnIGZpbGw9J25vbmUnIGZpbGwtcnVsZT0nZXZlbm9kZCc+PHBhdGggZD0nTTc4Ljk4OC45MzhoMTYuNTk0YTIuOTY4IDIuOTY4IDAgMCAxIDIuOTY2IDIuOTY2VjIwLjVhMi45NjcgMi45NjcgMCAwIDEtMi45NjYgMi45NjRINzguOTg4YTIuOTY3IDIuOTY3IDAgMCAxLTIuOTY2LTIuOTY0VjMuODk3QTIuOTYxIDIuOTYxIDAgMCAxIDc4Ljk4OC45Mzh6bTQxLjkzNyAxNy44NjZjLTQuMzg2LjAyLTQuMzg2LTMuNTQtNC4zODYtNC4xMDZsLS4wMDctMTMuMzM2IDIuNjc1LS40MjR2MTMuMjU0YzAgLjMyMiAwIDIuMzU4IDEuNzE4IDIuMzY0djIuMjQ4em0tMTAuODQ2LTIuMThjLjgyMSAwIDEuNDMtLjA0NyAxLjg1NS0uMTI5di0yLjcxOWE2LjMzNCA2LjMzNCAwIDAgMC0xLjU3NC0uMTk5Yy0uMjk1IDAtLjU5Ni4wMjEtLjg5Ny4wNjlhMi42OTkgMi42OTkgMCAwIDAtLjgxNC4yNGMtLjI0LjExNi0uNDM5LjI4LS41ODIuNDkxLS4xNS4yMTItLjIxOS4zMzUtLjIxOS42NTYgMCAuNjI4LjIxOS45OTEuNjE2IDEuMjNzLjkzOC4zNjIgMS42MTUuMzYyem0tLjIzMy05LjdjLjg4MyAwIDEuNjI5LjEwOSAyLjIzMS4zMjguNjAyLjIxOCAxLjA4OC41MjUgMS40NDQuOTE1LjM2My4zOTYuNjA5LjkyMi43NiAxLjQ4My4xNTcuNTYuMjMyIDEuMTc1LjIzMiAxLjg1djYuODc0Yy0uNDEuMDg5LTEuMDM0LjE5LTEuODY4LjMxNC0uODM0LjEyMy0xLjc3Mi4xODUtMi44MTMuMTg1LS42OSAwLTEuMzI3LS4wNjktMS44OTUtLjE5OGE0LjAwMSA0LjAwMSAwIDAgMS0xLjQ3MS0uNjM2IDMuMDg1IDMuMDg1IDAgMCAxLS45NTEtMS4xMzRjLS4yMjYtLjQ2NS0uMzQzLTEuMTItLjM0My0xLjgwMyAwLS42NTYuMTMtMS4wNzMuMzg0LTEuNTI1LjI2LS40NS42MDgtLjgxOSAxLjA0Ny0xLjEwNi40NDUtLjI4Ny45NS0uNDkyIDEuNTMyLS42MTVhOC44IDguOCAwIDAgMSAxLjgyLS4xODUgOC40MDQgOC40MDQgMCAwIDEgMS45NzIuMjR2LS40MzhjMC0uMzA3LS4wMzUtLjYtLjExLS44NzRhMS44OCAxLjg4IDAgMCAwLS4zODQtLjczIDEuNzg0IDEuNzg0IDAgMCAwLS43MjQtLjQ5MyAzLjE2NCAzLjE2NCAwIDAgMC0xLjE0My0uMjA1Yy0uNjE2IDAtMS4xNzcuMDc1LTEuNjkuMTY0YTcuNzM1IDcuNzM1IDAgMCAwLTEuMjYuMzA3bC0uMzIxLTIuMTkyYy4zMzUtLjExNy44MzQtLjIzMyAxLjQ3OC0uMzQ5YTEwLjk4IDEwLjk4IDAgMCAxIDIuMDczLS4xNzh6bTUyLjg0MiA5LjYyNmMuODIyIDAgMS40My0uMDQ4IDEuODU0LS4xM1YxMy43YTYuMzQ3IDYuMzQ3IDAgMCAwLTEuNTc0LS4xOTljLS4yOTQgMC0uNTk1LjAyMS0uODk2LjA2OWEyLjcgMi43IDAgMCAwLS44MTQuMjQgMS40NiAxLjQ2IDAgMCAwLS41ODIuNDkxYy0uMTUuMjEyLS4yMTguMzM1LS4yMTguNjU2IDAgLjYyOC4yMTguOTkxLjYxNSAxLjIzLjQwNC4yNDUuOTM4LjM2MiAxLjYxNS4zNjJ6bS0uMjI2LTkuNjk0Yy44ODMgMCAxLjYyOS4xMDggMi4yMzEuMzI3LjYwMi4yMTkgMS4wODguNTI2IDEuNDQ0LjkxNS4zNTUuMzkuNjA5LjkyMy43NTkgMS40ODMuMTU4LjU2LjIzMyAxLjE3NS4yMzMgMS44NTJ2Ni44NzNjLS40MS4wODgtMS4wMzQuMTktMS44NjguMzE0LS44MzQuMTIzLTEuNzcyLjE4NC0yLjgxMy4xODQtLjY5IDAtMS4zMjctLjA2OC0xLjg5NS0uMTk4YTQuMDAxIDQuMDAxIDAgMCAxLTEuNDcxLS42MzUgMy4wODUgMy4wODUgMCAwIDEtLjk1MS0xLjEzNGMtLjIyNi0uNDY1LS4zNDMtMS4xMi0uMzQzLTEuODA0IDAtLjY1Ni4xMy0xLjA3My4zODQtMS41MjQuMjYtLjQ1LjYwOC0uODIgMS4wNDctMS4xMDcuNDQ1LS4yODYuOTUtLjQ5MSAxLjUzMi0uNjE0YTguODAzIDguODAzIDAgMCAxIDIuNzUxLS4xM2MuMzI5LjAzNC42NzEuMDk2IDEuMDQuMTg1di0uNDM3YTMuMyAzLjMgMCAwIDAtLjEwOS0uODc1IDEuODczIDEuODczIDAgMCAwLS4zODQtLjczMSAxLjc4NCAxLjc4NCAwIDAgMC0uNzI0LS40OTIgMy4xNjUgMy4xNjUgMCAwIDAtMS4xNDMtLjIwNWMtLjYxNiAwLTEuMTc3LjA3NS0xLjY5LjE2NC0uNTE0LjA4OS0uOTM4LjE5MS0xLjI2LjMwN2wtLjMyMS0yLjE5M2MuMzM1LS4xMTYuODM0LS4yMzIgMS40NzgtLjM0OGExMS42MzMgMTEuNjMzIDAgMCAxIDIuMDczLS4xNzd6bS04LjAzNC0xLjI3MWExLjYyNiAxLjYyNiAwIDAgMS0xLjYyOC0xLjYyYzAtLjg5NS43MjUtMS42MiAxLjYyOC0xLjYyLjkwNCAwIDEuNjMuNzI1IDEuNjMgMS42MiAwIC44OTUtLjczMyAxLjYyLTEuNjMgMS42MnptMS4zNDggMTMuMjJoLTIuNjg5VjcuMjdsMi42OS0uNDIzdjExLjk1NnptLTQuNzE0IDBjLTQuMzg2LjAyLTQuMzg2LTMuNTQtNC4zODYtNC4xMDdsLS4wMDgtMTMuMzM2IDIuNjc2LS40MjR2MTMuMjU0YzAgLjMyMiAwIDIuMzU4IDEuNzE4IDIuMzY0djIuMjQ4em0tOC42OTgtNS45MDNjMC0xLjE1Ni0uMjUzLTIuMTE5LS43NDYtMi43ODgtLjQ5My0uNjc3LTEuMTgzLTEuMDEtMi4wNjctMS4wMS0uODgyIDAtMS41NzQuMzMzLTIuMDY1IDEuMDEtLjQ5My42NzYtLjczMyAxLjYzMi0uNzMzIDIuNzg4IDAgMS4xNjguMjQ2IDEuOTUzLjc0IDIuNjMuNDkyLjY4MyAxLjE4MyAxLjAxOCAyLjA2NiAxLjAxOC44ODIgMCAxLjU3NC0uMzQyIDIuMDY3LTEuMDE5LjQ5Mi0uNjgzLjczOC0xLjQ2LjczOC0yLjYzem0yLjczNy0uMDA3YzAgLjkwMi0uMTMgMS41ODQtLjM5NyAyLjMzYTUuNTIgNS41MiAwIDAgMS0xLjEyOCAxLjkwNiA0Ljk4NiA0Ljk4NiAwIDAgMS0xLjc1MiAxLjIyM2MtLjY4NS4yODYtMS43MzkuNDUtMi4yNjUuNDUtLjUyOC0uMDA2LTEuNTc0LS4xNTctMi4yNTItLjQ1YTUuMDk2IDUuMDk2IDAgMCAxLTEuNzQ0LTEuMjIzYy0uNDg3LS41MjctLjg2My0xLjE2Mi0xLjEzNy0xLjkwNmE2LjM0NSA2LjM0NSAwIDAgMS0uNDEtMi4zM2MwLS45MDIuMTIzLTEuNzcuMzk3LTIuNTA4YTUuNTU0IDUuNTU0IDAgMCAxIDEuMTUtMS44OTIgNS4xMzMgNS4xMzMgMCAwIDEgMS43NS0xLjIxNmMuNjc5LS4yODcgMS40MjUtLjQyMyAyLjIzMi0uNDIzLjgwOCAwIDEuNTUzLjE0MiAyLjIzNy40MjMuNjg1LjI4NiAxLjI3NC42OSAxLjc1MyAxLjIxNmE1LjY0NCA1LjY0NCAwIDAgMSAxLjEzNSAxLjg5MmMuMjg3LjczOC40MzEgMS42MDYuNDMxIDIuNTA4em0tMjAuMTM4IDBjMCAxLjEyLjI0NiAyLjM2My43MzggMi44ODIuNDkzLjUyIDEuMTMuNzggMS45MS43OC40MjQgMCAuODI4LS4wNjIgMS4yMDQtLjE3OC4zNzctLjExNi42NzctLjI1My45MTctLjQxN1Y5LjMzYTEwLjQ3NiAxMC40NzYgMCAwIDAtMS43NjYtLjIyNmMtLjk3MS0uMDI4LTEuNzEuMzctMi4yMyAxLjAwNC0uNTEzLjYzNi0uNzczIDEuNzUtLjc3MyAyLjc4OHptNy40MzggNS4yNzRjMCAxLjgyNC0uNDY2IDMuMTU2LTEuNDA0IDQuMDA0LS45MzYuODQ2LTIuMzY3IDEuMjctNC4yOTYgMS4yNy0uNzA1IDAtMi4xNy0uMTM3LTMuMzQtLjM5NmwuNDMxLTIuMTE4Yy45OC4yMDUgMi4yNzIuMjYgMi45NS4yNiAxLjA3NCAwIDEuODQtLjIxOSAyLjI5OS0uNjU2LjQ1OS0uNDM3LjY4NC0xLjA4Ni42ODQtMS45NDh2LS40MzdhOC4wNyA4LjA3IDAgMCAxLTEuMDQ3LjM5N2MtLjQzLjEzLS45My4xOTgtMS40OTIuMTk4LS43MzkgMC0xLjQxLS4xMTYtMi4wMTgtLjM0OWE0LjIwNiA0LjIwNiAwIDAgMS0xLjU2Ny0xLjAyNWMtLjQzMS0uNDUtLjc3NC0xLjAxNy0xLjAxMy0xLjY5NC0uMjQtLjY3Ny0uMzYzLTEuODg1LS4zNjMtMi43NzMgMC0uODM0LjEzLTEuODguMzg0LTIuNTc3LjI2LS42OTYuNjI5LTEuMjk4IDEuMTI5LTEuNzk2LjQ5My0uNDk4IDEuMDk1LS44ODEgMS44LTEuMTYyYTYuNjA1IDYuNjA1IDAgMCAxIDIuNDI4LS40NTdjLjg3IDAgMS42Ny4xMDkgMi40NS4yNC43OC4xMjkgMS40NDQuMjY1IDEuOTg1LjQxNVYxOC4xN3onIGZpbGw9JyM1NDY4RkYnLz48cGF0aCBkPSdNNi45NzIgNi42Nzd2MS42MjdjLS43MTItLjQ0Ni0xLjUyLS42Ny0yLjQyNS0uNjctLjU4NSAwLTEuMDQ1LjEzLTEuMzguMzkxYTEuMjQgMS4yNCAwIDAgMC0uNTAyIDEuMDNjMCAuNDI1LjE2NC43NjUuNDk0IDEuMDIuMzMuMjU2LjgzNS41MzIgMS41MTYuODMuNDQ3LjE5Mi43OTUuMzU2IDEuMDQ1LjQ5NS4yNS4xMzguNTM3LjMzMi44NjIuNTgyLjMyNC4yNS41NjMuNTQ4LjcxOC44OTQuMTU0LjM0NS4yMy43NDEuMjMgMS4xODggMCAuOTQ3LS4zMzQgMS42OTEtMS4wMDQgMi4yMzQtLjY3LjU0Mi0xLjUzNy44MTQtMi42MDEuODE0LTEuMTggMC0yLjE2LS4yMjktMi45MzYtLjY4NnYtMS43MDhjLjg0LjYyOCAxLjgxNC45NDIgMi45Mi45NDIuNTg1IDAgMS4wNDgtLjEzNiAxLjM4OC0uNDA3LjM0LS4yNzEuNTEtLjY0Ni41MS0xLjEyNSAwLS4yODctLjEtLjU1LS4zMDItLjc5LS4yMDMtLjI0LS40Mi0uNDItLjY1NS0uNTQyLS4yMzQtLjEyMy0uNTg1LS4yOS0xLjA1My0uNTAzLS4yNzYtLjEyNy0uNDctLjIxOC0uNTgyLS4yNzFhMTMuNjcgMTMuNjcgMCAwIDEtLjU1LS4yODcgNC4yNzUgNC4yNzUgMCAwIDEtLjU2Ny0uMzUxIDYuOTIgNi45MiAwIDAgMS0uNDU1LS40Yy0uMTgtLjE3LS4zMS0uMzQtLjM5LS41MS0uMDgtLjE3LS4xNTUtLjM3LS4yMjQtLjU5OGEyLjU1MyAyLjU1MyAwIDAgMS0uMTA0LS43NDJjMC0uOTE1LjMzMy0xLjYzOC45OTgtMi4xNy42NjQtLjUzMiAxLjUyMy0uNzk4IDIuNTc2LS43OTguOTY4IDAgMS43OTMuMTcgMi40NzMuNTF6bTcuNDY4IDUuNjk2di0uMjg3Yy0uMDIyLS42MDctLjE4Ny0xLjA4OC0uNDk1LTEuNDQ0LS4zMDktLjM1Ny0uNzUtLjUzNS0xLjMyNC0uNTM1LS41MzIgMC0uOTkuMTk0LTEuMzczLjU4My0uMzgyLjM4OC0uNjIyLjk0OS0uNzE3IDEuNjgzaDMuOTA5em0xLjAwNSAyLjc5MnYxLjQwNGMtLjU5Ni4zNC0xLjM4My41MS0yLjM2Mi41MS0xLjI1NSAwLTIuMjU1LS4zNzctMy0xLjEzMi0uNzQ0LS43NTUtMS4xMTYtMS43NDQtMS4xMTYtMi45NjggMC0xLjI5Ny4zNC0yLjMxNiAxLjAyMS0zLjA1NS42OC0uNzQgMS41NDgtMS4xMSAyLjYtMS4xMSAxLjAzMyAwIDEuODUyLjMyMyAyLjQ1OC45NjYuNjA2LjY0NC45MSAxLjU3Mi45MSAyLjc4NCAwIC4zMy0uMDMzLjY3Ni0uMDk2IDEuMDM4aC01LjMxNGMuMTA3LjcwMi40MDUgMS4yMzkuODk0IDEuNjExLjQ5LjM3MiAxLjEwNi41NTggMS44NS41NTguODYyIDAgMS41OC0uMjAyIDIuMTU1LS42MDZ6bTYuNjA1LTEuNzdoLTEuMjEyYy0uNTk2IDAtMS4wNDUuMTE2LTEuMzQ5LjM1LS4zMDMuMjM0LS40NTQuNTMyLS40NTQuODk0IDAgLjM3Mi4xMTcuNjY0LjM1Ljg3Ny4yMzUuMjEzLjU3NS4zMiAxLjAyMi4zMi41MSAwIC45MTItLjE0MiAxLjIwNC0uNDI0LjI5My0uMjgxLjQ0LS42NTEuNDQtMS4xMDh2LS45MXptLTQuMDY4LTIuNTU0VjkuMzI1Yy42MjctLjM2MSAxLjQ1Ny0uNTQyIDIuNDg5LS41NDIgMi4xMTYgMCAzLjE3NSAxLjAyNiAzLjE3NSAzLjA4VjE3aC0xLjU0OHYtLjk1N2MtLjQxNS42OC0xLjE0MyAxLjAyLTIuMTg2IDEuMDItLjc2NiAwLTEuMzgtLjIyLTEuODQzLS42NjEtLjQ2Mi0uNDQyLS42OTQtMS4wMDMtLjY5NC0xLjY4NCAwLS43NzYuMjkzLTEuMzguODc4LTEuODEuNTg1LS40MzEgMS40MDQtLjY0NyAyLjQ1Ny0uNjQ3aDEuMzRWMTEuOGMwLS41NTQtLjEzMy0uOTcxLS4zOTktMS4yNTMtLjI2Ni0uMjgyLS43MDctLjQyMy0xLjMyNC0uNDIzYTQuMDcgNC4wNyAwIDAgMC0yLjM0NS43MTh6bTkuMzMzLTEuOTN2MS40MmMuMzk0LTEgMS4xMDEtMS41IDIuMTIzLTEuNS4xNDggMCAuMzEzLjAxNi40OTQuMDQ4djEuNTMxYTEuODg1IDEuODg1IDAgMCAwLS43NS0uMTQzYy0uNTQyIDAtLjk4OS4yNC0xLjM0LjcxOC0uMzUxLjQ3OS0uNTI3IDEuMDQ4LS41MjcgMS43MDdWMTdoLTEuNTYzVjguOTFoMS41NjN6bTUuMDEgNC4wODRjLjAyMi44Mi4yNzIgMS40OTIuNzUgMi4wMTkuNDc5LjUyNiAxLjE1Ljc5IDIuMDEuNzkuNjM5IDAgMS4yMzUtLjE3NiAxLjc4OC0uNTI3djEuNDA0Yy0uNTIxLjMxOS0xLjE4Ni40NzktMS45OTUuNDc5LTEuMjY1IDAtMi4yNzYtLjQtMy4wMzEtMS4xOTctLjc1NS0uNzk4LTEuMTMzLTEuNzkyLTEuMTMzLTIuOTg0IDAtMS4xNi4zOC0yLjE1MSAxLjE0LTIuOTc1Ljc2MS0uODI1IDEuNzktMS4yMzcgMy4wODgtMS4yMzcuNzAyIDAgMS4zNDYuMTQ5IDEuOTMuNDQ3djEuNDM2YTMuMjQyIDMuMjQyIDAgMCAwLTEuNzctLjQ5NWMtLjg0IDAtMS41MTMuMjY2LTIuMDE5Ljc5OC0uNTA1LjUzMi0uNzU4IDEuMjEzLS43NTggMi4wNDJ6TTQwLjI0IDUuNzJ2NC41NzljLjQ1OC0xIDEuMjkzLTEuNSAyLjUwNS0xLjUuNzg3IDAgMS40Mi4yNDUgMS44OTkuNzM0LjQ3OS40OS43MTggMS4xNy43MTggMi4wNDJWMTdoLTEuNTY0di01LjEwNmMwLS41NTMtLjE0LS45OC0uNDIyLTEuMjg0LS4yODItLjMwMy0uNjUyLS40NTUtMS4xMS0uNDU1LS41MzEgMC0xLjAwMi4yMDItMS40MTEuNjA2LS40MS40MDUtLjYxNSAxLjAyMi0uNjE1IDEuODUxVjE3aC0xLjU2M1Y1LjcyaDEuNTYzem0xNC45NjYgMTAuMDJjLjU5NiAwIDEuMDk2LS4yNTMgMS41LS43NTguNDA0LS41MDYuNjA2LTEuMTU3LjYwNi0xLjk1NSAwLS45MTUtLjIwMi0xLjYyLS42MDYtMi4xMTQtLjQwNC0uNDk1LS45Mi0uNzQyLTEuNTQ4LS43NDItLjU1MyAwLTEuMDUuMjI0LTEuNDkxLjY3LS40NDIuNDQ3LS42NjIgMS4xMzMtLjY2MiAyLjA1OCAwIC45NTguMjEyIDEuNjcuNjM4IDIuMTM4LjQyNS40NjkuOTQ2LjcwMyAxLjU2My43MDN6TTUzLjAwNCA1LjcydjQuNDJjLjU3NC0uODk0IDEuMzg4LTEuMzQxIDIuNDQtMS4zNDEgMS4wMjIgMCAxLjg1Ny4zODMgMi41MDYgMS4xNDkuNjQ5Ljc2Ni45NzMgMS43ODEuOTczIDMuMDQ3IDAgMS4xMzgtLjMwOSAyLjEwOS0uOTI1IDIuOTEyLS42MTcuODAzLTEuNDYzIDEuMjA1LTIuNTM3IDEuMjA1LTEuMDc1IDAtMS44OTQtLjQ0Ny0yLjQ1Ny0xLjM0VjE3aC0xLjU4VjUuNzJoMS41OHptOS45MDggMTEuMTA0bC0zLjIyMy03LjkxM2gxLjczOWwxLjAwNSAyLjYzMiAxLjI2IDMuNDE1Yy4wOTYtLjMyLjQ4LTEuNDU4IDEuMTUtMy40MTVsLjkwOS0yLjYzMmgxLjY2bC0yLjkyIDcuODY2Yy0uNzc3IDIuMDc0LTEuOTYzIDMuMTEtMy41NTkgMy4xMWEyLjkyIDIuOTIgMCAwIDEtLjczNC0uMDc5di0xLjM0Yy4xNy4wNDIuMzUxLjA2NC41NDMuMDY0IDEuMDMyIDAgMS43NTUtLjU3IDIuMTctMS43MDh6JyBmaWxsPScjNUQ2NDk0Jy8+PHBhdGggZD0nTTg5LjYzMiA1Ljk2N3YtLjc3MmEuOTc4Ljk3OCAwIDAgMC0uOTc4LS45NzdoLTIuMjhhLjk3OC45NzggMCAwIDAtLjk3OC45Nzd2Ljc5M2MwIC4wODguMDgyLjE1LjE3MS4xM2E3LjEyNyA3LjEyNyAwIDAgMSAxLjk4NC0uMjhjLjY1IDAgMS4yOTUuMDg4IDEuOTE3LjI1OS4wODIuMDIuMTY0LS4wNC4xNjQtLjEzbS02LjI0OCAxLjAxbC0uMzktLjM4OWEuOTc3Ljk3NyAwIDAgMC0xLjM4MiAwbC0uNDY1LjQ2NWEuOTczLjk3MyAwIDAgMCAwIDEuMzhsLjM4My4zODNjLjA2Mi4wNjEuMTUuMDQ3LjIwNS0uMDE0LjIyNi0uMzA3LjQ3Mi0uNjAxLjc0Ni0uODc0LjI4MS0uMjguNTY4LS41MjYuODgzLS43NTEuMDY4LS4wNDIuMDc1LS4xMzcuMDItLjJtNC4xNiAyLjQ1M3YzLjM0MWMwIC4wOTYuMTA0LjE2NS4xOTIuMTE3bDIuOTctMS41MzdjLjA2OC0uMDM0LjA4OS0uMTE3LjA1NS0uMTg0YTMuNjk1IDMuNjk1IDAgMCAwLTMuMDgtMS44NjZjLS4wNjggMC0uMTM2LjA1NC0uMTM2LjEzbTAgOC4wNDhhNC40ODkgNC40ODkgMCAwIDEtNC40OS00LjQ4MiA0LjQ4OCA0LjQ4OCAwIDAgMSA0LjQ5LTQuNDgyIDQuNDg4IDQuNDg4IDAgMCAxIDQuNDg5IDQuNDgyIDQuNDg0IDQuNDg0IDAgMCAxLTQuNDkgNC40ODJtMC0xMC44NWE2LjM2MyA2LjM2MyAwIDEgMCAwIDEyLjcyOWMzLjUxOCAwIDYuMzcyLTIuODUgNi4zNzItNi4zNjhhNi4zNTggNi4zNTggMCAwIDAtNi4zNzEtNi4zNicgZmlsbD0nI0ZGRicvPjwvZz48L3N2Zz4K);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	overflow: hidden;
	text-indent: -9000px;
	padding: 0!important;
	width: 100%;
	height: 100%;
	display: block
}

#sbi {
	width: 530px;
	background-image: url(https://www.kirupa.com/images/mg.svg)
}

.kirupaInput {
	background-color: var(--inputBackground);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 7px center;
	padding-left: 37px;
	height: 30px;
	border-radius: 0;
	-webkit-appearance: none;
	border: 5px solid var(--inputBorder);
	font-size: 14px;
	font-weight: 700
}

.kirupaInput:focus {
	background-color: #fbfdff;
	border-color: var(--primary);
	outline: 0
}

.greenButton,
.kirupaButton {
	background-color: var(--primary);
	font-size: 16px;
	color: var(--textOnPrimary);
	border: 0;
	font-weight: 700;
	border-radius: 5px;
	padding: 13px;
	background-repeat: no-repeat;
	text-align: right;
	background-position: -7px center;
	background-size: 60px;
	line-height: 1em;
	display: inline-block
}

.greenButton a,
.kirupaButton a {
	color: var(--textOnPrimary);
	font-weight: 700;
	text-decoration: none
}

.greenButton:hover,
.kirupaButton:hover {
	background-color: var(--primaryDarker);
	cursor: pointer
}

#tutorialInformation .tags {
	display: none
}

#mainHeader .kirupaButton {
	background-image: url(https://www.kirupa.com/images/comment_bubble.svg);
	margin-right: 10px
}

.kirupaButtonSmall {
	font-size: 12px;
	padding: 5px
}

#mainHeader {
	width: 1195px;
	margin: 0 auto;
	margin-bottom: 18px;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 56px 220px 1fr 125px;
	color: #444;
	align-items: center;
	padding: 15px;
	margin-top: 18px;
	position: relative
}

#mainHeader canvas {
	position: absolute;
	z-index: -1;
	border-radius: 5px
}

#mainBody {
	width: 1225px;
	margin: 0 auto;
	margin-bottom: 18px;
	display: grid;
	grid-template-columns: 220px 760px 245px
}

#mainContent {
	background-color: #fff;
	padding: 25px;
	border-radius: 0;
	padding-top: 0;
	border-left: 2px solid #eee;
	border-right: 2px solid #eee;
	padding-left: 18px;
	padding-right: 18px
}

#leftContents {
	margin-right: 18px;
	margin-top: 10px
}

#rightContents {
	margin-left: 18px
}

#mainFooter {
	margin: 0 auto;
	width: 1250px;
	background-color: #d4edff;
	border-radius: 5px;
	padding: 20px;
	display: grid;
	grid-template-columns: 400px 1fr;
	align-items: center;
	margin-bottom: 18px
}

#mainFooter p {
	margin: 0;
	color: #214a79;
	font-size: 16px;
	line-height: 26px
}

#mainFooter a {
	color: #222;
	font-weight: 700
}

#mainFooter img {
	width: 20px;
	padding: 15px
}

#mainFooter div {
	text-align: right
}

div.sectionMainHeader {
	margin-top: 10px
}

nav.navigationBoxes {
	background-color: #fff;
	border-radius: 0
}

nav.navigationBoxes ul {
	margin: 0;
	list-style: none;
	padding: 0;
	font-size: 18px;
	font-weight: 700
}

nav.navigationBoxes ul li {}

nav.navigationBoxes ul ul {
	border-top: #eee 2px solid;
	border-bottom: #eee 2px solid;
	font-size: 16px;
	font-weight: 400;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px
}

nav.navigationBoxes ul a {
	color: #333;
	text-decoration: none;
	padding: 10px;
	padding-left: 36px;
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: 1px center;
	display: block;
	border-radius: 10px;
	margin-bottom: 5px
}

nav.navigationBoxes ul a:hover {
	background-color: #fafafa
}

nav.navigationBoxes ul a.boring {
	padding-left: 15px
}

nav.navigationBoxes ul ul a {
	background-size: 16px;
	background-position: 15px center;
	font-weight: 500;
	padding-left: 45px
}

#leftContents nav.navigationBoxes ul ul a {
	font-weight: 400;
	padding-left: 15px
}

#rightContents nav.navigationBoxes ul ul a {
	background-position-y: 12px;
	font-size: 14px;
	font-weight: 400;
	color: #111;
	line-height: 1.5em
}

#rightContents nav.navigationBoxes .oneBoxOnly ul {
	border-bottom: none;
	padding-bottom: 0
}

#rightContents .newForum {
	margin-top: 30px
}

#rightContents nav {
	position: relative
}

#rightContents nav .fresh_caption {
	z-index: 20;
	position: relative;
	margin-left: 52px;
	top: 4px;
	margin-bottom: 20px
}

#rightContents nav .fresh_background {
	position: absolute;
	top: -20px;
	left: 0;
	margin-bottom: 0;
	z-index: 10;
	width: 240px
}

#rightContents nav.newForum .fresh_caption {
	margin-left: 41px;
	top: 4px;
	margin-bottom: 10px
}

#rightContents nav.newForum .fresh_background {
	top: 7px;
	left: 32px;
	width: 176px;
	height: 18px
}

#navMobile {
	display: none
}

@media all and (max-width:1380px) {
	#navigationSlider nav.navigationBoxes {
		height: 100%;
		overflow: scroll
	}
	#mainContent img {
		max-width: 100%;
		height: auto
	}
	#mainHeader {
		width: calc(100% - 60px);
		display: flex;
		justify-content: space-between;
		margin-left: 15px;
		margin-right: 15px;
		overflow: hidden
	}
	#mainHeader canvas {
		margin-left: -30px
	}
	#leftContents {
		display: none
	}
	#mainHeader .wideOnly {
		display: none
	}
	#mainBody {
		grid-template-columns: none;
		width: calc(100% - 35px)
	}
	div#mainContent #pageComments {
		background-position-x: calc(50% - 120px)
	}
	#mainFooter p {
		margin-bottom: 18px
	}
	.tutorialInfo a {
		font-size: 16px
	}
	#pageCommentsImage {
		display: none;
		padding-left: 0
	}
	.authorText h1,
	h1 {
		font-size: 32px;
		line-height: 1.5
	}
	h2 {
		font-size: 28px;
		line-height: 1.5
	}
	h3 {
		font-size: 24px;
		line-height: 1.5
	}
	h4 {
		font-size: 20px;
		line-height: 1.5
	}
	#navigationSlider.hidden {
		opacity: 0
	}
	body {
		padding: 0
	}
	#navMobile {
		display: block;
		padding: 5px;
		border: 5px solid #00518a;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .5)
	}
	#navigationSlider {
		height: 100%;
		width: 100%;
		position: absolute;
		transform: translate3d(100%, 0, 0);
		transition: transform .15s ease-in;
		-webkit-transform: translate3d(100%, 0, 0);
		-webkit-transition: -webkit-transform .15s ease-in;
		z-index: 200;
		overflow: hidden;
		display: none;
		top: 0
	}
	.syntaxhighlighter {
		font-size: 16px!important
	}
	#navigationSlider.slideRight {
		transform: translate3d(0%, 0, 0);
		-webkit-transform: translate3d(0%, 0, 0);
		display: block
	}
	#rightContents {
		display: none
	}
	#mainContent iframe {
		width: 95%!important
	}
	#mainContent {
		width: 100%;
		margin: 0;
		border: 0;
		padding: 0
	}
	#mainBody {
		display: flex
	}
	#headerContainer {
		width: 100%
	}
	#adArea {
		border-bottom: 1px #eee solid
	}
	#headerMain {
		display: none
	}
	#footer,
	#bottomFooterLinks {
		display: none
	}
	#theHorizontalLine {
		width: 100%
	}
	.authorImage {
		display: none
	}
	#tutorialBox {
		display: none
	}
	.tutorialInfo {
		margin-top: 5px
	}
	div#mainContent p {
		padding-right: 5px
	}
	#mainFooter {
		width: calc(100% - 70px);
		margin-left: 15px;
		margin-right: 15px;
		display: flex;
		flex-direction: column
	}
	#sigNewsletter #mce-EMAIL {
		width: calc(100% - 40px)
	}
}