.search-results {
    min-height: 20em;
}


form#search-names{
    
    border: 1px solid #ccc;
    padding: 0.75em 0.5em;
    box-sizing: border-box;
    display: grid;
    border-radius: 2em;
    gap: 0.5em;
    grid-template-columns: 9fr 1fr 1fr;
    align-items: center;
    background-color: white;
    
}



label
    {display: None;}


   
div#formgroup > *
    { 
    
        width: 100%;
        
        box-sizing: border-box;
        font: inherit;
        background-color: var(--paperbeigelight);
        height: 2em;
        border: None;
    &:focus
    {outline:none;}
    }
  
#search-names:has(*:focus) {
  
  border: 1px solid white;
  box-shadow: 0 0 0 3px rgb(var(--expertbluergb) / 0.4); /*rgba(74, 144, 226, 0.3)*/
}

input,
input:focus {
    border: none;
    outline: none;
    box-shadow: none;
    font-size:1em;
}


input#fword::placeholder {
  color: #999; /* standaard placeholderkleur */
  transition: opacity 0.3s;
}

input#fword:focus::placeholder {
  opacity: 0; /* verdwijnt bij focus */
}




form#search-names button {
    all: unset;
    background-color:white;
    color:#999;
    pointer-events: none; /* maakt de knop niet klikbaar */
    min-width: 55px;
    transition: color 0.5s;
    margin:0em;
   cursor: pointer;
   
    }

form#search-names button svg {height: 2em; width: 2em;}
    

/* knop actief als input een waarde heeft */
#search-names:has(input:valid) button {
  pointer-events: auto;
  color: rgb(var(--expertbluergb) / 0.6)
}    


#search-names:has(input:valid) button:hover {
        color: var(--expertblue); 
      }
    
    
form#search-names #fword {
    margin-left: 0.5em;
    
    
}

form#search-names #ftype {
    background-color: white;
    font-size:1em;
    border:none;
    min-width: 11ch;
}

form#search-names #ftype:focus {
    border: none;
    outline: none;
    box-shadow: none;
}


/*een animatie voor tijdens het wachten */
.loader {
    margin: 1em;
    
  width: calc(6*30px);
  height: 50px;
  display: None;
  color: var(--paperbeige);
  filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
  clip-path: inset(0 100% 0 0);
  animation: l11 2s infinite steps(7);
}
.loader:before {
  content: "";
  width: 30px;
  height: 25px;
  background: currentColor;
  clip-path: polygon(0 50%,30% 40%,100% 0,60% 40%,100% 50%,60% 60%,100% 100%,30% 60%);
}
@keyframes l11 {
  100% {clip-path: inset(0 -30px 0 0)}
}




ol#resultList {
    list-style-type: decimal;
    
}

ol#resultList li::marker {
    color: darkgrey;
}


ol#resultList li::after {
    font-size: small;
    padding-left: 0.6ch;
    content: attr(data-score);
    color: darkgrey;
}