#app.layout-do {
	font-family: 'Sailec', sans-serif;

	.btn-light.active {
		@extend .btn-primary;
	}

	.btn-primary,
	.btn-light.active {
		background-color: #0069ff !important;
	}

	.btn-light {
		background-color: #e5e5e5;
	}

	.nav-pills {
		margin: 25px 0;
		background-color: #ffffff;
		border: 1px solid #dde1e8;
		border-radius: 5px;
		overflow: hidden;

		.nav-item {
			&:first-child {
				.nav-link {

					border-top-left-radius: 3px;
					border-bottom-left-radius: 3px;
				}
			}

			&:last-child {
				.nav-link {
					border-top-right-radius: 3px;
					border-bottom-right-radius: 3px;
					border-right: 0;
				}
			}

			&.disabled {
				pointer-events: none;
				user-select: none;
				opacity: 0.4;
			}

			.nav-link {
				cursor: pointer;
				position: relative;
				border-right: 1px solid #dde1e8;
				border-radius: 0;

				&.active {
					background-color: #0069ff;

					&:hover {
						color: #ffffff;
					}
				}

				&.visited {
					background-color: #dfeeff;
				}
			}
		}
	}

	.tab-navigation-buttons {
		margin: 20px 0 32px;
		text-align: right;
	}

	header {
		padding: 0;
		background-color: #031b4e;

		nav {
			background-color: #fff;
			color: #5b6987;
			text-align: left;

			.announcement {
				font-size: 0.875rem;
				padding: 10px 0;
				border-bottom: 1px solid #e5e8ed;

				.badge {
					background-color: #00d7d2;
					border-radius: 3px;
					color: #fff;
					padding: 3px 6px;
					margin-right: 10px;
				}

				a {
					color: inherit;
				}
			}

			.menu {
				padding: 10px 0;

				.navbar {
					padding: 0;

					.navbar-brand {
						display: inline-block;
						background-color: #e5e5e5;
						border-radius: 3px;
						width: 47px;
						height: 47px;
						position: relative;
						margin-right: 20px;

						svg {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-45%, -50%);
						}
					}

					.nav-item {
						font-size: 14px;
						line-height: 24px;
						font-weight: 600;
						margin-right: 30px;

						&.active {
							font-size: 24px;
							font-weight: 700;

							.nav-link {
								color: #99a1b3;
							}
						}

						.nav-link {
							color: #031b4e;
						}
					}
				}
			}
		}

		.hero {
			padding-top: 72px;
			padding-bottom: 72px;

			h1 {
				font-size: 36px;
				line-height: 45px;
				margin-bottom: 27px;
			}

			h2 {
				font-size: 20px;
				line-height: 200%;
				font-weight: 300;
				margin-bottom: 0;
			}
		}
	}

	section.tabs {
		h5 {
			font-size: 18px;
			line-height: 22px;
			margin-bottom: 39px;
		}

		.sites {
			margin-top: 53px;
		}

		.common {
			margin-top: 53px;
		}

		.nav-tabs {
			.nav-item {
				flex-grow: 0;

				&:first-child {
					.nav-link {
						padding-right: 35px;
					}
				}

				.nav-link {
					padding: 11px 42px 11px 22px;
					color: #0069ff;

					small {
						display: inline;
						top: 52.5%;
						padding-left: 3px;
					}

					.close {
						float: none;
						position: absolute;
						right: 6px;
						top: 55%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.tab-content {
			background-color: #fafafa;
			border-color: #e5e5e5;
			padding-left: 40px;
			padding-right: 40px;

			&.common-content {
				border-top: 1px solid #e5e5e5;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}

			.presets {
				display: flex;
				margin: 40px auto 30px;

				tooltip,
				.btn {
					flex: 1 1 auto;
				}

				.btn {
					width: 90%;
				}
			}

			.nav-pills .nav-item .nav-link {
				&.changed {
					font-weight: 700;

					small {
						display: inline;
						color: #ccc;
						top: 52.5%;

						@include media-breakpoint-up(xl) {
							padding-left: 0.3rem;
						}
					}
				}

				small {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					display: none;
					color: #999;

					@include media-breakpoint-down(lg) {
						right: 0.25rem;
					}
				}
			}

			.form-group {
				.form-control-sm,
				.col-form-label-sm {
					font-size: 1rem;
					margin-bottom: 8px;
				}

				select.form-control-sm {
					height: calc(1.5em + 0.75rem + 2px);
				}

				.form-check.form-check-radio {
					@extend .custom-radio;
				}

				.form-check.form-check-checkbox {
					@extend .custom-checkbox;
				}

				.form-check.form-check-radio,
				.form-check.form-check-checkbox {
					@extend .custom-control;

					.form-check-input {
						@extend .custom-control-input;
					}

					.form-check-label {
						@extend .custom-control-label;
					}
				}
			}

			.btn-outline-light {
				box-shadow: none !important;
				color: #666;
				border-color: #dde1e8;
				margin: 0 3px 4px;

				&.active,
				&:hover {
					background-color: #fff;
					border-color: #212529;
					color: #000;
				}

				svg {
					height: 1.1rem;
					vertical-align: text-bottom;

					path {
						fill: #999;
						transition: fill 0.15s ease-in-out;
					}
				}
			}
		}
	}

	section.steps {
		margin-top: 53px;
		margin-bottom: 37px;

		.card {
			border: 1px solid #dee2e6;
			background-color: #fafafa;
			padding: 0.5rem 40px 0.25rem;
		}

		.commands-do {
			ol {
				li + li{
					margin-top: 1rem;
				}
			}
			code {
				background-color: #e5e8ed;
				color: #3b4e76;
				border: 1px solid #cbcdd3;
				border-radius: 3px;
				font-style: italic;
				padding-left: 3px;
				padding-right: 3px;
			}
		}
	}

	main .buttons {
		margin-bottom: 30px;

		.btn {
			margin: 0 10px;
			font-weight: 700;
			font-size: 1rem;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}
	}
}