survey-creator-core 1.12.16 → 1.12.17

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.12.16
+ * SurveyJS Creator v1.12.17
  * (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.16
+ * SurveyJS Creator v1.12.17
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -506,6 +506,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
+  background-color: transparent;
   color: var(--ctr-list-search-text-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -605,7 +606,7 @@ svc-tab-json-editor-textarea {
 }
 
 .svc-json-editor-tab__content-area {
-  font-family: var(--ctr-font-family-code, "DM Mono");
+  font-family: var(--ctr-font-family-code, monospace);
   font-size: var(--ctr-font-code-size, 16px);
   font-style: normal;
   font-weight: 400;
@@ -750,7 +751,6 @@ svc-tab-json-editor-textarea {
   top: 50%;
   left: 50%;
   transform: scale(1.26) translate(-50%, -50%);
-  overflow: overlay;
   border: 2px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
 }
 
@@ -758,10 +758,10 @@ svc-tab-json-editor-textarea {
   margin: 0 auto;
   position: relative;
   overflow: hidden;
-  border-radius: 32px;
-  border: 4px solid var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  background: var(--sjs-general-backcolor, var(--background, #fff));
-  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.1), 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
+  border-radius: var(--ctr-preview-device-corner-radius, 32px);
+  border: var(--ctr-preview-device-border-width, 4px) solid var(--ctr-preview-device-border-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
+  background: var(--ctr-preview-device-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1), 0px 8px 16px 0px var(--ctr-preview-device-shadow-2-color, rgba(0, 0, 0, 0.05));
 }
 
 .svd-simulator-main {
@@ -797,12 +797,6 @@ svc-tab-json-editor-textarea {
   position: relative;
 }
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  ::i-block-chrome,
-  .svd-simulator-content {
-    overflow-y: scroll;
-  }
-}
 .svd-simulator .sv-popup--overlay {
   --sv-popup-overlay-height: 100%;
 }
@@ -827,9 +821,6 @@ svc-tab-test {
   gap: 0px;
 }
 
-.svc-test-tab__content .svc-plugin-tab__content {
-  overflow-y: overlay;
-}
 .svc-test-tab__content .svc-plugin-tab__content .sv-root-modern .sv-completedpage,
 .svc-test-tab__content .svc-plugin-tab__content .sv_default_css .sv_completed_page {
   margin: 0;
@@ -1624,6 +1615,10 @@ svc-tab-test {
 
 .st-root-modern {
   width: 100%;
+  height: fit-content;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: var(--ctr-string-table-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 .st-title.st-panel__title,
@@ -2155,6 +2150,10 @@ td.st-table__cell:first-of-type span {
 .svc-logic-tab__leave-apply-button {
   background-color: var(--ctr-button-background-color-danger, var(--sjs-special-red, var(--red, #e60a3e)));
 }
+
+.svc-logic-question-value.sd-element--with-frame {
+  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px) var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px) var(--lbr-question-panel-shadow-color, rgba(0, 0, 0, 0.15));
+}
 /*!************************************************************************************************************************************************************************************!*\
   !*** 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/components/tabs/designer.scss ***!
   \************************************************************************************************************************************************************************************/
@@ -2174,7 +2173,7 @@ svc-tab-designer {
   width: 0;
 }
 
-.svc-tab-designer--with-place-holder .svc-designer-header {
+.svc-tab-designer--with-placeholder .svc-designer-header {
   min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
@@ -2230,14 +2229,14 @@ svc-tab-designer {
   padding-inline-end: var(--ctr-survey-page-margin-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
-.svc-tab-designer--with-place-holder .svc-tab-designer_content {
+.svc-tab-designer--with-placeholder .svc-tab-designer_content {
   display: flex;
   justify-content: center;
   flex-direction: column;
   min-height: 100%;
 }
 
-.svc-tab-designer--with-page-navigator .svc-tab-designer_content {
+.svc-tab-designer--with-surface-tools .svc-tab-designer_content {
   padding-inline-start: var(--ctr-survey-page-margin-right-with-toolbar, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding-inline-end: var(--ctr-survey-page-margin-left-with-toolbar, calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
@@ -2347,9 +2346,6 @@ svc-tab-designer {
 /*!************************************************************************************************************************************************************************!*\
   !*** 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/responsivity.scss ***!
   \************************************************************************************************************************************************************************/
-.svc-creator--mobile .svc-tab-designer {
-  overflow-y: overlay;
-}
 .svc-creator--mobile .sd-root-modern,
 .svc-creator--mobile .sd-container-modern {
   --sd-base-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2714,11 +2710,11 @@ svc-tab-designer {
   align-items: center;
   justify-content: center;
 }
-.svc-creator-popup.sv-popup--modal .sv-popup__button--cancel {
+.svc-creator-popup.sv-popup--modal .sv-popup__button {
   background: var(--ctr-button-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
   color: var(--ctr-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
-.svc-creator-popup.sv-popup--modal .sv-popup__button--cancel:hover {
+.svc-creator-popup.sv-popup--modal .sv-popup__button:hover {
   background: var(--ctr-button-background-color-hovered, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
 }
 .svc-creator-popup.sv-popup--modal .sv-popup__button--apply {
@@ -2728,6 +2724,13 @@ svc-tab-designer {
 .svc-creator-popup.sv-popup--modal .sv-popup__button--apply:hover {
   background: var(--ctr-button-background-color-cta-hovered, var(--sjs-primary-backcolor-dark, rgb(20, 164, 139)));
 }
+.svc-creator-popup.sv-popup--modal .sd-btn--danger {
+  background: var(--ctr-button-background-color-danger, var(--sjs-special-red, var(--red, #e60a3e)));
+  color: var(--ctr-button-text-color-danger, var(--sjs-special-red-forecolor, #ffffff));
+}
+.svc-creator-popup.sv-popup--modal .sd-btn--danger:hover {
+  background: var(--ctr-button-background-color-danger-hovered, var(--sjs-special-red, var(--red, #e60a3e)));
+}
 
 .svc-surface-placeholder {
   display: flex;
@@ -3838,7 +3841,7 @@ svc-page {
 .svc-page-toolbar__item use {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
 }
-.svc-page-toolbar__item:hover, .svc-page-toolbar__item:focus {
+.svc-page-toolbar__item:hover, .svc-page-toolbar__item:focus-visible {
   background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-page-toolbar__item:active, .svc-page-toolbar__item.svc-page-toolbar__item--pressed {
@@ -4461,7 +4464,7 @@ svc-question {
 .svc-survey-element-toolbar__item use {
   fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-backcolor, var(--secondary, #ff9814)));
 }
-.svc-survey-element-toolbar__item:hover, .svc-survey-element-toolbar__item:focus {
+.svc-survey-element-toolbar__item:hover, .svc-survey-element-toolbar__item:focus-visible {
   background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 .svc-survey-element-toolbar__item:active, .svc-survey-element-toolbar__item.svc-survey-element-toolbar__item--pressed {
@@ -4885,11 +4888,10 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut {
-  height: auto;
   border-radius: var(--ctr-toolbox-item-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   background-color: var(--ctr-toolbox-item-background-color-floating, var(--sjs-general-backcolor, var(--background, #fff)));
   color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-general-forecolor, var(--foreground, #161616)));
-  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-toolbox-item-padding-top-submenu, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-bottom-submenu, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-left-submenu, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   cursor: grabbing;
   position: absolute;
   z-index: 1000;
@@ -4922,22 +4924,25 @@ svc-question {
   font-weight: 400;
   line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   font-weight: 600;
-  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-dragged-element-shortcut--has-icon {
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-toolbox-item-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-toolbox-item-padding-right, calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-toolbox-item-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-toolbox-item-padding-left, calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  display: flex;
+  gap: var(--ctr-toolbox-item-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
+  justify-content: center;
+  align-items: center;
 }
 .svc-dragged-element-shortcut--has-icon .svc-dragged-element-shortcut__text {
-  line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: block;
 }
 
 .svc-dragged-element-shortcut__icon {
-  position: absolute;
-  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
+}
+.svc-dragged-element-shortcut__icon svg {
+  width: var(--ctr-toolbox-item-icon-width, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  height: var(--ctr-toolbox-item-icon-height, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
 
 .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
@@ -5543,7 +5548,7 @@ svc-question .sv-action-bar,
   opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
   background-color: transparent;
 }
-.svc-survey-element-top-toolbar__item:hover, .svc-survey-element-top-toolbar__item:focus {
+.svc-survey-element-top-toolbar__item:hover, .svc-survey-element-top-toolbar__item:focus-visible {
   opacity: initial;
   background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
@@ -5607,8 +5612,8 @@ svc-question .sv-action-bar,
   font-style: normal;
   line-height: var(--lbr-font-default-line-height, var(--thm-default-line-height, 24px));
   font-weight: 600;
-  margin-left: calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  margin-left: var(--ctr-survey-radio-button-group-show-more-button-margin-left, calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  margin-top: var(--ctr-survey-radio-button-group-show-more-button-margin-top, var(--sjs-base-unit, var(--base-unit, 8px)));
   padding: var(--ctr-survey-action-button-padding-top, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-action-button-padding-right, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-action-button-padding-bottom, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-survey-action-button-padding-left, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   border-radius: var(--ctr-survey-action-button-corner-radius, 1024px);
   cursor: pointer;
@@ -6265,11 +6270,16 @@ svc-question .sv-action-bar,
   !*** 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/components/results.scss ***!
   \******************************************************************************************************************************************************************************/
 .svd-test-results {
-  border-radius: 4px;
-  box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  border-radius: var(--ctr-string-table-corner-radius, calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  box-shadow: inset 0px 1px 0px 0px var(--ctr-string-table-shadow-color, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
   padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.svd-test-results .svd-test-results__header {
+
+.svd-test-results__content {
+  box-shadow: var(--ctr-string-table-shadow-offset-x, 0px) var(--ctr-string-table-shadow-offset-y, 1px) var(--ctr-string-table-shadow-blur, 2px) var(--ctr-string-table-shadow-spread, 0px) var(--ctr-string-table-shadow-color, rgba(0, 0, 0, 0.15));
+}
+
+.svd-test-results__header {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6280,19 +6290,32 @@ svc-question .sv-action-bar,
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  padding: var(--ctr-string-table-title-padding-top, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-string-table-title-padding-right, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-string-table-title-padding-bottom, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-string-table-title-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  color: var(--ctr-string-table-title-caption-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+  border-bottom: var(--ctr-string-table-title-border-width-bottom, 2px) solid var(--ctr-string-table-title-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
+  background-color: var(--ctr-string-table-title-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
-.svd-test-results .svd-test-results__header .svd-test-results__header-text {
+.svd-test-results__header .svd-test-results__header-text {
   margin: 0;
 }
-.svd-test-results .svd-test-results__header .svd-test-results__header-types {
+.svd-test-results__header .svd-test-results__header-types {
   display: flex;
-  gap: var(--sjs-base-unit, var(--base-unit, 8px));
+  gap: var(--ctr-string-table-title-actionbar-gap, var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.svd-test-results .svd-test-results__text {
+.svd-test-results__header .svc-action-button {
+  color: var(--ctr-actionbar-button-text-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-radius: var(--ctr-actionbar-button-corner-radius, calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
+  background-color: transparent;
+}
+.svd-test-results__header .svc-action-button:focus, .svd-test-results__header .svc-action-button:hover {
+  background-color: var(--ctr-survey-action-button-background-color-hovered-positive, var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))));
+  outline: none;
+}
+.svd-test-results__header .svc-action-button.svc-action-button--selected {
+  border: var(--ctr-actionbar-button-border-width-selected, calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))))) solid var(--ctr-actionbar-button-border-color-selected, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
+.svd-test-results__text {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6301,37 +6324,37 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
   display: flex;
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--ctr-code-viewer-text-margin-top-results-table, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-code-viewer-text-margin-right-results-table, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-code-viewer-text-margin-bottom-results-table, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))))) var(--ctr-code-viewer-text-margin-left-results-table, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: calc(100% - 6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: auto;
   user-select: text;
   white-space: pre-wrap;
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  background: var(--ctr-code-viewer-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
+  color: var(--ctr-code-viewer-text-color, rgb(0, 0, 0));
 }
-.svd-test-results .svd-test-results__table {
-  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+
+.svd-test-results__table {
   width: 100%;
-  box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, rgba(0, 0, 0, 0.15));
 }
-.svd-test-results .svd-test-results__table table {
+.svd-test-results__table table {
   width: 100%;
   border-collapse: collapse;
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker {
+.svd-test-results__table table .svd-test-results__marker {
   position: absolute;
   top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
+.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(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.svd-test-results__table table .svd-test-results__marker .sv-svg-icon use {
+  fill: var(--ctr-string-table-row-expand-button-icon-color-default, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svd-test-results .svd-test-results__table table .svd-test-results__marker.svd-test-results__marker--expanded .sv-svg-icon {
+.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-test-results__table table th {
+.svd-test-results__table table th {
   --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --ctr-small-bold-font-size: calc(0.75 * var(--small-bold-font-size));
   --ctr-small-bold-line-height: var(--small-bold-font-size);
@@ -6341,15 +6364,15 @@ svc-question .sv-action-bar,
   font-weight: 400;
   line-height: var(--ctr-font-small-line-height, var(--ctr-small-bold-line-height, 16px));
   font-weight: 600;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
-  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  padding: var(--ctr-string-table-row-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
+  background: var(--ctr-string-table-header-background-color, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
   text-align: left;
-  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+  color: var(--ctr-string-table-header-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
-.svd-test-results .svd-test-results__table table th:nth-child(1) {
-  padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.svd-test-results__table table th:nth-child(1) {
+  padding-left: var(--ctr-string-table-row-padding-left, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
-.svd-test-results .svd-test-results__table table td {
+.svd-test-results__table table td {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6357,13 +6380,14 @@ svc-question .sv-action-bar,
   font-style: normal;
   font-weight: 400;
   line-height: var(--ctr-font-default-line-height, var(--thm-default-line-height, 24px));
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
+  padding: var(--ctr-string-table-row-padding-top, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-right, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-bottom, var(--sjs-base-unit, var(--base-unit, 8px))) var(--ctr-string-table-row-padding-left, var(--sjs-base-unit, var(--base-unit, 8px)));
   max-width: calc(50 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   overflow: auto;
-  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border-top: var(--ctr-string-table-row-border-width-bottom, 2px) solid var(--ctr-string-table-row-border-color, var(--sjs-border-light, var(--border-light, #eaeaea)));
   user-select: text;
+  background: var(--ctr-string-table-row-background-color, var(--sjs-general-backcolor, var(--background, #fff)));
 }
-.svd-test-results .svd-test-results__table table td:nth-child(1) {
+.svd-test-results__table table td:nth-child(1) {
   --thm-default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
   --thm-default-line-height: calc(1.5 * var(--thm-default-font-size));
   font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));
@@ -6375,18 +6399,22 @@ svc-question .sv-action-bar,
   position: relative;
   width: 50%;
 }
-.svd-test-results .svd-test-results__table table td:nth-child(2) {
+.svd-test-results__table table td:nth-child(2) {
   width: 50%;
-  padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: var(--ctr-string-table-row-padding-right, calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
 }
-.svd-test-results .svd-test-results__table table .survey-result-value {
+.svd-test-results__table table .survey-result-value {
   word-break: break-all;
 }
-.svd-test-results .svd-test-results__table table tr {
+.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(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+.svd-test-results__table table tr .svd-test-results__node-value {
+  color: var(--ctr-string-table-row-text-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
+
+.svd-dark-border-color {
+  color: var(--ctr-string-table-row-text-color-title, rgb(0, 0, 0));
 }
 /*!****************************************************************************************************************************************************************************************!*\
   !*** 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/components/header/logo-image.scss ***!
@@ -6686,7 +6714,6 @@ svc-question .sv-action-bar,
 
 .svc-property-grid-placeholder__header {
   display: flex;
-  width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
   max-width: var(--ctr-property-grid-placeholder-text-max-width, 256px);
   flex-direction: column;
   justify-content: center;
@@ -7782,8 +7809,7 @@ svc-question .sv-action-bar,
 }
 
 .svc-side-bar--flyout .svc-side-bar__shadow {
-  background-color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  opacity: 0.75;
+  background-color: var(--ctr-popup-haze-background-color, var(--background-semitransparent, rgba(144, 144, 144, 0.5)));
   position: absolute;
   top: 0;
   bottom: 0;
@@ -8268,17 +8294,17 @@ button.spg-action-button--large {
 }
 
 .spg-action-button:disabled {
-  opacity: var(--ctr-library-action-button-opacity-disabled, 0.25);
+  opacity: var(--ctr-actionbar-button-opacity-disabled, 0.25);
   pointer-events: none;
   cursor: default;
 }
 
 .spg-action-button--muted {
-  opacity: 0.5;
+  opacity: var(--ctr-actionbar-button-opacity-muted, 0.5);
 }
 
 .spg-action-button:active {
-  opacity: 0.5;
+  opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
 }
 
 .spg-action-button--text {
@@ -9045,6 +9071,7 @@ input.spg-input:read-only::placeholder {
 
 .spg-checkbox .spg-question__description {
   padding: 0;
+  padding-top: var(--ctr-checkbox-description-text-margin-top, calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   padding-inline-start: var(--ctr-checkbox-description-text-margin-left, calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
   color: var(--ctr-checkbox-description-text-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
 }