survey-creator-react 1.9.4-beta.1 → 1.9.8-beta.1

package/survey-creator-react.min.css

@@ -1,12 +1,12 @@
 /*!
- * SurveyJS Creator React v1.9.4-beta.1
- * (c) 2015-2021 Devsoft Baltic OÜ - http://surveyjs.io/
+ * SurveyJS Creator React v1.9.8-beta.1
+ * (c) 2015-2022 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
  */
 /*!
- * SurveyJS Creator v1.9.4-beta.1
- * (c) 2015-2021 Devsoft Baltic OÜ - http://surveyjs.io/
+ * SurveyJS Creator v1.9.8-beta.1
+ * (c) 2015-2022 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
  */
@@ -44,6 +44,9 @@
   font-family: var(--font-family); }
   .svc-embed-tab__content .spg-row {
     display: flex; }
+    .svc-embed-tab__content .spg-row .spg-question__content .spg-comment:disabled,
+    .svc-embed-tab__content .spg-row .spg-question__content .spg-comment:disabled::placeholder {
+      color: var(--foreground, #161616); }
   .svc-embed-tab__content .spg-question__description {
     line-height: calc(3 * var(--base-unit, 8px));
     font-size: calc(2 * var(--base-unit, 8px));
@@ -348,8 +351,8 @@ svc-tab-test {
       width: 100%; }
     .svc-test-tab__content-actions .svc-page-selector .sv-action-bar-item__title {
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
+      text-overflow: ellipsis;
       display: inline-block; }
 
 /* latin */
@@ -382,32 +385,28 @@ svc-tab-test {
   --font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
 .sl-table__cell.st-table__cell--actions:first-child .sv-action-bar {
-  margin-top: -4px; }
+  margin-top: calc(-0.5 * var(--base-unit, 8px));
+  padding-right: calc(4 * var(--base-unit, 8px)); }
 
-.sl-table__detail-button.sl-table__detail-button {
-  display: block;
-  width: 48px;
-  height: 48px;
+.sl-table .sl-table__detail-button.sl-table__detail-button {
+  width: calc(6 * var(--base-unit, 8px));
+  height: calc(6 * var(--base-unit, 8px));
   box-sizing: border-box;
-  border-radius: 100px;
+  border-radius: calc(12.5 * var(--base-unit, 8px));
   padding: 0; }
-  .sl-table__detail-button.sl-table__detail-button use {
-    display: none; }
-  .sl-table__detail-button.sl-table__detail-button:hover, .sl-table__detail-button.sl-table__detail-button:focus {
-    background-color: var(--primary-light, rgba(25, 179, 148, 0.1)); }
-    .sl-table__detail-button.sl-table__detail-button:hover use, .sl-table__detail-button.sl-table__detail-button:focus use {
+  .sl-table .sl-table__detail-button.sl-table__detail-button:hover, .sl-table .sl-table__detail-button.sl-table__detail-button:focus {
+    background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+    outline: none; }
+    .sl-table .sl-table__detail-button.sl-table__detail-button:hover use, .sl-table .sl-table__detail-button.sl-table__detail-button:focus use {
       fill: var(--primary, #19b394); }
 
-#show-detail .sl-table__detail-button {
-  outline: none; }
-
-.sl-table__row:hover .sl-table__detail-button.sl-table__detail-button use,
-.sl-table__detail-button.sl-table__detail-button:focus use {
-  display: initial; }
-
-.sl-table__row #remove-row .sv-action-bar-item__icon use {
+.sl-table__cell .sv-action-bar-item__icon {
   display: none; }
 
+.sl-table__row:hover .sl-table__cell .sv-action-bar-item__icon,
+.sl-table__cell .sv-action-bar-item:focus .sv-action-bar-item__icon {
+  display: block; }
+
 .sl-table__row:hover #remove-row .sv-action-bar-item,
 .sl-table__row #remove-row:focus-within .sv-action-bar-item {
   border: none;
@@ -416,8 +415,7 @@ svc-tab-test {
 
 .sl-table__row:hover #remove-row .sv-action-bar-item__icon use,
 .sl-table__row #remove-row:focus-within .sv-action-bar-item__icon use {
-  fill: var(--red, #e60a3e);
-  display: block; }
+  fill: var(--red, #e60a3e); }
 
 .sl-table__row.sl-table__row--additional .sl-table__cell .svc-action-button {
   color: var(--secondary, #ff9814); }
@@ -425,26 +423,36 @@ svc-tab-test {
 .sl-table__cell .svc-action-button,
 .sl-table__cell .svc-action-button:hover,
 .sl-table__cell .svc-action-button:focus {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: bold;
+  font-size: calc(3 * var(--base-unit, 8px));
+  line-height: calc(4 * var(--base-unit, 8px));
   background: transparent;
-  color: var(--foreground, #161616); }
+  color: var(--foreground, #161616);
+  outline: none;
+  border: none;
+  box-shadow: none;
+  max-height: calc(13.5 * var(--base-unit, 8px));
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical; }
 
 .sl-table__cell {
   color: var(--foreground, #161616);
   font-weight: bold;
   font-size: calc(2 * var(--base-unit, 8px));
   font-family: var(--font-family);
-  padding: 0.9375em;
-  padding-left: 0;
-  box-sizing: content-box;
-  vertical-align: top; }
+  vertical-align: top;
+  padding: calc(2 * var(--base-unit, 8px)) 0; }
 
 .sl-table__cell--detail-button {
   overflow: hidden;
   appearance: none;
   outline: none;
   border: none;
-  background-color: transparent;
-  padding: calc(0.25 * var(--base-unit, 8px)); }
+  background-color: transparent; }
 
 .sl-table {
   width: 100%;
@@ -452,24 +460,22 @@ svc-tab-test {
   border-spacing: 0;
   table-layout: fixed; }
   .sl-table tbody tr:last-child .sl-table__cell {
-    padding-bottom: 2.5em; }
+    padding-bottom: calc(5 * var(--base-unit, 8px)); }
   .sl-table tr:first-child .sl-table__cell {
-    padding-top: 1.875em; }
+    padding-top: calc(4 * var(--base-unit, 8px)); }
   .sl-table td:first-child,
   .sl-table th:first-child {
-    padding-left: 1.875em; }
+    padding-left: calc(4 * var(--base-unit, 8px)); }
     .sl-table td:first-child .sv-action-bar,
     .sl-table th:first-child .sv-action-bar {
       justify-content: flex-end; }
   .sl-table td:last-child,
   .sl-table th:last-child {
-    padding-right: 1.875em; }
+    padding-right: calc(4 * var(--base-unit, 8px)); }
 
 .sl-panel .sl-panel__footer {
   padding: 0; }
-  .sl-panel .sl-panel__footer.sv-action-bar {
-    width: 100%; }
-  .sl-panel .sl-panel__footer #saveDetailPanel {
+  .sl-panel .sl-panel__footer .sv-action {
     width: 100%; }
   .sl-panel .sl-panel__footer .sv-action__content {
     width: 100%; }
@@ -509,7 +515,7 @@ svc-tab-test {
   flex-flow: row wrap; }
 
 .sl-panel {
-  padding-bottom: 16px; }
+  padding-bottom: calc(2 * var(--base-unit, 8px)); }
 
 .sl-row--multiple .sl-panel {
   padding-bottom: 0; }
@@ -535,17 +541,17 @@ svc-tab-test {
     display: none; }
 
 .sl-row--multiple .sl-question {
-  padding-right: calc(1 * var(--base-unit, 8px)) !important; }
+  padding-right: calc(1 * var(--base-unit, 8px)); }
 
 .svc-logic-question-value {
-  padding-right: calc(5 * var(--base-unit, 8px)) !important; }
-
-.sl-comment {
-  margin-bottom: calc(2 * var(--base-unit, 8px)); }
+  padding-right: calc(5 * var(--base-unit, 8px)); }
 
 .sv-popup.sv-property-editor .sl-row {
   flex-flow: nowrap; }
 
+.spg-comment.sl-comment {
+  height: calc(17 * var(--base-unit, 8px)); }
+
 /* latin */
 @font-face {
   font-family: "Open Sans";
@@ -772,21 +778,20 @@ svc-tab-test {
 
 .svc-logic-operator.svc-logic-operator:hover, .svc-logic-operator.svc-logic-operator:focus {
   color: var(--background, #fff);
-  outline: none; }
-
-.svc-logic-operator.svc-logic-operator--conjunction {
-  background-color: var(--primary-light, rgba(25, 179, 148, 0.1)); }
-  .svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus {
-    background-color: var(--primary, #19b394); }
+  outline: none;
+  box-shadow: none; }
 
 .svc-logic-operator.svc-logic-operator--question {
   background-color: var(--blue-light, rgba(67, 127, 217, 0.1)); }
   .svc-logic-operator.svc-logic-operator--question:hover, .svc-logic-operator.svc-logic-operator--question:focus {
     background-color: var(--blue, #437FD9); }
 
+.svc-logic-operator.svc-logic-operator--conjunction,
 .svc-logic-operator.svc-logic-operator--operator {
   background-color: var(--secondary-back-light, rgba(255, 152, 20, 0.1)); }
-  .svc-logic-operator.svc-logic-operator--operator:hover, .svc-logic-operator.svc-logic-operator--operator:focus {
+  .svc-logic-operator.svc-logic-operator--conjunction:hover, .svc-logic-operator.svc-logic-operator--conjunction:focus,
+  .svc-logic-operator.svc-logic-operator--operator:hover,
+  .svc-logic-operator.svc-logic-operator--operator:focus {
     background-color: var(--secondary, #ff9814); }
 
 .svc-logic-operator.svc-logic-operator--action {
@@ -830,15 +835,6 @@ svc-tab-test {
 .svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
   display: none; }
 
-.svc-question-wrapper {
-  max-width: initial !important;
-  min-width: initial !important;
-  width: initial !important;
-  flex: initial !important; }
-
-.svc-question-wrapper .sv-title-actions__title {
-  max-width: none; }
-
 .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
 .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
   color: var(--foreground-light, #909090); }
@@ -1001,11 +997,25 @@ svc-tab-designer {
   margin-left: auto;
   margin-right: auto; }
   .svc-tab-designer .sd-container-modern.sd-container-modern--static {
-    max-width: calc(102 * var(--base-unit, 8px)); }
+    max-width: calc(84 * var(--base-unit, 8px)); }
   .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
     max-width: initial;
     padding: 0 calc(1 * var(--base-unit, 8px)); }
 
+.svc-designer__placeholder-container {
+  position: absolute;
+  top: 35%; }
+
+.svc-designer-placeholder-page {
+  margin-top: calc(2 * var(--base-unit, 8px)); }
+
+.svc-designer-placeholder-page .svc-page__add-new-question {
+  width: calc(33 * var(--base-unit, 8px));
+  margin: auto; }
+
+.svc-designer-placeholder-page .svc-row--ghost {
+  display: none; }
+
 /* latin */
 @font-face {
   font-family: "Open Sans";
@@ -1131,15 +1141,25 @@ survey-creator,
   survey-creator *,
   .svc-creator * {
     scrollbar-width: thin;
-    scrollbar-color: var(--primary-light, rgba(25, 179, 148, 0.1)) var(--background-dim, #f3f3f3); }
+    scrollbar-color: var(--border, #d6d6d6) transparent; }
   survey-creator ::-webkit-scrollbar,
   .svc-creator ::-webkit-scrollbar {
-    height: 6px;
-    width: 6px;
-    background-color: var(--background-dim, #f3f3f3); }
+    width: 12px;
+    height: 12px;
+    background-color: transparent; }
   survey-creator ::-webkit-scrollbar-thumb,
   .svc-creator ::-webkit-scrollbar-thumb {
-    background: var(--primary-light, rgba(25, 179, 148, 0.1)); }
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    border-radius: 32px;
+    background-color: var(--border, #d6d6d6); }
+  survey-creator ::-webkit-scrollbar-track,
+  .svc-creator ::-webkit-scrollbar-track {
+    background: transparent; }
+  survey-creator ::-webkit-scrollbar-thumb:hover,
+  .svc-creator ::-webkit-scrollbar-thumb:hover {
+    border: 2px solid rgba(0, 0, 0, 0);
+    background-color: var(--foreground-light, #909090); }
 
 .svc-creator__area {
   position: relative;
@@ -1147,6 +1167,9 @@ survey-creator,
   -ms-user-select: none;
   user-select: none; }
 
+.svc-creator__area.svc-creator__area--with-banner {
+  height: calc(100% - calc(4 * var(--base-unit, 8px))); }
+
 .svc-creator__content-wrapper {
   width: 100%;
   height: calc(100% - calc(8 * var(--base-unit, 8px))); }
@@ -1163,7 +1186,8 @@ survey-creator,
   width: 100%;
   height: 100%;
   overflow: hidden;
-  position: relative; }
+  position: relative;
+  min-height: var(--tab-min-height, 600px); }
 
 .svc-creator__toolbox--right.svc-creator-tab {
   flex-direction: row-reverse; }
@@ -1186,7 +1210,7 @@ survey-creator,
 
 .svc-creator__banner {
   position: absolute;
-  bottom: 0;
+  bottom: calc(-4 * var(--base-unit, 8px));
   width: 100%;
   height: calc(4 * var(--base-unit, 8px));
   line-height: calc(4 * var(--base-unit, 8px));
@@ -1369,9 +1393,6 @@ survey-creator,
   left: calc(-0.7 * var(--base-unit, 8px));
   right: calc(-0.7 * var(--base-unit, 8px)); }
 
-.sd-table__cell:first-child .svc-string-editor {
-  margin-left: calc(1 * var(--base-unit, 8px)); }
-
 /* latin */
 @font-face {
   font-family: "Open Sans";
@@ -1412,9 +1433,10 @@ survey-creator,
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: calc(0.5 * var(--base-unit, 8px));
   cursor: pointer;
-  user-select: none; }
+  user-select: none;
+  outline-color: var(--primary, #19b394); }
   .svc-btn:hover {
-    outline: 2px solid var(--primary, #19b394); }
+    outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394); }
   .svc-btn .svc-text {
     display: flex;
     align-items: center;
@@ -1493,11 +1515,17 @@ svc-page-navigator,
   height: calc(5.5 * var(--base-unit, 8px));
   min-height: calc(5.5 * var(--base-unit, 8px)); }
 
-survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus, .svc-creator .svc-page-navigator__selector:hover, .svc-creator .svc-page-navigator__selector:focus {
+survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
+.svc-creator .svc-page-navigator__selector:hover,
+.svc-creator .svc-page-navigator__selector:focus {
   outline: none; }
-  survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon, .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon {
+  survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon,
+  .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon,
+  .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon {
     background-color: var(--primary-light, rgba(25, 179, 148, 0.1)); }
-    survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use, .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use {
+    survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use, survey-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use,
+    .svc-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigator-icon use,
+    .svc-creator .svc-page-navigator__selector:focus .svc-page-navigator__navigator-icon use {
       fill: var(--primary, #19b394); }
 
 .svc-page-navigator__selector--opened {
@@ -1522,8 +1550,7 @@ survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-nav
   right: calc(1 * var(--base-unit, 8px)); }
 
 .svc-creator__toolbox--right .svc-tab-designer--with-page-navigator {
-  padding-right: 0;
-  padding-left: calc(6.5 * var(--base-unit, 8px)); }
+  padding-right: 0; }
 
 .svc-creator__toolbox--right .svc-tab-designer__page-navigator {
   right: unset;
@@ -1592,15 +1619,16 @@ svc-page-navigator-item,
   border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394); }
 
 .svc-page-navigator-item__banner {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   right: calc(0.5 * var(--base-unit, 8px));
   display: block;
-  white-space: nowrap;
   line-height: calc(4 * var(--base-unit, 8px));
-  overflow: hidden;
-  text-overflow: ellipsis;
   animation: 0.5s ease-in;
   padding: 0;
-  opacity: 0; }
+  opacity: 0;
+  z-index: 20; }
   .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
     position: absolute;
     display: inline-block;
@@ -1893,8 +1921,8 @@ svc-question {
       max-width: 100%; }
       .svc-question__content-actions .sv-action--first .sv-action-bar-item .sv-action-bar-item__title {
         overflow: hidden;
-        text-overflow: ellipsis;
         white-space: nowrap;
+        text-overflow: ellipsis;
         display: inline-block;
         justify-content: left; }
 
@@ -2268,9 +2296,11 @@ svc-question .sv-action-bar,
 
 .svc-item-value-wrapper {
   position: relative;
-  display: flex; }
+  display: flex;
+  align-items: center;
+  margin-left: calc(-5 * var(--base-unit, 8px)); }
 
-.sd-selectbase__column:not(:first-of-type) .svc-item-value-wrapper {
+.sd-selectbase__column:not(:first-of-type) {
   margin-left: calc(5 * var(--base-unit, 8px)); }
 
 .svc-item-value--dragging {
@@ -2281,12 +2311,14 @@ svc-question .sv-action-bar,
   padding-left: calc(0.5 * var(--base-unit, 8px)); }
 
 .svc-item-value-controls {
+  display: flex;
   margin: calc(1 * var(--base-unit, 8px)) 0;
   margin-right: calc(1 * var(--base-unit, 8px));
   height: calc(4 * var(--base-unit, 8px));
-  width: calc(4 * var(--base-unit, 8px));
   box-sizing: border-box;
-  flex-shrink: 0; }
+  flex-shrink: 0;
+  min-width: 72px;
+  justify-content: flex-end; }
 
 .svc-item-value-controls__button {
   border-radius: 50%;
@@ -2297,7 +2329,6 @@ svc-question .sv-action-bar,
 
 .svc-item-value-controls__button > span,
 sv-svg-icon.svc-item-value-controls__button {
-  width: calc(2 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
   box-sizing: content-box; }
   .svc-item-value-controls__button > span .sv-svg-icon,
@@ -2307,13 +2338,12 @@ sv-svg-icon.svc-item-value-controls__button {
 .svc-item-value-controls__button > span {
   display: block; }
 
-.svc-item-value-wrapper:hover .svc-item-value-controls__drag-icon,
-.svc-item-value-controls__drag:hover .svc-item-value-controls__drag-icon {
+.svc-item-value-wrapper:hover:not(.svc-item-value--ghost) .svc-item-value-controls__drag-icon,
+.svc-item-value-controls__drag:hover:not(.svc-item-value--ghost) .svc-item-value-controls__drag-icon {
   visibility: visible; }
 
 .svc-item-value-controls__drag {
   padding: calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
-  margin-left: calc(-5 * var(--base-unit, 8px));
   cursor: move;
   opacity: 0.25; }
   .svc-item-value-controls__drag .svc-item-value-controls__drag-icon {
@@ -2352,6 +2382,9 @@ sv-svg-icon.svc-item-value-controls__button {
 .svc-item-value--new .svc-item-value__item .sd-item__decorator {
   opacity: 0.35; }
 
+.svc-item-value--new .sv-ranking-item__index {
+  background: var(--background-for-editors, #f9f9f9); }
+
 .sv-ranking .svc-item-value-wrapper {
   align-items: center; }
 
@@ -2452,18 +2485,18 @@ sv-svg-icon.svc-item-value-controls__button {
   top: calc(50% - 3 * var(--base-unit, 8px));
   left: calc(50% - 3 * var(--base-unit, 8px)); }
 
-.svc-question__content--selected .svc-image-item-value-controls {
-  display: block; }
+.svc-image-item-value-controls {
+  display: flex; }
 
 .svc-image-item-value-controls__button {
-  display: inline-block;
+  display: block;
   background-color: var(--background, #fff);
   border-radius: 50%;
   width: calc(6 * var(--base-unit, 8px));
   height: calc(6 * var(--base-unit, 8px));
   cursor: pointer; }
   .svc-image-item-value-controls__button:not(:last-child) {
-    margin-right: calc(0.5 * var(--base-unit, 8px)); }
+    margin-right: calc(1 * var(--base-unit, 8px)); }
   .svc-image-item-value-controls__button .sv-svg-icon {
     margin-top: calc(50% - 1.5 * var(--base-unit, 8px));
     margin-left: calc(50% - 1.5 * var(--base-unit, 8px)); }
@@ -2641,75 +2674,76 @@ sv-svg-icon.svc-item-value-controls__button {
 :root {
   --font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
-.svd_test_results {
-  padding: 1em; }
-  .svd_test_results .svd_results_text {
-    padding: 1em;
-    white-space: pre-wrap;
-    width: 100%;
-    overflow: auto; }
-  .svd_test_results .svd_results_table {
-    padding: 1em;
-    width: 100%;
-    overflow: auto; }
-    .svd_test_results .svd_results_table table {
-      border-collapse: collapse;
-      width: 100%; }
-      .svd_test_results .svd_results_table table .survey-result-marker {
+.svd-test-results {
+  font-family: var(--font-family);
+  width: 80%;
+  margin: auto;
+  margin-bottom: calc(5 * var(--base-unit, 8px));
+  background-color: var(--background, #fff);
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 10px; }
+  .svd-test-results .svd-test-results__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(1 * var(--base-unit, 8px)) calc(4 * var(--base-unit, 8px));
+    font-size: calc(2 * var(--base-unit, 8px));
+    color: var(--foreground-light, #909090);
+    border-bottom: 2px solid var(--background-dim, #f3f3f3); }
+    .svd-test-results .svd-test-results__header .svd-test-results__header-text {
+      margin: 0; }
+    .svd-test-results .svd-test-results__header .svd-test-results__header-types {
+      display: flex; }
+  .svd-test-results .svd-test-results__text {
+    display: flex;
+    padding: calc(2 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+    width: calc(100% - calcSize(6));
+    overflow: auto;
+    user-select: text;
+    white-space: pre-wrap; }
+  .svd-test-results .svd-test-results__table {
+    width: 100%; }
+    .svd-test-results .svd-test-results__table table {
+      width: 100%;
+      border-collapse: collapse; }
+      .svd-test-results .svd-test-results__table table .svd-test-results__marker {
         position: absolute;
-        left: 1em;
-        top: 0.5em;
-        transition: transform 0.2s ease-in-out; }
-        .svd_test_results .svd_results_table table .survey-result-marker.survey-result-marker--expanded {
+        top: calc(1.5 * var(--base-unit, 8px)); }
+        .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
+          transition: transform 0.2s ease-in-out; }
+          .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon use {
+            fill: var(--foreground-light, #909090); }
+        .svd-test-results .svd-test-results__table table .svd-test-results__marker.svd-test-results__marker--expanded .sv-svg-icon {
+          transform-origin: center;
           transform: rotate(90deg); }
-      .svd_test_results .svd_results_table table .survey-result-value {
-        word-break: break-all; }
-      .svd_test_results .svd_results_table table tr {
-        vertical-align: top; }
-      .svd_test_results .svd_results_table table th,
-      .svd_test_results .svd_results_table table td {
-        border: 1px solid;
-        padding: 0.5em 1em;
+      .svd-test-results .svd-test-results__table table th {
+        padding: calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
+        background-color: var(--background-dim, #f3f3f3);
+        text-align: left;
+        font-weight: 600;
+        font-size: 12px;
+        color: var(--foreground-light, #909090); }
+        .svd-test-results .svd-test-results__table table th:nth-child(1) {
+          padding-left: calc(4 * var(--base-unit, 8px)); }
+      .svd-test-results .svd-test-results__table table td {
+        padding: calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
         max-width: calc(50 * var(--base-unit, 8px));
-        overflow: auto; }
-        .svd_test_results .svd_results_table table th:nth-child(1),
-        .svd_test_results .svd_results_table table td:nth-child(1) {
+        overflow: auto;
+        border-top: 2px solid var(--background-dim, #f3f3f3);
+        user-select: text; }
+        .svd-test-results .svd-test-results__table table td:nth-child(1) {
           position: relative;
-          width: 30%;
-          font-weight: 500;
-          padding-left: 2em; }
-        .svd_test_results .svd_results_table table th:nth-child(2),
-        .svd_test_results .svd_results_table table td:nth-child(2) {
-          width: 20%; }
-        .svd_test_results .svd_results_table table th:nth-child(3),
-        .svd_test_results .svd_results_table table td:nth-child(3) {
-          width: 20%; }
-        .svd_test_results .svd_results_table table th:nth-child(4),
-        .svd_test_results .svd_results_table table td:nth-child(4) {
-          width: 30%;
-          font-weight: 500; }
-
-.nav-tabs {
-  margin-bottom: 0;
-  padding: 0;
-  line-height: 2.5em; }
-
-.nav-item {
-  display: inline-block;
-  margin-left: -3px; }
-  .nav-item:first-child {
-    margin-left: 0; }
-
-.nav-link {
-  border-radius: 0;
-  border-top-left-radius: calc(0.25 * var(--base-unit, 8px));
-  border-top-right-radius: calc(0.25 * var(--base-unit, 8px));
-  padding: 0.5em 1em;
-  text-align: center; }
-  .nav-link.active {
-    border: calc(0.125 * var(--base-unit, 8px)) solid var(--border, #d6d6d6);
-    border-color: var(--border, #d6d6d6);
-    border-bottom-color: transparent; }
+          width: 50%;
+          font-weight: 600; }
+        .svd-test-results .svd-test-results__table table td:nth-child(2) {
+          width: 50%;
+          padding-right: calc(4 * var(--base-unit, 8px)); }
+      .svd-test-results .svd-test-results__table table .survey-result-value {
+        word-break: break-all; }
+      .svd-test-results .svd-test-results__table table tr {
+        vertical-align: top; }
+        .svd-test-results .svd-test-results__table table tr .svd-test-results__node-value {
+          color: var(--foreground-light, #909090); }
 
 /* latin */
 @font-face {
@@ -3058,6 +3092,11 @@ sv-svg-icon.svc-item-value-controls__button {
   align-items: center;
   margin-right: 0;
   margin-left: calc(-1.5 * var(--base-unit, 8px)); }
+  .svc-toolbox__item-banner .svc-toolbox__item-icon {
+    position: absolute;
+    display: block;
+    left: calc(1.5 * var(--base-unit, 8px));
+    top: calc(1 * var(--base-unit, 8px)); }
   .svc-toolbox__item-banner .svc-toolbox__item-title {
     color: var(--foreground, #161616); }
   .svc-toolbox__item-banner .sv-svg-icon use {
@@ -3070,6 +3109,10 @@ sv-svg-icon.svc-item-value-controls__button {
   padding-left: calc(2 * var(--base-unit, 8px));
   margin-left: 0;
   margin-right: calc(-1.5 * var(--base-unit, 8px)); }
+  .svc-creator__toolbox--right .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+  .svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
+    padding-left: calc(1 * var(--base-unit, 8px));
+    padding-right: calc(4 * var(--base-unit, 8px)); }
 
 .svc-creator__toolbox--right .svc-toolbox__item {
   flex-direction: row-reverse; }
@@ -3083,6 +3126,10 @@ sv-svg-icon.svc-item-value-controls__button {
 .svc-creator__toolbox--right .svc-toolbox__category {
   align-items: flex-end; }
 
+.svc-creator__toolbox--right .svc-toolbox__item-banner .svc-toolbox__item-icon {
+  left: auto;
+  right: calc(1.5 * var(--base-unit, 8px)); }
+
 .svc-toolbox__item-title {
   font-family: var(--font-family);
   font-style: normal;
@@ -3101,6 +3148,9 @@ sv-svg-icon.svc-item-value-controls__button {
   padding-left: calc(1.5 * var(--base-unit, 8px));
   padding-right: calc(2 * var(--base-unit, 8px));
   opacity: 1; }
+  .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+  .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
+    padding-left: calc(4 * var(--base-unit, 8px)); }
 
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
@@ -3206,7 +3256,8 @@ sv-svg-icon.svc-item-value-controls__button {
 
 svc-toolbox {
   display: flex;
-  flex-direction: column; }
+  flex-direction: column;
+  position: absolute; }
 
 .svc-toolbox {
   height: 100%;
@@ -3305,7 +3356,7 @@ svc-toolbox {
   position: relative;
   font-family: var(--font-family);
   min-width: 370px;
-  max-width: calc(118 * var(--base-unit, 8px));
+  max-width: calc(68 * var(--base-unit, 8px));
   width: 450px;
   height: 100%; }
 
@@ -3388,7 +3439,8 @@ svc-toolbox {
     top: 0;
     bottom: 0;
     right: 0;
-    left: 0; }
+    left: 0;
+    z-index: 9000; }
   .svc-flyout-side-bar .svc-side-bar__wrapper {
     z-index: 10000;
     position: absolute;
@@ -3479,8 +3531,7 @@ svc-toolbox {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
-  min-width: auto !important; }
+  padding: 0px; }
 
 .spg-question__header {
   width: 100%; }
@@ -3512,7 +3563,6 @@ svc-toolbox {
 
 .spg-question--location--left {
   flex-direction: row;
-  padding-right: 0 !important;
   background: var(--background, #fff);
   border: 1px solid var(--border, #d6d6d6);
   line-height: calc(6 * var(--base-unit, 8px));
@@ -3526,16 +3576,27 @@ svc-toolbox {
     border-right: 1px solid var(--border, #d6d6d6);
     display: inline-block; }
 
-.spg-question__content--left {
-  padding-left: calc(1 * var(--base-unit, 8px)); }
-  .spg-question__content--left .spg-input {
-    border: none; }
+.spg-question__content--left .spg-input {
+  border: none; }
 
 .spg-row--multiple {
   display: flex;
   gap: calc(1 * var(--base-unit, 8px));
-  margin-top: calc(1 * var(--base-unit, 8px)) !important;
-  overflow: hidden; }
+  overflow: hidden;
+  flex-wrap: wrap; }
+  .spg-row--multiple > div {
+    width: 0;
+    flex-grow: 1;
+    min-width: calc(25.5 * var(--base-unit, 8px)); }
+    .spg-row--multiple > div .spg-question__header--location--left {
+      min-width: calc(8 * var(--base-unit, 8px)); }
+    .spg-row--multiple > div input {
+      min-width: calc(17 * var(--base-unit, 8px));
+      width: 100%; }
+    .spg-row--multiple > div input[type="date"] {
+      width: 100%; }
+      .spg-row--multiple > div input[type="date"]::-webkit-calendar-picker-indicator {
+        display: none; }
 
 .spg-input {
   -webkit-appearance: none;
@@ -3550,6 +3611,7 @@ svc-toolbox {
   padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
   outline: none;
   font-size: calc(2 * var(--base-unit, 8px));
+  font-family: var(--font-family);
   color: var(--foreground, #161616); }
 
 .spg-input::placeholder {
@@ -3562,6 +3624,11 @@ svc-toolbox {
 .spg-input:disabled::placeholder {
   color: var(--foreground-disabled, rgba(22, 22, 22, 0.16)); }
 
+.spg-input[type="color"] {
+  padding-left: 0;
+  padding-right: 0;
+  min-width: calc(8 * var(--base-unit, 8px)); }
+
 .spg-dropdown {
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5L10 0H0L5 5Z' fill='%23909090'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat, repeat;
@@ -3646,6 +3713,9 @@ svc-toolbox {
   width: 100%;
   margin-top: calc(2 * var(--base-unit, 8px)); }
 
+.spg-panel__content .spg-row--multiple {
+  margin-top: calc(1 * var(--base-unit, 8px)); }
+
 .sv-mobile-side-bar .spg-panel__content {
   padding: 0 calc(2 * var(--base-unit, 8px)) calc(5 * var(--base-unit, 8px)); }
 
@@ -3798,6 +3868,8 @@ svc-toolbox {
   background-color: transparent;
   padding: calc(1.5 * var(--base-unit, 8px)) 0;
   padding-right: calc(2 * var(--base-unit, 8px)); }
+  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-text[type="color"] {
+    padding-right: 0; }
 
 .spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
   padding-left: calc(2 * var(--base-unit, 8px)); }
@@ -3815,16 +3887,20 @@ svc-toolbox {
 
 .spg-table__cell--header {
   font-size: calc(1.5 * var(--base-unit, 8px));
-  font-weight: 600;
-  padding: calc(1 * var(--base-unit, 8px)) 0 calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+  font-weight: normal;
   color: var(--foreground-light, #909090);
-  line-height: calc(2 * var(--base-unit, 8px));
-  box-shadow: 0px 1px 0px var(--border, #d6d6d6);
+  line-height: calc(3 * var(--base-unit, 8px));
   background: var(--background-dim, #f3f3f3);
-  text-align: left; }
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100px; }
 
 .spg-root-modern {
-  width: 100%; }
+  width: 100%;
+  border-right: 1px solid var(--border, #d6d6d6);
+  box-sizing: border-box; }
 
 .sv-popup--modal {
   padding: calc(4 * var(--base-unit, 8px)); }
@@ -3857,39 +3933,49 @@ svc-toolbox {
   padding-left: 0; }
 
 survey-creator button.spg-action-button,
-survey-creator .spg-action-button .sv-action-bar-item, .svc-creator button.spg-action-button,
+survey-creator .spg-action-button .sv-action-bar-item,
+.svc-creator button.spg-action-button,
 .svc-creator .spg-action-button .sv-action-bar-item {
   border-radius: calc(12.5 * var(--base-unit, 8px));
   padding: calc(1 * var(--base-unit, 8px));
   cursor: pointer; }
   survey-creator button.spg-action-button:hover, survey-creator button.spg-action-button:focus,
   survey-creator .spg-action-button .sv-action-bar-item:hover,
-  survey-creator .spg-action-button .sv-action-bar-item:focus, .svc-creator button.spg-action-button:hover, .svc-creator button.spg-action-button:focus,
+  survey-creator .spg-action-button .sv-action-bar-item:focus,
+  .svc-creator button.spg-action-button:hover,
+  .svc-creator button.spg-action-button:focus,
   .svc-creator .spg-action-button .sv-action-bar-item:hover,
   .svc-creator .spg-action-button .sv-action-bar-item:focus {
     outline: none;
     background-color: var(--primary-light, rgba(25, 179, 148, 0.1)); }
     survey-creator button.spg-action-button:hover use, survey-creator button.spg-action-button:focus use,
     survey-creator .spg-action-button .sv-action-bar-item:hover use,
-    survey-creator .spg-action-button .sv-action-bar-item:focus use, .svc-creator button.spg-action-button:hover use, .svc-creator button.spg-action-button:focus use,
+    survey-creator .spg-action-button .sv-action-bar-item:focus use,
+    .svc-creator button.spg-action-button:hover use,
+    .svc-creator button.spg-action-button:focus use,
     .svc-creator .spg-action-button .sv-action-bar-item:hover use,
     .svc-creator .spg-action-button .sv-action-bar-item:focus use {
       fill: var(--primary, #19b394); }
 
 survey-creator button.spg-action-button--danger:hover, survey-creator button.spg-action-button--danger:focus,
 survey-creator .spg-action-button--danger .sv-action-bar-item:hover,
-survey-creator .spg-action-button--danger .sv-action-bar-item:focus, .svc-creator button.spg-action-button--danger:hover, .svc-creator button.spg-action-button--danger:focus,
+survey-creator .spg-action-button--danger .sv-action-bar-item:focus,
+.svc-creator button.spg-action-button--danger:hover,
+.svc-creator button.spg-action-button--danger:focus,
 .svc-creator .spg-action-button--danger .sv-action-bar-item:hover,
 .svc-creator .spg-action-button--danger .sv-action-bar-item:focus {
   background-color: var(--red-light, rgba(230, 10, 62, 0.1)); }
   survey-creator button.spg-action-button--danger:hover use, survey-creator button.spg-action-button--danger:focus use,
   survey-creator .spg-action-button--danger .sv-action-bar-item:hover use,
-  survey-creator .spg-action-button--danger .sv-action-bar-item:focus use, .svc-creator button.spg-action-button--danger:hover use, .svc-creator button.spg-action-button--danger:focus use,
+  survey-creator .spg-action-button--danger .sv-action-bar-item:focus use,
+  .svc-creator button.spg-action-button--danger:hover use,
+  .svc-creator button.spg-action-button--danger:focus use,
   .svc-creator .spg-action-button--danger .sv-action-bar-item:hover use,
   .svc-creator .spg-action-button--danger .sv-action-bar-item:focus use {
     fill: var(--red, #e60a3e); }
 
-survey-creator button.spg-action-button--large, .svc-creator button.spg-action-button--large {
+survey-creator button.spg-action-button--large,
+.svc-creator button.spg-action-button--large {
   padding: calc(0.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)); }
 
 /* latin */