span.check__container{ display: inline-block; height: 34px; width: 34px; margin-right:10px; vertical-align: middle; }

.checkmark { display: block; width: 32px; height: 32px; }
.checkmark__circle { stroke-dasharray: 0 101; stroke-width: 2; stroke: #acd373; fill: none;  }
.checkmark__check {  stroke-dasharray: 0 48; stroke-width: 2; stroke: #acd373;  fill: none; }

#apiLibrairies_floor2 .checkmark__circle { stroke: #60a43a; }
#apiLibrairies_floor2 .checkmark__check {  stroke: #60a43a; }

#oem_floor3 .checkmark__circle{stroke:#f59331}
#oem_floor3 .checkmark__check{stroke:#f59331}

#smartHome_floor3 .checkmark__circle{stroke:#f59331}
#smartHome_floor3 .checkmark__check{stroke:#f59331}

#smartBuilding_floor3 .checkmark__circle{stroke:#f59331}
#smartBuilding_floor3 .checkmark__check{stroke:#f59331}


.active .checkmark__circle{ animation: stroke 1s ease-out 0.6s both; }
.active .checkmark__check { animation: strokecheck 1s ease-out 2s both; }

@keyframes stroke {
  100% {
    stroke-dasharray: 101 101;
  }
}

@keyframes strokecheck {
  100% {
    stroke-dasharray: 48 48;
  }
}