:root {
	--ui-label-height: 21px;
	--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: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	--ui-label-font-weight: var(--ui-font-weight-semi-bold, 600);
}

.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: 12px/14px var(--ui-label-font);
	vertical-align: middle;
	color: var(--ui-label-color);
	transition: 250ms linear all;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

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: #B0B5BB;
	--ui-label-background-color: var(--ui-color-base-50, #a8adb4);
}

.ui-label-danger {
	--ui-label-background-color: var(--ui-color-text-alert, #ff5752);
	--ui-label-background-color-hover: #ff5752;
}

.ui-label-success {
	--ui-label-background-color: var(--ui-color-palette-green-55, #9DCF00);
	--ui-label-background-color-hover: #8fbc00;
}

.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: var(--ui-color-primary, #2fc6f6);
	--ui-label-background-color-hover: #2fc6f6;
}

.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-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-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-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: 21px;}

.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;
}