/*Icons*/
.icon-button {
	display: inline-flex;
	min-width: 24px;
	align-items: center;
	text-align: center;
	cursor: pointer;
}
/* Forms */
input::-moz-focus-inner,
button::-moz-focus-inner {
	border: 0;
}

input:focus {
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
}

.u1-expandable {
	transition: height 0.4s linear;
	height: var(--u1-expandable-height);
	max-height: calc(50vh);
	min-height: 3rem;
}

/* UTILITIES */

.vue-not-ready {
	opacity: 0;
}

.vue-ready {
	opacity: 1;
	transition: opacity 0.5s ease-out;
}

.u1-hide {
	display: none;
}

.u1-pointer {
	cursor: pointer;
}

/* VUE TRANSITIONS */
.u1-fade-enter-active,
.u1-fade-leave-active {
	transition: opacity 0.3s;
}

.u1-fade-enter,
.u1-fade-leave-to {
	opacity: 0;
}

.u1-fadefast-enter-active,
.u1-fadefast-leave-active {
	transition: opacity 0.15s;
}

.u1-fadefast-enter,
.u1-fadefast-leave-to {
	opacity: 0;
}

.u1-pulse-enter-active,
.u1-pulse-leave-active {
	opacity: 0;
	animation: u1_pulse_animation 0.5s ease-out;
}

.u1-pulse-enter,
.u1-pulse-leave-active {
	opacity: 0;
}

@keyframes u1_pulse_animation {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* VUE TRANSITIONS -- END */

.u1-snackbars {
	position: fixed;
	display: flex;
	flex-direction: column;
	z-index: var(--u1-snackbar-z-index);
	bottom: 1rem;
	right: 0;
	left: 0;
	height: 1px;
	overflow: visible;
	gap: 5px;
	justify-content: flex-end;
	align-items: center;
}

.u1-snackbar {
	color: #fff;
	background: #333;
	text-align: center;
	padding: 1rem .5rem 1rem 1rem;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	display: grid;
	grid-template-columns: 1fr max-content;
	grid-gap: 10px;
	min-width: 30%;
	box-shadow: 0 5px 11px 5px rgba(0, 0, 0, 0.4);
}

.u1-snackbar-close {
	padding-right:2rem;
	padding-left:2rem;
}

.u1-snackbar-error {
	background: red;
}

.u1-snackbar-debug {
	background: darkred;
}

@media (max-width: 768px) {
	.u1-snackbars {
		bottom: 0;
		gap: 0;
	}
	.u1-snackbar {
		width: 100%;
		box-shadow: none;
		border-radius: 0;
	}
}

@keyframes rotateloop {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.u1-expand-enter-active,
.u1-expand-leave-active {
	transition: height 0.5s ease-in-out;
	overflow: hidden;
}
.u1-expand-enter,
.u1-expand-leave-to {
	height: 0;
}
.u1-expand-enter-active,
.u1-expand-leave-active {
	transition-property: opacity, height;
}

.u1-expand-enter,
.u1-expand-leave-to {
	opacity: 0;
}

.u1-slideright-enter-active,
.u1-slideright-leave-active {
	transition: 0.3s;
}

.u1-slideright-enter,
.u1-slideright-leave-to {
	opacity: 0;
	transform: translateX(100%);
}

@media (max-width: 960px) {
	.u1-slideright-enter,
	.u1-slideright-leave-to {
		/*Sliding in on small screens is distracting, as there is no other information on the screen.*/
		opacity: 0;
		transform: none;
	}
}