survey-react 1.9.80 → 1.9.82

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.80
+ * surveyjs - Survey JavaScript library v1.9.82
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -86,7 +86,6 @@ sv-popup {
   left: 0;
   top: 0;
   width: 100vw;
-  height: 100vh;
   outline: none;
   z-index: 1500;
 }
@@ -115,6 +114,11 @@ sv-popup {
   max-width: 90vw;
 }
 
+.sv-popup.sv-popup--modal,
+.sv-popup.sv-popup--overlay {
+  height: 100vh;
+}
+
 .sv-popup--modal {
   display: flex;
   align-items: center;
@@ -170,7 +174,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
   background-color: var(--primary, #19b394);
   border: 2px solid var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup--modal .sv-popup__scrolling-content {
@@ -247,7 +251,7 @@ sv-popup {
   font-style: normal;
   font-weight: 700;
   margin-bottom: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
@@ -266,7 +270,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
@@ -282,7 +286,8 @@ sv-popup {
 }
 
 .sv-popup__button:disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 
@@ -292,7 +297,7 @@ sv-popup {
 
 .sv-popup__button--apply {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup__button--apply:disabled {
@@ -377,7 +382,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -394,13 +399,13 @@ sv-popup {
   width: calc(2 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family);
   padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -412,14 +417,14 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -560,7 +565,6 @@ sv-popup {
   max-width: 336px;
   height: 100%;
   background: #FFFFFF;
-  border-right: 1px solid #D6D6D6;
   box-sizing: border-box;
   min-width: 256px;
 }
@@ -580,6 +584,14 @@ sv-popup {
   padding-bottom: 12px;
 }
 
+.sv_progress-toc--left {
+  border-right: 1px solid #D6D6D6;
+}
+
+.sv_progress-toc--right {
+  border-left: 1px solid #D6D6D6;
+}
+
 .sv-container-modern {
   color: var(--text-color, #404040);
   font-size: var(--font-size, 16px);
@@ -2202,6 +2214,50 @@ select.sv-dropdown {
   background-color: var(--main-color, #1ab394);
 }
 
+.sv-rating__item-star > svg {
+  height: 32px;
+  width: 32px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  fill: var(--text-color, #404040);
+}
+.sv-rating__item-star > svg.sv-star-2 {
+  display: none;
+}
+.sv-rating__item-star > svg:hover {
+  border: 1px solid var(--main-hover-color, #9f9f9f);
+}
+
+.sv-rating__item-star--selected > svg {
+  fill: var(--main-color, #1ab394);
+}
+
+.sv-rating__item-smiley > svg {
+  height: 24px;
+  width: 24px;
+  padding: 4px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 3px solid var(--border-color, rgba(64, 64, 64, 0.5));
+  margin: 3px 0;
+  margin-right: 0.26em;
+  fill: var(--main-hover-color, #9f9f9f);
+}
+.sv-rating__item-smiley > svg > use {
+  display: block;
+}
+.sv-rating__item-smiley > svg:hover {
+  border: 3px solid var(--main-hover-color, #9f9f9f);
+  background-color: var(--main-hover-color, #9f9f9f);
+}
+
+.sv-rating__item-smiley--selected > svg {
+  background-color: var(--main-color, #1ab394);
+  fill: var(--body-background-color, white);
+  border: 3px solid var(--main-color, #1ab394);
+}
+
 .sv-rating__min-text {
   font-size: 1em;
   margin-right: 1.25em;
@@ -2408,7 +2464,7 @@ select.sv-dropdown {
 }
 
 .sjs_sp_placeholder {
-  color: var(--foreground-light, var(--foreground-light, #909090));
+  color: var(--foreground-light, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
 }
 
 .sv-action-bar {
@@ -2448,7 +2504,7 @@ select.sv-dropdown {
   border: none;
   border-radius: 2px;
   background-color: transparent;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
   font-family: var(--font-family, var(--font-family));
   overflow-x: hidden;
@@ -2493,7 +2549,7 @@ button.sv-action-bar-item {
   display: block;
 }
 .sv-action-bar-item__icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
@@ -2648,7 +2704,6 @@ sv-popup {
   left: 0;
   top: 0;
   width: 100vw;
-  height: 100vh;
   outline: none;
   z-index: 1500;
 }
@@ -2677,6 +2732,11 @@ sv-popup {
   max-width: 90vw;
 }
 
+.sv-popup.sv-popup--modal,
+.sv-popup.sv-popup--overlay {
+  height: 100vh;
+}
+
 .sv-popup--modal {
   display: flex;
   align-items: center;
@@ -2732,7 +2792,7 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__button {
   background-color: var(--primary, #19b394);
   border: 2px solid var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup--modal .sv-popup__scrolling-content {
@@ -2809,7 +2869,7 @@ sv-popup {
   font-style: normal;
   font-weight: 700;
   margin-bottom: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
@@ -2828,7 +2888,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
@@ -2844,7 +2904,8 @@ sv-popup {
 }
 
 .sv-popup__button:disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 
@@ -2854,7 +2915,7 @@ sv-popup {
 
 .sv-popup__button--apply {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
 .sv-popup__button--apply:disabled {
@@ -2939,7 +3000,7 @@ sv-popup {
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
@@ -2956,13 +3017,13 @@ sv-popup {
   width: calc(2 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family);
   padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
@@ -2974,14 +3035,14 @@ sv-popup {
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sd-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused.sv-list__item--selected .sd-list__item-body {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
@@ -3038,7 +3099,7 @@ sv-popup {
   background: var(--background, #fff);
   cursor: pointer;
   overflow: hidden;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   position: relative;
 }
 .sv-button-group__item:not(:last-of-type) {
@@ -3054,7 +3115,7 @@ sv-popup {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sv-button-group__item-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-button-group__item--selected {
@@ -3086,11 +3147,12 @@ sv-popup {
 }
 
 .sv-button-group__item--disabled {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
   cursor: default;
 }
 .sv-button-group__item--disabled .sv-button-group__item-icon use {
-  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 .sv-button-group__item--disabled:hover {
   background-color: var(--background, #fff);
@@ -3148,7 +3210,7 @@ sv-popup {
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -3202,7 +3264,7 @@ sv-popup {
 
 .sv-brand-info {
   width: 100%;
-  font-family: var(--font-family, var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif));
+  font-family: var(--font-family, var(--font-family));
   text-align: center;
   color: #161616;
   background: white;
@@ -3266,11 +3328,13 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__icon--focus {
   visibility: visible;
+  top: calc(0.6 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item:focus .sv-ranking-item__index {
   background: var(--background, #fff);
-  border: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
+  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--primary, #19b394);
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
@@ -3289,8 +3353,6 @@ sv-popup {
   flex-shrink: 0;
   width: calc(3 * var(--base-unit, 8px));
   height: calc(4 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
-  margin-left: calc(1 * var(--base-unit, 8px));
 }
 
 .sv-ranking-item__icon.sv-ranking-item__icon {
@@ -3298,7 +3360,6 @@ sv-popup {
   fill: var(--primary, #19b394);
   position: absolute;
   top: calc(1 * var(--base-unit, 8px));
-  margin-right: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
 }
@@ -3309,7 +3370,7 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   border-radius: 100%;
   border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
@@ -3318,7 +3379,7 @@ sv-popup {
   line-height: calc(3 * var(--base-unit, 8px));
   box-sizing: border-box;
   font-weight: 600;
-  margin-left: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(0 * var(--base-unit, 8px));
 }
 .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
@@ -3331,14 +3392,15 @@ sv-popup {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   margin: 0 calc(2 * var(--base-unit, 8px));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  opacity: 0.25;
 }
 
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
@@ -3381,7 +3443,7 @@ sv-popup {
 
 .sv-ranking--mobile .sv-ranking-item__icon--hover {
   visibility: visible;
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-ranking--mobile.sv-ranking--drag .sv-ranking-item--ghost .sv-ranking-item__icon.sv-ranking-item__icon--hover {
@@ -3424,12 +3486,15 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  margin-left: calc(1 * var(--base-unit, 8px));
   width: calc(1.75 * var(--base-unit, 8px));
   height: calc(2 * var(--base-unit, 8px));
   top: calc(1 * var(--base-unit, 8px));
 }
 
+.sv-ranking-shortcut .sv-ranking-item__icon-container {
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+
 .sv-list {
   padding: 0;
   margin: 0;
@@ -3454,14 +3519,14 @@ sv-popup {
   font-size: calc(2 * var(--base-unit, 8px));
   font-weight: 400;
   text-align: center;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__item {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3475,7 +3540,7 @@ sv-popup {
   padding-block: calc(1 * var(--base-unit, 8px));
   padding-inline-end: calc(8 * var(--base-unit, 8px));
   padding-inline-start: calc(2 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   cursor: pointer;
@@ -3514,7 +3579,7 @@ sv-popup {
   display: block;
 }
 .sv-list__item-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 [dir=rtl] .sv-list__item-icon,
@@ -3535,7 +3600,7 @@ sv-popup {
 .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
 li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
   background-color: var(--primary, #19b394);
-  color: var(--primary-foreground, #fff);
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 .sv-list__item.sv-list__item--selected .sv-list__item-icon use,
@@ -3549,13 +3614,13 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover .sv-list__item-body {
   background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 
 .sv-list__item.sv-list__item--disabled .sv-list__item-body {
   cursor: default;
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__item span {
@@ -3588,7 +3653,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   height: calc(3 * var(--base-unit, 8px));
 }
 .sv-list__filter-icon .sv-svg-icon use {
-  fill: var(--foreground-light, #909090);
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__input {
@@ -3601,7 +3666,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   width: 100%;
   outline: none;
   font-size: 1em;
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
   padding-inline-start: calc(7 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
@@ -3609,12 +3674,12 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-list__input::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__input:disabled,
 .sv-list__input:disabled::placeholder {
-  color: var(--foreground-light, #909090);
+  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
 .sv-list__loading-indicator {
@@ -3634,11 +3699,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   border-radius: calc(1 * var(--base-unit, 8px));
-  color: var(--foreground, #161616);
+  color: var(--sjs-general-forecolor, var(--foreground, #161616));
   min-width: calc(30 * var(--base-unit, 8px));
   text-align: center;
   z-index: 1600;
-  font-family: var(--font-family, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--font-family, var(--font-family));
   font-size: calc(2 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
   display: flex;