@bagelink/vue 1.4.26 → 1.4.30

package/dist/style.css

@@ -1,18 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
-.expand-enter-active,
-.expand-leave-active {
-	transition: all 0.2s;
-	transition-delay: 0ms;
-}
-.expand-enter-from,
-.expand-leave-to {
-	max-height: 0;
-}
-.expand-enter-to,
-.expand-leave-from {
-	max-height: 300px;
-}
-
 .accordion-item[data-v-3334f637] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
@@ -55,6 +41,20 @@
 	text-decoration: underline;
 }
 
+.expand-enter-active,
+.expand-leave-active {
+	transition: all 0.2s;
+	transition-delay: 0ms;
+}
+.expand-enter-from,
+.expand-leave-to {
+	max-height: 0;
+}
+.expand-enter-to,
+.expand-leave-from {
+	max-height: 300px;
+}
+
 .bgl_btn[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary);
   --btn-color: var(--bgl-light-text);
@@ -262,6 +262,10 @@ display: block;
   object-fit: cover;
 }
 
+.inline[data-v-a8eed48b] {
+	display: inline;
+}
+
 .pill {
 	border-radius: 10px;
 	padding: 4px 8px;
@@ -275,7 +279,7 @@ display: block;
 	color: var(--bgl-black);
 }
 .pill.blue {
-	background: var(bgl-primary);
+	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
 .pill.red {
@@ -304,24 +308,20 @@ display: block;
 	color: var(--bgl-red);
 }
 
-.inline[data-v-689f051f] {
-	display: inline;
-}
-
-.bgl_vid iframe[data-v-1c895c6c],
-.bgl_vid video[data-v-1c895c6c] {
+.bgl_vid iframe[data-v-95a1191d],
+.bgl_vid video[data-v-95a1191d] {
 	width: 100%;
 	height: auto;
 	display: block;
 	margin: auto;
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-1c895c6c] {
+.bgl_vid.vid_empty[data-v-95a1191d] {
 	padding-top: 56.25%;
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_short[data-v-1c895c6c] {
+.bgl_vid.vid_short[data-v-95a1191d] {
 	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
 	margin: 0 auto;
 }
@@ -862,88 +862,67 @@ to {
 	text-align: center;
 }
 
-.table-list-wrap[data-v-f795f660] {
+.table-list-wrap[data-v-6da6fbe2] {
 	min-height: 150px;
 }
-.selected[data-v-f795f660] {
+.selected[data-v-6da6fbe2] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-f795f660]:hover {
+tbody tr.selected[data-v-6da6fbe2]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-f795f660] {
-	position: relative;
-}
-.inset[data-v-f795f660] {
-	inset: 0;
-}
-.loading-table-animation[data-v-f795f660] {
-	--size: 60px;
-	top: 30vh;
-	inset-inline-start: calc(50% - var(--size));
-	border: 3px solid var(--bgl-gray-20);
-	border-top: 4px solid var(--bgl-primary);
-	width: var(--size);
-	height: var(--size);
-	animation: loading-table-f795f660 1s linear infinite;
-}
-@keyframes loading-table-f795f660 {
-0% {
-		transform: translate(-50%, -50%) rotate(0deg);
-}
-100% {
-		transform: translate(-50%, -50%) rotate(360deg);
-}
-}
-.list-arrows[data-v-f795f660] {
+.list-arrows[data-v-6da6fbe2] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-f795f660] {
+.list-arrows .bgl_icon-font[data-v-6da6fbe2] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-f795f660] {
+.list-arrows.sorted[data-v-6da6fbe2] {
 	opacity: 1;
 }
-.col img[data-v-f795f660] {
+.col img[data-v-6da6fbe2] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 	object-fit: cover;
 }
-.col[data-v-f795f660]:has(img) {
+.col[data-v-6da6fbe2]:has(img) {
 	padding-inline-end: 0.5rem;
 }
-.list-arrows.sorted .desc[data-v-f795f660] {
+.overflowHiddenLoading[data-v-6da6fbe2]{
+	overflow: hidden !important;
+}
+.list-arrows.sorted .desc[data-v-6da6fbe2] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-f795f660] {
+table[data-v-6da6fbe2] {
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-f795f660] {
+th[data-v-6da6fbe2] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-box-bg);
-	height: var(--25c2d418);
+	height: var(--70bc72ee);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-f795f660] {
+.embedded-field[data-v-6da6fbe2] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-f795f660] {
+.row[data-v-6da6fbe2] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-f795f660] {
+.row.first-row[data-v-6da6fbe2] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -952,7 +931,7 @@ th[data-v-f795f660] {
 	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-f795f660]::after {
+.row.first-row[data-v-6da6fbe2]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -960,11 +939,11 @@ th[data-v-f795f660] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-f795f660] {
+.first-row .col[data-v-6da6fbe2] {
 	cursor: pointer;
 	background: var(--bgl-box-bg);
 }
-.col[data-v-f795f660] {
+.col[data-v-6da6fbe2] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
@@ -974,19 +953,19 @@ th[data-v-f795f660] {
 	overflow: hidden;
 	max-width: 30vw;
 }
-.col[data-v-f795f660]:has(.bagel-input) {
+.col[data-v-6da6fbe2]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-f795f660] {
+.col > div[data-v-6da6fbe2] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-f795f660] {
+.max-col-width[data-v-6da6fbe2] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-f795f660] {
+.col.check .bgl_icon-font[data-v-6da6fbe2] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -997,35 +976,35 @@ th[data-v-f795f660] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-f795f660] {
+.rows[data-v-6da6fbe2] {
 	font-size: 0.88em;
 }
-.table-list[data-v-f795f660] {
+.table-list[data-v-6da6fbe2] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-f795f660] {
+.BagelTable .table-list[data-v-6da6fbe2] {
 	overflow: unset;
 }
-.row-item[data-v-f795f660] {
-	height: var(--25c2d418);
+.row-item[data-v-6da6fbe2] {
+	height: var(--70bc72ee);
 	transition: all 200ms ease;
 }
-.row-item[data-v-f795f660]:hover {
+.row-item[data-v-6da6fbe2]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-f795f660] {
+.row-item input[type='checkbox'][data-v-6da6fbe2] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-f795f660] {
+.infinite-wrapper[data-v-6da6fbe2] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-f795f660] {
+input[type='checkbox'][data-v-6da6fbe2] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -1037,7 +1016,7 @@ input[type='checkbox'][data-v-f795f660] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-f795f660]::before {
+input[type='checkbox'][data-v-6da6fbe2]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -1050,18 +1029,18 @@ input[type='checkbox'][data-v-f795f660]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-f795f660]:hover::before {
+input[type='checkbox'][data-v-6da6fbe2]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-f795f660] {
+[lang='he'] [dir='ltr'][data-v-6da6fbe2] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-f795f660] {
+th input[type='checkbox'][data-v-6da6fbe2] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-f795f660]::after {
+th[data-v-6da6fbe2]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -1069,24 +1048,24 @@ th[data-v-f795f660]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-f795f660] {
+tr[data-v-6da6fbe2] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-f795f660],
-th[data-v-f795f660] {
+td[data-v-6da6fbe2],
+th[data-v-6da6fbe2] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-f795f660] {
+tbody tr[data-v-6da6fbe2] {
 	font-size: 0.88em;
-	height: var(--25c2d418);
+	height: var(--70bc72ee);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-f795f660]:hover {
+tbody tr[data-v-6da6fbe2]:hover {
 	background: var(--bgl-gray-light);
 }
 
@@ -1407,12 +1386,6 @@ fieldset[data-v-f7e758e5] {
     color: var(--label-color) !important;
 }
 
-/* Global styles */
-pre code.hljs {
-	padding: 0 !important;
-	background: transparent !important;
-}
-
 .code-editor-container[data-v-de01e351] {
 	margin-bottom: 0.5rem;
 	height: 100%;
@@ -1481,6 +1454,12 @@ pre code.hljs {
 	color: transparent;
 }
 
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
+}
+
 .colorInputPick{
     --input-font-size: 12px;
 	height: calc(var(--input-height) - 9px) !important;
@@ -1958,6 +1937,42 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
+.selectinput[data-v-cced5e42] {
+	width: 100%;
+}
+.selectinput-option[data-v-cced5e42] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns:1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-option .bgl_icon-font[data-v-cced5e42]{
+	line-height: normal;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-cced5e42] {
+	grid-template-columns: 10px 1fr;
+}
+.selectinput-options[data-v-cced5e42] {
+	max-height: 300px;
+	overflow-y: auto;
+}
+.selectinput-option[data-v-cced5e42]:hover, .highlight[data-v-cced5e42] {
+	background: var(--bgl-gray-20);
+}
+.isEmpty p[data-v-cced5e42] {
+	opacity: 0.3;
+}
+.selected[data-v-cced5e42]{
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-selected);
+}
+
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
@@ -1998,42 +2013,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	/* color: var(--input-color); */
 }
 
-.selectinput[data-v-cced5e42] {
-	width: 100%;
-}
-.selectinput-option[data-v-cced5e42] {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns:1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
-	margin-block: 0.15rem;
-}
-.selectinput-option .bgl_icon-font[data-v-cced5e42]{
-	line-height: normal;
-}
-.selectinput-options.multiselect .selectinput-option[data-v-cced5e42] {
-	grid-template-columns: 10px 1fr;
-}
-.selectinput-options[data-v-cced5e42] {
-	max-height: 300px;
-	overflow-y: auto;
-}
-.selectinput-option[data-v-cced5e42]:hover, .highlight[data-v-cced5e42] {
-	background: var(--bgl-gray-20);
-}
-.isEmpty p[data-v-cced5e42] {
-	opacity: 0.3;
-}
-.selected[data-v-cced5e42]{
-	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-selected);
-}
-
 .bgl_input .canvas {
 	width: 100%;
 	height: 100%;
@@ -2049,40 +2028,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border-radius: var(--input-border-radius);
 }
 
-.table-row .bagel-input input,
-.table-row .bagel-input textarea,
-.table-row .bagel-input .input {
-	border-radius: 0;
-	background: transparent;
-	color: var(--bgl-text-color);
-}
-.table-row .bagel-input textarea {
-	resize: none;
-	min-height: 40px;
-	overflow: auto;
-	margin: 0px;
-	padding: 0.64rem 0.7rem 0;
-}
-.table-row .bagel-input {
-	margin: 0;
-}
-.table-row .bagel-input input:focus-visible,
-.table-row .bagel-input textarea:focus-visible,
-.table-row .bagel-input .input:focus-visible {
-	background: var(--border-color);
-}
-.ghost {
-	opacity: 0;
-	background: #c8ebfb;
-}
-.sortable-chosen {
-	cursor: grabbing !important;
-	border-color: transparent;
-	background: var(--bgl-box-bg);
-	border-radius: 10px;
-	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
-}
-
 .table-side-scroll[data-v-e9632f79] {
 	overflow: auto;
 	margin-inline-start: -1rem;
@@ -2189,6 +2134,40 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	opacity: 1;
 }
 
+.table-row .bagel-input input,
+.table-row .bagel-input textarea,
+.table-row .bagel-input .input {
+	border-radius: 0;
+	background: transparent;
+	color: var(--bgl-text-color);
+}
+.table-row .bagel-input textarea {
+	resize: none;
+	min-height: 40px;
+	overflow: auto;
+	margin: 0px;
+	padding: 0.64rem 0.7rem 0;
+}
+.table-row .bagel-input {
+	margin: 0;
+}
+.table-row .bagel-input input:focus-visible,
+.table-row .bagel-input textarea:focus-visible,
+.table-row .bagel-input .input:focus-visible {
+	background: var(--border-color);
+}
+.ghost {
+	opacity: 0;
+	background: #c8ebfb;
+}
+.sortable-chosen {
+	cursor: grabbing !important;
+	border-color: transparent;
+	background: var(--bgl-box-bg);
+	border-radius: 10px;
+	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
+}
+
 .tel-input[data-v-24f599bf] {
 	direction: ltr;
 	text-align: left;
@@ -2615,13 +2594,13 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	font-family: 'Font Awesome 6 Brands', serif !important;
 }
 
-.img-web-kit[data-v-2f5e271c] {
+.img-web-kit[data-v-eed047eb] {
 	max-width: 100%;
 	vertical-align: middle;
 	border: 0;
 	width: 100%;
 }
-.error-image[data-v-2f5e271c] {
+.error-image[data-v-eed047eb] {
 	background-color: var(--skeleton-bg);
 }
 
@@ -2915,7 +2894,7 @@ button.list-item {
 	border-bottom: none;
 }
 .list-item:hover,
-.list-item.router-link-active {
+.list-item.router-link-exact-active {
 	background-color: var(--bgl-primary-tint);
 }
 .notClickable:hover{
@@ -8440,30 +8419,146 @@ to {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
-}.grid-wrap-50 {
+}.grid-wrap-50,
+.grid-wrap-50-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
     height: max-content;
     width: 100%;
-}.grid-wrap-100 {
+}.grid-wrap-100,
+.grid-wrap-100-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
     height: max-content;
     width: 100%;
-}.grid-wrap-200 {
+}.grid-wrap-150,
+.grid-wrap-150-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-200,
+.grid-wrap-200-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
     height: max-content;
     width: 100%;
-}.grid-wrap-300 {
+}.grid-wrap-250,
+.grid-wrap-250-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-300,
+.grid-wrap-300-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
     height: max-content;
     width: 100%;
-}.grid-wrap-400 {
+}.grid-wrap-350,
+.grid-wrap-350-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-400,
+.grid-wrap-400-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
     height: max-content;
     width: 100%;
-}.grid-wrap-500 {
+}.grid-wrap-450,
+.grid-wrap-450-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-500,
+.grid-wrap-500-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
     height: max-content;
     width: 100%;
+}.grid-wrap-550,
+.grid-wrap-550-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(550px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-600,
+.grid-wrap-600-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-650,
+.grid-wrap-650-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(650px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-700,
+.grid-wrap-700-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(700px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-750,
+.grid-wrap-750-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(750px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-800,
+.grid-wrap-800-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(800px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-850,
+.grid-wrap-850-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(850px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-900,
+.grid-wrap-900-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(900px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-950,
+.grid-wrap-950-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(950px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-1000,
+.grid-wrap-1000-fit {
+    grid-template-columns: repeat(auto-fit, minmax(min(1000px, 100%), 1fr));
+    height: max-content;
+    width: 100%;
+}.grid-wrap-50-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(50px, 100%), 1fr));
+}.grid-wrap-100-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
+}.grid-wrap-150-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
+}.grid-wrap-200-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
+}.grid-wrap-250-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
+}.grid-wrap-300-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+}.grid-wrap-350-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
+}.grid-wrap-400-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
+}.grid-wrap-450-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(450px, 100%), 1fr));
+}.grid-wrap-500-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr));
+}.grid-wrap-550-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(550px, 100%), 1fr));
+}.grid-wrap-600-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(600px, 100%), 1fr));
+}.grid-wrap-650-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(650px, 100%), 1fr));
+}.grid-wrap-700-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(700px, 100%), 1fr));
+}.grid-wrap-750-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(750px, 100%), 1fr));
+}.grid-wrap-800-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(800px, 100%), 1fr));
+}.grid-wrap-850-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(850px, 100%), 1fr));
+}.grid-wrap-900-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(900px, 100%), 1fr));
+}.grid-wrap-950-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(950px, 100%), 1fr));
+}.grid-wrap-1000-fill {
+    grid-template-columns: repeat(auto-fill, minmax(min(1000px, 100%), 1fr));
 }.grid-wrap-1 {
     grid-template-columns: repeat(1, 1fr);
     height: max-content;
@@ -14031,40 +14126,227 @@ to {
     }
 
 
-    .m_grid-wrap-50 {
+
+    .m_grid-wrap-50,
+    .m_grid-wrap-50-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
     }
 
-    .m_grid-wrap-100 {
+    .m_grid-wrap-100,
+    .m_grid-wrap-100-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
     }
 
-    .m_grid-wrap-200 {
+    .m_grid-wrap-150,
+    .m_grid-wrap-150-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-200,
+    .m_grid-wrap-200-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
+    }
+
+    .m_grid-wrap-250,
+    .m_grid-wrap-250-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
     }
 
-    .m_grid-wrap-300 {
+    .m_grid-wrap-300,
+    .m_grid-wrap-300-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
+    }
+
+    .m_grid-wrap-350,
+    .m_grid-wrap-350-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
     }
 
-    .m_grid-wrap-400 {
+    .m_grid-wrap-400,
+    .m_grid-wrap-400-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
+    }
+
+    .m_grid-wrap-450,
+    .m_grid-wrap-450-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
     }
 
-    .m_grid-wrap-500 {
+    .m_grid-wrap-500,
+    .m_grid-wrap-500-fit {
         grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
         height: max-content;
-        width: 100%
+        width: 100%;
+    }
+
+    .m_grid-wrap-550,
+    .m_grid-wrap-550-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(550px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-600,
+    .m_grid-wrap-600-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(600px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-650,
+    .m_grid-wrap-650-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(650px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-700,
+    .m_grid-wrap-700-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(700px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-750,
+    .m_grid-wrap-750-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(750px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-800,
+    .m_grid-wrap-800-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(800px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-850,
+    .m_grid-wrap-850-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(850px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-900,
+    .m_grid-wrap-900-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(900px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-950,
+    .m_grid-wrap-950-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(950px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+    .m_grid-wrap-1000,
+    .m_grid-wrap-1000-fit {
+        grid-template-columns: repeat(auto-fit, minmax(min(1000px, 100%), 1fr));
+        height: max-content;
+        width: 100%;
+    }
+
+
+
+    .m_grid-wrap-50-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(50px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-100-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-150-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-200-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-250-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-300-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-350-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-400-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-450-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(450px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-500-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-550-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(550px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-600-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(600px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-650-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(650px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-700-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(700px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-750-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(750px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-800-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(800px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-850-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(850px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-900-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(900px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-950-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(950px, 100%), 1fr));
+    }
+
+    .m_grid-wrap-1000-fill {
+        grid-template-columns: repeat(auto-fill, minmax(min(1000px, 100%), 1fr));
     }
 
     .m_grid-wrap-1 {