:root {
	--ui-label-height: var(--ui-size-lg);
	--ui-label-background-color: #c2c5ca;
	--ui-label-background-color-hover: var(--ui-label-background-color);
	--ui-label-color: #fff;
	--ui-label-link-dashed-color: rgba(255, 255, 255, 0.51);
	--ui-label-font-weight: var(--ui-font-weight-bold);
	--ui-label-font: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
}

.ui-label {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	background-color: transparent;
	padding: 0 8px;
	margin-right: 10px;
	height: var(--ui-label-height);
	border-radius: calc(var(--ui-label-height) / 2);
	border: 1px solid var(--ui-label-background-color);
	transition: 250ms linear all;
	box-sizing: border-box;
}

.ui-label-inner {
	/*font: 12px/calc(var(--ui-label-height) - 2px) var(--ui-label-font);*/
	font: var(--ui-font-size-5xs)/var(--ui-font-size-5xs) var(--ui-label-font);
	font-weight: var(--ui-label-font-weight);
	color: var(--ui-label-color);
	transition: 250ms linear all;
	max-width: 100%;
	/*overflow: hidden;*/
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ui-label span.ui-label-inner {
	overflow: hidden !important;
	margin: unset !important;
	font-family: var(--ui-label-font) !important;
	line-height: normal !important;;
}

a.ui-label:hover,
.ui-label-link:hover {
	background-color: var(--ui-label-background-color-hover);
	cursor: pointer;
}

a.ui-label .ui-label-inner,
.ui-label-link .ui-label-inner {
	border-bottom: 1px dashed transparent;
}

a.ui-label:hover .ui-label-inner,
.ui-label-link:hover .ui-label-inner {
	border-bottom: 1px dashed var(--ui-label-link-dashed-color);
}

.ui-label.ui-label-fill {
	background-color: var(--ui-label-background-color);
	border-color: transparent !important;
}

.ui-label:not(.ui-label-fill) {
	--ui-label-color: #757c87;
	--ui-label-link-dashed-color: rgba(51, 51, 51, 0.4);
}

a.ui-label:not(.ui-label-fill):hover,
.ui-label-link:not(.ui-label-fill):hover {
	--ui-label-background-color-hover: #f5f5f5;
	border-color: var(--ui-label-background-color);
}

/*region Colors*/
.ui-label-default {
	--ui-label-background-color-hover: var(--ui-color-base-20);
	--ui-label-background-color: var(--ui-color-base-15);
	--ui-label-color: var(--ui-color-base-80);
}

.ui-label-danger {
	--ui-label-background-color: var(--ui-color-palette-red-25);
	--ui-label-background-color-hover: var(--ui-color-palette-red-40);
	--ui-label-color: var(--ui-color-palette-red-80);
}

.ui-label-success {
	--ui-label-background-color: var(--ui-color-palette-green-30);
	--ui-label-background-color-hover: var(--ui-color-palette-green-40);
	--ui-label-color: var(--ui-color-palette-green-80);
}

.ui-label-warning {
	--ui-label-background-color: var(--ui-color-text-warning, #ffa900);
	--ui-label-background-color-hover: #f7a700;
}

.ui-label-primary {
	--ui-label-background-color-hover: var(--ui-color-palette-blue-40);
	--ui-label-background-color: var(--ui-color-palette-blue-25);
	--ui-label-color: var(--ui-color-palette-blue-70);
}

.ui-label-secondary {
	--ui-label-background-color: var(--ui-color-accent-aqua, #55d0e0);
	--ui-label-background-color-hover: #19d2c8;
}

.ui-label-lightgreen {
	--ui-label-background-color: #E4F5C8;
	--ui-label-background-color-hover: #E4F5C8;
	--ui-label-color: #589308;
}

.ui-label-lightblue {
	--ui-label-background-color: rgba(47, 198, 246, 0.15);
	--ui-label-background-color-hover: rgba(47, 198, 246, 0.15);
	--ui-label-color: #1097C2;
}

.ui-label-orange {
	--ui-label-background-color: var(--ui-color-palette-orange-25);
	--ui-label-background-color-hover: var(--ui-color-palette-orange-40);
	--ui-label-color: var(--ui-color-palette-orange-80);
}

.ui-label-lightorange {
	--ui-label-background-color: rgba(255, 169, 0, 0.37);
	--ui-label-background-color-hover: rgba(255, 169, 0, 0.37);
	--ui-label-color: #B47A00;
}

.ui-label-lightred {
	--ui-label-background-color: rgba(255, 87, 82, 0.17);
	--ui-label-background-color-hover: rgba(255, 87, 82, 0.17);
	--ui-label-color: rgba(207, 21, 21, 1);
}

.ui-label-yellow {
	--ui-label-background-color: var(--ui-color-accent-yellow);
	--ui-label-color: var(--ui-color-palette-orange-80);
}

.ui-label-lightyellow {
	--ui-label-background-color: rgba(242, 228, 28, 0.42);
	--ui-label-background-color-hover: rgba(242, 228, 28, 0.42);
	--ui-label-color: rgba(157, 126, 43, 1);
}

.ui-label-lavender {
	--ui-label-background-color: rgba(231, 216, 250, 1);
	--ui-label-background-color-hover: rgba(231, 216, 250, 1);
	--ui-label-color: rgba(142, 82, 236, 1);
}

.ui-label-light {
	--ui-label-background-color: var(--ui-color-base-15, #E6E7E9);
	--ui-label-background-color-hover: rgba(168, 173, 180, 0.91);
	--ui-label-color: var(--ui-color-base-80, #6a737f);
	--ui-label-link-dashed-color: var(--ui-color-base-80, #6a737f);
}

.ui-label-tag-light {
	--ui-label-background-color: #EAEBED;
	--ui-label-background-color-hover: #DCDEE1;
	--ui-label-color: #525C69;
	--ui-label-font-weight: var(--ui-label-font-weight, 400);
}

.ui-label-tag-secondary {
	--ui-label-background-color: #bcedfc;
	--ui-label-background-color-hover: #bcedfc;
	--ui-label-color: #333;
	--ui-label-font-weight: var(--ui-label-font-weight, 400);
}

/*endregion*/

/*region Size*/
.ui-label-lg {
	--ui-label-height: 25px;
}

.ui-label-md {
	--ui-label-height: var(--ui-size-lg);
}

.ui-label-sm {
	--ui-label-height: 18px;
}

.ui-label-xs {
	--ui-label-height: 14px;
}

.ui-label-xs .ui-label-inner {
	font-size: var(--ui-font-size-6xs);
	line-height: var(--ui-font-line-height-sm);
	font-weight: var(--ui-font-weight-bold);
}

/*endregion*/

.ui-label-icon {
	display: block;
	width: 21px;
	height: 100%;
	margin-right: -6px;
	opacity: .7;
	cursor: pointer;
	transition: .1s;
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.787%201L5%203.787%202.213%201%201%202.213%203.787%205%201%207.787%202.213%209%205%206.213%207.787%209%209%207.787%206.213%205%209%202.213%22%20fill%3D%22%23757c87%22/%3E%3C/svg%3E') center no-repeat;
}

.ui-label-fill .ui-label-icon {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.787%201L5%203.787%202.213%201%201%202.213%203.787%205%201%207.787%202.213%209%205%206.213%207.787%209%209%207.787%206.213%205%209%202.213%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E');
}

.ui-label-fill.ui-label-lightgreen .ui-label-icon,
.ui-label-fill.ui-label-lightblue .ui-label-icon,
.ui-label-fill.ui-label-light .ui-label-icon {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.787%201L5%203.787%202.213%201%201%202.213%203.787%205%201%207.787%202.213%209%205%206.213%207.787%209%209%207.787%206.213%205%209%202.213%22%20fill%3D%22%23757c87%22/%3E%3C/svg%3E');
}

.ui-label-icon:hover {
	transition: none;
	opacity: 1;
}