              .custom-bubble-toolbar {
                  display: none;
                  position: absolute;
                  background: var(--bs-body-bg);
                  border: 1px solid var(--bs-border-color);
                  border-radius: var(--bs-border-radius);
                  box-shadow: 0 .25rem 1rem rgba(165, 163, 174, .45);
                  padding: 0.5rem;
                  z-index: 9999;
                  transform: translateX(-50%);
                  transition: all 0.2s ease;
                  margin-top: -10px;
                  user-select: none;
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  width: 200px;
              }

              .custom-bubble-toolbar button {
                  background: transparent;
                  border: none;
                  padding: 0.5rem;
                  margin: 0 2px;
                  border-radius: var(--bs-border-radius-sm);
                  cursor: pointer;
                  color: var(--bs-body-color);
                  transition: all 0.2s;
                  width: 36px;
                  height: 36px;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  user-select: none;
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
              }

              .custom-bubble-toolbar button:hover {
                  background: var(--bs-tertiary-bg);
                  color: var(--bs-primary);
              }

              .custom-bubble-toolbar button i {
                  font-size: 1.25rem;
                  pointer-events: none;
              }

              .custom-bubble-toolbar button.active {
                  background: var(--bs-primary-bg-subtle);
                  color: var(--bs-primary);
              }

              [data-bs-theme="dark"] .custom-bubble-toolbar {
                  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .45);
              }

              .scroll-hidden {
                  overflow: auto;
                  scrollbar-width: none;
                  /* Firefox */
                  -ms-overflow-style: none;
                  /* IE and Edge */
              }

              .scroll-hidden::-webkit-scrollbar {
                  display: none;
                  /* Chrome, Safari, Opera */
              }

              .history-title {
                  max-width: 170px;
              }

              /* Small devices (landscape phones) */
              @media (min-width: 576px) {
                  .history-title {
                      max-width: 210px;
                  }
              }

              /* Medium devices (tablets) */
              @media (min-width: 768px) {
                  .history-title {
                      max-width: 250px;
                  }
              }

              /* Large devices (desktops) */
              @media (min-width: 992px) {
                  .history-title {
                      max-width: 300px;
                  }
              }



              /* Table styles for output content */
              .output table {
                  width: 100%;
                  margin-bottom: 1rem;
                  border-collapse: collapse;
                  border: 1px solid var(--bs-border-color);
              }

              .output table th,
              .output table td {
                  padding: 0.75rem;
                  border: 1px solid var(--bs-border-color);
              }

              .output table th {
                  background-color: var(--bs-tertiary-bg);
                  font-weight: 600;
                  text-align: left;
              }

              .output table tr:nth-child(even) {
                  background-color: var(--bs-table-striped-bg);
              }

              .output table tr:hover {
                  background-color: var(--bs-tertiary-bg);
              }

              /* Heading styles for output content */
              .output h1 {
                  font-size: 2rem;
                  line-height: 2.5rem;
                  font-weight: 600;
                  color: var(--bs-heading-color);
                  margin-bottom: 1rem;
                  border-bottom: 2px solid var(--bs-border-color);
                  padding-bottom: 0.5rem;
              }

              .output h2 {
                  font-size: 1.75rem;
                  line-height: 2.25rem;
                  font-weight: 600;
                  color: var(--bs-heading-color);
                  margin-bottom: 0.75rem;
              }

              .output h3 {
                  font-size: 1.5rem;
                  line-height: 2rem;
                  font-weight: 500;
                  color: var(--bs-heading-color);
                  margin-bottom: 0.75rem;
              }

              .dotted-border {
                  border: 2px dotted var(--bs-primary);
                  /* Dotted border with black color */
                  border-radius: 5px;
              }

              @media (min-width: 992px) {

                  #xform1,
                  #content-output {
                      overflow: auto !important;
                      max-height: 100vh !important;
                  }
              }

              [data-bs-theme=dark] .dynamic-select-options {
                  background-color: var(--bs-card-bg) !important;
                  color: var(--bs-heading-color) !important;
                  box-shadow: 0 0 10px rgb(144 144 144 / 10%) !important;

              }

              [data-bs-theme=dark] .dynamic-select-option-text {
                  /* background-color: var(--bs-card-bg) !important; */
                  color: var(--bs-heading-color) !important;

              }

              [data-bs-theme=dark] .dynamic-select-option:hover {
                  background-color: #636363 !important;
                  color: var(--bs-white) !important;

              }