/*
 *  [ HTML & BODY ]
 */

 .package-hover .bg-panel-accent {
    transition: 0.3s;
}

/*
* CUSTOM TAILWIND EXTENSION
*/
.rounded-xl{
    border-radius: 10px;
}

.order-last{
    order: 9999;
}
@media (min-width: 800px){
    .lg\:order-reset{
    order: initial;
}   
}

/* ADDED BY NOAH */

span.count {
    background: #DB8D1C;
    font-size: 17px;
    padding: 5px 12px;
    border-radius: 100px;
}
.if-large {
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.if-small {
    font-weight: 600;
    color: #cbe8ff;
}

.info-card {
    position: relative;
    z-index: 5;
    color: white;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 30px;
    top: -15px;
}

#players {
    text-align: right;
    justify-content: flex-end;
}

#players i {
    order: 5;
}

#discord i {
    order: -5;
}

.info-card i {
    width: 64px;
    height: 64px;
    background: #ffffff21;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border-radius: 100px;
}
.info-text {
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.recent-users {
    align-items: center;
    gap: 15px;
}
.recent-block {
    display: flex;
    align-items: center;
    background: rgb(255 255 255);
    padding: 15px !important;
    border-radius: 6px;
    margin-top: 25px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}

.recent-users {
    display: flex;
    width: 50%;
}

.recent-users img {
    max-width: 100%;
    border-radius: 7px;
}

.r-user {
    width: 50px;
    text-align: center;
    border-radius: 6px;
}
.icon i {
    color: #156fb7;
    font-size: 17px;
    position: relative;
    top: 0px;
}

.top-donor-block2 {
    background: #f1f7fb;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 7px;
    border: 1px solid #1d7bbe1a;
    color: #1d7bbe;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}

.top-donor-block {
    display: flex;
    background: rgb(255 255 255);
    align-items: center;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.u-avatar {
    width: 110px;
    height: 110px;
    overflow: hidden;
    margin-top: -10px;
}

.u-avatar img {
    width: 80px;
    margin-left: 10px;
}

.u-info {}

.s-name {
    font-size: 22px;
    font-weight: 700;
}

.s-desc {
    font-size: 13px;
    margin-top: -3px;
    opacity: .75;
    font-weight: 700;
}
.top-donor-block {
    margin-top: 30px !important;
}
.custom-shape-divider-bottom-1675067978 .shape-fill {
    fill: #E0E3E5;
}

.circle {
  background: linear-gradient(45deg, #ffffff30, transparent);
  position: absolute;
  left: 50%; /* Zentriert den Kreis horizontal */
  top: 50%; /* Zentriert den Kreis vertikal */
  transform: translate(-50%, -50%); /* Verschiebt den Kreis so, dass er zentriert ist */
  border-radius: 100%;
  width: 225px; /* Größe des äußeren Kreises */
  height: 225px; /* Größe des äußeren Kreises */
  opacity: 0.35;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle > .circle {
  width: 80%; /* Größe des inneren Kreises */
  height: 80%; /* Größe des inneren Kreises */
  background: #ffffff5d;
  border-radius: 100%;
  opacity: 0.75;
  position: absolute; /* Damit der innere Kreis innerhalb des äußeren Kreises zentriert wird */
  top: 50%; /* Zentriert den inneren Kreis vertikal im äußeren Kreis */
  left: 50%; /* Zentriert den inneren Kreis horizontal im äußeren Kreis */
  transform: translate(-50%, -50%); /* Verschiebt den inneren Kreis so, dass er im äußeren Kreis zentriert ist */
}


#logo {
  max-width: 300px; /* Reduziere die maximale Breite */
  margin: 0 auto;
  position: relative;
  z-index: 4;
}

#logo > a {
  position: relative;
  z-index: 4;
}

  hr {
    height : 0;-webkit-box-sizing : content-box;-moz-box-sizing : content-box;
    box-sizing : content-box
  }
  .center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  
.payment-icons {
    display: flex; 
    gap: 10px;
    margin-left: auto; 
    margin-right: auto;
}
.ph-icon {
    background: #1d7bbf0f;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #1d7bbe;
    font-size: 25px;
}

.body2 {
    display: flex;
    gap: 30px;
}


.panel-body {
    padding: 25px 30px;
    color: grey;
}
.panel-heading {
    background: transparent;
    padding: 30px;
}

.panel-heading.flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.panel-heading.flex .right {
    margin-left: auto;
    text-align: right;
    color: black !important;
}

.panel-heading h1 {
    margin: 0px;
    font-size: 28px;
    font-weight: 800;
}

.panel-heading p {
    color: grey;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    margin-bottom: 2px;
}

.content2 {
    flex: 1;
}

a.store {
    background: #EF8C15;
    border-radius: 100px;
    padding: 13px 20px;
    min-width: 115px;
    font-weight: 900 !important;
}


.panel-default>.panel-heading {
    background: transparent;
}

.panel.panel-default {
    border-radius: 10px;
    border: none;
    box-shadow: var(--shadow-lg);
    background: var(--content-bg);
}

/*END */

.package-hover:hover .bg-panel-accent {
    background-color: #F1B128;
    transition: 0.2s;
    text-decoration: none;
    transform: scale(1.04);
    -webkit-box-shadow: 0px 0px 13px -6px #3549cc; 
    box-shadow: 0px 0px 13px -6px #3549cc;
    color: #fff;
}
.payment-icons {
    display: flex; 
    gap: 10px;
    margin-left: auto; 
    margin-right: auto;
}

.gateway-icon{
    transition: 0.3s;
}
.gateway-icon:hover{
    transition: 0.3s;
    color:;
}


.gateway-icons{
    font-size: 32px;
    li{
        display: inline-block;
        margin: 0.15em;
        position: relative;
    }
}

 :root, :before, :after {
     

    --text-color:	49,49,49;
    --light-text-color: 75,75,75;
    --detail-text-color: 89,89,89;
    --primary-text-color: #292929;
    --link-text-color: 49,49,49;
    --nav-text-color: 238,238,238;
    --background-color:228, 234, 237;
    --panel-background-color: 255,255,255;
    --panel-accent-background-color: 242,242,248;
    --footer-background-color: 255,255,255;
    --footer-link-background-color: 232, 236, 243;
    --copyright-background-color: 201, 201, 217;
    --toggle-background-color: 229, 231, 235;
    --nav-button-text-color: 238,238,238;
    --primary-button-text-color: 238,238,238;
    --secondary-button-text-color: 238,238,238;
    --navigation-background-color: 255,255,255,.1;
    --top-navigation-background-color: 255,255,255,.15;
    --second-navigation-background-color: 255,255,255;
    --second-navigation-text-color: 29,29,29;


  --nav-button-background-color: 255, 165, 0; 
  --primary-button-background-color: 255, 165, 0; 
  --secondary-button-background-color: 255, 140, 0; 
  --first-banner-background-color: 255, 127, 80, .65; 
  --second-banner-background-color: 255, 140, 0, .65; 
  --icon-background-color: 255, 165, 0; 



    --banner-text-color: 255,255,255;
    --icon-color: 255, 255, 255;
    --table-header-background-color: 232, 236, 243;
    --table-header-text-color: 49,49,49;
    --table-odd-background-color: 245, 245, 252;
    --input-background-color: 229,231,235;
    --input-text-color: 74,85,104;
  }
  
  .dark, .dark :before, .dark :after {
    --text-color: 255,255,255;
    --light-text-color: 190,190,200;
    --detail-text-color: 178,178,178;
    --primary-text-color: 53,73,204;
    --link-text-color: 255,255,255;
    --nav-text-color: 255,255,255,1;
    --background-color: 20, 21, 25;
    --panel-background-color: 15,16,20;
    --panel-accent-background-color: 10,11,12;
    --footer-background-color: 28,29,38;
    --footer-link-background-color: 32, 35, 43;
    --copyright-background-color: 20, 20, 28;
    --toggle-background-color: 30, 41, 59;
    --nav-button-background-color: 53, 73, 204;
    --nav-button-text-color: 238,238,238;
    --primary-button-background-color: 53, 73, 204;
    --primary-button-text-color: 238,238,238;
    --secondary-button-background-color: 62,85,126;
    --secondary-button-text-color: 238,238,238;
    --navigation-background-color: 17,18,26,.60;
      --top-navigation-background-color: 0,0,0,.2;
    --second-navigation-background-color: 15,16,20;
    --second-navigation-text-color: 255,255,255,1;
    --first-banner-background-color: 34,37,47,.95;
    --second-banner-background-color: 34,37,47,.95;
    --banner-text-color: 255,255,255;
    --icon-color: 255,255,255;
    --icon-background-color: 53, 73, 204;
    --table-header-background-color: 32, 35, 43;
    --table-header-text-color: 255,255,255;
    --table-odd-background-color: 20, 21, 25;
    --input-background-color: 20,26,34;
    --input-text-color: 235,235,255;
  }
  
  
  
  .blue, .blue :after, .blue :before {
    --primary-text-color: 0,224, 233;
    --nav-button-background-color: 0,194,203;
    --primary-button-background-color: 0, 194, 203;
    --icon-background-color: 0,224,233;
  }
  
  .red, .red :after, .red :before {
    --primary-text-color: 203,47,47;
    --nav-button-background-color: 203,47,47;
    --primary-button-background-color: 203,47,47;
    --icon-background-color: 203,47,47;
    --first-banner-background-color: 181, 56, 56,.85;
    --second-banner-background-color: 66,45,45,.85;
    
    
  }
  
  .green, .green :after, .green :before {
    --primary-text-color: #EEEEEE;
    --nav-button-background-color: #EEEEEE;
  
    
      --primary-button-background-color: 255, 140, 0;
  --icon-background-color: 255, 140, 0;
  --first-banner-background-color: 255, 69, 0, .55;
  --second-banner-background-color: 255, 99, 71, .55;
  }
  
  .yellow, .yellow :after, .yellow :before {
    --primary-text-color: 231,209,47;
    --nav-button-background-color: 211,189,47;
    --primary-button-background-color: 231,209,47;
    --icon-background-color: 231,209,47;
    --first-banner-background-color: 130,120,27,.55;
    --second-banner-background-color: 130,120,17,.55;
  }
  
  .purple, .purple :after, .purple :before {
    --primary-text-color: 131,44,197;
    --nav-button-background-color: 131,44,197;
    --primary-button-background-color: 131,44,197;
    --icon-background-color: 131,44,197;
    --first-banner-background-color: 101,37,167,.55;
    --second-banner-background-color: 81,7,147,.55;
  }
  
  *:not(i, .far, .fas) {
    font-family: "poppins", sans-serif!important;
  }
  
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  ::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-text-color)); 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-text-color),.8);
  }
  
  body {
    background-color: rgba(var(--background-color));
    color: rgba(var(--text-color));
    overflow-x: hidden;
  }
  
  li {
      list-style: none;
  }
  
  .modal-open {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
  }
  
  .fade.in {
    opacity: 1;
  }
  
  .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  
  .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
  
  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 400;
    background-color: #000000;
  }
  
  .bg-default {
    background-color: rgba(var(--background-color));
  }
  
  footer {
    background-color: rgba(var(--footer-background-color));
  }
  
  header {
    height: 45rem;
    color: rgba(var(--banner-text-color));
  }
  
  .headersize {
      height: 45rem;
  }
  
  .dropdown-menu {
  color: rgba(var(--text-color));
  }
  
  .bg-copyright {
    background-color: rgba(var(--copyright-background-color));
  }
  
  .bg-toggle {
    background-color: rgba(var(--toggle-background-color));
  }
  
  .bg-toggle:hover {
    background-color: rgba(var(--toggle-background-color), .8);
  }
  
  .bg-panel {
    background-color: rgba(var(--panel-background-color));
  }
  
  .bg-panel-accent {
    background-color: rgba(var(--panel-accent-background-color));
  }
  
  .bg-nav {
    background-color: rgba(var(--navigation-background-color));
  }
  
  .bg-top-nav {
      background-color: rgba(var(--top-navigation-background-color));
  }
  
  .bg-footer-link {
    background-color: rgba(var(--footer-link-background-color));
  }
  
  .bg-footer-link:hover, .bg-footer-link:active, .bg-footer-link:focus {
    background-color: rgba(var(--footer-link-background-color),.8);
  }
  
  .bg-primary-button {
    background-color: rgba(var(--primary-button-background-color));
    color: rgba(var(--primary-button-text-color));
    transition: 0.3s;
  }
  
  .bg-primary-button:hover, .bg-primary-button:active, .bg-primary-button:focus {
    background-color: #F09E3B;
    color: #fff;
    transition: 0.3s;
  }
  
  .bg-secondary-button {
    background-color: rgba(var(--secondary-button-background-color))!important;
    color: rgba(var(--secondary-button-text-color))!important;
    transition: 0.3s;
  }
  
  .bg-secondary-button:hover, .bg-secondary-button:active, .bg-secondary-button:focus {
    background-color: rgba(var(--secondary-button-background-color), .8)!important;
    color: rgba(var(--secondary-button-text-color),.8)!important;
    transition: 0.3s;
  }
  
  .bg-table-header {
    background-color: rgba(var(--table-header-background-color));
    color: rgba(var(--table-header-text-color));
  }
  
  .text-default {
      color: rgba(var(--text-color));
  }
  
  .text-primary {
    color: #292929;
  }
  
  .text-light {
      color: rgba(var(--light-text-color));
  }
  
  .hover\:text-primary:hover {
    color: rgba(var(--primary-text-color));
  }
  
  .hover\:text-default:hover {
    color: rgba(var(--text-color),.8);
  }
  
  .bg-primary {
    background-color: #EF8C15;
      color: rgba(var(--primary-button-text-color));
  }
  
  .bg-primary :not(.bg-panel) :hover * {
      color: rgba(var(--primary-button-text-color),.8)
  }
  
  .bg-input {
    background-color: rgba(var(--input-background-color));
    color: rgba(var(--input-text-color));
  }
  
  .table-striped tr:nth-child(even) {
    background-color: rgba(var(--table-odd-background-color));
  }
  
  a {
    color: rgba(var(--link-text-color));
  }
  
  a:hover, a:focus, a:active  {
    color: rgba(var(--primary-text-color),.8);
  }
  
  .bg-primary a:hover, .bg-primary a:focus, .bg-primary a:active {
    color: rgba(var(--text-color),.6);
  }
  
  .navitem {
    height: -moz-fit-content;
    height: fit-content;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(var(--nav-text-color));
  }
  
  .navitem:hover, .navitem:focus, .navitem:active  {
    color: rgba(var(--nav-text-color));
  }
  
  .nav-link {
  font-size: 1.2rem;
  }
  
  .image-parent img {
  height: 100%;
  }
  
  .secondnav {
      bottom: -5rem;
  }
  
  #second-navigation {
      left: -250px;
    width: calc(100vw + 500px);
    border-radius: 100% 100% 0 0;
    background-color: rgba(var(--second-navigation-background-color));
    color: rgba(var(--second-navigation-text-color));
  }
  
  .secondafter {
      width: calc(100vw + 500px);
      border-radius: 100% 100% 0 0;
  }
  
  
.nav-btn {
  background-color: #16e3b7;
  color: rgba(var(--nav-button-text-color));
}

  
  .bg-icon {
    background-color: rgba(var(--icon-background-color));
    color: rgba(var(--icon-color));
  }
  
  .text-color-normal {
      color: rgba(var(--text-color));
  }
  
  .text-color-light {
      color: rgba(var(--text-color),.8);
  }
  
  /* Particles */
  
  canvas {
    display: block;
    vertical-align: bottom;
  }
  
  /* ---- particles.js container ---- */
  
#particles-js, #announcement-particles-js {
  position:absolute;
  width: 100%;
  height: 100%;
}
  .animation-floating-logo {
    animation: logo 6s ease, 4s floating 6s infinite ease;
    position:relative;
  }
  
  .animation-footer-link {
    position: relative;
  }
  
  .animation-footer-link:after {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    display: block;
    content: '';
    border-bottom: solid 3px rgb(var(--primary-text-color));
    transform: scaleX(0);
    transition: transform .5s ease-in-out;
  }
  
  .animation-footer-link:hover:after {
    transform: scaleX(1);
    transform-origin: 0% 50%;
  }
  
  .ui.mini.pagination.menu {
      width: fit-content;
      border-radius: .5rem;
      background-color: rgba(var(--panel-background-color));
      padding: .7em;
      display: flex;
      gap: 2em;
  }
  
  .ui.mini.pagination.menu .active.item {
      background-color: rgba(var(--primary-text-color));
      color: rgba(var(--primary-button-text-color));
      padding: 0 .7em;
      border-radius: .3rem;
  }
  
  @keyframes logo {
    0%   {
      transform: scale(1,1) translateY(-60vh);
    }
  
    40%  {
      transform: scale(1.05,.95) translateY(0);
    }
  
    67%  {
      transform: scale(1,1)      translateY(-5vh);
    }
  
    94%  {
      transform: scale(1,1)      translateY(0);
    }
  
    100% {
      transform: scale(1,1)      translateY(0);
    }
  }
  
  @keyframes floating {
    0%   {
      transform: translateY(0vh);
    }
  
    50%  {
      transform: translateY(-5vh);
    }
  
    100% {
      transform: translateY(0vh);
    }
  }
  
  @media only screen and (max-width: 600px) {
  @keyframes floating {
    0%   {
      transform: translateY(0vh);
    }
  
    50%  {
      transform: translateY(-2vh);
    }
  
    100% {
      transform: translateY(0vh);
    }
  }
  }
  
  .group.animate .group-\[\.animate\]\:transition-max-h {
      transition-property: max-height;
      transition-duration: 3s; /* Adjust the duration as needed */
      transition-timing-function: ease-in-out;
      transition-name: expandHeight;
  }
  
  @keyframes expandHeight {
      from {
        max-height: 0;
      }
      to {
        max-height: fit-content; /* Set an appropriate maximum height */
      }
    }
    
 /* SVG WAVE */
 header svg{
     position: absolute;
     bottom: 0;
     right: 0;
     left: 0;
     width: 100%;
     height: 10rem;
 }
 
 header svg path{
     color: rgba(var(--background-color));
 }
 
 /* SHADOW WAVE */
 header svg + svg{
     bottom: 35px;
     opacity: 0.1;
 }
  
  header.second-hidden {
    height: 40rem;
  }
  
  @media (max-width: 800px){
    header.second-hidden {
        height: 50rem;
    }
  }
  
  .modal {
      display: none;
      overflow: auto;
      overflow-y: scroll;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1050;
      -webkit-overflow-scrolling: touch;
      outline: 0;
  }
  
  .inactive {
    pointer-events: none;
    opacity: .8;
  }
  
  @property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }
  
  .progressbar {
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
      radial-gradient(closest-side, rgba(var(--background-color)) 80%, transparent 0 99.9%, rgba(var(--background-color)) 0),
      conic-gradient(rgba(var(--primary-text-color)) calc(var(--pgPercentage) * 1%), rgba(var(--panel-background-color)) 0)
      ;
  }
  
  @keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
  }
  
  .progressbar:before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
  }
  
  
  .scroll-hidden::-webkit-scrollbar {
    display: none;
  }
  
  .dark-show {
    display:none!important;
  }
  
  .dark .dark-show {
    display: inline-block!important;
  }
  
  .dark .dark-hidden {
    display: none!important;
  }
  
  li ul.dropdown {
    display: none;
  }
  
  li.open ul.dropdown {
    display: block;
  }
  
  .default.text.filtered, .sizer {
  display: none;
  }
  
  .search:not(.selection) {
      background: transparent;
  border: none;
  outline: none;
  }
  
  .selection .message {
  position: blcok;
  margin-top: 1rem;
  }
  
  .tabular.item {
      border-bottom: 3px solid;
      border-color: rgba(var(--text-color));
      color: rgba(var(--text-color));
  }
  
  .tabular.item:hover {
      color:rgba(var(--text-color),.8);
      border-color: rgba(var(--text-color),.8);
      cursor: pointer;
  }
  
  .tabular.item.active {
      color: rgba(var(--primary-text-color));
      border-color: rgba(var(--primary-text-color));
  }
  
  .tabular.item.active:hover {
      color: rgba(var(--primary-text-color),.8);
      border-color: rgba(var(--primary-text-color),.8);
  }
  
  /* Cookies */
  
  .cc-color-override--613581420.cc-revoke {
      background-color: rgba(var(--primary-button-background-color))!important;
      color: rgba(var(--primary-button-text-color))!important;
  }
  
  .cc-color-override--613581420 {
      background-color: rgba(var(--panel-accent-background-color))!important;
      color: rgba(var(--text-color))!important;
  }
  
  .cc-color-override--613581420 .cc-btn.cc-allow {
      color: rgba(var(--primary-text-color))!important;
      border-color: rgba(var(--primary-text-color))!important;
  }
  
  .cc-window.cc-floating {
      max-width: 100%;
      width: 24em;
  }
  
  /*
     *  [ USER BADGES ]
     */
  
  .badge {
      display: inline-block;
      line-height: 1;
      vertical-align: baseline;
      margin: 0 .14285714em;
      background-color: #e8e8e8;
      background-image: none;
      padding: 0.3em .3em;
      color: rgba(0, 0, 0, .6);
      text-transform: none;
      font-size: .85714286rem;
      font-weight: 700;
      border: 0 solid transparent;
      border-radius: .28571429rem;
      -webkit-transition: background .1s ease;
      transition: background .1s ease;
  }
  
  a.badge:hover,
  a.badge:focus {
      text-decoration: none;
  }
  
  .badge:empty {
      display: none;
  }
  
  .badge-primary {
      color: #fff;
      background-color: #007bff;
  }
  
  a.badge-primary:hover,
  a.badge-primary:focus {
      color: #fff;
      background-color: #fff;
  }
  
  .badge-secondary {
      color: #fff;
      background-color: #6c757d;
  }
  
  a.badge-secondary:hover,
  a.badge-secondary:focus {
      color: #fff;
      background-color: #545b62;
  }
  
  .badge-success {
      color: #fff;
      background-color: #28a745;
  }
  
  a.badge-success:hover,
  a.badge-success:focus {
      color: #fff;
      background-color: #1e7e34;
  }
  
  .badge-info {
      color: #fff;
      background-color: #17a2b8;
  }
  
  a.badge-info:hover,
  a.badge-info:focus {
      color: #fff;
      background-color: #117a8b;
  }
  
  .badge-warning {
      color: #212529;
      background-color: #ffc107;
  }
  
  a.badge-warning:hover,
  a.badge-warning:focus {
      color: #212529;
      background-color: #d39e00;
  }
  
  .badge-danger {
      color: #fff;
      background-color: #dc3545;
  }
  
  a.badge-danger:hover,
  a.badge-danger:focus {
      color: #fff;
      background-color: #bd2130;
  }
  
  .badge-light {
      color: #212529;
      background-color: #f8f9fa;
  }
  
  a.badge-light:hover,
  a.badge-light:focus {
      color: #212529;
      background-color: #dae0e5;
  }
  
  .badge-dark {
      color: #fff;
      background-color: #343a40;
  }
  
  a.badge-dark:hover,
  a.badge-dark:focus {
      color: #fff;
      background-color: #1d2124;
  }