.content {
  display: flex;
	flex-direction: column;
}

.row>* {
	padding-right: 0;
	padding-left: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 1);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

#face,
#head,
#clothes,
#accessories,
#hand,
#overlay,
#exist-hint {
  position: absolute;
  width: inherit;
  height: auto;
}

#face {z-index: 1;}
#head {z-index: 2;}
#clothes {z-index: 3;}
#accessories {z-index: 4;}
#hand {z-index: 5;}

#overlay {
  z-index: 6;
	mix-blend-mode:add;
}

#exist-hint { z-index: 7;}

.flex-container {
	display: block;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 200px;
	overflow: auto;
}

.image-row {
	display: flex;
	align-items: center;
	overflow: auto;
	border: 2px solid black;
	border-radius: 15px;
  }

.face, .head, .clothes, .accessories, .hand {
	display: flex;
	align-items: left;
	justify-content: left;
	overflow: auto;
}

.thumbnail {
	max-width: 150px;
	max-height: 150px;
}

.image-holder {
	position: relative;
}

.tag {
  position: absolute; /* This positions the .tag relative to its parent .face */
  bottom: 0; /* Aligns the .tag to the bottom of the .face */
  left: 0; /* Aligns the .tag to the left of the .face */
  width: 100%; /* Makes the .tag stretch across the entire width of the .face */
  color: black; /* Text color */
  text-align: center; /* Centers the text within the .tag */
  box-sizing: border-box; /* Ensures padding does not increase the size of the .tag */
  display: block; /* Makes the .tag a block level element, allowing it to occupy the full width */
	background-clip: content-box;
	padding: 0 10px;
	font-size: 9px;
}

.tag-selected {
  position: absolute; /* This positions the .tag relative to its parent .face */
  bottom: 0; /* Aligns the .tag to the bottom of the .face */
  left: 0; /* Aligns the .tag to the left of the .face */
  width: 100%; /* Makes the .tag stretch across the entire width of the .face */
	background-color: black;
  color: white; /* Text color */
  text-align: center; /* Centers the text within the .tag */
  box-sizing: border-box; /* Ensures padding does not increase the size of the .tag */
  display: block; /* Makes the .tag a block level element, allowing it to occupy the full width */
	background-clip: content-box;
	padding: 0 10px;
	font-size: 9px;
	z-index: 99;
}

.face img, .head img, .clothes img, .accessories img, .hand img {
	margin: 10px;
	border: 2px solid transparent;
	cursor: pointer;
}

.face img.selected, .head img.selected, .clothes img.selected, .accessories img.selected, .hand img.selected {
  border-color: black;
}

.arrow {
	width: 100px;
	height: 100px;
	background-image: url("https://cdn-icons-png.flaticon.com/512/37/37131.png");
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

.left {
	transform: rotate(180deg);
}

.arrow:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

a {
  color: black;
  font-weight: bold;
  text-decoration: underline;
}

h6 {
  color: black;
  font-weight:normal;
}

#next-step-button {
	cursor: pointer;
	display: none;
}