﻿span.Checkbox {
  display: block;
  padding: 0.1em 1em;
  /* colors and padding to make it look nice */
  /*background-color: $back-color;*/
  color: #aaa;
  /*font-family: sans-serif;*/
  font-weight: 100;
  font-size: 1.25em; }
  span.Checkbox .Checkbox-target {
    font-family: 'Material Icons';
    /*FontAwesome;*/ }
  span.Checkbox input[type='checkbox'].Checkbox {
    position: relative;
    display: none;
    /* hide the real checkbox */
    align-items: center;
    justify-content: center; }
  span.Checkbox input[type='checkbox'].Checkbox + span.Checkbox-target:after {
    content: "\ef4a";
    /* In fontawesome, is an open circle */
    color: rgba(255, 0, 0, 0.2); }
  span.Checkbox input[type='checkbox'].Checkbox:checked + span.Checkbox-target:after {
    content: "\e86c";
    /* fontawesome checked circle  */
    color: rgba(0, 255, 0, 0.9); }
