/* Clickable badges (a-tags, or spans with a click handler + cursor-pointer) darken on
   hover: each variant's hover background is its base color darkened ~8% (the
   translucent tints instead raise their alpha 0.05). */

/* Primary /////////////////////////////////////////// */
.sl-badge-primary {
	background-color: #298ccd !important;
	color: #fff;
}

a.sl-badge.sl-badge-primary:hover,
a.sl-badge.sl-badge-primary:focus,
.sl-badge.sl-badge-primary.cursor-pointer:hover {
	background-color: #2681bd !important;
	color: #fff;
}


/* Primary Light /////////////////////////////////////////// */
.sl-badge-primary-light {
	background-color: rgba(62,165,235,0.18) !important;
	color: #4b8bb6;
}

a.sl-badge.sl-badge-primary-light:hover,
a.sl-badge.sl-badge-primary-light:focus,
.sl-badge.sl-badge-primary-light.cursor-pointer:hover {
	background-color: rgba(62,165,235,0.25) !important;
	color: #4b8bb6;
}


/* Success /////////////////////////////////////////// */
.sl-badge-success {
	background-color: #41bd7f !important;
	color: #fff;
}

a.sl-badge.sl-badge-success:hover,
a.sl-badge.sl-badge-success:focus,
.sl-badge.sl-badge-success.cursor-pointer:hover {
	background-color: #3cae75 !important;
	color: #fff;
}


/* Success Light /////////////////////////////////////////// */
.sl-badge-success-light {
	background-color: rgba(86,189,125,0.18) !important;
	color: #56bd7d;
}

a.sl-badge.sl-badge-success-light:hover,
a.sl-badge.sl-badge-success-light:focus,
.sl-badge.sl-badge-success-light.cursor-pointer:hover {
	background-color: rgba(86,189,125,0.25) !important;
	color: #56bd7d;
}


/* Warning /////////////////////////////////////////// */
.sl-badge-warning {
	background-color: #f2b736 !important;
	color: #fff;
}

a.sl-badge.sl-badge-warning:hover,
a.sl-badge.sl-badge-warning:focus,
.sl-badge.sl-badge-warning.cursor-pointer:hover {
	background-color: #dfa832 !important;
	color: #fff;
}


/* Warning Light /////////////////////////////////////////// */
.sl-badge-warning-light {
	background-color: rgba(255,190,47,0.18) !important;
	color: #d9990e;
}

a.sl-badge.sl-badge-warning-light:hover,
a.sl-badge.sl-badge-warning-light:focus,
.sl-badge.sl-badge-warning-light.cursor-pointer:hover {
	background-color: rgba(255,190,47,0.25) !important;
	color: #d9990e;
}


/* Danger /////////////////////////////////////////// */
.sl-badge-danger {
	background-color: #eb445a !important;
	color: #fff;
}

a.sl-badge.sl-badge-danger:hover,
a.sl-badge.sl-badge-danger:focus,
.sl-badge.sl-badge-danger.cursor-pointer:hover {
	background-color: #d83f53 !important;
	color: #fff;
}


/* Danger Light /////////////////////////////////////////// */
.sl-badge-danger-light {
	background-color: rgba(235,68,90,0.18) !important;
	color: #EB445A;
}

a.sl-badge.sl-badge-danger-light:hover,
a.sl-badge.sl-badge-danger-light:focus,
.sl-badge.sl-badge-danger-light.cursor-pointer:hover {
	background-color: rgba(235,68,90,0.25) !important;
	color: #EB445A;
}


/* Default /////////////////////////////////////////// */
.sl-badge-default {
	background-color: rgba(0, 0, 0, 0.4) !important;
	color: #fff;
}

a.sl-badge.sl-badge-default:hover,
a.sl-badge.sl-badge-default:focus,
.sl-badge.sl-badge-default.cursor-pointer:hover {
	background-color: rgba(0, 0, 0, 0.47) !important;
	color: #fff;
}

/* Default Light /////////////////////////////////////////// */
.sl-badge-default-light {
	background-color: rgba(0,0,0,0.06) !important;
	color: #666;
}

a.sl-badge.sl-badge-default-light:hover,
a.sl-badge.sl-badge-default-light:focus,
.sl-badge.sl-badge-default-light.cursor-pointer:hover {
	background-color: rgba(0,0,0,0.11) !important;
	color: #666;
}


/* Muted /////////////////////////////////////////// Samma som Muted Light. Ta bort den ena*/
.sl-badge-muted {
	background-color: rgba(0,0,0,0.06) !important;
	color: rgba(0, 0, 0, 0.4)
}

a.sl-badge.sl-badge-muted:hover,
a.sl-badge.sl-badge-muted:focus,
.sl-badge.sl-badge-muted.cursor-pointer:hover {
	background-color: rgba(0,0,0,0.11) !important;
	color: rgba(0, 0, 0, 0.4)
}


/* Muted Light /////////////////////////////////////////// */
.sl-badge-muted-light {
	background-color: rgba(0,0,0,0.06) !important;
	color: rgba(0, 0, 0, 0.4)
}

a.sl-badge.sl-badge-muted-light:hover,
a.sl-badge.sl-badge-muted-light:focus,
.sl-badge.sl-badge-muted-light.cursor-pointer:hover {
	background-color: rgba(0,0,0,0.11) !important;
	color: rgba(0, 0, 0, 0.4)
}


/* Secondary /////////////////////////////////////////// */
.sl-badge-secondary {
	background-color: #ffebac !important;
	color: #b5772b;
}

a.sl-badge.sl-badge-secondary:hover,
a.sl-badge.sl-badge-secondary:focus,
.sl-badge.sl-badge-secondary.cursor-pointer:hover {
	background-color: #fbe397 !important;
	color: #b5772b;
}



.sl-badge {
	height: 21px;
	min-width:21px;
	text-align:center;
	display: inline-block;
	line-height: 21px;
	font-weight: 600;
	font-size: 10.5px;
	padding: 0 8px;
	border-radius: 3px;
}

/* Icons follow the badge's own line-height so they center vertically in the badge.
   Without this, rules elsewhere (e.g. admin's .table .fa { line-height: 1.38 }) give
   the icon a smaller line box of its own and it sits too high in the badge. */
.sl-badge .fa {
	line-height: inherit;
}

.sl-badge-sm {
	height: 17px;
	min-width: 17px;
	line-height: 17px;
	font-size: 10.5px;
	padding: 0 6px;
}

.sl-badge-md {
	height: 21px;
	min-width: 21px;
	line-height: 21px;
	font-size: 10.5px;
}

.sl-badge-lg {
	height: 24px;
	min-width: 24px;
	line-height: 25px;
	font-size: 11px;
}

.sl-badge-xl {
	height: 26px;
	min-width: 26px;
	line-height: 26px;
	font-size: 12px;
}


.sl-badge-left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.sl-badge-right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}



/* LABELS, duplicate of sl-badge. Remove when all labels are removed from HTML */
.label-primary {
	background-color: #298ccd !important;
	color: #fff;
}

a.label.label-primary:hover,
a.label.label-primary:focus {
	background-color: #298ccd !important;
	color: #fff;
}


.label-primary-light {
	background-color: rgba(62,165,235,0.18) !important;
	color: #4b8bb6;
}

a.label.label-primary-light:hover,
a.label.label-primary-light:focus {
	color: #4b8bb6;
}


.label-success {
	background-color: #41bd7f !important;
	color: #fff;
}

a.label.label-success:hover,
a.label.label-success:focus {
	background-color: #41bd7f !important;
	color: #fff;
}


.label-success-light {
	background-color: rgba(86,189,125,0.18) !important;
	color: #56bd7d;
}

a.label.label-success-light:hover,
a.label.label-success-light:focus {
	background-color: rgba(86,189,125,0.18) !important;
	color: #56bd7d;
}


.label-warning {
	background-color: #f2b736 !important;
	color: #fff;
}

a.label.label-warning:hover,
a.label.label-warning:focus {
	background-color: #f2b736 !important;
	color: #fff;
}


.label-warning-light {
	background-color: rgba(255,190,47,0.18) !important;
	color: #d9990e;
}

a.label.label-warning-light:hover,
a.label.label-warning-light:focus {
	background-color: rgba(255,190,47,0.18) !important;
	color: #d9990e;
}


.label-danger {
	background-color: #eb445a !important;
	color: #fff;
}

a.label.label-danger:hover,
a.label.label-danger:focus {
	background-color: #eb445a !important;
	color: #fff;
}


.label-danger-light {
	background-color: rgba(235,68,90,0.18) !important;
	color: #EB445A;
}

a.label.label-danger-light:hover,
a.label.label-danger-light :focus {
	background-color: rgba(235,68,90,0.18) !important;
	color: #EB445A;
}


.label-default {
	background-color: #999 !important;
	color: #fff;
}

a.label.label-default:hover,
a.label.label-default:focus {
	background-color: #999 !important;
	color: #fff;
}


.label-default-light {
	background-color: rgba(0,0,0,0.06) !important;
	color: #666;
}

a.label.label-default-light:hover,
a.label.label-default-light:focus {
	background-color: rgba(0,0,0,0.06) !important;
	color: #666;
}


.label-muted {
	background-color: #eee !important;
	color: #999;
}

a.label.label-muted:hover,
a.label.label-muted:focus {
	background-color: #eee !important;
	color: #999;
}


.label-muted-light {
	background-color: rgba(0,0,0,0.06) !important;
	color: #999;
}

a.label.label-muted-light:hover,
a.label.label-muted-light:focus {
	background-color: rgba(0,0,0,0.06) !important;
	color: #999;
}


.label-secondary {
	background-color: #ffebac !important;
	color: #b5772b;
}

a.label.label-secondary:hover,
a.label.label-secondary:focus {
	background-color: #ffebac !important;
	color: #b5772b;
}