UNPKG

survey-react

Version:

survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.

1,797 lines (1,573 loc) 147 kB
/*! * surveyjs - Survey JavaScript library v1.12.58 * Copyright (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/ * License: MIT (http://www.opensource.org/licenses/mit-license.php) */ /* latin-ext */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqhPAMif.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISQ.woff) format("woff"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPBg.woff) format("woff"); } :root { --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; } .sv-dragdrop-movedown { transform: translate(0, 0); animation: svdragdropmovedown 0.1s; animation-timing-function: ease-in-out; } @keyframes svdragdropmovedown { 0% { transform: translate(0, -50px); } 100% { transform: translate(0, 0); } } .sv-dragdrop-moveup { transform: translate(0, 0); animation: svdragdropmoveup 0.1s; animation-timing-function: ease-in-out; } @keyframes svdragdropmoveup { 0% { transform: translate(0, 50px); } 100% { transform: translate(0, 0); } } :root { --sjs-transition-duration: 150ms; } sv-popup { display: block; position: absolute; } .sv-popup { position: fixed; left: 0; top: 0; width: 100vw; outline: none; z-index: 2000; height: 100vh; } .sv-dropdown-popup { height: 0; } .sv-popup.sv-popup-inner { height: 0; } .sv-popup-inner > .sv-popup__container { margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-list__item--with-icon .sv-popup-inner > .sv-popup__container { margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-popup__container { background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)); box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)); border-radius: var(--sjs-corner-radius, 4px); position: absolute; padding: 0; } .sv-popup__body-content { background-color: var(--sjs-general-backcolor, var(--background, #fff)); border-radius: var(--sjs-corner-radius, 4px); width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; max-height: 90vh; max-width: 100vw; } .sv-popup--modal { display: flex; align-items: center; justify-content: center; background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5)); padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))); box-sizing: border-box; } .sv-popup--modal > .sv-popup__container { position: static; display: flex; } .sv-popup--modal > .sv-popup__container > .sv-popup__body-content { background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)); padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))); height: auto; gap: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-popup--modal .sv-popup__body-footer .sv-footer-action-bar { overflow: visible; } .sv-popup--confirm .sv-popup__container { border-radius: var(--sjs-base-unit, var(--base-unit, 8px)); } .sv-popup--confirm .sv-popup__body-content { border-radius: var(--sjs-base-unit, var(--base-unit, 8px)); max-width: min-content; align-items: flex-end; min-width: 452px; } .sv-popup--confirm .sv-popup__body-header { color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91))); align-self: self-start; /* UI/Default */ font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))); font-size: var(--sjs-font-size, 16px); font-style: normal; font-weight: 400; line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */ } .sv-popup--confirm .sv-popup__scrolling-content { display: none; } .sv-popup--confirm .sv-popup__body-footer { max-width: max-content; } .sv-popup--confirm .sv-popup__body-footer .sv-action-bar { gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sd-root-modern--mobile .sv-popup--confirm .sv-popup__body-content { min-width: auto; } .sv-popup--overlay { width: 100%; height: var(--sv-popup-overlay-height, 100vh); } .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))); height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px))); width: 100%; padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))); border: unset; box-shadow: unset; box-sizing: content-box; } .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; background: var(--sjs-general-backcolor, var(--background, #fff)); 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__scrolling-content { height: calc(100% - 10 * var(--base-unit, 8px)); } .sv-popup--overlay .sv-popup__body-footer .sv-action-bar { width: 100%; } .sv-popup--overlay .sv-popup__body-footer-item { width: 100%; } .sv-popup--overlay .sv-popup__body-footer .sv-action { flex: 1 0 0; } .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--modal .sv-popup__scrolling-content { padding: 2px; margin: -2px; } .sv-popup__scrolling-content { height: 100%; overflow: auto; display: flex; flex-direction: column; } .sv-popup__scrolling-content::-webkit-scrollbar, .sv-popup__scrolling-content *::-webkit-scrollbar { height: 6px; width: 6px; background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)); } .sv-popup__scrolling-content::-webkit-scrollbar-thumb, .sv-popup__scrolling-content *::-webkit-scrollbar-thumb { background: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1))); } .sv-popup__content { min-width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; } .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer { transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg); } .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer { transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))); } .sv-popup--show-pointer.sv-popup--right .sv-popup__container { transform: translate(var(--sjs-base-unit, var(--base-unit, 8px))); } .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer { transform: translate(-12px, -4px) rotate(-90deg); } .sv-popup--show-pointer.sv-popup--left .sv-popup__container { transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))); } .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer { transform: translate(-4px, -4px) rotate(90deg); } .sv-popup__pointer { display: block; position: absolute; } .sv-popup__pointer:after { content: " "; display: block; width: 0; height: 0; border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent; border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent; border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff)); align-self: center; } .sv-popup__body-header { font-family: Open Sans; font-size: calc(1.5 * (var(--sjs-font-size, 16px))); line-height: calc(2 * (var(--sjs-font-size, 16px))); font-style: normal; font-weight: 700; color: var(--sjs-general-forecolor, var(--foreground, #161616)); } .sv-popup__body-footer { display: flex; } .sv-popup__body-footer .sv-action-bar { gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-popup--modal .sv-list__filter, .sv-popup--overlay .sv-list__filter { padding-top: var(--sjs-base-unit, var(--base-unit, 8px)); } .sv-popup--modal .sv-list__filter-icon, .sv-popup--overlay .sv-list__filter-icon { top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-popup--dropdown .sv-list__filter { margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px)); } .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-popup--dropdown > .sv-popup__container > .sv-popup__body-content .sv-list { background-color: transparent; } .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--overlay .sv-popup__body-content { background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)); gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-popup--dropdown-overlay { z-index: 2001; padding: 0; } .sv-popup--dropdown-overlay .sv-popup__body-content { padding: 0; border-radius: 0; } .sv-popup--dropdown-overlay .sv-popup__body-footer .sv-action-bar .sv-action { flex: 0 0 auto; } .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: 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)))); } .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-popup--dropdown-overlay .sv-popup__body-content { height: calc(var(--sv-popup-overlay-height, 100vh)); gap: 0; } .sv-popup--dropdown-overlay .sv-popup__body-footer { background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)); 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-popup--dropdown-overlay .sv-popup__scrolling-content { height: calc(100% - 6 * 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-popup--dropdown-overlay .sv-list__container { padding: 0; } .sv-popup--dropdown-overlay .sv-list { flex-grow: 1; padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0; } .sv-popup--dropdown-overlay .sv-list__filter { display: flex; align-items: center; 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-popup--dropdown-overlay .sv-list__filter-icon { position: static; height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-popup--dropdown-overlay .sv-list__empty-container { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; 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-popup--dropdown-overlay .sv-popup__button:disabled { pointer-events: none; color: var(--sjs-general-forecolor, var(--foreground, #161616)); opacity: 0.25; } .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)))); appearance: none; border: none; border-radius: 100%; background-color: transparent; } .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-popup--dropdown-overlay .sv-list__filter-clear-button svg use { fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090)); } .sv-popup--dropdown-overlay .sv-list__input { color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090)); font-size: max(16px, var(--sjs-font-size, 16px)); line-height: max(24px, 1.5 * (var(--sjs-font-size, 16px))); font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-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)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .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-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--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-popup--dropdown-overlay.sv-popup--tablet { background: var(--background-semitransparent, rgba(144, 144, 144, 0.5)); } .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__container { --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; transform: translate(-50%, -50%); left: 50%; top: 50%; max-height: var(--sv-popup-overlay-max-height); 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)); max-width: var(--sv-popup-overlay-max-width); border-radius: var(--sjs-corner-radius, 4px); overflow: hidden; box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)); } .sv-popup--dropdown-overlay.sv-popup--tablet .sv-popup__body-content { max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8); min-height: min(var(--sv-popup-overlay-max-height), 30 * (var(--sjs-base-unit, var(--base-unit, 8px)))); height: auto; } .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; } .sv-popup--visible { opacity: 1; } .sv-popup--hidden { opacity: 0; } .sv-popup--enter { animation-name: fadeIn; animation-fill-mode: forwards; animation-duration: 0.15s; } .sv-popup--modal.sv-popup--enter { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-duration: 0.25s; } .sv-popup--leave { animation-direction: reverse; animation-name: fadeIn; animation-fill-mode: forwards; animation-duration: 0.15s; } .sv-popup--modal.sv-popup--leave { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-duration: 0.25s; } .sv-popup--hidden { opacity: 0; } @keyframes modalMoveUp { from { transform: translateY(64px); } to { transform: translateY(0); } } .sv-popup--modal.sv-popup--leave .sv-popup__container, .sv-popup--modal.sv-popup--enter .sv-popup__container { animation-name: modalMoveUp; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-fill-mode: forwards; animation-duration: 0.25s; } .sv-popup--modal.sv-popup--leave .sv-popup__container { animation-direction: reverse; animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } :root { --sjs-transition-duration: 150ms; } .sv_progress-buttons__container-center { text-align: center; } .sv_progress-buttons__container { display: inline-block; font-size: 0; width: 100%; max-width: 1100px; white-space: nowrap; overflow: hidden; } .sv_progress-buttons__image-button-left { display: inline-block; vertical-align: top; margin-top: 22px; font-size: calc(0.875 * (var(--sjs-font-size, 16px))); width: 16px; height: 16px; cursor: pointer; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIHBvaW50cz0iMTEsMTIgOSwxNCAzLDggOSwyIDExLDQgNyw4ICIvPg0KPC9zdmc+DQo=); } .sv_progress-buttons__image-button-right { display: inline-block; vertical-align: top; margin-top: 22px; font-size: calc(0.875 * (var(--sjs-font-size, 16px))); width: 16px; height: 16px; cursor: pointer; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIHBvaW50cz0iNSw0IDcsMiAxMyw4IDcsMTQgNSwxMiA5LDggIi8+DQo8L3N2Zz4NCg==); } .sv_progress-buttons__image-button--hidden { visibility: hidden; } .sv_progress-buttons__list-container { max-width: calc(100% - 36px); display: inline-block; overflow: hidden; } .sv_progress-buttons__list { display: inline-block; width: max-content; padding-left: 28px; padding-right: 28px; margin-top: 14px; margin-bottom: 14px; } .sv_progress-buttons__list li { width: 138px; font-size: calc(0.875 * (var(--sjs-font-size, 16px))); font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))); position: relative; text-align: center; vertical-align: top; display: inline-block; } .sv_progress-buttons__list li:before { width: 24px; height: 24px; content: ""; line-height: 30px; display: block; margin: 0 auto 10px auto; border: 3px solid; border-radius: 50%; box-sizing: content-box; cursor: pointer; } .sv_progress-buttons__list li:after { width: 73%; height: 3px; content: ""; position: absolute; top: 15px; left: -36.5%; } .sv_progress-buttons__list li:first-child:after { content: none; } .sv_progress-buttons__list .sv_progress-buttons__page-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } .sv_progress-buttons__list .sv_progress-buttons__page-description { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv_progress-buttons__list li.sv_progress-buttons__list-element--nonclickable:before { cursor: not-allowed; } :root { --sjs-transition-duration: 150ms; } .sv_progress-toc { padding: var(--sjs-base-unit, var(--base-unit, 8px)); max-width: 336px; height: 100%; background: #FFFFFF; box-sizing: border-box; min-width: calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body { background: rgba(25, 179, 148, 0.1); color: #161616; font-weight: 400; } .sv_progress-toc .sv-list__item span { white-space: break-spaces; } .sv_progress-toc .sv-list__item-body { padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))); padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))); border-radius: var(--sjs-corner-radius, 4px); padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))); padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv_progress-toc use { fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090)); } .sv_progress-toc--left { border-right: 1px solid #D6D6D6; } .sv_progress-toc--right { border-left: 1px solid #D6D6D6; } .sv_progress-toc--mobile { position: fixed; top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))); right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))); width: auto; min-width: auto; height: auto; background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)); z-index: 15; border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv_progress-toc--mobile > div { width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))); height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv_progress-toc--mobile:hover { background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)); } .sd-title + .sv-components-row > .sv-components-column .sv_progress-toc:not(.sv_progress-toc--mobile), .sd-title ~ .sv-components-row > .sv-components-column .sv_progress-toc:not(.sv_progress-toc--mobile) { margin-top: 2px; } .sv_progress-toc.sv_progress-toc--sticky { position: sticky; height: auto; overflow-y: auto; top: 0; } .sv-container-modern { color: var(--text-color, #404040); font-size: var(--font-size, var(--sjs-font-size, 16px)); font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))); } .sv-container-modern__title { color: var(--main-color, #1ab394); padding-left: 0.55em; padding-top: 5em; padding-bottom: 0.9375em; } @media only screen and (min-width: 1000px) { .sv-container-modern__title { margin-right: 5%; margin-left: 5%; } } @media only screen and (max-width: 1000px) { .sv-container-modern__title { margin-right: 10px; margin-left: 10px; } } .sv-container-modern__title h3 { margin: 0; font-size: 1.875em; } .sv-container-modern__title h5 { margin: 0; } .sv-container-modern__close { clear: right; } .sv-container-modern fieldset { border: none; padding: 0; margin: 0; } .sv-container-modern legend { border: none; padding: 0; margin: 0; } .sv-body { width: 100%; padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px)))); } .sv-body__timer, .sv-body__page, .sv-body__footer.sv-footer.sv-action-bar { margin-top: 2em; } @media only screen and (min-width: 1000px) { .sv-body__timer, .sv-body__page, .sv-body__footer.sv-footer.sv-action-bar { margin-right: 5%; margin-left: 5%; } } @media only screen and (max-width: 1000px) { .sv-body__timer, .sv-body__page, .sv-body__footer.sv-footer.sv-action-bar { margin-right: 10px; margin-left: 10px; } } .sv-body__timer { padding: 0 var(--sjs-base-unit, var(--base-unit, 8px)); box-sizing: border-box; } .sv-body__progress { margin-bottom: 4.5em; } .sv-body__progress:not(:first-child) { margin-top: 2.5em; } .sv-root-modern { width: 100%; --sv-mobile-width: 600px; } .sv-page__title { margin: 0; margin-bottom: 1.333em; font-size: 1.875em; padding-left: 0.293em; } .sv-page__description { min-height: 2.8em; font-size: 1em; padding-left: 0.55em; } .sv-page__title + .sv-page__description { margin-top: -2.8em; } .sv-panel { box-sizing: border-box; width: 100%; } .sv-panel__title { font-size: 1.25em; margin: 0; padding: 0; padding-bottom: 0.1em; padding-left: 0.44em; padding-right: 0.44em; position: relative; } .sv-panel__footer { margin: 0; padding: 1em 0.44em 1em 0; } .sv-panel__description { padding-left: 0.55em; } .sv-panel__title--expandable { cursor: pointer; display: flex; padding-right: 24px; align-items: center; } .sv-panel__title--expandable:after { content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; background-size: 10px 12px; width: 24px; height: 24px; position: absolute; right: 0; } .sv-panel__title--expandable.sv-panel__title--expanded:after { transform: rotate(180deg); } .sv-panel__icon { outline: none; } .sv-panel__icon:before { content: ""; display: inline-block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; height: 0.5em; width: 0.6em; margin-left: 1.5em; vertical-align: middle; } .sv-panel__icon--expanded:before { transform: rotate(180deg); } .sv-panel .sv-question__title { font-size: 1em; padding-left: 0.55em; } .sv-panel__content:not(:first-child) { margin-top: 0.75em; } .sv-panel .sv-row:not(:last-child) { padding-bottom: 1.875em; } .sv-panel__title--error { background-color: var(--error-background-color, rgba(213, 41, 1, 0.2)); } .sv-paneldynamic__progress-container { position: relative; margin-left: 0.75em; margin-right: 250px; margin-top: 20px; } .sv-paneldynamic__add-btn { background-color: var(--add-button-color, #1948b3); float: right; margin-top: -18px; } [dir=rtl] .sv-paneldynamic__add-btn, [style*="direction:rtl"] .sv-paneldynamic__add-btn, [style*="direction: rtl"] .sv-paneldynamic__add-btn { float: left; } .sv-paneldynamic__add-btn--list-mode { float: none; margin-top: 1em; } .sv-paneldynamic__remove-btn { background-color: var(--remove-button-color, #ff1800); margin-top: 1.25em; } .sv-paneldynamic__remove-btn--right { margin-top: 0; margin-left: 1.25em; } .sv-paneldynamic__prev-btn, .sv-paneldynamic__next-btn { box-sizing: border-box; display: inline-block; fill: var(--text-color, #404040); cursor: pointer; width: 0.7em; top: -0.28em; position: absolute; } .sv-paneldynamic__prev-btn svg, .sv-paneldynamic__next-btn svg { display: block; height: 0.7em; width: 0.7em; } .sv-paneldynamic__prev-btn { left: -1.3em; transform: rotate(90deg); } .sv-paneldynamic__next-btn { right: -1.3em; transform: rotate(270deg); } .sv-paneldynamic__prev-btn--disabled, .sv-paneldynamic__next-btn--disabled { fill: var(--disable-color, #dbdbdb); cursor: auto; } .sv-paneldynamic__progress-text { color: var(--progress-text-color, #9d9d9d); font-weight: bold; font-size: 0.87em; margin-top: 0.69em; margin-left: 1em; } .sv-paneldynamic__separator { border: none; margin: 0; } .sv-paneldynamic__progress--top { margin-bottom: 1em; } .sv-paneldynamic__progress--bottom { margin-top: 1em; } .sv-paneldynamic__panel-wrapper ~ .sv-paneldynamic__panel-wrapper { padding-top: 2.5em; } .sv-paneldynamic__panel-wrapper--in-row { display: flex; flex-direction: row; align-items: center; } @supports (display: flex) { .sv-row { display: flex; flex-wrap: wrap; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .sv-row > .sv-row__panel, .sv-row__question:not(:last-child) { float: left; } } @media only screen and (-ms-high-contrast: active) and (max-width: 600px), only screen and (-ms-high-contrast: none) and (max-width: 600px) { .sv-row > .sv-row__panel, .sv-row__question:not(:last-child) { padding-bottom: 2.5em; float: none; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { [dir=rtl] .sv-row__question:not(:last-child), [style*="direction:rtl"] .sv-row__question:not(:last-child), [style*="direction: rtl"] .sv-row__question:not(:last-child) { float: right; } } @media only screen and (-ms-high-contrast: active) and (max-width: 6000px), only screen and (-ms-high-contrast: none) and (max-width: 6000px) { .sv-row__question--small:only-child { max-width: 3000px; } } @media only screen and (-ms-high-contrast: active) and (max-width: 3000px), only screen and (-ms-high-contrast: none) and (max-width: 3000px) { .sv-row__question--small:only-child { max-width: 1200px; } } @media only screen and (-ms-high-contrast: active) and (max-width: 2000px), only screen and (-ms-high-contrast: none) and (max-width: 2000px) { .sv-row__question--small:only-child { max-width: 700px; } } @media only screen and (-ms-high-contrast: active) and (max-width: 1000px), only screen and (-ms-high-contrast: none) and (max-width: 1000px) { .sv-row__question--small:only-child { max-width: 500px; } } @media only screen and (-ms-high-contrast: active) and (max-width: 500px), only screen and (-ms-high-contrast: none) and (max-width: 500px) { .sv-row__question--small:only-child { max-width: 300px; } } @media only screen and (-ms-high-contrast: active) and (max-width: 600px), only screen and (-ms-high-contrast: none) and (max-width: 600px) { .sv-row > .sv-row__panel, .sv-row__question { width: 100% !important; padding-right: 0 !important; } } .sv-row > .sv-row__panel, .sv-row__question { vertical-align: top; white-space: normal; } .sv-row__question:first-child:last-child { flex: none !important; } .sv-row:not(:last-child) { padding-bottom: 2.5em; } .sv-question { overflow: auto; box-sizing: border-box; font-family: inherit; padding-left: var(--sv-element-add-padding-left, 0px); padding-right: var(--sv-element-add-padding-right, 0px); } .sv-question__title { position: relative; box-sizing: border-box; margin: 0; padding: 0.25em 0.44em; cursor: default; font-size: 1.25em; } .sv-question__required-text { line-height: 0.8em; font-size: 1.4em; } .sv-question__description { margin: 0; padding-left: 0.55em; font-size: 1em; } .sv-question__input { width: 100%; height: 1.81em; } .sv-question__content { margin-left: 0.55em; } .sv-question__erbox { color: var(--error-color, #d52901); font-size: 0.74em; font-weight: bold; } .sv-question__erbox--location--top { margin-bottom: 0.4375em; } .sv-question__erbox--location--bottom { margin-top: 0.4375em; } .sv-question__footer { padding: 0.87em 0; } .sv-question__title--answer { background-color: var(--answer-background-color, rgba(26, 179, 148, 0.2)); } .sv-question__title--error { background-color: var(--error-background-color, rgba(213, 41, 1, 0.2)); } .sv-question__header--location--top { margin-bottom: 0.65em; } .sv-question__header--location--left { float: left; width: 27%; margin-right: 0.875em; } [dir=rtl] .sv-question__header--location--left, [style*="direction:rtl"] .sv-question__header--location--left, [style*="direction: rtl"] .sv-question__header--location--left { float: right; } .sv-question__header--location--bottom { margin-top: 0.8em; } .sv-question__content--left { overflow: hidden; } .sv-question__other { margin-top: 0.5em; } .sv-question__form-group { margin-top: 0.5em; } .sv-question--disabled .sv-question__header { color: var(--disabled-text-color, rgba(64, 64, 64, 0.5)); } .sv-image { display: inline-block; } .sv-question__title--expandable { cursor: pointer; display: flex; padding-right: 24px; align-items: center; } .sv-question__title--expandable:after { content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; background-size: 10px 12px; width: 24px; height: 24px; position: absolute; right: 0; } .sv-question__title--expandable.sv-question__title--expanded:after { transform: rotate(180deg); } .sv-question__icon { outline: none; } .sv-question__icon:before { content: ""; display: inline-block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; height: 0.5em; width: 0.6em; margin-left: 1.5em; vertical-align: middle; } .sv-question__icon--expanded:before { transform: rotate(180deg); } .sv-progress { height: 0.19em; background-color: var(--header-background-color, #e7e7e7); position: relative; } .sv-progress__bar { position: relative; height: 100%; background-color: var(--main-color, #1ab394); } .sv-progress__text { position: absolute; margin-top: 0.69em; color: var(--progress-text-color, #9d9d9d); font-size: 0.87em; font-weight: bold; padding-left: 0.6321em; } @media only screen and (min-width: 1000px) { .sv-progress__text { margin-left: 5%; } } @media only screen and (max-width: 1000px) { .sv-progress__text { margin-left: 10px; } } .sv_progress-buttons__list li:before { border-color: var(--progress-buttons-color, #8dd9ca); background-color: var(--progress-buttons-color, #8dd9ca); } .sv_progress-buttons__list li:after { background-color: var(--text-border-color, #d4d4d4); } .sv_progress-buttons__list .sv_progress-buttons__page-title { color: var(--text-color, #404040); } .sv_progress-buttons__list .sv_progress-buttons__page-description { color: var(--text-color, #404040); } .sv_progress-buttons__list li.sv_progress-buttons__list-element--passed:before { border-color: var(--main-color, #1ab394); background-color: var(--main-color, #1ab394); } .sv_progress-buttons__list li.sv_progress-buttons__list-element--passed + li:after { background-color: var(--progress-buttons-color, #8dd9ca); } .sv_progress-buttons__list li.sv_progress-buttons__list-element--current:before { border-color: var(--main-color, #1ab394); background-color: white; } .sv_progress-buttons__list li.sv_progress-buttons__list-element--passed.sv_progress-buttons__list-element--current:before { border-color: var(--main-color, #1ab394); background-color: white; } .sv-title { font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))); font-weight: 700; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; } .sv-description { color: var(--disabled-text-color, rgba(64, 64, 64, 0.5)); } .sv-question .sv-selectbase { margin-bottom: 4px; } .sv-selectbase__item { margin-bottom: 0.425em; vertical-align: top; } .sv-selectbase__item--inline { display: inline-block; padding-right: 5%; } .sv-selectbase__column { min-width: 140px; vertical-align: top; } .sv-selectbase__label { position: relative; display: block; box-sizing: border-box; cursor: inherit; margin-left: 41px; min-height: 30px; } [dir=rtl] .sv-selectbase__label, [style*="direction:rtl"] .sv-selectbase__label, [style*="direction: rtl"] .sv-selectbase__label { margin-right: 41px; margin-left: 0; } .sv-selectbase__decorator.sv-item__decorator { position: absolute; left: -41px; } [dir=rtl] .sv-selectbase__decorator.sv-item__decorator, [style*="direction:rtl"] .sv-selectbase__decorator.sv-item__decorator, [style*="direction: rtl"] .sv-selectbase__decorator.sv-item__decorator { left: initial; right: -41px; } .sv-selectbase__clear-btn { margin-top: 0.9em; background-color: var(--clean-button-color, #1948b3); } .sv-selectbase .sv-selectbase__item.sv-q-col-1 { padding-right: 0; } .sv-question .sv-q-column-1 { width: 100%; max-width: 100%; display: inline-block; padding-right: 1em; box-sizing: border-box; } .sv-question .sv-q-column-2 { max-width: 50%; display: inline-block; padding-right: 1em; box-sizing: border-box; } .sv-question .sv-q-column-3 { max-width: 33.33333%; display: inline-block; padding-right: 1em; box-sizing: border-box; } .sv-question .sv-q-column-4 { max-width: 25%; display: inline-block; padding-right: 1em; box-sizing: border-box; } .sv-question .sv-q-column-5 { max-width: 20%; display: inline-block; padding-right: 1em; box-sizing: border-box; } .sv-multipletext { width: 100%; table-layout: fixed; } .sv-multipletext__item-label { display: flex; align-items: center; } .sv-multipletext__item { flex: 1; } .sv-multipletext__item-title { margin-right: 1em; width: 33%; } .sv-multipletext__cell:not(:first-child) { padding-left: 0.5em; } .sv-multipletext__cell:not(:last-child) { padding-right: 0.5em; } .sv-matrix { overflow-x: auto; } .sv-matrix .sv-table__cell--header { text-align: center; } .sv-matrix__label { display: inline-block; margin: 0; } .sv-matrix__cell { min-width: 10em; text-align: center; } .sv-matrix__cell:first-child { text-align: left; } .sv-matrix__text { cursor: pointer; } .sv-matrix__text--checked { color: var(--body-background-color, white); background-color: var(--main-color, #1ab394); } .sv-matrix__text--disabled { cursor: default; } .sv-matrix__text--disabled.sv-matrix__text--checked { background-color: var(--disable-color, #dbdbdb); } .sv-matrix__row--error { background-color: var(--error-background-color, rgba(213, 41, 1, 0.2)); } .sv-matrixdynamic__add-btn { background-color: var(--add-button-color, #1948b3); } .sv-matrixdynamic__remove-btn { background-color: var(--remove-button-color, #ff1800); } .sv-detail-panel__icon { display: block; position: absolute; left: 50%; top: 50%; height: 13px; width: 24px; transform: translate(-50%, -50%) rotate(270deg); } .sv-detail-panel__icon--expanded { transform: translate(-50%, -50%); } .sv-detail-panel__icon:before { content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%239A9A9A;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='19,6 17,4 10,11 3,4 1,6 10,15 '/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center center; height: 18px; width: 24px; } .sv-root-modern ::-webkit-scrollbar { height: 6px; width: 6px; background-color: var(--main-hover-color, #9f9f9f); } .sv-root-modern ::-webkit-scrollbar-thumb { background: var(--main-color, #1ab394); } .sv-table { width: 100%; background-color: rgba(var(--main-hover-color, #9f9f9f), 0.1); border-collapse: separate; border-spacing: 0; } .sv-table tbody tr:last-child .sv-table__cell { padding-bottom: 2.5em; } .sv-table tr:first-child .sv-table__cell { padding-top: 1.875em; } .sv-table td:first-child, .sv-table th:first-child { padding-left: 1.875em; } .sv-table td:last-child, .sv-table th:last-child { padding-right: 1.875em; } .sv-table__row--detail { background-color: var(--header-background-color, #e7e7e7); } .sv-table__row--detail td { border-top: 1px solid var(--text-border-color, #d4d4d4); border-bottom: 1px solid var(--text-border-color, #d4d4d4); padding: 1em 0; } .sv-table__cell { padding: 0.9375em 0; box-sizing: content-box; vertical-align: top; } .sv-table__cell:not(:last-child) { padding-right: 1em; } .sv-table__cell:not(:first-child) { padding-left: 1em; } .sv-table__cell--header { font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))); font-weight: bold; text-align: left; } .sv-table__cell--rowText { vertical-align: middle; } .sv-table__cell--detail { text-align: center; vertical-align: middle; width: 32px; } .sv-table__cell--detail-rowtext { vertical-align: middle; } .sv-table__cell--detail-panel { padding-left: 1em; } .sv-table__cell--detail-button { appearance: none; position: relative; border: 3px solid var(--border-color, rgba(64, 64, 64, 0.5)); border-radius: 50px; text-align: center; vertical-align: middle; width: 32px; height: 32px; padding: 0; margin: 0; outline: none; cursor: pointer; background: transparent; } .sv-table__empty--rows--section { text-align: center; vertical-align: middle; } .sv-table__empty--rows--text { padding: 20px; } .sv-table__cell--actions sv-action-bar, .sv-table__cell--actions .sv-action-bar { margin-left: 0; padding-left: 0; } .sv-footer.sv-action-bar { display: block; min-height: var(--base-line-height, 2em); padding: 2.5em 0 0.87em 0; margin-left: auto; } .sv-footer.sv-action-bar .sv-action__content { display: block; } .sv-footer.sv-action-bar .sv-action:not(:last-child) .sv-action__content { padding-right: 0; } .sv-btn--navigation { margin: 0 1em; float: right; background-color: var(--main-color, #1ab394); } .sv-footer__complete-btn, .sv-footer__next-btn, .sv-footer__preview-btn { float: right; } .sv-footer__prev-btn, .sv-footer__edit-btn { float: left; } [dir=rtl] .sv-footer__complete-btn, [style*="direction:rtl"] .sv-footer__complete-btn, [style*="direction: rtl"] .sv-footer__complete-btn { float: left; } [dir=rtl] .sv-footer__preview-btn, [style*="direction:rtl"] .sv-footer__preview-btn, [style*="direction: rtl"] .sv-footer__preview-btn { float: left; } [dir=rtl] .sv-footer__next-btn, [style*="direction:rtl"] .sv-footer__next-btn, [style*="direction: rtl"] .sv-footer__next-btn { float: left; } [dir=rtl] .sv-footer__prev-btn, [style*="direction:rtl"] .sv-footer__prev-btn, [style*="direction: rtl"] .sv-footer__prev-btn { float: right; } [dir=rtl] .sv-footer__edit-btn, [style*="direction:rtl"] .sv-footer__edit-btn, [style*="direction: rtl"] .sv-footer__edit-btn { float: right; } .sv-btn.sv-action-bar-item, .sv-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 1.214em; color: var(--body-background-color, white); cursor: pointer; font-family: inherit; font-size: 0.875em; font-weight: bold; outline: none; padding: 0.5em 2.786em 0.6em; text-align: start; } .sv-btn--navigation { background-color: var(--main-color, #1ab394); } .sv-item { position: relative; cursor: pointer; } .sv-item--disabled { cursor: default; } .sv-item__decorator { position: relative; display: inline-block; box-sizing: border-box; width: 30px; height: 30px; border: solid 1px transparent; vertical-align: middle; } .sv-item__svg { position: absolute; top: 50%; left: 50%; display: inline-block; box-sizing: border-box; width: 24px; height: 24px; margin-right: -50%; transform: translate(-50%, -50%); } .sv-item__control:focus + .sv-item__decorator { border-color: var(--main-color, #1ab394); outline: none; } .sv-item__control-label { position: relative; top: 4px; } .sv-checkbox__decorator { border-radius: 2px; } .sv-checkbox__svg { border: 3px solid var(--border-color, rgba(64, 64, 64, 0.5)); border-radius: 2px; fill: transparent; } .sv-checkbox--allowhover:hover .sv-checkbox__svg { border: none; background-color: var(--main-hover-color, #9f9f9f); fill: white; } .sv-checkbox--checked .sv-checkbox__svg { borde