#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);
  }
  
}

/**
 * Material Icons License
 * https://iidesk.com/fonts/materialicons/LICENSE.txt
 * http://www.apache.org/licenses/LICENSE-2.0.txt
 *
 * Material Icons Guide
 * https://developers.google.com/fonts/docs/material_icons
 *
 * Material Icons Overview
 * https://fonts.google.com/icons
 *
 * LET OP!
 * Het is ook mogelijk de class te verlengen met extra woorden en zo makkelijk te specificeren:
 * <span class='material-icons_home'>home</span>
 **/

@font-face {
  font-family: 'materialicons';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialicons-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialicons-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconsoutlined';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialiconsoutlined-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconsoutlined-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconsround';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialiconsround-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconsround-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconssharp';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/materialiconssharp-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconssharp-regular-webfont.woff)  format('woff');
}

@font-face {
  font-family: 'materialiconstwotone';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/materialicons/MaterialIconsTwoTone-Regular.otf)           format('opentype'),
       url(/fonts/materialicons/materialiconstwotone-regular-webfont.woff2) format('woff2'),
       url(/fonts/materialicons/materialiconstwotone-regular-webfont.woff)  format('woff');
}

/**
 * Standaard: <span class='material-icons'>home</span>
 * Specifiek: <span class='material-icons_home'>home</span>
**/
[class^="material-icons"] {
  font-family: 'materialicons';
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/**
 * Standaard: <span class='material-icons-outlined'>home</span>
 * Specifiek: <span class='material-icons-outlined_home'>home</span>
**/
[class^="material-icons-outlined"] {
  font-family: 'materialiconsoutlined';
}

/**
 * Standaard: <span class='material-icons-round'>home</span>
 * Specifiek: <span class='material-icons-round_home'>home</span>
**/
[class^="material-icons-round"] {
  font-family: 'materialiconsround';
}

/**
 * Standaard: <span class='material-icons-sharp'>home</span>
 * Specifiek: <span class='material-icons-sharp_home'>home</span>
**/
[class^="material-icons-sharp"] {
  font-family: 'materialiconssharp';
}

/**
 * Standaard: <span class='material-icons-two-tone'>home</span>
 * Specifiek: <span class='material-icons-two-tone_home'>home</span>
**/
[class^="material-icons-two-tone"] {
  font-family: 'materialiconstwotone';
}

//# sourceMappingURL=concat.css.map.json