@media (max-width: 480px) {
  .gabiall {
    max-width: 480px;
  }

  .cabsum-container {
    max-width: 300px;
  }
}

    .finalib-banner {
      position: relative;
      width: 100%;
      height: 338px;              /* mesma altura aproximada da arte */
      
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 3vw;
    }

    .finalib-overlay {
      /* leve escurecida pra destacar o texto */
      
      width: 100%;
      max-width: 1061px;
      padding: 25px 3vw;
      box-sizing: border-box;
      text-align: center;
    }

    .finalib-text-top {
      margin: 0;
        font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #ffffff;
      font-size: 40px;
       line-height: 0;
    }

    .finalib-text-middle {
      margin: 10px 0;
        font-family: "Open Sans", sans-serif;
      font-weight: 900;
      letter-spacing: 0.05em;
      color: #f7c76a; /* amarelo aproximado */
      font-size: 100px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .finalib-text-bottom {
      margin: 0;
        font-family: "Open Sans", sans-serif;
      font-weight: 700;
      color: #ffffff;
      font-size: 40px;
      line-height: 0;
    }

    @media (max-width: 1000px) {
      .finalib-overlay {
      /* leve escurecida pra destacar o texto */
      
      transform: scale(0.9);

    }
    .banner-title {

  bottom: 90px !important;
    }
  }
    

      @media (max-width: 900px) {
      .finalib-overlay {
      /* leve escurecida pra destacar o texto */
      
      transform: scale(0.7);}
.banner-title {

  bottom: 90px !important;
    }
  }


        @media (max-width: 600px) {
      .finalib-overlay {
      /* leve escurecida pra destacar o texto */
      
      transform: scale(0.5);}
.banner-title {

  bottom: 90px !important;
    }
  }

          @media (max-width: 450px) {
      .finalib-overlay {
      /* leve escurecida pra destacar o texto */
      
      transform: scale(0.4);}
.banner-title {

  bottom: 90px !important;
    }
  }


.banner-title {
  font-size: 4vw;
  font-weight: 900;
  color: #ffffff;
  position: absolute;
  bottom: 150px;
  left: 50%;
  font-family: "Open Sans", sans-serif;
  transform: translateX(-50%);
  white-space: nowrap; /* Prevents text from wrapping */
  margin: 0;
  z-index: 10;
  
}


.gabih3 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #000000;
  font-size: 35px;
  letter-spacing: -2px;
  line-height: 30px;
  font-weight: 700;
  max-width: 680px;
  text-align: center;
  margin: 0 auto;
  margin-top: 60px;
}



.gabih4 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #7c0505;
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 30px;
  font-weight: 700;
  max-width: 680px;
  text-align: center;
  font-style: italic;
  margin: 55px auto;
  margin-bottom: 50px;
}

.gabih45 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #585858;
  font-size: 20px;
  letter-spacing: -1px;
  line-height: 30px;
  font-weight: 500;
  max-width: 680px;
  text-align: center;
  text-transform: uppercase;
  line-height: 40px;
  margin: 10px auto;
  margin-bottom: 50px;
}

.gabih5 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #000000;
  font-size: 28px;
  letter-spacing: -1px;
  line-height: 30px;
  font-weight: 500;
  max-width: 680px;
  text-align: center;
  text-transform: uppercase;
  margin: 80px auto;
  margin-bottom: 20px;
}

.gabih6 {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  color: #000000;
  font-size: 28px;
  letter-spacing: -1px;
  line-height: 30px;
  font-weight: 500;
  max-width: 680px;
  text-align: center;
  text-transform: uppercase;
  margin: 80px auto;
  margin-bottom: 40px;
}

/* Styles for the heading and divider */
.hheader {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 1.7rem;
  color: #000000;
  margin: 15px 0;
  margin-left: 20vw;

  font-weight: 500;
  letter-spacing: -1px;
  margin-right: 20vw;
}

@media (max-width: 1100px) {
  .hheader {
    margin-left: 10vw;
    margin-right: 10vw;
  }
}

@media (max-width: 890px) {
  .hheader {
    font-size: 1.5rem;
  }
}

@media (max-width: 790px) {
  .hheader {
    font-size: 1.3rem;
  }
}

@media (max-width: 690px) {
  .hheader {
    font-size: 1.1rem;
  }
}

@media (max-width: 490px) {
  .hheader {
    font-size: 1rem;
  }
}

.divider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.divider {
  flex-grow: 1;
  height: 1px;
  background-color: #7c0505;
  border: none;
  margin: 0 15px; /* Adjust margin as needed for spacing */
}

/* Wrapper styling */
.wrapper {
  max-width: 1200px; /* Adjust based on reference width */
  margin: 0 auto;
  margin-top: 20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.paragraph {
  max-width: 670px;
  margin: 30px auto;
  font-family: "Open Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 2.06rem;
  box-sizing: border-box;
  color: #000000;
}

/* Social Icons Styling */
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 10px;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  width: 35px;
  height: 35px;
  color: #c3a53d;
  background-color: #ffffff;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  background-color: #ffffff;
  color: #001838;
}

.social-icons svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.share-icon-whatsapp:hover path {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.mult-header {
  text-align: center;
  z-index: -2;
  color: white;

  position: relative;
}

.mult-header-image-tot {
  width: 100%;
  object-fit: cover;

  margin-bottom: -4px;
}

@media (max-width: 690px) {
  .mult-header-image {
    width: 100%;
    object-fit: cover;
    display: none;
    margin-bottom: -4px;
  }

  .mult-header-image-mob {
    width: 100%;
    object-fit: cover;
    margin-bottom: -4px;
  }

  .numgabi-trophy {
    margin-left: -3px;
  }
}

@media (min-width: 691px) {
  .mult-header-image {
    width: 100%;
    object-fit: cover;
    margin-bottom: -4px;
    z-index: -20;
  }

  .mult-header-image-mob {
    width: 100%;
    object-fit: cover;
    display: none;
    margin-bottom: -4px;
  }

  .numgabi-trophy {
    text-align: center;
    margin-left: 20px;
  }
}

.section--credits {
  color: #000000;
  font-size: 0.8125rem;
  font-family: "Open Sans", sans-serif;
  line-height: 1em;
  margin: 9.375rem auto 6.875rem;
  max-width: 30.625rem;
  text-align: center;
}

.credits__title {
  font-size: 0.9rem;
  color: #000000;
  font-weight: bold;
  margin-bottom: 0.25rem;
  padding-bottom: 0rem;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.hrcredit {
  color: #000000;
  border-color: #000000;
}

.credit__role {
  text-align: center;
  display: inline-block;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 10px;
  width: 100%;
}

.credit__role2 {
  text-align: center;
  display: inline-block;
  color: #000000;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 5px;
}

.credit__role3 {
  text-align: center;
  display: inline-block;
  color: #000000;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
}

.credit__role4 {
  text-align: center;
  display: inline-block;
  color: #000000;
  margin-bottom: 50px;
  width: 100%;
}

.conty {
  max-width: 800px;
  margin: 0 auto;
}

.lib-h1 {
  display: inline-block;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: 2.5rem;
  text-transform: uppercase;
}

.lib-container {
  max-width: 1200px;
  margin: auto;
  background-color: #f4f4f4;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
}
.lib-year {
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  padding: 10px;
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  background-color: #d8cea9;
}
.lib-stage-header {
  display: flex;
  align-items: center;
  padding: 10px;
  font-weight: 600;
  font-size: 0.6875rem;
  background-color: #ffffff;
  text-transform: uppercase;
  margin-bottom: -15px;
  justify-content: space-around;
  /* STICKY BEHAVIOR */
  position: sticky;
  top: 0;
  z-index: 999; /* ensure it stays above other elements */
}
.lib-stage-header span {
  position: relative;
  flex: 1;
  text-align: center;
}
.lib-stage-header span::after {
  content: "";
  position: absolute;
  right: 0;
  top: -10px;
  bottom: 0;
  width: 1px;
  opacity: 0.05;
  height: 35px;

  background: black; /* Linha vertical separando cada fase */
}
.lib-stage-header span:last-child::after {
  content: none; /* Removes the separator */
}

.lib-campeao {
  width: 1.4rem !important; /* Adjust size */
  height: 1.4rem !important; /* Adjust size */
  margin-right: -5px !important;
}
.lib-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.lib-team {
  display: flex;
  align-items: center;
  width: 100px;
  font-size: 0.75rem;
  justify-content: flex-end;
  font-weight: 600;
}
.lib-team img {
  width: 0.9375rem;
  margin-left: 8px;
  cursor: pointer;
}
.lib-line {
  display: flex;
  align-items: center;
  width: 85%;
  position: relative;
  margin-left: -30px;
  margin-right: auto;
}
@media (max-width: 1240px) {
  .lib-line {
    margin-left: -10px;
  }
}
@media (max-width: 1100px) {
  .lib-line {
    margin-left: -20px;
  }
}
@media (max-width: 1000px) {
  .lib-line {
    margin-left: -30px;
  }
}
@media (max-width: 900px) {
  .lib-line {
    margin-left: -22px;
    width: 83%;
  }
}
@media (max-width: 800px) {
  .lib-line {
    margin-left: -25px;
    width: 82%;
  }
}
@media (max-width: 700px) {
  .lib-line {
    margin-left: -35px;
    width: 82%;
  }
  .lib-team {
    font-size: 0;
  }
  .lib-team img {
    margin-right: 50px;
  }
}
@media (max-width: 600px) {
  .lib-line {
    margin-left: -45px;
    width: 82%;
  }
}
@media (max-width: 500px) {
  .lib-line {
    margin-left: -55px;
    width: 82%;
  }
  .lib-team img {
    margin-right: 55px;
  }
}
@media (max-width: 450px) {
  .lib-line {
    margin-left: -60px;
    width: 82%;
  }
  .lib-team img {
    margin-right: 60px;
  }
}
@media (max-width: 425px) {
  .lib-line {
    margin-left: -65px;
    width: 82%;
  }
  .lib-team img {
    margin-right: 65px;
  }
}
@media (max-width: 400px) {
  .lib-line {
    margin-left: -70px;
    width: 82%;
  }
  .lib-team img {
    margin-right: 70px;
  }
}

.lib-year-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.lib-phase {
  flex-grow: 1;
  height: 2px;
  background: red;
  position: relative;
}
.lib-circle {
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MzguNSA0MzguNSI+PGNpcmNsZSBmaWxsPSJ3aGl0ZSIgY3g9IjIyMC4zIiBjeT0iMjIwLjMiIHI9IjE5MCIvPjxwYXRoIGZpbGw9IiNmMTY1NjciIGQ9Ik0yMjAuMyA0MjMuM2MtMTExLjkgMC0yMDMtOTEuMS0yMDMtMjAzczkxLjEtMjAzIDIwMy0yMDMgMjAzIDkxLjEgMjAzIDIwMy05MS4xIDIwMy0yMDMgMjAzem0wLTM4MC4xYy05Ny43IDAtMTc3LjEgNzkuNC0xNzcuMSAxNzcuMXM3OS40IDE3Ny4xIDE3Ny4xIDE3Ny4xYzk3LjcgMCAxNzcuMS03OS40IDE3Ny4xLTE3Ny4xUzMxNy45IDQzLjIgMjIwLjMgNDMuMnoiLz48Y2lyY2xlIGZpbGw9IiNmMTY1NjciIGN4PSIyMjAuMyIgY3k9IjIyMC4zIiByPSI5NS40Ii8+PC9zdmc+Cg==")
    no-repeat center center;
  background-size: contain;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  cursor: pointer; /* Add cursor pointer to indicate interactivity */
}
.lib-phase.inactive {
  background: transparent;
}
/* 🔥 New class for the first valid phase */
.lib-phase.start {
  background: none !important;
  border: none !important;
}
.tooltip {
  position: absolute;
  background-color: white;
  color: black;
  padding: 8px;
  font-family: "Open Sans", sans-serif;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.tooltip2 {
  position: absolute;
  background-color: white;
  color: black;
  padding: 8px;
  font-family: "Open Sans", sans-serif;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 100px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.liblib-wrapper {
  display: flex;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  align-items: center;
  height: 5vh;
  
}
.liblib-container {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: center;
  
}
.liblib-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-style: italic;
  margin: 0;
  padding-left: 0.3125rem;
  text-transform: uppercase;
}
.liblib-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.liblib-icon, liblib-star {
  filter: hue-rotate(300deg) saturate(0);
}

.liblib-icon2 {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 50px;
  display: inline-block;
}
.liblib-star {
  background-image: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/public/2023/3/5eMEOw9umVCGIZuEfzQ2.svg");
}

.liblib-table {
  background-image: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/static_especiais/futebol/libertadores/especial/palmeiras-flamengo-final-2025/img/tabela.jpg");
}
.liblib-circle {
  background: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/static_especiais/futebol/libertadores/especial/palmeiras-flamengo-final-2025/img/circle.jpg");
}
.liblib-badge {
  background-image: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/static_especiais/futebol/libertadores/especial/palmeiras-flamengo-final-2025/img/badge.jpg");
}
/* Ensure pointer cursor is correctly applied */
.liblib-icon.liblib-pointer {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .liblib-container {
    transform: scale(0.9);
    gap: 20px; /* Ajuste do espaçamento para ficar mais organizado */
  }
}
/* Container for each "table" */
.newlib-table {
  display: table;
  width: 100%;
  margin-bottom: 1rem;
}
/* Each row */
.newlib-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tabela2 {
  font-family: "Open Sans", sans-serif;
  margin: 0 auto;
  text-align: center;
  overflow-x: auto; /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch;
  user-select: none;
  transform: scale(1.27);
}
@media (max-width: 990px) {
  .tabela2 {
    cursor: grab;
    position: relative; /* Needed for the overlay */
  }
  .tabela2.active {
    cursor: grabbing; /* When dragging */
  }
  /* New CSS for the drag overlay */
  .drag-overlay {
    position: absolute;
    top: 35%;
    left: 40%;
    width: 20%;
    height: 20%;
    background: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/static_especiais/futebol/libertadores/especial/palmeiras-flamengo-final-2025/img/drag.png") no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: 10;
  }
}
/* Each cell */
.newlib-cell {
  display: table-cell;
  padding: 0.1rem 0.1rem;
  vertical-align: middle;
  font-size: 0.625rem;
  width: auto;
  text-align: center;
}
.table-year {
  font-size: 0.75rem; /* Adjust font size as needed */
  font-weight: bold;
  text-align: center;
  padding: 0.5rem; /* Add some padding for visual spacing */
  background-color: #ddd; /* A light background to match your .lib-year style */
}
.newlib-label {
  display: flex;
  align-items: center;
  width: 100px;
  font-size: 0.7rem;
  justify-content: flex-end;
  font-weight: 600;
}
.newlib-label img {
  width: 0.9375rem;
  margin-left: 10px;
}

.year-headers-container {
  display: flex;
  margin-left: -20px;
  align-items: center;
  margin-bottom: 15px; /* Add spacing if needed */
  flex-direction: row;
  margin-top: 10px;
  justify-content: center;
}

.year-header-text {
  font-size: 0.65rem;
  margin-left: 1px;
}

.year-header-text.year-2025 {
  margin-left: -735px; /* Your custom style for 2024 */
  position: absolute; /* Required for absolute positioning of the pseudo-element */
}

.year-header-text.year-2020 {
  margin-right: 602px; /* Your custom style for 2024 */
  position: absolute;
}

.year-header-text.year-2010 {
  margin-right: 340px; /* Your custom style for 2024 */
  position: absolute;
}

.year-header-text.year-2000 {
  margin-right: 75px; /* Your custom style for 2024 */
  position: absolute;
}

.year-header-text.year-1990 {
  margin-right: -187px; /* Your custom style for 2024 */
  position: absolute;
}

.year-header-text.year-1980 {
  margin-right: -450px; /* Your custom style for 2024 */
  position: absolute;
}

.year-header-text.year-1970 {
  margin-right: -715px; /* Your custom style for 2024 */
  position: absolute;
}

.year-header-text.year-1960 {
  margin-right: -980px; /* Your custom style for 2024 */
  position: absolute;
}




/* Pseudo-element to create the vertical line */
.year-header-text.year-2025::after,
.year-header-text.year-2020::after,
.year-header-text.year-2010::after,
.year-header-text.year-2000::after,
.year-header-text.year-1990::after,
.year-header-text.year-1980::after,
.year-header-text.year-1970::after,
.year-header-text.year-1960::after {
  content: "";
  position: absolute;
  bottom: -5px; /* Adjust to control vertical spacing below the text */
  left: 50%; /* Center the line horizontally relative to the header */
  transform: translateX(-50%);
  width: 0.1px; /* Line thickness */
  height: 6px; /* Line height */
  background-color: #000; /* Change the color as needed */
}

.newlib-circle {
  width: 10px;
  height: 20px;
  border-radius: 0%;
  margin: 0 auto;
}
.newlib-phase-none {
  background-color: #ccc;
}
.newlib-phase-1fase {
  background-color: #e5e46d;
}
.newlib-phase-2fase {
  background-color: #e5e46d;
}
.newlib-phase-3fase {
  background-color: #e5e46d;
}
.newlib-phase-grupos {
  background-color: #e5e46d;
}
.newlib-phase-oitavas {
  background-color: #e5b36d;
}
.newlib-phase-quartas {
  background-color: #e5b36d;
}
.newlib-phase-semi {
  background-color: #e57b6d;
}
.newlib-phase-final {
  background-color: #b23c2d;
}
.newlib-phase-campeao {
  background-color: #b23c2d;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS40ODEgMTkuNDgxIj48cGF0aCBkPSJNMTAuMjAxLjc1OGwyLjQ3OCA1Ljg2NSA2LjM0NC41NDVjLjQ0LjAzOC42MTkuNTg3LjI4NS44NzZsLTQuODEyIDQuMTY5IDEuNDQyIDYuMjAyYy4xLjQzMS0uMzY3Ljc3LS43NDUuNTQxbC01LjQ1Mi0zLjI4OC01LjQ1MiAzLjI4OGMtLjM3OS4yMjgtLjg0NS0uMTExLS43NDUtLjU0MWwxLjQ0Mi02LjIwMi00LjgxMy00LjE3Yy0uMzM0LS4yODktLjE1Ni0uODM4LjI4NS0uODc2bDYuMzQ0LS41NDVMOS4yOC43NThjLjE3Mi0uNDA4Ljc0OS0uNDA4LjkyMSAweiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz48L3N2Zz4K);
  background-repeat: no-repeat;
  background-position: center;
}

.libe-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: "Open Sans", sans-serif;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

@media (max-width: 700px) {
  .libe-legend {
    transform: scale(0.9);
  }
}

@media (max-width: 400px) {
  .libe-legend {
    transform: scale(0.8);
  }
}

.libe-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.libe-color-box {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 3px;
}

.libe-yellow {
  background-color: #f5e56b;
}

.libe-orange {
  background-color: #d9a15b;
}

.libe-light-red {
  background-color: #e58c8c;
}

.libe-dark-red {
  background-color: #9c2d2d;
}

.libe-champion {
  background-color: #8b2a2a;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOS40ODEgMTkuNDgxIj48cGF0aCBkPSJNMTAuMjAxLjc1OGwyLjQ3OCA1Ljg2NSA2LjM0NC41NDVjLjQ0LjAzOC42MTkuNTg3LjI4NS44NzZsLTQuODEyIDQuMTY5IDEuNDQyIDYuMjAyYy4xLjQzMS0uMzY3Ljc3LS43NDUuNTQxbC01LjQ1Mi0zLjI4OC01LjQ1MiAzLjI4OGMtLjM3OS4yMjgtLjg0NS0uMTExLS43NDUtLjU0MWwxLjQ0Mi02LjIwMi00LjgxMy00LjE3Yy0uMzM0LS4yODktLjE1Ni0uODM4LjI4NS0uODc2bDYuMzQ0LS41NDVMOS4yOC43NThjLjE3Mi0uNDA4Ljc0OS0uNDA4LjkyMSAweiIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz48L3N2Zz4K);
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.libe-text {
  font-style: italic;
  font-size: 0.75rem;
}

.lib-year-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.vertical-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: rgb(155, 155, 155); /* Adjust color if needed */
  opacity: 0.15; /* Adjust transparency */
  top: 0;
}

.mult-header-image-tot {
  width: 100%;
  object-fit: cover;

  margin-bottom: -4px;
}

.gabs-subcontainer {
  max-width: 690px;
  margin: 50px auto;
}

.gabs-subcontainer2 {
  max-width: 1200px;
  margin: 50px auto;
}

.gabs-subcontainer3 {
  max-width: 500px;
  margin: 50px auto;
}

.tablib-container {
  width: 100%;
  max-width: 900px;
  margin: auto;
  font-family: Arial, sans-serif;
}

@media (max-width: 990px) {
  .tablib-table {
    display: block;
    overflow-x: auto; /* Habilita rolagem horizontal */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
    cursor: grab; /* Muda o cursor para indicar arrastamento */
    position: relative;
    user-select: none;
  }

  .tablib-table.active {
    cursor: grabbing; /* Muda o cursor enquanto arrasta */
  }

  /* Adiciona uma imagem de indicação de arraste antes do primeiro toque */
  .drag-overlay-tablib {
    position: absolute;
    top: 35%;
    left: 40%;
    width: 20%;
    height: 20%;
    background: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/static_especiais/futebol/libertadores/especial/palmeiras-flamengo-final-2025/img/drag.png") no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: 10;
  }
}

.tablib-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.tablib-table th,
.tablib-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.tablib-table th {
  background-color: #f4f4f4;
  font-size: 0.5rem;
  text-transform: uppercase;
  cursor: pointer;
}
.tablib-search {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
.tablib-table td:first-child {
  text-align: right;
  padding-left: 10px;
  font-size: 0.875rem;
}

td:first-child {
  width: 180px;
  padding-right: 50px;
}

@media (max-width: 690px) {
  .tablib-table .club-name {
    display: none;
  }
}


/* === Palmeiras na tabela de anos (lib-*) === */
.lib-row.pal .lib-phase {
  background-color: #009739 !important; /* verde Palmeiras */
}
.lib-row.pal .lib-phase.inactive {
  background: transparent !important; /* mantém trilho "vazio" onde não jogou */
}
/* O círculo padrão usa uma imagem base64 avermelhada.
   Aqui forçamos um bullet verde sólido para o Palmeiras. */
.lib-row.pal .lib-circle {
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MzguNSA0MzguNSI+PGNpcmNsZSBmaWxsPSJ3aGl0ZSIgY3g9IjIyMC4zIiBjeT0iMjIwLjMiIHI9IjE5MCIvPjxwYXRoIGZpbGw9IiMwMGE4NTkiIGQ9Ik0yMjAuMyA0MjMuM2MtMTExLjkgMC0yMDMtOTEuMS0yMDMtMjAzczkxLjEtMjAzIDIwMy0yMDMgMjAzIDkxLjEgMjAzIDIwMy05MS4xIDIwMy0yMDMgMjAzem0wLTM4MC4xYy05Ny43IDAtMTc3LjEgNzkuNC0xNzcuMSAxNzcuMXM3OS40IDE3Ny4xIDE3Ny4xIDE3Ny4xYzk3LjcgMCAxNzcuMS03OS40IDE3Ny4xLTE3Ny4xUzMxNy45IDQzLjIgMjIwLjMgNDMuMnoiLz48Y2lyY2xlIGZpbGw9IiMwMGE4NTkiIGN4PSIyMjAuMyIgY3k9IjIyMC4zIiByPSI5NS40Ii8+PC9zdmc+") no-repeat center;
  border-radius: 50% !important;
}

/* === Campeão Palmeiras verde === */
.lib-row.pal .lib-circle.lib-campeao {
  background-image: url("https://s3.glbimg.com/v1/AUTH_08fb001c60b847468664307c11fa9dc9/public/2023/3/5eMEOw9umVCGIZuEfzQ2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: hue-rotate(90deg) saturate(1.7);
}


.lib-row.pal .lib-phase.start {
  background: none !important;
  border: none !important;
}