@g1cloud/bluesea 5.0.0-alpha.1

package/dist/style.css

@@ -0,0 +1,3665 @@
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap, .bs-text-input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message, .bs-text-input .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base, .bs-text-input .input-area {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input, .bs-text-input .input-area input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea, .bs-text-input .input-area textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus), .bs-text-input .input-area:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-text-input .input-area {
+  width: 100%;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap, .bs-number-input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message, .bs-number-input .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base, .bs-number-input .input-area {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input, .bs-number-input .input-area input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea, .bs-number-input .input-area textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus), .bs-number-input .input-area:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-number-input .input-area {
+  width: 100%;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap, .bs-date-input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message, .bs-date-input .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base, .bs-date-input .input-area {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input, .bs-date-input .input-area input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea, .bs-date-input .input-area textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus), .bs-date-input .input-area:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-date-input {
+  width: 200px;
+}
+.bs-date-input .input-area {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.bs-date-input .input-area .icon {
+  margin: 0 6px;
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 14px;
+}
+.bs-date-input .input-area input {
+  padding-left: 0;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base, .bs-checkbox {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input, .bs-checkbox input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before, .bs-checkbox input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before, .bs-checkbox input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label, .bs-checkbox label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-checkbox input::before {
+  content: "check_box_outline_blank";
+}
+.bs-checkbox.checked input::before {
+  content: "check_box";
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-checkbox-group {
+  display: inline-flex;
+  gap: 8px;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base, .bs-radio-button {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input, .bs-radio-button input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before, .bs-radio-button input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before, .bs-radio-button input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label, .bs-radio-button label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-radio-button input::before {
+  content: "radio_button_unchecked";
+}
+.bs-radio-button.checked input::before {
+  content: "radio_button_checked";
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-radio-button-group {
+  display: inline-flex;
+  gap: 8px;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base, .bs-popup {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-popup {
+  position: absolute;
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  background-color: white;
+  z-index: 100;
+  top: calc(100% + 4px);
+  min-width: 50px;
+  min-height: 50px;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-select-popup {
+  padding: 4px 0;
+  min-width: 120px;
+  max-height: 500px;
+  overflow: auto;
+}
+.bs-select-popup .popup-item {
+  padding: 6px 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+}
+.bs-select-popup .popup-item .checkbox {
+  width: 20px;
+  margin-left: -10px;
+}
+.bs-select-popup .popup-item .checkbox::before {
+  font-family: "Material Symbols Outlined", monospace;
+  content: "";
+  font-size: 16px;
+  color: #555;
+  margin-right: 2px;
+}
+.bs-select-popup .popup-item .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-popup .popup-item .sub-items {
+  margin-right: -8px;
+}
+.bs-select-popup .popup-item .sub-items::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 14px;
+  content: "arrow_right";
+  color: #555;
+  margin-left: 2px;
+}
+.bs-select-popup .popup-item.hovered {
+  background-color: #E8EEFC;
+}
+.bs-select-popup .popup-item.selected-item .checkbox::before {
+  content: "check";
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-select, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-select .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-select .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap, .bs-select {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected, .bs-select:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected, .bs-select .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label, .bs-select .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn, .bs-select .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn, .popup-open.bs-select .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-multi-select, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-multi-select .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-multi-select .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap, .bs-multi-select {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected, .bs-multi-select:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected, .bs-multi-select .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label, .bs-multi-select .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn, .bs-multi-select .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn, .popup-open.bs-multi-select .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-tree-select, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-tree-select .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-tree-select .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap, .bs-tree-select {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected, .bs-tree-select:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected, .bs-tree-select .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label, .bs-tree-select .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn, .bs-tree-select .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn, .popup-open.bs-tree-select .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap, .bs-text-area {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message, .bs-text-area .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base, .bs-text-area .input-area {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input, .bs-text-area .input-area input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea, .bs-text-area .input-area textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus), .bs-text-area .input-area:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-text-area .input-area {
+  width: 100%;
+  height: 100%;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable, .page-navigation > span {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover, .page-navigation > span:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active, .page-navigation > span:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled, .page-navigation > span.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.page-navigation {
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #A7B0C7;
+}
+.page-navigation > span {
+  padding: 6px;
+  vertical-align: center;
+}
+.page-navigation > span.on {
+  color: #2A52BE;
+}
+.page-navigation > span:not(.page) {
+  padding: 3px;
+  font-size: 1.4em;
+}
+.page-navigation > span.disabled {
+  color: #C1CBE4;
+}
+.page-navigation > span:hover {
+  background-color: #FEFEFE;
+  border-radius: 4px;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-grid {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.bs-grid > .table-wrap {
+  overflow: auto;
+  flex-grow: 1;
+}
+.bs-grid > .table-wrap > table {
+  flex-grow: 1;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.bs-grid > .table-wrap > table > thead > tr > td, .bs-grid > .table-wrap > table > thead > tr > th, .bs-grid > .table-wrap > table tbody > tr > td, .bs-grid > .table-wrap > table tbody > tr > th {
+  vertical-align: middle;
+}
+.bs-grid > .table-wrap > table > thead > tr > td > div, .bs-grid > .table-wrap > table > thead > tr > th > div, .bs-grid > .table-wrap > table tbody > tr > td > div, .bs-grid > .table-wrap > table tbody > tr > th > div {
+  padding: 6px;
+  overflow: hidden;
+  min-height: 1em;
+}
+.bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell > div {
+  border-right: 1px solid #DBE0EF;
+  border-bottom: 1px solid #DBE0EF;
+}
+.bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.checkbox {
+  color: #B0B1BA;
+}
+.bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.checkbox.checked {
+  color: #555;
+}
+.bs-grid > .table-wrap > table > thead > tr.header-row > th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: #F7F8FA;
+}
+.bs-grid > .table-wrap > table > thead > tr.header-row > th > div {
+  border-right: 1px solid #DBE0EF;
+  border-bottom: 1px solid #DBE0EF;
+  height: 35px;
+  text-align: left;
+}
+.bs-grid > .table-wrap > table > thead > tr.header-row > th.fixed {
+  z-index: 3;
+}
+.bs-grid > .table-wrap > table > tbody > tr > td.fixed {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  white-space: nowrap;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(odd) {
+  border-color: #F7F8FA;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(odd) > td {
+  background-color: #F7F8FA;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(even) {
+  border-color: white;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(even) > td {
+  background-color: white;
+}
+.bs-grid > .table-wrap > table > tbody > tr > td.func-cell.serial-no {
+  text-align: right;
+}
+.bs-grid > .table-wrap > table > tbody > tr > td.func-cell.checkbox {
+  min-width: 30px;
+  color: #B0B1BA;
+}
+.bs-grid > .table-wrap > table > tbody > tr > td.func-cell.checkbox.checked {
+  color: #555;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row.selected > td {
+  background-color: #E8EEFC;
+}
+.bs-grid > .table-wrap > table > tbody > tr:not(.selected) + tr.data-row.selected {
+  border-top: 1px solid #91A2D2;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.bs-grid > .table-wrap > table > tbody > tr:not(.selected) + tr.data-row.selected > td > div {
+  padding-top: 5px;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row.selected:has(+ tr.data-row:not(.selected)) {
+  border-bottom: 1px solid #91A2D2;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.bs-grid > .table-wrap > table > tbody > tr.data-row.selected:has(+ tr.data-row:not(.selected)) > td > div {
+  padding-bottom: 5px;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base, .bs-text-filter .input-wrap {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input, .bs-text-filter .input-wrap input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea, .bs-text-filter .input-wrap textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus), .bs-text-filter .input-wrap:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-text-filter {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 300px;
+}
+.bs-text-filter .filter-items-popup {
+  padding: 4px 0;
+  min-width: 120px;
+}
+.bs-text-filter .input-wrap {
+  flex-grow: 1;
+}
+.bs-text-filter .input-wrap textarea {
+  resize: none;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap, .bs-date-range-filter {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message, .bs-date-range-filter .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base, .bs-date-range-filter .input-area {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input, .bs-date-range-filter .input-area input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea, .bs-date-range-filter .input-area textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus), .bs-date-range-filter .input-area:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-date-range-filter .input-area {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-right: 8px;
+}
+.bs-date-range-filter .input-area .font-icon {
+  margin: 0 6px;
+  font-size: 14px;
+}
+.bs-date-range-filter .input-area input {
+  padding-left: 0;
+  padding-right: 0;
+  width: 9em;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-grid-control {
+  display: flex;
+  align-items: center;
+  color: #8993A4;
+}
+.bs-grid-control > div {
+  padding-right: 8px;
+}
+.bs-grid-control .bs-select.page-length .selected {
+  height: 18px;
+  border: 0;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+
+/* Layout Utility */
+.flex-row, .bs-layout-horizontal, .bs-layout-horizontal-wrap, .bs-tab-sheet .tab-bar .tabs {
+  display: flex;
+  flex-direction: row;
+}
+.flex-column, .bs-layout-vertical, .bs-layout-vertical-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.flex-wrap, .bs-layout-vertical-wrap, .bs-layout-horizontal-wrap, .bs-tab-sheet .tab-bar .tabs {
+  flex-wrap: wrap;
+}
+.flex-grow-0 {
+  flex-grow: 0;
+}
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+.flex-shrink-1 {
+  flex-shrink: 1;
+}
+.flex-grow-2 {
+  flex-grow: 2;
+}
+.flex-shrink-2 {
+  flex-shrink: 2;
+}
+.flex-grow-3 {
+  flex-grow: 3;
+}
+.flex-shrink-3 {
+  flex-shrink: 3;
+}
+.flex-grow-4 {
+  flex-grow: 4;
+}
+.flex-shrink-4 {
+  flex-shrink: 4;
+}
+.flex-grow-5 {
+  flex-grow: 5;
+}
+.flex-shrink-5 {
+  flex-shrink: 5;
+}
+.flex-grow-6 {
+  flex-grow: 6;
+}
+.flex-shrink-6 {
+  flex-shrink: 6;
+}
+.flex-grow-7 {
+  flex-grow: 7;
+}
+.flex-shrink-7 {
+  flex-shrink: 7;
+}
+.flex-grow-8 {
+  flex-grow: 8;
+}
+.flex-shrink-8 {
+  flex-shrink: 8;
+}
+.gap-0 {
+  gap: 0px;
+}
+.gap-1 {
+  gap: 1px;
+}
+.gap-2 {
+  gap: 2px;
+}
+.gap-3 {
+  gap: 3px;
+}
+.gap-4 {
+  gap: 4px;
+}
+.gap-5 {
+  gap: 5px;
+}
+.gap-6 {
+  gap: 6px;
+}
+.gap-7 {
+  gap: 7px;
+}
+.gap-8 {
+  gap: 8px;
+}
+.gap-9 {
+  gap: 9px;
+}
+.gap-10 {
+  gap: 10px;
+}
+.gap-11 {
+  gap: 11px;
+}
+.gap-12 {
+  gap: 12px;
+}
+.gap-13 {
+  gap: 13px;
+}
+.gap-14 {
+  gap: 14px;
+}
+.gap-15 {
+  gap: 15px;
+}
+.gap-16 {
+  gap: 16px;
+}
+.gap-17 {
+  gap: 17px;
+}
+.gap-18 {
+  gap: 18px;
+}
+.gap-19 {
+  gap: 19px;
+}
+.gap-20 {
+  gap: 20px;
+}
+.gap-21 {
+  gap: 21px;
+}
+.gap-22 {
+  gap: 22px;
+}
+.gap-23 {
+  gap: 23px;
+}
+.gap-24 {
+  gap: 24px;
+}
+.gap-25 {
+  gap: 25px;
+}
+.gap-26 {
+  gap: 26px;
+}
+.gap-27 {
+  gap: 27px;
+}
+.gap-28 {
+  gap: 28px;
+}
+.gap-29 {
+  gap: 29px;
+}
+.gap-30 {
+  gap: 30px;
+}
+.gap-31 {
+  gap: 31px;
+}
+.gap-32 {
+  gap: 32px;
+}
+.gap-33 {
+  gap: 33px;
+}
+.gap-34 {
+  gap: 34px;
+}
+.gap-35 {
+  gap: 35px;
+}
+.gap-36 {
+  gap: 36px;
+}
+.gap-37 {
+  gap: 37px;
+}
+.gap-38 {
+  gap: 38px;
+}
+.gap-39 {
+  gap: 39px;
+}
+.gap-40 {
+  gap: 40px;
+}
+.gap-41 {
+  gap: 41px;
+}
+.gap-42 {
+  gap: 42px;
+}
+.gap-43 {
+  gap: 43px;
+}
+.gap-44 {
+  gap: 44px;
+}
+.gap-45 {
+  gap: 45px;
+}
+.gap-46 {
+  gap: 46px;
+}
+.gap-47 {
+  gap: 47px;
+}
+.gap-48 {
+  gap: 48px;
+}
+.gap-49 {
+  gap: 49px;
+}
+.gap-50 {
+  gap: 50px;
+}
+.gap-51 {
+  gap: 51px;
+}
+.gap-52 {
+  gap: 52px;
+}
+.gap-53 {
+  gap: 53px;
+}
+.gap-54 {
+  gap: 54px;
+}
+.gap-55 {
+  gap: 55px;
+}
+.gap-56 {
+  gap: 56px;
+}
+.gap-57 {
+  gap: 57px;
+}
+.gap-58 {
+  gap: 58px;
+}
+.gap-59 {
+  gap: 59px;
+}
+.gap-60 {
+  gap: 60px;
+}
+.gap-61 {
+  gap: 61px;
+}
+.gap-62 {
+  gap: 62px;
+}
+.gap-63 {
+  gap: 63px;
+}
+.gap-64 {
+  gap: 64px;
+}
+.flex-align-start {
+  align-items: flex-start;
+}
+.flex-align-center {
+  align-items: center;
+}
+.flex-align-end {
+  align-items: flex-end;
+}
+.flex-content-start {
+  justify-content: flex-start;
+}
+.flex-content-center {
+  justify-content: center;
+}
+.flex-content-end {
+  justify-content: flex-end;
+}
+
+/* Bluesea Layout */
+.bs-layout-form > div {
+  display: flex;
+  align-items: center;
+  border-bottom: 0.8px solid #DBE0EF;
+}
+.bs-layout-form > div > .title {
+  padding: 8px 8px 8px 0;
+  width: 10em;
+  font-weight: 500;
+  line-height: 1.2em;
+}
+.bs-layout-form > div > :not(.title) {
+  padding: 8px;
+  width: 10em;
+  flex-grow: 1;
+}
+.bs-layout-card > .card-title {
+  padding: 16px 0;
+  border-bottom: 0.8px solid #00234D;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+.bs-tab-sheet .tab-bar {
+  width: 100%;
+  border-bottom: 1px solid #DBE0EF;
+  padding: 8px 12px 0 12px;
+  background-color: white;
+}
+.bs-tab-sheet .tab-bar .tabs .tab {
+  padding: 8px;
+  color: #B0B1BA;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  white-space: nowrap;
+}
+.bs-tab-sheet .tab-bar .tabs .tab.selected {
+  color: #2A52BE;
+  border-color: #2A52BE;
+}
+.bs-tab-sheet.fixed-tab .tab-bar {
+  position: fixed;
+  z-index: 5;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+
+/* Layout Utility */
+.flex-row, .bs-layout-horizontal, .bs-tree-row .row-caption, .bs-layout-horizontal-wrap {
+  display: flex;
+  flex-direction: row;
+}
+.flex-column, .bs-layout-vertical, .bs-layout-vertical-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.flex-wrap, .bs-layout-vertical-wrap, .bs-layout-horizontal-wrap {
+  flex-wrap: wrap;
+}
+.flex-grow-0 {
+  flex-grow: 0;
+}
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+.flex-shrink-1 {
+  flex-shrink: 1;
+}
+.flex-grow-2 {
+  flex-grow: 2;
+}
+.flex-shrink-2 {
+  flex-shrink: 2;
+}
+.flex-grow-3 {
+  flex-grow: 3;
+}
+.flex-shrink-3 {
+  flex-shrink: 3;
+}
+.flex-grow-4 {
+  flex-grow: 4;
+}
+.flex-shrink-4 {
+  flex-shrink: 4;
+}
+.flex-grow-5 {
+  flex-grow: 5;
+}
+.flex-shrink-5 {
+  flex-shrink: 5;
+}
+.flex-grow-6 {
+  flex-grow: 6;
+}
+.flex-shrink-6 {
+  flex-shrink: 6;
+}
+.flex-grow-7 {
+  flex-grow: 7;
+}
+.flex-shrink-7 {
+  flex-shrink: 7;
+}
+.flex-grow-8 {
+  flex-grow: 8;
+}
+.flex-shrink-8 {
+  flex-shrink: 8;
+}
+.gap-0 {
+  gap: 0px;
+}
+.gap-1 {
+  gap: 1px;
+}
+.gap-2 {
+  gap: 2px;
+}
+.gap-3 {
+  gap: 3px;
+}
+.gap-4 {
+  gap: 4px;
+}
+.gap-5 {
+  gap: 5px;
+}
+.gap-6 {
+  gap: 6px;
+}
+.gap-7 {
+  gap: 7px;
+}
+.gap-8 {
+  gap: 8px;
+}
+.gap-9 {
+  gap: 9px;
+}
+.gap-10 {
+  gap: 10px;
+}
+.gap-11 {
+  gap: 11px;
+}
+.gap-12 {
+  gap: 12px;
+}
+.gap-13 {
+  gap: 13px;
+}
+.gap-14 {
+  gap: 14px;
+}
+.gap-15 {
+  gap: 15px;
+}
+.gap-16 {
+  gap: 16px;
+}
+.gap-17 {
+  gap: 17px;
+}
+.gap-18 {
+  gap: 18px;
+}
+.gap-19 {
+  gap: 19px;
+}
+.gap-20 {
+  gap: 20px;
+}
+.gap-21 {
+  gap: 21px;
+}
+.gap-22 {
+  gap: 22px;
+}
+.gap-23 {
+  gap: 23px;
+}
+.gap-24 {
+  gap: 24px;
+}
+.gap-25 {
+  gap: 25px;
+}
+.gap-26 {
+  gap: 26px;
+}
+.gap-27 {
+  gap: 27px;
+}
+.gap-28 {
+  gap: 28px;
+}
+.gap-29 {
+  gap: 29px;
+}
+.gap-30 {
+  gap: 30px;
+}
+.gap-31 {
+  gap: 31px;
+}
+.gap-32 {
+  gap: 32px;
+}
+.gap-33 {
+  gap: 33px;
+}
+.gap-34 {
+  gap: 34px;
+}
+.gap-35 {
+  gap: 35px;
+}
+.gap-36 {
+  gap: 36px;
+}
+.gap-37 {
+  gap: 37px;
+}
+.gap-38 {
+  gap: 38px;
+}
+.gap-39 {
+  gap: 39px;
+}
+.gap-40 {
+  gap: 40px;
+}
+.gap-41 {
+  gap: 41px;
+}
+.gap-42 {
+  gap: 42px;
+}
+.gap-43 {
+  gap: 43px;
+}
+.gap-44 {
+  gap: 44px;
+}
+.gap-45 {
+  gap: 45px;
+}
+.gap-46 {
+  gap: 46px;
+}
+.gap-47 {
+  gap: 47px;
+}
+.gap-48 {
+  gap: 48px;
+}
+.gap-49 {
+  gap: 49px;
+}
+.gap-50 {
+  gap: 50px;
+}
+.gap-51 {
+  gap: 51px;
+}
+.gap-52 {
+  gap: 52px;
+}
+.gap-53 {
+  gap: 53px;
+}
+.gap-54 {
+  gap: 54px;
+}
+.gap-55 {
+  gap: 55px;
+}
+.gap-56 {
+  gap: 56px;
+}
+.gap-57 {
+  gap: 57px;
+}
+.gap-58 {
+  gap: 58px;
+}
+.gap-59 {
+  gap: 59px;
+}
+.gap-60 {
+  gap: 60px;
+}
+.gap-61 {
+  gap: 61px;
+}
+.gap-62 {
+  gap: 62px;
+}
+.gap-63 {
+  gap: 63px;
+}
+.gap-64 {
+  gap: 64px;
+}
+.flex-align-start {
+  align-items: flex-start;
+}
+.flex-align-center {
+  align-items: center;
+}
+.flex-align-end {
+  align-items: flex-end;
+}
+.flex-content-start {
+  justify-content: flex-start;
+}
+.flex-content-center {
+  justify-content: center;
+}
+.flex-content-end {
+  justify-content: flex-end;
+}
+
+/* Bluesea Layout */
+.bs-layout-form > div {
+  display: flex;
+  align-items: center;
+  border-bottom: 0.8px solid #DBE0EF;
+}
+.bs-layout-form > div > .title {
+  padding: 8px 8px 8px 0;
+  width: 10em;
+  font-weight: 500;
+  line-height: 1.2em;
+}
+.bs-layout-form > div > :not(.title) {
+  padding: 8px;
+  width: 10em;
+  flex-grow: 1;
+}
+.bs-layout-card > .card-title {
+  padding: 16px 0;
+  border-bottom: 0.8px solid #00234D;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+.bs-tree-row {
+  padding: 4px 0;
+}
+.bs-tree-row .row-caption {
+  align-items: center;
+}
+.bs-tree-row .row-caption .caption {
+  padding: 2px 4px 2px 0;
+  cursor: pointer;
+  user-select: none;
+}
+.bs-tree-row .row-caption .caption.selected {
+  color: #2A52BE;
+  font-weight: bold;
+}
+.bs-tree-row .child-rows {
+  margin-left: 20px;
+}:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+:root {
+  --font-size: 13px;
+  --font-size-input: 12px;
+}
+body {
+  font-size: var(--font-size);
+}
+input {
+  font-size: var(--font-size-input);
+  padding-top: 2px;
+}
+textarea {
+  font-size: var(--font-size-input);
+}
+.bs-box-component-wrap, .bs-select-wrap, .bs-input-wrap {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: left;
+}
+.bs-box-component-wrap .message, .bs-select-wrap .message, .bs-input-wrap .message {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+.bs-box-component-base, .bs-select-wrap .selected, .bs-input-base {
+  border: 1px solid #DBE0EF;
+  border-radius: 4px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: left;
+}
+.bs-input-base input {
+  border: 0;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 0 8px;
+  background-color: transparent;
+}
+.bs-input-base textarea {
+  border: 0;
+  border-radius: 4px;
+  outline: 0;
+  align-self: stretch;
+  flex-grow: 1;
+  padding: 8px;
+  line-height: 1.4;
+  font-family: sans-serif;
+}
+.bs-input-base:has(:focus) {
+  border-color: #2A52BE;
+}
+.bs-checkbox-base {
+  display: inline-block;
+  color: #555;
+}
+.bs-checkbox-base input {
+  appearance: none;
+  margin: 0;
+  outline: 0;
+}
+.bs-checkbox-base input::before {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+  color: #555;
+}
+.bs-checkbox-base input:focus::before {
+  color: #2A52BE;
+}
+.bs-checkbox-base label {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+.bs-select-wrap {
+  position: relative;
+  outline: 0;
+}
+.bs-select-wrap:focus > .selected {
+  border-color: #2A52BE;
+}
+.bs-select-wrap .selected {
+  padding: 0 8px;
+  min-width: 50px;
+  cursor: pointer;
+  display: flex;
+}
+.bs-select-wrap .selected .label {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+.bs-select-wrap .selected .dropdown-btn {
+  font-family: "Material Symbols Outlined", monospace;
+  margin-right: -4px;
+  margin-left: 4px;
+  user-select: none;
+  transition: transform 0.2s linear;
+}
+.bs-select-wrap.popup-open .dropdown-btn {
+  transform: rotate(180deg);
+}
+.bs-clickable {
+  user-select: none;
+  cursor: pointer;
+}
+.bs-clickable:hover {
+  filter: opacity(75%);
+}
+.bs-clickable:active {
+  filter: opacity(50%);
+}
+.bs-clickable.disabled {
+  filter: opacity(40%);
+}
+.component-shadow-base {
+  box-shadow: 2px 2px 8px #eee;
+}
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.bs-tree {
+  overflow: auto;
+}