#error-container
	display: flex
	justify-content: center
	align-items: center
	height: 100%
	padding: 0 15px

	#error-box
		display: flex
		justify-content: center
		flex-direction: column
		min-width: 300px

		border: thin solid $color-background-dark
		background-color: $color-background-light
		box-shadow: 1px 1px 2px rgba(black, .1)
		border-radius: 3px

		.error-top-container
			position: relative
			padding: 25px 25px 0

		.error-title
			font:
				size: 1.8em
				weight: 300

		.error-lead
			line-height: 1.6em

			a
				text-decoration: none
				&:hover
					text-decoration: underline

			&.extra
				color: $color-text-dark-primary
				border-top: thin solid $color-background-dark
				background-color: lighten($color-background, 2%)
				padding: 10px 25px
				font-size: .9em

		hr
			margin: 10px 0
			width: 100%
			border: none
			height: 1px
			background-color: $color-background-dark

		.error-cta
			padding: 10px 25px
			a
				margin: 0 15px 0 0
				padding: 5px
				text-decoration: none
				&.sign-up
					+button($color-primary, 3px, true)
				&.sign-in
					+button($color-text-dark-primary, 3px)

#node-overlay
	#error-container
		align-items: flex-start
		position: fixed
		top: $nav-link-height

		#error-box
			border-top-left-radius: 0
			border-top-right-radius: 0
			box-shadow: 0 0 25px rgba(black, .1), 0 0 50px rgba(black, .1)
			position: relative
			width: 100%