/*@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*/

.labelCheck{
  position: relative;
  height: 30px;
  width: 30px;
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  border-left-color: #64AACF;
  animation: rotate 1.2s linear infinite;
}
@keyframes rotate {
  50%{
    border-left-color: #64AACF;
  }
  75%{
    border-left-color: #e67e22;
  }
  100%{
    transform: rotate(360deg);
  }
}
.labelCheck .check-icon{
  display: none;
}
.labelCheck .check-icon:after{
  position: absolute;
  content: "";
  top: 50%;
  left: 2px;
  transform: scaleX(-1) rotate(135deg);
  height: 28px;
  width: 14px;
  border-top: 4px solid #1287C6;
  border-right: 4px solid #1287C6;
  transform-origin: left top;
  animation: check-icon 1.5s ease;
}
@keyframes check-icon {
  0%{
    height: 0;
    width: 0;
    opacity: 1;
  }
  20%{
    height: 0;
    width: 14px;
    opacity: 1;
  }
  50%{
    height: 28px;
    width: 14px;
    opacity: 1;
  }
  100%{
    height: 28px;
    width: 14px;
    opacity: 1;
  }
}
input{
  display: none; 
}
input:checked ~ label .check-icon{
  display: block;
}
input:checked ~ label{
  animation: none;
  border-color: #183647;
  transition: border 1.5s ease-out;
}