.tab{
    background: linear-gradient(145deg, #f3e2c7, #e6d2b5);
    color: #2d1b1b !important;
    padding: 8px 16px;              
    border-radius: 8px 8px 0 0;     
    font-weight: 600;
    font-size: 0.9rem;              
    box-shadow: 
        0 -2px 6px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.5);
    transform: translateY(-2px);    
    position: relative;
}


.create-character-page {
  min-height: 100vh;
}


.page-center {
  min-height: calc(100vh - 90px); 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}


@media (max-width: 576px) {
  .page-center {
    padding: 1.25rem 0.75rem;
  }
}

:root { --global-nav-height: 86px; }

.sub-navbar {
  position: sticky;
  top: var(--global-nav-height);
  z-index: 1050;
}

.content{
    border: 2px solid rgb(128, 60, 11);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;

    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;

    overflow-x: hidden;
}

/* This is old css from character_view */
.character-container{
    background-color: rgb(235, 224, 199);
    margin: 20px;
    height: 600px;
    border: 3px solid rgb(163, 136, 77);
    position: relative;
}

.character-container .header{
    background-color: rgb(23,46,37);
    position: absolute;
    width: 100%;
    height: 50px;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
}

.character-container .header h1{
    font-size: 25px;
}

.character-container .header button{
   color: white;
   background-color: rgb(26, 56, 45);
   border: 1px solid rgb(163, 136, 77);
   border-radius: 3px;
   padding: 5px 10px;
   position: absolute;
   right: 20px;
   cursor: pointer;
}

.character-container .header button:hover{
    background-color: rgb(31, 68, 55);
}

.filter-container{
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.search-bar{
   margin-left: 26px;
   margin-top: 5px; 
   border: 2px solid rgb(163, 136, 77);
    background: black url("../personal_icons/search.svg") no-repeat 1px center;
    background-size: 25px;
    background-color:  rgb(235, 224, 199);
    padding-left: 35px;
    height: 25px
}

.search-bar:focus {
  background: none;
  padding-left: 10px;
}

.filter-container img{
    width: 30px;
    margin-right: 8px;
}

.filter-container span{
    position: relative;
    margin-right: 40px;
}

.character-box{
    margin-top: 30px;
    margin-left: 15px;
    margin-right: 15px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px; 
    justify-items: center; 
}

.character-card{
    border: 2px solid rgb(163, 136, 77);
    width: 200px;
    height: 350px;
    
}

.character-card .character-image{
    background-color: black;
    width: 100%;
    height: 50%;
}

.character-card .character-body{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.character-body h1{
    font-size: 20px;
    margin-top: 5px;
}

.character-body p{
    font-size: 16px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.character-info{.character-box {
        margin-top: 30px;
        margin-left: 15px;
        margin-right: 15px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        justify-items: center;
    }
    display: flex;
    flex-direction: row !important;
    align-items: center;
}

.character-info p{
    font-size: 17px;
    margin: 3px
}

.character-body button{
    color: white;
   background-color: rgb(26, 56, 45);
   border: 2px solid rgb(163, 136, 77);
   border-radius: 10px;
   padding: 10px 10px;
   cursor: pointer;
   font-size: 14px;
}

.character-body button:hover{
    background-color: rgb(31, 68, 55);
}

.character-card:hover{
    box-shadow:0 0 10px 8px darkolivegreen;
}

.class-info-box {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}