/* Navigation
	 ========================================================================== */

.docs .sidebar {
	overflow-y: auto;
}

.docs-nav-container {
	position: relative;
	display: none;
}

.docs .docs-nav {
	width: auto;
	opacity: 0;
	animation: fadeIn 0.5s cubic-bezier(0.3, 0, 0.3, 1) 0s 1 forwards;
}

.docs-nav.affix {
	top: 20px;
	z-index: 10;
}

.docs-nav.affix.topbar-is-fixed {
	top: 80px;
}

.docs-nav.affix-top {
	position: absolute;
	top: 0;
}

.docs-nav-group a {
	@include anim(color);
	color: rgba($primary, .8);
	font-family: $font-primary;
	font-weight: 400;
	font-size: 18px;
	margin-bottom: 36px;
}

.docs-nav-group a:hover,
.docs-nav-group a:focus {
	color: $accent;
	text-decoration: none;
}

.docs-nav-list {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 46px;
}

.docs-nav-item {
	list-style: none;
	margin-bottom: 10px;
}

.docs-nav-link {
	@include anim(color);
	color: rgba($primary, 0.6);
	font-size: 14px;
}

.docs-nav-link:hover,
.docs-nav-link:focus {
	color: $accent;
	text-decoration: none;
}

/* Content
	 ========================================================================== */

.docs-terms {
	margin: 80px 0;
}

.docs-guide {
	margin-top: 80px;
	position: relative;
}

.docs-content {
	color: rgba($primary, .6);
}

.docs-content a:not([class]) {
	@include anim(color);
	color: $accent;
	font-weight: 400;
}

.docs-content a:not([class]):hover,
.docs-content a:not([class]):focus {
	color: rgba($accent, .6);
	text-decoration: none;
}

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content h5,
.docs-content h6 {
	color: rgba($primary, .8);
	font-family: $font-primary;
	font-weight: 600;
}

.docs-content h1 {
	font-family: $font-primary;
	font-weight: 700;
	font-size: 36px;
	margin: 0 0 32px;
}

.docs-content h2 {
	font-size: 24px;
	margin: -28px 0 40px;
	padding-top: 94px;
}

.docs-content h3 {
	font-size: 22px;
	margin: 22px 0;
}

.docs-content h4 {
	font-size: 20px;
	margin: 20px 0;
}

.docs-content h5 {
	font-size: 18px;
	margin: 18px 0;
}

.docs-content h6 {
	font-family: $font-primary;
	font-weight: 400;
	border-bottom: 2px solid rgba($primary, .1);
	color: rgba($primary, .4);
	font-size: 18px;
	line-height: 24px;
	margin: 0;
	padding-bottom: 36px;
}

.docs-content ul,
.docs-content ol {
	padding: 0 0 0 20px;
	margin: 0 0 10px;
}

.docs-content ul li {
	padding-left: 1em;
}

.docs-content ul li p {
	display: inline-block;
}

.docs-content ol {
	color: rgba($primary, .4);
	font-size: 16px;
}

.docs-content ol li,
.docs-content ul li {
	padding-left: 6px;
}

.docs-content ol li,
.docs-content ol li p {
	color: rgba($primary, .6);
}

.docs-content p:not([class]),
.docs-content li {
	font-size: 15px;
	line-height: 24px;
}

/* Home - Top
	 ========================================================================== */

.docs-home-top {
	margin-bottom: 72px;
}

.docs-home-top-title {
	font-family: $font-primary;
	font-weight: 700;
	color: rgba($primary, .9);
	font-size: 57px;
	letter-spacing: -1px;
	line-height: 48px;
	margin: 80px 0 56px;
	text-align: center;
}

.docs-home-top-description {
	color: rgba($primary, .8);
	font-family: $font-primary;
	font-weight: 400;
	font-size: 20px;
	line-height: 36px;
	margin: 0 0 78px;
	text-align: center;
}

.docs-home-top-form .form-control {
	@include anim(all);
	border: 1px solid transparent;
	font-weight: 400;

	.input-inner-icon-helper {
		@include anim(color);
	}

	&:focus {
		background: white;
		border-color: $accent;
	}

	&:focus + .input-inner-icon-helper {
		color: $accent;
	}

	.btn-sm {
		width: 100%;
	}
}

.docs-home-top-form .btn {
		padding: 0;
}

/* Home - Middle
	 ========================================================================== */

.docs-home-middle {
	margin: 0 0 56px;
}

.docs-home-middle-subtitle,
.docs-home-what-subtitle,
.newsletter-subtitle {
	color: rgba($primary, .8);
	font-family: $font-primary;
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	margin: 0 0 40px;
	text-align: center;
}

.docs-home-middle-description,
.docs-home-what-description,
.newsletter-description {
	color: rgba($primary, .6);
	font-family: $font-primary;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	margin: 0;
	text-align: center;
}

.docs-home-what-subtitle,
.newsletter-subtitle {
	margin-bottom: 30px;
}

/* Home - What
	 ========================================================================== */

.docs-home-what {
	margin: 78px 0 56px;
}

.docs-content .docs-home-description:first-child {
	margin-bottom: 130px;
}

/* Video
	 ========================================================================== */

.docs-video {
	height: 0;
	margin: 0 -20px 72px -20px;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}

.docs-video iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* ==========================================================================
	 Newsletter
	 ========================================================================== */

.newsletter {
	background: rgba($primary, .02);
	padding: 132px 0 0;
}

.newsletter .newsletter-subtitle {
	font-size: 33px;
	font-family: $font-primary;
	font-weight: 700;
	color: rgba($primary, 0.8);
	line-height: 48px;
	margin: 0 0 12px;
}

.newsletter .newsletter-description {
	font-size: 18px;
	font-family: $font-secondary;
	font-weight: 600;
	color: rgba($primary, 0.6);
	line-height: 36px;
}

.newsletter-form {
	margin: 60px 0 120px;
}

.newsletter .form-group {
	margin-bottom: 12px;
}

.newsletter-avatar {
	background: transparent;
	border-radius: 50%;
	border: 1px solid white;
	display: none;
	height: 84px;
	margin: 72px auto 42px;
	text-align: center;
	width: 84px;
}

.newsletter-avatar .icon-16-mail {
	color: white;
	font-size: 32px;
	line-height: 84px;
}

.topbar-docs .topbar-list {
	max-width: 100%;

	.topbar-item {

		@media	(max-width: 599px) {
			margin: 0;
			&:not(.login) {
				display: none;
			}
		}

		@media	(min-width: 600px) {
			margin: 0 12px;
			display: inline-block;
		}

		@media	(min-width: 720px) {
			margin: 0 10px;
		}

		@media	(min-width: 1024px) {
			margin: 0 16px;
		}

		@media	(min-width: 1280px) {
			margin: 0 20px;
		}
	}

	.topbar-link {
		white-space: nowrap;

		font-family: $font-primary;
		font-weight: 700;
		font-size: 15px;
		color: rgba($primary, 0.6);

		&.topbar-link-selected {
			color: $accent;
		}
	}

	.get-started {
		@media	(max-width: 720px) {
			display: none;
		}
	}
}

/* Medium screens
	 ========================================================================== */
@media (max-width: $screen-md-min) {
	.docs .sidebar-offset {
		padding-top: 60px;
	}

	.docs .sidebar-offset .topbar {
		display: none;
	}

	.topbar.topbar-large .wedeploy-logo .liferay {
		display: none;
	}

	.docs-home-top-form .btn {
		margin-top: 24px;
	}
}

@media (min-width: $screen-md-min) {
	.docs .sidebar {
		width: 284px;
	}

	.docs .sidebar-offset {
		width: calc(100% - 284px);
		margin-left: 284px;
	}

	.topbar-docs-aux {
		display: flex;
	}

	.topbar-docs-main {
		display: none;
	}

	.docs-nav-container {
		display: block;
	}

	.docs-nav-list {
		margin-top: 75px;
	}

	.docs-home-top {
		margin-top: 60px;
		margin-bottom: 96px;
	}

	.docs-home-top-title {
		margin: 64px 0 41px;
		font-size: 49px;
	}

	.docs-home-top-description {
		font-size: 24px;
	}

	.docs-home-middle {
		margin-bottom: 68px;
	}

	.docs-home-middle-subtitle {
		margin-bottom: 24px;
	}

	.docs-home-what-subtitle,
	.newsletter-subtitle {
		margin-bottom: 30px;
	}

	.docs-home-middle-subtitle,
	.docs-home-what-subtitle,
	.newsletter-subtitle {
		font-size: 32px;
	}

	.docs-home-what {
		margin-bottom: 80px;
	}

	.newsletter .btn-sm {
		width: auto;
	}

	.newsletter .form-group {
		margin-bottom: 0;
	}

	.docs-video {
		margin-left: 0;
		margin-right: 0;
	}

	.docs-guide {
		margin-top: 40px;
	}
}

/* Sidebar
	 ========================================================================== */

.docs .sidebar-search {
	margin: 20px 12px;

	.form-control {
		border: 1px solid #FFF;

		&:focus {
			border-color: $accent;
		}
	}
}

.docs .sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0 12px;
	height: 100%;
	overflow-y: auto;
}

.docs .sidebar-header {
	background: rgba($primary, 0.03);
	color: rgba($primary, 0.8);

	.sidebar-icon {
		color: rgba($primary, 0.8);
	}
}

.docs .sidebar-list-1 .sidebar-link {
	color: rgba(14, 20, 26, 0.8);
	font-size: 13px;
	font-weight: 600;
	height: auto;
	line-height: 24px;
	padding: 18px 12px;
	font-family: $font-secondary;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.docs .sidebar-list-1 .sidebar-link.sidebar-link-selected span {
	font-family: $font-secondary;
	font-weight: 600;
}

.docs .sidebar-list-1 .sidebar-link.sidebar-link-selected [class^="icon-16-"],
.docs .sidebar-list-1 .sidebar-link.sidebar-link-selected [class*="icon-16-"]{
	font-family: "icon-16";
}

.docs .sidebar-list-1 .sidebar-icon {
	-webkit-transition: color 0.3s ease-in-out;
	-o-transition: color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
	color: rgba(14, 20, 26, 0.6);
	display: inline-block;
	margin-right: 12px;
	margin-top: -1px;
	text-align: center;
	vertical-align: middle;
	width: 16px;
}

.docs .sidebar-list-1 .sidebar-link:hover .sidebar-icon,
.docs .sidebar-list-1 .sidebar-link:focus .sidebar-icon,
.docs .sidebar-list-1 .sidebar-link-selected .sidebar-icon {
	color: $accent;
}

.docs .sidebar-list-1 .sidebar-link:hover,
.docs .sidebar-list-1 .sidebar-link:focus,
.docs .sidebar-list-1 .sidebar-link-selected,
.docs .sidebar-list-1 .sidebar-link-selected:hover,
.docs .sidebar-list-1 .sidebar-link-selected:focus {
	background: rgba($accent, .1);
	color: $accent;
	font-family: $font-secondary;
	font-weight: 600;
	border: none;
	border-radius: 4px;
}

.docs .sidebar-list .sidebar-list-2 {
	padding: 0;
}

.docs .sidebar-list-2 .sidebar-link {
	color: rgba(14, 20, 26, 0.9);
	font-size: 13px;
	font-weight: 400;
	height: 36px;
	line-height: 36px;
	padding: 0 20px 0 60px;
}

.docs .sidebar-list-2 .sidebar-link:hover,
.docs .sidebar-list-2 .sidebar-link:focus,
.docs .sidebar-list-2 .sidebar-link-selected,
.docs .sidebar-list-2 .sidebar-link-selected:hover,
.docs .sidebar-list-2 .sidebar-link-selected:focus {
	font-weight: 400;
}

.docs .sidebar-list-2 .sidebar-link.sidebar-link-selected span {
	font-weight: 400;
}

.docs .sidebar-list li .sidebar-list li .sidebar-link {
	padding: 12px 20px 12px 40px;
	font-size: 12px;
	line-height: 24px;
	height: auto;

	.sidebar-icon {
		display: none;
	}
}

// END SIDEBAR

.docs .search {
	margin: 0;
}

.docs .guide-header {
	padding: 60px 0;
	margin-top: 0;
}

.docs .guide-header.topbar-is-fixed {
	@media (min-width: 960px) {
		margin-top: 60px;
	}
}

.docs .guide-header-title {
	margin: 0;
}

.docs .btn-copy {
	background: rgba($white, 0.6);
	border-radius: 2px;
	height: 24px;
	line-height: 24px;
	padding: 0;
	width: 24px;
	top: 4px;

	&:hover {
		background: rgba($white, 0.8);
	}

	> [class*="icon-"] {
		font-size: 10px;
	}
}

.docs .CodeMirror-sizer {
	margin-left: 40px !important;
}

.docs .CodeMirror-gutter-wrapper {
	left: -28px !important;
}

.docs .CodeMirror-linenumber {
	line-height: 24px;
	text-align: left;
	width: 32px !important;
	padding: 0;
}

.docs * code,
.docs .docs-content * code {
	display: inline-block;
	color: rgba($primary, 0.6);
	background: rgba($primary, 0.1);
	font-size: 100%;
	font-family: $font-mono;
	padding: 0 4px;
}

.docs * .code,
.docs .docs-content * .code {
	margin: 0;
	background: transparent;
}

.docs p code,
.docs .docs-content p code {
	line-height: 22px;
}
.docs h4 code,
.docs .docs-content h4 code {
	line-height: 24px;
}
.docs h6 code,
.docs .docs-content h6 code {
	line-height: 26px;
}

.docs p a:not([class]),
.docs li a:not([class]) {
	border-bottom: 1px dashed rgba($primary, 0.4);
	color: inherit;

	&:hover {
		border-bottom: 1px dashed $accent;
		color: $accent;
	}
}
.docs .docs-content .guide-github {
	margin: 24px 0 60px;
}

/* sidebar docs */
.docs .sidebar-list li .sidebar-list {
	padding: 0;
	display: none;
}

.docs .sidebar-list li.active .sidebar-list {
	display: block;
}

.docs .sidebar-list li .sidebar-list li:last-child {
	margin-bottom: 0;
}