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