.w-10-pct{
      width: 10%;
    }
  
    .w-1{
      width: calc(var(--px-unit) * 1);
    }
  
    .w-1m{
      width: calc(var(--px-min-unit) * 1);
    }
  
    .w-1x{
      width: calc(var(--px-unit) * 1 * 10);
    }
  
    .w-1mx{
      width: calc(var(--px-min-unit) * 1 * 10);
    }
  
    .w-1mxx{
      width: calc(var(--px-min-unit) * 1 * 100);
    }
  
    .w--1{
      width: calc(var(--px-unit) * 1 * -1);
    }
  
    .w--1m{
      width: calc(var(--px-min-unit) * 1 * -1);
    }
  
    .w--1x{
      width: calc(var(--px-unit) * 1 * 10 * -1);
    }
  
    .w--1mx{
      width: calc(var(--px-min-unit) * 1 * 10 * -1);
    }
  
    .w--1mxx{
      width: calc(var(--px-min-unit) * 1 * 100 * -1);
    }
  
    .w-20-pct{
      width: 20%;
    }
  
    .w-2{
      width: calc(var(--px-unit) * 2);
    }
  
    .w-2m{
      width: calc(var(--px-min-unit) * 2);
    }
  
    .w-2x{
      width: calc(var(--px-unit) * 2 * 10);
    }
  
    .w-2mx{
      width: calc(var(--px-min-unit) * 2 * 10);
    }
  
    .w-2mxx{
      width: calc(var(--px-min-unit) * 2 * 100);
    }
  
    .w--2{
      width: calc(var(--px-unit) * 2 * -1);
    }
  
    .w--2m{
      width: calc(var(--px-min-unit) * 2 * -1);
    }
  
    .w--2x{
      width: calc(var(--px-unit) * 2 * 10 * -1);
    }
  
    .w--2mx{
      width: calc(var(--px-min-unit) * 2 * 10 * -1);
    }
  
    .w--2mxx{
      width: calc(var(--px-min-unit) * 2 * 100 * -1);
    }
  
    .w-30-pct{
      width: 30%;
    }
  
    .w-3{
      width: calc(var(--px-unit) * 3);
    }
  
    .w-3m{
      width: calc(var(--px-min-unit) * 3);
    }
  
    .w-3x{
      width: calc(var(--px-unit) * 3 * 10);
    }
  
    .w-3mx{
      width: calc(var(--px-min-unit) * 3 * 10);
    }
  
    .w-3mxx{
      width: calc(var(--px-min-unit) * 3 * 100);
    }
  
    .w--3{
      width: calc(var(--px-unit) * 3 * -1);
    }
  
    .w--3m{
      width: calc(var(--px-min-unit) * 3 * -1);
    }
  
    .w--3x{
      width: calc(var(--px-unit) * 3 * 10 * -1);
    }
  
    .w--3mx{
      width: calc(var(--px-min-unit) * 3 * 10 * -1);
    }
  
    .w--3mxx{
      width: calc(var(--px-min-unit) * 3 * 100 * -1);
    }
  
    .w-40-pct{
      width: 40%;
    }
  
    .w-4{
      width: calc(var(--px-unit) * 4);
    }
  
    .w-4m{
      width: calc(var(--px-min-unit) * 4);
    }
  
    .w-4x{
      width: calc(var(--px-unit) * 4 * 10);
    }
  
    .w-4mx{
      width: calc(var(--px-min-unit) * 4 * 10);
    }
  
    .w-4mxx{
      width: calc(var(--px-min-unit) * 4 * 100);
    }
  
    .w--4{
      width: calc(var(--px-unit) * 4 * -1);
    }
  
    .w--4m{
      width: calc(var(--px-min-unit) * 4 * -1);
    }
  
    .w--4x{
      width: calc(var(--px-unit) * 4 * 10 * -1);
    }
  
    .w--4mx{
      width: calc(var(--px-min-unit) * 4 * 10 * -1);
    }
  
    .w--4mxx{
      width: calc(var(--px-min-unit) * 4 * 100 * -1);
    }
  
    .w-50-pct{
      width: 50%;
    }
  
    .w-5{
      width: calc(var(--px-unit) * 5);
    }
  
    .w-5m{
      width: calc(var(--px-min-unit) * 5);
    }
  
    .w-5x{
      width: calc(var(--px-unit) * 5 * 10);
    }
  
    .w-5mx{
      width: calc(var(--px-min-unit) * 5 * 10);
    }
  
    .w-5mxx{
      width: calc(var(--px-min-unit) * 5 * 100);
    }
  
    .w--5{
      width: calc(var(--px-unit) * 5 * -1);
    }
  
    .w--5m{
      width: calc(var(--px-min-unit) * 5 * -1);
    }
  
    .w--5x{
      width: calc(var(--px-unit) * 5 * 10 * -1);
    }
  
    .w--5mx{
      width: calc(var(--px-min-unit) * 5 * 10 * -1);
    }
  
    .w--5mxx{
      width: calc(var(--px-min-unit) * 5 * 100 * -1);
    }
  
    .w-60-pct{
      width: 60%;
    }
  
    .w-6{
      width: calc(var(--px-unit) * 6);
    }
  
    .w-6m{
      width: calc(var(--px-min-unit) * 6);
    }
  
    .w-6x{
      width: calc(var(--px-unit) * 6 * 10);
    }
  
    .w-6mx{
      width: calc(var(--px-min-unit) * 6 * 10);
    }
  
    .w-6mxx{
      width: calc(var(--px-min-unit) * 6 * 100);
    }
  
    .w--6{
      width: calc(var(--px-unit) * 6 * -1);
    }
  
    .w--6m{
      width: calc(var(--px-min-unit) * 6 * -1);
    }
  
    .w--6x{
      width: calc(var(--px-unit) * 6 * 10 * -1);
    }
  
    .w--6mx{
      width: calc(var(--px-min-unit) * 6 * 10 * -1);
    }
  
    .w--6mxx{
      width: calc(var(--px-min-unit) * 6 * 100 * -1);
    }
  
    .w-70-pct{
      width: 70%;
    }
  
    .w-7{
      width: calc(var(--px-unit) * 7);
    }
  
    .w-7m{
      width: calc(var(--px-min-unit) * 7);
    }
  
    .w-7x{
      width: calc(var(--px-unit) * 7 * 10);
    }
  
    .w-7mx{
      width: calc(var(--px-min-unit) * 7 * 10);
    }
  
    .w-7mxx{
      width: calc(var(--px-min-unit) * 7 * 100);
    }
  
    .w--7{
      width: calc(var(--px-unit) * 7 * -1);
    }
  
    .w--7m{
      width: calc(var(--px-min-unit) * 7 * -1);
    }
  
    .w--7x{
      width: calc(var(--px-unit) * 7 * 10 * -1);
    }
  
    .w--7mx{
      width: calc(var(--px-min-unit) * 7 * 10 * -1);
    }
  
    .w--7mxx{
      width: calc(var(--px-min-unit) * 7 * 100 * -1);
    }
  
    .w-80-pct{
      width: 80%;
    }
  
    .w-8{
      width: calc(var(--px-unit) * 8);
    }
  
    .w-8m{
      width: calc(var(--px-min-unit) * 8);
    }
  
    .w-8x{
      width: calc(var(--px-unit) * 8 * 10);
    }
  
    .w-8mx{
      width: calc(var(--px-min-unit) * 8 * 10);
    }
  
    .w-8mxx{
      width: calc(var(--px-min-unit) * 8 * 100);
    }
  
    .w--8{
      width: calc(var(--px-unit) * 8 * -1);
    }
  
    .w--8m{
      width: calc(var(--px-min-unit) * 8 * -1);
    }
  
    .w--8x{
      width: calc(var(--px-unit) * 8 * 10 * -1);
    }
  
    .w--8mx{
      width: calc(var(--px-min-unit) * 8 * 10 * -1);
    }
  
    .w--8mxx{
      width: calc(var(--px-min-unit) * 8 * 100 * -1);
    }
  
    .w-90-pct{
      width: 90%;
    }
  
    .w-9{
      width: calc(var(--px-unit) * 9);
    }
  
    .w-9m{
      width: calc(var(--px-min-unit) * 9);
    }
  
    .w-9x{
      width: calc(var(--px-unit) * 9 * 10);
    }
  
    .w-9mx{
      width: calc(var(--px-min-unit) * 9 * 10);
    }
  
    .w-9mxx{
      width: calc(var(--px-min-unit) * 9 * 100);
    }
  
    .w--9{
      width: calc(var(--px-unit) * 9 * -1);
    }
  
    .w--9m{
      width: calc(var(--px-min-unit) * 9 * -1);
    }
  
    .w--9x{
      width: calc(var(--px-unit) * 9 * 10 * -1);
    }
  
    .w--9mx{
      width: calc(var(--px-min-unit) * 9 * 10 * -1);
    }
  
    .w--9mxx{
      width: calc(var(--px-min-unit) * 9 * 100 * -1);
    }
  
    .w-100-pct{
      width: 100%;
    }
  
    .w-10{
      width: calc(var(--px-unit) * 10);
    }
  
    .w-10m{
      width: calc(var(--px-min-unit) * 10);
    }
  
    .w-10x{
      width: calc(var(--px-unit) * 10 * 10);
    }
  
    .w-10mx{
      width: calc(var(--px-min-unit) * 10 * 10);
    }
  
    .w-10mxx{
      width: calc(var(--px-min-unit) * 10 * 100);
    }
  
    .w--10{
      width: calc(var(--px-unit) * 10 * -1);
    }
  
    .w--10m{
      width: calc(var(--px-min-unit) * 10 * -1);
    }
  
    .w--10x{
      width: calc(var(--px-unit) * 10 * 10 * -1);
    }
  
    .w--10mx{
      width: calc(var(--px-min-unit) * 10 * 10 * -1);
    }
  
    .w--10mxx{
      width: calc(var(--px-min-unit) * 10 * 100 * -1);
    }
  
     .w-0{
       width: 0;
     }
   
     .w-auto{
       width: auto;
     }