.afbia-settings-page {
	* {
		box-sizing: border-box;
	}

	h2 {
		font-size: 2em;
	}

	.settings-container {
		margin: 30px 0;
		background: #fff;

		border: 1px solid @grayLight;
		box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	}

	.container-row {
		display: flex;
		flex-flow: row wrap;
	}

	.navigation-container {
		flex: 0 0 auto;
		padding: 0;
		background: @grayLighter;
		border-right: 1px solid @grayLight;
	}

	.content-container {
		flex: 0 0 auto;
	}

	.navigation {
		margin: 0;
		display: flex;

		.nav-item {
			margin: 0;

			a {
				background: @grayLighter;
				display: block;
				padding: 15px;
				text-decoration: none;

				font-weight: 600;
				font-size: 14px;
				line-height: 18px;
				color: @grayDark;
				border-top: 1px solid @grayLighter;
				border-bottom: 1px solid @grayLighter;


				&:focus {
					box-shadow: none;
				}

				&:hover {
					background: @brandColor;
					color: #fff;
					border-top: 1px solid @brandColor;
					border-bottom: 1px solid @brandColor;
				}
			}

			&.active {
				a {
					color: @brandColor;
					background: #fff;
					margin-right: -1px;
					border-top: 1px solid @grayLight;
					border-bottom: 1px solid @grayLight;

					&:hover {
						background: @brandColor;
						color: #fff;
					}
				}
			}

			&:first-child.active {
				a {
					border-top: 1px solid #fff;
				}
			}
		}
	}

	.section {
		a.fa {
			color: inherit;
			text-decoration: none;
		}
	}

	.section {
		margin: 0 0 60px;
	}

	.credits-container {
		margin: 30px 0;
		background: #fff;

		border: 1px solid @grayLight;
		box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
		padding: 15px;

		color: @grayDark;

		.credits {
			text-align: right;
		}

		a {
			text-decoration: none;
		}
	}

	fieldset.multi {
		.multi-input {
			.add-input, .remove-input {
				display: none;
				cursor: pointer;
				color: #999;

				&:hover {
					color: @brandColor;
				}
			}
		}

		.multi-input:last-of-type {
			.add-input, .remove-input {
				display: inline;
			}
		}

		.multi-input:first-of-type {
			.remove-input {
				display: none;
			}
		}
	}
}

@media (min-width: @screen-sm-min) {
	.afbia-settings-page {
		.navigation {
			margin: 0;
			display: block;

			.nav-item {
				.fa {
					display: inline-block;
					min-width: 20px;
				}
			}
		}
	}
}