/* Hide table on small screens, show accordion */
@media (max-width: 767px) {
  .table-desktop {
    display: none;
  }

  .accordion-mobile {
    display: block;
  }
}

/* Hide accordion on large screens, show table */
@media (min-width: 768px) {
  .table-desktop {
    display: block;
  }

  .accordion-mobile {
    display: none;
  }
}

/* Tailwind classes used in HTML */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.bg-white {
  background-color: #ffffff;
}

.bg-gray-800 {
  background-color: #1f2937;
}

.text-white {
  color: #ffffff;
}

.p-4 {
  padding: 1rem;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-bold {
  font-weight: 700;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.min-w-full {
  min-width: 100%;
}

.divide-y> :not([hidden])~ :not([hidden]) {
  border-top-width: 1px;
  border-color: #e5e7eb;
}

.divide-gray-200> :not([hidden])~ :not([hidden]) {
  border-color: #e5e7eb;
}

.border {
  border-width: 1px;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.text-left {
  text-align: left;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-medium {
  font-weight: 500;
}

.text-gray-700 {
  color: #374151;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wider {
  letter-spacing: 0.05em;
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.font-medium {
  font-weight: 500;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-1\/12 {
  width: 8.333333%;
}

.text-center {
  text-align: center;
}

.text-gray-800 {
  color: #1f2937;
}

.align-top {
  vertical-align: top;
}

.border-r {
  border-right-width: 1px;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}
.w-5
 {
    width: 1.25rem;
}
.h-5 {
    height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-0\.25rem {
  margin-bottom: 0.25rem;
}

.mb-0\.75rem {
  margin-bottom: 0.75rem;
}

.md\:p-8 {
  padding: 2rem;
}

@media (min-width: 768px) {
  .md\:p-8 {
    padding: 2rem;
  }
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border {
  border-width: 1px;
}

.min-w-full {
  min-width: 100%;
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}


table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.bg-gray-100 {
  
  background-color: #f3f4f6;
}
/*  Legend background **/
.bg-red-500 { background-color: #ef4444; }
.bg-orange-500 { background-color: #f97316; }
 .bg-yellow-400 { background-color: #facc15; }
 .bg-green-500 { background-color: #22c55e; }
 .bg-gray-100 { background-color: #ffffff; }
 .bg-gray-200 { background-color: #d7d7d7;}
 .bg-gray-300 { background-color: #cdcdcd;}
  .text-white { color: #fff; }
.text-black { color: #000; }
 .border-gray-300 { border-color: #d1d5db; }
 .mobile-content {animation: slideDown .4s ease;
       transition: all 0.4s ease;}