#idd_notABot .material-icons {
  display: inline-flex;
  justify-content: center;
  border: solid 2px;
  border-radius: 0.25em;
  /* om zelfde grootte te laten hebben als 'kale' checkbox */
  width: 0.8em;
  /* om zelfde grootte te laten hebben als 'kale' checkbox */
  height: 0.8em;    
  margin: 0 10px 0 0;
  background-color: transparent;
  color: white;
  font-weight: 600;
  /* om verticaal uit te lijnen zodat vinkje niet border raakt */
  line-height: 0.8; 
  cursor: pointer;
  transition: all .2s ease-in-out 0s;
  border-color: var(--isHumanBorderColor, hsl(0, 0%, 50%));
}

#idd_notABot .material-icons:hover {
  border-color: var(--isHumanBorderColor, hsl(0, 0%, 50%));
}

/* hier moeten meer dingen bij als je bv ook <div> wilt meegeven aan htCreateElements */
li#idd_notABot, span#idd_notABot {
  align-items: center;
  display: flex;
  margin: 0;
  flex-direction: row;
}



#idd_notABot .isHuman {
  border-color: var(--isHumanBorderColor, hsl(0, 0%, 60%));

  /* 
  dit moet CSS4 system color AccentColor zijn ipv common_color--blue maar dat snapt Chrome niet, 
  die maakt er wit van, ook met diverse workarounds. voorlopig maar opgegeven.
  */
  background-color: var(--isHumanBackgroundColor, var(--common_color--blue, blue));
  padding: 0;
}

#idd_notABot .material-icons.throbber {
  border: none;
  color: unset;
  width: 1em;
  height: 1em;    
  line-height: 1; 
  
  animation: spin 2s linear infinite;
}

@keyframes spin {

  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
  
}