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