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