overleaf/services/web/public/stylesheets/app/error-pages.less

.full-height {
	height: 100%;
	padding: 0;
}

.error-container {
	display: flex;
	align-items: center;
}
	.error-figure {
		display: none;
		flex: 0 0 50%;
		padding: @line-height-computed * 2;
		@media (min-width: @screen-sm-min) {
			display: block;
		}
	}
	.error-figure-500 {
		&::before {
			content: '';
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 80%;
			background-image: url(/img/brand/500-visual-plug.svg);
			background-size: 400px;
			background-repeat: no-repeat;
			background-position: right 70%;
			pointer-events: none;
		}
		&::after {
			content: '';
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 50%;
			background-image: url(/img/brand/500-visual-tail.svg);
			background-size: 100px;
			background-repeat: no-repeat;
			background-position: 90% bottom;
			pointer-events: none;
		}
	}
		.error-img {
			display: block;
			max-width: 380px;
			height: auto;
			margin: 0 auto;
		}

	.error-details {
		flex: 0 1 50%;
		padding: @line-height-computed * 2;
	}
		.error-status {
			font-family: @font-family-serif;
			margin-bottom: (@line-height-computed / 4);
			color: @gray-dark;
			font-size: @font-size-h1;
		}
		.error-description {
			font-family: @font-family-serif;
			font-size: @font-size-h3;
			color: @gray-light;
			margin-bottom: @line-height-computed * 2;
		}
		.error-btn {
			color: @navbar-default-link-color;
			border: 2px solid @navbar-default-link-color;
			border-radius: @border-radius-base;
			font-weight: 700;
			line-height: 1;
			padding: @padding-base-vertical @padding-base-horizontal;

			&:hover,
			&:focus {
				text-decoration: none;
				color: #fff;
				background-color: @navbar-default-link-hover-bg;
				border: 2px solid @navbar-default-link-hover-color;
			}
		}