/* Scope styles to the volume */
main:has(.volume-table) .volume-table-container {
  display: grid;
  width: 100%;
  margin: 20px auto;
  overflow-x: auto; /* For responsiveness on small screens */
}

main:has(.volume-table) .volume-table {
  width: 100%;
  border-collapse: collapse;
  color: rgb(166, 166, 166);
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}


main:has(.volume-table) .volume-table thead, tbody {
    width: 100%;
    display: grid;
}

main:has(.volume-table) .volume-table tr {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


main:has(.volume-table) .volume-table th,
main:has(.volume-table) .volume-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #333;
}

main:has(.volume-table) .volume-table th {
  background: #2a2a2a;
  color: #ffffff;
  // text-transform: uppercase;
  font-weight: medium;
}

main:has(.volume-table) .volume-table tr:hover {
  background: #333333; /* Hover effect */
  transition: background 0.2s ease;
}


/* Scope styles to the /fees page */
main:has(.fees-table) .fees-table-container {
  display: grid;
  width: 100%;
  margin: 20px auto;
  overflow-x: auto; /* For responsiveness on small screens */
}

main:has(.fees-table) .fees-table {
  width: 100%;
  border-collapse: collapse;
  color: rgb(166, 166, 166);
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}


main:has(.fees-table) .fees-table thead, tbody {
    width: 100%;
    display: grid;
}

main:has(.fees-table) .fees-table tr {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}


main:has(.fees-table) .fees-table th,
main:has(.fees-table) .fees-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #333;
}

main:has(.fees-table) .fees-table th {
  background: #2a2a2a;
  color: #ffffff;
  // text-transform: uppercase;
  font-weight: medium;
}

main:has(.fees-table) .fees-table tr:hover {
  background: #333333; /* Hover effect */
  transition: background 0.2s ease;
}


/* Scope styles to the /levels page */
main:has(.levels-table) .levels-table-container {
  display: grid;
  width: 100%;
  margin: 20px auto;
  overflow-x: auto; /* For responsiveness on small screens */
}

main:has(.levels-table) .levels-table {
  width: 100%;
  border-collapse: collapse;
  color: rgb(166, 166, 166);
  font-family: 'Arial', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}


main:has(.levels-table) .levels-table thead, tbody {
    width: 100%;
    display: grid;
}

main:has(.levels-table) .levels-table tr {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}


main:has(.levels-table) .levels-table th,
main:has(.levels-table) .levels-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #333;
}

main:has(.levels-table) .levels-table th {
  background: #2a2a2a;
  color: #ffffff;
  // text-transform: uppercase;
  font-weight: medium;
}

main:has(.levels-table) .levels-table tr:hover {
  background: #333333; /* Hover effect */
  transition: background 0.2s ease;
}

main:has(.levels-table) .unlock {
  cursor: pointer;
  color: #e4e4e7; /* Vibrant unlock color */
  text-decoration: underline;
  user-select: none;
  font-weight: bold;
}

main:has(.levels-table) .tooltip {
  position: absolute;
  background: #2a2a2a;
  color: #ffffff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  max-width: 300px;
  font-size: 14px;
  border: 1px solid #444;
}

/* Optional: Style images in tooltips */
main:has(.levels-table) .tooltip img {
  max-width: 100%;
  border-radius: 4px;
}

/* Tippy tooltip styling */
.tippy-box {
  background-color: black;
  border: 1px solid #44403c;
  padding: 12px;
  width: 320px;
  color: rgb(166, 166, 166);
}


.tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}


Documentation

Puntos