responsive controlled

public/css/app.css

@@ -50831,6 +50831,15 @@ body{
 
 @media (min-width: 640px){
 
+  .sm\:inset-y-1\/2{
+    top: 50%;
+    bottom: 50%;
+  }
+
+  .sm\:-right-1{
+    right: -0.25rem;
+  }
+
   .sm\:col-span-6{
     grid-column: span 6 / span 6;
   }
@@ -50887,14 +50896,14 @@ body{
     margin-top: 0.5rem;
   }
 
-  .sm\:mt-0{
-    margin-top: 0px;
-  }
-
   .sm\:mb-5{
     margin-bottom: 1.25rem;
   }
 
+  .sm\:mt-0{
+    margin-top: 0px;
+  }
+
   .sm\:ml-8{
     margin-left: 2rem;
   }
@@ -50949,6 +50958,18 @@ body{
     width: 33.333333%;
   }
 
+  .sm\:w-60{
+    width: 15rem;
+  }
+
+  .sm\:w-auto{
+    width: auto;
+  }
+
+  .sm\:w-96{
+    width: 24rem;
+  }
+
   .sm\:flex-1{
     -webkit-box-flex: 1;
         -ms-flex: 1 1 0%;
@@ -51028,6 +51049,12 @@ body{
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
   .sm\:divide-x-2 > :not([hidden]) ~ :not([hidden]){
     --tw-divide-x-reverse: 0;
     border-right-width: calc(2px * var(--tw-divide-x-reverse));
@@ -51039,6 +51066,11 @@ body{
     padding-right: 0px;
   }
 
+  .sm\:px-2{
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
   .sm\:text-6xl{
     font-size: 2.5rem;
     line-height: 2.75rem;
@@ -51340,6 +51372,12 @@ body{
     }
   }
 
+    .lg\:items-start{
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+
     .lg\:items-center{
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -51435,6 +51473,11 @@ body{
     padding-bottom: 0px;
   }
 
+    .lg\:px-0{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
     .lg\:pl-24{
     padding-left: 6rem;
   }

public/css/print.css

@@ -379,48 +379,6 @@ html[dir='rtl'] .text-right
 /*--General Finish--*/
 
 /*--Print Template Default Start--*/
-.col-60
-{
-    display: inline-block;
-    width: 60%;
-    vertical-align: top;
-}
-
-.col-58
-{
-    display: inline-block;
-    width: 58%;
-    vertical-align: top;
-}
-
-.col-50
-{
-    display: inline-block;
-    width: 50%;
-    vertical-align: top;
-}
-
-.col-42
-{
-    display: inline-block;
-    width: 42%;
-    vertical-align: top;
-}
-
-.col-40
-{
-    display: inline-block;
-    width: 40%;
-    vertical-align: top;
-}
-
-.col-16
-{
-    display: inline-block;
-    max-width: 16%;
-    vertical-align: top;
-}
-
 .col-100
 {
     display: inline-block;
@@ -805,8 +763,78 @@ html[dir='rtl'] .print-heading {
 .custom-product-hunt {
     display: none;
 }
+
+.classic-invoice {
+    margin-top: 10px;
+}
+
+.col-60
+{
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+
+.col-50
+{
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+
+.col-40
+{
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+.col-58
+{
+    display: inline-block;
+    width: 58%;
+    vertical-align: top;
+}
+.col-42
+{
+    display: inline-block;
+    width: 42%;
+    vertical-align: top;
+}
+.col-16
+{
+    display: inline-block;
+    max-width: 16%;
+    vertical-align: top;
+}
 /*--Print --*/
 
+@media (min-width: 991px) {
+    .col-60
+    {
+        display: inline-block;
+        width: 60%;
+        vertical-align: top;
+    }
+    
+    .col-50
+    {
+        display: inline-block;
+        width: 50%;
+        vertical-align: top;
+    }
+    
+    .col-40
+    {
+        display: inline-block;
+        width: 40%;
+        vertical-align: top;
+    }
+
+    .classic-invoice {
+        margin-top: unset;
+    }
+}
+
 @media (max-width: 1600px) {
     .p-index-right {
         padding: 0;