/* Prevent the text contents of draggable elements from being selectable */
[draggable] {
	user-select: none;
	/* cursor: move; */
}

@keyframes color-fade-in {
	to {
		background-color: #393939;
	}
}

.full-view {
	animation: color-fade-in 500ms;
	animation-fill-mode: forwards;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.error-box {
	animation: fade-in 2s;
	animation-timing-function: ease-in;
	animation-delay: 500ms;
	animation-fill-mode: backwards;
	transform: translateY(-50%);
}

.error-box {
	background-color: white;

	animation: fade-in 2s;
	animation-timing-function: ease-in;

	animation-delay: 500ms;
	animation-fill-mode: backwards;

	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}
.error-box h1 {
	color: #525252;
	font-size: 28px;
	line-height: 1.5;
}
.error-box h3 {
	color: #505050;
	font-size: 16px;
	line-height: 1.5;
}
.error-box a:link,
.error-box a:visited {
	text-decoration: none;
	color: #ffb050;
}
.error-box a:hover,
.error-box a:active {
	text-decoration: underline;
	color: #ff8c00;
}

/********************   tango-dancr   ********************/
#tango-dancr {
	animation: fade-in 500ms;
	z-index: 100; /* for some reason this needs to be >3 or the arrows in breadcrumbs won't fade out smoothly */
	--trail-color: var(--color-primary);
}

#tango-dancr .fade-background {
	animation: fade-in 500ms;
}

#tango-dancr .tango-trail-loader {
	perspective: 800px;
}