coer-elements 2.0.17 → 2.0.18

package/styles/coer-elements.css

@@ -3162,102 +3162,353 @@ aside.toast-container > * {
   gap: 10px;
 }
 
-.flex-wrap-item-50 {
+.flex-item-50px {
+  flex-basis: 50px;
+}
+
+.flex-item-grow-50px {
   flex-grow: 1;
   flex-basis: 50px;
 }
 
-.flex-wrap-item-100 {
+.flex-item-10 {
+  flex-basis: 10%;
+}
+
+.flex-item-100px {
+  flex-basis: 100px;
+}
+
+.flex-item-grow-10 {
+  flex-grow: 1;
+  flex-basis: 10%;
+}
+
+.flex-item-grow-100px {
   flex-grow: 1;
   flex-basis: 100px;
 }
 
-.flex-wrap-item-150 {
+.flex-item-150px {
+  flex-basis: 150px;
+}
+
+.flex-item-grow-150px {
   flex-grow: 1;
   flex-basis: 150px;
 }
 
-.flex-wrap-item-200 {
+.flex-item-15 {
+  flex-basis: 10%;
+}
+
+.flex-item-grow-15 {
+  flex-grow: 1;
+  flex-basis: 15%;
+}
+
+.flex-item-20 {
+  flex-basis: 20%;
+}
+
+.flex-item-200px {
+  flex-basis: 200px;
+}
+
+.flex-item-grow-20 {
+  flex-grow: 1;
+  flex-basis: 20%;
+}
+
+.flex-item-grow-200px {
   flex-grow: 1;
   flex-basis: 200px;
 }
 
-.flex-wrap-item-250 {
+.flex-item-250px {
+  flex-basis: 250px;
+}
+
+.flex-item-grow-250px {
   flex-grow: 1;
   flex-basis: 250px;
 }
 
-.flex-wrap-item-300 {
+.flex-item-25 {
+  flex-basis: 20%;
+}
+
+.flex-item-grow-25 {
   flex-grow: 1;
+  flex-basis: 25%;
+}
+
+.flex-item-30 {
+  flex-basis: 30%;
+}
+
+.flex-item-300px {
   flex-basis: 300px;
 }
 
-.flex-wrap-item-350 {
+.flex-item-grow-30 {
+  flex-grow: 1;
+  flex-basis: 30%;
+}
+
+.flex-item-grow-300px {
   flex-grow: 1;
+  flex-basis: 300px;
+}
+
+.flex-item-350px {
   flex-basis: 350px;
 }
 
-.flex-wrap-item-400 {
+.flex-item-grow-350px {
   flex-grow: 1;
+  flex-basis: 350px;
+}
+
+.flex-item-35 {
+  flex-basis: 30%;
+}
+
+.flex-item-grow-35 {
+  flex-grow: 1;
+  flex-basis: 35%;
+}
+
+.flex-item-40 {
+  flex-basis: 40%;
+}
+
+.flex-item-400px {
   flex-basis: 400px;
 }
 
-.flex-wrap-item-450 {
+.flex-item-grow-40 {
   flex-grow: 1;
+  flex-basis: 40%;
+}
+
+.flex-item-grow-400px {
+  flex-grow: 1;
+  flex-basis: 400px;
+}
+
+.flex-item-450px {
   flex-basis: 450px;
 }
 
-.flex-wrap-item-500 {
+.flex-item-grow-450px {
   flex-grow: 1;
+  flex-basis: 450px;
+}
+
+.flex-item-45 {
+  flex-basis: 40%;
+}
+
+.flex-item-grow-45 {
+  flex-grow: 1;
+  flex-basis: 45%;
+}
+
+.flex-item-50 {
+  flex-basis: 50%;
+}
+
+.flex-item-500px {
   flex-basis: 500px;
 }
 
-.flex-wrap-item-550 {
+.flex-item-grow-50 {
   flex-grow: 1;
+  flex-basis: 50%;
+}
+
+.flex-item-grow-500px {
+  flex-grow: 1;
+  flex-basis: 500px;
+}
+
+.flex-item-550px {
   flex-basis: 550px;
 }
 
-.flex-wrap-item-600 {
+.flex-item-grow-550px {
+  flex-grow: 1;
+  flex-basis: 550px;
+}
+
+.flex-item-55 {
+  flex-basis: 50%;
+}
+
+.flex-item-grow-55 {
+  flex-grow: 1;
+  flex-basis: 55%;
+}
+
+.flex-item-60 {
+  flex-basis: 60%;
+}
+
+.flex-item-600px {
+  flex-basis: 600px;
+}
+
+.flex-item-grow-60 {
+  flex-grow: 1;
+  flex-basis: 60%;
+}
+
+.flex-item-grow-600px {
   flex-grow: 1;
   flex-basis: 600px;
 }
 
-.flex-wrap-item-650 {
+.flex-item-650px {
+  flex-basis: 650px;
+}
+
+.flex-item-grow-650px {
   flex-grow: 1;
   flex-basis: 650px;
 }
 
-.flex-wrap-item-700 {
+.flex-item-65 {
+  flex-basis: 60%;
+}
+
+.flex-item-grow-65 {
   flex-grow: 1;
+  flex-basis: 65%;
+}
+
+.flex-item-70 {
+  flex-basis: 70%;
+}
+
+.flex-item-700px {
   flex-basis: 700px;
 }
 
-.flex-wrap-item-750 {
+.flex-item-grow-70 {
+  flex-grow: 1;
+  flex-basis: 70%;
+}
+
+.flex-item-grow-700px {
   flex-grow: 1;
+  flex-basis: 700px;
+}
+
+.flex-item-750px {
   flex-basis: 750px;
 }
 
-.flex-wrap-item-800 {
+.flex-item-grow-750px {
+  flex-grow: 1;
+  flex-basis: 750px;
+}
+
+.flex-item-75 {
+  flex-basis: 70%;
+}
+
+.flex-item-grow-75 {
+  flex-grow: 1;
+  flex-basis: 75%;
+}
+
+.flex-item-80 {
+  flex-basis: 80%;
+}
+
+.flex-item-800px {
+  flex-basis: 800px;
+}
+
+.flex-item-grow-80 {
+  flex-grow: 1;
+  flex-basis: 80%;
+}
+
+.flex-item-grow-800px {
   flex-grow: 1;
   flex-basis: 800px;
 }
 
-.flex-wrap-item-850 {
+.flex-item-850px {
+  flex-basis: 850px;
+}
+
+.flex-item-grow-850px {
   flex-grow: 1;
   flex-basis: 850px;
 }
 
-.flex-wrap-item-900 {
+.flex-item-85 {
+  flex-basis: 80%;
+}
+
+.flex-item-grow-85 {
   flex-grow: 1;
+  flex-basis: 85%;
+}
+
+.flex-item-90 {
+  flex-basis: 90%;
+}
+
+.flex-item-900px {
   flex-basis: 900px;
 }
 
-.flex-wrap-item-950 {
+.flex-item-grow-90 {
+  flex-grow: 1;
+  flex-basis: 90%;
+}
+
+.flex-item-grow-900px {
+  flex-grow: 1;
+  flex-basis: 900px;
+}
+
+.flex-item-950px {
+  flex-basis: 950px;
+}
+
+.flex-item-grow-950px {
   flex-grow: 1;
   flex-basis: 950px;
 }
 
-.flex-wrap-item-1000 {
+.flex-item-95 {
+  flex-basis: 90%;
+}
+
+.flex-item-grow-95 {
+  flex-grow: 1;
+  flex-basis: 95%;
+}
+
+.flex-item-100 {
+  flex-basis: 100%;
+}
+
+.flex-item-1000px {
+  flex-basis: 1000px;
+}
+
+.flex-item-grow-100 {
+  flex-grow: 1;
+  flex-basis: 100%;
+}
+
+.flex-item-grow-1000px {
   flex-grow: 1;
   flex-basis: 1000px;
 }
@@ -3282,6 +3533,60 @@ aside.toast-container > * {
   flex-direction: column-reverse;
 }
 
+.grid {
+  margin: 15px 30px;
+  display: grid;
+  gap: 15px;
+}
+
+.grid-columns-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.grid-columns-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-columns-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-columns-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.grid-columns-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.grid-columns-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.grid-columns-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.grid-columns-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.grid-columns-9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.grid-columns-10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.grid-columns-11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.grid-columns-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -3373,1863 +3678,1863 @@ aside.toast-container > * {
   font-weight: bold !important;
 }
 
-.padding-0 {
+.padding-0px {
   padding: 0px;
 }
 
-.padding-top-0 {
+.padding-top-0px {
   padding-top: 0px;
 }
 
-.padding-right-0 {
+.padding-right-0px {
   padding-right: 0px;
 }
 
-.padding-bottom-0 {
+.padding-bottom-0px {
   padding-bottom: 0px;
 }
 
-.padding-left-0 {
+.padding-left-0px {
   padding-left: 0px;
 }
 
-.margin-0 {
+.margin-0px {
   margin: 0px;
 }
 
-.margin-top-0 {
+.margin-top-0px {
   margin-top: 0px;
 }
 
-.margin-right-0 {
+.margin-right-0px {
   margin-right: 0px;
 }
 
-.margin-bottom-0 {
+.margin-bottom-0px {
   margin-bottom: 0px;
 }
 
-.margin-left-0 {
+.margin-left-0px {
   margin-left: 0px;
 }
 
-.top-0 {
+.top-0px {
   top: 0px;
 }
 
-.right-0 {
+.right-0px {
   right: 0px;
 }
 
-.bottom-0 {
+.bottom-0px {
   bottom: 0px;
 }
 
-.left-0 {
+.left-0px {
   left: 0px;
 }
 
-.gap-0 {
+.gap-0px {
   gap: 0px;
 }
 
-.padding-1 {
+.padding-1px {
   padding: 1px;
 }
 
-.padding-top-1 {
+.padding-top-1px {
   padding-top: 1px;
 }
 
-.padding-right-1 {
+.padding-right-1px {
   padding-right: 1px;
 }
 
-.padding-bottom-1 {
+.padding-bottom-1px {
   padding-bottom: 1px;
 }
 
-.padding-left-1 {
+.padding-left-1px {
   padding-left: 1px;
 }
 
-.margin-1 {
+.margin-1px {
   margin: 1px;
 }
 
-.margin-top-1 {
+.margin-top-1px {
   margin-top: 1px;
 }
 
-.margin-right-1 {
+.margin-right-1px {
   margin-right: 1px;
 }
 
-.margin-bottom-1 {
+.margin-bottom-1px {
   margin-bottom: 1px;
 }
 
-.margin-left-1 {
+.margin-left-1px {
   margin-left: 1px;
 }
 
-.top-1 {
+.top-1px {
   top: 1px;
 }
 
-.right-1 {
+.right-1px {
   right: 1px;
 }
 
-.bottom-1 {
+.bottom-1px {
   bottom: 1px;
 }
 
-.left-1 {
+.left-1px {
   left: 1px;
 }
 
-.gap-1 {
+.gap-1px {
   gap: 1px;
 }
 
-.padding-2 {
+.padding-2px {
   padding: 2px;
 }
 
-.padding-top-2 {
+.padding-top-2px {
   padding-top: 2px;
 }
 
-.padding-right-2 {
+.padding-right-2px {
   padding-right: 2px;
 }
 
-.padding-bottom-2 {
+.padding-bottom-2px {
   padding-bottom: 2px;
 }
 
-.padding-left-2 {
+.padding-left-2px {
   padding-left: 2px;
 }
 
-.margin-2 {
+.margin-2px {
   margin: 2px;
 }
 
-.margin-top-2 {
+.margin-top-2px {
   margin-top: 2px;
 }
 
-.margin-right-2 {
+.margin-right-2px {
   margin-right: 2px;
 }
 
-.margin-bottom-2 {
+.margin-bottom-2px {
   margin-bottom: 2px;
 }
 
-.margin-left-2 {
+.margin-left-2px {
   margin-left: 2px;
 }
 
-.top-2 {
+.top-2px {
   top: 2px;
 }
 
-.right-2 {
+.right-2px {
   right: 2px;
 }
 
-.bottom-2 {
+.bottom-2px {
   bottom: 2px;
 }
 
-.left-2 {
+.left-2px {
   left: 2px;
 }
 
-.gap-2 {
+.gap-2px {
   gap: 2px;
 }
 
-.padding-3 {
+.padding-3px {
   padding: 3px;
 }
 
-.padding-top-3 {
+.padding-top-3px {
   padding-top: 3px;
 }
 
-.padding-right-3 {
+.padding-right-3px {
   padding-right: 3px;
 }
 
-.padding-bottom-3 {
+.padding-bottom-3px {
   padding-bottom: 3px;
 }
 
-.padding-left-3 {
+.padding-left-3px {
   padding-left: 3px;
 }
 
-.margin-3 {
+.margin-3px {
   margin: 3px;
 }
 
-.margin-top-3 {
+.margin-top-3px {
   margin-top: 3px;
 }
 
-.margin-right-3 {
+.margin-right-3px {
   margin-right: 3px;
 }
 
-.margin-bottom-3 {
+.margin-bottom-3px {
   margin-bottom: 3px;
 }
 
-.margin-left-3 {
+.margin-left-3px {
   margin-left: 3px;
 }
 
-.top-3 {
+.top-3px {
   top: 3px;
 }
 
-.right-3 {
+.right-3px {
   right: 3px;
 }
 
-.bottom-3 {
+.bottom-3px {
   bottom: 3px;
 }
 
-.left-3 {
+.left-3px {
   left: 3px;
 }
 
-.gap-3 {
+.gap-3px {
   gap: 3px;
 }
 
-.padding-4 {
+.padding-4px {
   padding: 4px;
 }
 
-.padding-top-4 {
+.padding-top-4px {
   padding-top: 4px;
 }
 
-.padding-right-4 {
+.padding-right-4px {
   padding-right: 4px;
 }
 
-.padding-bottom-4 {
+.padding-bottom-4px {
   padding-bottom: 4px;
 }
 
-.padding-left-4 {
+.padding-left-4px {
   padding-left: 4px;
 }
 
-.margin-4 {
+.margin-4px {
   margin: 4px;
 }
 
-.margin-top-4 {
+.margin-top-4px {
   margin-top: 4px;
 }
 
-.margin-right-4 {
+.margin-right-4px {
   margin-right: 4px;
 }
 
-.margin-bottom-4 {
+.margin-bottom-4px {
   margin-bottom: 4px;
 }
 
-.margin-left-4 {
+.margin-left-4px {
   margin-left: 4px;
 }
 
-.top-4 {
+.top-4px {
   top: 4px;
 }
 
-.right-4 {
+.right-4px {
   right: 4px;
 }
 
-.bottom-4 {
+.bottom-4px {
   bottom: 4px;
 }
 
-.left-4 {
+.left-4px {
   left: 4px;
 }
 
-.gap-4 {
+.gap-4px {
   gap: 4px;
 }
 
-.padding-5 {
+.padding-5px {
   padding: 5px;
 }
 
-.padding-top-5 {
+.padding-top-5px {
   padding-top: 5px;
 }
 
-.padding-right-5 {
+.padding-right-5px {
   padding-right: 5px;
 }
 
-.padding-bottom-5 {
+.padding-bottom-5px {
   padding-bottom: 5px;
 }
 
-.padding-left-5 {
+.padding-left-5px {
   padding-left: 5px;
 }
 
-.margin-5 {
+.margin-5px {
   margin: 5px;
 }
 
-.margin-top-5 {
+.margin-top-5px {
   margin-top: 5px;
 }
 
-.margin-right-5 {
+.margin-right-5px {
   margin-right: 5px;
 }
 
-.margin-bottom-5 {
+.margin-bottom-5px {
   margin-bottom: 5px;
 }
 
-.margin-left-5 {
+.margin-left-5px {
   margin-left: 5px;
 }
 
-.top-5 {
+.top-5px {
   top: 5px;
 }
 
-.right-5 {
+.right-5px {
   right: 5px;
 }
 
-.bottom-5 {
+.bottom-5px {
   bottom: 5px;
 }
 
-.left-5 {
+.left-5px {
   left: 5px;
 }
 
-.gap-5 {
+.gap-5px {
   gap: 5px;
 }
 
-.padding-6 {
+.padding-6px {
   padding: 6px;
 }
 
-.padding-top-6 {
+.padding-top-6px {
   padding-top: 6px;
 }
 
-.padding-right-6 {
+.padding-right-6px {
   padding-right: 6px;
 }
 
-.padding-bottom-6 {
+.padding-bottom-6px {
   padding-bottom: 6px;
 }
 
-.padding-left-6 {
+.padding-left-6px {
   padding-left: 6px;
 }
 
-.margin-6 {
+.margin-6px {
   margin: 6px;
 }
 
-.margin-top-6 {
+.margin-top-6px {
   margin-top: 6px;
 }
 
-.margin-right-6 {
+.margin-right-6px {
   margin-right: 6px;
 }
 
-.margin-bottom-6 {
+.margin-bottom-6px {
   margin-bottom: 6px;
 }
 
-.margin-left-6 {
+.margin-left-6px {
   margin-left: 6px;
 }
 
-.top-6 {
+.top-6px {
   top: 6px;
 }
 
-.right-6 {
+.right-6px {
   right: 6px;
 }
 
-.bottom-6 {
+.bottom-6px {
   bottom: 6px;
 }
 
-.left-6 {
+.left-6px {
   left: 6px;
 }
 
-.gap-6 {
+.gap-6px {
   gap: 6px;
 }
 
-.padding-7 {
+.padding-7px {
   padding: 7px;
 }
 
-.padding-top-7 {
+.padding-top-7px {
   padding-top: 7px;
 }
 
-.padding-right-7 {
+.padding-right-7px {
   padding-right: 7px;
 }
 
-.padding-bottom-7 {
+.padding-bottom-7px {
   padding-bottom: 7px;
 }
 
-.padding-left-7 {
+.padding-left-7px {
   padding-left: 7px;
 }
 
-.margin-7 {
+.margin-7px {
   margin: 7px;
 }
 
-.margin-top-7 {
+.margin-top-7px {
   margin-top: 7px;
 }
 
-.margin-right-7 {
+.margin-right-7px {
   margin-right: 7px;
 }
 
-.margin-bottom-7 {
+.margin-bottom-7px {
   margin-bottom: 7px;
 }
 
-.margin-left-7 {
+.margin-left-7px {
   margin-left: 7px;
 }
 
-.top-7 {
+.top-7px {
   top: 7px;
 }
 
-.right-7 {
+.right-7px {
   right: 7px;
 }
 
-.bottom-7 {
+.bottom-7px {
   bottom: 7px;
 }
 
-.left-7 {
+.left-7px {
   left: 7px;
 }
 
-.gap-7 {
+.gap-7px {
   gap: 7px;
 }
 
-.padding-8 {
+.padding-8px {
   padding: 8px;
 }
 
-.padding-top-8 {
+.padding-top-8px {
   padding-top: 8px;
 }
 
-.padding-right-8 {
+.padding-right-8px {
   padding-right: 8px;
 }
 
-.padding-bottom-8 {
+.padding-bottom-8px {
   padding-bottom: 8px;
 }
 
-.padding-left-8 {
+.padding-left-8px {
   padding-left: 8px;
 }
 
-.margin-8 {
+.margin-8px {
   margin: 8px;
 }
 
-.margin-top-8 {
+.margin-top-8px {
   margin-top: 8px;
 }
 
-.margin-right-8 {
+.margin-right-8px {
   margin-right: 8px;
 }
 
-.margin-bottom-8 {
+.margin-bottom-8px {
   margin-bottom: 8px;
 }
 
-.margin-left-8 {
+.margin-left-8px {
   margin-left: 8px;
 }
 
-.top-8 {
+.top-8px {
   top: 8px;
 }
 
-.right-8 {
+.right-8px {
   right: 8px;
 }
 
-.bottom-8 {
+.bottom-8px {
   bottom: 8px;
 }
 
-.left-8 {
+.left-8px {
   left: 8px;
 }
 
-.gap-8 {
+.gap-8px {
   gap: 8px;
 }
 
-.padding-9 {
+.padding-9px {
   padding: 9px;
 }
 
-.padding-top-9 {
+.padding-top-9px {
   padding-top: 9px;
 }
 
-.padding-right-9 {
+.padding-right-9px {
   padding-right: 9px;
 }
 
-.padding-bottom-9 {
+.padding-bottom-9px {
   padding-bottom: 9px;
 }
 
-.padding-left-9 {
+.padding-left-9px {
   padding-left: 9px;
 }
 
-.margin-9 {
+.margin-9px {
   margin: 9px;
 }
 
-.margin-top-9 {
+.margin-top-9px {
   margin-top: 9px;
 }
 
-.margin-right-9 {
+.margin-right-9px {
   margin-right: 9px;
 }
 
-.margin-bottom-9 {
+.margin-bottom-9px {
   margin-bottom: 9px;
 }
 
-.margin-left-9 {
+.margin-left-9px {
   margin-left: 9px;
 }
 
-.top-9 {
+.top-9px {
   top: 9px;
 }
 
-.right-9 {
+.right-9px {
   right: 9px;
 }
 
-.bottom-9 {
+.bottom-9px {
   bottom: 9px;
 }
 
-.left-9 {
+.left-9px {
   left: 9px;
 }
 
-.gap-9 {
+.gap-9px {
   gap: 9px;
 }
 
-.padding-10 {
+.padding-10px {
   padding: 10px;
 }
 
-.padding-top-10 {
+.padding-top-10px {
   padding-top: 10px;
 }
 
-.padding-right-10 {
+.padding-right-10px {
   padding-right: 10px;
 }
 
-.padding-bottom-10 {
+.padding-bottom-10px {
   padding-bottom: 10px;
 }
 
-.padding-left-10 {
+.padding-left-10px {
   padding-left: 10px;
 }
 
-.margin-10 {
+.margin-10px {
   margin: 10px;
 }
 
-.margin-top-10 {
+.margin-top-10px {
   margin-top: 10px;
 }
 
-.margin-right-10 {
+.margin-right-10px {
   margin-right: 10px;
 }
 
-.margin-bottom-10 {
+.margin-bottom-10px {
   margin-bottom: 10px;
 }
 
-.margin-left-10 {
+.margin-left-10px {
   margin-left: 10px;
 }
 
-.top-10 {
+.top-10px {
   top: 10px;
 }
 
-.right-10 {
+.right-10px {
   right: 10px;
 }
 
-.bottom-10 {
+.bottom-10px {
   bottom: 10px;
 }
 
-.left-10 {
+.left-10px {
   left: 10px;
 }
 
-.gap-10 {
+.gap-10px {
   gap: 10px;
 }
 
-.padding-11 {
+.padding-11px {
   padding: 11px;
 }
 
-.padding-top-11 {
+.padding-top-11px {
   padding-top: 11px;
 }
 
-.padding-right-11 {
+.padding-right-11px {
   padding-right: 11px;
 }
 
-.padding-bottom-11 {
+.padding-bottom-11px {
   padding-bottom: 11px;
 }
 
-.padding-left-11 {
+.padding-left-11px {
   padding-left: 11px;
 }
 
-.margin-11 {
+.margin-11px {
   margin: 11px;
 }
 
-.margin-top-11 {
+.margin-top-11px {
   margin-top: 11px;
 }
 
-.margin-right-11 {
+.margin-right-11px {
   margin-right: 11px;
 }
 
-.margin-bottom-11 {
+.margin-bottom-11px {
   margin-bottom: 11px;
 }
 
-.margin-left-11 {
+.margin-left-11px {
   margin-left: 11px;
 }
 
-.top-11 {
+.top-11px {
   top: 11px;
 }
 
-.right-11 {
+.right-11px {
   right: 11px;
 }
 
-.bottom-11 {
+.bottom-11px {
   bottom: 11px;
 }
 
-.left-11 {
+.left-11px {
   left: 11px;
 }
 
-.gap-11 {
+.gap-11px {
   gap: 11px;
 }
 
-.padding-12 {
+.padding-12px {
   padding: 12px;
 }
 
-.padding-top-12 {
+.padding-top-12px {
   padding-top: 12px;
 }
 
-.padding-right-12 {
+.padding-right-12px {
   padding-right: 12px;
 }
 
-.padding-bottom-12 {
+.padding-bottom-12px {
   padding-bottom: 12px;
 }
 
-.padding-left-12 {
+.padding-left-12px {
   padding-left: 12px;
 }
 
-.margin-12 {
+.margin-12px {
   margin: 12px;
 }
 
-.margin-top-12 {
+.margin-top-12px {
   margin-top: 12px;
 }
 
-.margin-right-12 {
+.margin-right-12px {
   margin-right: 12px;
 }
 
-.margin-bottom-12 {
+.margin-bottom-12px {
   margin-bottom: 12px;
 }
 
-.margin-left-12 {
+.margin-left-12px {
   margin-left: 12px;
 }
 
-.top-12 {
+.top-12px {
   top: 12px;
 }
 
-.right-12 {
+.right-12px {
   right: 12px;
 }
 
-.bottom-12 {
+.bottom-12px {
   bottom: 12px;
 }
 
-.left-12 {
+.left-12px {
   left: 12px;
 }
 
-.gap-12 {
+.gap-12px {
   gap: 12px;
 }
 
-.padding-13 {
+.padding-13px {
   padding: 13px;
 }
 
-.padding-top-13 {
+.padding-top-13px {
   padding-top: 13px;
 }
 
-.padding-right-13 {
+.padding-right-13px {
   padding-right: 13px;
 }
 
-.padding-bottom-13 {
+.padding-bottom-13px {
   padding-bottom: 13px;
 }
 
-.padding-left-13 {
+.padding-left-13px {
   padding-left: 13px;
 }
 
-.margin-13 {
+.margin-13px {
   margin: 13px;
 }
 
-.margin-top-13 {
+.margin-top-13px {
   margin-top: 13px;
 }
 
-.margin-right-13 {
+.margin-right-13px {
   margin-right: 13px;
 }
 
-.margin-bottom-13 {
+.margin-bottom-13px {
   margin-bottom: 13px;
 }
 
-.margin-left-13 {
+.margin-left-13px {
   margin-left: 13px;
 }
 
-.top-13 {
+.top-13px {
   top: 13px;
 }
 
-.right-13 {
+.right-13px {
   right: 13px;
 }
 
-.bottom-13 {
+.bottom-13px {
   bottom: 13px;
 }
 
-.left-13 {
+.left-13px {
   left: 13px;
 }
 
-.gap-13 {
+.gap-13px {
   gap: 13px;
 }
 
-.padding-14 {
+.padding-14px {
   padding: 14px;
 }
 
-.padding-top-14 {
+.padding-top-14px {
   padding-top: 14px;
 }
 
-.padding-right-14 {
+.padding-right-14px {
   padding-right: 14px;
 }
 
-.padding-bottom-14 {
+.padding-bottom-14px {
   padding-bottom: 14px;
 }
 
-.padding-left-14 {
+.padding-left-14px {
   padding-left: 14px;
 }
 
-.margin-14 {
+.margin-14px {
   margin: 14px;
 }
 
-.margin-top-14 {
+.margin-top-14px {
   margin-top: 14px;
 }
 
-.margin-right-14 {
+.margin-right-14px {
   margin-right: 14px;
 }
 
-.margin-bottom-14 {
+.margin-bottom-14px {
   margin-bottom: 14px;
 }
 
-.margin-left-14 {
+.margin-left-14px {
   margin-left: 14px;
 }
 
-.top-14 {
+.top-14px {
   top: 14px;
 }
 
-.right-14 {
+.right-14px {
   right: 14px;
 }
 
-.bottom-14 {
+.bottom-14px {
   bottom: 14px;
 }
 
-.left-14 {
+.left-14px {
   left: 14px;
 }
 
-.gap-14 {
+.gap-14px {
   gap: 14px;
 }
 
-.padding-15 {
+.padding-15px {
   padding: 15px;
 }
 
-.padding-top-15 {
+.padding-top-15px {
   padding-top: 15px;
 }
 
-.padding-right-15 {
+.padding-right-15px {
   padding-right: 15px;
 }
 
-.padding-bottom-15 {
+.padding-bottom-15px {
   padding-bottom: 15px;
 }
 
-.padding-left-15 {
+.padding-left-15px {
   padding-left: 15px;
 }
 
-.margin-15 {
+.margin-15px {
   margin: 15px;
 }
 
-.margin-top-15 {
+.margin-top-15px {
   margin-top: 15px;
 }
 
-.margin-right-15 {
+.margin-right-15px {
   margin-right: 15px;
 }
 
-.margin-bottom-15 {
+.margin-bottom-15px {
   margin-bottom: 15px;
 }
 
-.margin-left-15 {
+.margin-left-15px {
   margin-left: 15px;
 }
 
-.top-15 {
+.top-15px {
   top: 15px;
 }
 
-.right-15 {
+.right-15px {
   right: 15px;
 }
 
-.bottom-15 {
+.bottom-15px {
   bottom: 15px;
 }
 
-.left-15 {
+.left-15px {
   left: 15px;
 }
 
-.gap-15 {
+.gap-15px {
   gap: 15px;
 }
 
-.padding-16 {
+.padding-16px {
   padding: 16px;
 }
 
-.padding-top-16 {
+.padding-top-16px {
   padding-top: 16px;
 }
 
-.padding-right-16 {
+.padding-right-16px {
   padding-right: 16px;
 }
 
-.padding-bottom-16 {
+.padding-bottom-16px {
   padding-bottom: 16px;
 }
 
-.padding-left-16 {
+.padding-left-16px {
   padding-left: 16px;
 }
 
-.margin-16 {
+.margin-16px {
   margin: 16px;
 }
 
-.margin-top-16 {
+.margin-top-16px {
   margin-top: 16px;
 }
 
-.margin-right-16 {
+.margin-right-16px {
   margin-right: 16px;
 }
 
-.margin-bottom-16 {
+.margin-bottom-16px {
   margin-bottom: 16px;
 }
 
-.margin-left-16 {
+.margin-left-16px {
   margin-left: 16px;
 }
 
-.top-16 {
+.top-16px {
   top: 16px;
 }
 
-.right-16 {
+.right-16px {
   right: 16px;
 }
 
-.bottom-16 {
+.bottom-16px {
   bottom: 16px;
 }
 
-.left-16 {
+.left-16px {
   left: 16px;
 }
 
-.gap-16 {
+.gap-16px {
   gap: 16px;
 }
 
-.padding-17 {
+.padding-17px {
   padding: 17px;
 }
 
-.padding-top-17 {
+.padding-top-17px {
   padding-top: 17px;
 }
 
-.padding-right-17 {
+.padding-right-17px {
   padding-right: 17px;
 }
 
-.padding-bottom-17 {
+.padding-bottom-17px {
   padding-bottom: 17px;
 }
 
-.padding-left-17 {
+.padding-left-17px {
   padding-left: 17px;
 }
 
-.margin-17 {
+.margin-17px {
   margin: 17px;
 }
 
-.margin-top-17 {
+.margin-top-17px {
   margin-top: 17px;
 }
 
-.margin-right-17 {
+.margin-right-17px {
   margin-right: 17px;
 }
 
-.margin-bottom-17 {
+.margin-bottom-17px {
   margin-bottom: 17px;
 }
 
-.margin-left-17 {
+.margin-left-17px {
   margin-left: 17px;
 }
 
-.top-17 {
+.top-17px {
   top: 17px;
 }
 
-.right-17 {
+.right-17px {
   right: 17px;
 }
 
-.bottom-17 {
+.bottom-17px {
   bottom: 17px;
 }
 
-.left-17 {
+.left-17px {
   left: 17px;
 }
 
-.gap-17 {
+.gap-17px {
   gap: 17px;
 }
 
-.padding-18 {
+.padding-18px {
   padding: 18px;
 }
 
-.padding-top-18 {
+.padding-top-18px {
   padding-top: 18px;
 }
 
-.padding-right-18 {
+.padding-right-18px {
   padding-right: 18px;
 }
 
-.padding-bottom-18 {
+.padding-bottom-18px {
   padding-bottom: 18px;
 }
 
-.padding-left-18 {
+.padding-left-18px {
   padding-left: 18px;
 }
 
-.margin-18 {
+.margin-18px {
   margin: 18px;
 }
 
-.margin-top-18 {
+.margin-top-18px {
   margin-top: 18px;
 }
 
-.margin-right-18 {
+.margin-right-18px {
   margin-right: 18px;
 }
 
-.margin-bottom-18 {
+.margin-bottom-18px {
   margin-bottom: 18px;
 }
 
-.margin-left-18 {
+.margin-left-18px {
   margin-left: 18px;
 }
 
-.top-18 {
+.top-18px {
   top: 18px;
 }
 
-.right-18 {
+.right-18px {
   right: 18px;
 }
 
-.bottom-18 {
+.bottom-18px {
   bottom: 18px;
 }
 
-.left-18 {
+.left-18px {
   left: 18px;
 }
 
-.gap-18 {
+.gap-18px {
   gap: 18px;
 }
 
-.padding-19 {
+.padding-19px {
   padding: 19px;
 }
 
-.padding-top-19 {
+.padding-top-19px {
   padding-top: 19px;
 }
 
-.padding-right-19 {
+.padding-right-19px {
   padding-right: 19px;
 }
 
-.padding-bottom-19 {
+.padding-bottom-19px {
   padding-bottom: 19px;
 }
 
-.padding-left-19 {
+.padding-left-19px {
   padding-left: 19px;
 }
 
-.margin-19 {
+.margin-19px {
   margin: 19px;
 }
 
-.margin-top-19 {
+.margin-top-19px {
   margin-top: 19px;
 }
 
-.margin-right-19 {
+.margin-right-19px {
   margin-right: 19px;
 }
 
-.margin-bottom-19 {
+.margin-bottom-19px {
   margin-bottom: 19px;
 }
 
-.margin-left-19 {
+.margin-left-19px {
   margin-left: 19px;
 }
 
-.top-19 {
+.top-19px {
   top: 19px;
 }
 
-.right-19 {
+.right-19px {
   right: 19px;
 }
 
-.bottom-19 {
+.bottom-19px {
   bottom: 19px;
 }
 
-.left-19 {
+.left-19px {
   left: 19px;
 }
 
-.gap-19 {
+.gap-19px {
   gap: 19px;
 }
 
-.padding-20 {
+.padding-20px {
   padding: 20px;
 }
 
-.padding-top-20 {
+.padding-top-20px {
   padding-top: 20px;
 }
 
-.padding-right-20 {
+.padding-right-20px {
   padding-right: 20px;
 }
 
-.padding-bottom-20 {
+.padding-bottom-20px {
   padding-bottom: 20px;
 }
 
-.padding-left-20 {
+.padding-left-20px {
   padding-left: 20px;
 }
 
-.margin-20 {
+.margin-20px {
   margin: 20px;
 }
 
-.margin-top-20 {
+.margin-top-20px {
   margin-top: 20px;
 }
 
-.margin-right-20 {
+.margin-right-20px {
   margin-right: 20px;
 }
 
-.margin-bottom-20 {
+.margin-bottom-20px {
   margin-bottom: 20px;
 }
 
-.margin-left-20 {
+.margin-left-20px {
   margin-left: 20px;
 }
 
-.top-20 {
+.top-20px {
   top: 20px;
 }
 
-.right-20 {
+.right-20px {
   right: 20px;
 }
 
-.bottom-20 {
+.bottom-20px {
   bottom: 20px;
 }
 
-.left-20 {
+.left-20px {
   left: 20px;
 }
 
-.gap-20 {
+.gap-20px {
   gap: 20px;
 }
 
-.padding-21 {
+.padding-21px {
   padding: 21px;
 }
 
-.padding-top-21 {
+.padding-top-21px {
   padding-top: 21px;
 }
 
-.padding-right-21 {
+.padding-right-21px {
   padding-right: 21px;
 }
 
-.padding-bottom-21 {
+.padding-bottom-21px {
   padding-bottom: 21px;
 }
 
-.padding-left-21 {
+.padding-left-21px {
   padding-left: 21px;
 }
 
-.margin-21 {
+.margin-21px {
   margin: 21px;
 }
 
-.margin-top-21 {
+.margin-top-21px {
   margin-top: 21px;
 }
 
-.margin-right-21 {
+.margin-right-21px {
   margin-right: 21px;
 }
 
-.margin-bottom-21 {
+.margin-bottom-21px {
   margin-bottom: 21px;
 }
 
-.margin-left-21 {
+.margin-left-21px {
   margin-left: 21px;
 }
 
-.top-21 {
+.top-21px {
   top: 21px;
 }
 
-.right-21 {
+.right-21px {
   right: 21px;
 }
 
-.bottom-21 {
+.bottom-21px {
   bottom: 21px;
 }
 
-.left-21 {
+.left-21px {
   left: 21px;
 }
 
-.gap-21 {
+.gap-21px {
   gap: 21px;
 }
 
-.padding-22 {
+.padding-22px {
   padding: 22px;
 }
 
-.padding-top-22 {
+.padding-top-22px {
   padding-top: 22px;
 }
 
-.padding-right-22 {
+.padding-right-22px {
   padding-right: 22px;
 }
 
-.padding-bottom-22 {
+.padding-bottom-22px {
   padding-bottom: 22px;
 }
 
-.padding-left-22 {
+.padding-left-22px {
   padding-left: 22px;
 }
 
-.margin-22 {
+.margin-22px {
   margin: 22px;
 }
 
-.margin-top-22 {
+.margin-top-22px {
   margin-top: 22px;
 }
 
-.margin-right-22 {
+.margin-right-22px {
   margin-right: 22px;
 }
 
-.margin-bottom-22 {
+.margin-bottom-22px {
   margin-bottom: 22px;
 }
 
-.margin-left-22 {
+.margin-left-22px {
   margin-left: 22px;
 }
 
-.top-22 {
+.top-22px {
   top: 22px;
 }
 
-.right-22 {
+.right-22px {
   right: 22px;
 }
 
-.bottom-22 {
+.bottom-22px {
   bottom: 22px;
 }
 
-.left-22 {
+.left-22px {
   left: 22px;
 }
 
-.gap-22 {
+.gap-22px {
   gap: 22px;
 }
 
-.padding-23 {
+.padding-23px {
   padding: 23px;
 }
 
-.padding-top-23 {
+.padding-top-23px {
   padding-top: 23px;
 }
 
-.padding-right-23 {
+.padding-right-23px {
   padding-right: 23px;
 }
 
-.padding-bottom-23 {
+.padding-bottom-23px {
   padding-bottom: 23px;
 }
 
-.padding-left-23 {
+.padding-left-23px {
   padding-left: 23px;
 }
 
-.margin-23 {
+.margin-23px {
   margin: 23px;
 }
 
-.margin-top-23 {
+.margin-top-23px {
   margin-top: 23px;
 }
 
-.margin-right-23 {
+.margin-right-23px {
   margin-right: 23px;
 }
 
-.margin-bottom-23 {
+.margin-bottom-23px {
   margin-bottom: 23px;
 }
 
-.margin-left-23 {
+.margin-left-23px {
   margin-left: 23px;
 }
 
-.top-23 {
+.top-23px {
   top: 23px;
 }
 
-.right-23 {
+.right-23px {
   right: 23px;
 }
 
-.bottom-23 {
+.bottom-23px {
   bottom: 23px;
 }
 
-.left-23 {
+.left-23px {
   left: 23px;
 }
 
-.gap-23 {
+.gap-23px {
   gap: 23px;
 }
 
-.padding-24 {
+.padding-24px {
   padding: 24px;
 }
 
-.padding-top-24 {
+.padding-top-24px {
   padding-top: 24px;
 }
 
-.padding-right-24 {
+.padding-right-24px {
   padding-right: 24px;
 }
 
-.padding-bottom-24 {
+.padding-bottom-24px {
   padding-bottom: 24px;
 }
 
-.padding-left-24 {
+.padding-left-24px {
   padding-left: 24px;
 }
 
-.margin-24 {
+.margin-24px {
   margin: 24px;
 }
 
-.margin-top-24 {
+.margin-top-24px {
   margin-top: 24px;
 }
 
-.margin-right-24 {
+.margin-right-24px {
   margin-right: 24px;
 }
 
-.margin-bottom-24 {
+.margin-bottom-24px {
   margin-bottom: 24px;
 }
 
-.margin-left-24 {
+.margin-left-24px {
   margin-left: 24px;
 }
 
-.top-24 {
+.top-24px {
   top: 24px;
 }
 
-.right-24 {
+.right-24px {
   right: 24px;
 }
 
-.bottom-24 {
+.bottom-24px {
   bottom: 24px;
 }
 
-.left-24 {
+.left-24px {
   left: 24px;
 }
 
-.gap-24 {
+.gap-24px {
   gap: 24px;
 }
 
-.padding-25 {
+.padding-25px {
   padding: 25px;
 }
 
-.padding-top-25 {
+.padding-top-25px {
   padding-top: 25px;
 }
 
-.padding-right-25 {
+.padding-right-25px {
   padding-right: 25px;
 }
 
-.padding-bottom-25 {
+.padding-bottom-25px {
   padding-bottom: 25px;
 }
 
-.padding-left-25 {
+.padding-left-25px {
   padding-left: 25px;
 }
 
-.margin-25 {
+.margin-25px {
   margin: 25px;
 }
 
-.margin-top-25 {
+.margin-top-25px {
   margin-top: 25px;
 }
 
-.margin-right-25 {
+.margin-right-25px {
   margin-right: 25px;
 }
 
-.margin-bottom-25 {
+.margin-bottom-25px {
   margin-bottom: 25px;
 }
 
-.margin-left-25 {
+.margin-left-25px {
   margin-left: 25px;
 }
 
-.top-25 {
+.top-25px {
   top: 25px;
 }
 
-.right-25 {
+.right-25px {
   right: 25px;
 }
 
-.bottom-25 {
+.bottom-25px {
   bottom: 25px;
 }
 
-.left-25 {
+.left-25px {
   left: 25px;
 }
 
-.gap-25 {
+.gap-25px {
   gap: 25px;
 }
 
-.padding-26 {
+.padding-26px {
   padding: 26px;
 }
 
-.padding-top-26 {
+.padding-top-26px {
   padding-top: 26px;
 }
 
-.padding-right-26 {
+.padding-right-26px {
   padding-right: 26px;
 }
 
-.padding-bottom-26 {
+.padding-bottom-26px {
   padding-bottom: 26px;
 }
 
-.padding-left-26 {
+.padding-left-26px {
   padding-left: 26px;
 }
 
-.margin-26 {
+.margin-26px {
   margin: 26px;
 }
 
-.margin-top-26 {
+.margin-top-26px {
   margin-top: 26px;
 }
 
-.margin-right-26 {
+.margin-right-26px {
   margin-right: 26px;
 }
 
-.margin-bottom-26 {
+.margin-bottom-26px {
   margin-bottom: 26px;
 }
 
-.margin-left-26 {
+.margin-left-26px {
   margin-left: 26px;
 }
 
-.top-26 {
+.top-26px {
   top: 26px;
 }
 
-.right-26 {
+.right-26px {
   right: 26px;
 }
 
-.bottom-26 {
+.bottom-26px {
   bottom: 26px;
 }
 
-.left-26 {
+.left-26px {
   left: 26px;
 }
 
-.gap-26 {
+.gap-26px {
   gap: 26px;
 }
 
-.padding-27 {
+.padding-27px {
   padding: 27px;
 }
 
-.padding-top-27 {
+.padding-top-27px {
   padding-top: 27px;
 }
 
-.padding-right-27 {
+.padding-right-27px {
   padding-right: 27px;
 }
 
-.padding-bottom-27 {
+.padding-bottom-27px {
   padding-bottom: 27px;
 }
 
-.padding-left-27 {
+.padding-left-27px {
   padding-left: 27px;
 }
 
-.margin-27 {
+.margin-27px {
   margin: 27px;
 }
 
-.margin-top-27 {
+.margin-top-27px {
   margin-top: 27px;
 }
 
-.margin-right-27 {
+.margin-right-27px {
   margin-right: 27px;
 }
 
-.margin-bottom-27 {
+.margin-bottom-27px {
   margin-bottom: 27px;
 }
 
-.margin-left-27 {
+.margin-left-27px {
   margin-left: 27px;
 }
 
-.top-27 {
+.top-27px {
   top: 27px;
 }
 
-.right-27 {
+.right-27px {
   right: 27px;
 }
 
-.bottom-27 {
+.bottom-27px {
   bottom: 27px;
 }
 
-.left-27 {
+.left-27px {
   left: 27px;
 }
 
-.gap-27 {
+.gap-27px {
   gap: 27px;
 }
 
-.padding-28 {
+.padding-28px {
   padding: 28px;
 }
 
-.padding-top-28 {
+.padding-top-28px {
   padding-top: 28px;
 }
 
-.padding-right-28 {
+.padding-right-28px {
   padding-right: 28px;
 }
 
-.padding-bottom-28 {
+.padding-bottom-28px {
   padding-bottom: 28px;
 }
 
-.padding-left-28 {
+.padding-left-28px {
   padding-left: 28px;
 }
 
-.margin-28 {
+.margin-28px {
   margin: 28px;
 }
 
-.margin-top-28 {
+.margin-top-28px {
   margin-top: 28px;
 }
 
-.margin-right-28 {
+.margin-right-28px {
   margin-right: 28px;
 }
 
-.margin-bottom-28 {
+.margin-bottom-28px {
   margin-bottom: 28px;
 }
 
-.margin-left-28 {
+.margin-left-28px {
   margin-left: 28px;
 }
 
-.top-28 {
+.top-28px {
   top: 28px;
 }
 
-.right-28 {
+.right-28px {
   right: 28px;
 }
 
-.bottom-28 {
+.bottom-28px {
   bottom: 28px;
 }
 
-.left-28 {
+.left-28px {
   left: 28px;
 }
 
-.gap-28 {
+.gap-28px {
   gap: 28px;
 }
 
-.padding-29 {
+.padding-29px {
   padding: 29px;
 }
 
-.padding-top-29 {
+.padding-top-29px {
   padding-top: 29px;
 }
 
-.padding-right-29 {
+.padding-right-29px {
   padding-right: 29px;
 }
 
-.padding-bottom-29 {
+.padding-bottom-29px {
   padding-bottom: 29px;
 }
 
-.padding-left-29 {
+.padding-left-29px {
   padding-left: 29px;
 }
 
-.margin-29 {
+.margin-29px {
   margin: 29px;
 }
 
-.margin-top-29 {
+.margin-top-29px {
   margin-top: 29px;
 }
 
-.margin-right-29 {
+.margin-right-29px {
   margin-right: 29px;
 }
 
-.margin-bottom-29 {
+.margin-bottom-29px {
   margin-bottom: 29px;
 }
 
-.margin-left-29 {
+.margin-left-29px {
   margin-left: 29px;
 }
 
-.top-29 {
+.top-29px {
   top: 29px;
 }
 
-.right-29 {
+.right-29px {
   right: 29px;
 }
 
-.bottom-29 {
+.bottom-29px {
   bottom: 29px;
 }
 
-.left-29 {
+.left-29px {
   left: 29px;
 }
 
-.gap-29 {
+.gap-29px {
   gap: 29px;
 }
 
-.padding-30 {
+.padding-30px {
   padding: 30px;
 }
 
-.padding-top-30 {
+.padding-top-30px {
   padding-top: 30px;
 }
 
-.padding-right-30 {
+.padding-right-30px {
   padding-right: 30px;
 }
 
-.padding-bottom-30 {
+.padding-bottom-30px {
   padding-bottom: 30px;
 }
 
-.padding-left-30 {
+.padding-left-30px {
   padding-left: 30px;
 }
 
-.margin-30 {
+.margin-30px {
   margin: 30px;
 }
 
-.margin-top-30 {
+.margin-top-30px {
   margin-top: 30px;
 }
 
-.margin-right-30 {
+.margin-right-30px {
   margin-right: 30px;
 }
 
-.margin-bottom-30 {
+.margin-bottom-30px {
   margin-bottom: 30px;
 }
 
-.margin-left-30 {
+.margin-left-30px {
   margin-left: 30px;
 }
 
-.top-30 {
+.top-30px {
   top: 30px;
 }
 
-.right-30 {
+.right-30px {
   right: 30px;
 }
 
-.bottom-30 {
+.bottom-30px {
   bottom: 30px;
 }
 
-.left-30 {
+.left-30px {
   left: 30px;
 }
 
-.gap-30 {
+.gap-30px {
   gap: 30px;
 }