@font-face {
    font-family: 'AmericanSans';
    src: url('fonts/americansans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'AmericanSans', sans-serif !important;
}

#header.header-sticky {
    position: sticky;
    top: 0;
    z-index: 199 !important;
    background: #fff;
    will-change: top;
    width: 100% !important;
    margin-bottom: 20px;
}

.badge-outline-primary {
    background-color: #fff;
    color: #0d6efd; /* Bootstrap primary color */
    border: 1px solid #0d6efd;
}

.badge-outline-warning {
    background-color: #fff;
    color: #fbbd00;
    border: 1px solid #fbbd00;
}

.badge-outline-info {
    background-color: #fff;
    color: #0dcaf0;
    border: 1px solid #0dcaf0;
}

.badge-outline-danger {
    background-color: #fff;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.badge-blue-700 {
  color: rgb(29 78 216);
  background-color: rgba(219, 234, 254, 1); /* optional light background */
  border: 1px solid rgba(191, 219, 254, 1);
}

.badge-purple-700 {
  color: rgb(109 40 217);
  background-color: rgba(237, 233, 254, 1); /* optional light background */
  border: 1px solid rgba(221, 214, 254, 1);
}

.highlight-new {
  position: relative;
  overflow: visible !important;
  animation: glow 1.5s infinite ease-in-out;
  border-color: #9035b9 !important;
}

.select-wrapper {
  position: relative;
  display: inline-block; /* Ajusta al tamaño del select */
  width: 100%;
}

.select-wrapper::before {
  content: "New";
  position: absolute;
  top: 5px;
  right: 8px;
  border: 1px solid #9035b9;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 999;
  background: #fff;
  color: #9035b9;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 0px rgba(144, 53, 185, 0.0);
  }
  50% {
    box-shadow: 0 0 10px rgba(144, 53, 185, 0.7);
  }
  100% {
    box-shadow: 0 0 0px rgba(144, 53, 185, 0.0);
  }
}