.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 80%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .badge {
      transition: none;
    }
  }
  a.badge:hover, a.badge:focus {
    text-decoration: none;
  }
  
  .badge:empty {
    display: none;
  }
  
  .btn .badge {
    position: relative;
    top: -1px;
  }
  
  .badge-pill {
    padding-right: 0.875em;
    padding-left: 0.875em;
    border-radius: 50rem;
  }
  
  .badge-primary {
    color: #FFF;
    background-color: #27327b;
  }
  a.badge-primary:hover, a.badge-primary:focus {
    color: #FFF;
    background-color: #1b2254;
  }
  a.badge-primary:focus, a.badge-primary.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(39, 50, 123, 0.5);
  }
  
  .badge-secondary {
    color: #273444;
    background-color: #EFF2F7;
  }
  a.badge-secondary:hover, a.badge-secondary:focus {
    color: #273444;
    background-color: #cdd6e6;
  }
  a.badge-secondary:focus, a.badge-secondary.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(239, 242, 247, 0.5);
  }
  
  .badge-success {
    color: #FFF;
    background-color: #36B37E;
  }
  a.badge-success:hover, a.badge-success:focus {
    color: #FFF;
    background-color: #2a8c62;
  }
  a.badge-success:focus, a.badge-success.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(54, 179, 126, 0.5);
  }
  
  .badge-info {
    color: #FFF;
    background-color: #00B8D9;
  }
  a.badge-info:hover, a.badge-info:focus {
    color: #FFF;
    background-color: #008da6;
  }
  a.badge-info:focus, a.badge-info.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 184, 217, 0.5);
  }
  
  .badge-warning {
    color: #FFF;
    background-color: #FFAB00;
  }
  a.badge-warning:hover, a.badge-warning:focus {
    color: #FFF;
    background-color: #cc8900;
  }
  a.badge-warning:focus, a.badge-warning.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(255, 171, 0, 0.5);
  }
  
  .badge-danger {
    color: #FFF;
    background-color: #FF5630;
  }
  a.badge-danger:hover, a.badge-danger:focus {
    color: #FFF;
    background-color: #fc2e00;
  }
  a.badge-danger:focus, a.badge-danger.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(255, 86, 48, 0.5);
  }
  
  .badge-light {
    color: #273444;
    background-color: #EFF2F7;
  }
  a.badge-light:hover, a.badge-light:focus {
    color: #273444;
    background-color: #cdd6e6;
  }
  a.badge-light:focus, a.badge-light.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(239, 242, 247, 0.5);
  }
  
  .badge-dark {
    color: #FFF;
    background-color: #273444;
  }
  a.badge-dark:hover, a.badge-dark:focus {
    color: #FFF;
    background-color: #141b24;
  }
  a.badge-dark:focus, a.badge-dark.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(39, 52, 68, 0.5);
  }
  
  .badge-neutral {
    color: #273444;
    background-color: #FFF;
  }
  a.badge-neutral:hover, a.badge-neutral:focus {
    color: #273444;
    background-color: #e6e6e6;
  }
  a.badge-neutral:focus, a.badge-neutral.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  
  .badge-white {
    color: #273444;
    background-color: #FFF;
  }
  a.badge-white:hover, a.badge-white:focus {
    color: #273444;
    background-color: #e6e6e6;
  }
  a.badge-white:focus, a.badge-white.focus {
    outline: 0;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }


.badge {
  display: inline;
  text-transform: none;
}
.badge i:not(:last-child) {
  margin-right: 0.5rem;
}

.badge-group .badge {
  display: inline-block;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  margin-right: 0.25rem;
}

.badge-xs {
  padding: 0.25em 0.5em;
  font-size: 60%;
}

.badge-md {
  padding: 0.65em 1em;
}

.badge-lg {
  padding: 0.85em 1.375em;
}

.badge-inline {
  margin-right: 0.625rem;
}
.badge-inline + span {
  top: 2px;
  position: relative;
}
.badge-inline + span > a {
  text-decoration: underline;
}

.btn .badge:not(:first-child) {
  margin-left: 0.5rem;
}
.btn .badge:not(:last-child) {
  margin-right: 0.5rem;
}

.badge-soft-primary {
  color: #27327b;
  background-color: #d4d6e5;
}
.badge-soft-primary[href]:hover, .badge-soft-primary[href]:focus {
  color: #27327b;
  text-decoration: none;
  background-color: #c4c7db;
}

.badge-soft-secondary {
  color: #EFF2F7;
  background-color: #fcfcfd;
}
.badge-soft-secondary[href]:hover, .badge-soft-secondary[href]:focus {
  color: #EFF2F7;
  text-decoration: none;
  background-color: #ededf3;
}

.badge-soft-success {
  color: #36B37E;
  background-color: #d7f0e5;
}
.badge-soft-success[href]:hover, .badge-soft-success[href]:focus {
  color: #36B37E;
  text-decoration: none;
  background-color: #c4e9d9;
}

.badge-soft-info {
  color: #00B8D9;
  background-color: #ccf1f7;
}
.badge-soft-info[href]:hover, .badge-soft-info[href]:focus {
  color: #00B8D9;
  text-decoration: none;
  background-color: #b6ebf4;
}

.badge-soft-warning {
  color: #FFAB00;
  background-color: #ffeecc;
}
.badge-soft-warning[href]:hover, .badge-soft-warning[href]:focus {
  color: #FFAB00;
  text-decoration: none;
  background-color: #ffe6b3;
}

.badge-soft-danger {
  color: #FF5630;
  background-color: #ffddd6;
}
.badge-soft-danger[href]:hover, .badge-soft-danger[href]:focus {
  color: #FF5630;
  text-decoration: none;
  background-color: #ffc8bd;
}

.badge-soft-light {
  color: #EFF2F7;
  background-color: #fcfcfd;
}
.badge-soft-light[href]:hover, .badge-soft-light[href]:focus {
  color: #EFF2F7;
  text-decoration: none;
  background-color: #ededf3;
}

.badge-soft-dark {
  color: #273444;
  background-color: #d4d6da;
}
.badge-soft-dark[href]:hover, .badge-soft-dark[href]:focus {
  color: #273444;
  text-decoration: none;
  background-color: #c6c9ce;
}

.badge-soft-neutral {
  color: #FFF;
  background-color: white;
}
.badge-soft-neutral[href]:hover, .badge-soft-neutral[href]:focus {
  color: #FFF;
  text-decoration: none;
  background-color: #f2f2f2;
}

.badge-soft-white {
  color: #FFF;
  background-color: white;
}
.badge-soft-white[href]:hover, .badge-soft-white[href]:focus {
  color: #FFF;
  text-decoration: none;
  background-color: #f2f2f2;
}

.badge-dot {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  color: #8492A6;
  font-size: 0.875rem;
}
.badge-dot i {
  display: inline-block;
  vertical-align: middle;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  margin-right: 0.375rem;
}
.badge-dot.badge-md i {
  width: 0.5rem;
  height: 0.5rem;
}
.badge-dot.badge-lg i {
  width: 0.625rem;
  height: 0.625rem;
}

.badge-circle {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0 !important;
  min-width: 1.25rem;
  min-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-circle.badge-md {
  width: 1.5rem;
  height: 1.5rem;
}
.badge-circle.badge-lg {
  width: 2rem;
  height: 2rem;
}

.btn .badge-floating {
  position: absolute;
  top: -50%;
  right: 0;
  transform: translate(50%, 50%);
  margin: 0;
  border: 3px solid;
}