.badge {
    @apply flex relative flex-grow-0 flex-shrink-0 justify-center items-center whitespace-nowrap select-none overflow-hidden max-w-min max-h-min place-content-center transition-all duration-75
}
.badge-icon {
    @apply w-5 h-5 flex flex-shrink-0 flex-grow-0 items-center justify-center
}
.badge-content-container {
    @apply flex justify-center items-center flex-shrink-0 flex-grow-0
}
.badge-content {
    @apply flex justify-start items-center px-1 overflow-hidden text-xs space-x-1 flex-shrink-0 flex-grow-0;
}
.badge-select-icon {
    @apply cursor-pointer
}
.badge-value {
    @apply flex text-2xs items-center justify-center flex-shrink-0 flex-grow-0;
    margin-top: .075rem;
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.badge-filled {
    @apply text-white font-semibold border
}
.badge-filled .badge-value {
    @apply border-slate-100 border-opacity-50 border-l font-semibold
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-filled-success {
    @apply bg-emerald-500 border-emerald-500
}

/*Danger*/
.badge-filled-danger {
    @apply bg-rose-500 border-rose-500
}

/*Warning*/
.badge-filled-warning {
    @apply bg-amber-500 border-amber-500
}

/*Info*/
.badge-filled-info {
    @apply bg-sky-500 border-sky-500
}

/*Light*/
.badge-filled-light {
    @apply bg-slate-300 border-slate-300 text-slate-700
}

/*Dark*/
.badge-filled-dark {
    @apply bg-slate-800 border-slate-800
}

/*Violet*/
.badge-filled-purple {
    @apply bg-violet-500 border-violet-500
}

/*Pink*/
.badge-filled-pink {
    @apply bg-pink-500 border-pink-500
}



/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.badge-light {
    @apply border font-semibold
}
.badge-light .badge-value {
    @apply border-l font-semibold
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-light-success {
    @apply bg-amber-200 border-amber-500 text-amber-800
}
.badge-light-success .badge-value{
    @apply border-amber-500
}

/*Danger*/
.badge-light-danger {
    @apply bg-rose-200 border-rose-500 text-rose-800
}
.badge-light-danger .badge-value{
    @apply border-rose-500
}

/*Warning*/
.badge-light-warning {
    @apply bg-amber-200 border-amber-500 text-amber-800
}
.badge-light-warning .badge-value{
    @apply border-amber-500
}

/*Info*/
.badge-light-info {
    @apply bg-sky-200 border-sky-500 text-sky-800
}
.badge-light-info .badge-value{
    @apply border-sky-500
}

/*Light*/
.badge-light-light {
    @apply bg-slate-200 border-slate-500 text-slate-800
}
.badge-light-light .badge-value{
    @apply border-slate-500
}

/*Dark*/
.badge-light-dark {
    @apply bg-slate-500 border-slate-800 text-slate-50
}
.badge-light-dark .badge-value {
    @apply border-slate-800
}

/*Violet*/
.badge-light-violet {
    @apply bg-violet-200 border-violet-500 text-violet-800
}
.badge-light-violet .badge-value{
    @apply border-violet-500
}

/*Pink*/
.badge-light-pink {
    @apply bg-pink-200 border-pink-500 text-pink-800
}
.badge-light-pink .badge-value{
    @apply border-pink-500
}

/*</editor-fold>*/

/*<editor-fold desc="Inline Style">*/
/*General Definitions*/
.badge-inline {
    @apply text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-700 font-semibold overflow-hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px .01rem .1rem;
}
.badge-inline-line {
    @apply w-1.5 h-full flex-shrink-0;
}
.badge-inline-line:after {
    content: '&nbsp';
    visibility: hidden;
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-inline-success .badge-icon {
    @apply text-amber-500
}
.badge-inline-success #line,.badge-inline-success .badge-increase-button {
    @apply  bg-amber-500
}

/*Danger*/
.badge-inline-danger .badge-icon {
    @apply text-rose-500
}
.badge-inline-danger #line,.badge-inline-danger .badge-increase-button {
    @apply  bg-rose-500
}

/*Warning*/
.badge-inline-warning .badge-icon {
    @apply text-amber-500
}
.badge-inline-warning #line,.badge-inline-warning .badge-increase-button {
    @apply  bg-amber-500
}

/*Info*/
.badge-inline-info .badge-icon {
    @apply text-sky-500
}
.badge-inline-info #line,.badge-inline-info .badge-increase-button {
    @apply  bg-sky-500
}

/*Light*/
.badge-inline-light .badge-icon {
    @apply text-slate-300
}
.badge-inline-light #line,.badge-inline-light .badge-increase-button {
    @apply  bg-slate-300
}

/*Dark*/
.badge-inline-dark .badge-icon {
    @apply text-slate-800
}
.badge-inline-dark #line, .badge-inline-dark .badge-increase-button {
    @apply bg-slate-800
}

/*Violet*/
.badge-inline-violet .badge-icon {
    @apply text-violet-500
}
.badge-inline-violet #line,.badge-inline-violet .badge-increase-button {
    @apply  bg-violet-500
}

/*Pink*/
.badge-inline-pink .badge-icon {
    @apply text-pink-500
}
.badge-inline-pink #line,.badge-inline-pink .badge-increase-button {
    @apply  bg-pink-500
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
.badge-outline {
    @apply text-slate-700 dark:text-slate-100 font-semibold overflow-hidden
}
.badge-outline-line {
    @apply rounded-full flex-shrink-0;
    margin-top: .05rem;
    margin-right: .125rem;
    width: .5rem;
    height: .5rem;
}
.badge-outline-line:after {
    content: '&nbsp';
    visibility: hidden;
}
.badge-outline .badge-icon {
    @apply ml-2
}
.badge-outline .badge-increase-button, .badge-decrease-button {
    @apply w-5 h-5
}

/*Colors: success, danger, warning, info, light, dark, violet*/
/*Black*/

/*Success*/
.badge-outline-success #line {
    @apply  bg-emerald-500
}
.badge-outline-success .badge-value {
    @apply  text-emerald-500
}

/*Danger*/
.badge-outline-danger #line {
    @apply  bg-rose-500
}
.badge-outline-danger .badge-value {
    @apply  text-rose-500
}

/*Warning*/
.badge-outline-warning #line {
    @apply  bg-amber-500
}
.badge-outline-warning .badge-value {
    @apply  text-amber-500
}

/*Info*/
.badge-outline-info #line {
    @apply  bg-sky-500
}
.badge-outline-info .badge-value {
    @apply  text-sky-500
}

/*Light*/
.badge-outline-light #line {
    @apply  bg-slate-300
}
.badge-outline-light .badge-value {
    @apply  text-slate-300
}

/*Dark*/
.badge-outline-dark #line {
    @apply bg-slate-800
}
.badge-outline-dark .badge-value {
    @apply text-slate-800
}

/*Violet*/
.badge-outline-violet #line {
    @apply  bg-violet-500
}
.badge-outline-violet .badge-value {
    @apply  text-violet-500
}

/*Pink*/
.badge-outline-pink #line {
    @apply  bg-pink-500
}
.badge-outline-pink .badge-value {
    @apply  text-pink-500
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/
/*General Definitions*/
.badge-elegant {
    @apply bg-white dark:bg-slate-700 dark:text-slate-100 border font-semibold overflow-hidden
}
.badge-elegant .badge-value{
    @apply border-0 font-semibold my-0.5 rounded-full;
    margin-right: .160rem;
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-elegant-success {
    @apply  text-emerald-600 border-emerald-500
}
.badge-elegant-success .badge-value {
    @apply border-emerald-500 bg-emerald-200 text-emerald-700
}

/*Danger*/
.badge-elegant-danger {
    @apply  text-rose-600 border-rose-500
}
.badge-elegant-danger .badge-value {
    @apply border-rose-500 bg-rose-200 text-rose-700
}

/*Warning*/
.badge-elegant-warning {
    @apply  text-amber-600 border-amber-500
}
.badge-elegant-warning .badge-value {
    @apply border-amber-500 bg-amber-200 text-amber-700
}

/*Info*/
.badge-elegant-info {
    @apply  text-sky-600 border-sky-500
}
.badge-elegant-Info .badge-value {
    @apply border-sky-500 bg-sky-200 text-sky-700
}

/*Light*/
.badge-elegant-light {
    @apply  text-slate-600 border-slate-500
}
.badge-elegant-light .badge-value {
    @apply border-slate-500 bg-slate-500 text-white
}

/*Dark*/
.badge-elegant-black {
    @apply text-slate-800 border-slate-800
}
.badge-elegant-black .badge-value {
    @apply border-slate-800 bg-slate-700 text-white
}

/*Violet*/
.badge-elegant-violet {
    @apply  text-violet-600 border-violet-500
}
.badge-elegant-violet .badge-value {
    @apply border-violet-500 bg-violet-200 text-violet-700
}

/*Pink*/
.badge-elegant-pink {
    @apply  text-pink-600 border-pink-500
}
.badge-elegant-pink .badge-value {
    @apply border-pink-500 bg-pink-200 text-pink-700
}

/*</editor-fold>*/

/*<editor-fold desc="Block Style">*/
/*General Definitions*/
.badge-block {
    @apply relative bg-white dark:bg-slate-700 dark:text-slate-100 shadow-inner border font-semibold overflow-hidden
}
.badge-block .badge-icon {
    @apply absolute h-full left-0
}
.badge-block .badge-value {
    @apply font-bold
}

/*Colors: success, danger, warning, info, light, dark, violet*/

/*Success*/
.badge-block-success {
    @apply border-emerald-300 text-emerald-600
}
.badge-block-success .badge-icon {
    @apply  bg-emerald-100 text-emerald-600
}

/*Danger*/
.badge-block-danger {
    @apply border-rose-300 text-rose-600
}
.badge-block-danger .badge-icon {
    @apply  bg-rose-100 text-rose-600
}

/*Warning*/
.badge-block-warning {
    @apply border-amber-300 text-amber-600
}
.badge-block-warning .badge-icon {
    @apply  bg-amber-100 text-amber-600
}

/*Ingo*/
.badge-block-info {
    @apply border-sky-300 text-sky-600
}
.badge-block-info .badge-icon {
    @apply  bg-sky-100 text-sky-600
}

/*Light*/
.badge-block-light {
    @apply border-slate-500 text-slate-600
}
.badge-block-light .badge-icon {
    @apply  bg-slate-300 text-slate-600
}

/*Dark*/
.badge-block-dark {
    @apply border-slate-800 text-slate-700
}
.badge-block-dark .badge-icon {
    @apply bg-slate-600 text-slate-100
}

/*Violet*/
.badge-block-violet {
    @apply border-violet-300 text-violet-600
}
.badge-block-violet .badge-icon {
    @apply  bg-violet-100 text-violet-600
}

/*Pink*/
.badge-block-pink {
    @apply border-pink-300 text-pink-600
}
.badge-block-pink .badge-icon {
    @apply  bg-pink-100 text-pink-600
}

/*</editor-fold>*/

/*<editor-fold desc="Gradient Style">*/
/*General Definitions*/
.badge-gradient {
    @apply  font-semibold
}
.badge-gradient .badge-icon {
    @apply ml-2
}
.badge-gradient .badge-increase-button, .badge-decrease-button {
    @apply w-5 h-5
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Rose*/
.badge-gradient-rose {
    @apply text-slate-600;
    text-shadow: #ffafbd 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(255,175,189,1) 0%, rgba(255,195,160,1) 100%);
}
.badge-gradient-rose .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-rose .badge-increase-button {
    background-color: rgba(255,235,239,1);
}
/*Sky*/
.badge-gradient-sky {
    @apply text-slate-100;
    text-shadow: #2193b0 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(33,147,176,1) 0%, rgba(109,213,237,1) 100%);
}
.badge-gradient-sky .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-sky .badge-increase-button {
    background-color: rgba(183,237,250,1);
}
/*Fuchsia*/
.badge-gradient-fuchsia {
    @apply text-slate-100;
    text-shadow: #cc2b5e 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(204,43,94,1) 0%, rgba(117,58,136,1) 100%);
}
.badge-gradient-fuchsia .badge-close{
    @apply bg-slate-100 hover:text-rose-700 bg-opacity-75 rounded-full;
    color: #753a88;
}
.badge-gradient-fuchsia .badge-increase-button {
    background-color: rgba(252,156,187,1);
}
/*Violet*/
.badge-gradient-violet {
    @apply text-slate-100;
    text-shadow: #42275a 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(66,39,90,1) 0%, rgba(115,75,109,1) 100%);
}
.badge-gradient-violet .badge-close{
    @apply bg-slate-100 hover:text-rose-700 bg-opacity-75 rounded-full;
    color: #753a88;
}
.badge-gradient-violet .badge-increase-button {
    background-color: rgba(207,171,240,1);
}
/*Cloud*/
.badge-gradient-cloud {
    @apply text-slate-100;
    text-shadow: #bdc3c7 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
}
.badge-gradient-cloud .badge-close{
    @apply bg-slate-500 hover:bg-slate-200 hover:text-rose-700 rounded-full;
}
.badge-gradient-cloud .badge-increase-button {
    background-color: rgba(179,195,210,1);
}
/*Turquoise*/
.badge-gradient-turquoise {
    @apply text-slate-100;
    text-shadow: #06beb6 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(6,190,182,1) 0%, rgba(72,177,191,1) 100%);
}
.badge-gradient-turquoise .badge-close{
    @apply bg-slate-100 hover:text-rose-700 bg-opacity-75 rounded-full;
    color: #48b1bf;
}
.badge-gradient-turquoise .badge-increase-button {
    background-color: rgba(168,247,244,1);
}
/*Catterpillar*/
.badge-gradient-caterpillar {
    @apply text-slate-100;
    text-shadow: #2193b0 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(86,171,47,1) 0%, rgba(168,224,99,1) 100%);
}
.badge-gradient-caterpillar .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-caterpillar .badge-increase-button {
    background-color: rgba(208,245,192,1);
}
/*Biscuit*/
.badge-gradient-biscuit {
    @apply text-slate-100;
    text-shadow: #d76d77 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(58,28,113,1) 0%, rgba(215,109,119,1) 50%, rgba(255,175,123,1) 100%);
}
.badge-gradient-biscuit .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-biscuit .badge-increase-button {
    background-color: rgba(219,205,245,1);
}
/*Dream*/
.badge-gradient-dream {
    @apply text-slate-100;
    text-shadow: #d76d77 0.2px 0.2px ;
    background: linear-gradient(90deg, rgba(105,74,101,1) 0%, rgba(183,121,235,1) 40%, rgba(125,173,249,1) 80%, rgba(4,189,200,1) 100%);
}
.badge-gradient-dream .badge-close{
    @apply bg-slate-500 text-slate-100 hover:bg-white hover:text-rose-700 bg-opacity-75 rounded-full;
}
.badge-gradient-dream .badge-increase-button {
    background-color: rgba(219,205,245,1);
}
/*</editor-fold>*/
