app-header {
	background: $primary_color;
	color: $white;
}
.big-header {
	background: $secondary-color;
	color: $white;
	.container {
		background: $secondary-color;
		color: $white;
		box-shadow: none;
	}
}

// material override
.navbar {
	margin-bottom: 0;
	background: $secondary-color;
	color: $white;
}

nav {
	background: $primary-color;
	text-align: center;
	border-bottom: 2px solid $primary-color;

	a {
		&::before {
			display: inline-block;
			position: relative;
			width: auto;
			background: none;
		}

		&::after {
			display: none;
		}

		&.active,
		&.is-active {
			color: $white;
			background: $primary_color !important;
			&:hover {
				background: $dark !important;
			}
		}
	}
}
a {
	color: $primary_color;
	&,
	&:hover {
		text-decoration: none;
	}

	&::before,
	&::after {
		content: '';
	}

	&.next::before,
	&.prev::after {
		position: absolute;
		top: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 0.6rem;
		margin: auto;
		background-color: $secondary_color;
		z-index: -1;
	}

	&.next::after,
	&.prev::before {
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border-bottom: 2px solid #000;
	}

	&.next::after {
		margin-right: 1rem;
		border-right: 2px solid #000;
		transform: rotate(-45deg);
	}

	&.prev::before {
		margin-left: 1rem;
		border-left: 2px solid #000;
		transform: rotate(45deg);
	}

	&:hover {
		&.next::before,
		&.prev::after {
			background-color: rgba($primary_color, 0.7);
		}
	}

	span {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}
a span.ui-steps-number {
	padding: 0;
}

.bottom-step-buttons {
	box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	bottom: 0;
	z-index: 10;
	height: auto;
	background: $white;
	width: 100%;
	position: fixed;
	right: 0;

	.button {
		display: inline-block;
		margin: 8px 16px;
	}
	.button {
		&.is-secondary {
			color: $secondary_color !important;
			border-color: $secondary_color !important;
		}
	}
}