:root {
	--u1-window-modal-z-index: 100;
	--u1-snackbar-z-index: 5000;
	--u1-window-modal-bg: hsla(0, 20%, 0%, 0.6);
	--u1-window-bg: hsl(0, 0%, 96%);
	--u1-loading-bg: 0, 0, 0, 0.7;
	--u1-loading-bg: 255, 255, 255, 0.7;
	--u1-window-header-bg: #464c54;
	--u1-dark-bg: #464c54;
}

.u1-loading::before,
.u1-loading-icon::before {
	border: 4px solid #afafaf;
	border-color: #333 #777 #777 #777;
	overflow: hidden;
	border-radius: 50%;
	content: "\00A0"; /*make this fit TEXT size*/
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0;
	animation: rotateloop 1s infinite linear;
	box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.2), 0px 0px 6px rgba(0, 0, 0, 0.2);
}

.u1-loading,
.u1-loading-icon {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	place-content: center;
	place-items: center;
	background: rgba(var(--u1-loading-bg));
	border-radius: inherit;
	/*WHY: Because some elemenents that should be covered may have even just z-index:1 and this will
	display below it. This is a quasi-hack because we don't want to be managing z-indexes, because 
	this is ripe for errors long term... */
	z-index: 1;
}

.u1-loading {
	font-size: 3rem; /* Make the non-inline version be larger and easier to see over other objects. */
}

.u1-loading-icon {
	position: relative;
	background: transparent;
	display: inline;
}

/* TOOLBARS */

.u1-toolbar {
	display: flex;
	gap: 0.3rem; /*Match gap size between li below*/
	list-style: none;
	padding: 0%;
	margin: 0;
}

.u1-toolbar-standalone {
	padding: 0.3rem;
	background: var(--u1-palette-gray);
	/* font-size: 90%; */
	padding: 0.4rem;
	border-radius: 0.4rem;
}

.u1-toolbar li {
	margin: 0;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.u1-window-toolbar {
	margin: 0;
	padding: 0;
	grid-column: 1 / -1; /*Toolbar Should spread across width of window header*/
}

.u1-toolbar.u1-collapse li {
	/*Ensure buttons don't fold down.*/
	flex-wrap: nowrap;
	flex-direction: column;
}
.u1-collapse {
	position: relative;
}
.u1-collapse:hover > .u1-collapsed {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
	top:100%;
	right:0;
}

.u1-collapsed {
	position:absolute;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
	z-index: 100;
}

/* Buttons */

.u1-button {
	/*Explanation: The button classes are specific to ensure they can be easily overriden in other
	styles, but also to keep the button scope limited to just buttons.
	It's tempting to want a toolbar to style all of the buttons, but then a toolbar is needed
	to be both styled and maintained. Based on experience, it's nice to not have to worry about
	how a toolbar is styled at the same time as the buttons. This keeps the styles simple and 
	easy to maintain. */
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-width: 0 1px 1px 0;
	background: hsl(0, 0%, 93.7%);
	padding: 0 1rem;
	line-height: 2.3;
	border-radius: 0.5rem;
	cursor: pointer;
	box-shadow: none; /* Ran into performance issues with too many buttons on the screen combined with sticky header positioning on Android...*/
	outline: none;
	/* Why: Inheriting the font size means we can use one method of resizing buttons.
	Since icons also will inherit the font size, we can make multisized "things" just using 
	font-size on toolbars or other elements. */
	font-size: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.u1-button:hover:not([disabled]) {
	/* Why: Instead of specifying a specific hover for each different visual style a button may
	have, this is a generic hover effect that hopefully will suffice for most styles of buttons. */
	box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

.u1-button:focus {
	/* box-shadow: 0 0 0 3px hsla(194.3, 86.3%, 57.1%, 0.61); */
	box-shadow: 0 0 0 1px hsl(0, 0%, 70%), 0 0 0 4px hsla(0, 0%, 59.2%, 0.31);
	transition: box-shadow 0.3s;
}

.u1-button-green {
	color: #fff;
	background: hsla(var(--u1-color-green), var(--u1-color-opacity));
}

.u1-button-red {
	color: #fff;
	background: hsla(var(--u1-color-red), var(--u1-color-opacity));
}

.u1-button-orange {
	color: #fff;
	background: hsla(var(--u1-color-orange), var(--u1-color-opacity));
}

.u1-button-blue {
	color: #fff;
	background: var(--u1-palette-blue);
}

.u1-button-gray {
	color: #fff;
	background: var(--u1-palette-gray);
}

.u1-button-transparent {
	color: inherit;
	background: transparent;
}

.u1-button-transparent-10 {
	color: inherit;
	background: hsla(0, 0%, 0%, 0.1);
}

.u1-button:active:not([disabled]) {
	box-shadow: none;
	transform: translateX(1px) translateY(1px);
}

.u1-button[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

.u1-buttons-large .u1-button {
	font-size: 2rem;
	line-height: 2;
	padding: 0 20px;
}

.u1-button-with-loading {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
}

.u1-button-with-loading > * {
	display: flex;
}

.u1-table td.u1-has-button
/*.u1-table td:has(> button)*/ {
	/* FUTURE: Eventually we won't need this class.
	https://developer.mozilla.org/en-US/docs/Web/CSS/:has */
	/*WHY: We want buttons to fit nicely inside table cells, as these are often
	used in apps.*/
	padding: 0.5rem;
}

/* Message displays */
*[class*="u1-message"] {
	--u1-message-color: 420;
	background: hsl(var(--u1-message-color), 90%, 90%);
	border-left: 0.6rem solid hsla(var(--u1-message-color), 40%, 40%, 0.5);
	color: hsl(var(--u1-message-color), 100%, 15%);
	padding: 1rem;
	box-shadow: 0px 4px 9px -8px currentColor;
}
.u1-message-error {
	--u1-message-color: 2;
}

.u1-message-info {
	--u1-message-color: 193;
}

.u1-message-success {
	--u1-message-color: 119;
}

.u1-message-note {
	--u1-message-color: 0;
	filter: saturate(0);
}

[class*="u1-i-"]::before {
	background: currentColor;
	content: "\00A0"; /*make this fit TEXT size*/
	line-height: inherit;
	height: 100%;
	width: 1em; /*size of the text*/
	display: inline-block;
	mask: url("../icons/pencil.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../icons/pencil.svg") no-repeat 50% 50% / contain;
	mask-position: center center;
	pointer-events: none;
	min-height: 14px;
	min-width: 14px;
}

.u1-i-pencil::before {
	/*Pencil is default*/
}

.u1-i-close::before {
	mask-image: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 4,4 L 28,28 M 28,4 L 4,28' style='stroke:currentColor;stroke-width:6; fill:none;stroke-linecap: round; stroke-linejoin: round;'/%3E%3C/svg%3E ");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 4,4 L 28,28 M 28,4 L 4,28' style='stroke:currentColor;stroke-width:6; fill:none;stroke-linecap: round; stroke-linejoin: round;'/%3E%3C/svg%3E ");
}

.u1-i-plane::before {
	mask-image: url("../icons/plane.svg");
	-webkit-mask-image: url("../icons/plane.svg");
}

.u1-i-arrow::before {
	mask-image: url("../icons/arrow.svg");
	-webkit-mask-image: url("../icons/arrow.svg");
}

.u1-i-trash::before {
	mask-image: url("../icons/trash.svg");
	-webkit-mask-image: url("../icons/trash.svg");
}

.u1-i-menu::before {
	mask-image: url("../icons/menu.svg");
	-webkit-mask-image: url("../icons/menu.svg");
}

.u1-i-user::before {
	mask-image: url("../icons/user.svg");
	-webkit-mask-image: url("../icons/user.svg");
}

.u1-i-plus::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='3' x2='12' y2='21'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='3' x2='12' y2='21'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.u1-i-save::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpolyline points='17 21 17 13 7 13 7 21'%3E%3C/polyline%3E%3Cpolyline points='7 3 7 8 15 8'%3E%3C/polyline%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'%3E%3C/path%3E%3Cpolyline points='17 21 17 13 7 13 7 21'%3E%3C/polyline%3E%3Cpolyline points='7 3 7 8 15 8'%3E%3C/polyline%3E%3C/svg%3E");
}

.u1-i-alert::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.u1-i-info::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

.u1-i-check::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.u1-i-chevron::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

.u1-i-chevrons-out::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17l-5-5 5-5M15 17l5-5-5-5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17l-5-5 5-5M15 17l5-5-5-5'/%3E%3C/svg%3E");
}

.u1-i-arrow-circle::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38'/%3E%3C/svg%3E");
}

.u1-i-dots::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='19' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='5' cy='12' r='1'%3E%3C/circle%3E%3C/svg%3E");
}

.u1-i-document::before {
	mask-image: url("../icons/document.svg");
	-webkit-mask-image: url("../icons/document.svg");
}

.u1-i-mail::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
}

.u1-i-gear::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230042' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51%0A1z%0AM 12, 12 m -3, 0 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0%0Az '%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230042' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51%0A1z%0AM 12, 12 m -3, 0 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0%0Az '%3E%3C/path%3E%3C/svg%3E");
}

.u1-i-clipboard::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 20 24' fill='%230002' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 0 20 24' fill='%230002' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
}

.u1-i-tag::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230002' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230002' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
}

.u1-i-question::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.u1-i-folder::before {
	mask-image: url("../icons/folder.svg");
	-webkit-mask-image: url("../icons/folder.svg");
}

.u1-i-folder-open::before {
	mask-image: url("../icons/folder-open.svg");
	-webkit-mask-image: url("../icons/folder-open.svg");
}

.u1-i-zoom::before {
	mask-image: url("../icons/zoom.svg");
	-webkit-mask-image: url("../icons/zoom.svg");
}

.u1-i-image::before {
	mask-image: url("../icons/image.svg");
	-webkit-mask-image: url("../icons/image.svg");
}

.u1-i-design::before {
	mask-image: url("../icons/design.svg");
	-webkit-mask-image: url("../icons/design.svg");
}

.u1-i-code::before {
	mask-image: url("../icons/code.svg");
	-webkit-mask-image: url("../icons/code.svg");
}

.u1-i-anm::before {
	transition: transform 0.3s;
}

.u1-i-rotate-down::before {
	transform: rotate(90deg);
}

.u1-i-rotate-left::before {
	transform: rotate(180deg);
}

.u1-i-rotate-up::before {
	transform: rotate(270deg);
}

.u1-i-animate-rotate::before {
	transition: transform 0.2s ease-in-out;
}

.u1-i-rotate-loop::before {
	animation: rotateloop 1s infinite linear;
}

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