.navigator {
	background-color: #ffffff;
}

.ui.inverted.menu.doc-header {
	border-radius: 0;
	margin: 0px;
	background: #353644;
}

.extends {
	a {
		margin-left: 0.5em;
	}
}

.doc-body {
	#sidebar, #toc {
		height: 100%;
		overflow: hidden;
		&:hover {
			overflow-y: auto;
		}

		.ui.input {
			margin: 1em;
		}
		background-color: #3E3D49;

		.ui {
			.item {
				position: relative;
				cursor: pointer;
				height: 2em;
				line-height: 2em;
				padding: 0 0 0 1.5em;
				color: rgba(240, 248, 255, 0.61);
				&:hover {
					background-color: #4ba575;
					color: #ffffff;
				}
				&.hidden {
					display: none;
				}

				&.active {
					&::before {
						content: "";
						float: right;
						position: absolute;
						left: 0;
						top: 0px;
						bottom: 0px;
						width: 2px;
						border: 2px solid #4ba575;
					}
					background-color: rgba(255, 255, 255, 0.05);
				}
			}

		}
		.ui.segment {
			background-color: transparent;
		}
	}
	#doc-content {
		height: 100%;
		overflow: auto;
		> .v-box {
			> .box {
				padding: 1em 0 0 1em;
			}
		}
	}
}

.ui.tab {
	overflow: auto;
	height: 100%;
}

.type {
	display: inline-block;
	margin-left: 1em;
	&::before {
		content: "<";
	}
	&::after {
		content: ">";
	}
}

@-webkit-keyframes targetBackgroundFlash {
	50% {
		background-color: rgba(60, 132, 93, 0.5);
	}
}

@keyframes targetBackgroundFlash {
	50% {
		background-color: rgba(60, 132, 93, 0.5);
	}

}

.methods, .attributes, .events, .properties {
	> .item {
		.ui.labels {
			.label {
				border-radius: 0;
				background-color: #4ba575 !important;
				border-color: #4ba575 !important;
				color: #ffffff !important;
			}
		}
		&.target {
			animation: targetBackgroundFlash 1.5s;
			-webkit-animation: targetBackgroundFlash 1.5s;
		}
		padding: 0.5em 0 0.5em 1.5em;
		.item-header {
			em {
				float: right;
				margin-right: 1.5em;
			}
			.label {
				margin-left: 1em;
			}
			.default-value {
				margin-left: 0.5em;
				&::before {
					content: "( =";
				}
				&::after {
					content: " )";
				}
			}
		}
		.item-body {
			font-size: 0.9em;
			margin: 0.5em 0 0 1em;
			.parameters, .return {
				> .label {
					font-weight: bold;
					line-height: 2.5em;
				}
				ul {
					margin: 0;
					li {
						margin-bottom: 0.25em;
						.desc {
							line-height: 2.5em;
						}
					}
				}

			}
		}
		&:nth-of-type(even) {
			background-color: rgba(227, 227, 227, 0.5);;
			.prettyprint {
				background-color: rgb(247, 250, 248);
			}
			.ui.label {
				background-color: rgba(251, 250, 250, 0.85);
			}
		}

	}
}

.intro {
	.description {
		min-height: 1em;
		ul {
			margin: 1em;
			line-height: 1.5em;
		}
	}
}

.description {
	margin: 0;
	.prettyprint {
		display: block;
		border-width: 0px;
		background-color: rgb(220, 223, 221);
		margin-right: 1.5em;
		padding: 1em;
	}
	ul {
		margin: 0px;
		line-height: 0.75em;
	}
}

.ui.secondary.pointing.menu .active.item {
	border-color: #4ba575;
	&:hover {
		border-color: #4ba575;
	}
}

.ui.header:not(.item) {
	color: #555 !important;
}

body {
	color: #555 !important;
	a {
		color: #4ba575;
		&:hover {
			color: #555 !important;
		}
	}
}

@media only screen and (max-width: 48em) {
	#toc {
		display: none;
	}

	.methods, .attributes, .events, .properties {
		> .item {
			.ui.labels {
				.label {
					border-radius: 0;
					background-color: #4ba575 !important;
					border-color: #4ba575 !important;
					color: #ffffff !important;
				}
			}
			&.target {
				animation: targetBackgroundFlash 1.5s;
				-webkit-animation: targetBackgroundFlash 1.5s;
			}
			padding: 0.5em 0 0.5em 1.5em;
			.item-header {
				line-height: 1.5em;
				strong {
					margin-bottom: 0.5em !important;
				}
				em {
					float: none;
				}
				> * {
					display: block !important;
					margin: 0 !important;
				}
				.default-value {
					> * {
						margin: 0;
					}
				}
			}
			.item-body {
				margin: 0 !important;
			}
		}
	}
}

@media only screen and (min-width: 48.0625em) {
	#sidebar {
		display: none;
	}

	#showSidebarBtn {
		display: none !important;
	}
}

#sidebar {
	.v-box {
		height: 100%;
		.flex-box {
			background-color: #ffffff;
			.ui {
				.item {
					position: relative;
					cursor: pointer;
					height: 3em;
					line-height: 3em;
					padding: 0 0 0 2em;
					color: #353644;
					&:hover {
						background-color: rgba(56, 123, 87, 0.37) !important;
						color: #ffffff;
					}
					&.hidden {
						display: none;
					}
					&.active {
						&::before {
							content: "";
							float: right;
							position: absolute;
							left: 0;
							top: 0px;
							bottom: 0px;
							width: 2px;
							border: 2px solid #4ba575;
						}
						background-color: rgba(255, 255, 255, 0.05);
					}

					&:nth-of-type(even) {
						background-color: #e5e5e5;
					}

				}

			}
		}

	}

}