.checkbox {
  display: inline-block;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  color: #354042; }

.input {
  display: none; }

.mixed > .label, .checked > .label, .disabled > .label, .label, .unchecked > .label {
  display: inline-block;
  position: relative;
  margin-left: 1.5rem;
  padding-left: 1.3rem;
  font-size: 1rem; }
  .mixed > .label::before, .checked > .label::before, .disabled > .label::before, .label::before, .unchecked > .label::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -6px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #576265;
    cursor: pointer; }
  .label:hover::before {
    box-shadow: 0 0 0 1px #3CAFDA; }
  .mixed > .label::after, .checked > .label::after, .disabled > .label::after, .label::after, .unchecked > .label::after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -6px;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    border-radius: 100%;
    transform: scale(0); }

.mixed > .label:hover::before, .checked > .label:hover::before {
  box-shadow: 0 0 0 2px #3CAFDA; }

.mixed > .label::before, .checked > .label::before {
  box-shadow: 0 0 0 2px #3CAFDA; }

.mixed > .label::after, .checked > .label::after {
  animation: ub20bd653 300ms forwards ease-out;
  background-color: #3CAFDA;
  cursor: pointer; }

@keyframes ub20bd653 {
  0% {
    width: 1rem;
    height: 1rem;
    opacity: 0;
    background-image: none; }
  60% {
    opacity: 0.3;
    transform: scale(2); }
  100% {
    opacity: 1;
    border: none;
    background-image: url("data:image/svg+xml;base64, PHN2ZyBpZD0iY2hlY2siIGNsYXNzPSJtYXJrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNSAtMjUgNTAgNTAiIHdpZHRoPSI1MCI+CiAgPHBhdGggY2xhc3M9ImNoZWNrbWFya19fY2hlY2siIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNnB4IiBkPSJNLTE1IDAgLTQgMTAgMTIgLTkiLz4KPC9zdmc+");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1); } }

.mixed > .label::after {
  animation: ufc2a7032 300ms forwards ease-out;
  background-color: #3CAFDA;
  cursor: pointer; }

@keyframes ufc2a7032 {
  0% {
    width: 1rem;
    height: 1rem;
    opacity: 0;
    background-image: none; }
  60% {
    opacity: 0.3;
    transform: scale(2); }
  100% {
    opacity: 1;
    border: none;
    background-image: url("data:image/svg+xml;base64, PHN2ZyBpZD0iaHlwaGVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNSAtMjUgNTAgNTAiIHdpZHRoPSI1MCI+CiAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2cHgiIGQ9Ik0gLTE1IDAgMTUgMCIvPgo8L3N2Zz4=");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1); } }

.disabled > .label {
  color: #CED4DA; }
  .disabled > .label:hover::before {
    box-shadow: 0 0 0 1px #CED4DA; }
  .disabled > .label::before {
    box-shadow: 0 0 0 1px #CED4DA;
    cursor: not-allowed; }
  .disabled > .label::after {
    animation: none;
    background-color: transparent;
    cursor: not-allowed; }

.checked.disabled > .label::after {
  opacity: 1;
  border: none;
  background-image: url("data:image/svg+xml;base64, PHN2ZyBpZD0iY2hlY2siIGNsYXNzPSJtYXJrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNSAtMjUgNTAgNTAiIHdpZHRoPSI1MCI+CiAgPHBhdGggY2xhc3M9ImNoZWNrbWFya19fY2hlY2siIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNnB4IiBkPSJNLTE1IDAgLTQgMTAgMTIgLTkiLz4KPC9zdmc+");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(1);
  background-color: #CED4DA; }

.mixed.disabled > .label::after {
  opacity: 1;
  border: none;
  background-image: url("data:image/svg+xml;base64, PHN2ZyBpZD0iaHlwaGVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yNSAtMjUgNTAgNTAiIHdpZHRoPSI1MCI+CiAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI2cHgiIGQ9Ik0gLTE1IDAgMTUgMCIvPgo8L3N2Zz4=");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(1);
  background-color: #CED4DA; }
