:root{
  --wg-color-white:#ffffff;
  --wg-color-black:#000000;
  --wg-color-black-0:#F2F2F2;
  --wg-color-black-1:#D9D9D9;
  --wg-color-black-2:#BFBFBF;

  --wg-color-primary:#4c6ac5;
  --wg-color-primary-light-2:#309BFF;
  --wg-color-primary-light-3:#49A7FF;
  --wg-color-primary-light-4:#DAEEFF;
  --wg-color-primary-light-5:#F2F9FF;
  --wg-color-primary-dark-2:#0A76D9;
  --wg-color-primary-dark-3:#0968BF;

  --wg-color-warning:#E7C100;
  --wg-color-warning-light-2:#EAC226;
  --wg-color-warning-light-3:#EDCA40;
  --wg-color-warning-dark-2:#C59D00;
  --wg-color-warning-dark-3:#AD8A00;

  --wg-color-error:#EC2123;
  --wg-color-error-light-2:#EE4243;
  --wg-color-error-light-3:#F1585A;
  --wg-color-error-dark-2:#C91C1E;
  --wg-color-error-dark-3:#B1191A;

  --wg-color-success:#0AC32D;
  --wg-color-success-light-2:#2ECC4C;
  --wg-color-success-light-3:#47D261;
  --wg-color-success-dark-2:#09A626;
  --wg-color-success-dark-3:#089222;

  --wg-mask-color:rgba(255, 255, 255, 0.3);

  --wg-small-height: 24px;
  --wg-height: 32px;
  --wg-large-height: 40px;
  
}

@keyframes rotating {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}