section.presets {
	margin-top: 0.5rem;
	margin-bottom: 1rem;

	@include media-breakpoint-down(md) {
		text-align: center;
	}

	.btn {
		margin-bottom: 0.25rem;

		&.btn-outline-dark{
			&:hover {
				background-color: #666;
			}
		}

		img {
			height: 1.1rem;
			vertical-align: text-bottom;
		}
	}
}

section.tabs {
	margin-bottom: 1rem;

	.nav-tabs {
		.nav-item {
			flex-basis: 50%;

			@include media-breakpoint-down(lg) {
				a {
					border-bottom-left-radius: $border-radius;
					border-bottom-right-radius: $border-radius;
				}

				&:nth-last-child(-n+2) {
					a {
						border-bottom-left-radius: 0;
						border-bottom-right-radius: 0;
					}
				}
			}

			@include media-breakpoint-up(xl) {
				flex: 1 1 auto;
			}

			a {
				cursor: pointer;
				position: relative;
				transition: all 0.25s;
				font-size: 0.9rem;
				white-space: nowrap;

				@include media-breakpoint-up(xl) {
					padding-left: 0;
					padding-right: 0;
					font-size: 1rem;
					text-align: center;
				}

				&.active {
					@include media-breakpoint-down(lg) {
						color: #fff;
						border-color: #343a40;
						background-color: #343a40;

						&.text-muted {
							color: #fff !important;
						}
					}

					@include media-breakpoint-up(xl) {
						border-bottom-color: #fff;
						background-color: transparent;
					}
				}

				&.changed {
					font-weight: 700;

					@include media-breakpoint-up(xl) {
						padding-right: 1rem;
					}

					small {
						display: inline;

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

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

					@include media-breakpoint-down(lg) {
						right: 0.25rem;
					}
				}
			}
		}
	}
	.tab-content {
		padding: 0.5rem 0.75rem;
		border-left: 1px solid #dee2e6;
		border-right: 1px solid #dee2e6;
		border-bottom: 1px solid #dee2e6;
		border-bottom-right-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;

		.form-group {
			margin-bottom: 0.25rem;

			.form-check {
				padding-top: 0.2rem;

				.form-check-label {
					cursor: pointer;
					user-select: none;
				}
			}

			.form-control.input-changed,
			.form-check.input-changed,
			select.input-changed {
				background-color: #fdffd9;
			}

			.form-check.input-changed {
				border-radius: 0.2rem;
			}

			.btn {
				&.btn-download {
					img {
						vertical-align: -2px;
						margin-right: 0.1rem;
						width: 1rem;
					}
				}
			}
		}
	}
}

main {
	flex: 1 1 auto;

	.commands {
		margin-bottom: 1rem;
	}

	.file {
		margin-bottom: 2rem;

		.btn-clipboard {
			font-size: 0;
			padding: 0.2rem 0.4rem 0.05rem;
			vertical-align: text-bottom;
			float: right;
		}
	}

	.commands,
	.file .code {
		overflow-x: auto;
		font-size: 0.75rem;
		line-height: 1.25;
		background-color: #f8f8f8;

		pre {
			margin-bottom: 0;
			font-size: inherit;

			code {
				display: block;
				padding: 0.6rem;
				-moz-tab-size: 4;
				tab-size: 4;
				overflow: visible;
				overflow-x: visible;
			}
		}
	}
}