.charwindow { border-bottom: 3px solid #000000; }
.wraw {  border-bottom: 3px solid #BA1A2A; }
.wnxt { border-bottom: 3px solid #333333; }
.waaa { border-bottom: 3px solid #00A651; }
.wsmackdown { border-bottom: 3px solid #006BC9; }

.nxt {  color: #333333; }
.raw {  color: #BA1A2A; }
.smackdown { color: #006BC9; }
.aaa { color: #00A651; }

.charwindow h2 {
text-align: left;
margin-bottom: 2px;
margin-top: 0;
}

.charwindow {
display: flex;
flex-direction: row;
gap: 10px;
height: 400px;
width: auto;
}

.tag-wrapperbook {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
text-align: left;
gap: 5px;
}

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

.label {  font-weight: bold;  }

.char-image2 {
max-width: 100px;
max-height: 120px;
object-fit: cover;
border-radius: 8px;
border: none;
float: left;
margin-right: 10px;
display: block;
}

.tag-wrapperbook, .DesktopText, h3 {
  clear: both;
}

.pagination-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: auto 0;
flex-wrap: wrap;
}

.pagination-controls button {
padding: 10px;
margin-top: 10px;
border: 2px solid #000000;
box-shadow: 0 0 10px #000000;
border-radius: 50%;
background: #404040;
color: #fff;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
-webkit-tap-highlight-color: transparent;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.pagination-controls button:hover {
background: #009933;
color: #000000;
box-shadow: 0 0 10px #216E21;
transition: 0.2s;
}

.image-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

.image-item4 {
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 5px;
margin: 5px;
text-align: center;
position: relative;
}

.image-item4 img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 5%;
border: 1px solid black;
}

.image-text {
margin-top: 5px;
font-size: 0.8rem;
color: #fff;
text-align: center;
}

.image-column {
flex: 0 0 1;
position: sticky;
top: 0;
}

.image-column img {
width: 200px;
max-height: 400px;
height: auto;
object-fit: contain;
border-radius: 5%;
border: 1px solid black;
}

.text-column {
flex: 1;
overflow-x: hidden;
overflow-y: auto;
padding: 10px;
max-height: 100vh;
}

.text-column {
scrollbar-width: none;
-ms-overflow-style: none;
}

.text-column::-webkit-scrollbar {
width: 0;
height: 0;
}