@bagelink/vue 0.0.552 → 0.0.558

package/dist/style.css

@@ -248,19 +248,19 @@
 }
 }
 
-a[data-v-7f505d62] {
+a[data-v-65a6e961] {
   text-decoration: none;
 }
-.loading[data-v-7f505d62] {
+.loading[data-v-65a6e961] {
   border: 1px solid var(--bgl-white);
   border-bottom: 2px solid var(--bgl-white);
-  animation: spin-7f505d62 1s linear infinite;
+  animation: spin-65a6e961 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-@keyframes spin-7f505d62 {
+@keyframes spin-65a6e961 {
 0% {
     transform: rotate(0deg);
 }
@@ -268,7 +268,7 @@ a[data-v-7f505d62] {
     transform: rotate(360deg);
 }
 }
-.bgl_btn-icon[data-v-7f505d62] {
+.bgl_btn-icon[data-v-65a6e961] {
   height: var(--btn-height);
   width: var(--btn-height);
   border-radius: 100%;
@@ -278,101 +278,101 @@ a[data-v-7f505d62] {
   flex-shrink: 0;
   transition: var(--bgl-transition);
 }
-.bgl_btn[data-v-7f505d62] {
+.bgl_btn[data-v-65a6e961] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
   text-decoration: none;
 }
-.bgl_btn[disabled="true"][data-v-7f505d62] {
+.bgl_btn[disabled="true"][data-v-65a6e961] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_btn-flex[data-v-7f505d62] {
+.bgl_btn-flex[data-v-65a6e961] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   justify-content: center;
 }
-.bgl_btn .bgl_.bgl_icon-font[data-v-7f505d62] {
+.bgl_btn .bgl_.bgl_icon-font[data-v-65a6e961] {
   font-size: calc(var(--input-font-size) * 1.3);
 }
-.bgl_btn[data-v-7f505d62],
-.bgl_btn-icon[data-v-7f505d62] {
-  background-color: var(--54b736fd);
-  color: var(--5c3a40d0);
+.bgl_btn[data-v-65a6e961],
+.bgl_btn-icon[data-v-65a6e961] {
+  background-color: var(--5113a6cf);
+  color: var(--ae07d62c);
 }
-.bgl_btn[data-v-7f505d62]:hover,
-.bgl_btn-icon[data-v-7f505d62]:hover {
+.bgl_btn[data-v-65a6e961]:hover,
+.bgl_btn-icon[data-v-65a6e961]:hover {
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn[data-v-7f505d62]:active,
-.bgl_btn-icon[data-v-7f505d62]:active {
+.bgl_btn[data-v-65a6e961]:active,
+.bgl_btn-icon[data-v-65a6e961]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-7f505d62] {
+.bgl_btn.bgl_flatBtn[data-v-65a6e961] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   background: transparent;
 }
-.bgl_btn-icon.bgl_flatBtn[data-v-7f505d62] {
+.bgl_btn-icon.bgl_flatBtn[data-v-65a6e961] {
   background: transparent;
 }
-.bgl_btn.bgl_flatBtn[data-v-7f505d62]:hover,
-.bgl_btn-icon.bgl_flatBtn[data-v-7f505d62]:hover {
+.bgl_btn.bgl_flatBtn[data-v-65a6e961]:hover,
+.bgl_btn-icon.bgl_flatBtn[data-v-65a6e961]:hover {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-7f505d62]:active,
-.bgl_btn-icon.bgl_flatBtn[data-v-7f505d62]:active {
+.bgl_btn.bgl_flatBtn[data-v-65a6e961]:active,
+.bgl_btn-icon.bgl_flatBtn[data-v-65a6e961]:active {
   background: var(--bgl-gray-40);
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn.bgl_flatBtn.red[data-v-7f505d62],
-.bgl_btn-icon.bgl_flatBtn.red[data-v-7f505d62] {
+.bgl_btn.bgl_flatBtn.red[data-v-65a6e961],
+.bgl_btn-icon.bgl_flatBtn.red[data-v-65a6e961] {
   color: var(--bgl-red);
 }
-.bgl_btn.bgl_flatBtn.white[data-v-7f505d62],
-.bgl_btn-icon.bgl_flatBtn.white[data-v-7f505d62] {
+.bgl_btn.bgl_flatBtn.white[data-v-65a6e961],
+.bgl_btn-icon.bgl_flatBtn.white[data-v-65a6e961] {
   color: var(--bgl-white);
 }
-.bgl_btn.bgl_flatBtn.light[data-v-7f505d62],
-.bgl_btn-icon.bgl_flatBtn.light[data-v-7f505d62] {
+.bgl_btn.bgl_flatBtn.light[data-v-65a6e961],
+.bgl_btn-icon.bgl_flatBtn.light[data-v-65a6e961] {
   color: var(--bgl-primary-tint);
 }
-.bgl_btn.bgl_flatBtn.black[data-v-7f505d62],
-.bgl_btn-icon.bgl_flatBtn.black[data-v-7f505d62] {
+.bgl_btn.bgl_flatBtn.black[data-v-65a6e961],
+.bgl_btn-icon.bgl_flatBtn.black[data-v-65a6e961] {
   color: var(--bgl-black);
 }
-.bgl_btn.bgl_flatBtn.gray[data-v-7f505d62],
-.bgl_btn-icon.bgl_flatBtn.gray[data-v-7f505d62] {
+.bgl_btn.bgl_flatBtn.gray[data-v-65a6e961],
+.bgl_btn-icon.bgl_flatBtn.gray[data-v-65a6e961] {
   color: var(--bgl-gray);
 }
-.bgl_btn.thin[data-v-7f505d62] {
+.bgl_btn.thin[data-v-65a6e961] {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
 }
-.bgl_btn.round[data-v-7f505d62] {
+.bgl_btn.round[data-v-65a6e961] {
   border-radius: calc(var(--btn-border-radius) * 2);
 }
-.bgl_btn-icon.thin[data-v-7f505d62] {
+.bgl_btn-icon.thin[data-v-65a6e961] {
   height: calc(var(--btn-height) / 1.5);
   width: calc(var(--btn-height) / 1.5);
   line-height: 1;
 }
-[dir="rtl"] .bgl_.bgl_icon-font[data-v-7f505d62] {
+[dir="rtl"] .bgl_.bgl_icon-font[data-v-65a6e961] {
   transform: rotateY(180deg);
 }
-.bgl_btn-border[data-v-7f505d62] {
-  outline: 1px solid var(--54b736fd);
-  color: var(--54b736fd);
+.bgl_btn-border[data-v-65a6e961] {
+  outline: 1px solid var(--5113a6cf);
+  color: var(--5113a6cf);
   background: transparent;
 }
-.bgl_btn-border[data-v-7f505d62]:hover {
+.bgl_btn-border[data-v-65a6e961]:hover {
   color: var(--bgl-white);
-  background: var(--54b736fd);
+  background: var(--5113a6cf);
   filter: brightness(100%);
 }
-.bgl_btn-border[data-v-7f505d62]:active {
+.bgl_btn-border[data-v-65a6e961]:active {
   filter: brightness(80%);
 }
 .bg-dark {
@@ -540,13 +540,16 @@ a[data-v-7f505d62] {
 }
 }
 
-.accordion-item[data-v-b862dfb8] {
+.accordion-item[data-v-f87b579d] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-head[data-v-b862dfb8] {
+.accordion-item button[data-v-f87b579d]{
+	cursor: pointer;
+}
+.accordion-head[data-v-f87b579d] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -555,19 +558,19 @@ a[data-v-7f505d62] {
 	justify-content: space-between;
 	border: none;
 }
-.accordion-icon[data-v-b862dfb8] {
+.accordion-icon[data-v-f87b579d] {
 	transition: all 0.2s ease;
 }
-.accordion-icon.open[data-v-b862dfb8] {
+.accordion-icon.open[data-v-f87b579d] {
 	transform: rotate(180deg);
 }
-.accordion-label[data-v-b862dfb8] {
+.accordion-label[data-v-f87b579d] {
 	font-weight: bold;
 }
-.accordion-head:hover .accordion-label[data-v-b862dfb8] {
+.accordion-head:hover .accordion-label[data-v-f87b579d] {
 	text-decoration: underline;
 }
-.accordion-body[data-v-b862dfb8] {
+.accordion-body[data-v-f87b579d] {
 }
 
 .expand-enter-active,
@@ -637,41 +640,41 @@ a[data-v-7f505d62] {
 }
 }
 
-.list-arrows[data-v-9bf1b6df] {
+.list-arrows[data-v-9d32d080] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-9bf1b6df] {
+.list-arrows .bgl_icon-font[data-v-9d32d080] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-9bf1b6df] {
+.list-arrows.sorted[data-v-9d32d080] {
 	opacity: 1;
 }
-.col img[data-v-9bf1b6df] {
+.col img[data-v-9d32d080] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-9bf1b6df] {
+.list-arrows.sorted .desc[data-v-9d32d080] {
 	transform: rotate(180deg);
 }
-table[data-v-9bf1b6df] {
+table[data-v-9d32d080] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-9bf1b6df] {
+th[data-v-9d32d080] {
 	font-weight: 400;
 }
-.embedded-field[data-v-9bf1b6df] {
+.embedded-field[data-v-9d32d080] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-9bf1b6df] {
+.row[data-v-9d32d080] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-9bf1b6df] {
+.row.first-row[data-v-9d32d080] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -681,10 +684,10 @@ th[data-v-9bf1b6df] {
 	/* height: 50px; */
 	vertical-align: bottom;
 }
-.row.first-row input[type=checkbox][data-v-9bf1b6df]{
+.row.first-row input[type=checkbox][data-v-9d32d080]{
 	margin-bottom: 0.7rem;
 }
-.row.first-row[data-v-9bf1b6df]::after {
+.row.first-row[data-v-9d32d080]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -692,30 +695,30 @@ th[data-v-9bf1b6df] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-9bf1b6df] {
+.first-row .col[data-v-9d32d080] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-9bf1b6df] {
+.col[data-v-9d32d080] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-9bf1b6df]:has(.bagel-input) {
+.col[data-v-9d32d080]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-9bf1b6df] {
+.col > div[data-v-9d32d080] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-9bf1b6df] {
+.max-col-width[data-v-9d32d080] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-9bf1b6df] {
+.col.check .bgl_icon-font[data-v-9d32d080] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -726,31 +729,31 @@ th[data-v-9bf1b6df] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-9bf1b6df] {
+.rows[data-v-9d32d080] {
 	font-size: 0.88em;
 }
-.table-list[data-v-9bf1b6df] {
+.table-list[data-v-9d32d080] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-9bf1b6df] {
+.BagelTable .table-list[data-v-9d32d080] {
 	overflow: unset;
 }
-.row-item[data-v-9bf1b6df] {
+.row-item[data-v-9d32d080] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-9bf1b6df]:hover {
+.row-item[data-v-9d32d080]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type=checkbox][data-v-9bf1b6df]{
+.row-item input[type=checkbox][data-v-9d32d080]{
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-primary);
 }
-.infinite-wrapper[data-v-9bf1b6df] {
+.infinite-wrapper[data-v-9d32d080] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -1794,6 +1797,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .dp__time_input {
 	direction: ltr;
 }
+.ltrDateInput input {
+ direction: ltr;
+}
 
 .bagel-input textarea[data-v-1cbaeab2] {
 	font-family: monospace;
@@ -2618,7 +2624,7 @@ p {
 	background: var(--input-disabled-bg);
 }
 
-.toolbar[data-v-ace0040e] {
+.toolbar[data-v-4c741194] {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
@@ -2626,11 +2632,11 @@ p {
   background-color: #f0f0f0;
   border-bottom: 1px solid #ccc;
 }
-button[data-v-ace0040e]:hover {
+button[data-v-4c741194]:hover {
   background-color: #e0e0e0;
 }
-input[type="color"][data-v-ace0040e],
-input[type="number"][data-v-ace0040e] {
+input[type="color"][data-v-4c741194],
+input[type="number"][data-v-4c741194] {
   width: 40px;
   height: 30px;
   padding: 0;
@@ -2914,6 +2920,9 @@ input[type="number"][data-v-ace0040e] {
 .round-none {
     border-radius: 0 ;
 }
+.oval{
+    border-radius: 100% ;
+}
 .flex-center {
     justify-content: center;
     align-items: center;
@@ -3020,9 +3029,105 @@ input[type="number"][data-v-ace0040e] {
 .inset-inline-start, .start{
     inset-inline-start: 0;
 }
+.start-1{
+    inset-inline-start: 1rem;
+}
+.start-2{
+    inset-inline-start: 2rem;
+}
+.start-3{
+    inset-inline-start: 3rem;
+}
+.start-4{
+    inset-inline-start: 4rem;
+}
+.start-5{
+    inset-inline-start: 5rem;
+}
+.start-6{
+    inset-inline-start: 6rem;
+}
+.start-7{
+    inset-inline-start: 7rem;
+}
+.start-8{
+    inset-inline-start: 8rem;
+}
+.-start-1{
+    inset-inline-start: -1rem;
+}
+.-start-2{
+    inset-inline-start: -2rem;
+}
+.-start-3{
+    inset-inline-start: -3rem;
+}
+.-start-4{
+    inset-inline-start: -4rem;
+}
+.-start-5{
+    inset-inline-start: -5rem;
+}
+.-start-6{
+    inset-inline-start: -6rem;
+}
+.-start-7{
+    inset-inline-start: -7rem;
+}
+.-start-8{
+    inset-inline-start: -8rem;
+}
 .inset-inline-end, .end{
     inset-inline-end: 0;
 }
+.end-1{
+    inset-inline-end: 1rem;
+}
+.end-2{
+    inset-inline-end: 2rem;
+}
+.end-3{
+    inset-inline-end: 3rem;
+}
+.end-4{
+    inset-inline-end: 4rem;
+}
+.end-5{
+    inset-inline-end: 5rem;
+}
+.end-6{
+    inset-inline-end: 6rem;
+}
+.end-7{
+    inset-inline-end: 7rem;
+}
+.end-8{
+    inset-inline-end: 8rem;
+}
+.-end-1{
+    inset-inline-end: -1rem;
+}
+.-end-2{
+    inset-inline-end: -2rem;
+}
+.-end-3{
+    inset-inline-end: -3rem;
+}
+.-end-4{
+    inset-inline-end: -4rem;
+}
+.-end-5{
+    inset-inline-end: -5rem;
+}
+.-end-6{
+    inset-inline-end: -6rem;
+}
+.-end-7{
+    inset-inline-end: -7rem;
+}
+.-end-8{
+    inset-inline-end: -8rem;
+}
 .top, .top-0{
     top: 0;
 }
@@ -3038,6 +3143,42 @@ input[type="number"][data-v-ace0040e] {
 .top-4{
     top: 4rem;
 }
+.top-5{
+    top: 5rem;
+}
+.top-6{
+    top: 6rem;
+}
+.top-7{
+    top: 7rem;
+}
+.top-8{
+    top: 8rem;
+}
+.-top-1{
+    top: -1rem;
+}
+.-top-2{
+    top: -2rem;
+}
+.-top-3{
+    top: -3rem;
+}
+.-top-4{
+    top: -4rem;
+}
+.-top-5{
+    top: -5rem;
+}
+.-top-6{
+    top: -6rem;
+}
+.-top-7{
+    top: -7rem;
+}
+.-top-8{
+    top: -8rem;
+}
 .bottom, .bottom-0{
     bottom: 0;
 }
@@ -3053,6 +3194,42 @@ input[type="number"][data-v-ace0040e] {
 .bottom-4{
     bottom: 4rem;
 }
+.bottom-5{
+    bottom: 5rem;
+}
+.bottom-6{
+    bottom: 6rem;
+}
+.bottom-7{
+    bottom: 7rem;
+}
+.bottom-8{
+    bottom: 8rem;
+}
+.-bottom-1{
+    bottom: -1rem;
+}
+.-bottom-2{
+    bottom: -2rem;
+}
+.-bottom-3{
+    bottom: -3rem;
+}
+.-bottom-4{
+    bottom: -4rem;
+}
+.-bottom-5{
+    bottom: -5rem;
+}
+.-bottom-6{
+    bottom: -6rem;
+}
+.-bottom-7{
+    bottom: -7rem;
+}
+.-bottom-8{
+    bottom: -8rem;
+}
 .auto-flow-rows {
     grid-auto-flow: row;
 }
@@ -4486,6 +4663,10 @@ input[type="number"][data-v-ace0040e] {
     .m_round-none {
         border-radius: 0 !important;
     }
+    
+    .m_oval{
+        border-radius: 100% ;
+    }
 
     .m_flex-center {
         justify-items: center;
@@ -6247,58 +6428,278 @@ input[type="number"][data-v-ace0040e] {
         inset-inline-start: 0;
         inset-inline-end: 0;
     }
-
-    .m_inset-inline-start,
-    .m_start {
-        inset-inline-start: 0;
+    .m_inset-inline-start, .m_start{
+        inset-inline-start: 0 !important;
     }
-
-    .m_inset-inline-end,
-    .m_end {
-        inset-inline-end: 0;
+    
+    .m_start-1{
+        inset-inline-start: 1rem !important;
     }
-
-    .m_top,
-    .m_top-0 {
-        top: 0;
+    
+    .m_start-2{
+        inset-inline-start: 2rem !important;
     }
-
-    .m_top-1 {
-        top: 1rem;
+    
+    .m_start-3{
+        inset-inline-start: 3rem !important;
     }
-
-    .m_top-2 {
-        top: 2rem;
+    
+    .m_start-4{
+        inset-inline-start: 4rem !important;
     }
-
-    .m_top-3 {
-        top: 3rem;
+    
+    .m_start-5{
+        inset-inline-start: 5rem !important;
     }
-
-    .m_top-4 {
-        top: 4rem;
+    
+    .m_start-6{
+        inset-inline-start: 6rem !important;
     }
-
-    .m_bottom,
-    .m_bottom-0 {
-        bottom: 0;
+    
+    .m_start-7{
+        inset-inline-start: 7rem !important;
     }
-
-    .m_bottom-1 {
-        bottom: 1rem;
+    
+    .m_start-8{
+        inset-inline-start: 8rem !important;
     }
-
-    .m_bottom-2 {
-        bottom: 2rem;
+    
+    .m_-start-1{
+        inset-inline-start: -1rem !important;
     }
-
-    .m_bottom-3 {
-        bottom: 3rem;
+    
+    .m_-start-2{
+        inset-inline-start: -2rem !important;
     }
-
-    .m_bottom-4 {
-        bottom: 4rem;
+    
+    .m_-start-3{
+        inset-inline-start: -3rem !important;
+    }
+    
+    .m_-start-4{
+        inset-inline-start: -4rem !important;
+    }
+    
+    .m_-start-5{
+        inset-inline-start: -5rem !important;
+    }
+    
+    .m_-start-6{
+        inset-inline-start: -6rem !important;
+    }
+    
+    .m_-start-7{
+        inset-inline-start: -7rem !important;
+    }
+    
+    .m_-start-8{
+        inset-inline-start: -8rem !important;
     }
+    
+    .m_inset-inline-end, .m_end{
+        inset-inline-end: 0 !important;
+    }
+    
+    .m_end-1{
+        inset-inline-end: 1rem !important;
+    }
+    
+    .m_end-2{
+        inset-inline-end: 2rem !important;
+    }
+    
+    .m_end-3{
+        inset-inline-end: 3rem !important;
+    }
+    
+    .m_end-4{
+        inset-inline-end: 4rem !important;
+    }
+    
+    .m_end-5{
+        inset-inline-end: 5rem !important;
+    }
+    
+    .m_end-6{
+        inset-inline-end: 6rem !important;
+    }
+    
+    .m_end-7{
+        inset-inline-end: 7rem !important;
+    }
+    
+    .m_end-8{
+        inset-inline-end: 8rem !important;
+    }
+    
+    .m_-end-1{
+        inset-inline-end: -1rem !important;
+    }
+    
+    .m_-end-2{
+        inset-inline-end: -2rem !important;
+    }
+    
+    .m_-end-3{
+        inset-inline-end: -3rem !important;
+    }
+    
+    .m_-end-4{
+        inset-inline-end: -4rem !important;
+    }
+    
+    .m_-end-5{
+        inset-inline-end: -5rem !important;
+    }
+    
+    .m_-end-6{
+        inset-inline-end: -6rem !important;
+    }
+    
+    .m_-end-7{
+        inset-inline-end: -7rem !important;
+    }
+    
+    .m_-end-8{
+        inset-inline-end: -8rem !important;
+    }
+    
+    .m_top, .m_top-0{
+        top: 0 !important;
+    }
+    
+    .m_top-1{
+        top: 1rem !important;
+    }
+    
+    .m_top-2{
+        top: 2rem !important;
+    }
+    
+    .m_top-3{
+        top: 3rem !important;
+    }
+    
+    .m_top-4{
+        top: 4rem !important;
+    }
+    
+    .m_top-5{
+        top: 5rem !important;
+    }
+    
+    .m_top-6{
+        top: 6rem !important;
+    }
+    
+    .m_top-7{
+        top: 7rem !important;
+    }
+    
+    .m_top-8{
+        top: 8rem !important;
+    }
+    
+    .m_-top-1{
+        top: -1rem !important;
+    }
+    
+    .m_-top-2{
+        top: -2rem !important;
+    }
+    
+    .m_-top-3{
+        top: -3rem !important;
+    }
+    
+    .m_-top-4{
+        top: -4rem !important;
+    }
+    
+    .m_-top-5{
+        top: -5rem !important;
+    }
+    
+    .m_-top-6{
+        top: -6rem !important;
+    }
+    
+    .m_-top-7{
+        top: -7rem !important;
+    }
+    
+    .m_-top-8{
+        top: -8rem !important;
+    }
+    
+    .m_bottom, .m_bottom-0{
+        bottom: 0 !important;
+    }
+    
+    .m_bottom-1{
+        bottom: 1rem !important;
+    }
+    
+    .m_bottom-2{
+        bottom: 2rem !important;
+    }
+    
+    .m_bottom-3{
+        bottom: 3rem !important;
+    }
+    
+    .m_bottom-4{
+        bottom: 4rem !important;
+    }
+    
+    .m_bottom-5{
+        bottom: 5rem !important;
+    }
+    
+    .m_bottom-6{
+        bottom: 6rem !important;
+    }
+    
+    .m_bottom-7{
+        bottom: 7rem !important;
+    }
+    
+    .m_bottom-8{
+        bottom: 8rem !important;
+    }
+    
+    .m_-bottom-1{
+        bottom: -1rem !important;
+    }
+    
+    .m_-bottom-2{
+        bottom: -2rem !important;
+    }
+    
+    .m_-bottom-3{
+        bottom: -3rem !important;
+    }
+    
+    .m_-bottom-4{
+        bottom: -4rem !important;
+    }
+    
+    .m_-bottom-5{
+        bottom: -5rem !important;
+    }
+    
+    .m_-bottom-6{
+        bottom: -6rem !important;
+    }
+    
+    .m_-bottom-7{
+        bottom: -7rem !important;
+    }
+    
+    .m_-bottom-8{
+        bottom: -8rem !important;
+    }
+    
 }
 input,
 textarea,