@bagelink/vue 1.2.15 → 1.2.20

package/dist/style.css

@@ -310,544 +310,345 @@ display: block;
 	border-radius: var(--input-border-radius);
 }
 
-.datePick input{
-	min-width: 2px !important;
-}
-@media screen and (max-width: 910px) {
-.datePick{
-	--input-font-size: 0.75rem;
-	--btn-padding: 20px;
-}
-}
-
-.agenda__event[data-v-d63dd40c] {
-	border-inline-start: 0.75rem solid;
-	border-color: var(--26bbff92);
-	background: var(--input-bg);
-	grid-template-columns: 200px auto;
-	box-shadow: 0 0 0 1px var(--border-color);
-}
-
-.agenda__wrapper[data-v-4523e7de] {
-	grid-template-columns: 100px 1fr;
-}
-@media screen and (max-width: 910px) {
-.agenda__wrapper[data-v-4523e7de] {
-		grid-template-columns: 40px 1fr;
-}
-}
-
-.event-flyout {
-	position: fixed;
-	z-index: 50;
-	background-color: #fff;
-	max-height: 100%;
-	width: var(--c7702184);
-	max-width: 98%;
-	border: var(--qalendar-border-gray-thin);
-	border-radius: 8px;
-	box-shadow: 0 12px 24px rgb(0 0 0 / 9%), 0 6px 12px rgb(0 0 0 / 18%);
-	overflow: hidden;
-	transition: all 0.2s ease;
-	transition-property: opacity, transform;
-	transform: translateY(-40px);
-	opacity: 0;
-	pointer-events: none;
-}
-@media (prefers-color-scheme: dark) {
-.event-flyout {
-		background-color: var(--qalendar-dark-mode-elevated-surface);
-		border-color: transparent;
-}
-}
-.event-flyout.is-visible {
-	opacity: 1;
-	transform: translateY(0);
-	pointer-events: initial;
-}
-.event-flyout__relative-wrapper {
-	position: relative;
-}
-.event-flyout__menu {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+.agenda-view[data-v-54c102a2] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }
-.event-flyout__menu-editable,
-.event-flyout__menu-close {
-	padding: var(--qalendar-spacing) var(--qalendar-spacing) 0 var(--qalendar-spacing);
-	display: flex;
-	gap: 20px;
+.agenda-header[data-v-54c102a2] {
+  display: flex;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
 }
-.is-not-editable .event-flyout__menu-close {
-	position: absolute;
-	top: 0;
-	inset-inline-end: 0;
+.time-column[data-v-54c102a2] {
+  width: 100px;
+  flex-shrink: 0;
 }
-.event-flyout__menu-item {
-	font-size: var(--qalendar-font-l);
-	color: gray;
+.event-column[data-v-54c102a2] {
+  flex-grow: 1;
 }
-@media (prefers-color-scheme: dark) {
-.event-flyout__menu-item {
-		color: var(--qalendar-dark-mode-text-hint);
+.agenda-content[data-v-54c102a2] {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 1rem;
 }
+.event[data-v-54c102a2] {
+  margin-bottom: 1rem;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
-.event-flyout__menu-item:hover {
-	color: var(--qalendar-theme-color);
-	cursor: pointer;
+.event[data-v-54c102a2]:hover {
+  transform: scale(1.01);
 }
-.is-trash-icon:hover {
-	color: red;
+.event-content[data-v-54c102a2] {
+  display: flex;
+  height: 100%;
+  color: white;
 }
-.event-flyout__info-wrapper {
-	padding: var(--qalendar-spacing);
+.event-time[data-v-54c102a2] {
+  width: 100px;
+  flex-shrink: 0;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
 }
-.event-flyout__row {
-	display: flex;
-	gap: var(--qalendar-spacing);
-	margin-bottom: 0.25em;
-	font-weight: 400;
+.event-details[data-v-54c102a2] {
+  flex-grow: 1;
+  padding: 0.5rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
 }
-.event-flyout__row p {
-	margin: 0;
-	padding: 0;
+.event-title[data-v-54c102a2] {
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
 }
-.event-flyout__row svg {
-	margin-top: 0.1rem;
-	color: #5f6368;
-	width: 14px;
+.event-day[data-v-54c102a2] {
+  font-size: 0.8rem;
+  opacity: 0.8;
 }
-@media (prefers-color-scheme: dark) {
-.event-flyout__row svg {
-		color: var(--qalendar-dark-mode-text-hint);
+.event-day.today[data-v-54c102a2] {
+  color: var(--bgl-primary);
+  opacity: 1;
 }
+@media (max-width: 768px) {
+.agenda-header[data-v-54c102a2] {
+    padding: 0.5rem;
 }
-.event-flyout__color-icon {
-	--icon-height: 16px;
-	border-radius: 50%;
-	height: var(--icon-height);
-	width: var(--icon-height);
+.time-column[data-v-54c102a2] {
+    width: 80px;
 }
-.is-title {
-	font-size: 18px;
-	line-height: 1.2;
-	align-items: center;
+.event-content[data-v-54c102a2] {
+    font-size: 0.9rem;
 }
-.is-not-editable .is-title {
-	max-width: 90%;
+.event-time[data-v-54c102a2] {
+    width: 80px;
+    font-size: 0.8rem;
 }
-.is-time {
-	font-size: var(--qalendar-font-s);
-	margin-bottom: 0.75em;
+.event-title[data-v-54c102a2] {
+    font-size: 0.9rem;
 }
-
-.calendar-month__event[data-v-16d8079e]:active {
-    z-index: 100;
+.event-day[data-v-54c102a2] {
+    font-size: 0.7rem;
 }
-.calendar-month__event .calendar-month__event-color[data-v-16d8079e] {
-    background-color: var(--1772761d);
-    width: 6px;
-    height: 6px;
 }
 
-.calendar-month__weekday[data-v-4b49a3b2] {
-  height: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  border-inline-end: var(--qalendar-border-gray-thin);
-  border-bottom: var(--qalendar-border-gray-thin);
-  overflow: hidden;
-  transition: background-color 0.2s ease-in-out;
-}
-.calendar-month__weekday[data-v-4b49a3b2]:active {
-  background-color: var(--qalendar-light-gray);
-}
-.calendar-month__weekday.is-droppable[data-v-4b49a3b2] {
-  background-color: var(--qalendar-light-gray);
+.dayGrid[data-v-8aa8e541]{
+	display: grid;
+	grid-template-columns: 5rem 1fr;
 }
-.calendar-month__weekday[data-v-4b49a3b2]:last-child {
-  border-inline-end: 0;
+.time-column[data-v-8aa8e541] {
+  width: 80px;
+  flex-shrink: 0;
 }
-.calendar-month__weekday.is-selected[data-v-4b49a3b2] {
-  box-shadow: inset 0 0 0 1px var(--bgl-primary);
+.events-column[data-v-8aa8e541] {
+  flex-grow: 1;
+  position: relative;
+  border-inline-start: 1px solid var(--border-color);
 }
-.calendar-month__weekday-more[data-v-4b49a3b2] {
-  font-size: var(--qalendar-font-2xs);
-  width: 100%;
-  padding-inline-start: 4px;
-  color: var(--qalendar-gray-quite-dark);
-  cursor: pointer;
+.date-header[data-v-8aa8e541] {
+  padding: 0.5rem;
+  text-align: center;
 }
-.calendar-month_events[data-v-4b49a3b2] {
-  width: 100%;
+.day-header .events-column[data-v-8aa8e541] {
+  border-inline-start: 1px solid transparent;
 }
-.qalendar-is-small .calendar-month_events[data-v-4b49a3b2] {
+.time-slot[data-v-8aa8e541] {
+  height: 30px;
   display: flex;
-  flex-flow: row;
+  align-items: center;
   justify-content: center;
 }
-.qalendar-is-small .calendar-month_events .calendar-month__weekday-more[data-v-4b49a3b2] {
-  display: none;
+.time-slots[data-v-8aa8e541] {
+  flex-grow: 1;
+  display: flex;
+  overflow: auto;
+  position: relative;
 }
-.calendar-month__weekday.is-today .calendar-month__day-date[data-v-4b49a3b2] {
-  background-color: var(--bgl-primary);
-  color: #fff;
-  border-radius: 50%;
-  padding: 4px 6px;
+.event[data-v-8aa8e541] {
+  left: 10px;
+  right: 10px;
 }
-.qalendar-is-small .calendar-month__weekday.is-today .calendar-month__day-date[data-v-4b49a3b2] {
-  padding: 2px 4px;
+.event[data-v-8aa8e541]:hover {
+  z-index: 2;
+  transform: scale(1.02);
 }
-.space-reserver[data-v-4b49a3b2] {
+.event-content[data-v-8aa8e541] {
+  padding: 0.5rem;
+  color: white;
+  font-size: 0.9rem;
   height: 100%;
-  flex: 1;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  border-inline-end: var(--qalendar-border-gray-thin);
-  border-bottom: var(--qalendar-border-gray-thin);
-  border-inline-end-color: transparent;
+  overflow: hidden;
 }
-.space-reserver + .calendar-month__weekday[data-v-4b49a3b2]:not(.trailing-or-leading) {
-  border-inline-start: var(--qalendar-border-gray-thin);
+.event-title[data-v-8aa8e541] {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-@media (prefers-color-scheme: dark) {
-.calendar-month__weekday[data-v-4b49a3b2],
-  .space-reserver[data-v-4b49a3b2] {
-    border-color: var(--qalendar-dark-mode-line-color);
+.event-time[data-v-8aa8e541] {
+  font-size: 0.8rem;
 }
+.drag-preview[data-v-8aa8e541] {
+	background-color: rgba(var(--bgl-primary-rgb), 0.1);
 }
-
-.calendar-month__week {
-		display: flex;
-		flex: 1;
+.current-time-line[data-v-8aa8e541] {
+  height: 2px;
 }
-.calendar-month__week:first-child {
-		border-top: var(--qalendar-border-gray-thin);
+.custom-popover[data-v-8aa8e541] {
+  position: fixed;
+  z-index: 1000;
+  min-width: 250px;
+  max-width: 350px;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: fadeIn-8aa8e541 0.2s ease;
+  transform-origin: center left;
 }
-.calendar-root.mode-is-month.qalendar-is-small .calendar-month.h-100p{
-		height: auto !important;
+@keyframes fadeIn-8aa8e541 {
+from {
+    opacity: 0;
+    transform: scale(0.95);
 }
-.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weeks{
-		display: block !important;
-		height: auto !important;
+to {
+    opacity: 1;
+    transform: scale(1);
 }
-.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weekday{
-		height: 40px !important;
 }
 
-.calendar-week__event[data-v-992d6df6] {
-	position: absolute;
-	width: 100%;
-	border-radius: 4px;
-	cursor: pointer;
-	box-sizing: content-box;
-	user-select: none;
-	overflow: hidden;
-}
-.calendar-week__event.is-editable[data-v-992d6df6] {
-	cursor: grab;
-}
-.calendar-week__event.has-disabled-dnd[data-v-992d6df6] {
-	cursor: initial;
-}
-.calendar-week__event .calendar-week__event-row[data-v-992d6df6] {
-	display: flex;
-	align-items: flex-start;
-	margin-bottom: 0.25em;
-}
-.calendar-week__event .calendar-week__event-row p[data-v-992d6df6] {
-	margin: 0;
-	padding: 0;
+.month-view[data-v-505b680c] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }
-.calendar-week__event .calendar-week__event-info-wrapper[data-v-992d6df6] {
-	position: relative;
-	padding: var(--qalendar-spacing-half);
-	font-size: var(--qalendar-font-xs);
-	height: 100%;
-	box-sizing: border-box;
-	user-select: none;
+.month-header[data-v-505b680c] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-bottom: 1px solid var(--border-color);
 }
-.calendar-week__event .calendar-week__event-blend-out[data-v-992d6df6] {
-	position: absolute;
-	bottom: 0;
-	height: 20px;
-	width: 100%;
-	transform: translateX(calc(var(--qalendar-spacing-half) * -1));
+.weekday[data-v-505b680c] {
+  padding: 0.5rem;
+  text-align: center;
+  color: var(--text-muted);
 }
-.calendar-week__event .calendar-week__event-icon[data-v-992d6df6] {
-	margin: 2px 4px 0 0;
-	font-size: var(--qalendar-font-xs);
+.month-grid[data-v-505b680c] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  flex-grow: 1;
+  overflow: auto;
+  border-inline-end: 1px solid var(--border-color);
+}
+.day-cell[data-v-505b680c] {
+  border-inline-start: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  padding: 0.5rem;
+  min-height: 100px;
+  display: flex;
+  flex-direction: column;
 }
-.calendar-week__event .calendar-week__event-resize[data-v-992d6df6] {
-	position: absolute;
-	width: 100%;
-	cursor: ns-resize;
-	height: 5px;
+.day-number[data-v-505b680c] {
+  margin-bottom: 0.5rem;
 }
-.calendar-week__event .calendar-week__event-resize-up[data-v-992d6df6] {
-	top: 0;
+.other-month[data-v-505b680c] {
+  background-color: var(--bgl-gray-light);
+  color: var(--bgl-gray);
 }
-.calendar-week__event .calendar-week__event-resize-down[data-v-992d6df6] {
-	bottom: 0;
+.today[data-v-505b680c] {
+  background-color: var(--bgl-primary-light);
 }
-
-.calendar-week__day[data-v-7947ee7a] {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-.calendar-week__day .calendar-week__day-interval[data-v-7947ee7a] {
-	flex: 1;
-	font-size: var(--qalendar-font-xs);
-	color: var(--qalendar-gray);
-	padding: 2px;
-}
-.calendar-week__day[data-v-7947ee7a]:first-child {
-	border-inline-start: 1px solid var(--border-color);
-}
-.calendar-week__day[data-v-7947ee7a] {
-	border-inline-end: 1px solid var(--border-color);
-	border-bottom: 1px solid var(--border-color);
+.today .day-number[data-v-505b680c] {
+  color: var(--bgl-primary);
 }
-
-.day-timeline[data-v-64469387] {
-	width: calc(100% + 10px);
-	height: var(--42711aca);
-	transform: translateX(-10px);
+.day-events[data-v-505b680c] {
+  flex-grow: 1;
+  overflow-y: auto;
 }
-[dir="rtl"] .day-timeline[data-v-64469387] {
-	transform: translateX(10px);
+.event-item[data-v-505b680c] {
+  margin-bottom: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 4px;
+  color: white;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
-[dir="rtl"] .ltr .day-timeline[data-v-64469387] {
-	transform: translateX(-10px);
+.event-title[data-v-505b680c] {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.day-timeline__hour[data-v-64469387] {
-	font-size: clamp(10px, 0.625rem, 14px);
-	color: var(--qalendar-gray-quite-dark);
+.event-time[data-v-505b680c] {
+  font-size: 0.7rem;
+  opacity: 0.8;
 }
-.day-timeline__hour-text[data-v-64469387] {
-	transform: translate(-40px, 0);
+.event-dot[data-v-505b680c] {
+  width: 6px;
+  height: 6px;
+  background-color: var(--bgl-primary);
+  border-radius: 50%;
+  margin: 0.25rem auto;
 }
-[dir="rtl"] .day-timeline__hour-text[data-v-64469387] {
-	transform: translate(40px, 0);
+@media (max-width: 768px) {
+.day-cell[data-v-505b680c] {
+    min-height: 60px;
+    padding: 0.25rem;
 }
-[dir="rtl"] .ltr .day-timeline__hour-text[data-v-64469387] {
-	transform: translate(-40px, 0);
+.day-number[data-v-505b680c] {
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
 }
-.day-timeline__hour:first-child .day-timeline__hour-text[data-v-64469387] {
-	display: none;
+.weekday[data-v-505b680c] {
+    font-size: 0.8rem;
+    padding: 0.25rem;
 }
-.day-timeline__hour[data-v-64469387]:not(:last-child) {
-	border-bottom: var(--qalendar-border-gray-thin);
 }
-
-.week-timeline__event[data-v-de98fbb8] {
-  position: relative;
-  --event-padding: 3px;
-  display: flex;
-  align-items: center;
-  height: 0.9rem;
-  width: calc(100% - var(--event-padding));
-  font-size: var(--qalendar-font-2xs);
+.custom-popover[data-v-505b680c] {
+  position: fixed;
+  z-index: 1000;
+  min-width: 250px;
+  max-width: 350px;
+  background-color: white;
   border-radius: 4px;
-  padding: var(--event-padding);
-  margin-bottom: 0.25em;
-  text-align: start;
-  cursor: pointer;
-  user-select: none;
-  overflow: hidden;
-}
-.week-timeline__event[data-v-de98fbb8]:active {
-  cursor: not-allowed;
-}
-
-.week-timeline[data-v-9aaa9a54] {
-	height: fit-content;
-	display: flex;
-	justify-content: space-evenly;
-}
-.mode-is-day .week-timeline[data-v-9aaa9a54] {
-	/* width: calc(100% - 3.5em); */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: fadeIn-505b680c 0.2s ease;
+  transform-origin: center left;
 }
-.week-timeline__day[data-v-9aaa9a54] {
-	width: 100%;
-}
-.week-timeline__date[data-v-9aaa9a54] {
-	height: 1.5rem;
-	width: 1.5rem;
+@keyframes fadeIn-505b680c {
+from {
+    opacity: 0;
+    transform: scale(0.95);
 }
-.is-today .week-timeline__date[data-v-9aaa9a54] {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
+to {
+    opacity: 1;
+    transform: scale(1);
 }
-.week-timeline__events[data-v-9aaa9a54] {
 }
 
-.calendar-week__wrapper[data-v-65517675] {
-	position: relative;
-	padding-inline-start: var(--qalendar-week-padding-left);
-	overflow-y: auto;
+.weekGrid[data-v-f774fc40]{
+	display: grid;
+	grid-template-columns: 5rem repeat(7, 1fr);
 }
-.calendar-week[data-v-65517675] {
-	position: relative;
-	width: 100%;
-	flex: 1 1 auto;
+.days-column[data-v-f774fc40] {
+  flex-grow: 1;
+  display: flex;
 }
-.calendar-week__events[data-v-65517675] {
-	display: flex;
-	width: 100%;
-	height: var(--ec938e6e);
-	overflow: hidden;
+.time-slot[data-v-f774fc40] {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
 }
-.calendar-week .current-time-line[data-v-65517675] {
-	position: absolute;
-	inset-inline-start: 0;
-	width: 100%;
-	height: 2px;
-	z-index: 1;
-	background-color: red;
+.time-slots[data-v-f774fc40] {
+  flex-grow: 1;
+  display: flex;
+  overflow: auto;
+  position: relative;
 }
-.calendar-week .current-time-line__circle[data-v-65517675] {
-	position: relative;
+.day-column[data-v-f774fc40] {
+  flex: 1;
 }
-.calendar-week .current-time-line__circle[data-v-65517675]::before {
-	content: '';
-	position: absolute;
-	transform: translate(-45%, -45%);
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	background-color: red;
+.event[data-v-f774fc40] {
+  margin-right: 2px;
 }
-.calendar-week .custom-current-time[data-v-65517675] {
-	position: absolute;
-	inset-inline-start: 0;
-	width: 100%;
-	z-index: 1;
-}
-:root {
-    /** Color */
-    --qalendar-gray-quite-dark: rgb(110 110 110);
-    --qalendar-gray: rgb(180 180 180);
-    --qalendar-green: rgb(51 182 121);
-    --qalendar-theme-color: var(--qalendar-blue);
-    --qalendar-light-gray: rgba(240 236 236 / 76%);
-    --qalendar-option-hover: var(--qalendar-light-gray);
-
-    --qalendar-dark-mode-elevated-surface: #383838;
-    --qalendar-dark-mode-lightly-elevated-surface: #2e2e2e;
-    --qalendar-dark-mode-text-primary: rgba(255 255 255 1);
-    --qalendar-dark-mode-text-secondary: rgba(255 255 255 0.7);
-    --qalendar-dark-mode-text-hint: rgba(255 255 255 0.5);
-    --qalendar-dark-mode-line-color: var(--qalendar-gray);
-
-    /** Borders */
-    --qalendar-border-gray-thin: 1px solid rgb(224 224 224);
-    --qalendar-border-dashed-gray-thin: 1px dashed rgb(224 224 224);
-    --qalendar-border-blue-thin: 1px solid var(--qalendar-theme-color);
-    --qalendar-border-radius: 8px;
-
-    /** Spacing */
-    --qalendar-spacing: 10px;
-    --qalendar-spacing-half: 5px;
-    --qalendar-spacing-double: 20px;
-
-    /** Miscellaneous */
-    --qalendar-box-shadow: 0 4px 4px rgba(0 0 0 / 6%), 0 1px 4px rgba(0 0 0 / 18%);
-    --qalendar-text-transition: color 0.2s ease;
-    --qalendar-week-padding-left: 56px;
-
-    /** Font */
-    --qalendar-font-2xs: 10px;
-    --qalendar-font-xs: 12px;
-    --qalendar-font-s: 14px;
-    --qalendar-font-m: 16px;
-    --qalendar-font-l: 18px;
-}
-@media (min-width: 62rem) {
-.calendar-root {
-        --qalendar-spacing: 20px;
-        --qalendar-spacing-half: 10px;
-        --qalendar-spacing-double: 40px;
-}
-}
-.calendar-root-wrapper {
-	width: 100%;
-	max-width: 100vw;
-	height: 100%;
-	display: flex;
+.event[data-v-f774fc40]:hover {
+  z-index: 1;
 }
-.calendar-root-wrapper .calendar-root {
-	flex: 1;
-	border-radius: var(--qalendar-border-radius);
-	position: relative;
-	width: 100%;
-	margin: 0 auto;
-	display: flex;
-	flex-flow: column;
+.drag-preview[data-v-f774fc40] {
+  border: 2px solid var(--bgl-primary);
 }
-.calendar-root-wrapper .calendar-root .calendar-month__weeks{
-	border-inline: var(--qalendar-border-gray-thin);
+.current-time-line[data-v-f774fc40] {
+  height: 2px;
 }
-.calendar-root-wrapper .calendar-root .top-bar-loader {
-	position: absolute;
-	top: 1px;
-	left: 2px;
-	width: calc(100% - 4px);
-	height: 3px;
-	background: rgba(241, 241, 241, 0.2);
-	border-radius: 16px;
-	overflow: hidden;
+.custom-popover[data-v-f774fc40] {
+  min-width: 250px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: fadeIn-f774fc40 0.2s ease;
+  transform-origin: center left;
 }
-.calendar-root-wrapper .calendar-root .top-bar-loader:before {
-	content: '';
-	height: 4px;
-	width: calc(100% - 4px);
-	position: absolute;
-	top: 1px;
-	left: 2px;
-	background: rgb(38, 132, 255);
-	background: linear-gradient(
-		90deg,
-		rgba(38, 132, 255, 1) 0%,
-		rgba(38, 132, 255, 0.5088410364145659) 48%,
-		rgba(38, 132, 255, 1) 100%
-	);
-	animation: load 1.8s infinite;
-	border-radius: 16px;
-}
-@media (prefers-color-scheme: dark) {
-.calendar-root-wrapper .calendar-root .top-bar-loader:before {
-		background: rgb(229, 224, 245);
-}
-}
-@keyframes load {
-0% {
-		width: 0;
-		left: -100%;
-}
-50% {
-		left: 0;
-		width: 100%;
+@keyframes fadeIn-f774fc40 {
+from {
+    opacity: 0;
+    transform: scale(0.95);
 }
-100% {
-		width: 0;
-		left: 100%;
+to {
+    opacity: 1;
+    transform: scale(1);
 }
 }
-.calendar-root-wrapper .calendar-root .loading-enter-active,
-.calendar-root-wrapper .calendar-root .loading-leave-active {
-	transition: background 0.5s ease;
+@media screen and (max-width: 910px) {
 }
-.calendar-root-wrapper .calendar-root .loading-leave-to,
-.calendar-root-wrapper .calendar-root .loading-enter-from {
-	background-color: rgba(255, 255, 255, 0);
+
+.calendar[data-v-b1af1548] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 
 .card_label {
@@ -1307,6 +1108,126 @@ fieldset[data-v-f7e758e5] {
 .fi[data-v-f99f1900]:before{ content:" "
 }
 
+.bgl-multi-step-form[data-v-4ead8342] {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	/* Default transition duration */
+	--transition-duration: 200ms;
+	--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); */
+}
+.bgl-steps-indicator[data-v-4ead8342] {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 1rem;
+}
+.bgl-step-indicator[data-v-4ead8342] {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+}
+.bgl-step-indicator[data-v-4ead8342]::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	right: 50%;
+	height: 2px;
+	width: 100%;
+	background: #e0e0e0;
+	z-index: -1;
+}
+.bgl-step-indicator[data-v-4ead8342]:first-child::before {
+	display: none;
+}
+.bgl-step-indicator > span[data-v-4ead8342]:first-child {
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	background: #e0e0e0;
+	color: #555;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 0.5rem;
+}
+.bgl-step-indicator.active > span[data-v-4ead8342]:first-child {
+	background: var(--primary-color, #4CAF50);
+	color: white;
+}
+.bgl-step-indicator.completed > span[data-v-4ead8342]:first-child {
+	background: var(--success-color, #8BC34A);
+	color: white;
+}
+.bgl-step-indicator.clickable[data-v-4ead8342] {
+	cursor: pointer;
+}
+.bgl-step-label[data-v-4ead8342] {
+	font-size: 0.8rem;
+	max-width: 100px;
+	text-align: center;
+}
+.bgl-form-wrapper[data-v-4ead8342] {
+	display: grid;
+	overflow: clip;
+	height: auto;
+	min-height: 300px;
+	transition: height var(--transition-duration) ease;
+	interpolate-size: allow-keywords;
+}
+.bgl-form-wrapper > div[data-v-4ead8342] {
+	grid-area: 1 / 1;
+}
+.bgl-form-container[data-v-4ead8342] {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.bgl-step-controls[data-v-4ead8342] {
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	margin-top: 1.5rem;
+}
+
+/* Slide Left Animation (going forward) */
+.slide-left-enter-active[data-v-4ead8342] {
+	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+}
+.slide-left-leave-active[data-v-4ead8342] {
+	transition: opacity, transform var(--transition-duration) var(--ease-out);
+}
+.slide-left-enter-from[data-v-4ead8342] {
+	opacity: 0;
+	transform: translateX(var(--move-distance));
+}
+.slide-left-leave-to[data-v-4ead8342] {
+	opacity: 0;
+	transform: translateX(-30%);
+}
+
+/* Slide Right Animation (going back) */
+.slide-right-enter-active[data-v-4ead8342] {
+	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+}
+.slide-right-leave-active[data-v-4ead8342] {
+	transition: all var(--transition-duration) var(--ease-out);
+	transition-property: opacity, transform;
+}
+.slide-right-enter-from[data-v-4ead8342] {
+	opacity: 0;
+	transform: translateX(-30%);
+}
+.slide-right-leave-to[data-v-4ead8342] {
+	opacity: 0;
+	transform: translateX(var(--move-distance));
+}
+
 .minimized {
 	height: 2.4rem;
 	overflow: hidden;
@@ -1429,26 +1350,35 @@ pre code.hljs{
 	position: absolute;
 }
 
-.codeText[data-v-1fbc9b61]{
+.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-wrap[data-v-1fbc9b61] {
+.code-editor-wrap[data-v-13335b34] {
   background: #282c34;
   height: max-content;
 }
-.code-editor[data-v-1fbc9b61] {
+.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-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[data-v-13335b34] {
   color: transparent;
   resize: none;
 }
-.code-editor[data-v-1fbc9b61]::selection {
+.code-editor[data-v-13335b34]::selection {
   background: #2466bc30;
   color: inherit;
 }
-.code-editor[data-v-1fbc9b61]:focus {
+.code-editor[data-v-13335b34]:focus {
   outline: none;
 }
 
@@ -1466,73 +1396,73 @@ pre code.hljs{
 	outline-color: var(--input-bg);
 }
 
-.calendar-container[data-v-a15ca839] {
+.calendar-container[data-v-9c8816c6] {
 	max-width: 90vw;
 }
-.calendar-section[data-v-a15ca839] {
+.calendar-section[data-v-9c8816c6] {
 	min-width: 280px;
 }
-.calendar-grid[data-v-a15ca839] {
+.calendar-grid[data-v-9c8816c6] {
 	grid-template-columns: repeat(7, 1fr);
 }
-.month-grid[data-v-a15ca839] {
+.month-grid[data-v-9c8816c6] {
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(4, 1fr);
 }
-.year-grid[data-v-a15ca839] {
+.year-grid[data-v-9c8816c6] {
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(7, 1fr);
 }
-.month-item[data-v-a15ca839],
-.year-item[data-v-a15ca839] {
+.month-item[data-v-9c8816c6],
+.year-item[data-v-9c8816c6] {
 	background: none;
 	color: var(--bgl-text-color);
 }
-.month-item[data-v-a15ca839]:hover:not(.disabled),
-.year-item[data-v-a15ca839]:hover:not(.disabled) {
+.month-item[data-v-9c8816c6]:hover:not(.disabled),
+.year-item[data-v-9c8816c6]:hover:not(.disabled) {
 	background: var(--bgl-box-bg);
 	filter: var(--bgl-hover-filter);
 }
-.month-item[data-v-a15ca839]:active:not(.disabled),
-.year-item[data-v-a15ca839]:active:not(.disabled) {
+.month-item[data-v-9c8816c6]:active:not(.disabled),
+.year-item[data-v-9c8816c6]:active:not(.disabled) {
 	background: var(--bgl-box-bg);
 	filter: var(--bgl-active-filter);
 }
-.month-item.selected[data-v-a15ca839],
-.year-item.selected[data-v-a15ca839] {
+.month-item.selected[data-v-9c8816c6],
+.year-item.selected[data-v-9c8816c6] {
 	background-color: var(--bgl-primary);
 	color: white;
 }
-.month-item.disabled[data-v-a15ca839],
-.year-item.disabled[data-v-a15ca839] {
+.month-item.disabled[data-v-9c8816c6],
+.year-item.disabled[data-v-9c8816c6] {
 	opacity: 0.6;
 	filter: grayscale(0.3);
 }
-.day[data-v-a15ca839] {
+.day[data-v-9c8816c6] {
 	border: none;
 	background: none;
 	color: var(--bgl-text-color);
 }
-.day[data-v-a15ca839]:hover:not(.disabled) {
+.day[data-v-9c8816c6]:hover:not(.disabled) {
 	background-color: var(--input-bg);
 }
-.day.selected[data-v-a15ca839] {
+.day.selected[data-v-9c8816c6] {
 	background-color: var(--bgl-primary);
 	color: var(--bgl-white);
 }
-.day.today[data-v-a15ca839]:not(.selected) {
+.day.today[data-v-9c8816c6]:not(.selected) {
 	border: 1px solid var(--bgl-primary);
 }
-.day.disabled[data-v-a15ca839] {
+.day.disabled[data-v-9c8816c6] {
 	opacity: 0.6;
 	filter: grayscale(0.3);
 	cursor: not-allowed;
 }
-.day.not-in-month[data-v-a15ca839] {
+.day.not-in-month[data-v-9c8816c6] {
 	opacity: 0.4;
 }
 
-.date-picker-container[data-v-3998396f] {
+.date-picker-container[data-v-6202aa21] {
 	width: 100%;
 }
 
@@ -2150,10 +2080,10 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	/* color: var(--input-color); */
 }
 
-.selectinput[data-v-da5bc268] {
+.selectinput[data-v-0432625c] {
 	width: 100%;
 }
-.selectinput-option[data-v-da5bc268] {
+.selectinput-option[data-v-0432625c] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -2165,23 +2095,23 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-da5bc268]{
+.selectinput-option .bgl_icon-font[data-v-0432625c]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-da5bc268] {
+.selectinput-options.multiselect .selectinput-option[data-v-0432625c] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-da5bc268] {
+.selectinput-options[data-v-0432625c] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-da5bc268]:hover, .highlight[data-v-da5bc268] {
+.selectinput-option[data-v-0432625c]:hover, .highlight[data-v-0432625c] {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-da5bc268] {
+.isEmpty p[data-v-0432625c] {
 	opacity: 0.3;
 }
-.selected[data-v-da5bc268]{
+.selected[data-v-0432625c]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }
@@ -6988,9 +6918,10 @@ to {
     flex-direction: column-reverse;
 }.row {
     flex-direction: row;
-}.flex-grow {
+}.flex-grow,
+.flex-grow-1 {
     flex-grow: 1;
-}.flex-shrink {
+}.flex-shrink, .flex-shrink-1 {
     flex-shrink: 1;
 }.flex-no-grow,
 .flex-grow-0 {
@@ -11488,11 +11419,13 @@ to {
         flex-direction: row;
     }
 
-    .m_flex-grow {
+    .m_flex-grow,
+    .m_flex-grow-1 {
         flex-grow: 1;
     }
 
-    .m_flex-shrink {
+    .m_flex-shrink,
+    .m_flex-shrink-1 {
         flex-shrink: 1;
     }
 
@@ -14955,156 +14888,156 @@ to {
 }input,
 textarea,
 select {
-	font-family: inherit;
-	width: 100%;
+    font-family: inherit;
+    width: 100%;
 }.bagel-input-error input,
 .bagel-input-error button,
 .bagel-input-error textarea {
-	outline: 1px solid var(--bgl-red);
+    outline: 1px solid var(--bgl-red);
 }.bagel-input {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	text-align: start;
-	margin-bottom: 0.5rem;
-	width: 100%;
-	color: var(--bgl-text-color);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    text-align: start;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    color: var(--bgl-text-color);
 }.bagel-input::-webkit-input-placeholder .bagel-input label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
 }.bagel-input::-moz-placeholder .bagel-input label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
 }.bagel-input:-ms-input-placeholder .bagel-input label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
 }.bagel-input::-ms-input-placeholder .bagel-input label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
 }.bagel-input::placeholder .bagel-input label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
 }.bagel-input::-webkit-input-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input::-moz-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input:-ms-input-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input::-ms-input-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input::placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input label {
-	color: var(--label-color);
+    color: var(--label-color);
 }.bagel-input input,
 .bagel-input select,
 .custom-select .input {
-	height: var(--input-height);
-	font-size: var(--input-font-size);
+    height: var(--input-height);
+    font-size: var(--input-font-size);
 }.bagel-input input,
 .bagel-input textarea,
 .bagel-input select,
 .custom-select .input {
-	background: var(--input-bg);
-	border: none;
-	padding: 0.7rem;
-	border-radius: var(--input-border-radius);
-	color: var(--input-color);
-	min-width: calc(var(--input-height) * 3);
-	width: 100%;
+    background: var(--input-bg);
+    border: none;
+    padding: 0.7rem;
+    border-radius: var(--input-border-radius);
+    color: var(--input-color);
+    min-width: calc(var(--input-height) * 3);
+    width: 100%;
 }.bagel-input input::-webkit-input-placeholder,
 .bagel-input textarea::-webkit-input-placeholder,
 .bagel-input select::-webkit-input-placeholder,
 .custom-select .input::-webkit-input-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input input::-moz-placeholder,
 .bagel-input textarea::-moz-placeholder,
 .bagel-input select::-moz-placeholder,
 .custom-select .input::-moz-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input input:-ms-input-placeholder,
 .bagel-input textarea:-ms-input-placeholder,
 .bagel-input select:-ms-input-placeholder,
 .custom-select .input:-ms-input-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input input::-ms-input-placeholder,
 .bagel-input textarea::-ms-input-placeholder,
 .bagel-input select::-ms-input-placeholder,
 .custom-select .input::-ms-input-placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
 .custom-select .input::placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }.bagel-input.search-wrap {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }.bagel-input.search-wrap input {
-	-webkit-padding-end: 2rem;
-	padding-inline-end: 2rem;
+    -webkit-padding-end: 2rem;
+    padding-inline-end: 2rem;
 }.bagel-input.search-wrap .bgl_icon-font {
-	-webkit-margin-start: -1.75rem;
-	margin-inline-start: -1.75rem;
+    -webkit-margin-start: -1.75rem;
+    margin-inline-start: -1.75rem;
 }.bagel-input select {
-	height: var(--input-height);
+    height: var(--input-height);
 }.bagel-input textarea {
-	resize: vertical;
-	min-height: calc(var(--input-height) * 3);
-	line-height: 1.5;
+    resize: vertical;
+    min-height: calc(var(--input-height) * 3);
+    line-height: 1.5;
 }.bagel-input.wider input {
-	min-width: 320px;
+    min-width: 320px;
 }.bagel-input input[type='radio'] {
-	padding: 0;
-	width: -webkit-fit-content;
-	width: -moz-fit-content;
-	width: fit-content;
+    padding: 0;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
 }.bagel-input:focus-within label {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }.bagel-input select.no-edit,
 .bagel-input input.no-edit,
 .bagel-input textarea.no-edit,
 .bagel-input .switch.no-edit {
-	pointer-events: none;
-	outline: none;
-	opacity: 0.7;
+    pointer-events: none;
+    outline: none;
+    opacity: 0.7;
 }.bagel-input label.active {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }.inline-80 {
-	display: inline-block;
-	width: 80%;
+    display: inline-block;
+    width: 80%;
 }.inline-20 {
-	display: inline-block;
-	width: 20%;
+    display: inline-block;
+    width: 20%;
 }.inline-10 {
-	display: inline-block;
-	width: 20%;
+    display: inline-block;
+    width: 20%;
 }.inline-50 {
-	display: inline-block;
-	width: 49%;
-	margin: 0 0.5%;
+    display: inline-block;
+    width: 49%;
+    margin: 0 0.5%;
 }.custom-select .input {
-	height: var(--input-height);
-	font-size: var(--input-font-size);
+    height: var(--input-height);
+    font-size: var(--input-font-size);
 }.custom-select .input {
-	background: var(--input-bg);
-	border: none;
-	padding: 0.7rem;
-	border-radius: var(--input-border-radius);
-	color: var(--input-color);
-	min-width: calc(var(--input-height) * 3);
-	width: 100%;
+    background: var(--input-bg);
+    border: none;
+    padding: 0.7rem;
+    border-radius: var(--input-border-radius);
+    color: var(--input-color);
+    min-width: calc(var(--input-height) * 3);
+    width: 100%;
 }/* [dir='rtl'] .bagel-input input[type='email'],
 [dir='rtl'] .tel-input input[type='tel'] {
     direction: ltr;
@@ -15114,79 +15047,80 @@ select {
 .bagel-input textarea:focus-visible,
 .bagel-input button:focus-visible,
 .bgl_btn:focus-visible {
-	outline-color: var(--bgl-primary-tint);
-	box-shadow: inset 0 0 10px #00000012;
+    outline-color: var(--bgl-primary-tint);
+    box-shadow: inset 0 0 10px #00000012;
 }.bagel-input input:focus,
 .bagel-input select:focus,
 .bagel-input textarea:focus {
-	outline-color: rgba(0, 0, 0, 0.05);
-	box-shadow: inset 0 0 10px #00000021;
-	outline-color: var(--input-bg);
+    outline-color: rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 0 10px #00000021;
+    outline-color: var(--input-bg);
+
 }.bagel-input .bgl_btn:focus,
 .bagel-input button:focus {
-	outline-color: rgba(0, 0, 0, 0.05);
-	outline-color: var(--input-bg);
+    outline-color: rgba(0, 0, 0, 0.05);
+    outline-color: var(--input-bg);
 }.bagel-input.light-input input,
 .bagel-input.light-input textarea,
 .bagel-input.light-input select,
 .custom-select.light-input .input,
 .light-input .selectinput-btn {
-	background: var(--bgl-popup-bg) !important;
-	box-shadow:
-		0 1px 5px 0 rgba(0, 0, 0, 0.1),
-		0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
-	outline: 1px solid var(--border-color) !important;
+    background: var(--bgl-popup-bg) !important;
+    box-shadow:
+        0 1px 5px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
+    outline: 1px solid var(--border-color) !important;
 }.input.active.light-input,
 .bagel-input.light-input input:focus-visible,
 .bagel-input.light-input select:focus-visible,
 .bagel-input.light-input textarea:focus-visible {
-	box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
+    box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
 }.bagel-input input[type='number']-webkit-inner-spin-button,
 .bagel-input input[type='number']::-webkit-outer-spin-button {
-	-webkit-appearance: none;
+    -webkit-appearance: none;
 }.label-count-0 label {
-	display: none;
+    display: none;
 }.label-count-0 button.bgl_btn.bgl_flatBtn {
-	margin-right: 5px;
+    margin-right: 5px;
 }.label-count-0 button.bgl_btn.bgl_flatBtn:hover {
-	background: var(--bgl-hover-filter);
+    background: var(--bgl-hover-filter);
 }.bagel-input input[type='color'] {
-	padding: 0.025rem 0.05rem;
-	display: block;
-	width: var(--input-height);
-	min-width: var(--input-height);
-	height: var(--input-height);
-	border: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	cursor: pointer;
+    padding: 0.025rem 0.05rem;
+    display: block;
+    width: var(--input-height);
+    min-width: var(--input-height);
+    height: var(--input-height);
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
 }.bagel-input input[type='color']::-webkit-color-swatch {
-	border-radius: var(--input-border-radius);
-	border: none;
-	-webkit-transition: box-shadow 200ms ease;
-	transition: box-shadow 200ms ease;
+    border-radius: var(--input-border-radius);
+    border: none;
+    -webkit-transition: box-shadow 200ms ease;
+    transition: box-shadow 200ms ease;
 }.bagel-input input[type='color']::-moz-color-swatch {
-	border-radius: var(--input-border-radius);
-	border: none;
-	-moz-transition: box-shadow 200ms ease;
-	transition: box-shadow 200ms ease;
+    border-radius: var(--input-border-radius);
+    border: none;
+    -moz-transition: box-shadow 200ms ease;
+    transition: box-shadow 200ms ease;
 }.bagel-input input[type='color']::-webkit-color-swatch:hover {
-	box-shadow: inset 0 0 10px #00000050;
+    box-shadow: inset 0 0 10px #00000050;
 }.bagel-input input[type='color']::-moz-color-swatch:hover {
-	box-shadow: inset 0 0 10px #00000050;
+    box-shadow: inset 0 0 10px #00000050;
 }@media screen and (max-width: 910px) {
-	.bagel-input.wider input {
-		min-width: 120px;
-	}
+    .bagel-input.wider input {
+        min-width: 120px;
+    }
 }.pixel {
-	width: 0 !important;
-	height: 0 !important;
-	overflow: hidden !important;
-	outline: none !important;
-	position: absolute !important;
-	bottom: 0 !important;
-	left: 50% !important;
+    width: 0 !important;
+    height: 0 !important;
+    overflow: hidden !important;
+    outline: none !important;
+    position: absolute !important;
+    bottom: 0 !important;
+    left: 50% !important;
 }.bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {