.tab-content {
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
}

/* Default unselected state */
.nav-link {
  padding: 0;
  background-size: cover;
  color: transparent; /* Hide the text */
  border: none; /* Remove border if not needed */
  margin: 0 0.1rem;
}

#hand-tab {
  background-image: url(/assets/hand-a1178a4f0cdac271a7db31d44d2b3ef91592978e67d48acb7ad2cbd76c03c515.png);
}

#hand-tab.active {
  background-image: url(/assets/hand-selected-d91bfd51123d4be0cd6985b3d183f28f39975dcc64dd50fd356332657b1dece3.png);
}

#face-tab {
  background-image: url(/assets/face-cbbc08ba2495e4cc1eaf6a443d4aa78867c88c229d9030f76ae81f3e93fd4c90.png);
}

#face-tab.active {
  background-image: url(/assets/face-selected-af81a8465402fac7c66c3b9589e113e5ccac0d72b43d7a0b157434991867a7dd.png);
}

#head-tab {
  background-image: url(/assets/head-09a506e6b5a99dd6a808c5791b999812dcce214a0542efcb99efcc1d1306c5de.png);
}

#head-tab.active {
  background-image: url(/assets/head-selected-4d59806e700dafaf69460d3aa58a0334ad6cbec5e365f266c56fe41cd2aec21a.png);
}

#accessories-tab {
  background-image: url(/assets/accessories-cb29151ab9be0d490a86d4de58bd74e6d6b7335fe7035e8860d9ddf43abbb815.png);
}

#accessories-tab.active {
  background-image: url(/assets/accessories-selected-2068bdd9caaa8f81ba0b7979f8106ecd3a5414aa6c6f3316afa3b1a60c1547e5.png);
}

#clothes-tab {
  background-image: url(/assets/clothes-0add9b44874407bfc7576bd630bad69b1d3c9a69a15b59360d72ce265bc62187.png);
}

#clothes-tab.active {
  background-image: url(/assets/clothes-selected-1d3676463513da2ca591828d7f1f4ea33c415777f4a8f4eb7c913c803c01df7c.png);
}


/* Styles for mobile */
@media (max-width: 767px) {
  .left-section, .right-section {
    min-height: 50vh; /* Half viewport height on mobile */
  }

  .tab-content {
    /* If you want the tab content to be less than 50vh on mobile,
        you can adjust this value to something like 45vh to account for the tabs themselves */
    min-height: 45vh;
    overflow-y: auto;
  }

  .left-header {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);

  }

  .left-header img {
    margin-left: auto;
    margin-right: auto;
    height:7vh;
    width: auto;
  }

  .character-image {
    margin-bottom: 0;
  }

  .thumbnail {
    margin: 0 !important;
  }

  #next-step-button-mobile {
    height: 2.5rem;
    position: absolute;
    right: 0.5rem;
    top: 1.5rem;
  }
}