@bagelink/vue 1.2.79 → 1.2.83

package/dist/plugins/modalTypes.d.ts

@@ -1,4 +1,5 @@
-import { BglFormSchemaFnT, BtnOptions, ThemeType } from '..';
+import { BglFormSchemaT, BtnOptions, ThemeType } from '..';
+import { MaybeRefOrGetter } from 'vue';
 export interface ModalOptions {
     title?: string;
     dismissable?: boolean;
@@ -46,7 +47,7 @@ export interface ModalFormComponentProps<T extends {
 export interface ModalFormOptions<T extends {
     [key: string]: any;
 }> {
-    'schema': BglFormSchemaFnT<T>;
+    'schema': MaybeRefOrGetter<BglFormSchemaT<T>>;
     'modelValue'?: T;
     'onUpdate:modelValue'?: (val: T) => void;
     'onSubmit'?: (formData: T) => any;

package/dist/plugins/modalTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalTypes.d.ts","sourceRoot":"","sources":["../../src/plugins/modalTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modalTypes.d.ts","sourceRoot":"","sources":["../../src/plugins/modalTypes.ts"],"names":[],"mappings":"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"}

package/dist/style.css

@@ -832,48 +832,48 @@ to {
 }
 }
 
-.data-preview[data-v-430b1998] {
+.data-preview[data-v-d084907a] {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
-.preview-field[data-v-430b1998] {
+.preview-field[data-v-d084907a] {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	gap: 0.5rem;
 }
-.field-label[data-v-430b1998] {
+.field-label[data-v-d084907a] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	font-weight: 500;
 }
-.field-value[data-v-430b1998] {
+.field-value[data-v-d084907a] {
 	font-size: 0.95rem;
 }
-.empty-preview[data-v-430b1998] {
+.empty-preview[data-v-d084907a] {
 	font-size: 0.9rem;
 	color: var(--bgl-black-tint);
 	padding: 1rem 0;
 	text-align: center;
 }
 
-.table-list-wrap[data-v-382d1c94] {
+.table-list-wrap[data-v-b10460ed] {
 	min-height: 150px;
 }
-.selected[data-v-382d1c94] {
+.selected[data-v-b10460ed] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-382d1c94]:hover {
+tbody tr.selected[data-v-b10460ed]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-382d1c94] {
+.loading-table[data-v-b10460ed] {
 	position: relative;
 }
-.inset[data-v-382d1c94] {
+.inset[data-v-b10460ed] {
 	inset: 0;
 }
-.loading-table-animation[data-v-382d1c94] {
+.loading-table-animation[data-v-b10460ed] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -881,9 +881,9 @@ tbody tr.selected[data-v-382d1c94]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-382d1c94 1s linear infinite;
+	animation: loading-table-b10460ed 1s linear infinite;
 }
-@keyframes loading-table-382d1c94 {
+@keyframes loading-table-b10460ed {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -891,55 +891,55 @@ tbody tr.selected[data-v-382d1c94]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-382d1c94] {
+.list-arrows[data-v-b10460ed] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-382d1c94] {
+.list-arrows .bgl_icon-font[data-v-b10460ed] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-382d1c94] {
+.list-arrows.sorted[data-v-b10460ed] {
 	opacity: 1;
 }
-.col img[data-v-382d1c94] {
+.col img[data-v-b10460ed] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 	object-fit: cover;
 }
-.col[data-v-382d1c94]:has(img) {
+.col[data-v-b10460ed]:has(img) {
 	padding-inline-end: 0.5rem;
 }
-.list-arrows.sorted .desc[data-v-382d1c94] {
+.list-arrows.sorted .desc[data-v-b10460ed] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-382d1c94] {
+table[data-v-b10460ed] {
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-382d1c94] {
+th[data-v-b10460ed] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-box-bg);
-	height: var(--18d61d81);
+	height: var(--6f015429);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-382d1c94] {
+.embedded-field[data-v-b10460ed] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-382d1c94] {
+.row[data-v-b10460ed] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-382d1c94] {
+.row.first-row[data-v-b10460ed] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -948,7 +948,7 @@ th[data-v-382d1c94] {
 	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-382d1c94]::after {
+.row.first-row[data-v-b10460ed]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -956,11 +956,11 @@ th[data-v-382d1c94] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-382d1c94] {
+.first-row .col[data-v-b10460ed] {
 	cursor: pointer;
 	background: var(--bgl-box-bg);
 }
-.col[data-v-382d1c94] {
+.col[data-v-b10460ed] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
@@ -970,19 +970,19 @@ th[data-v-382d1c94] {
 	overflow: hidden;
 	max-width: 30vw;
 }
-.col[data-v-382d1c94]:has(.bagel-input) {
+.col[data-v-b10460ed]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-382d1c94] {
+.col > div[data-v-b10460ed] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-382d1c94] {
+.max-col-width[data-v-b10460ed] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-382d1c94] {
+.col.check .bgl_icon-font[data-v-b10460ed] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -993,35 +993,35 @@ th[data-v-382d1c94] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-382d1c94] {
+.rows[data-v-b10460ed] {
 	font-size: 0.88em;
 }
-.table-list[data-v-382d1c94] {
+.table-list[data-v-b10460ed] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-382d1c94] {
+.BagelTable .table-list[data-v-b10460ed] {
 	overflow: unset;
 }
-.row-item[data-v-382d1c94] {
-	height: var(--18d61d81);
+.row-item[data-v-b10460ed] {
+	height: var(--6f015429);
 	transition: all 200ms ease;
 }
-.row-item[data-v-382d1c94]:hover {
+.row-item[data-v-b10460ed]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-382d1c94] {
+.row-item input[type='checkbox'][data-v-b10460ed] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-382d1c94] {
+.infinite-wrapper[data-v-b10460ed] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-382d1c94] {
+input[type='checkbox'][data-v-b10460ed] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -1033,7 +1033,7 @@ input[type='checkbox'][data-v-382d1c94] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-382d1c94]::before {
+input[type='checkbox'][data-v-b10460ed]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -1046,18 +1046,18 @@ input[type='checkbox'][data-v-382d1c94]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-382d1c94]:hover::before {
+input[type='checkbox'][data-v-b10460ed]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-382d1c94] {
+[lang='he'] [dir='ltr'][data-v-b10460ed] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-382d1c94] {
+th input[type='checkbox'][data-v-b10460ed] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-382d1c94]::after {
+th[data-v-b10460ed]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -1065,24 +1065,24 @@ th[data-v-382d1c94]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-382d1c94] {
+tr[data-v-b10460ed] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-382d1c94],
-th[data-v-382d1c94] {
+td[data-v-b10460ed],
+th[data-v-b10460ed] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-382d1c94] {
+tbody tr[data-v-b10460ed] {
 	font-size: 0.88em;
-	height: var(--18d61d81);
+	height: var(--6f015429);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-382d1c94]:hover {
+tbody tr[data-v-b10460ed]:hover {
 	background: var(--bgl-gray-light);
 }
 
@@ -1134,32 +1134,30 @@ fieldset[data-v-f7e758e5] {
 .fi[data-v-f99f1900]:before{ content:" "
 }
 
-.bgl-multi-step-form[data-v-53bb3be3] {
+.bgl-multi-step-form[data-v-8f701fbc] {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 	width: 100%;
 	/* Default transition duration */
-	--transition-duration: 200ms;
+	--transition-duration: 300ms;
 	--move-distance: 35%;
-	--ease-in: ease-in-out;
-	--ease-out: ease-in-out;
-	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
-	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
+	--ease-in: cubic-bezier(0.42, 0, 0.58, 1);
+	--ease-out: cubic-bezier(0.42, 0, 0.58, 1);
 }
-.bgl-steps-indicator[data-v-53bb3be3] {
+.bgl-steps-indicator[data-v-8f701fbc] {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 1rem;
 }
-.bgl-step-indicator[data-v-53bb3be3] {
+.bgl-step-indicator[data-v-8f701fbc] {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	position: relative;
 }
-.bgl-step-indicator[data-v-53bb3be3]::before {
+.bgl-step-indicator[data-v-8f701fbc]::before {
 	content: '';
 	position: absolute;
 	top: 50%;
@@ -1169,10 +1167,10 @@ fieldset[data-v-f7e758e5] {
 	background: #e0e0e0;
 	z-index: -1;
 }
-.bgl-step-indicator[data-v-53bb3be3]:first-child::before {
+.bgl-step-indicator[data-v-8f701fbc]:first-child::before {
 	display: none;
 }
-.bgl-step-indicator > span[data-v-53bb3be3]:first-child {
+.bgl-step-indicator > span[data-v-8f701fbc]:first-child {
 	width: 30px;
 	height: 30px;
 	border-radius: 50%;
@@ -1183,73 +1181,77 @@ fieldset[data-v-f7e758e5] {
 	justify-content: center;
 	margin-bottom: 0.5rem;
 }
-.bgl-step-indicator.active > span[data-v-53bb3be3]:first-child {
+.bgl-step-indicator.active > span[data-v-8f701fbc]:first-child {
 	background: var(--primary-color, #4CAF50);
 	color: white;
 }
-.bgl-step-indicator.completed > span[data-v-53bb3be3]:first-child {
+.bgl-step-indicator.completed > span[data-v-8f701fbc]:first-child {
 	background: var(--success-color, #8BC34A);
 	color: white;
 }
-.bgl-step-indicator.clickable[data-v-53bb3be3] {
+.bgl-step-indicator.clickable[data-v-8f701fbc] {
 	cursor: pointer;
 }
-.bgl-step-label[data-v-53bb3be3] {
+.bgl-step-label[data-v-8f701fbc] {
 	font-size: 0.8rem;
 	max-width: 100px;
 	text-align: center;
 }
-.bgl-form-wrapper[data-v-53bb3be3] {
+.bgl-form-wrapper[data-v-8f701fbc] {
 	display: grid;
 	overflow: clip;
 	height: auto;
 	transition: height var(--transition-duration) ease;
 	interpolate-size: allow-keywords;
 }
-.bgl-form-wrapper > div[data-v-53bb3be3] {
+.bgl-form-wrapper > div[data-v-8f701fbc] {
 	grid-area: 1 / 1;
 }
-.bgl-form-container[data-v-53bb3be3] {
+.bgl-form-container[data-v-8f701fbc] {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 }
-.bgl-step-controls[data-v-53bb3be3] {
+.bgl-step-controls[data-v-8f701fbc] {
 	display: flex;
 	justify-content: center;
 	gap: 1rem;
 	grid-area: unset !important;
+	margin-top: 2rem;
 }
 
 /* Slide Left Animation (going forward) */
-.slide-left-enter-active[data-v-53bb3be3] {
-	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+.slide-left-enter-active[data-v-8f701fbc] {
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
-.slide-left-leave-active[data-v-53bb3be3] {
-	transition: opacity, transform var(--transition-duration) var(--ease-out);
+.slide-left-leave-active[data-v-8f701fbc] {
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
-.slide-left-enter-from[data-v-53bb3be3] {
+.slide-left-enter-from[data-v-8f701fbc] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
-.slide-left-leave-to[data-v-53bb3be3] {
+.slide-left-leave-to[data-v-8f701fbc] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
 
 /* Slide Right Animation (going back) */
-.slide-right-enter-active[data-v-53bb3be3] {
-	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+.slide-right-enter-active[data-v-8f701fbc] {
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
-.slide-right-leave-active[data-v-53bb3be3] {
-	transition: all var(--transition-duration) var(--ease-out);
-	transition-property: opacity, transform;
+.slide-right-leave-active[data-v-8f701fbc] {
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
-.slide-right-enter-from[data-v-53bb3be3] {
+.slide-right-enter-from[data-v-8f701fbc] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
-.slide-right-leave-to[data-v-53bb3be3] {
+.slide-right-leave-to[data-v-8f701fbc] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
@@ -1370,42 +1372,78 @@ fieldset[data-v-f7e758e5] {
     color: var(--label-color) !important;
 }
 
-pre code.hljs{
+/* Global styles */
+pre code.hljs {
 	padding: 0 !important;
-	inset: 0 !important;
-	position: absolute;
+	background: transparent !important;
 }
 
-.codeText[data-v-13335b34]{
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  caret-color: var(--bgl-white);
-  color: var(--bgl-white);
+.code-editor-container[data-v-6ab9613f] {
+	margin-bottom: 0.5rem;
+	height: 100%;
 }
-.code-editor-wrap[data-v-13335b34] {
-  background: #282c34;
-  height: max-content;
+.label[data-v-6ab9613f] {
+	display: block;
+	text-align: left;
+	margin-bottom: 0.25rem;
 }
-.code-editor-wrap[data-v-13335b34]:focus-within, .code-editor-wrap[data-v-13335b34]:focus-visible, .code-editor-wrap[data-v-13335b34]:focus {
-    box-shadow: inset 0 0 10px #00000021;
-	outline: solid 1px var(--border-color);
-	/* outline: -webkit-focus-ring-color auto 1px; */
+.code-editor-grandpa[data-v-6ab9613f] {
+	background: #22252A;
+	border-radius: 0.25rem;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	padding: 1ch;
+	padding-inline-start: 2ch;
 }
-.code-editor-wrap:focus-within:has(textarea:focus) + .label[data-v-13335b34],
-.label[data-v-13335b34]:has(+ .code-editor-wrap:focus-within) {
-	color: var(--bgl-primary) !important;
+.code-editor-grandpa[data-v-6ab9613f]:focus-within {
+	outline: solid 1px var(--border-color, #4f575f);
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
-.code-editor[data-v-13335b34] {
-  color: transparent;
-  resize: none;
+.editor-content-papa[data-v-6ab9613f] {
+	position: relative;
+	width: 100%;
+	padding-bottom: calc(100% - 5lh);
 }
-.code-editor[data-v-13335b34]::selection {
-  background: #2466bc30;
-  color: inherit;
+.code-display[data-v-6ab9613f],
+.code-input[data-v-6ab9613f] {
+	inset: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	tab-size: 2;
+	word-break: keep-all;
+	text-align: left;
 }
-.code-editor[data-v-13335b34]:focus {
-  outline: none;
+.code-display[data-v-6ab9613f] {
+	position: relative;
+	color:  #fff;
+	pointer-events: none;
+	z-index: 1;
+}
+.code-display code[data-v-6ab9613f] {
+	display: block;
+	background: transparent !important;
+	padding: 0 !important;
+}
+.code-input[data-v-6ab9613f] {
+	position: absolute;
+	background: transparent;
+	color: transparent;
+	caret-color:  #fff;
+	border: none;
+	resize: none;
+	outline: none;
+	z-index: 2;
+}
+.code-input[data-v-6ab9613f]::selection {
+	background-color: rgba(36, 102, 188, 0.3);
+	color: transparent;
 }
 
 .colorInputPick{
@@ -2008,32 +2046,27 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 .content-area li{
 	line-height: 1.65;
 }
-.code-editor {
-	flex: 1;
-	min-height: 240px !important;
-	height: 100%;
-}
 
-.rich-text-editor[data-v-30bcda4c] {
+.rich-text-editor[data-v-d643f2ae] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-30bcda4c] {
+.editor-container[data-v-d643f2ae] {
 	display: flex;
-	gap: 1rem;
+	gap: 0.5rem;
 }
-.content-area[data-v-30bcda4c],
-.preview-area[data-v-30bcda4c] {
+.content-area[data-v-d643f2ae],
+.preview-area[data-v-d643f2ae] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-30bcda4c] {
+.split-view[data-v-d643f2ae] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-30bcda4c] {
+.editableContent[data-v-d643f2ae] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -2041,7 +2074,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-30bcda4c] {
+.html-editor[data-v-d643f2ae] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -2052,12 +2085,12 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-30bcda4c] {
+.preview-area[data-v-d643f2ae] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-30bcda4c] {
+.fullscreen-mode[data-v-d643f2ae] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -2066,18 +2099,15 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-30bcda4c] {
+.fullscreen-mode .editor-container[data-v-d643f2ae] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-30bcda4c],
-.fullscreen-mode .preview-area[data-v-30bcda4c] {
+.fullscreen-mode .content-area[data-v-d643f2ae],
+.fullscreen-mode .preview-area[data-v-d643f2ae] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-30bcda4c]{
-	height: 100% !important;
-}
-.debug-controls[data-v-30bcda4c] {
+.debug-controls[data-v-d643f2ae] {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: flex-end;
@@ -4058,11 +4088,11 @@ body:has(.bg-dark.is-active) {
 	border-radius: var(--card-border-radius);
 }
 
-.modal-title[data-v-1c0f6894] {
+.modal-title[data-v-c62c6888] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-1c0f6894] {
+.modal-title[data-v-c62c6888] {
 		margin-top: 1rem;
 }
 }