survey-react 1.9.111 → 1.9.113

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.111
+ * surveyjs - Survey JavaScript library v1.9.113
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -119,7 +119,7 @@ sv-popup {
   max-width: 100vw;
 }
 
-.sv-popup.sv-popup--modal {
+.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -127,11 +127,14 @@ sv-popup {
   padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
-.sv-popup.sv-popup--modal .sv-popup__body-content {
+.sv-popup--modal .sv-popup__body-content {
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
 
+.sv-popup--confirm-delete .sv-popup__shadow {
+  height: initial;
+}
 .sv-popup--confirm-delete .sv-popup__container {
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -146,7 +149,8 @@ sv-popup {
   font-size: var(--sjs-font-size, 16px);
   font-style: normal;
   font-weight: 400;
-  line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  /* 150% */
 }
 .sv-popup--confirm-delete .sv-popup__scrolling-content {
   display: none;
@@ -158,15 +162,15 @@ sv-popup {
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup.sv-popup--modal > .sv-popup__container {
+.sv-popup--modal > .sv-popup__container {
   position: static;
 }
 
-.sv-popup--overlay.sv-popup--overlay {
+.sv-popup--overlay {
   width: 100%;
   height: var(--sv-popup-overlay-height, 100vh);
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__container {
+.sv-popup--overlay .sv-popup__container {
   background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
   max-width: 100vw;
   max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -175,7 +179,7 @@ sv-popup {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: unset;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
   border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
@@ -184,25 +188,25 @@ sv-popup {
   padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
+.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
+.sv-popup--overlay .sv-popup__body-footer {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
+.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
+.sv-popup--overlay .sv-popup__body-footer-item {
   width: 100%;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__button {
+.sv-popup--overlay .sv-popup__button.sv-popup__button {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
+.sv-popup--overlay .sv-popup__body-footer .sv-action {
   flex: 1 0 0;
 }
 
@@ -305,66 +309,97 @@ sv-popup {
   top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-dropdown-popup.sv-popup--overlay {
+.sv-popup--dropdown .sv-list__filter {
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--dropdown .sv-popup__shadow {
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+}
+.sv-popup--dropdown .sv-popup__body-content {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
+  height: 100%;
+}
+
+.sv-dropdown-popup .sv-popup__body-content {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+}
+.sv-dropdown-popup .sv-list__filter {
+  margin-bottom: 0;
+}
+
+.sv-popup--modal .sv-popup__body-content {
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sv-popup--modal .sv-popup__body-footer {
+  padding-bottom: 2px;
+}
+
+.sv-popup--overlay .sv-popup__body-content {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
+.sv-popup--dropdown-overlay {
   z-index: 2001;
   padding: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--dropdown-overlay .sv-popup__body-content {
   padding: 0;
   border-radius: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar .sv-action {
-  width: auto;
+.sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar .sv-action {
+  flex: 0 0 auto;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
+.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
   background-color: transparent;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
+.sv-popup--dropdown-overlay .sv-popup__container {
   max-height: calc(var(--sv-popup-overlay-height, 100vh));
   height: calc(var(--sv-popup-overlay-height, 100vh));
   padding-top: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--dropdown-overlay .sv-popup__body-content {
   height: calc(var(--sv-popup-overlay-height, 100vh));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   margin-top: 0;
-  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
+.sv-popup--dropdown-overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__container {
+.sv-popup--dropdown-overlay .sv-list__container {
   padding: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list {
+.sv-popup--dropdown-overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
+.sv-popup--dropdown-overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: 0;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
+.sv-popup--dropdown-overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
+.sv-popup--dropdown-overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -372,12 +407,12 @@ sv-popup {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
+.sv-popup--dropdown-overlay .sv-popup__button:disabled {
   pointer-events: none;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -386,42 +421,70 @@ sv-popup {
   border-radius: 100%;
   background-color: transparent;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button svg {
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__input {
+.sv-popup--dropdown-overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-family: var(--font-family);
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
+.sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body {
   background: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.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 {
+.sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
+.sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar {
+  justify-content: flex-start;
+}
 
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon {
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__input {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content {
   --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   position: absolute;
@@ -429,7 +492,7 @@ sv-popup {
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: min(var(--sv-popup-overlay-max-height), 30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
   width: auto;
   min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
@@ -438,9 +501,9 @@ sv-popup {
   overflow: hidden;
   margin: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-list__container {
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-list__container {
   flex-grow: 1;
 }
 
@@ -2761,7 +2824,7 @@ sv-popup {
   max-width: 100vw;
 }
 
-.sv-popup.sv-popup--modal {
+.sv-popup--modal {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2769,11 +2832,14 @@ sv-popup {
   padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
 }
-.sv-popup.sv-popup--modal .sv-popup__body-content {
+.sv-popup--modal .sv-popup__body-content {
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
 
+.sv-popup--confirm-delete .sv-popup__shadow {
+  height: initial;
+}
 .sv-popup--confirm-delete .sv-popup__container {
   border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
 }
@@ -2788,7 +2854,8 @@ sv-popup {
   font-size: var(--sjs-font-size, 16px);
   font-style: normal;
   font-weight: 400;
-  line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
+  line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
+  /* 150% */
 }
 .sv-popup--confirm-delete .sv-popup__scrolling-content {
   display: none;
@@ -2800,15 +2867,15 @@ sv-popup {
   gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-popup.sv-popup--modal > .sv-popup__container {
+.sv-popup--modal > .sv-popup__container {
   position: static;
 }
 
-.sv-popup--overlay.sv-popup--overlay {
+.sv-popup--overlay {
   width: 100%;
   height: var(--sv-popup-overlay-height, 100vh);
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__container {
+.sv-popup--overlay .sv-popup__container {
   background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
   max-width: 100vw;
   max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
@@ -2817,7 +2884,7 @@ sv-popup {
   padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: unset;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
   border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
@@ -2826,25 +2893,25 @@ sv-popup {
   padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
+.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
+.sv-popup--overlay .sv-popup__body-footer {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
+.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer-item {
+.sv-popup--overlay .sv-popup__body-footer-item {
   width: 100%;
 }
-.sv-popup--overlay.sv-popup--overlay .sv-popup__button {
+.sv-popup--overlay .sv-popup__button.sv-popup__button {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
-.sv-popup--overlay.sv-popup--overlay:not(.sv-dropdown-popup) .sv-popup__body-footer .sv-action {
+.sv-popup--overlay .sv-popup__body-footer .sv-action {
   flex: 1 0 0;
 }
 
@@ -2947,66 +3014,97 @@ sv-popup {
   top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-dropdown-popup.sv-popup--overlay {
+.sv-popup--dropdown .sv-list__filter {
+  margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.sv-popup--dropdown .sv-popup__shadow {
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+}
+.sv-popup--dropdown .sv-popup__body-content {
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
+  height: 100%;
+}
+
+.sv-dropdown-popup .sv-popup__body-content {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
+}
+.sv-dropdown-popup .sv-list__filter {
+  margin-bottom: 0;
+}
+
+.sv-popup--modal .sv-popup__body-content {
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sv-popup--modal .sv-popup__body-footer {
+  padding-bottom: 2px;
+}
+
+.sv-popup--overlay .sv-popup__body-content {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+}
+
+.sv-popup--dropdown-overlay {
   z-index: 2001;
   padding: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--dropdown-overlay .sv-popup__body-content {
   padding: 0;
   border-radius: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer .sv-action-bar .sv-action {
-  width: auto;
+.sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar .sv-action {
+  flex: 0 0 auto;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__button {
+.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
   background-color: transparent;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
+.sv-popup--dropdown-overlay .sv-popup__container {
   max-height: calc(var(--sv-popup-overlay-height, 100vh));
   height: calc(var(--sv-popup-overlay-height, 100vh));
   padding-top: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-content {
+.sv-popup--dropdown-overlay .sv-popup__body-content {
   height: calc(var(--sv-popup-overlay-height, 100vh));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
-  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   margin-top: 0;
-  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
+  padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
+.sv-popup--dropdown-overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
+  width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__container {
+.sv-popup--dropdown-overlay .sv-list__container {
   padding: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list {
+.sv-popup--dropdown-overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
+.sv-popup--dropdown-overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-bottom: 0;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
+.sv-popup--dropdown-overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
+.sv-popup--dropdown-overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3014,12 +3112,12 @@ sv-popup {
   padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
+.sv-popup--dropdown-overlay .sv-popup__button:disabled {
   pointer-events: none;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.25;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button {
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3028,42 +3126,70 @@ sv-popup {
   border-radius: 100%;
   background-color: transparent;
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button svg {
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
+.sv-popup--dropdown-overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__input {
+.sv-popup--dropdown-overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
   font-family: var(--font-family);
-  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
+.sv-popup--dropdown-overlay .sv-list__item:hover .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item:focus .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item--focused .sv-list__item-body {
   background: var(--sjs-general-backcolor, var(--background, #fff));
 }
-.sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.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 {
+.sv-popup--dropdown-overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
+.sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar {
+  justify-content: flex-start;
+}
 
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
-.sv-dropdown-popup.sv-popup--overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__button.sv-popup__button {
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-popup__body-footer {
+  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon .sv-svg-icon {
+  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__filter-icon {
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sv-dropdown-popup.sv-popup--dropdown-overlay .sv-list__input {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
+}
+
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
+.sv-popup--dropdown-overlay.sv-multi-select-list .sv-list__item--focused.sv-list__item--selected .sv-list__item-body {
   background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-weight: 400;
 }
 
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content {
   --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   position: absolute;
@@ -3071,7 +3197,7 @@ sv-popup {
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: min(var(--sv-popup-overlay-max-height), 30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
   width: auto;
   min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
@@ -3080,9 +3206,9 @@ sv-popup {
   overflow: hidden;
   margin: 0;
 }
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__content,
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__scrolling-content,
-.sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-list__container {
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__content,
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__scrolling-content,
+.sv-popup--dropdown-overlay.sv-popup--tablet .sv-list__container {
   flex-grow: 1;
 }
 
@@ -3214,7 +3340,7 @@ sv-popup {
 
 .sv-title-actions .sv-title-actions__title {
   flex-wrap: wrap;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   max-width: unset;
   min-width: unset;
 }
@@ -3402,7 +3528,7 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-size, 16px);
   border-radius: 100%;
   border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
@@ -3425,19 +3551,19 @@ sv-popup {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
   line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
   margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   opacity: 0.25;
 }
 
 .sv-ranking-item--disabled .sv-ranking-item__text {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
   opacity: 0.25;
 }
 
@@ -3555,6 +3681,9 @@ sv-popup {
   align-items: center;
 }
 
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container {
+  max-width: calc(50% - 1px);
+}
 .sv-ranking--select-to-rank-horizontal .sv-ranking__containers-divider {
   width: 1px;
 }
@@ -3572,7 +3701,7 @@ sv-popup {
 }
 
 .sv-ranking__container-placeholder {
-  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+  color: var(--sjs-font-questiondescription-color, var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
   font-family: var(--font-family, var(--font-family));
   font-style: normal;
   font-size: var(--sjs-font-size, 16px);
@@ -3594,7 +3723,7 @@ sv-popup {
 }
 
 .sv-ranking__containers-divider {
-  background: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
+  background: var(--sjs-border-default, var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16))));
 }
 
 .sv-ranking__container--from .sv-ranking-item__icon--focus {
@@ -3646,7 +3775,7 @@ sv-popup {
   padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: normal;
   font-size: var(--sjs-font-size, 16px);
   line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
@@ -3739,7 +3868,7 @@ 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(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
   font-weight: 400;
 }