.iconSVG{
  height: 24px;
  width: 24px;
  vertical-align: middle;
}
.iconSVGTab {
	height: 18px;
	width: 18px;
	vertical-align: middle;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/*-------- CHROME WORKAROUND --------*/
.check {
  stroke-dasharray: 1200;
  stroke-dashoffset: -1200;
  animation-name: dash;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  /*animation-play-state: paused;*/ /*running*/
  stroke:#39A367;
  stroke-width:30;
}

.x {
  animation: dash 1s ease-in-out forwards;
  stroke: #F94848;
  stroke-width: 30;
  stroke-dasharray: 2000;
  stroke-dashoffset: -2000;
}
/*----------------------------------*/

.check path{
  stroke-dasharray: 1200;
  stroke-dashoffset: -1200;
  animation-name: dash;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  /*animation-play-state: paused;*/ /*running*/
  stroke:#39A367;
  stroke-width:30;
}

.x path {
  animation: dash 1s ease-in-out forwards;
  stroke: #F94848;
  stroke-width: 30;
  stroke-dasharray: 2000;
  stroke-dashoffset: -2000;
}

/*-------- CHROME WORKAROUND --------*/
.loop {
  stroke: #65c4dc;
  fill: none;
  stroke-width: 60;
  animation: spin 1s infinite linear;
}
/*----------------------------------*/

.loop #outer{
  stroke: #65c4dc;
  fill: none;
  stroke-width: 60;
  animation: spin 1s infinite linear;
  transform-origin: 200px 200px;
}

.white {
	stroke: #FFF;
}

.white #outer{
	stroke: #FFF;
}

.black {
	stroke: #333;
}

.black #outer{
	stroke: #333;
}

@keyframes spin {

  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.light {
	stroke: #514E4E;
	stroke-width: 10;
}

.redlight {
	fill: #F66464;
}

.greenlight {
	fill: #72D148;
}

.yellowlight {
	fill: #FCF22C;
}