@bagelink/vue 0.0.280 → 0.0.284

package/dist/style.css

@@ -897,10 +897,10 @@ th[data-v-2137a7a8] {
 }
 .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}
 
-.combobox[data-v-32f19dd0] {
+.combobox[data-v-ceeb5855] {
   width: 100%;
 }
-.combobox-option[data-v-32f19dd0] {
+.combobox-option[data-v-ceeb5855] {
   padding: 6px 12px;
   cursor: pointer;
   border-radius: 5px;
@@ -909,11 +909,11 @@ th[data-v-2137a7a8] {
   justify-content: space-between;
   width: 100%;
 }
-.combobox-options[data-v-32f19dd0] {
+.combobox-options[data-v-ceeb5855] {
   max-height: 300px;
   overflow-y: auto;
 }
-.combobox-option[data-v-32f19dd0]:hover {
+.combobox-option[data-v-ceeb5855]:hover {
   background: var(--bgl-gray-20);
 }
 
@@ -1418,7 +1418,7 @@ fieldset[disabled] .multiselect {
   border-top: none;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  z-index: 50;
+  z-index: 150;
   -webkit-overflow-scrolling: touch;
 }
 .multiselect__content {
@@ -2210,130 +2210,121 @@ img.preview[data-v-1be8d7b1] {
 
 
 .grid {
-	display: grid;
+    display: grid;
 }
 .inline-grid {
-	display: inline-grid;
+    display: inline-grid;
 }
 .fill {
-	width: 100vw;
-	height: 100vh;
+    width: 100vw;
+    height: 100vh;
 }
 .justify-items-center {
-	justify-items: center;
+    justify-items: center;
 }
 .justify-content-center {
-	justify-content: center;
+    justify-content: center;
 }
 .justify-content-start {
-	justify-content: start;
+    justify-content: start;
 }
 .align-content-center {
-	align-content: center;
+    align-content: center;
 }
 .align-items-top {
-	align-items: flex-start !important;
+    align-items: flex-start !important;
 }
 .align-items-center {
-	align-items: center;
+    align-items: center;
 }
 .row-gap-1 {
-	row-gap: 0.2rem;
+    row-gap: 0.2rem;
 }
 .row-gap-2 {
-	row-gap: 0.5rem;
+    row-gap: 0.5rem;
 }
 .row-gap-3 {
-	row-gap: 1rem;
+    row-gap: 1rem;
 }
 .align-items-end {
-	align-items: end !important;
+    align-items: end !important;
 }
 .fit-content {
-	width: fit-content;
-	height: fit-content;
+    width: fit-content;
+    height: fit-content;
 }
 .margin-auto {
-	margin-left: auto;
-	margin-right: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 .auto-flow-columns {
-	grid-auto-flow: column;
+    grid-auto-flow: column;
 }
 .grid-2-col {
-	grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
 }
 .justify-content-between {
-	justify-content: space-between;
+    justify-content: space-between;
 }
 .justify-self-start {
-	justify-self: start;
+    justify-self: start;
 }
 .columns-max-content {
-	grid-auto-columns: max-content;
-}
-.w-100 {
-	width: 100%;
+    grid-auto-columns: max-content;
 }
 .col-gap-1 {
-	column-gap: 1rem;
+    column-gap: 1rem;
 }
 .col-gap-05 {
-	column-gap: 0.5rem;
+    column-gap: 0.5rem;
 }
 .rows-max-content {
-	grid-auto-rows: max-content;
+    grid-auto-rows: max-content;
 }
-.grid.overflow > * {
-	min-width: 0px;
-	overflow: auto;
+.grid.overflow>* {
+    min-width: 0px;
+    overflow: auto;
 }
 .ps-1 {
-	padding-left: 1rem;
+    padding-left: 1rem;
 }
 .justify-content-around {
-	justify-content: space-between;
+    justify-content: space-between;
 }
 .justify-content-end {
-	justify-content: end;
+    justify-content: end;
 }
 .justify-self-end {
-	justify-self: end;
+    justify-self: end;
 }
 .justify-self-center {
-	justify-self: center;
+    justify-self: center;
 }
 .position-right {
-	position: absolute;
-	top: 0px;
-	right: 0px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
 }
 .position-absolute {
-	position: absolute;
+    position: absolute;
 }
 .position-relative {
-	position: relative;
+    position: relative;
 }
 .auto-flow-rows {
-	grid-auto-flow: row;
+    grid-auto-flow: row;
 }
 .align-items-start {
-	align-items: start !important;
+    align-items: start !important;
 }
 .align-self-end {
-	align-self: end;
-}
-.h-100 {
-	height: 100%;
-}
-.vh-100 {
-	height: 100vh;
+    align-self: end;
 }
 .min-100 {
-	min-height: 100%;
+    min-height: 100%;
 }
 .w-100 {
-	width: 100%;
+    width: 100%;
 }
 .w300,
 .w350,
@@ -2343,398 +2334,625 @@ img.preview[data-v-1be8d7b1] {
 .w550,
 .w600,
 .w650,
-.w700 {
-	margin-left: auto;
-	margin-right: auto;
-	width: 98%;
+.w700,
+.w770,
+.w900,
+.w970,
+.w1030,
+.w1170 {
+    margin-left: auto;
+    margin-right: auto;
+    width: 98%;
 }
 .w300 {
-	max-width: 300px;
+    max-width: 300px;
 }
 .w350 {
-	max-width: 350px;
+    max-width: 350px;
 }
 .w400 {
-	max-width: 400px;
+    max-width: 400px;
 }
 .w450 {
-	max-width: 450px;
+    max-width: 450px;
 }
 .w500 {
-	max-width: 500px;
+    max-width: 500px;
 }
 .w550 {
-	max-width: 550px;
+    max-width: 550px;
 }
 .w600 {
-	max-width: 600px;
+    max-width: 600px;
 }
 .w650 {
-	max-width: 650px;
+    max-width: 650px;
 }
 .w650 {
-	max-width: 700px;
+    max-width: 700px;
+}
+.w770 {
+    max-width: 770px;
+}
+.w900 {
+    max-width: 900px;
+}
+.w970 {
+    max-width: 970px;
+}
+.w1030 {
+    max-width: 1030px;
+}
+.w1170 {
+    max-width: 1170px;
 }
 .gap-1 {
-	gap: 0.25rem;
+    gap: 0.25rem;
 }
 .gap-2 {
-	gap: 0.5rem;
+    gap: 0.5rem;
 }
 .gap-3 {
-	gap: 1rem;
+    gap: 1rem;
 }
 .gap-col-1 {
-	column-gap: 0.25rem;
+    column-gap: 0.25rem;
 }
 .gap-col-2 {
-	column-gap: 0.5rem;
+    column-gap: 0.5rem;
 }
 .gap-col-3 {
-	column-gap: 1rem;
+    column-gap: 1rem;
 }
 .gap-row-1 {
-	row-gap: 0.25rem;
+    row-gap: 0.25rem;
 }
 .gap-row-2 {
-	row-gap: 0.5rem;
+    row-gap: 0.5rem;
 }
 .gap-row-3 {
-	row-gap: 1rem;
+    row-gap: 1rem;
 }
 .flex-wrap {
-	flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 .column {
-	flex-direction: column;
+    flex-direction: column;
 }
 .row {
-	flex-direction: row;
+    flex-direction: row;
 }
 .flex-grow {
-	flex-grow: 1;
+    flex-grow: 1;
 }
 .flex-shrink {
-	flex-shrink: 1;
+    flex-shrink: 1;
 }
 .flex-2-col {
-	max-width: 50%;
-	flex: 1 1 calc(50% - 2rem);
+    max-width: 50%;
+    flex: 1 1 calc(50% - 2rem);
 }
 .flex-3-col {
-	flex: 1 1 33.33333%;
+    flex: 1 1 33.33333%;
 }
 .mb-auto {
-	margin-bottom: auto !important;
+    margin-bottom: auto !important;
 }
 .mb-0 {
-	margin-bottom: 0rem !important;
+    margin-bottom: 0rem !important;
 }
 .mb-025 {
-	margin-bottom: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
 }
 .mb-05 {
-	margin-bottom: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
 }
 .mb-075 {
-	margin-bottom: 0.75rem !important;
+    margin-bottom: 0.75rem !important;
 }
 .mb-1 {
-	margin-bottom: 1rem !important;
+    margin-bottom: 1rem !important;
 }
 .mb-2 {
-	margin-bottom: 2rem !important;
+    margin-bottom: 2rem !important;
 }
 .mb-3 {
-	margin-bottom: 3rem !important;
+    margin-bottom: 3rem !important;
 }
 .mb-4 {
-	margin-bottom: 4rem !important;
+    margin-bottom: 4rem !important;
 }
 .mt-auto {
-	margin-top: auto !important;
+    margin-top: auto !important;
 }
 .mt-0 {
-	margin-top: 0rem !important;
+    margin-top: 0rem !important;
 }
 .mt-025 {
-	margin-top: 0.25rem !important;
+    margin-top: 0.25rem !important;
 }
 .mt-05 {
-	margin-top: 0.5rem !important;
+    margin-top: 0.5rem !important;
 }
 .mt-075 {
-	margin-top: 0.75rem !important;
+    margin-top: 0.75rem !important;
 }
 .mt-1 {
-	margin-top: 1rem !important;
+    margin-top: 1rem !important;
 }
 .mt-2 {
-	margin-top: 2rem !important;
+    margin-top: 2rem !important;
 }
 .mt-3 {
-	margin-top: 3rem !important;
+    margin-top: 3rem !important;
 }
 .mt-4 {
-	margin-top: 4rem !important;
+    margin-top: 4rem !important;
 }
 .ms-auto {
-	margin-inline-start: auto !important;
+    margin-inline-start: auto !important;
 }
 .ms-0 {
-	margin-inline-start: 0rem !important;
+    margin-inline-start: 0rem !important;
 }
 .ms-025 {
-	margin-inline-start: 0.25rem !important;
+    margin-inline-start: 0.25rem !important;
 }
 .ms-05 {
-	margin-inline-start: 0.5rem !important;
+    margin-inline-start: 0.5rem !important;
 }
 .ms-075 {
-	margin-inline-start: 0.75rem !important;
+    margin-inline-start: 0.75rem !important;
 }
 .ms-1 {
-	margin-inline-start: 1rem !important;
+    margin-inline-start: 1rem !important;
 }
 .ms-2 {
-	margin-inline-start: 2rem !important;
+    margin-inline-start: 2rem !important;
 }
 .ms-3 {
-	margin-inline-start: 3rem !important;
+    margin-inline-start: 3rem !important;
 }
 .ms-4 {
-	margin-inline-start: 4rem !important;
+    margin-inline-start: 4rem !important;
 }
 .me-auto {
-	margin-inline-end: auto !important;
+    margin-inline-end: auto !important;
 }
 .me-0 {
-	margin-inline-end: 0rem !important;
+    margin-inline-end: 0rem !important;
 }
 .me-025 {
-	margin-inline-end: 0.25rem !important;
+    margin-inline-end: 0.25rem !important;
 }
 .me-05 {
-	margin-inline-end: 0.5rem !important;
+    margin-inline-end: 0.5rem !important;
 }
 .me-075 {
-	margin-inline-end: 0.75rem !important;
+    margin-inline-end: 0.75rem !important;
 }
 .me-1 {
-	margin-inline-end: 1rem !important;
+    margin-inline-end: 1rem !important;
 }
 .me-2 {
-	margin-inline-end: 2rem !important;
+    margin-inline-end: 2rem !important;
 }
 .me-3 {
-	margin-inline-end: 3rem !important;
+    margin-inline-end: 3rem !important;
 }
 .me-4 {
-	margin-inline-end: 4rem !important;
+    margin-inline-end: 4rem !important;
 }
 .-mb-025 {
-	margin-bottom: -0.25rem !important;
+    margin-bottom: -0.25rem !important;
 }
 .-mb-05 {
-	margin-bottom: -0.5rem !important;
+    margin-bottom: -0.5rem !important;
 }
 .-mb-075 {
-	margin-bottom: -0.75rem !important;
+    margin-bottom: -0.75rem !important;
 }
 .-mb-1 {
-	margin-bottom: -1rem !important;
+    margin-bottom: -1rem !important;
 }
 .-mb-2 {
-	margin-bottom: -2rem !important;
+    margin-bottom: -2rem !important;
 }
 .-mb-3 {
-	margin-bottom: -3rem !important;
+    margin-bottom: -3rem !important;
 }
 .-mb-4 {
-	margin-bottom: -4rem !important;
+    margin-bottom: -4rem !important;
 }
 .-mt-025 {
-	margin-top: -0.25rem !important;
+    margin-top: -0.25rem !important;
 }
 .-mt-05 {
-	margin-top: -0.5rem !important;
+    margin-top: -0.5rem !important;
 }
 .-mt-075 {
-	margin-top: 0.75rem !important;
+    margin-top: 0.75rem !important;
 }
 .-mt-1 {
-	margin-top: -1rem !important;
+    margin-top: -1rem !important;
 }
 .-mt-2 {
-	margin-top: -2rem !important;
+    margin-top: -2rem !important;
 }
 .-mt-3 {
-	margin-top: -3rem !important;
+    margin-top: -3rem !important;
 }
 .-mt-4 {
-	margin-top: -4rem !important;
+    margin-top: -4rem !important;
 }
 .-ms-025 {
-	margin-inline-start: -0.25rem !important;
+    margin-inline-start: -0.25rem !important;
 }
 .-ms-05 {
-	margin-inline-start: -0.5rem !important;
+    margin-inline-start: -0.5rem !important;
 }
 .-ms-075 {
-	margin-inline-start: -0.75rem !important;
+    margin-inline-start: -0.75rem !important;
 }
 .-ms-1 {
-	margin-inline-start: -1rem !important;
+    margin-inline-start: -1rem !important;
 }
 .-ms-2 {
-	margin-inline-start: -2rem !important;
+    margin-inline-start: -2rem !important;
 }
 .-ms-3 {
-	margin-inline-start: -3rem !important;
+    margin-inline-start: -3rem !important;
 }
 .-ms-4 {
-	margin-inline-start: -4rem !important;
+    margin-inline-start: -4rem !important;
 }
 .-me-025 {
-	margin-inline-end: -0.25rem !important;
+    margin-inline-end: -0.25rem !important;
 }
 .-me-05 {
-	margin-inline-end: -0.5rem !important;
+    margin-inline-end: -0.5rem !important;
 }
 .-me-075 {
-	margin-inline-end: -0.75rem !important;
+    margin-inline-end: -0.75rem !important;
 }
 .-me-1 {
-	margin-inline-end: -1rem !important;
+    margin-inline-end: -1rem !important;
 }
 .-me-2 {
-	margin-inline-end: -2rem !important;
+    margin-inline-end: -2rem !important;
 }
 .-me-3 {
-	margin-inline-end: -3rem !important;
+    margin-inline-end: -3rem !important;
 }
 .-me-4 {
-	margin-inline-end: -4rem !important;
+    margin-inline-end: -4rem !important;
 }
 .pb-0 {
-	padding-bottom: 0rem !important;
+    padding-bottom: 0rem !important;
 }
 .pb-1 {
-	padding-bottom: 1rem !important;
+    padding-bottom: 1rem !important;
 }
 .pb-2 {
-	padding-bottom: 2rem !important;
+    padding-bottom: 2rem !important;
 }
 .pb-3 {
-	padding-bottom: 3rem !important;
+    padding-bottom: 3rem !important;
 }
 .pb-4 {
-	padding-bottom: 4rem !important;
+    padding-bottom: 4rem !important;
 }
 .pb-075 {
-	padding-bottom: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
 }
 .pb-05 {
-	padding-bottom: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
 }
 .pb-025 {
-	padding-bottom: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
 }
 .pt-0 {
-	padding-top: 0rem !important;
+    padding-top: 0rem !important;
 }
 .pt-1 {
-	padding-top: 1rem !important;
+    padding-top: 1rem !important;
 }
 .pt-2 {
-	padding-top: 2rem !important;
+    padding-top: 2rem !important;
 }
 .pt-3 {
-	padding-top: 3rem !important;
+    padding-top: 3rem !important;
 }
 .pt-4 {
-	padding-top: 4rem !important;
+    padding-top: 4rem !important;
 }
 .pt-075 {
-	padding-top: 0.75rem !important;
+    padding-top: 0.75rem !important;
 }
 .pt-05 {
-	padding-top: 0.5rem !important;
+    padding-top: 0.5rem !important;
 }
 .pt-025 {
-	padding-top: 0.25rem !important;
+    padding-top: 0.25rem !important;
 }
 .ps-0 {
-	padding-inline-start: 0rem !important;
+    padding-inline-start: 0rem !important;
 }
 .ps-1 {
-	padding-inline-start: 1rem !important;
+    padding-inline-start: 1rem !important;
 }
 .ps-2 {
-	padding-inline-start: 2rem !important;
+    padding-inline-start: 2rem !important;
 }
 .ps-3 {
-	padding-inline-start: 3rem !important;
+    padding-inline-start: 3rem !important;
 }
 .ps-4 {
-	padding-inline-start: 4rem !important;
+    padding-inline-start: 4rem !important;
 }
 .ps-075 {
-	padding-inline-start: 0.75rem !important;
+    padding-inline-start: 0.75rem !important;
 }
 .ps-05 {
-	padding-inline-start: 0.5rem !important;
+    padding-inline-start: 0.5rem !important;
 }
 .ps-025 {
-	padding-inline-start: 0.25rem !important;
+    padding-inline-start: 0.25rem !important;
 }
 .pe-0 {
-	padding-inline-end: 0rem !important;
+    padding-inline-end: 0rem !important;
 }
 .pe-1 {
-	padding-inline-end: 1rem !important;
+    padding-inline-end: 1rem !important;
 }
 .pe-2 {
-	padding-inline-end: 2rem !important;
+    padding-inline-end: 2rem !important;
 }
 .pe-3 {
-	padding-inline-end: 3rem !important;
+    padding-inline-end: 3rem !important;
 }
 .pe-4 {
-	padding-inline-end: 4rem !important;
+    padding-inline-end: 4rem !important;
 }
 .pe-075 {
-	padding-inline-end: 0.75rem !important;
+    padding-inline-end: 0.75rem !important;
 }
 .pe-05 {
-	padding-inline-end: 0.5rem !important;
+    padding-inline-end: 0.5rem !important;
 }
 .pe-025 {
-	padding-inline-end: 0.25rem !important;
+    padding-inline-end: 0.25rem !important;
 }
 .flex {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 }
 .flex-stretch {
-	display: flex;
-	align-items: stretch;
+    display: flex;
+    align-items: stretch;
 }
 .flex-wrap {
-	flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 .flex-end {
-	justify-content: flex-end;
+    justify-content: flex-end;
 }
 .space-between {
-	justify-content: space-between;
+    justify-content: space-between;
 }
 .label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
-	color: var(--label-color);
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+    color: var(--label-color);
+}
+.h-10 {
+    height: 10%;
+}
+.vh-10 {
+    height: 10vh;
+}
+.h-10px {
+    height: 10px;
+}
+.h-20 {
+    height: 20%;
+}
+.vh-20 {
+    height: 20vh;
+}
+.h-20px {
+    height: 20px;
+}
+.h-30 {
+    height: 30%;
+}
+.vh-30 {
+    height: 30vh;
+}
+.h-30px {
+    height: 30px;
+}
+.h-40 {
+    height: 40%;
+}
+.vh-40 {
+    height: 40vh;
+}
+.h-40px {
+    height: 40px;
+}
+.h-50 {
+    height: 50%;
+}
+.vh-50 {
+    height: 50vh;
+}
+.h-50px {
+    height: 50px;
+}
+.h-60 {
+    height: 60%;
+}
+.vh-60 {
+    height: 60vh;
+}
+.h-60px {
+    height: 60px;
+}
+.h-70 {
+    height: 70%;
+}
+.vh-70 {
+    height: 70vh;
+}
+.h-70px {
+    height: 70px;
+}
+.h-80 {
+    height: 80%;
+}
+.vh-80 {
+    height: 80vh;
+}
+.h-80px {
+    height: 80px;
+}
+.h-90 {
+    height: 90%;
+}
+.vh-90 {
+    height: 90vh;
+}
+.h-90px {
+    height: 90px;
+}
+.h-100 {
+    height: 100%;
+}
+.vh-100 {
+    height: 100vh;
+}
+.h-100px {
+    height: 100px;
+}
+.h-150 {
+    height: 150%;
+}
+.vh-150 {
+    height: 150vh;
+}
+.h-150px {
+    height: 150px;
+}
+.h-200 {
+    height: 200%;
+}
+.vh-200 {
+    height: 200vh;
+}
+.h-200px {
+    height: 200px;
+}
+.h-300 {
+    height: 300%;
+}
+.vh-300 {
+    height: 300vh;
+}
+.h-300px {
+    height: 300px;
+}
+.h-400 {
+    height: 400%;
+}
+.vh-400 {
+    height: 400vh;
+}
+.h-400px {
+    height: 400px;
+}
+.h-500 {
+    height: 500%;
+}
+.vh-500 {
+    height: 500vh;
+}
+.h-500px {
+    height: 500px;
+}
+.h-600 {
+    height: 600%;
+}
+.vh-600 {
+    height: 600vh;
+}
+.h-600px {
+    height: 600px;
+}
+.grid-wrap-1 {
+    grid-template-columns: repeat(1, 1fr);
+    height: max-content;
+}
+.grid-wrap-2 {
+    grid-template-columns: repeat(2, 1fr);
+    height: max-content;
+}
+.grid-wrap-3 {
+    grid-template-columns: repeat(3, 1fr);
+    height: max-content;
+}
+.grid-wrap-4 {
+    grid-template-columns: repeat(4, 1fr);
+    height: max-content;
+
+}
+.grid-wrap-5 {
+    grid-template-columns: repeat(5, 1fr);
+    height: max-content;
+}
+.grid-wrap-6 {
+    grid-template-columns: repeat(6, 1fr);
+    height: max-content;
+}
+.grid-wrap-7 {
+    grid-template-columns: repeat(7, 1fr);
+    height: max-content;
+}
+.grid-wrap-8 {
+    grid-template-columns: repeat(8, 1fr);
+    height: max-content;
+}
+/* grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); */
+@media screen and (max-width: 910px) {
+    .grid-wrap-2 {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .grid-wrap-3 {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .grid-wrap-4 {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .grid-wrap-5 {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .grid-wrap-6 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .grid-wrap-7 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .grid-wrap-8 {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 input,
 textarea,
@@ -2917,140 +3135,184 @@ select {
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-	font-family: inherit;
-	white-space: nowrap;
-	cursor: pointer;
-	box-sizing: border-box;
-	user-select: none;
-	border: none;
-	transition: var(--bgl-transition);
-	border-radius: var(--btn-border-radius);
-	line-height: var(--btn-height);
-	font-size: var(--input-font-size);
-	display: inline-block;
-	height: var(--btn-height);
-	padding: 0;
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    border: none;
+    transition: var(--bgl-transition);
+    border-radius: var(--btn-border-radius);
+    line-height: var(--btn-height);
+    font-size: var(--input-font-size);
+    display: inline-block;
+    height: var(--btn-height);
+    padding: 0;
 }
 .btn-close {
-	margin-top: -20px;
-	margin-inline-end: -20px;
-	margin-inline-start: auto;
-	margin-bottom: 15px;
-	transition: var(--bgl-transition);
-	height: 30px;
-	width: 30px;
-	opacity: 0.6;
-	cursor: pointer;
-	border-radius: 100%;
-	outline: 2px solid transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    margin-top: -20px;
+    margin-inline-end: -20px;
+    margin-inline-start: auto;
+    margin-bottom: 15px;
+    transition: var(--bgl-transition);
+    height: 30px;
+    width: 30px;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 100%;
+    outline: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .btn-close:hover {
-	background: var(--bgl-gray-light);
-	opacity: 1;
+    background: var(--bgl-gray-light);
+    opacity: 1;
 }
 .btn-close:active {
-	background: var(--bgl-gray);
+    background: var(--bgl-gray);
 }
 .btn-close::before {
-	content: "close";
-	font-family: "Material Symbols Outlined", serif;
+    content: "close";
+    font-family: "Material Symbols Outlined", serif;
 }
 .bgl_btn.thin {
-	height: calc(var(--btn-height) * 0.7);
-	line-height: calc(var(--btn-height) * 0.7);
+    height: calc(var(--btn-height) * 0.7);
+    line-height: calc(var(--btn-height) * 0.7);
+}
+.hover {
+    cursor: pointer;
+    transition: all 400ms ease;
+}
+.hover:hover {
+    filter: brightness(90%);
+}
+.hover:active {
+    filter: brightness(80%);
 }
 @media screen and (max-width: 910px) {
-	.bgl_btn {
-		padding: 0 20px;
-	}
+    .bgl_btn {
+        padding: 0 20px;
+    }
 }
 .txt-center {
-	text-align: center;
+    text-align: center;
 }
 .txt-start {
-	text-align: start;
+    text-align: start;
 }
 .txt-end {
-	text-align: end;
+    text-align: end;
 }
 .smalltxt {
-	font-size: 12px;
+    font-size: 12px;
 }
 .txt20 {
-	font-size: 20px;
+    font-size: 20px;
 }
 .txt18 {
-	font-size: 18px;
+    font-size: 18px;
 }
 .txt16 {
-	font-size: 16px;
+    font-size: 16px;
 }
 .txt14 {
-	font-size: 14px;
+    font-size: 14px;
 }
 .txt12 {
-	font-size: 12px;
+    font-size: 12px;
 }
 .txt10 {
-	font-size: 10px;
+    font-size: 10px;
 }
 .txt9 {
-	font-size: 9px;
+    font-size: 9px;
 }
 .no-margin {
-	margin: 0;
+    margin: 0;
 }
 .txtgray {
-	color: var(--bgl-gray);
+    color: var(--bgl-gray);
 }
 .txtblue {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 .txtblack {
-	color: var(--bgl-black);
+    color: var(--bgl-black);
 }
 .txtred {
-	color: var(--bgl-red);
+    color: var(--bgl-red);
+}
+.txtwhite {
+    color: var(--bgl-white);
 }
 .font-light {
-	font-weight: 100;
+    font-weight: 100;
 }
 .bold {
-	font-weight: 700;
+    font-weight: 700;
 }
 .line-height-1 {
-	line-height: 1;
+    line-height: 1;
 }
 .ellipsis {
-	overflow: hidden;
-	display: block;
-	width: 100%;
-	text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    text-overflow: ellipsis;
+}
+.ellipsis-1,
+.ellipsis-2,
+.ellipsis-3,
+.ellipsis-4,
+.ellipsis-5,
+.ellipsis-6 {
+    display: block;
+    display: -webkit-box;
+    max-width: 100%;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ellipsis-1 {
+    -webkit-line-clamp: 1;
+}
+.ellipsis-2 {
+    -webkit-line-clamp: 2;
+}
+.ellipsis-3 {
+    -webkit-line-clamp: 3;
+}
+.ellipsis-4 {
+    -webkit-line-clamp: 4;
+}
+.ellipsis-5 {
+    -webkit-line-clamp: 5;
+}
+.ellipsis-6 {
+    -webkit-line-clamp: 6;
 }
 .pointer {
-	cursor: pointer;
+    cursor: pointer;
 }
 .decoration-none {
-	text-decoration: none;
+    text-decoration: none;
 }
 .bgl_icon-font {
-	font-family: "Material Symbols Outlined", serif;
+    font-family: "Material Symbols Outlined", serif;
 }
 @media screen and (max-width: 910px) {
-	.txt20 {
-		font-size: 18px;
-	}
+    .txt20 {
+        font-size: 18px;
+    }
 
-	.txt16 {
-		font-size: 14px;
-	}
+    .txt16 {
+        font-size: 14px;
+    }
 
-	.txt14 {
-		font-size: 12px;
-	}
+    .txt14 {
+        font-size: 12px;
+    }
 }
 ::-webkit-scrollbar {
     width: 0.5em;