survey-creator-core 1.12.2 → 1.12.4

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.2
+ * SurveyJS Creator v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -228,7 +228,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.12.2
+ * SurveyJS Creator v1.12.4
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -495,6 +495,18 @@ svc-tab-test {
   background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
+.svc-test-tab--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  gap: 0px;
+}
+
 .svc-test-tab__content .svc-plugin-tab__content {
   overflow-y: overlay;
 }
@@ -1027,6 +1039,17 @@ svc-tab-test {
   --sjs-transition-duration: 0ms;
 }
 
+.svc-translation-tab--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  gap: 0px;
+}
+
 .st-properties {
   background-color: var(--ctr-property-grid-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   flex-grow: 1;
@@ -1507,15 +1530,19 @@ td.st-table__cell:first-of-type span {
   --sjs-transition-duration: 0ms;
 }
 
-.svc-logic-tab__content.svc-logic-tab__empty {
+.svc-logic-tab__content.svc-logic-tab--empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 100%;
+  gap: 0px;
 }
-.svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
+.svc-logic-tab__content.svc-logic-tab--empty .svc-logic-tab__content-action {
   width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-logic-tab__content .svc-logic-tab__content-action {
   margin-left: 25%;
@@ -1676,6 +1703,11 @@ svc-tab-designer {
   min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.svc-content-wrapper {
+  width: 100%;
+  display: flex;
+}
+
 .svc-tab-designer .svc-designer-header .sd-container-modern__title {
   background-color: transparent;
 }
@@ -1685,9 +1717,6 @@ svc-tab-designer {
 .svc-tab-designer .sd-title {
   display: flex;
 }
-.svc-tab-designer .sd-title.sd-element__title--hidden, .svc-tab-designer .sd-title.svc-element__title--hidden {
-  display: none;
-}
 .svc-tab-designer .sd-container-modern {
   min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
@@ -1723,24 +1752,25 @@ svc-tab-designer {
 .svc-designer__placeholder-container {
   display: flex;
   flex-grow: 1;
+  flex-shrink: 0;
   width: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 0px;
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   text-align: center;
+  position: relative;
 }
-
-.svc-designer-placeholder-page {
-  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-designer__placeholder-container .sd-page {
+  display: none;
 }
 
 .svc-designer-placeholder-page .svc-page__footer {
   width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: auto;
 }
-
 .svc-designer-placeholder-page .svc-row--ghost {
   display: none;
 }
@@ -1805,19 +1835,13 @@ svc-tab-designer {
 .svc-creator--mobile .svc-page__content.svc-page__content--selected .sd-page__title {
   margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
 }
-.svc-creator--mobile .svc-page__content .sd-page {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-page__content .svc-page__footer {
+.svc-creator--mobile .svc-page__footer {
   margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svc-creator--mobile .svc-question__content {
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-.svc-creator--mobile .svc-question__content.svc-question__content--selected {
-  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svc-creator--mobile .svc-designer-placeholder-page .svc-page__footer {
+  margin-top: 0;
 }
 .svc-creator--mobile .svc-tab-designer {
   justify-content: initial;
@@ -1850,8 +1874,7 @@ svc-tab-designer {
   width: 100%;
 }
 .svc-creator--mobile .svc-question__content-actions {
-  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
-  left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(100% + 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
   border: 0;
@@ -2237,6 +2260,118 @@ svc-tab-test {
   color: var(--ctr-popup-message-color, #404040);
 }
 
+.svc-surface-placeholder {
+  display: flex;
+  width: 100%;
+  max-width: var(--ctr-surface-placeholder-max-width, 720px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-sizing: border-box;
+}
+
+.svc-creator--mobile .svc-surface-placeholder {
+  padding: var(--ctr-surface-placeholder-padding-top, 0px) var(--ctr-surface-placeholder-padding-right, 48px) var(--ctr-surface-placeholder-padding-bottom, 0px) var(--ctr-surface-placeholder-padding-left, 48px);
+}
+.svc-creator--mobile .svc-surface-placeholder__text {
+  padding: var(--ctr-surface-placeholder-text-margin-top, 32px) var(--ctr-surface-placeholder-text-margin-right, 32px) var(--ctr-surface-placeholder-text-margin-bottom, 24px) var(--ctr-surface-placeholder-text-margin-left, 32px);
+}
+
+.svc-surface-placeholder__image {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  padding: 135px 170px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+}
+
+.svc-surface-placeholder__image--designer {
+  background: url(a7b373b83d0c1e0262bd.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--preview {
+  background: url(e8dfbe2bdd7c9dca5efa.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--theme {
+  background: url(5e87e454a7071a571216.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--logic {
+  background: url(5dcaaadc5b1c048d6daa.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__image--translation {
+  background: url(cc27e2890751d1ea0380.png) 50%/contain no-repeat;
+}
+
+.svc-surface-placeholder__text {
+  padding: var(--ctr-surface-placeholder-text-margin-top, 32px) 0px var(--ctr-surface-placeholder-text-margin-bottom, 24px) 0px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ctr-surface-placeholder-text-gap, 8px);
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.svc-surface-placeholder__title {
+  color: var(--ctr-surface-placeholder-text-title-color, rgba(0, 0, 0, 0.91));
+  text-align: center;
+  font-family: var(--ctr-medium-bold-font-family, "Open Sans");
+  font-size: var(--ctr-medium-bold-font-size, 24px);
+  line-height: var(--ctr-medium-bold-line-height, 32px);
+  font-weight: var(--ctr-medium-bold-font-weight, 700);
+  align-self: stretch;
+}
+
+.svc-surface-placeholder__description {
+  color: var(--ctr-surface-placeholder-text-description-color, rgba(0, 0, 0, 0.45));
+  text-align: center;
+  font-family: var(--ctr-default-font-family, "Open Sans");
+  font-size: var(--ctr-default-font-size, 16px);
+  line-height: var(--ctr-default-line-height, 24px);
+  font-weight: var(--ctr-default-font-weight, 400);
+  align-self: stretch;
+}
+
+.svc-designer__placeholder-container {
+  padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-logic-tab--empty > :last-child {
+  margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-test-tab--empty .svc-surface-placeholder,
+.svc-translation-tab--empty .svc-surface-placeholder {
+  padding-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-creator--mobile .svc-designer__placeholder-container {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-logic-tab--empty > :last-child {
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-test-tab--empty .svc-surface-placeholder,
+.svc-creator--mobile .svc-translation-tab--empty .svc-surface-placeholder {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 survey-creator,
 .svc-creator {
   display: flex;
@@ -2280,9 +2415,21 @@ survey-creator .sv-popup .sv-popup__scrolling-content ::-webkit-scrollbar-thumb:
   background-color: var(--ctr-scrollbar-background-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
-survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content {
+survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content,
+.svc-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content {
   background: var(--ctr-survey-radio-button-group-item-background-color-floating, var(--sjs-general-backcolor, var(--background, #fff)));
 }
+survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content .svc-item-value__item,
+.svc-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content .svc-item-value__item {
+  overflow: hidden;
+}
+survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content .svc-item-value__item .sv-string-viewer,
+survey-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content .svc-item-value__item .sv-string-editor,
+.svc-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content .svc-item-value__item .sv-string-viewer,
+.svc-creator .sv-drag-drop-choices-shortcut .sv-drag-drop-choices-shortcut__content .svc-item-value__item .sv-string-editor {
+  white-space: nowrap;
+}
+
 .svc-creator__area {
   position: relative;
   -moz-user-select: none;
@@ -2908,7 +3055,7 @@ svc-page {
 }
 .svc-page__content .sd-page {
   margin: 0;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
 }
 
 .svc-page__content-actions {
@@ -2961,68 +3108,62 @@ svc-page {
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
 }
 
-.svc-page__content:not(.svc-page__content--new):focus,
-.svc-hovered.svc-page__content:not(.svc-page__content--new) {
+.svc-page__content:focus,
+.svc-hovered.svc-page__content {
   box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
   background: var(--ctr-survey-page-background-color-hovered, var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1)));
 }
 
-.svc-page .svc-page__content--collapsed::after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 2px var(--sjs-border-default, var(--border, #d6d6d6)) dashed;
-  margin: -2px;
-  border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-sizing: content-box;
-  pointer-events: none;
+.svc-page__content--new.svc-page__content--new {
+  box-shadow: none;
+  background-color: transparent;
 }
 
-.svc-creator .svc-page .svc-page__content--selected::after,
-.svc-creator .svc-page .svc-page__content--selected:focus::after,
-.svc-hovered.svc-page__content::after {
-  display: none;
+.svc-page__content--selected .svc-page__content-actions,
+.svc-hovered.svc-page__content .svc-page__content-actions {
+  opacity: 1;
 }
-.svc-creator .svc-page .svc-page__content--selected.svc-page__content--selected,
-.svc-creator .svc-page .svc-page__content--selected:focus.svc-page__content--selected,
-.svc-hovered.svc-page__content.svc-page__content--selected {
+
+.svc-page__content--selected.svc-page__content--selected {
   box-shadow: 0 0 0 2px var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
   background: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
 }
-.svc-creator .svc-page .svc-page__content--selected .svc-page__content-actions,
-.svc-creator .svc-page .svc-page__content--selected:focus .svc-page__content-actions,
-.svc-hovered.svc-page__content .svc-page__content-actions {
-  opacity: 1;
+
+.svc-page__content--animation-running .svc-row .svc-question--enter {
+  animation: none;
+}
+.svc-page__content--animation-running .svc-row .svc-question--leave {
+  animation-name: moveInWithOverflow;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-duration: var(--sjs-svc-collapse-move-out-duration, 250ms);
+  animation-delay: var(--sjs-svc-collapse-move-out-delay, 100ms);
 }
 
-.svc-creator .svc-page .svc-page__content--collapsed::after {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 2px var(--sjs-border-default, var(--border, #d6d6d6)) dashed;
-  margin: -2px;
-  border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  box-sizing: content-box;
-  pointer-events: none;
+.svc-creator--disable-animations .svc-row .svc-question--leave {
+  animation: none;
+}
+
+.svc-page__content--collapse-onhover, .svc-page__content--collapse-always {
+  outline: 2px transparent dashed;
+  transition: outline-color var(--sjs-creator-transition-duration, 150ms);
+}
+.svc-page__content--collapse-onhover.svc-page__content--selected, .svc-page__content--collapse-onhover.svc-page__content.svc-hovered, .svc-page__content--collapse-always.svc-page__content--selected, .svc-page__content--collapse-always.svc-page__content.svc-hovered {
+  outline-color: transparent;
 }
-.svc-creator .svc-page .svc-page__content--collapsed.svc-page__content--collapsed-drag-over-inside {
+.svc-page__content--collapse-onhover.svc-page__content--collapsed-drag-over-inside, .svc-page__content--collapse-always.svc-page__content--collapsed-drag-over-inside {
   box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   animation: collapsed-drag-over-inside-blinking 1s infinite;
+  outline-color: transparent;
 }
-.svc-creator .svc-page .svc-page__content--collapsed.svc-page__content--collapsed-drag-over-inside::after {
-  border: 2px var(--sjs-primary-backcolor, var(--primary, #19b394)) solid;
-  background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  animation: collapsed-drag-over-inside-blinking 1s infinite;
+
+.svc-page__content--collapsed {
+  outline-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
-.svc-creator--mobile .svc-page .svc-page__content--collapsed::after {
+.svc-creator--mobile .svc-page__content::after {
   margin: 0;
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -3045,6 +3186,7 @@ svc-page {
   overflow: visible;
   margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page__footer .sv-action {
@@ -3104,7 +3246,8 @@ svc-page {
 .svc-page__placeholder_frame {
   min-width: auto;
   max-width: 100%;
-  padding: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-page__placeholder_frame .svc-panel__placeholder_frame {
   padding: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3385,9 +3528,12 @@ svc-question {
   position: relative;
   height: auto;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
+  display: grid;
+  grid-template-columns: 100%;
+}
+.svc-question__adorner > * {
+  grid-row: 1;
+  grid-column: 1;
 }
 .svc-question__adorner.svc-question__adorner--collapsed {
   height: fit-content;
@@ -3441,7 +3587,10 @@ svc-question {
 }
 
 .svc-question__content {
-  scroll-margin-top: 8px;
+  scroll-margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-question__content .sd-element {
+  scroll-margin-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-question__content {
@@ -3454,13 +3603,31 @@ svc-question {
   flex-grow: 1;
   border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
-  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background: var(--sjs-general-backcolor, var(--background, #fff));
   box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
   outline: none;
   transition: background var(--sjs-creator-transition-duration, 150ms), box-shadow var(--sjs-creator-transition-duration, 150ms);
 }
 
+.svc-question__content--title-bottom {
+  padding-top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__content--title-bottom .sd-question__content {
+  margin-top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__content--title-bottom .svc-question__content-actions {
+  height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__content--title-bottom .svc-question__content-actions > .sv-action-bar {
+  margin-bottom: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-question__content--title-hidden {
+  padding-top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .svc-question__content .sd-selectbase:not(.sd-imagepicker) {
   padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3490,16 +3657,67 @@ svc-question {
   user-select: all;
   pointer-events: all;
 }
-.svc-question__content .sd-question__header--hidden,
-.svc-question__content .svc-question__header--hidden {
-  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
-}
 
 .svc-question__content > div,
 .svc-question__placeholders > div {
   overflow: visible;
 }
 
+.svc-question--enter, .svc-question--leave {
+  animation-name: fadeIn, moveInWithOverflow;
+  animation-fill-mode: forwards;
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+  animation-duration: var(--fade-animation-duration), var(--move-animation-duration);
+  animation-delay: var(--fade-animation-delay), var(--move-animation-delay);
+}
+
+.svc-question--enter {
+  opacity: 0;
+  --fade-animation-duration: var(--sjs-svc-expand-fade-in-duration, 150ms);
+  --move-animation-duration: var(--sjs-svc-expand-move-in-duration, 250ms);
+  --fade-animation-delay: var(--sjs-svc-expand-fade-in-delay, 250ms);
+  --move-animation-delay: 0s;
+  --animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  --animation-direction: normal;
+}
+
+.svc-question--leave {
+  --fade-animation-duration: var(--sjs-svc-collapse-fade-out-duration, 150ms);
+  --move-animation-duration: var(--sjs-svc-collapse-move-out-duration, 250ms);
+  --fade-animation-delay: 0s;
+  --move-animation-delay: var(--sjs-svc-collapse-move-out-delay, 100ms);
+  --animation-direction: reverse;
+  --animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+@keyframes changeAlignSelf {
+  from {
+    align-self: flex-start;
+  }
+  to {
+    align-self: stretch;
+  }
+}
+.svc-question--enter.svc-question__adorner, .svc-question--leave.svc-question__adorner {
+  opacity: 1;
+  animation-name: changeAlignSelf;
+  animation-duration: 0s;
+}
+
+.svc-question--enter.svc-question__adorner {
+  align-self: flex-start;
+  animation-delay: var(--move-animation-duration);
+}
+
+.svc-question--leave.svc-question__adorner {
+  animation-delay: var(--move-animation-delay);
+}
+
+.svc-creator--disable-animations .svc-question--enter, .svc-creator--disable-animations .svc-question--leave {
+  animation: none;
+}
+
 .svc-question__content .sd-question:not(.sd-question--paneldynamic) .sd-panel__content {
   overflow: auto;
 }
@@ -3518,16 +3736,24 @@ svc-question {
 }
 
 .svc-question__content-actions {
-  position: absolute;
+  position: relative;
   opacity: 0;
-  bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  inset-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  inset-inline-end: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-top: auto;
+  width: calc(100% + 2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   transition: opacity var(--sjs-creator-transition-duration, 150ms);
 }
 .svc-question__content-actions:focus-within {
   opacity: 1;
 }
+.svc-question__content-actions > .sv-action-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .svc-question__content-actions .sv-action--convertTo {
   max-width: max-content;
 }
@@ -3627,10 +3853,14 @@ svc-question {
     background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   }
 }
-.svc-question__content--selected:not(.svc-question__content--dragged) > .svc-question__content-actions,
-.svc-creator:not(.svc-creator--mobile) .svc-page .svc-hovered > .svc-question__content:not(.svc-question__content--dragged) > .svc-question__content-actions {
+.svc-question__content--selected > .svc-question__content-actions,
+.svc-hovered > .svc-question__content > .svc-question__content-actions {
   opacity: 1;
 }
+.svc-question__content--selected > .svc-question__content-actions.svc-question--enter,
+.svc-hovered > .svc-question__content > .svc-question__content-actions.svc-question--enter {
+  opacity: 0;
+}
 
 .svc-question__content--dragged {
   background: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
@@ -3638,8 +3868,48 @@ svc-question {
 .svc-question__content--dragged .sd-question__title {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
-.svc-question__content--dragged.svc-question__content--selected .svc-question__content-actions {
-  display: none;
+.svc-question__content--dragged > .svc-question__content-actions {
+  opacity: 0;
+}
+
+.svc-creator--mobile .svc-question__content-actions {
+  overflow: hidden;
+  height: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-creator--mobile .svc-question__content-actions > .sv-action-bar {
+  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-creator--mobile .svc-question__content-actions.svc-question--enter {
+  animation-name: empty, moveInWithOverflow;
+}
+.svc-creator--mobile .svc-question__content {
+  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-element__header--hidden {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__adorner--selected > .svc-element__header--hidden {
+  margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__content--selected {
+  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__content--selected > .svc-question__content-actions {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  overflow: visible;
+}
+.svc-creator--mobile .svc-question__content--selected > .svc-question__content-actions > .sv-action-bar {
+  margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__content--selected > .svc-question__content-actions.svc-question--enter {
+  animation-name: fadeIn, moveInWithOverflow;
+}
+.svc-creator--mobile.svc-creator--disable-animations .svc-question--enter {
+  animation: none;
 }
 
 .svc-question__content .sd-question.sd-question--table {
@@ -3794,7 +4064,7 @@ svc-question {
   bottom: -6px;
 }
 
-.svc-question__content-actions .sv-action-bar {
+.svc-question__content-actions > .sv-action-bar {
   box-sizing: border-box;
   padding: 0;
   justify-content: center;
@@ -3856,54 +4126,76 @@ svc-question .sv-action-bar,
   z-index: 1;
 }
 
-.svc-question__adorner .svc-question__content--collapsed > * {
-  display: none;
+.svc-element__header--hidden {
+  display: block;
+  box-sizing: border-box;
+  padding: 0 calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  z-index: -1;
+  width: 100%;
 }
-.svc-question__adorner .svc-question__content--collapsed .svc-question__drag-area {
-  display: flex;
+.svc-element__header--hidden .svc-string-editor,
+.svc-element__header--hidden .svc-fake-title,
+.svc-element__header--hidden sv-ng-string > .svc-string-editor {
+  display: inline-flex;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element {
-  display: block;
+.svc-element__header--hidden .svc-string-editor::before,
+.svc-element__header--hidden .svc-fake-title::before,
+.svc-element__header--hidden sv-ng-string > .svc-string-editor::before {
+  content: "(";
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element > *:not(.sd-element__header) {
-  display: none;
+.svc-element__header--hidden .svc-string-editor::after,
+.svc-element__header--hidden .svc-fake-title::after,
+.svc-element__header--hidden sv-ng-string > .svc-string-editor::after {
+  content: ")";
+}
+.svc-element__header--hidden .svc-element__title--hidden {
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.svc-element__header--hidden.sd-question__header--location--left .svc-string-editor,
+.svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor {
+  display: inline-block;
+}
+.svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::before, .svc-element__header--hidden.sd-question__header--location--left .svc-string-editor::after,
+.svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor::before,
+.svc-element__header--hidden.sd-question__header--location--left sv-ng-string > .svc-string-editor::after {
+  content: none;
+}
+
+.svc-question__adorner.svc-question__adorner--collapsed > .svc-element__header--hidden {
+  z-index: 1;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header > *:not(.sd-element__title) {
+.svc-question__adorner.svc-question__adorner--collapsed > .svc-element__header--hidden > .svc-element__title--hidden {
+  opacity: 1;
+}
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed > * {
   display: none;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header.sd-panel__header--hidden, .svc-question__adorner .svc-question__content--collapsed .sd-element__header.sd-question__header--hidden, .svc-question__adorner .svc-question__content--collapsed .sd-element__header.svc-question__header--hidden {
-  display: block;
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .svc-question__drag-area {
+  display: flex;
+}
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .svc-content-wrapper {
+  display: flex;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden {
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-element {
   display: block;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden > .svc-string-editor, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden > sv-ng-string > .svc-string-editor, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden > .svc-string-editor, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden > sv-ng-string > .svc-string-editor,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden > .svc-string-editor,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden > sv-ng-string > .svc-string-editor,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden > .svc-string-editor,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden > sv-ng-string > .svc-string-editor {
-  display: inline-flex;
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-element > *:not(.sd-element__header) {
+  display: none;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden > .svc-string-editor::before, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden > sv-ng-string > .svc-string-editor::before, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden > .svc-string-editor::before, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden > sv-ng-string > .svc-string-editor::before,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden > .svc-string-editor::before,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden > sv-ng-string > .svc-string-editor::before,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden > .svc-string-editor::before,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden > sv-ng-string > .svc-string-editor::before {
-  content: "(";
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-element__header > *:not(.sd-element__title) {
+  display: none;
 }
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden > .svc-string-editor::after, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.sd-element__title--hidden > sv-ng-string > .svc-string-editor::after, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden > .svc-string-editor::after, .svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-element__title.svc-element__title--hidden > sv-ng-string > .svc-string-editor::after,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden > .svc-string-editor::after,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden > sv-ng-string > .svc-string-editor::after,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden > .svc-string-editor::after,
-.svc-question__adorner .svc-question__content--collapsed .sd-element__header .sd-title.sd-element__title.svc-element__title--hidden > sv-ng-string > .svc-string-editor::after {
-  content: ")";
+.svc-question__adorner.svc-question__adorner--collapsed .svc-question__content--collapsed .sd-question__header--location--left {
+  display: none;
 }
 
 .svc-question__adorner .svc-question__content--collapsed {
   flex-grow: 0;
   padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__adorner .svc-question__content--collapsed .sd-element__header,
 .svc-question__adorner .svc-question__content--collapsed .sd-element--complex > .sd-element__header {
@@ -3916,8 +4208,10 @@ svc-question .sv-action-bar,
 }
 .svc-creator--mobile .svc-question__adorner .svc-question__content--collapsed {
   padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-creator--mobile .svc-question__adorner .svc-question__content--collapsed.svc-question__content--selected {
+  padding-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -4208,18 +4502,15 @@ svc-question .sv-action-bar,
   padding-bottom: 0;
 }
 
-.svc-question__content.svc-question__content--collapsed .sd-element--complex > .sd-element__header--location-top.sd-panel__header--hidden, .svc-question__content.svc-question__content--collapsed .sd-element--complex > .sd-element__header--location-top.sd-question__header--hidden, .svc-question__content.svc-question__content--collapsed .sd-element--complex > .sd-element__header--location-top.svc-question__header--hidden {
+.svc-question__content.svc-question__content--collapsed .sd-element--complex > .sd-element__header--location-top.svc-element__header--hidden {
   padding: 0;
 }
 
-.svc-question__content .sd-element__header--location-top {
-  margin-top: 0;
-}
 .svc-question__content .sd-element--complex > .sd-element__header--location-top {
   padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
   padding-top: 0;
 }
-.svc-question__content .sd-element--complex > .sd-element__header--location-top.sd-panel__header--hidden, .svc-question__content .sd-element--complex > .sd-element__header--location-top.sd-question__header--hidden, .svc-question__content .sd-element--complex > .sd-element__header--location-top.svc-question__header--hidden {
+.svc-question__content .sd-element--complex > .sd-element__header--location-top.svc-element__header--hidden {
   padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 .svc-question__content .sd-element--complex > .sd-element__header--location-top:after {
@@ -4324,7 +4615,7 @@ svc-question .sv-action-bar,
   box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
 }
 .sd-row--enter.sd-row--enter.sd-row--enter.sd-row--enter .svc-question__content--selected .svc-question__content-actions {
-  display: none;
+  opacity: 0;
 }
 
 .sd-panel .sd-row--enter.sd-row--enter.sd-row--enter.sd-row--enter .svc-question__content--selected {
@@ -4382,11 +4673,21 @@ svc-question .sv-action-bar,
 }
 
 .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
-  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .sd-image__image {
   border-radius: 0;
 }
+.svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .svc-question__content-actions {
+  padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(100% - 2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  box-sizing: border-box;
+}
+.svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .svc-question__content-actions > .sv-action-bar {
+  width: calc(100% - calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 
 .svc-question__content--image.svc-question__content--empty .sd-file,
 .svc-question__content--image.svc-question__content--empty sv-ng-file-question {
@@ -4587,6 +4888,7 @@ svc-question .sv-action-bar,
   flex-shrink: 0;
   min-width: 72px;
   justify-content: flex-end;
+  align-self: flex-start;
 }
 
 .svc-item-value-controls__button {
@@ -4701,12 +5003,26 @@ svc-question .sv-action-bar,
   overflow: hidden;
 }
 
+.sv-drag-drop-choices-shortcut .sv-ranking-item__text {
+  overflow: hidden;
+}
+
+.svc-item-value--ghost {
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .svc-item-value--ghost .svc-item-value__ghost {
   display: block;
 }
 .svc-item-value--ghost .svc-item-value-controls {
   visibility: hidden;
 }
+.svc-item-value--ghost .svc-item-value__item {
+  display: none;
+}
+.svc-item-value--ghost .sv-string-viewer,
+.svc-item-value--ghost .sv-string-editor {
+  white-space: unset;
+}
 
 .svc-item-value--movedown {
   transform: translate(0, 0);
@@ -5972,6 +6288,7 @@ svc-toolbox {
   min-width: 370px;
   width: 450px;
   height: 100%;
+  border-inline-start: 1px solid var(--ctr-property-grid-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
 .svc-side-bar__wrapper {
@@ -6154,7 +6471,6 @@ svc-toolbox {
   width: auto;
   height: 100%;
   background-color: var(--ctr-property-grid-form-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
-  border-inline-start: 1px solid var(--ctr-property-grid-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
 
 .svc-side-bar {
@@ -7445,9 +7761,11 @@ input.spg-input:read-only::placeholder {
 .spg-theme-builder-root .spg-question__header--location--left .spg-question__title .sv-string-viewer {
   white-space: nowrap;
 }
+.spg-theme-builder-root .spg-panel-by-page,
 .spg-theme-builder-root .spg-nested-panel {
   padding-bottom: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.spg-theme-builder-root .spg-panel-by-page::after,
 .spg-theme-builder-root .spg-nested-panel::after {
   content: " ";
   display: block;
@@ -7458,17 +7776,26 @@ input.spg-input:read-only::placeholder {
   height: 1px;
   background-color: var(--ctr-editor-border-color, var(--sjs-border-default, var(--border, #d6d6d6)));
 }
+.spg-theme-builder-root .spg-panel-by-page__content > .spg-row:first-of-type,
 .spg-theme-builder-root .spg-nested-panel__content > .spg-row:first-of-type {
   margin-top: 0;
 }
+.spg-theme-builder-root .spg-panel-by-page.spg-panel--hidden-border,
+.spg-theme-builder-root .spg-row:last-of-type > div > .spg-panel-by-page,
 .spg-theme-builder-root .spg-paneldynamic__panel-wrapper > .spg-nested-panel,
 .spg-theme-builder-root .spg-row:last-of-type > div > .spg-nested-panel {
   padding-bottom: 0;
 }
+.spg-theme-builder-root .spg-panel-by-page.spg-panel--hidden-border::after,
+.spg-theme-builder-root .spg-row:last-of-type > div > .spg-panel-by-page::after,
 .spg-theme-builder-root .spg-paneldynamic__panel-wrapper > .spg-nested-panel::after,
 .spg-theme-builder-root .spg-row:last-of-type > div > .spg-nested-panel::after {
   content: none;
 }
+.spg-theme-builder-root .spg-panel-by-page.spg-panel--padding {
+  padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .spg-theme-builder-root .spg-theme-group-caption {
   --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   font-family: var(--sjs-font-family, var(--font-family));
@@ -7982,5 +8309,112 @@ input.spg-input:read-only::placeholder {
   border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
   box-sizing: border-box;
 }
+/*!*******************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/custom-questions/boolean-switch.scss ***!
+  \*******************************************************************************************************************************************************************************************/
+.spg-boolean-switch,
+.spg-boolean-switch * {
+  box-sizing: border-box;
+}
+
+.spg-boolean-switch {
+  display: flex;
+  flex-direction: row;
+  gap: var(--ctr-toggle-button-gap-label, 8px);
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.spg-boolean-switch__button {
+  background: var(--ctr-toggle-button-background-color, #ffffff);
+  outline: none;
+  border-radius: var(--ctr-toggle-button-corner-radius, 1024px);
+  border-style: solid;
+  border-color: var(--ctr-toggle-button-border-color, rgba(0, 0, 0, 0.16));
+  border-width: 1px;
+  margin: 1px;
+  padding: var(--ctr-toggle-button-padding-top, 4px) var(--ctr-toggle-button-padding-right, 4px) var(--ctr-toggle-button-padding-bottom, 4px) var(--ctr-toggle-button-padding-left, 4px);
+  display: flex;
+  flex-direction: row;
+  gap: var(--ctr-toggle-button-gap, 4px);
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.spg-boolean-switch__button:focus, .spg-boolean-switch__button:focus-visible {
+  border-color: var(--ctr-toggle-button-border-color-focused, #19b394);
+  border-width: 2px;
+  margin: 0;
+}
+
+.spg-boolean-switch__button--checked {
+  background: var(--ctr-toggle-button-background-color-checked, #19b394);
+}
+.spg-boolean-switch__button--checked .spg-boolean-switch__thumb--left {
+  background: none;
+}
+.spg-boolean-switch__button--checked .spg-boolean-switch__thumb--right {
+  background: var(--ctr-toggle-button-thumb-background-color-checked, #ffffff);
+}
+.spg-boolean-switch__button--checked:focus {
+  background: var(--ctr-toggle-button-background-color-checked-focused, #ffffff);
+}
+.spg-boolean-switch__button--checked:focus .spg-boolean-switch__thumb--right {
+  background: var(--ctr-toggle-button-thumb-background-color-checked-focused, #19b394);
+}
+
+.spg-boolean-switch__thumb {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.spg-boolean-switch__thumb-circle {
+  border-radius: var(--ctr-toggle-button-thumb-corner-radius, 1024px);
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--ctr-toggle-button-thumb-width, 16px);
+  height: var(--ctr-toggle-button-thumb-height, 16px);
+  position: relative;
+  overflow: hidden;
+}
+
+.spg-boolean-switch__thumb--left {
+  background: var(--ctr-toggle-button-thumb-background-color-active, rgba(0, 0, 0, 0.45));
+}
+
+.spg-boolean-switch__caption {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.spg-boolean-switch__title {
+  color: var(--ctr-toggle-button-label-text-color, rgba(0, 0, 0, 0.91));
+  text-align: left;
+  font-family: var(--ctr-default-font-family, "OpenSans-Regular", sans-serif);
+  font-size: var(--ctr-default-font-size, 16px);
+  line-height: var(--ctr-default-line-height, 24px);
+  font-weight: var(--ctr-default-font-weight, 400);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
 
 /*# sourceMappingURL=survey-creator-core.fontless.css.map*/