#squad .window_content{

    .character_grid {
        .character_grid_characters {
        background-color: brown !important;  
        }
    }
}

.characters_grid {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-left: 9rem;
    
 

    h1 {
      padding: 0 .25em;
      font-size: 1.6rem;
      text-transform: uppercase;
      color: var(--color-mainDark);
      background-color: var(--color-mainLight);
      height: 2rem;
    }

    .characters_grid_characters {
      height: 120%;
      --color-border: #B8AA86;
      background-color: var(--color-card);
      overflow-x: none;
      overflow-y: scroll;    
      display: grid;
      justify-content: center;
      align-items: center;
    }

    .li-character{
        display: grid;
        place-content: center;
        background-color: var(--color-mainDark);
    }

    .li-character:hover {
        background-color: rgb(181, 169, 152); 
        background-color: var(--color-mainLight);
        cursor: url(zwaard.png), pointer;
    }

    img{
        width: 150px;
    }
  }

  .characters_grid:has( ul li button img) ul {
    height: 400px;
    border: unset;
    
  }

  .chooseyourcharacterbutton{
    margin-left: 5em;
    margin-right: 5em;
    padding: 0;
  }
  
  .character_grid_characters {
    overflow-y: scroll;
  }