@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ToastMessage { margin: 0.25rem 0.5rem 0.25rem 0.5rem; } .ToastMessage__title { font-size: 16px; } .ToastMessage__title--info { color: rgb(var(--color-sky-blue-700)); } .ToastMessage__title--success { color: rgb(var(--color-success-600)); } .ToastMessage__title--warning { color: rgb(var(--color-warning-500)); } .ToastMessage__title--error { color: rgb(var(--color-error-500)); } .ToastMessage__message { font-size: 16px; line-height: 1.2em; margin-top: 5px; color: rgb(var(--color-gray-800)); } .ToastMessage__details { margin-top: 5px; font-size: 14px; color: rgb(var(--color-gray-700)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .button { cursor: pointer; color: white; display: inline-block; padding: 10px 15px; border-radius: 5px; border: 0; } .button--noMargin { margin: 0 !important; } .button--lg { padding-top: 14px; padding-bottom: 14px; } .button--stale { opacity: 0.65; } .button .fa { margin-left: 5px; } .button--isLoading { position: relative; overflow: hidden; } .button--isLoading:hover { cursor: default; } .button--isLoading:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px); background-size: 800%; animation: buttonIsLoading 30s infinite; animation-timing-function: linear; } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } .button.button-size-xxs { padding: 4px 7px; font-size: 12px; line-height: 14px; min-height: 29px; min-width: 70px; border: 1px solid transparent; box-sizing: border-box; } .button.button-size-xs { padding: 5px 9px; font-size: 13px; line-height: 15px; min-height: 31px; min-width: 75px; border: 1px solid transparent; box-sizing: border-box; } .button.button-size-sm { padding: 9px 11px; font-size: 14px; line-height: 16px; min-height: 33px; min-width: 80px; border: 1px solid transparent; box-sizing: border-box; } .button.button-size-md { padding: 10px 12px; font-size: 16px; line-height: 18px; min-height: 37px; min-width: 90px; border: 1px solid transparent; box-sizing: border-box; } .button.button-size-lg { padding: 13px 14px; font-size: 17px; line-height: 19px; min-height: 39px; min-width: 95px; border: 1px solid transparent; box-sizing: border-box; } .button.button-size-xl { padding: 15px 16px; font-size: 18px; line-height: 20px; min-height: 41px; min-width: 100px; border: 1px solid transparent; box-sizing: border-box; } .button-primary { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-primary-dash3-500)); } .button-primary:hover { background-color: rgb(var(--color-primary-dash3-600)); } .button-primary.button--isLoading { background-color: rgb(var(--color-primary-dash3-200)); } .button-primary.button--isLoading:hover { background-color: rgb(var(--color-primary-dash3-200)) !important; } .button-primary { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-primary.button--disabled { background-color: rgb(var(--color-primary-dash3-200)) !important; cursor: default; } .button-primary.button--disabled:hover { text-decoration: none; } .button-primary.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-primary { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-primary-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-primary:hover { color: rgb(var(--color-primary-dash3-600)); text-decoration: underline; } .button-text-primary.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-primary.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-secondary { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-secondary-dash3-500)); } .button-secondary:hover { background-color: rgb(var(--color-secondary-dash3-600)); } .button-secondary.button--isLoading { background-color: rgb(var(--color-secondary-dash3-200)); } .button-secondary.button--isLoading:hover { background-color: rgb(var(--color-secondary-dash3-200)) !important; } .button-secondary { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-secondary.button--disabled { background-color: rgb(var(--color-secondary-dash3-200)) !important; cursor: default; } .button-secondary.button--disabled:hover { text-decoration: none; } .button-secondary.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-secondary { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-secondary-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-secondary:hover { color: rgb(var(--color-secondary-dash3-600)); text-decoration: underline; } .button-text-secondary.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-secondary.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-gray { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-gray-dash3-600)); } .button-gray:hover { background-color: rgb(var(--color-gray-dash3-700)); } .button-gray.button--isLoading { background-color: rgb(var(--color-gray-dash3-200)); } .button-gray.button--isLoading:hover { background-color: rgb(var(--color-gray-dash3-200)) !important; } .button-gray { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-gray.button--disabled { background-color: rgb(var(--color-gray-dash3-200)) !important; cursor: default; } .button-gray.button--disabled:hover { text-decoration: none; } .button-gray.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-gray { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-gray-dash3-600)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-gray:hover { color: rgb(var(--color-gray-dash3-700)); text-decoration: underline; } .button-text-gray.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-gray.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-white { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-white)); } .button-white:hover { background-color: rgb(var(--color-white)); } .button-white.button--isLoading { background-color: rgb(var(--color-white-dash3-200)); } .button-white.button--isLoading:hover { background-color: rgb(var(--color-white-dash3-200)) !important; } .button-white { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-white.button--disabled { background-color: rgb(var(--color-white-dash3-200)) !important; cursor: default; } .button-white.button--disabled:hover { text-decoration: none; } .button-white.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-white { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-white)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-white:hover { color: rgb(var(--color-white)); text-decoration: underline; } .button-text-white.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-white.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-black { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-black)); } .button-black:hover { background-color: rgb(var(--color-black)); } .button-black.button--isLoading { background-color: rgb(var(--color-black-dash3-200)); } .button-black.button--isLoading:hover { background-color: rgb(var(--color-black-dash3-200)) !important; } .button-black { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-black.button--disabled { background-color: rgb(var(--color-black-dash3-200)) !important; cursor: default; } .button-black.button--disabled:hover { text-decoration: none; } .button-black.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-black { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-black)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-black:hover { color: rgb(var(--color-black)); text-decoration: underline; } .button-text-black.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-black.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-error { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-error-dash3-500)); } .button-error:hover { background-color: rgb(var(--color-error-dash3-600)); } .button-error.button--isLoading { background-color: rgb(var(--color-error-dash3-200)); } .button-error.button--isLoading:hover { background-color: rgb(var(--color-error-dash3-200)) !important; } .button-error { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-error.button--disabled { background-color: rgb(var(--color-error-dash3-200)) !important; cursor: default; } .button-error.button--disabled:hover { text-decoration: none; } .button-error.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-error { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-error-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-error:hover { color: rgb(var(--color-error-dash3-600)); text-decoration: underline; } .button-text-error.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-error.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-success { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-success-dash3-500)); } .button-success:hover { background-color: rgb(var(--color-success-dash3-600)); } .button-success.button--isLoading { background-color: rgb(var(--color-success-dash3-200)); } .button-success.button--isLoading:hover { background-color: rgb(var(--color-success-dash3-200)) !important; } .button-success { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-success.button--disabled { background-color: rgb(var(--color-success-dash3-200)) !important; cursor: default; } .button-success.button--disabled:hover { text-decoration: none; } .button-success.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-success { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-success-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-success:hover { color: rgb(var(--color-success-dash3-600)); text-decoration: underline; } .button-text-success.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-success.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-warning { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-warning-dash3-500)); } .button-warning:hover { background-color: rgb(var(--color-warning-dash3-600)); } .button-warning.button--isLoading { background-color: rgb(var(--color-warning-dash3-200)); } .button-warning.button--isLoading:hover { background-color: rgb(var(--color-warning-dash3-200)) !important; } .button-warning { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-warning.button--disabled { background-color: rgb(var(--color-warning-dash3-200)) !important; cursor: default; } .button-warning.button--disabled:hover { text-decoration: none; } .button-warning.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-warning { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-warning-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-warning:hover { color: rgb(var(--color-warning-dash3-600)); text-decoration: underline; } .button-text-warning.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-warning.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-teal { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-teal-dash3-500)); } .button-teal:hover { background-color: rgb(var(--color-teal-dash3-600)); } .button-teal.button--isLoading { background-color: rgb(var(--color-teal-dash3-200)); } .button-teal.button--isLoading:hover { background-color: rgb(var(--color-teal-dash3-200)) !important; } .button-teal { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-teal.button--disabled { background-color: rgb(var(--color-teal-dash3-200)) !important; cursor: default; } .button-teal.button--disabled:hover { text-decoration: none; } .button-teal.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-teal { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-teal-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-teal:hover { color: rgb(var(--color-teal-dash3-600)); text-decoration: underline; } .button-text-teal.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-teal.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-red { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-red-dash3-500)); } .button-extra-red:hover { background-color: rgb(var(--color-extra-red-dash3-600)); } .button-extra-red.button--isLoading { background-color: rgb(var(--color-extra-red-dash3-200)); } .button-extra-red.button--isLoading:hover { background-color: rgb(var(--color-extra-red-dash3-200)) !important; } .button-extra-red { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-red.button--disabled { background-color: rgb(var(--color-extra-red-dash3-200)) !important; cursor: default; } .button-extra-red.button--disabled:hover { text-decoration: none; } .button-extra-red.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-red { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-red-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-red:hover { color: rgb(var(--color-extra-red-dash3-600)); text-decoration: underline; } .button-text-extra-red.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-red.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-orange { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-orange-dash3-500)); } .button-extra-orange:hover { background-color: rgb(var(--color-extra-orange-dash3-600)); } .button-extra-orange.button--isLoading { background-color: rgb(var(--color-extra-orange-dash3-200)); } .button-extra-orange.button--isLoading:hover { background-color: rgb(var(--color-extra-orange-dash3-200)) !important; } .button-extra-orange { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-orange.button--disabled { background-color: rgb(var(--color-extra-orange-dash3-200)) !important; cursor: default; } .button-extra-orange.button--disabled:hover { text-decoration: none; } .button-extra-orange.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-orange { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-orange-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-orange:hover { color: rgb(var(--color-extra-orange-dash3-600)); text-decoration: underline; } .button-text-extra-orange.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-orange.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-yellow { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-yellow-dash3-500)); } .button-extra-yellow:hover { background-color: rgb(var(--color-extra-yellow-dash3-600)); } .button-extra-yellow.button--isLoading { background-color: rgb(var(--color-extra-yellow-dash3-200)); } .button-extra-yellow.button--isLoading:hover { background-color: rgb(var(--color-extra-yellow-dash3-200)) !important; } .button-extra-yellow { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-yellow.button--disabled { background-color: rgb(var(--color-extra-yellow-dash3-200)) !important; cursor: default; } .button-extra-yellow.button--disabled:hover { text-decoration: none; } .button-extra-yellow.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-yellow { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-yellow-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-yellow:hover { color: rgb(var(--color-extra-yellow-dash3-600)); text-decoration: underline; } .button-text-extra-yellow.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-yellow.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-green { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-green-dash3-500)); } .button-extra-green:hover { background-color: rgb(var(--color-extra-green-dash3-600)); } .button-extra-green.button--isLoading { background-color: rgb(var(--color-extra-green-dash3-200)); } .button-extra-green.button--isLoading:hover { background-color: rgb(var(--color-extra-green-dash3-200)) !important; } .button-extra-green { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-green.button--disabled { background-color: rgb(var(--color-extra-green-dash3-200)) !important; cursor: default; } .button-extra-green.button--disabled:hover { text-decoration: none; } .button-extra-green.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-green { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-green-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-green:hover { color: rgb(var(--color-extra-green-dash3-600)); text-decoration: underline; } .button-text-extra-green.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-green.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-blue { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-blue-dash3-500)); } .button-extra-blue:hover { background-color: rgb(var(--color-extra-blue-dash3-600)); } .button-extra-blue.button--isLoading { background-color: rgb(var(--color-extra-blue-dash3-200)); } .button-extra-blue.button--isLoading:hover { background-color: rgb(var(--color-extra-blue-dash3-200)) !important; } .button-extra-blue { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-blue.button--disabled { background-color: rgb(var(--color-extra-blue-dash3-200)) !important; cursor: default; } .button-extra-blue.button--disabled:hover { text-decoration: none; } .button-extra-blue.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-blue { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-blue-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-blue:hover { color: rgb(var(--color-extra-blue-dash3-600)); text-decoration: underline; } .button-text-extra-blue.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-blue.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-indigo { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-indigo-dash3-500)); } .button-extra-indigo:hover { background-color: rgb(var(--color-extra-indigo-dash3-600)); } .button-extra-indigo.button--isLoading { background-color: rgb(var(--color-extra-indigo-dash3-200)); } .button-extra-indigo.button--isLoading:hover { background-color: rgb(var(--color-extra-indigo-dash3-200)) !important; } .button-extra-indigo { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-indigo.button--disabled { background-color: rgb(var(--color-extra-indigo-dash3-200)) !important; cursor: default; } .button-extra-indigo.button--disabled:hover { text-decoration: none; } .button-extra-indigo.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-indigo { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-indigo-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-indigo:hover { color: rgb(var(--color-extra-indigo-dash3-600)); text-decoration: underline; } .button-text-extra-indigo.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-indigo.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-violet { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-violet-dash3-500)); } .button-extra-violet:hover { background-color: rgb(var(--color-extra-violet-dash3-600)); } .button-extra-violet.button--isLoading { background-color: rgb(var(--color-extra-violet-dash3-200)); } .button-extra-violet.button--isLoading:hover { background-color: rgb(var(--color-extra-violet-dash3-200)) !important; } .button-extra-violet { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-violet.button--disabled { background-color: rgb(var(--color-extra-violet-dash3-200)) !important; cursor: default; } .button-extra-violet.button--disabled:hover { text-decoration: none; } .button-extra-violet.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-violet { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-violet-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-violet:hover { color: rgb(var(--color-extra-violet-dash3-600)); text-decoration: underline; } .button-text-extra-violet.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-violet.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .button-extra-pink { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 60px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.01rem; background-color: rgb(var(--color-extra-pink-dash3-500)); } .button-extra-pink:hover { background-color: rgb(var(--color-extra-pink-dash3-600)); } .button-extra-pink.button--isLoading { background-color: rgb(var(--color-extra-pink-dash3-200)); } .button-extra-pink.button--isLoading:hover { background-color: rgb(var(--color-extra-pink-dash3-200)) !important; } .button-extra-pink { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .button-extra-pink.button--disabled { background-color: rgb(var(--color-extra-pink-dash3-200)) !important; cursor: default; } .button-extra-pink.button--disabled:hover { text-decoration: none; } .button-extra-pink.button--disabled .SvgIcon--icon { cursor: default !important; } .button-text-extra-pink { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-pink-dash3-500)); -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; background-color: transparent; padding: 0 !important; border: none !important; min-width: min-content !important; } .button-text-extra-pink:hover { color: rgb(var(--color-extra-pink-dash3-600)); text-decoration: underline; } .button-text-extra-pink.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-text-extra-pink.button--disabled:hover { text-decoration: none; } .delete { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-gray-100)); } .right-side { float: right; padding-top: 13px; padding-right: 14px; } .dark-mode .button-text-primary { color: rgb(var(--color-primary-dash3-500)); } .dark-mode .button-text-primary:hover { color: rgb(var(--color-primary-dash3-600)); } .dark-mode .button-text-secondary { color: rgb(var(--color-secondary-dash3-500)); } .dark-mode .button-text-secondary:hover { color: rgb(var(--color-secondary-dash3-600)); } .dark-mode .button-text-gray { color: rgb(var(--color-gray-dash3-100)); } .dark-mode .button-text-gray:hover { color: rgb(var(--color-gray-dash3-400)); } .dark-mode .button-text-white { color: rgb(var(--color-white-dash3-500)); } .dark-mode .button-text-white:hover { color: rgb(var(--color-white-dash3-600)); } .dark-mode .button-text-black { color: rgb(var(--color-black-dash3-500)); } .dark-mode .button-text-black:hover { color: rgb(var(--color-black-dash3-600)); } .dark-mode .button-text-error { color: rgb(var(--color-error-dash3-500)); } .dark-mode .button-text-error:hover { color: rgb(var(--color-error-dash3-600)); } .dark-mode .button-text-success { color: rgb(var(--color-success-dash3-500)); } .dark-mode .button-text-success:hover { color: rgb(var(--color-success-dash3-600)); } .dark-mode .button-text-warning { color: rgb(var(--color-warning-dash3-500)); } .dark-mode .button-text-warning:hover { color: rgb(var(--color-warning-dash3-600)); } .dark-mode .button-text-teal { color: rgb(var(--color-teal-dash3-500)); } .dark-mode .button-text-teal:hover { color: rgb(var(--color-teal-dash3-600)); } .dark-mode .button-text-extra-red { color: rgb(var(--color-extra-red-dash3-500)); } .dark-mode .button-text-extra-red:hover { color: rgb(var(--color-extra-red-dash3-600)); } .dark-mode .button-text-extra-orange { color: rgb(var(--color-extra-orange-dash3-500)); } .dark-mode .button-text-extra-orange:hover { color: rgb(var(--color-extra-orange-dash3-600)); } .dark-mode .button-text-extra-yellow { color: rgb(var(--color-extra-yellow-dash3-500)); } .dark-mode .button-text-extra-yellow:hover { color: rgb(var(--color-extra-yellow-dash3-600)); } .dark-mode .button-text-extra-green { color: rgb(var(--color-extra-green-dash3-500)); } .dark-mode .button-text-extra-green:hover { color: rgb(var(--color-extra-green-dash3-600)); } .dark-mode .button-text-extra-blue { color: rgb(var(--color-extra-blue-dash3-500)); } .dark-mode .button-text-extra-blue:hover { color: rgb(var(--color-extra-blue-dash3-600)); } .dark-mode .button-text-extra-indigo { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .button-text-extra-indigo:hover { color: rgb(var(--color-extra-indigo-dash3-600)); } .dark-mode .button-text-extra-violet { color: rgb(var(--color-extra-violet-dash3-500)); } .dark-mode .button-text-extra-violet:hover { color: rgb(var(--color-extra-violet-dash3-600)); } .dark-mode .button-text-extra-pink { color: rgb(var(--color-extra-pink-dash3-500)); } .dark-mode .button-text-extra-pink:hover { color: rgb(var(--color-extra-pink-dash3-600)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ButtonRow { display: flex; align-items: center; white-space: nowrap; } .ButtonRow--hasGap { gap: 1rem; } .ButtonRow--alignLeft { justify-content: flex-start; margin-right: auto; } .ButtonRow--alignLeft > *:not(.ButtonRow) { margin-right: 10px; } .ButtonRow--alignLeft > *:first-child:not(.ButtonRow) { margin-left: 0; } .ButtonRow--alignRight { justify-content: flex-end; margin-left: auto; } .ButtonRow--alignRight > *:not(.ButtonRow) { margin-left: 10px; } .ButtonRow--alignRight > *:last-child:not(.ButtonRow) { margin-right: 0; } .ButtonRow--alignBottom { align-items: flex-end; } .ButtonRow--alignTop { align-items: flex-start; } .ButtonRow--alignCenter { align-items: center; } .ButtonRow--justifyCenter { justify-content: center; } .ButtonRow--padded { padding-top: 20px; } .ButtonRow--isGutter { background: rgb(var(--color-gray-100)); margin: 20px -20px -20px -20px !important; padding: 20px; } .ButtonRow--spacingTop { margin-top: 10px; } .ButtonRow--spacingBottom { margin-bottom: 10px; } .ButtonRow--spaceBetween { justify-content: space-between; } .dark-mode .ButtonRow--isGutter { background: rgba(var(--color-white), 0.05); }.ErrorFallback__container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vw; height: 100vh; } .ErrorFallback__textBlock { width: 50%; padding: 20px; background-color: RGB(var(--color-gray-100)); } .ErrorFallback__titles { align-items: center; display: flex; flex-direction: column; justify-content: center; } .ErrorFallback__titles h1 { font-size: 40px; margin: 20px 0; } .ErrorFallback__buttonRow { display: flex; justify-content: center; margin-top: 20px; } .ErrorFallback__buttonRow button { margin: 0 10px; } .ErrorFallback__imageAttribution { position: absolute; z-index: -1; bottom: 20px; color: grey; font-size: 10px; } .ErrorFallback__imageAttribution a { color: grey; text-decoration: none; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .main-container-dash3 { height: 100vh; display: flex; flex-direction: column; } .PageContainerDash3 { display: flex; min-height: 0; height: 100%; background: rgb(var(--color-white)); } .MainContainerDash3 { overflow: auto; width: -moz-available; /* WebKit-based browsers will ignore this. */ width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */ } .MainContainerDash3__content { display: flex; flex-direction: column; min-width: 1024px; } .MainContainerDash3__content .PageHeader-dash3 { min-width: 960px; } .ContentContainerDash3 { min-width: 960px; border-radius: 10px; border: 1px solid rgb(var(--color-gray-300)); margin: 0 2rem 1rem; } @media (max-width: 1537px) { .ContentContainerDash3 { margin: 0 1rem 1rem; } } .ContentContainerDash3__header { display: flex; justify-content: space-between; align-items: center; padding: 0px 20px; height: 60px; } .ContentContainerDash3__header__title { text-align: left; color: rgb(var(--color-soft-purple-600)); font-weight: 600; font-size: 16px; line-height: 20px; margin-right: 20px; } .ContentContainerDash3__header__text { text-align: left; color: rgb(var(--color-extra-navy-dash3-900)); font-weight: 600; font-size: 15px; line-height: 18px; } .ContentContainerDash3__header__section { display: flex; align-items: center; gap: 0.5rem; } .ContentContainerDash3__body { border-top: 1px solid rgb(var(--color-gray-300)); } .ContentContainerDash3__body--noBorder { border-top: none; } .dark-mode .ContentContainerDash3 { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .ContentContainerDash3__header__title { color: rgb(var(--color-gray-300)); } .dark-mode .ContentContainerDash3__header__text { color: rgb(var(--color-gray-300)); } .dark-mode .ContentContainerDash3__header__icon { color: rgb(var(--color-gray-200)); } .dark-mode .ContentContainerDash3__body { border-top: 1px solid rgba(var(--color-gray-600), 0.7); }.Icon { margin-right: 8px; cursor: pointer; } .Icon--noMargin { margin-right: 0; } .Icon--leftMargin { margin-left: 10px; } .Icon--noPointer { cursor: default !important; } .Icon--disabled { cursor: not-allowed !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .UpgradeTooltip { cursor: default; max-width: 550px; font-family: "Onest"; padding: 0.7rem 0.5rem; margin-bottom: 0; display: flex; flex-direction: column; gap: 0.3rem; } .UpgradeTooltip__planText { font-size: 17px; line-height: 1.3; } .UpgradeTooltip__icon { margin-right: 5px; } .UpgradeTooltip__button { cursor: pointer; font-weight: 600; color: rgb(var(--color-primary-500)); text-decoration: underline; line-height: 25px; font-size: 17px; } .UpgradeTooltip__button:hover { color: rgb(var(--color-primary-400)); } .dark-mode .UpgradeTooltip { color: rgb(var(--color-gray-100)); } .dark-mode .UpgradeTooltip__button { color: rgb(var(--color-primary-400)); } .dark-mode .UpgradeTooltip__button:hover { color: rgb(var(--color-primary-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .LoadingContainer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .LoadingContainer--relative { position: relative; height: 150px; } .LoadingContainer--tiny { height: 16px; width: 16px; } .LoadingContainer--inline { display: inline-block; height: 1em; width: 1em; position: relative; } .LoadingContainer--inline .LoadingSpinner:before { height: 1em !important; width: 1em !important; } .LoadingSpinner { height: 50px; width: 50px; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } .LoadingSpinner--tiny { height: 16px; width: 16px; } .LoadingSpinner--tiny:before { height: 16px !important; width: 16px !important; border-width: 2px !important; } .LoadingSpinner__Message { margin-top: 60px; overflow: visible; text-align: center; position: absolute; width: 200px; transform: translateX(-50%); left: 50%; color: rgb(var(--color-gray-600)); font-weight: 700; } @keyframes spinner { to { transform: rotate(360deg); } } .LoadingSpinner:before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 4px solid rgb(var(--color-gray-200)); border-top-color: rgb(var(--color-primary-300)); animation: spinner 0.8s cubic-bezier(0.68, 0.2, 0.33, 0.87) infinite; } .dark-mode .LoadingSpinner__Message { color: rgb(var(--color-gray-300)); } .dark-mode .LoadingSpinner:before { border-top-color: rgb(var(--color-primary-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .InputField__instructions { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ ::placeholder { color: rgb(var(--color-gray-500)); transition: 0.2s color; font-size: 15px; font-family: "Onest"; font-weight: 500; } .InputField { position: relative; margin-bottom: 1.3rem; } .InputField--noMargin { margin: 0; } .InputField textarea { resize: none; height: 100px; } .InputField__label { display: block; margin-bottom: 5px; padding-left: 0 !important; color: rgb(var(--color-title-dash3)); font-size: 16px; font-weight: 600; margin-bottom: 0.5rem; font-family: "Onest"; } .InputField__label__required { color: rgb(var(--color-primary-500)); font-weight: 700; margin-left: 5px; } .InputField__wrapper { position: relative; display: flex; align-items: center; border: 1px solid rgb(var(--color-gray-400)); border-radius: 5px; transition: 0.2s all; } .InputField__wrapper:focus-within { background-color: rgb(var(--color-white)); border-color: rgb(var(--color-primary-300)); } .InputField__wrapper--warning { border-color: rgb(var(--color-warning-600)); } .InputField__wrapper--warning:focus-within { background-color: rgb(var(--color-warning-100)); border-color: rgb(var(--color-warning-600)); } .InputField__wrapper--error { border-color: rgb(var(--color-error-600)); } .InputField__wrapper--error:focus-within { background-color: rgb(var(--color-error-100)); border-color: rgb(var(--color-error-600)); } .InputField__wrapper--valid { border-color: rgb(var(--color-success-600)); } .InputField__wrapper--valid:focus-within { background-color: rgb(var(--color-success-100)); border-color: rgb(var(--color-success-600)); } .InputField__wrapper--disabled { cursor: not-allowed; background-color: rgb(var(--color-gray-100)); border-color: rgb(var(--color-gray-300)); } .InputField__wrapper--noBorder { border: none; } .InputField__input { margin-top: -1px; min-width: 0; width: 100%; line-height: 20px; font-size: 15px; padding: 7px 13px; transition: 0.2s all; caret-color: rgb(var(--color-primary-500)); color: rgb(var(--color-secondary-900)); border: none; min-height: 37px; font-family: "Onest"; background: transparent; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .InputField__input:hover { scrollbar-color: #808080 transparent; } .InputField__input::-webkit-scrollbar { background-color: transparent; width: 7px; } .InputField__input::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .InputField__input::-webkit-scrollbar-button { display: none; } .InputField__input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgb(var(--color-gray-500)); } .InputField__input:focus { outline: none; } .InputField__input--loading { padding-left: 35px; } .InputField__input--warning { color: rgb(var(--color-warning-500)); } .InputField__input--warning:focus::placeholder { color: rgb(var(--color-warning-200)); } .InputField__input--error { color: rgb(var(--color-error-600)); } .InputField__input--error:focus::placeholder { color: rgb(var(--color-error-200)); } .InputField__input--valid { color: rgb(var(--color-success-600)); } .InputField__input--visualOnly { font-weight: 500; color: rgb(var(--color-gray-700)); } .InputField__input--disabled { cursor: not-allowed; color: rgb(var(--color-gray-500)); } .InputField__input--noBorder { padding: 0; } .InputField .LoadingContainer { height: 100%; padding-left: 25px; } .InputField__infoContainer { display: flex; flex-direction: row; align-items: center; gap: 0.2rem; padding-right: 0.5rem; flex-shrink: 0; } .InputField__infoContainer--error { color: rgb(var(--color-error-600)); } .InputField__infoContainer--valid { color: rgb(var(--color-success-600)); } .InputField__infoContainer--warning { color: rgb(var(--color-warning-600)); } .InputField__infoContainer--disabled { color: rgb(var(--color-gray-500)); cursor: not-allowed; } .InputField__searchIcon { color: rgb(var(--color-title-dash3)); } .InputField__clearTextButton { cursor: pointer; font-size: 15px; color: rgb(var(--color-title-dash3)); } .InputField__clearTextButton:hover { color: rgb(var(--color-primary-500)); } .InputField__validationIcon { display: inline-block; color: inherit; font-size: 12px; } .InputField__instructions { display: inline-block; font-size: 10pt; color: inherit; } .InputField__validationMessage { position: absolute; font-size: 12px; margin-top: 2px; left: 2px; } .InputField__validationMessage--warning { color: rgb(var(--color-warning-600)); } .InputField__validationMessage--error { color: rgb(var(--color-error-600)); } .InputField__validationMessage--valid { color: rgb(var(--color-success-600)); } .InputField__validationMessage--disabled { color: rgb(var(--color-gray-500)); cursor: not-allowed; } .InputField.bottom-margin { margin-bottom: 25px; } .ColorInputField { position: relative; } .ColorInputField__inlineColorBox { position: absolute; right: 8px; bottom: 8px; top: 8px; width: 22px; height: 22px; border-radius: 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2); } .ColorInputField__inlineColorBox--hasLabel { top: 24px; } .ColorInputField__popup { position: absolute; z-index: 1000; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11); } .ColorInputField__popup .chrome-picker { box-shadow: none !important; } .ColorInputField__popup .chrome-picker span { font-family: "Lato", sans-serif; } .FileInputField__inputWrapper { position: relative; cursor: pointer; } .FileInputField:hover .FileInputField__button { background-color: rgb(var(--color-primary-600)); } .FileInputField:active .FileInputField__button { background-color: rgb(var(--color-primary-700)); } .FileInputField__button { z-index: 2; transition: 0.2s all; position: absolute; right: 8px; bottom: 7px; top: 7px; align-items: center; display: flex; padding: 0 6px; border-radius: 3px; color: rgb(var(--color-white)); background: rgb(var(--color-primary-500)); font-size: 12px; cursor: pointer; } .FileInputField__button--valid { background-color: rgb(var(--color-success-500)); } .FileInputField__button--hasLabel { top: 32px; } .FileInputField input[type=file] { z-index: 3; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; width: 100%; cursor: pointer; } .dark-mode .InputField__label { color: rgb(var(--color-gray-300)); } .dark-mode .InputField__label__required { color: rgb(var(--color-gray-300)); } .dark-mode .InputField__wrapper { background-color: rgba(var(--color-white), 0.05); border-color: rgb(var(--color-gray-400)); } .dark-mode .InputField__wrapper:focus-within { border-color: rgb(var(--color-primary-500)); } .dark-mode .InputField__wrapper--disabled { background-color: rgba(var(--color-white), 0.1); border-color: rgb(var(--color-gray-700)); } .dark-mode .InputField__wrapper--error { border-color: rgb(var(--color-error-dash3-500)) !important; } .dark-mode .InputField__wrapper--noBorder { border: none; background-color: transparent; } .dark-mode .InputField__input { color: rgb(var(--color-gray-400)); } .dark-mode .InputField__input--disabled { color: rgb(var(--color-gray-600)); } .dark-mode .InputField__searchIcon { color: rgb(var(--color-gray-400)); } .dark-mode .InputField__clearTextButton { color: rgb(var(--color-gray-400)); } .dark-mode .InputField__clearTextButton:hover { color: rgb(var(--color-primary-500)); } .dark-mode .InputField__validationMessage--error { color: rgb(var(--color-error-dash3-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CopyToClipboardButton { position: absolute; bottom: 0; top: 0; right: 0; cursor: pointer; width: 38px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; overflow: visible; } .CopyToClipboardButton:hover { color: rgb(var(--color-gray-600)); } .CopyToClipboardButton--success { animation: copyToClipboardSuccess 0.5s; } @keyframes copyToClipboardSuccess { 0% { color: rgb(var(--color-success-800)); } 100% { color: rgb(var(--color-gray-600)); } } @keyframes copyToClipboardSuccessGhost { 0% { transform: translateY(-50%) translateX(-50%); opacity: 1; } 100% { transform: translateY(-150%) translateX(-50%) scale(1.5); opacity: 0; } } .CopyToClipboardButton__icon { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .CopyToClipboardButton__iconGhost { transition: 0.1s all; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .CopyToClipboardButton__iconGhost--success { animation: copyToClipboardSuccessGhost 0.5s; } .dark-mode .CopyToClipboardButton { color: rgb(var(--color-gray-200)); } .dark-mode .CopyToClipboardButton:hover { color: rgb(var(--color-gray-400)); } @keyframes copyToClipboardSuccess { 0% { color: rgb(var(--color-success-800)); } 100% { color: rgb(var(--color-gray-200)); } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NiceModal { position: fixed; z-index: 999; display: flex; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; max-height: 100vh; font-family: "Onest" !important; } .NiceModal__item { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .NiceModal__item--end { display: flex; flex-direction: column; margin-bottom: 0; } .NiceModal__container { position: relative; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); z-index: 1000; background: rgb(var(--color-white)); max-height: 80vh; display: flex; flex-direction: column; border-radius: 5px; } .NiceModal__contents { padding: 45px 45px 30px 45px; position: relative; } .NiceModal__contents.overflow-visible { overflow-y: visible; } .NiceModal__contents.overflow-scroll { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .NiceModal__contents.overflow-scroll:hover { scrollbar-color: #808080 transparent; } .NiceModal__contents.overflow-scroll::-webkit-scrollbar { background-color: transparent; width: 7px; } .NiceModal__contents.overflow-scroll::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .NiceModal__contents.overflow-scroll::-webkit-scrollbar-button { display: none; } .NiceModal__contents.overflow-scroll { overflow-x: auto; } .NiceModal__progress { z-index: 1001; position: absolute; display: flex; flex-direction: column; background: rgb(var(--color-white)); opacity: 0.7; top: 0; bottom: 0; left: 0px; right: 0px; display: flex; justify-content: center; align-items: center; } .NiceModal__progress__text { color: rgb(var(--color-gray-600)); font-size: 14px; } .NiceModal__title { color: rgb(var(--color-title-dash3)); font-size: 22px; font-weight: 700; margin-bottom: 30px; } .NiceModal__label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 12px; } .NiceModal__message { color: rgb(var(--color-gray-800)); line-height: 22px; margin-bottom: 10px; } .NiceModal__gutter { display: flex; justify-content: space-between; padding: 25px 45px 45px 45px; background: rgb(var(--color-white)); border-radius: 5px; } .NiceModal__gutter--left { display: flex; justify-content: flex-start; gap: 1rem; } .NiceModal__gutter--right { display: flex; justify-content: flex-end; gap: 1rem; } .NiceModal__background { z-index: 999; position: fixed; top: -9999px; left: -9999px; right: -9999px; bottom: -9999px; background-color: rgba(var(--color-white), 0.7); backdrop-filter: blur(2px); } /* Dark mode */ .dark-mode .NiceModal__background { background-color: rgba(var(--color-white), 0.08); } .dark-mode .NiceModal__container { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .NiceModal__item { color: rgb(var(--color-gray-200)); } .dark-mode .NiceModal__title { color: rgb(var(--color-gray-200)); } .dark-mode .NiceModal__label { color: rgb(var(--color-gray-300)); } .dark-mode .NiceModal__message { color: rgb(var(--color-gray-400)); } .dark-mode .NiceModal__gutter { background-color: rgb(var(--color-extra-midnight-dash3-900)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .NiceDropdownDash3__field { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NiceDropdownDash3 { font-family: "Onest"; position: relative; max-width: 600px; } .NiceDropdownDash3--withMargin { margin-bottom: 1.3rem; } .NiceDropdownDash3__inputlabel { font-size: 16px; line-height: 18px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 0.5rem; display: flex; } .NiceDropdownDash3__field { min-width: 100px; min-height: 36px; transition: 0.2s all; border: 1px solid rgb(var(--color-gray-400)); display: flex; align-content: center; justify-content: space-between; align-items: center; color: rgb(var(--color-secondary-900)); background: rgb(var(--color-white)); padding: 7px 13px; text-align: left; border-radius: 5px; cursor: pointer; position: relative; font-size: 15px; line-height: 20px; } .NiceDropdownDash3__field--warning { border-color: rgb(var(--color-warning-600)); color: rgb(var(--color-warning-600)); } .NiceDropdownDash3__field--error { border-color: rgb(var(--color-error-600)); color: rgb(var(--color-error-600)); } .NiceDropdownDash3__field--valid { border-color: rgb(var(--color-success-600)); color: rgb(var(--color-success-600)); } .NiceDropdownDash3__field__children { display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .NiceDropdownDash3__field__children--trimmed { display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .NiceDropdownDash3__field__children--trimmed:hover { overflow: hidden; } .NiceDropdownDash3__field__caret { font-size: 10px; padding-left: 10px; margin-left: auto; } .NiceDropdownDash3__field__caret--changable { transition: 0.2s all; } .NiceDropdownDash3__field__caret--changable--less-padding { padding-left: 6.48px; } .NiceDropdownDash3__field__textWithMargin { margin-left: 10px; } .NiceDropdownDash3__field__image { width: 30px; height: 30px; margin-top: -2px; margin-bottom: -2px; } .NiceDropdownDash3__field__image > img { height: 100%; width: 100%; } .NiceDropdownDash3__field__image--loading { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 3px; } .NiceDropdownDash3__field__image--error { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); border-radius: 3px; color: rgb(var(--color-gray-500)); } .NiceDropdownDash3__field--isOpen { border-color: rgb(var(--color-primary-300)); } .NiceDropdownDash3__field--isOpen .NiceDropdownDash3__field__caret { opacity: 0.5; } .NiceDropdownDash3__field--unstyled { height: unset; min-width: unset; border: unset; color: unset; background: unset; padding: unset; border-radius: unset; } .NiceDropdownDash3__field--unstyled.NiceDropdownDash3__field--disabled { color: unset !important; background: unset !important; text-decoration: unset !important; } .NiceDropdownDash3__field--disabled { cursor: not-allowed; color: rgba(var(--color-secondary-900), 0.5); background: rgb(var(--color-gray-100)); } .NiceDropdownDash3__field--edited { background: rgb(var(--color-secondary-100)); } .NiceDropdownDash3__field--nopad { padding: 0; border: 0; } .NiceDropdownDash3__field .fa-angle-down { margin-left: 15px; } .NiceDropdownDash3__field__input { border: 0; } .NiceDropdownDash3__field__boolOption { transition: 0.2s all; height: 36px; box-sizing: border-box; display: flex; align-items: center; padding: 7px 9px; border: 1px solid rgba(var(--color-gray-600), 0.5); border-right: none; } .NiceDropdownDash3__field__boolOption:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .NiceDropdownDash3__field__boolOption:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid rgba(var(--color-gray-600), 0.5); } .NiceDropdownDash3__field__boolOption:hover { color: rgb(var(--color-secondary-900)); background: rgba(var(--color-secondary-500), 0.2); } .NiceDropdownDash3__field__boolOption--active { background: rgb(var(--color-secondary-500)) !important; color: rgb(var(--color-white)) !important; } .NiceDropdownDash3__field__loading { margin-right: 10px; font-size: 15px; color: rgb(var(--color-gray-600)); } .NiceDropdownDash3__field__loading--icon { color: rgb(var(--color-gray-600)); } .NiceDropdownDash3__dropdown { position: absolute; overflow: visible; text-overflow: ellipsis; white-space: nowrap; z-index: 1100; top: calc(100% + 15px); min-width: fit-content; border-radius: 5px; } .NiceDropdownDash3__dropdown--popup { top: auto; bottom: 100%; } .NiceDropdownDash3__dropdown--alignLeft { left: unset; right: 0; } .NiceDropdownDash3__dropdown--alignLeft .NiceDropdownDash3__dropdown__content::after { top: -8px; right: 22px; left: unset; } .NiceDropdownDash3__dropdown__wrapper { border-radius: 5px; width: fit-content; max-width: calc(100vw - 30px); } .NiceDropdownDash3__dropdown__content { background: rgb(var(--color-white)); color: rgb(var(--color-extra-navy-dash3-900)); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); border-radius: 5px; position: relative; z-index: 2; } .NiceDropdownDash3__dropdown__content__groupList { padding: 0.5rem 1rem; position: relative; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .NiceDropdownDash3__dropdown__content__groupList:hover { scrollbar-color: #808080 transparent; } .NiceDropdownDash3__dropdown__content__groupList::-webkit-scrollbar { background-color: transparent; width: 7px; } .NiceDropdownDash3__dropdown__content__groupList::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .NiceDropdownDash3__dropdown__content__groupList::-webkit-scrollbar-button { display: none; } .NiceDropdownDash3__dropdown__search { position: relative; z-index: 1; padding: 20px 15px 10px 15px; margin-bottom: 0px; } .NiceDropdownDash3__dropdown__search .InputField { margin-bottom: 0 !important; } .NiceDropdownDash3__dropdown__search .InputField > input { border-color: rgb(var(--color-gray-400)); } .NiceDropdownDash3__dropdown__placer { height: 15px; background-color: transparent; } .NiceDropdownDash3__dropdown__noResults { padding: 15px 0 15px 5px; display: flex; justify-content: space-between; align-items: center; } .NiceDropdownDash3__dropdown__noResults__action { display: flex; align-items: center; cursor: pointer; color: rgb(var(--color-primary-400)); font-weight: 600; font-size: 14px; text-decoration: underline; } .NiceDropdownDash3__dropdown__noResults__action:hover { color: rgb(var(--color-primary-500)); } .NiceDropdownDash3__group { z-index: 3; position: relative; padding: 0.5rem 0; } .NiceDropdownDash3__group__item { margin-bottom: 15px; } .NiceDropdownDash3__group__title { display: flex; font-weight: 500; font-size: 14px; padding: 15px 10px 5px 10px; color: rgb(var(--color-gray-700)); white-space: nowrap; } .NiceDropdownDash3__group--withDivider { border-top: 1.5px solid rgb(var(--color-gray-300)); } .NiceDropdownDash3__header { padding: 5px 15px 15px 15px; } .NiceDropdownDash3__item { cursor: pointer; display: flex; align-items: center; margin: 5px; padding: 5px 8px; font-size: 15px; font-weight: 500; line-height: 1.5em; position: relative; color: rgb(var(--color-title-dash3)); border-radius: 5px; } .NiceDropdownDash3__item:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .NiceDropdownDash3__item--active { background: rgba(var(--color-extra-violet-dash3-800), 0.2); color: rgb(var(--color-primary-600)); } .NiceDropdownDash3__item--error:hover { background: rgba(var(--color-error-500), 0.1); color: rgba(var(--color-error-500)); } .NiceDropdownDash3__item--disabled { cursor: not-allowed; color: rgb(var(--color-gray-500)); background-color: transparent; } .NiceDropdownDash3__item--disabled:hover { background: rgb(var(--color-gray-200)); color: rgb(var(--color-gray-500)); } .NiceDropdownDash3__item__image { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -2px; margin-bottom: -2px; } .NiceDropdownDash3__item__image > img { height: 100%; width: 100%; } .NiceDropdownDash3__item__image--container { position: relative; display: flex; align-items: center; justify-content: center; } .NiceDropdownDash3__item__image--loading { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 3px; } .NiceDropdownDash3__item__image--error { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); border-radius: 3px; color: rgb(var(--color-gray-500)); } .NiceDropdownDash3__item__tag { display: flex; flex-grow: 0; } .NiceDropdownDash3__item__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; } .NiceDropdownDash3__item__text--hasImage { margin-left: 10px; } .NiceDropdownDash3__item__text--disabled { font-weight: 500; color: rgb(var(--color-gray-600)); } .NiceDropdownDash3__item__subtext { font-size: 15px; font-weight: 300; color: rgb(var(--color-gray-600)); } .NiceDropdownDash3__checkbox { display: flex; } .NiceDropdownDash3__checkbox__text { padding-left: 10px; font-size: 14px; line-height: 1.1rem; padding-top: 2px; color: #13294b; } .NiceDropdownDash3__footer { font-size: 14px; padding: 1rem 0; margin: 0 1rem; border-top: 1px solid rgb(var(--color-gray-300)); } .NiceDropdownDash3__footer__container { display: flex; justify-content: flex-start; align-items: center; color: rgb(var(--color-soft-purple-600)); cursor: pointer; } .NiceDropdownDash3__footer__container:hover .NiceDropdownDash3__footer__text { color: rgb(var(--color-primary-dash3-500)); } .NiceDropdownDash3__footer__container:hover .NiceDropdownDash3__footer__icon { color: rgb(var(--color-primary-dash3-500)); } .NiceDropdownDash3__footer__icon { width: 30px; font-size: 18px; color: rgb(var(--color-soft-purple-600)); margin-right: 5px; } .NiceDropdownDash3__footer__text { font-weight: 600; font-size: 14px; } .NiceDropdownDash3__validationMessage { position: absolute; bottom: -3px; left: 2px; font-size: 12px; transform: translateY(100%); } .NiceDropdownDash3__validationMessage--warning { color: rgb(var(--color-warning-600)); } .NiceDropdownDash3__validationMessage--error { color: rgb(var(--color-error-600)); } .NiceDropdownDash3__validationMessage--valid { color: rgb(var(--color-success-600)); } .NiceDropdownDash3__validationMessage--disabled { color: rgb(var(--color-gray-500)); cursor: not-allowed; } .NiceDropdownDash3__validationMessage__number { display: flex; justify-content: flex-end; } .NiceDropdownDash3.small-dropdown { width: 200px; padding: 0 10px 0 0; } .dark-mode .NiceDropdownDash3__inputlabel { color: rgb(var(--color-gray-300)); } .dark-mode .NiceDropdownDash3__field { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-gray-300)); } .dark-mode .NiceDropdownDash3__field--isOpen { border-color: rgb(var(--color-primary-500)); } .dark-mode .NiceDropdownDash3__field--unstyled { background-color: transparent; } .dark-mode .NiceDropdownDash3__field--disabled { background-color: rgba(var(--color-gray-500), 0.5); border: solid 1px rgba(var(--color-gray-500), 0.3); } .dark-mode .NiceDropdownDash3__field--error { border-color: rgb(var(--color-error-500)); } .dark-mode .NiceDropdownDash3__field__loading { color: rgb(var(--color-gray-500)); } .dark-mode .NiceDropdownDash3__field__loading--icon { color: rgb(var(--color-gray-500)); } .dark-mode .NiceDropdownDash3__dropdown__wrapper { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .NiceDropdownDash3__dropdown__content { background-color: rgba(var(--color-white), 0.05); border: solid 0.1px rgba(var(--color-gray-700), 0.5); color: rgb(var(--color-gray-300)); } .dark-mode .NiceDropdownDash3__checkbox input[type=checkbox] { background: transparent; color: white; } .dark-mode .NiceDropdownDash3__checkbox__text { color: rgb(var(--color-gray-300)); } .dark-mode .NiceDropdownDash3__group__title { color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .NiceDropdownDash3__group--withDivider { border-top: 1.5px solid rgba(var(--color-gray-700), 0.5); } .dark-mode .NiceDropdownDash3__item { color: rgb(var(--color-gray-200)); } .dark-mode .NiceDropdownDash3__item--disabled { color: rgb(var(--color-gray-600)); } .dark-mode .NiceDropdownDash3__item__image--error { background: rgba(255, 255, 255, 0.1); color: rgb(var(--color-gray-400)); } .dark-mode .NiceDropdownDash3__item__text--disabled { color: rgb(var(--color-gray-500)); } .dark-mode .NiceDropdownDash3__item__subtext { color: rgb(var(--color-gray-400)); } .dark-mode .NiceDropdownDash3__item:hover { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .NiceDropdownDash3__footer { border-top: 1px solid rgb(var(--color-gray-700)); } .dark-mode .NiceDropdownDash3__footer__text { color: rgb(var(--color-white)); } .dark-mode .NiceDropdownDash3__footer__icon { color: rgb(var(--color-white)); } .dark-mode .NiceDropdownDash3__footer:hover .NiceDropdownDash3__footer__text { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .NiceDropdownDash3__footer:hover .NiceDropdownDash3__footer__icon { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .NiceDropdownDash3__validationMessage--error { color: rgb(var(--color-error-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .checkboxInput { display: flex; opacity: 1; } .checkboxInput__label { display: block; position: relative; cursor: pointer; height: 20px; width: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkboxInput__label--label { margin-left: 0.625rem; font-size: 0.875rem; color: rgb(var(--color-gray-800)); display: flex; align-items: center; } .checkboxInput__label--disabled { cursor: default; opacity: 0.5; } .checkboxInput__label input { visibility: hidden; height: 20px; width: 20px; margin: 2px; } .checkboxInput__label .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: rgb(var(--color-white)); border: 2px solid rgb(var(--color-gray-400)); border-radius: 5px; } .checkboxInput__label .checkmark--single { height: 20px; width: 20px; border-width: 2.5px; border-radius: 15px; } .checkboxInput__label .checkmark--disabled { border-color: rgb(var(--color-gray-300)); } .checkboxInput__label:hover input ~ .checkmark { background-color: rgb(var(--color-gray-100)); } .checkboxInput__label:hover input ~ .checkmark--disabled { background-color: transparent; } .checkboxInput__label input:checked ~ .checkmark { background-color: rgb(var(--color-white)); } .checkboxInput__label input:checked ~ .checkmark::after { display: block; } .checkboxInput__label .checkmark::after { content: ""; position: absolute; display: none; left: 5px; bottom: 3px; width: 7px; height: 12px; border-bottom-right-radius: 2px; border: solid rgb(var(--color-primary-500)); border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .checkboxInput__label .checkmark--single::after { content: ""; position: absolute; background-color: rgb(var(--color-primary-500)); left: 4px; bottom: 4px; height: 7px; width: 7px; border: none; border-radius: 15px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .dark-mode .checkboxInput__label--label { color: rgb(var(--color-gray-300)); } .dark-mode .checkboxInput__label .checkmark { border-color: rgb(var(--color-white)); background-color: transparent; } .dark-mode .checkboxInput__label .checkmark--disabled { border-color: rgb(var(--color-white)); } .dark-mode .checkboxInput__label:hover input ~ .checkmark { background-color: transparent; } .dark-mode .checkboxInput__label:hover input:checked ~ .checkmark { background-color: rgb(var(--color-white)); } .dark-mode .checkboxInput__label:hover input ~ .checkmark--disabled { background-color: transparent; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WidgetSelectorModal__header { padding: 24px 32px 16px; border-bottom: 1px solid rgb(var(--color-gray-200)); flex-shrink: 0; } .dark-mode .WidgetSelectorModal__header { border-bottom-color: rgb(var(--color-gray-700)); } .WidgetSelectorModal__title { font-family: "Onest"; font-size: 20px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin: 0 0 16px; } .dark-mode .WidgetSelectorModal__title { color: rgb(var(--color-white)); } .WidgetSelectorModal__header-inputs { display: flex; align-items: flex-end; gap: 16px; } .WidgetSelectorModal__header-inputs .NiceModalDash3__item { margin-bottom: 0 !important; } .WidgetSelectorModal__name-input { flex: 1; max-width: 360px; } .WidgetSelectorModal__search-input { flex: 1; max-width: 320px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CategorySidebar { width: 240px; min-width: 240px; border-right: 1px solid rgb(var(--color-gray-200)); padding: 16px 0; overflow-y: auto; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .CategorySidebar:hover { scrollbar-color: #808080 transparent; } .CategorySidebar::-webkit-scrollbar { background-color: transparent; width: 7px; } .CategorySidebar::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .CategorySidebar::-webkit-scrollbar-button { display: none; } .CategorySidebar { flex-shrink: 0; } .dark-mode .CategorySidebar { border-right-color: rgb(var(--color-gray-700)); } .CategorySidebar__item { display: block; width: 100%; padding: 10px 24px; border: none; border-left: 3px solid transparent; background: none; cursor: pointer; font-family: "Onest"; font-size: 14px; font-weight: 500; color: rgb(var(--color-gray-600)); text-align: left; transition: all 0.15s ease; } .dark-mode .CategorySidebar__item { color: rgb(var(--color-gray-400)); } .CategorySidebar__item:hover:not(.CategorySidebar__item--active) { background: rgb(var(--color-gray-100)); } .dark-mode .CategorySidebar__item:hover:not(.CategorySidebar__item--active) { background: rgb(var(--color-gray-800)); } .CategorySidebar__item--active { color: rgb(var(--color-electric-purple-500)); font-weight: 600; border-left-color: rgb(var(--color-electric-purple-500)); background: rgba(var(--color-electric-purple-500), 0.06); } .dark-mode .CategorySidebar__item--active { color: rgb(var(--color-electric-purple-500)); background: rgba(var(--color-electric-purple-500), 0.1); }.SvgIcon { display: flex; justify-content: center; } .SvgIcon--icon { cursor: pointer; } .SvgIcon--icon--noPointer { cursor: default; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ComparisonFigure-dash3 { width: 100%; height: 90%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-family: "Onest"; font-style: normal; font-weight: 700; font-size: 80px; line-height: 50px; } .ComparisonFigure-dash3__figure { display: flex; flex-direction: column; padding: 10px 20px; margin-bottom: 30px; } .ComparisonFigure-dash3__beforeTitle, .ComparisonFigure-dash3__afterTitle { color: rgb(var(--color-extra-navy-dash3-900)); font-weight: 600; font-size: 14px; line-height: 20px; padding-bottom: 15px; } .ComparisonFigure-dash3--navy { color: rgb(var(--color-extra-navy-dash3-900)); } .ComparisonFigure-dash3--indigo { color: rgb(var(--color-soft-purple-600)); } .ComparisonFigure-dash3--violet { color: rgb(var(--color-extra-violet-dash3-900)); } .ComparisonFigure-dash3--plum { color: rgb(var(--color-extra-plum-dash3-900)); } .ComparisonFigure-dash3--blue { color: rgb(var(--color-extra-blue-dash3-900)); } .ComparisonFigure-dash3--white { color: rgb(var(--color-white)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DurationFigure-dash3 { width: fit-content; font-family: "Onest"; margin: 15px 0 15px 0; color: rgb(var(--color-white)); } .DurationFigure-dash3__number { font-weight: 700; font-size: 80px; } .DurationFigure-dash3__number--sm { font-weight: 700; font-size: 40px; } .DurationFigure-dash3__separator { font-size: 40px; font-weight: 500; margin: 15px 12px 0px 0px; } .DurationFigure-dash3__separator--sm { font-weight: 500; font-size: 20px; margin: 15px 8px 0px 0px; } .DurationFigure-dash3__separator--end { font-size: 40px; font-weight: 500; margin: 15px 0 0px 0px; } .DurationFigure-dash3__separator--end--sm { font-weight: 500; font-size: 20px; margin: 15px 0 0px 0px; } .DurationFigure-dash3--navy { color: rgb(var(--color-extra-navy-dash3-900)); } .DurationFigure-dash3--indigo { color: rgb(var(--color-soft-purple-600)); } .DurationFigure-dash3--violet { color: rgb(var(--color-extra-violet-dash3-900)); } .DurationFigure-dash3--plum { color: rgb(var(--color-extra-plum-dash3-900)); } .DurationFigure-dash3--blue { color: rgb(var(--color-extra-blue-dash3-900)); } .DurationFigure-dash3--white { color: rgb(var(--color-white)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .HeroFigure-dash3 { font-family: "Onest"; font-style: normal; font-weight: 700; font-size: 80px; line-height: 50px; margin: 30px 0; } .HeroFigure-dash3--largeNumber { font-size: 50px; } .HeroFigure-dash3--navy { color: rgb(var(--color-extra-navy-dash3-900)); } .HeroFigure-dash3--indigo { color: rgb(var(--color-soft-purple-600)); } .HeroFigure-dash3--violet { color: rgb(var(--color-extra-violet-dash3-900)); } .HeroFigure-dash3--plum { color: rgb(var(--color-extra-plum-dash3-900)); } .HeroFigure-dash3--blue { color: rgb(var(--color-extra-blue-dash3-900)); } .HeroFigure-dash3--white { color: rgb(var(--color-white)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .NicePortalMenu__field { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ @keyframes NicePortalMenu-enter { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } .NicePortalMenu { font-family: "Onest"; position: relative; max-width: 600px; } .NicePortalMenu--withMargin { margin-bottom: 1.3rem; } .NicePortalMenu__inputlabel { font-size: 16px; line-height: 18px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 0.5rem; display: flex; } .NicePortalMenu__field { min-width: 100px; min-height: 1.1rem; box-sizing: border-box; transition: 0.2s all; border: 1px solid rgb(var(--color-gray-400)); display: flex; align-content: center; justify-content: space-between; align-items: center; color: rgb(var(--color-secondary-900)); background: rgb(var(--color-white)); padding: 7px 13px; text-align: left; border-radius: 5px; cursor: pointer; position: relative; font-size: 15px; line-height: 20px; } .NicePortalMenu__field--warning { border-color: rgb(var(--color-warning-600)); color: rgb(var(--color-warning-600)); } .NicePortalMenu__field--error { border-color: rgb(var(--color-error-600)); color: rgb(var(--color-error-600)); } .NicePortalMenu__field--valid { border-color: rgb(var(--color-success-600)); color: rgb(var(--color-success-600)); } .NicePortalMenu__field__children { display: flex; align-items: center; } .NicePortalMenu__field__children--trimmed { display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .NicePortalMenu__field__children--trimmed:hover { overflow: hidden; } .NicePortalMenu__field__caret { font-size: 10px; padding-left: 10px; margin-left: auto; } .NicePortalMenu__field__caret--changable { transition: 0.2s all; } .NicePortalMenu__field__caret--changable--less-padding { padding-left: 6.48px; } .NicePortalMenu__field__textWithMargin { margin-left: 10px; } .NicePortalMenu__field__image { width: 30px; height: 30px; margin-top: -2px; margin-bottom: -2px; } .NicePortalMenu__field__image > img { height: 100%; width: 100%; } .NicePortalMenu__field__image--loading { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 3px; } .NicePortalMenu__field__image--error { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); border-radius: 3px; color: rgb(var(--color-gray-500)); } .NicePortalMenu__field--isOpen { border-color: rgb(var(--color-primary-300)); } .NicePortalMenu__field--isOpen .NicePortalMenu__field__caret { opacity: 0.5; } .NicePortalMenu__field--unstyled { height: unset; min-width: unset; border: unset; color: unset; background: unset; padding: unset; border-radius: unset; } .NicePortalMenu__field--unstyled:hover { color: unset !important; } .NicePortalMenu__field--unstyled.NicePortalMenu__field--disabled { color: unset !important; background: unset !important; text-decoration: unset !important; } .NicePortalMenu__field--disabled { cursor: not-allowed; color: rgba(var(--color-secondary-900), 0.5); background: rgb(var(--color-gray-100)); } .NicePortalMenu__field--edited { background: rgb(var(--color-secondary-100)); } .NicePortalMenu__field--nopad { padding: 0; border: 0; } .NicePortalMenu__field .fa-angle-down { margin-left: 15px; } .NicePortalMenu__field__input { border: 0; } .NicePortalMenu__field__boolOption { transition: 0.2s all; height: 36px; box-sizing: border-box; display: flex; align-items: center; padding: 7px 9px; border: 1px solid rgba(var(--color-gray-600), 0.5); border-right: none; } .NicePortalMenu__field__boolOption:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .NicePortalMenu__field__boolOption:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid rgba(var(--color-gray-600), 0.5); } .NicePortalMenu__field__boolOption:hover { color: rgb(var(--color-secondary-900)); background: rgba(var(--color-secondary-500), 0.2); } .NicePortalMenu__field__boolOption--active { background: rgb(var(--color-secondary-500)) !important; color: rgb(var(--color-white)) !important; } .NicePortalMenu__field__loading { margin-right: 10px; font-size: 15px; color: rgb(var(--color-gray-600)); } .NicePortalMenu__field__loading--icon { color: rgb(var(--color-gray-600)); } .NicePortalMenu__dropdown { position: fixed; overflow: visible; text-overflow: ellipsis; white-space: nowrap; z-index: 1100; min-width: fit-content; border-radius: 5px; transform-origin: top center; animation: NicePortalMenu-enter 0.2s ease-out; } .NicePortalMenu__dropdown--flipped { transform-origin: bottom center; } .NicePortalMenu__dropdown--popup { top: auto; bottom: 100%; } .NicePortalMenu__dropdown--alignLeft { left: unset; right: 0; } .NicePortalMenu__dropdown--alignLeft .NicePortalMenu__dropdown__content::after { top: -8px; right: 22px; left: unset; } .NicePortalMenu__dropdown__wrapper { border-radius: 5px; } .NicePortalMenu__dropdown__content { background: rgb(var(--color-white)); color: rgb(var(--color-extra-navy-dash3-900)); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); border-radius: 5px; position: relative; z-index: 2; } .NicePortalMenu__dropdown__content__groupList { padding: 0.5rem 1rem; position: relative; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .NicePortalMenu__dropdown__content__groupList:hover { scrollbar-color: #808080 transparent; } .NicePortalMenu__dropdown__content__groupList::-webkit-scrollbar { background-color: transparent; width: 7px; } .NicePortalMenu__dropdown__content__groupList::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .NicePortalMenu__dropdown__content__groupList::-webkit-scrollbar-button { display: none; } .NicePortalMenu__dropdown__search { position: relative; z-index: 5; padding: 20px 15px 10px 15px; margin-bottom: 0px; } .NicePortalMenu__dropdown__search .InputField { margin-bottom: 0 !important; } .NicePortalMenu__dropdown__search .InputField > input { border-color: rgb(var(--color-gray-400)); } .NicePortalMenu__dropdown__placer { height: 15px; background-color: transparent; } .NicePortalMenu__dropdown__noResults { padding: 15px 0 15px 5px; display: flex; justify-content: space-between; align-items: center; } .NicePortalMenu__dropdown__noResults__action { display: flex; align-items: center; cursor: pointer; color: rgb(var(--color-primary-400)); font-weight: 600; font-size: 14px; text-decoration: underline; } .NicePortalMenu__dropdown__noResults__action:hover { color: rgb(var(--color-primary-500)); } .NicePortalMenu__group { z-index: 3; position: relative; padding: 0.5rem 0; } .NicePortalMenu__group__item { margin-bottom: 15px; } .NicePortalMenu__group__title { display: flex; font-weight: 500; font-size: 14px; padding: 15px 10px 5px 10px; color: rgb(var(--color-gray-700)); white-space: nowrap; } .NicePortalMenu__group--withDivider { border-top: 1.5px solid rgb(var(--color-gray-300)); } .NicePortalMenu__header { padding: 5px 15px 15px 15px; } .NicePortalMenu__item { cursor: pointer; display: flex; align-items: center; margin: 5px; padding: 5px 8px; font-size: 15px; font-weight: 500; line-height: 1.5em; position: relative; color: rgb(var(--color-title-dash3)); border-radius: 5px; } .NicePortalMenu__item:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .NicePortalMenu__item--active { background: rgba(var(--color-extra-violet-dash3-800), 0.2); color: rgb(var(--color-primary-600)); } .NicePortalMenu__item--error:hover { background: rgba(var(--color-error-500), 0.1); color: rgba(var(--color-error-500)); } .NicePortalMenu__item--disabled { cursor: not-allowed; color: rgb(var(--color-gray-500)); background-color: transparent; } .NicePortalMenu__item--disabled:hover { background: rgb(var(--color-gray-200)); color: rgb(var(--color-gray-500)); } .NicePortalMenu__item__image { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -2px; margin-bottom: -2px; } .NicePortalMenu__item__image > img { height: 100%; width: 100%; } .NicePortalMenu__item__image--container { position: relative; display: flex; align-items: center; justify-content: center; } .NicePortalMenu__item__image--loading { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 3px; } .NicePortalMenu__item__image--error { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); border-radius: 3px; color: rgb(var(--color-gray-500)); } .NicePortalMenu__item__tag { display: flex; flex-grow: 0; } .NicePortalMenu__item__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; } .NicePortalMenu__item__text--hasImage { margin-left: 10px; } .NicePortalMenu__item__text--disabled { font-weight: 500; color: rgb(var(--color-gray-600)); } .NicePortalMenu__item__subtext { font-size: 15px; font-weight: 300; color: rgb(var(--color-gray-600)); } .NicePortalMenu__checkbox { display: flex; } .NicePortalMenu__checkbox__text { padding-left: 10px; font-size: 14px; line-height: 1.1rem; padding-top: 2px; color: #13294b; } .NicePortalMenu__footer { font-size: 14px; padding: 1rem 0; margin: 0 1rem; border-top: 1px solid rgb(var(--color-gray-300)); } .NicePortalMenu__footer__icon { width: 30px; font-size: 18px; color: rgb(var(--color-soft-purple-600)); margin-right: 5px; } .NicePortalMenu__footer__text { font-weight: 600; font-size: 14px; } .NicePortalMenu__footer__container { display: flex; justify-content: flex-start; align-items: center; color: rgb(var(--color-soft-purple-600)); cursor: pointer; } .NicePortalMenu__footer__container:hover .NicePortalMenu__footer__text { color: rgb(var(--color-primary-dash3-500)); } .NicePortalMenu__footer__container:hover .NicePortalMenu__footer__icon { color: rgb(var(--color-primary-dash3-500)); } .NicePortalMenu__validationMessage { position: absolute; bottom: -3px; left: 2px; font-size: 12px; transform: translateY(100%); } .NicePortalMenu__validationMessage--warning { color: rgb(var(--color-warning-600)); } .NicePortalMenu__validationMessage--error { color: rgb(var(--color-error-600)); } .NicePortalMenu__validationMessage--valid { color: rgb(var(--color-success-600)); } .NicePortalMenu__validationMessage--disabled { color: rgb(var(--color-gray-500)); cursor: not-allowed; } .NicePortalMenu__validationMessage__number { display: flex; justify-content: flex-end; } .NicePortalMenu.small-dropdown { width: 200px; padding: 0 10px 0 0; } .dark-mode .NicePortalMenu__inputlabel { color: rgb(var(--color-gray-300)); } .dark-mode .NicePortalMenu__field { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-gray-300)); } .dark-mode .NicePortalMenu__field--isOpen { border-color: rgb(var(--color-primary-500)); } .dark-mode .NicePortalMenu__field--unstyled { background-color: transparent; } .dark-mode .NicePortalMenu__field--disabled { background-color: rgba(var(--color-gray-500), 0.5); border: solid 1px rgba(var(--color-gray-500), 0.3); } .dark-mode .NicePortalMenu__field--error { border-color: rgb(var(--color-error-500)); } .dark-mode .NicePortalMenu__field__loading { color: rgb(var(--color-gray-500)); } .dark-mode .NicePortalMenu__field__loading--icon { color: rgb(var(--color-gray-500)); } .dark-mode .NicePortalMenu__dropdown__wrapper { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .NicePortalMenu__dropdown__content { background-color: rgba(var(--color-white), 0.05); border: solid 0.1px rgba(var(--color-gray-700), 0.5); color: rgb(var(--color-gray-300)); } .dark-mode .NicePortalMenu__checkbox input[type=checkbox] { background: transparent; color: white; } .dark-mode .NicePortalMenu__checkbox__text { color: rgb(var(--color-gray-300)); } .dark-mode .NicePortalMenu__group__title { color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .NicePortalMenu__group--withDivider { border-top: 1.5px solid rgba(var(--color-gray-700), 0.5); } .dark-mode .NicePortalMenu__item { color: rgb(var(--color-gray-200)); } .dark-mode .NicePortalMenu__item--disabled { color: rgb(var(--color-gray-600)); } .dark-mode .NicePortalMenu__item__image--error { background: rgba(255, 255, 255, 0.1); color: rgb(var(--color-gray-400)); } .dark-mode .NicePortalMenu__item__text--disabled { color: rgb(var(--color-gray-500)); } .dark-mode .NicePortalMenu__item__subtext { color: rgb(var(--color-gray-400)); } .dark-mode .NicePortalMenu__item:hover { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .NicePortalMenu__footer { border-top: 1px solid rgb(var(--color-gray-700)); } .dark-mode .NicePortalMenu__footer:hover .NicePortalMenu__footer__text { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .NicePortalMenu__footer:hover .NicePortalMenu__footer__icon { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .NicePortalMenu__footer__text { color: rgb(var(--color-white)); } .dark-mode .NicePortalMenu__footer__icon { color: rgb(var(--color-white)); } .dark-mode .NicePortalMenu__validationMessage--error { color: rgb(var(--color-error-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NiceModalDash3 { position: fixed; z-index: 999; display: flex; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; max-height: 100vh; font-family: "Onest" !important; } .NiceModalDash3__item { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .NiceModalDash3__item--end { display: flex; flex-direction: column; margin-bottom: 0; } .NiceModalDash3__container { position: relative; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); z-index: 1000; background: rgb(var(--color-white)); max-height: 80vh; display: flex; flex-direction: column; border-radius: 5px; } .NiceModalDash3__contents { padding: 45px 45px 30px 45px; position: relative; } .NiceModalDash3__contents.overflow-visible { overflow-y: visible; } .NiceModalDash3__contents.overflow-scroll { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .NiceModalDash3__contents.overflow-scroll:hover { scrollbar-color: #808080 transparent; } .NiceModalDash3__contents.overflow-scroll::-webkit-scrollbar { background-color: transparent; width: 7px; } .NiceModalDash3__contents.overflow-scroll::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .NiceModalDash3__contents.overflow-scroll::-webkit-scrollbar-button { display: none; } .NiceModalDash3__contents.overflow-scroll { overflow-x: auto; } .NiceModalDash3__progress { z-index: 1001; position: absolute; display: flex; flex-direction: column; background: rgb(var(--color-white)); opacity: 0.7; top: 0; bottom: 0; left: 0px; right: 0px; display: flex; justify-content: center; align-items: center; } .NiceModalDash3__progress__text { color: rgb(var(--color-gray-600)); font-size: 14px; } .NiceModalDash3__title { color: rgb(var(--color-title-dash3)); font-size: 22px; font-weight: 700; margin-bottom: 30px; overflow-wrap: break-word; } .NiceModalDash3__label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 12px; } .NiceModalDash3__message { color: rgb(var(--color-gray-800)); line-height: 22px; margin-bottom: 10px; } .NiceModalDash3__gutter { display: flex; justify-content: space-between; padding: 25px 45px 45px 45px; background: rgb(var(--color-white)); border-radius: 5px; } .NiceModalDash3__gutter--left { display: flex; justify-content: flex-start; gap: 1rem; } .NiceModalDash3__gutter--right { display: flex; justify-content: flex-end; gap: 1rem; } .NiceModalDash3__background { z-index: 999; position: fixed; top: -9999px; left: -9999px; right: -9999px; bottom: -9999px; background-color: rgba(var(--color-white), 0.7); backdrop-filter: blur(2px); } /* Dark mode */ .dark-mode .NiceModalDash3__background { background-color: rgba(var(--color-white), 0.08); } .dark-mode .NiceModalDash3__container { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .NiceModalDash3__item { color: rgb(var(--color-gray-200)); } .dark-mode .NiceModalDash3__title { color: rgb(var(--color-gray-200)); } .dark-mode .NiceModalDash3__label { color: rgb(var(--color-gray-300)); } .dark-mode .NiceModalDash3__message { color: rgb(var(--color-gray-400)); } .dark-mode .NiceModalDash3__gutter { background-color: rgb(var(--color-extra-midnight-dash3-900)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ObjectiveInfo { text-align: left; } .ObjectiveInfo__name { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; color: rgb(var(--color-gray-900)); line-height: 1.3; } .dark-mode .ObjectiveInfo__name { color: var(--text-primary-dark, #fff); } .ObjectiveInfo__description { font-size: 14px; color: rgb(var(--color-gray-600)); margin: 0; line-height: 1.4; max-height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media (max-width: 768px) { .ObjectiveInfo__name { font-size: 15px; } .ObjectiveInfo__description { font-size: 13px; max-height: 45px; line-clamp: 2; -webkit-line-clamp: 2; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DashboardCard-dash3 { display: flex; flex-direction: column; min-height: 327px; height: 100%; color: rgb(var(--color-soft-purple-600)); background-color: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; overflow: visible; } @media (max-width: 1201px) { .DashboardCard-dash3--span-2 { grid-column: auto/span 2; } } .DashboardCard-dash3--placeholder { display: flex; flex-direction: column; min-height: 327px; height: 100%; background: transparent; border-radius: 10px; border: none; overflow: hidden; } .DashboardCard-dash3--alt { color: rgb(var(--color-white)); background-color: rgb(var(--color-soft-purple-600)) !important; } .DashboardCard-dash3 .drag-handle { display: flex; align-items: center; justify-content: center; padding: 8px 12px; cursor: grab; color: rgb(var(--color-gray-500)); opacity: 0.5; transition: opacity 0.2s ease, color 0.2s ease; } .DashboardCard-dash3 .drag-handle svg, .DashboardCard-dash3 .drag-handle svg * { cursor: grab !important; pointer-events: none; } .DashboardCard-dash3 .drag-handle:hover { opacity: 1; color: rgb(var(--color-gray-700)); } .DashboardCard-dash3 .drag-handle:active { cursor: grabbing; } .DashboardCard-dash3__header { display: flex; align-items: center; justify-content: space-between; width: auto; padding: 15px 20px; text-align: left; } .DashboardCard-dash3__header__left, .DashboardCard-dash3__header__right { display: flex; justify-content: space-between; align-items: center; height: 30px; } .DashboardCard-dash3__header__right { width: fit-content; position: relative; } .DashboardCard-dash3__header--alt { color: rgb(var(--color-white)); } .DashboardCard-dash3__header--border { border-bottom: 1px solid rgb(var(--color-gray-300)); justify-content: space-between; } .DashboardCard-dash3__header--borderless { border: none; } .DashboardCard-dash3__header__icon { color: rgb(var(--color-extra-navy-dash3-900)); margin-left: 10px; } .DashboardCard-dash3__header__icon--alt { color: rgb(var(--color-white)) !important; } .DashboardCard-dash3__header__icon--standard { color: rgb(var(--color-primary-dash3-500)) !important; } .DashboardCard-dash3__header h3 { color: rgb(var(--color-extra-navy-dash3-900)); font-family: "Onest"; font-style: normal; font-weight: 700; font-size: 16px; line-height: 20px; width: 100%; overflow: hidden; white-space: nowrap; text-wrap: wrap; text-overflow: ellipsis; min-width: 8rem; } .DashboardCard-dash3__body { flex-grow: 1; width: auto; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; } .DashboardCard-dash3__body h4 { margin: 0; } .DashboardCard-dash3__body--doubleWidth { flex-direction: row; align-items: flex-start; } .DashboardCard-dash3__body--doubleWidth .DashboardCard-dash3__content { min-width: 300px; max-width: 50%; } @media (max-width: 1440px) { .DashboardCard-dash3__body--doubleWidth { flex-direction: column; align-items: center; gap: 1rem; } .DashboardCard-dash3__body--doubleWidth .DashboardCard-dash3__content { min-width: unset; max-width: 100%; flex: 1; } } .DashboardCard-dash3__objectiveInfo { position: absolute; top: 0.5rem; left: 1.2rem; right: 1.2rem; z-index: 1; } .DashboardCard-dash3__content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .DashboardCard-dash3__content__score { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .DashboardCard-dash3__content__score__container { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; } .DashboardCard-dash3__content__score--hScroll { overflow-x: scroll; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .DashboardCard-dash3__content__score--hScroll:hover { scrollbar-color: #808080 transparent; } .DashboardCard-dash3__content__score--hScroll::-webkit-scrollbar { background-color: transparent; height: 7px; } .DashboardCard-dash3__content__score--hScroll::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; outline: 2px solid transparent; } .DashboardCard-dash3__content__score--hScroll::-webkit-scrollbar-button { display: none; } .DashboardCard-dash3__content__score--vScroll { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .DashboardCard-dash3__content__score--vScroll:hover { scrollbar-color: #808080 transparent; } .DashboardCard-dash3__content__score--vScroll::-webkit-scrollbar { background-color: transparent; width: 7px; } .DashboardCard-dash3__content__score--vScroll::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .DashboardCard-dash3__content__score--vScroll::-webkit-scrollbar-button { display: none; } .DashboardCard-dash3__content__title { font-style: normal; font-weight: 600; font-size: 14px; color: rgb(var(--color-extra-navy-dash3-900)); padding-top: 10px; } .DashboardCard-dash3__content__title--alt { color: rgb(var(--color-white)); } .DashboardCard-dash3__content__title--above { padding-top: 0px; padding-bottom: 10px; } .DashboardCard-dash3__content__description { width: 100%; margin: 30px 0 10px 0; height: fit-content; display: flex; justify-content: space-around; color: rgb(var(--color-soft-purple-600)); } .DashboardCard-dash3__content__description__left { display: flex; } .DashboardCard-dash3__content__description__right { display: flex; } .DashboardCard-dash3__content__description__icon { width: auto; display: flex; justify-content: center; } .DashboardCard-dash3__content__description__icon--alt { color: rgb(var(--color-white)) !important; } .DashboardCard-dash3__content__description__text { width: 85%; } .DashboardCard-dash3__content__description__text h4 { font-style: normal; font-weight: 700; font-size: 12px; line-height: 16px; color: rgb(var(--color-primary-dash3-500)); } .DashboardCard-dash3__content__description__text p { font-style: normal; margin: 5px 0 0 0 !important; font-weight: 400; font-size: 12px; line-height: 16px; color: rgb(106, 109, 115); } .DashboardCard-dash3__content__description__text p span { font-weight: 700; font-style: normal; } .DashboardCard-dash3__content__description__text a { text-decoration: underline; color: rgb(var(--color-primary-dash3-500)); font-weight: 700; font-size: 12px; line-height: 16px; margin-left: 2px; } .DashboardCard-dash3__content__description__text--alt h4 { color: rgb(var(--color-white)); } .DashboardCard-dash3__content__description__text--alt p { color: rgb(var(--color-white)); } .DashboardCard-dash3__content__description__text--alt a { color: rgb(var(--color-white)); } .DashboardCard-dash3__icon { color: rgb(var(--color-primary-dash3-500)); font-size: 25px; padding: 3px 5px 0 0; } .DashboardCard-dash3__icon--alt { color: rgb(var(--color-white)) !important; } .DashboardCard-dash3__dropdown { z-index: 1001; position: relative; } .DashboardCard-dash3__infoTooltip { width: 225px; margin-left: 20px; display: flex; justify-content: flex-end; height: fit-content; } .DashboardCard-dash3__infoTooltip p { margin: 0; font-size: 12px; } .DashboardCard-dash3__infoTooltip .help-icon { font-size: 18px; margin-right: 10px; } .DashboardCard-dash3__emptyDataCard { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-around; } .DashboardCard-dash3__emptyDataCard h3, .DashboardCard-dash3__emptyDataCard p { width: 100%; font-size: 12px; text-align: center; color: rgb(var(--color-extra-navy-dash3-900)); margin: 0; } .DashboardCard-dash3__emptyDataCard h3 { padding-top: 25px; font-weight: 700; font-size: 16px; } .DashboardCard-dash3__emptyDataCard p { padding-top: 5px; } .DashboardCard-dash3__emptyDataCard--isAlt h3, .DashboardCard-dash3__emptyDataCard--isAlt p { color: rgb(var(--color-extra-lilac-dash3-800)); } .DashboardCard-dash3__emptyDataCard__imageAttribution { position: relative; background-color: red; } .DashboardCard-dash3__emptyDataCard__imageAttribution__text { position: absolute; right: 0; } .DashboardCard-dash3__emptyDataCard__imageAttribution__text p { color: rgb(var(--color-gray-700)) !important; font-size: 7px !important; } .DashboardCard-dash3__emptyDataCard__imageAttribution__text p a { cursor: pointer; color: rgb(var(--color-gray-600)); } .DashboardCard-dash3 .LoadingContainer--relative { height: 100%; } .DashboardCard-dash3--span-1 { grid-column: auto/span 1; } .DashboardCard-dash3--span-1 .DashboardCard-dash3__content__description { margin-top: 0; } .DashboardCard-dash3--span-1 .DashboardCard-dash3__content__score:nth-child(2) { margin-top: 30px; } .DashboardCard-dash3--span-1 .DashboardCard-dash3__content__score__container { height: 100%; flex-direction: column; align-items: center; justify-content: center; } .DashboardCard-dash3--span-1 .DashboardCard-dash3__content__score__container .CustomDashboard-dash3__performanceStandards__card { min-height: 100px; } .DashboardCard-dash3--span-1 .DashboardCard-dash3__content__score__container .CustomDashboard-dash3__performanceStandards__card .HeroFigure-dash3 { font-family: "Onest"; font-style: normal; font-weight: 700; font-size: 50px; line-height: 40px; margin: 0; } .DashboardCard-dash3--span-2 { grid-column: auto/span 2; } .DashboardCard-dash3--span-2 .DashboardCard-dash3__content__description { margin-top: 0; } .DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score:first-child { margin-bottom: 30px; } .DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score__container .CustomDashboard-dash3__performanceStandards__card { min-height: 100px; } .DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score__container .CustomDashboard-dash3__performanceStandards__card .HeroFigure-dash3 { font-family: "Onest"; font-style: normal; font-weight: 700; font-size: 60px; line-height: 40px; margin: 0; } .DashboardCard-dash3--span-2 .DonutChart-dash3__container { width: 100%; height: 100% !important; min-height: 300px; } .DashboardCard-dash3--span-2 { grid-column: auto/span 2; } .DashboardCard-dash3--span-2 .DashboardCard-dash3__content .DonutChart-dash3__container { width: 100%; height: 100% !important; min-height: 300px; } .DashboardCard-dash3--span-2 .DonutChart-dash3__container { width: 100%; height: 100% !important; min-height: 300px; } @media (max-width: 1201px) { .DashboardCard-dash3--span-2 { grid-column: auto/span 2; } } @media (max-width: 1201px) { .DashboardCard-dash3--span-2 { grid-column: auto/span 3; } } .DashboardCard-dash3--span-3 { grid-column: auto/span 3; } @media (max-width: 1201px) { .DashboardCard-dash3--span-3 { grid-column: auto/span 2; } } .DashboardCard-dash3--span-2-to-4 { grid-column: auto/span 2; } @media (min-width: 1201px) { .DashboardCard-dash3--span-2-to-4 { grid-column: auto/span 4; } } .DashboardCard-dash3--span-4 { grid-column: auto/span 4; } @media (min-width: 1201px) { .DashboardCard-dash3--span-4 { grid-column: auto/span 5; } } .DashboardCard-dash3__fixedDropdown { z-index: 10001; } .DashboardCard-dash3__fixedDropdown .NiceDropdownDash3__dropdown { z-index: 10001; } .DashboardCard-dash3__fixedDropdown .NiceDropdownDash3__dropdown__content { z-index: 10002; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .GaugeChart { display: flex; flex-direction: column; justify-content: center; width: 100%; } .GaugeChart .apexcharts-canvas { width: 100%; } .GaugeChart__chartLabels { position: relative; margin: 0 auto; width: 75%; } .GaugeChart__chartLabels__container { width: 100%; height: fit-content; display: flex; justify-content: space-between; } .GaugeChart__chartLabels__label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 20px; height: 100%; } .GaugeChart__chartLabels__label__text { color: #959ba4 !important; font-weight: 400; font-size: 14px; font-family: "Onest"; } .GaugeChart__chartLabels__label__score { margin: -50px 0 0 0; font-size: 40px; line-height: 50px; padding: 0; } .GaugeChart .apexcharts-graphical { cursor: none; pointer-events: none; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .RadarChart { display: flex; justify-content: center; position: relative; } @media (max-width: 1440px) { .RadarChart { margin-top: 20px; } } .RadarChart svg { overflow-clip-margin: 50px; } .RadarChart .apexcharts-canvas { width: 100%; } .RadarChart .apexcharts-radar-series { width: 100%; } .RadarChart .apexcharts-radar-series .apexcharts-xaxis .apexcharts-xaxis-label { white-space: pre-wrap; max-width: 20px; word-wrap: break-word; } .RadarChart .apexcharts-text { display: none; } .RadarChart .apexcharts-tooltip { background-color: rgb(var(--color-white)); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 0; border: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; } .RadarChart .apexcharts-tooltip .radar-tooltip { padding: 1rem; min-width: 280px; max-width: 320px; } .RadarChart .apexcharts-tooltip .radar-tooltip__title { font-family: "Onest"; font-size: 14px; font-weight: 600; color: rgb(var(--color-gray-900)); margin-bottom: 0.5rem; } .RadarChart .apexcharts-tooltip .radar-tooltip__value { font-family: "Onest"; font-size: 14px; font-weight: 600; color: rgb(var(--color-primary-700)); margin-bottom: 0.75rem; } .RadarChart .apexcharts-tooltip .radar-tooltip__body { font-family: "Onest"; font-size: 12px; font-weight: 400; color: rgb(var(--color-gray-600)); line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } .RadarChart .apexcharts-datalabels rect { width: 22px; height: 22px; } .RadarChart .apexcharts-datalabels text { transform: translateY(4px); } .RadarChart .apexcharts-legend { width: 100%; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ComfortScoreExtended-dash3 .DashboardCard-dash3__content__description { margin-top: 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NauseaExtended-dash3 .DashboardCard-dash3__content__description { margin-top: 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .LineChart { position: relative; display: flex; justify-content: flex-start; width: 100%; } .LineChart__noData { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; font-size: 1.5rem; } .LineChart__noData__text { border: 1px solid rgb(var(--color-gray-600)); padding: 12px 30px; border-radius: 4px; background-color: rgba(var(--color-soft-purple-600), 0.3); color: rgb(var(--color-soft-purple-600)); font-size: 17px; } .LineChart__zoomHint { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: rgba(var(--color-gray-600), 0.7); background: rgba(var(--color-white), 0.9); padding: 4px 8px; border-radius: 4px; font-family: "Onest", sans-serif; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; } .LineChart:hover .LineChart__zoomHint { opacity: 1; } .LineChart .apexcharts-canvas { width: 100%; } .LineChart .apexcharts-graphical { cursor: none; pointer-events: none; } .LineChart .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-midnight-dash3-900)); } .LineChart .apexcharts-yaxis text { fill: rgb(var(--color-extra-midnight-dash3-900)); } .LineChart .apexcharts-legend-series { color: rgb(var(--color-extra-midnight-dash3-900)) !important; } .LineChart .apexcharts-toolbar { z-index: 0 !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .ButtonGroup__button { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ButtonGroup { display: inline-flex; align-items: center; border-radius: 0.5rem; overflow: hidden; } .ButtonGroup--disabled { opacity: 0.5; pointer-events: none; } .ButtonGroup__button { display: flex; align-items: center; justify-content: center; border: 1px solid rgb(var(--color-gray-400)); background: transparent; color: rgb(var(--color-gray-800)); font-weight: 700; font-family: inherit; cursor: pointer; margin: 0; padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1rem; border-radius: 0; position: relative; } .ButtonGroup__button--first { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .ButtonGroup__button--last { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .ButtonGroup__button--active { color: rgb(var(--color-extra-violet-500)); border-color: rgb(var(--color-primary-500)); box-shadow: inset 0 0 0 0.5px rgb(var(--color-primary-500)); z-index: 1; } .ButtonGroup__button--active:hover { background: rgb(var(--color-primary-200)); border-color: rgb(var(--color-primary-100)); box-shadow: inset 0 0 0 0.5px rgb(var(--color-primary-600)); } .ButtonGroup__button--disabled { cursor: not-allowed; opacity: 0.5; } .ButtonGroup__button--disabled:hover { background: transparent; color: rgb(var(--color-gray-600)); border-color: rgb(var(--color-gray-300)); } .ButtonGroup__button:not(:first-child):not(.ButtonGroup__button--active) { border-left: none; margin-left: -1px; } .ButtonGroup__button { /* Hover state for inactive buttons */ } .ButtonGroup__button:not(.ButtonGroup__button--active):hover { background: rgba(var(--color-gray-500), 0.1); border-color: rgb(var(--color-gray-400)); color: rgb(var(--color-gray-700)); } .ButtonGroup__button:focus-visible { outline: 2px solid rgb(var(--color-extra-violet-500)); outline-offset: 2px; z-index: 2; } .ButtonGroup__button[aria-pressed=true] { color: rgb(var(--color-extra-violet-600)); border-color: rgb(var(--color-extra-violet-600)); } .ButtonGroup--sm .ButtonGroup__button { padding: 0.375rem 0.75rem; font-size: 0.75rem; line-height: 1.2; } .ButtonGroup--md .ButtonGroup__button { padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1.4; } .ButtonGroup--lg .ButtonGroup__button { padding: 0.75rem 20px; font-size: 1rem; line-height: 1.5; } .dark-mode .ButtonGroup__button { color: rgb(var(--color-gray-400)); } .dark-mode .ButtonGroup__button:not(.dark-mode .ButtonGroup__button--active):hover { background: rgba(var(--color-gray-500), 0.1); border-color: rgb(var(--color-gray-400)); color: rgb(var(--color-gray-500)); } .dark-mode .ButtonGroup__button--active:hover { background: rgb(var(--color-extra-violet-700)); color: rgb(var(--color-extra-violet-200)); } .dark-mode .ButtonGroup__button:focus-visible { outline-color: rgb(var(--color-extra-violet-500)); } .dark-mode .ButtonGroup__button--disabled:hover { background: transparent; color: rgb(var(--color-gray-500)); border-color: rgb(var(--color-gray-500)); } .dark-mode .ButtonGroup__button[aria-pressed=true] { color: rgb(var(--color-extra-violet-500)); border-color: rgb(var(--color-extra-violet-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SessionDrilldown-dash3 { padding: 24px; } .SessionDrilldown-dash3__header { margin-bottom: 16px; } .SessionDrilldown-dash3__header__title { font-family: "Onest", sans-serif; font-size: 18px; font-weight: 600; color: rgb(var(--color-gray-800)); margin: 0 0 4px; } .SessionDrilldown-dash3__header__subtitle { font-size: 13px; color: rgb(var(--color-gray-500)); margin: 0; } .SessionDrilldown-dash3__divider { border: none; border-top: 1px solid rgb(var(--color-gray-200)); margin: 0 0 8px; } .SessionDrilldown-dash3__list { max-height: 400px; overflow-y: auto; margin: 0 -24px; padding: 0 24px; } .SessionDrilldown-dash3__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgb(var(--color-gray-100)); cursor: pointer; border-radius: 6px; transition: background-color 0.15s ease; } .SessionDrilldown-dash3__row:hover { background-color: rgba(var(--color-extra-indigo-100), 0.15); } .SessionDrilldown-dash3__row:last-child { border-bottom: none; } .SessionDrilldown-dash3__row-info { display: flex; flex-direction: column; gap: 2px; } .SessionDrilldown-dash3__row-name { font-family: "Onest", sans-serif; font-size: 14px; font-weight: 600; color: rgb(var(--color-soft-purple-600)); } .SessionDrilldown-dash3__row-time { font-size: 12px; color: rgb(var(--color-gray-400)); } .SessionDrilldown-dash3__row-duration { font-size: 14px; font-weight: 500; color: rgb(var(--color-gray-600)); white-space: nowrap; } .SessionDrilldown-dash3__footer { margin-top: 12px; text-align: center; font-size: 13px; color: rgb(var(--color-gray-400)); } .SessionDrilldown-dash3__loading { display: flex; align-items: center; justify-content: center; padding: 48px 0; font-size: 14px; color: rgb(var(--color-gray-400)); } .SessionDrilldown-dash3__empty { display: flex; align-items: center; justify-content: center; padding: 48px 0; font-size: 14px; color: rgb(var(--color-gray-400)); } .dark-mode .SessionDrilldown-dash3__header__title { color: rgb(var(--color-gray-100)); } .dark-mode .SessionDrilldown-dash3__header__subtitle { color: rgb(var(--color-gray-400)); } .dark-mode .SessionDrilldown-dash3__divider { border-top-color: rgb(var(--color-gray-700)); } .dark-mode .SessionDrilldown-dash3__row { border-bottom-color: rgb(var(--color-gray-700)); } .dark-mode .SessionDrilldown-dash3__row:hover { background-color: rgba(var(--color-extra-indigo-100), 0.1); } .dark-mode .SessionDrilldown-dash3__row-name { color: rgb(var(--color-soft-purple-600)); } .dark-mode .SessionDrilldown-dash3__row-time { color: rgb(var(--color-gray-500)); } .dark-mode .SessionDrilldown-dash3__row-duration { color: rgb(var(--color-gray-300)); } .dark-mode .SessionDrilldown-dash3__footer { color: rgb(var(--color-gray-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .IllustrationFigure-dash3 { width: fit-content; display: flex; justify-content: space-between; flex-direction: column; align-items: center; margin: 0 20px; max-width: 250px; } .IllustrationFigure-dash3__illustration { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: fit-content; } .IllustrationFigure-dash3__illustration__text { color: rgb(var(--color-extra-navy-dash3-900)); font-size: 14px; font-weight: 600; margin: 20px 0; text-align: center; line-height: 16px; } .IllustrationFigure-dash3__heroFigure { margin-top: 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ColumnChart-dash3 { width: 100%; min-height: 300px; } .ColumnChart-dash3 .ellipsis-menu { height: 20px; } .ColumnChart-dash3 .ellipsis-menu g { fill: rgb(var(--color-extra-silver-dash3-900)); } .ColumnChart-dash3 .ellipsis-menu { color: rgb(var(--color-extra-silver-dash3-900)); } .ColumnChart-dash3 .apexcharts-canvas { margin: 0 !important; } .ColumnChart-dash3 .apexcharts-legend-marker { border-radius: 50% !important; width: 12px !important; height: 12px !important; margin-right: 4px; } .ColumnChart-dash3 .apexcharts-legend-marker svg { border-radius: 50% !important; } .ColumnChart-dash3 .apexcharts-legend-marker svg rect { rx: 6 !important; ry: 6 !important; } .ColumnChart-dash3 .apexcharts-xaxis-title text, .ColumnChart-dash3 .apexcharts-yaxis-label text, .ColumnChart-dash3 .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-midnight-dash3-800)); -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } .ColumnChart-dash3 .apexcharts-xaxis-title tspan, .ColumnChart-dash3 .apexcharts-yaxis-label tspan, .ColumnChart-dash3 .apexcharts-xaxis-texts-g tspan { fill: rgb(var(--color-extra-midnight-dash3-800)); } .dark-mode .ColumnChart-dash3 .apexcharts-xaxis-title text, .dark-mode .ColumnChart-dash3 .apexcharts-yaxis-label text, .dark-mode .ColumnChart-dash3 .apexcharts-xaxis-texts-g text { fill: rgba(var(--color-white), 0.8); } .dark-mode .ColumnChart-dash3 .apexcharts-xaxis-title tspan, .dark-mode .ColumnChart-dash3 .apexcharts-yaxis-label tspan, .dark-mode .ColumnChart-dash3 .apexcharts-xaxis-texts-g tspan { fill: rgba(var(--color-white), 0.8); }.AverageSessionTimes-dash3.DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score:first-child, .AverageSessionTimes-dash3.DashboardCard-dash3--span-3 .DashboardCard-dash3__content__score:first-child { width: 25%; } .AverageSessionTimes-dash3.DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score:nth-child(2), .AverageSessionTimes-dash3.DashboardCard-dash3--span-3 .DashboardCard-dash3__content__score:nth-child(2) { width: 75%; } .AverageSessionTimes-dash3.DashboardCard-dash3--span-1 .DashboardCard-dash3__content__score { width: 100%; } .AverageSessionTimes-dash3.DashboardCard-dash3--span-1 .CustomDashboard-dash3__sessionTimeAverage { justify-content: center; }.AveragePlayableSpace-dash3.DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score:first-child, .AveragePlayableSpace-dash3.DashboardCard-dash3--span-3 .DashboardCard-dash3__content__score:first-child { width: 25%; } .AveragePlayableSpace-dash3.DashboardCard-dash3--span-2 .DashboardCard-dash3__content__score:nth-child(2), .AveragePlayableSpace-dash3.DashboardCard-dash3--span-3 .DashboardCard-dash3__content__score:nth-child(2) { width: 75%; } .AveragePlayableSpace-dash3.DashboardCard-dash3--span-1 .DashboardCard-dash3__content__score { width: 100%; } .AveragePlayableSpace-dash3.DashboardCard-dash3--span-1 .CustomDashboard-dash3__playableSpace { justify-content: center; }.CircleImage-dash3 { border-radius: 50%; height: 98px; width: 98px; overflow: hidden; } .CircleImage-dash3__img { object-fit: cover; height: 100%; width: auto; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ToggleSwitch { display: flex; align-items: center; padding: 4px 5px; background: #efeeee; border-radius: 5px; } .ToggleSwitch__button { transition: 0.2s all; font-size: 15px; font-weight: 500; font-family: "Onest"; text-align: center; background: transparent; color: rgb(var(--color-title-dash3)); padding: 4px 10px; margin: 0px 5px; min-width: 90px; cursor: pointer; } .ToggleSwitch__button:first-of-type { margin-left: 0px; } .ToggleSwitch__button:last-of-type { margin-right: 0px; } .ToggleSwitch__button--active { border-radius: 4px; background-color: rgb(var(--color-white)); font-weight: 600; } .ToggleSwitch__button--disabled { cursor: not-allowed; opacity: 0.5; } .dark-mode .ToggleSwitch { background: rgb(var(--color-gray-500)); } .dark-mode .ToggleSwitch__button { color: rgb(var(--color-extra-navy-dash3-900)); } .dark-mode .ToggleSwitch__button--active { background-color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .worldmap { position: relative; } .worldmap__background { fill: rgba(0, 0, 0, 0); } .worldmap__boundary { stroke: rgb(var(--color-white)); } .worldmap__selected { fill: rgb(var(--color-extra-indigo-dash3-300)); } .worldmap__tooltip { position: absolute; transform: translate(25px, -55px); padding: 10px 10px; border-radius: 5px; background: rgb(var(--color-gray-100)); border: 1px solid rgb(var(--color-gray-600)); min-width: 110px; font-family: "Onest"; z-index: 1000; pointer-events: none; } .worldmap__tooltip__title { font-weight: 600; color: rgb(var(--color-primary-500)); margin-bottom: 5px; } .worldmap__tooltip__dataLabel { color: rgb(var(--color-title-dash3)); font-weight: 500; font-size: 14px; text-align: left; display: flex; flex-grow: 1; } .worldmap__tooltip__dataValue { color: rgb(var(--color-title-dash3)); font-weight: 500; font-size: 14px; text-align: right; display: flex; } .worldmap__zoomHint { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: rgba(var(--color-gray-600), 0.7); background: rgba(var(--color-white), 0.9); padding: 4px 8px; border-radius: 4px; font-family: "Onest", sans-serif; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; } .worldmap:hover .worldmap__zoomHint { opacity: 1; } .dark-mode .worldmap__boundary { stroke: rgba(var(--color-extra-midnight-dash3-900), 0.1); } .dark-mode .worldmap__selected { stroke: rgba(var(--color-extra-midnight-dash3-900), 0.1); } .dark-mode .worldmap__zoomHint { color: rgba(var(--color-gray-300), 0.8); background: rgba(var(--color-gray-800), 0.9); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .Table-dash3 { font-family: "Onest"; padding: 10px; } .Table-dash3 table th { width: 150px; color: rgb(var(--color-extra-navy-dash3-900)); font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; padding: 0 10px 20px 10px; } .Table-dash3 table td { width: 200px; color: rgb(var(--color-gray-dash3-600)); font-size: 14px; font-weight: 400; line-height: 16px; padding: 7px 10px; vertical-align: middle; } .Table-dash3 table th:nth-of-type(2), .Table-dash3 table td:nth-of-type(2) { width: 100px; text-align: center; }.SessionsByGeography-dash3 ~ .react-resizable-handle { display: none; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PieChart { display: flex; justify-content: center; flex-direction: column; position: relative; } .PieChart__container { width: 100%; max-height: 300px; overflow: hidden; } .PieChart__empty { display: flex; align-items: center; justify-content: center; } .PieChart__empty-message { text-align: center; color: rgb(var(--color-extra-midnight-dash3-800)); font-size: 14px; opacity: 0.6; } .PieChart__total { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } .PieChart__total span { color: rgb(var(--color-white)); font-size: 24px; font-weight: bold; font-family: "Onest", sans-serif; } .PieChart__operation-label { text-align: center; margin-top: 10px; padding: 0 20px; font-size: 14px; color: var(--text-secondary, #666); line-height: 1.4; word-wrap: break-word; white-space: normal; max-width: 100%; } .PieChart .apexcharts-canvas { width: 100%; } .PieChart .apexcharts-legend-text { color: rgb(var(--color-extra-midnight-dash3-800)) !important; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } .PieChart .apexcharts-tooltip { font-weight: bold; } .dark-mode .PieChart__operation-label { color: var(--text-secondary-dark, #aaa); } .Analysis__chartCanvas .PieChart__container { max-height: 500px; overflow: visible; } .Analysis__chartCanvas .PieChart__operation-label { font-size: 18px; }.SitStand-dash3 { position: relative; height: 100%; width: 100%; } .SitStand-dash3__icon { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; top: -30px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .controller-ergonomics-tooltip { width: 200px; } .controller-ergonomics-tooltip .apexcharts-tooltip-title { font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; } .controller-ergonomics-tooltip .apexcharts-tooltip-series-group { display: flex; } .controller-ergonomics-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text { font-family: Helvetica, Arial, sans-serif; font-size: 14px; width: 100%; } .controller-ergonomics-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text .apexcharts-tooltip-y-group { margin-bottom: 6px; } .controller-ergonomics-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text .apexcharts-tooltip-y-group .tooltip-color-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .controller-ergonomics-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text .apexcharts-tooltip-y-group .apexcharts-tooltip-text-y-value { font-weight: 500; } .controller-ergonomics-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text .apexcharts-tooltip-info p { margin: 0; font-size: 12px; opacity: 0.8; line-height: 1.3; word-wrap: break-word; white-space: normal; } .dark-mode .apexcharts-tooltip { border: 0 !important; } .dark-mode .controller-ergonomics-tooltip { background-color: rgb(var(--color-extra-navy-dash3-900)); } .dark-mode .controller-ergonomics-tooltip .apexcharts-tooltip-title { color: rgb(var(--color-extra-lilac-dash3-800)); background-color: rgba(var(--color-gray-700), 0.5) !important; border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important; } .dark-mode .controller-ergonomics-tooltip .apexcharts-tooltip-text { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .controller-ergonomics-tooltip .apexcharts-tooltip-text .apexcharts-tooltip-text-y-value { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .controller-ergonomics-tooltip .apexcharts-tooltip-text .apexcharts-tooltip-info p { color: rgba(var(--color-gray-300), 0.8); }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .DonutChart { display: flex; justify-content: center; flex-direction: column; } .DonutChart__container { width: 100%; max-height: 300px; } .DonutChart__empty { display: flex; align-items: center; justify-content: center; min-height: 200px; } .DonutChart__empty-message { color: #959ba4; font-family: "Onest", sans-serif; font-size: 14px; text-align: center; } .DonutChart .apexcharts-canvas { width: 100%; } .DonutChart .apexcharts-legend-text { color: rgb(var(--color-extra-midnight-dash3-800)) !important; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } .Analysis__chartCanvas .DonutChart__container { max-height: 500px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DonutPercentages__svg, .DonutPercentages svg { shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); will-change: transform; } .DonutPercentages__donut { fill: currentColor; } .DonutPercentages__text { color: rgb(var(--color-title-dash3)); font-family: "Onest"; font-weight: 500; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .DonutPercentages__background { fill: rgb(var(--color-gray-200)); fill-rule: evenodd; shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .DonutPercentages__foreground { fill: currentColor; fill-rule: evenodd; shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .DonutPercentages--widget.DonutPercentages .DonutPercentages__donut { fill: rgb(var(--color-primary-500)); } .DonutPercentages--widget.DonutPercentages .DonutPercentages__foreground { fill: rgb(var(--color-primary-500)); } .dark-mode .DonutPercentages__text { color: rgb(var(--color-gray-300)); } .dark-mode .DonutPercentages__background { fill: rgb(var(--color-gray-700)); } .dark-mode .DonutPercentages--widget.DonutPercentages .DonutPercentages__donut { fill: rgb(var(--color-primary-400)); } .dark-mode .DonutPercentages--widget.DonutPercentages .DonutPercentages__foreground { fill: rgb(var(--color-primary-400)); } /* Browser-specific optimizations for cross-browser SVG rendering */ @supports (-webkit-appearance: none) { .DonutPercentages__svg, .DonutPercentages svg { image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; opacity: 0.999; transform: translateZ(0) scale(1.0001); } .DonutPercentages__background, .DonutPercentages__foreground { shape-rendering: geometricPrecision; -webkit-font-smoothing: subpixel-antialiased; } } /* Firefox-specific optimizations for smooth arcs */ @supports (-moz-appearance: none) { .DonutPercentages__svg, .DonutPercentages svg { shape-rendering: geometricPrecision; -moz-osx-font-smoothing: grayscale; } .DonutPercentages__background, .DonutPercentages__foreground { shape-rendering: geometricPrecision; } } /* Fallback for older browsers or unsupported features */ @supports not ((-webkit-appearance: none) or (-moz-appearance: none)) { .DonutPercentages__svg, .DonutPercentages svg { shape-rendering: auto; image-rendering: auto; } .DonutPercentages__background, .DonutPercentages__foreground { shape-rendering: auto; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ObjectiveWidget__content { display: flex; flex-direction: column; gap: 1.4rem; min-height: 350px; width: 100%; } .ObjectiveWidget__chart-container { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 100px; } .ObjectiveWidget__chart-container .DonutPercentages .DonutPercentages__text { color: black; font-weight: 600; } .ObjectiveWidget__donut__color { color: rgb(var(--color-electric-purple-500)); } .ObjectiveWidget__stats { display: flex; justify-content: center; align-items: flex-end; gap: 0.2rem; } .ObjectiveWidget__completion-text { font-size: 0.9rem; color: rgb(var(--color-gray-600)); margin: 0; line-height: 1.4; } .ObjectiveWidget__link { font-size: 0.9rem; padding: 4px 0; color: rgb(var(--color-electric-purple-500)); font-weight: bold; cursor: pointer; display: inline-block; } .ObjectiveWidget__link:hover { color: rgb(var(--color-sky-blue-600)); } .ObjectiveWidget__link--disabled { color: rgb(var(--color-gray-400)); } .ObjectiveWidget__link--disabled:hover { color: rgb(var(--color-gray-400)); cursor: not-allowed; } .ObjectiveWidget__error { padding: 16px; text-align: center; color: var(--error-color, #dc3545); } .ObjectiveWidget__error h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; } .ObjectiveWidget__error p { margin: 0; font-size: 14px; color: var(--text-secondary, #666); } .ObjectiveWidget__warning-icon { font-size: 16px; cursor: help; opacity: 0.8; transition: opacity 0.2s ease; } .ObjectiveWidget__warning-icon:hover { opacity: 1; } @media (max-width: 768px) { .ObjectiveWidget__content { padding: 12px; gap: 12px; min-height: 180px; } .ObjectiveWidget__completion-text { font-size: 13px; } .ObjectiveWidget__view-details { font-size: 13px; } .ObjectiveWidget__chart-container { min-height: 80px; } } .dark-mode .ObjectiveWidget__chart-container .DonutPercentages .DonutPercentages__text { color: white; } .dark-mode .ObjectiveWidget__link { color: rgb(var(--color-electric-purple-500)); } .dark-mode .ObjectiveWidget__link:hover { color: rgb(var(--color-sky-blue-600)); } .dark-mode .ObjectiveWidget__link--disabled { color: rgb(var(--color-gray-400)); } .dark-mode .ObjectiveWidget__link--disabled:hover { color: rgb(var(--color-gray-400)); cursor: not-allowed; } .ObjectiveWidget.is-loading .ObjectiveWidget__content { opacity: 0.6; pointer-events: none; } .ObjectiveWidget.is-empty .ObjectiveWidget__content { justify-content: center; align-items: center; color: var(--text-secondary, #666); font-style: italic; } .ObjectiveWidget.is-edit-mode__content { border: 2px dashed var(--border-edit, #007bff); border-radius: 4px; background-color: var(--bg-edit, rgba(0, 123, 255, 0.05)); }/* stylelint-disable block-no-empty */ /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CombinedActiveEntityWidget { min-height: 400px; /* Override hardcoded width: 100% inline style on __left so button groups have room */ } .CombinedActiveEntityWidget .DashboardCard-dash3__header__left { width: auto !important; flex: 1 1 auto; min-width: 0; } .CombinedActiveEntityWidget__header-controls { display: flex; gap: 8px; align-items: center; } .CombinedActiveEntityWidget { /* Left panel shrinks to fit-content, chart fills remaining space */ } .CombinedActiveEntityWidget .DashboardCard-dash3__content__score__container { align-items: center; gap: 1.5rem; } .CombinedActiveEntityWidget .DashboardCard-dash3__content__score:first-child { width: fit-content; flex: 0 0 auto; min-width: unset; } .CombinedActiveEntityWidget .DashboardCard-dash3__content__score:last-child { flex: 1 1 auto; width: auto; min-width: 0; }.ImplementationHealth { display: flex; flex-wrap: wrap; padding: 8px 0; } .ImplementationHealth .IllustrationFigure-dash3 { flex: 0 0 calc(33.33% - 16px); margin: 8px; max-width: none; } .ImplementationHealth .IllustrationFigure-dash3 .IllustrationFigure-dash3__illustration__text { font-size: 14px; margin: 8px 0; } .ImplementationHealth .HeroFigure-dash3 { font-size: 32px; line-height: 32px; margin: 8px 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .RetentionTable-dash3 { font-family: "Onest"; min-width: 60%; height: 100%; padding: 10px; } .RetentionTable-dash3 table { border-collapse: separate; border-spacing: 3px; } .RetentionTable-dash3 table th { color: rgb(var(--color-extra-navy-dash3-900)); font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; padding: 0 10px 20px 10px; margin: 2px; text-align: center; } .RetentionTable-dash3 table td { color: rgb(var(--color-title-dash3)); font-size: 14px; font-weight: 400; line-height: 30px; padding: 0; text-align: center; min-width: 50px; }.Retention-dash3 ~ .react-resizable-handle { display: none; }/* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } .TextWidget-dash3.DashboardCard-dash3 { min-height: 400px; } .TextWidget-dash3.DashboardCard-dash3__body { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .TextWidget-dash3.DashboardCard-dash3__body:hover { scrollbar-color: #808080 transparent; } .TextWidget-dash3.DashboardCard-dash3__body::-webkit-scrollbar { background-color: transparent; width: 7px; } .TextWidget-dash3.DashboardCard-dash3__body::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .TextWidget-dash3.DashboardCard-dash3__body::-webkit-scrollbar-button { display: none; } .TextWidget-dash3.DashboardCard-dash3__body { flex-direction: row; align-items: flex-start; justify-content: flex-start; max-height: 280px; overflow: auto; } .TextWidget-dash3.DashboardCard-dash3__content { flex-direction: row; align-items: flex-start; justify-content: flex-start; } .TextWidget-dash3.DashboardCard-dash3__content__score { align-items: flex-start; } .TextWidget-dash3__content { white-space: break-spaces; text-align: left; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .data-table { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; font-family: "Onest"; font-size: inherit; color: rgb(var(--color-gray-800)); } .data-table__main { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; } .data-table__toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 4px 10px; flex-wrap: wrap; } .data-table__global-filter { min-width: 200px; max-width: 320px; } .data-table__truncated-text { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .data-table__body { position: relative; flex: 1; min-height: 0; overflow: hidden; } .data-table__scroll-container { position: relative; overflow: auto; height: 100%; } .data-table thead { position: sticky; top: 0; z-index: 1; background-color: var(--mantine-color-body); } .data-table thead tr { border-bottom: none; } .data-table thead th { color: rgb(var(--color-title-dash3)); font-weight: 600; font-size: 15px; padding: 8px 6px; min-width: 60px; white-space: nowrap; user-select: none; border-bottom: 2px solid rgb(var(--color-gray-600)); } .data-table thead th[style*="cursor: pointer"]:hover { color: rgb(var(--color-primary-500)); } .data-table table { table-layout: auto; width: max-content; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; font-size: inherit; } .data-table--locked table { table-layout: fixed; width: auto; min-width: 0; max-width: none; } .data-table table tfoot tr { border-top: 2px solid rgb(var(--color-gray-300)); } .data-table table tfoot td { font-weight: 600; padding: 6px 6px; } .data-table table tbody tr { background-color: transparent; border-bottom: 1px solid rgb(var(--color-gray-300)); transition: 0.2s all; } .data-table table tbody tr:hover { background-color: rgb(var(--color-gray-100)); color: rgb(var(--color-extra-midnight-dash3-400)); } .data-table table tbody tr:last-child { border-bottom: none; } .data-table table tbody td { padding: 6px 6px; min-width: 60px; white-space: nowrap; } .data-table__fade { position: absolute; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.15s ease; } .data-table__fade[data-visible=true] { opacity: 1; } .data-table__fade--top, .data-table__fade--bottom { left: 0; right: 0; height: 32px; } .data-table__fade--left, .data-table__fade--right { top: 0; bottom: 0; width: 50px; } .data-table__fade--top { top: 0; background: linear-gradient(to bottom, var(--mantine-color-body) 0%, transparent 100%); } .data-table__fade--bottom { bottom: 0; background: linear-gradient(to top, var(--mantine-color-body) 0%, transparent 100%); } .data-table__fade--left { left: 0; background: linear-gradient(to right, var(--mantine-color-body) 0%, transparent 100%); } .data-table__fade--right { right: 0; background: linear-gradient(to left, var(--mantine-color-body) 0%, transparent 100%); } .data-table__loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(var(--color-white), 0.45); pointer-events: none; z-index: 3; } .data-table__pagination { display: flex; justify-content: center; align-items: center; padding: 2px 4px 4px; gap: 8px; font-size: 11px; font-weight: 400; margin-top: auto; margin-bottom: 4px; } .data-table__pagination-range { color: rgb(var(--color-gray-700)); } .data-table__pagination-size { min-width: 72px; } .data-table__pagination-size .ButtonGroup__button { font-size: inherit; font-weight: inherit; } .data-table__pagination-list { margin: 0; padding: 0; display: flex; justify-content: center; text-decoration: none; } .data-table__pagination-list li { margin: 0 1px; list-style-type: none; } .data-table__pagination-list li a { color: rgb(var(--color-gray-800)); padding: 5px 8px; letter-spacing: 0.03em; font-size: inherit; font-weight: inherit; user-select: none; cursor: pointer; } .data-table__pagination-list li:hover { cursor: pointer; } .data-table__pagination-list .active a { background: rgba(var(--color-soft-purple-600), 0.12); border-radius: 5px; color: rgba(var(--color-soft-purple-600), 0.7); font-weight: 550; } .data-table__pagination-list .break { cursor: default !important; } .data-table--fill-container { overflow: hidden; } .data-table--fill-container .data-table__scroll-container { overflow-y: auto !important; } .data-table--fill-width .data-table__main { padding: 0 10px; } .data-table--fill-width table { width: 100%; max-width: none; } .data-table--fit-content table { width: auto; height: auto; min-width: 0; margin: 0 auto auto; } .data-table--fit-content table thead th, .data-table--fit-content table tbody td, .data-table--fit-content table tfoot td { max-width: 320px; } .data-table--center-cells table thead th, .data-table--center-cells table tbody td, .data-table--center-cells table tfoot td { text-align: center; padding-left: 3px; padding-right: 3px; } .dark-mode .data-table { color: rgb(var(--color-gray-200)); } .dark-mode .data-table thead th { color: rgb(var(--color-gray-200)); border-bottom-color: rgb(var(--color-gray-600)); } .dark-mode .data-table thead th[style*="cursor: pointer"]:hover { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .data-table table tfoot tr { border-top-color: rgb(var(--color-gray-600)); } .dark-mode .data-table table tbody tr { border-bottom-color: rgb(var(--color-gray-600)); } .dark-mode .data-table table tbody tr:hover { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .data-table__fade--top { background: linear-gradient(to bottom, rgb(var(--color-gray-900)) 0%, transparent 100%); } .dark-mode .data-table__fade--bottom { background: linear-gradient(to top, rgb(var(--color-gray-900)) 0%, transparent 100%); } .dark-mode .data-table__fade--left { background: linear-gradient(to right, rgb(var(--color-gray-900)) 0%, transparent 100%); } .dark-mode .data-table__fade--right { background: linear-gradient(to left, rgb(var(--color-gray-900)) 0%, transparent 100%); } .dark-mode .data-table__loading-overlay { background: rgba(var(--color-gray-900), 0.45); } .dark-mode .data-table__pagination-range { color: rgb(var(--color-gray-400)); } .dark-mode .data-table__pagination-list li a { color: rgb(var(--color-white)); } .dark-mode .data-table__pagination-list .active a { background: rgba(var(--color-white), 0.15); color: rgb(var(--color-primary-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .ToggleButton__label, .ToggleButton__slider { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ToggleButton { display: flex; align-items: center; max-width: 350px; } .ToggleButton--loading { pointer-events: none; } .ToggleButton--disabled { opacity: 0.5; } .ToggleButton__label { padding-left: 0; font-weight: 700; font-size: 15px; color: rgb(var(--color-extra-navy-dash3-900)); } .ToggleButton__sliderContainer { display: inline-block; box-sizing: border-box; width: 39px; height: 22px; border-radius: 30px; position: relative; overflow: hidden; background: transparent; border: 1px solid rgb(var(--color-extra-violet-dash3-900)); transition: 0.2s all; cursor: pointer; margin-left: 10px; } .ToggleButton__sliderContainer--noMargin { margin-left: 0; } .ToggleButton__sliderContainer--active { background-position-x: right; background: rgb(var(--color-extra-violet-dash3-900)); } .ToggleButton__sliderContainer--loading { position: relative; overflow: hidden; } .ToggleButton__sliderContainer--loading:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px); background-size: 800%; animation: buttonIsLoading 30s infinite; animation-timing-function: linear; } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } .ToggleButton__sliderContainer--disabled { cursor: not-allowed; } .ToggleButton__slider { border-radius: 20px; position: absolute; top: 3px; bottom: 3px; background: rgb(var(--color-extra-violet-dash3-900)); transition: 0.2s all; display: flex; align-items: center; justify-content: center; border: 3px solid transparent; } .ToggleButton__slider--right { left: 50%; right: 3px; background: rgb(var(--color-white)); } .ToggleButton__slider--left { left: 3px; right: 50%; } .dark-mode .ToggleButton__label { color: rgb(var(--color-gray-300)); } .dark-mode .ToggleButton__sliderContainer { border: 1px solid rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ToggleButton__sliderContainer--active { background-color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .ToggleButton__slider { background: rgb(var(--color-extra-lilac-dash3-800)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .table-chart { --rt-opacity: 1; position: relative; width: 100%; height: 100%; min-width: 0; font-family: "Onest"; font-size: 16px; color: rgb(var(--color-gray-800)); } .table-chart .data-table__scroll-container { overflow-x: hidden; overflow-y: hidden; } .table-chart[data-modifier-pressed=true] .data-table__scroll-container { overflow-x: auto; overflow-y: auto; } .table-chart--with-controls { display: flex; gap: 16px; align-items: flex-start; overflow: hidden; } .table-chart--with-controls > .data-table { flex: 1; min-width: 0; overflow: hidden; } .table-chart:not(.table-chart--fit-content) .data-table__pagination-size { min-width: unset; } .table-chart:not(.table-chart--fit-content) .data-table__pagination-size .ButtonGroup__button { padding: 0.25rem 0.5rem; } .table-chart--empty { display: flex; align-items: center; justify-content: center; min-height: 120px; color: rgb(var(--color-gray-700)); font-size: 16px; font-weight: 500; } .table-chart__controls { display: flex; flex-direction: column; gap: 8px; flex: 0 0 180px; height: 100%; padding: 0 12px; padding-bottom: 40px; overflow: hidden; font-family: "Onest"; font-size: 16px; color: rgb(var(--color-gray-800)); } .table-chart__controls .ToggleButton__label { font-size: 16px; } .table-chart__controls-label { padding: 8px 0; font-size: 16px; font-weight: 600; letter-spacing: 0.03em; color: rgb(var(--color-title-dash3)); display: flex; } .table-chart__controls-bulk { display: flex; flex-direction: column; gap: 6px; } .table-chart__controls-bulk .checkboxInput__label--label { font-size: 16px; } .table-chart__controls-checkboxes-wrapper { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .table-chart__controls-checkboxes-wrapper .checkboxInput__label--label { font-size: 16px; } .table-chart__controls-checkboxes { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; } .table-chart__controls-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 32px; background: linear-gradient(to bottom, transparent, rgba(var(--color-white), 0.95)); pointer-events: none; z-index: 1; } .table-chart__scrollHint { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: rgba(var(--color-gray-600), 0.7); background: rgba(var(--color-white), 0.9); padding: 4px 8px; border-radius: 4px; font-family: "Onest"; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; } .dark-mode .table-chart__scrollHint { color: rgba(var(--color-gray-300), 0.8); background: rgba(var(--color-gray-800), 0.9); } .table-chart:hover .table-chart__scrollHint { opacity: 1; } .dark-mode .table-chart { color: rgb(var(--color-gray-200)); } .dark-mode .table-chart thead { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .table-chart--empty { color: rgba(var(--color-white), 0.5); } .dark-mode .table-chart__controls { color: rgb(var(--color-gray-200)); } .dark-mode .table-chart__controls-label { color: rgb(var(--color-gray-300)); font-size: 15px; } .dark-mode .table-chart__controls-fade { background: linear-gradient(to bottom, transparent, rgba(var(--color-gray-900), 0.95)); } .dark-mode .DashboardCard-dash3 .table-chart thead { background: linear-gradient(rgba(var(--color-white), 0.1), rgba(var(--color-white), 0.1)), rgb(var(--color-extra-midnight-dash3-900)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ScatterChart { position: relative; display: flex; justify-content: flex-start; width: 100%; } .ScatterChart__noData { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; font-size: 1.5rem; } .ScatterChart__noData__text { border: 1px solid rgb(var(--color-gray-600)); padding: 12px 30px; border-radius: 4px; background-color: rgba(var(--color-soft-purple-600), 0.3); color: rgb(var(--color-soft-purple-600)); font-size: 17px; } .ScatterChart__zoomHint { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: rgba(var(--color-gray-600), 0.7); background: rgba(var(--color-white), 0.9); padding: 4px 8px; border-radius: 4px; font-family: "Onest"; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 10; } .ScatterChart:hover .ScatterChart__zoomHint { opacity: 1; } .ScatterChart .apexcharts-canvas { width: 100%; } .ScatterChart .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-midnight-dash3-900)); } .ScatterChart .apexcharts-yaxis text { fill: rgb(var(--color-extra-midnight-dash3-900)); } .ScatterChart .apexcharts-legend-series { color: rgb(var(--color-extra-midnight-dash3-900)) !important; } .ScatterChart .apexcharts-toolbar { z-index: 0 !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WidgetPreviewCard { display: flex; flex-direction: column; width: 100%; border: 2px solid rgb(var(--color-gray-200)); border-radius: 8px; background: rgb(var(--color-white)); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; padding: 0; text-align: left; position: relative; } .dark-mode .WidgetPreviewCard { background: transparent; border-color: rgba(242, 240, 240, 0.15); } .WidgetPreviewCard:hover:not(.WidgetPreviewCard--selected):not(.WidgetPreviewCard--disabled) { border-color: rgba(var(--color-electric-purple-500), 0.4); box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); } .dark-mode .WidgetPreviewCard:hover:not(.WidgetPreviewCard--selected):not(.WidgetPreviewCard--disabled) { border-color: rgba(var(--color-electric-purple-500), 0.4); } .WidgetPreviewCard--selected { border-color: rgb(var(--color-electric-purple-500)); box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); } .dark-mode .WidgetPreviewCard--selected { border-color: rgb(var(--color-electric-purple-500)); } .WidgetPreviewCard--disabled { opacity: 0.45; cursor: not-allowed; } .WidgetPreviewCard__preview { width: 100%; height: 260px; overflow: hidden; border-radius: 6px 6px 0 0; position: relative; } .WidgetPreviewCard__preview-scaler { position: absolute; top: 0; left: 0; transform: scale(0.7); transform-origin: top left; pointer-events: none; } .WidgetPreviewCard__preview-scaler .DashboardCard-dash3 { min-height: 380px; } .WidgetPreviewCard__preview-scaler--span-1 { width: 520px; height: 100%; } .WidgetPreviewCard__preview-scaler--span-2 { width: 1044px; } .WidgetPreviewCard__preview-scaler--span-3 { width: 1583px; } .WidgetPreviewCard__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; inset: 0; background: rgb(var(--color-gray-100)); } .dark-mode .WidgetPreviewCard__placeholder { background: rgb(var(--color-gray-800)); } .WidgetPreviewCard__chart-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; background: rgb(var(--color-gray-200)); font-family: "Onest"; font-size: 11px; font-weight: 600; color: rgb(var(--color-gray-600)); text-transform: uppercase; letter-spacing: 0.5px; } .dark-mode .WidgetPreviewCard__chart-badge { background: rgb(var(--color-gray-700)); color: rgb(var(--color-gray-400)); } .WidgetPreviewCard__label { padding: 10px 12px; font-family: "Onest"; font-size: 13px; font-weight: 600; color: rgb(var(--color-extra-navy-dash3-900)); text-align: center; border-top: 1px solid rgb(var(--color-gray-100)); display: flex; align-items: center; justify-content: center; gap: 6px; } .dark-mode .WidgetPreviewCard__label { color: rgb(var(--color-white)); border-top-color: rgba(242, 240, 240, 0.15); } .WidgetPreviewCard__instance-count { display: inline-block; padding: 2px 6px; border-radius: 10px; background: rgb(var(--color-electric-purple-500)); color: rgb(var(--color-white)); font-size: 14px; font-weight: 600; letter-spacing: 0.3px; } .WidgetPreviewCard__toolbar { position: absolute; top: 0.25rem; right: 0.25rem; z-index: 2; display: flex; align-items: center; gap: 0.25rem; padding: 3px; border-radius: 8px; } .WidgetPreviewCard__instance-config { position: absolute; top: 190px; left: 0; right: 0; z-index: 1; padding: 6px 12px; } .WidgetPreviewCard__instance-config::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.5) 16px, rgba(255, 255, 255, 0.95) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dark-mode .WidgetPreviewCard__instance-config::before { background: linear-gradient(to bottom, rgba(20, 22, 28, 0.025) 0%, rgba(20, 22, 28, 0.3) 16px, rgba(20, 22, 28, 0.92) 100%); } .WidgetPreviewCard__instance-config .NiceDropdownDash3__inputlabel { font-size: 11px; line-height: 13px; margin-bottom: 2px; letter-spacing: 0.4px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WidgetConfigPopover { display: inline-flex; } .WidgetConfigPopover__trigger { cursor: pointer; } .WidgetConfigPopover__body { display: flex; flex-direction: column; min-width: 100%; } .WidgetConfigPopover__section { display: flex; flex-direction: column; gap: 10px; } .WidgetConfigPopover__section + .WidgetConfigPopover__section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(var(--color-gray-200)); } .dark-mode .WidgetConfigPopover__section + .WidgetConfigPopover__section { border-top-color: rgb(var(--color-gray-700)); } .WidgetConfigPopover__section-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .WidgetConfigPopover__instance-label { font-family: "Onest"; font-size: 16px; font-weight: 600; margin-bottom: 0.5rem; color: rgb(var(--color-electric-purple-500)); } .WidgetConfigPopover__remove-btn { min-height: 0 !important; min-width: 0 !important; padding: 0 !important; background-color: transparent; color: rgb(var(--color-extra-red-500)); display: inline-flex; align-items: center; justify-content: flex-end; line-height: 1; transition: color 0.15s ease; } .WidgetConfigPopover__remove-btn:hover, .WidgetConfigPopover__remove-btn:focus-visible { background-color: transparent; color: rgb(var(--color-extra-red-700)); } .dark-mode .WidgetConfigPopover__remove-btn { color: rgb(var(--color-extra-red-400)); } .dark-mode .WidgetConfigPopover__remove-btn:hover, .dark-mode .WidgetConfigPopover__remove-btn:focus-visible { color: rgb(var(--color-extra-red-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WidgetGrid { flex: 1; padding: 24px; overflow-y: auto; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .WidgetGrid:hover { scrollbar-color: #808080 transparent; } .WidgetGrid::-webkit-scrollbar { background-color: transparent; width: 7px; } .WidgetGrid::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .WidgetGrid::-webkit-scrollbar-button { display: none; } .WidgetGrid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .WidgetGrid__cell--span-2 { grid-column: span 2; } .WidgetGrid__cell--span-3 { grid-column: span 3; } .WidgetGrid__empty { display: flex; align-items: center; justify-content: center; height: 200px; font-family: "Onest"; font-size: 14px; color: rgb(var(--color-gray-500)); } .dark-mode .WidgetGrid__empty { color: rgb(var(--color-gray-400)); } .WidgetGrid__duplicate-button { cursor: pointer; } .WidgetGrid__warning { background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px 16px; margin: 0 0 16px; color: #856404; font-size: 14px; line-height: 1.4; } .dark-mode .WidgetGrid__warning { background-color: #3d3d1a; border-color: #4d4d00; color: #ffeb3b; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WidgetSelectorModal__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; border-top: 1px solid rgb(var(--color-gray-200)); flex-shrink: 0; } .dark-mode .WidgetSelectorModal__footer { border-top-color: rgb(var(--color-gray-700)); } .WidgetSelectorModal__disclaimer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgb(var(--color-electric-purple-500)); border-radius: 4px; font-family: "Onest"; font-size: 14px; line-height: 1.2; color: rgb(var(--color-electric-purple-500)); } .WidgetSelectorModal__disclaimer .Icon { color: rgb(var(--color-electric-purple-500)); font-size: 14px; } .dark-mode .WidgetSelectorModal__disclaimer { border-color: rgb(var(--color-electric-purple-400)); color: rgb(var(--color-electric-purple-400)); } .dark-mode .WidgetSelectorModal__disclaimer .Icon { color: rgb(var(--color-electric-purple-400)); } .WidgetSelectorModal__widget-count { font-family: "Onest"; font-size: 14px; font-weight: 500; color: rgb(var(--color-title-dash3)); } .dark-mode .WidgetSelectorModal__widget-count { color: rgb(var(--color-white)); } .WidgetSelectorModal__footer-actions { display: flex; align-items: center; gap: 12px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NiceModal.WidgetSelectorModal .NiceModal__container { width: calc(100vw - 80px); height: calc(100vh - 80px); max-width: 1400px; max-height: 900px; border-radius: 12px; } .NiceModal.WidgetSelectorModal .NiceModal__contents { padding: 0; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; } .NiceModal.WidgetSelectorModal .render-elements { display: flex; flex-direction: column; flex: 1; min-height: 0; } .NiceModal.WidgetSelectorModal .WidgetSelectorModal__body { display: flex; flex: 1; overflow: hidden; min-height: 0; }.TestModeToggle-dash3 { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-left: 0.5rem; margin-right: 12px; } .TestModeToggle-dash3__toggleButton { display: flex; justify-content: space-between; width: 100%; } .TestModeToggle-dash3 .TestModeToggle-dash3__helpIcon { font-size: 15px; } .ToggleButtonDash3__label { font-size: 15px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .EntitySidebar { display: flex; flex-direction: column; min-height: 0; padding: 10px; /* ─── Section Header ────────────────────────────────────────────────── */ } .EntitySidebar__header { display: flex; justify-content: space-between; align-items: center; padding-right: 5px; cursor: pointer; } .EntitySidebar__headerTitle { display: flex; align-items: center; padding: 10px 7px; font-size: 15px; font-weight: 700; } .EntitySidebar__headerTitle:hover { color: rgba(var(--color-soft-purple-600)); } .EntitySidebar__headerTitle__icon { margin-right: 12px; font-size: 16px; } .EntitySidebar__headerActions { display: flex; align-items: center; gap: 4px; } .EntitySidebar__headerIcon { padding: 4px; border-radius: 4px; cursor: pointer; } .EntitySidebar__headerIcon:hover { color: rgba(var(--color-extra-indigo-dash3-500)); } .EntitySidebar { /* ─── Search Bar ────────────────────────────────────────────────────── */ } .EntitySidebar__searchbar { margin-left: 35px; padding-right: 4px; margin-top: 0.25rem; margin-bottom: 0.5rem; } .EntitySidebar__searchbar .InputField__input { font-size: 14px !important; border-color: rgb(var(--color-gray-500)) !important; min-height: 32px; padding: 0px 12px; } .EntitySidebar__searchbar .InputField__input::placeholder { font-size: 14px !important; } .EntitySidebar { /* ─── List ──────────────────────────────────────────────────────────── */ } .EntitySidebar__list { min-height: 0; } .EntitySidebar { /* ─── Widget Item ───────────────────────────────────────────────────── */ } .EntitySidebar__entity { position: relative; padding: 8px 7px 8px 14px; font-size: 14px; font-weight: 400; border-radius: 3px; margin: 2px; cursor: pointer; display: flex; align-items: center; gap: 6px; word-wrap: anywhere; line-height: 16px; user-select: none; } .EntitySidebar__entity:hover { background: rgba(var(--color-soft-purple-600), 0.07); border-radius: 5px; color: rgba(var(--color-soft-purple-600)); } .EntitySidebar__entity:hover .EntitySidebar__entity__grip, .EntitySidebar__entity:hover .EntitySidebar__entity__edit { opacity: 1; } .EntitySidebar__entity--active { background: rgba(var(--color-soft-purple-600), 0.2); border-radius: 5px; color: rgba(var(--color-soft-purple-600)); font-weight: 550; } .EntitySidebar__entity--active:hover { background: rgba(var(--color-soft-purple-600), 0.2); } .EntitySidebar__entity--overlay { background: rgba(var(--color-soft-purple-600), 0.15); border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 8px 14px; font-size: 14px; transition: margin-left 0.15s ease; } .EntitySidebar__entity--nested { padding-left: 34px; } .EntitySidebar__entity--inFolder { margin-left: 38px; } .EntitySidebar__entity__grip { opacity: 0; cursor: grab; color: rgb(var(--color-gray-500)); flex-shrink: 0; display: flex; align-items: center; transition: opacity 0.15s; } .EntitySidebar__entity__grip:active { cursor: grabbing; } .EntitySidebar__entity__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .EntitySidebar__entity__edit { opacity: 0; flex-shrink: 0; transition: opacity 0.15s; } .EntitySidebar__entity__edit svg { margin: 0; } .EntitySidebar { /* ─── Folder Group (wrapper for folder + children + spacer) ─────────── */ } .EntitySidebar__folderGroup { border-radius: 5px; } .EntitySidebar { /* ─── Folder ────────────────────────────────────────────────────────── */ } .EntitySidebar__folder { margin: 2px 0; border-radius: 5px; transition: background-color 0.15s; } .EntitySidebar__folder--dragOver { background: rgba(var(--color-soft-purple-600), 0.1); } .EntitySidebar__folder--overlay { background: rgba(var(--color-soft-purple-600), 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-radius: 5px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .EntitySidebar__folder__header { display: flex; align-items: center; padding: 6px 7px; gap: 6px; border-radius: 5px; cursor: pointer; user-select: none; font-size: 14px; font-weight: 600; } .EntitySidebar__folder__header:hover { background: rgba(var(--color-soft-purple-600), 0.05); } .EntitySidebar__folder__header:hover .EntitySidebar__folder__grip, .EntitySidebar__folder__header:hover .EntitySidebar__folder__actions { opacity: 1; } .EntitySidebar__folder__grip { opacity: 0; cursor: grab; color: rgb(var(--color-gray-500)); flex-shrink: 0; display: flex; align-items: center; transition: opacity 0.15s; } .EntitySidebar__folder__grip:active { cursor: grabbing; } .EntitySidebar__folder__chevron { flex-shrink: 0; display: flex; align-items: center; width: 14px; } .EntitySidebar__folder__icon { flex-shrink: 0; display: flex; align-items: center; color: rgb(var(--color-soft-purple-800)); } .dark-mode .EntitySidebar__folder__icon { color: rgb(var(--color-soft-purple-100)); } .EntitySidebar__folder__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .EntitySidebar__folder__count { margin-left: 4px; font-weight: 400; font-size: 12px; color: rgb(var(--color-gray-500)); } .EntitySidebar__folder__renameInput { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; padding: 2px 6px; border: 1px solid rgba(var(--color-soft-purple-600), 0.4); border-radius: 3px; background: transparent; color: inherit; outline: none; } .EntitySidebar__folder__renameInput:focus { border-color: rgba(var(--color-soft-purple-600), 0.8); } .EntitySidebar__folder__actions { opacity: 0; flex-shrink: 0; position: relative; display: flex; align-items: center; transition: opacity 0.15s; cursor: pointer; } .EntitySidebar__folder__actions:hover { color: rgba(var(--color-soft-purple-600)); } .EntitySidebar__folder__contents { padding-left: 20px; } .EntitySidebar__folder__empty { padding: 8px 14px; font-size: 12px; color: rgb(var(--color-gray-500)); font-style: italic; } .EntitySidebar { /* ─── Folder End Spacer ─────────────────────────────────────────────── */ } .EntitySidebar__folderEnd { height: 6px; } .EntitySidebar__folderEnd--empty { height: 32px; } .dark-mode .EntitySidebar { color: rgb(var(--color-white)); } .EntitySidebar { /* ─── New Folder Input ──────────────────────────────────────────────── */ } .EntitySidebar__newFolder { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 2px 0; } .EntitySidebar__newFolder__input { flex: 1; font-size: 14px; padding: 4px 8px; border: 1px solid rgba(var(--color-soft-purple-600), 0.4); border-radius: 4px; background: transparent; color: inherit; outline: none; } .EntitySidebar__newFolder__input:focus { border-color: rgba(var(--color-soft-purple-600), 0.8); } .EntitySidebar__newFolder__input::placeholder { font-style: italic; color: rgb(var(--color-gray-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .InlineAlert { padding: 15px; border-radius: 5px; position: relative; margin-bottom: 1.5rem; background: rgb(var(--color-gray-200)); color: rgb(var(--color-gray-700)); } .InlineAlert--info { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 0.8); } .InlineAlert--success { background: rgb(var(--color-success-100)); color: rgb(var(--color-success-500)); } .InlineAlert--warning { background: rgb(var(--color-warning-100)); color: rgb(var(--color-warning-500)); } .InlineAlert--error { background: rgb(var(--color-error-100)); color: rgb(var(--color-error-500)); } .InlineAlert--hidden { display: none; } .InlineAlert--noMargin { margin-bottom: 0; } .InlineAlert__title { margin-bottom: 10px; text-transform: uppercase; font-weight: 700; font-size: 12px; } .InlineAlert__title--info { color: rgb(var(--color-extra-indigo-dash3-700)); } .InlineAlert__title--success { color: rgb(var(--color-success-600)); } .InlineAlert__title--warning { color: rgb(var(--color-warning-400)); } .InlineAlert__title--error { color: rgb(var(--color-error-400)); } .InlineAlert__subtitle { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: rgb(var(--color-gray-800)); } .InlineAlert__subtitle--info { color: rgb(var(--color-extra-indigo-dash3-700)); } .InlineAlert__subtitle--success { color: rgb(var(--color-success-600)); } .InlineAlert__subtitle--warning { color: rgb(var(--color-warning-600)); } .InlineAlert__subtitle--error { color: rgb(var(--color-error-500)); } .InlineAlert__text { line-height: 1.35em; } .InlineAlert__text--info { color: rgb(var(--color-extra-indigo-dash3-600)); } .InlineAlert__text--success { color: rgb(var(--color-success-600)); } .InlineAlert__text--warning { color: rgb(var(--color-warning-600)); } .InlineAlert__text--error { color: rgb(var(--color-error-500)); } .InlineAlert__dismissButton { cursor: pointer; padding: 5px; position: absolute; top: 5px; right: 5px; } .InlineAlert .code { margin: 0 -16px; } .InlineAlert .code .code__block { border-radius: 0; padding-left: 16px; padding-right: 16px; } .dark-mode .InlineAlert { background-color: rgba(var(--color-white), 0.1); color: rgb(var(--color-gray-300)); } .dark-mode .InlineAlert--info { color: rgb(var(--color-extra-indigo-dash3-300)); } .dark-mode .InlineAlert--success { color: rgb(var(--color-success-300)); } .dark-mode .InlineAlert--warning { color: rgb(var(--color-warning-300)); } .dark-mode .InlineAlert--error { color: rgb(var(--color-error-300)); } .dark-mode .InlineAlert__title { color: rgb(var(--color-gray-300)); } .dark-mode .InlineAlert__title--info { color: rgb(var(--color-extra-indigo-dash3-400)); } .dark-mode .InlineAlert__title--success { color: rgb(var(--color-success-400)); } .dark-mode .InlineAlert__title--warning { color: rgb(var(--color-warning-300)); } .dark-mode .InlineAlert__title--error { color: rgb(var(--color-error-300)); } .dark-mode .InlineAlert__subtitle { color: rgb(var(--color-gray-300)); } .dark-mode .InlineAlert__subtitle--info { color: rgb(var(--color-extra-indigo-dash3-300)); } .dark-mode .InlineAlert__subtitle--success { color: rgb(var(--color-success-300)); } .dark-mode .InlineAlert__subtitle--warning { color: rgb(var(--color-warning-300)); } .dark-mode .InlineAlert__subtitle--error { color: rgb(var(--color-error-300)); } .dark-mode .InlineAlert__text { color: rgb(var(--color-gray-300)); } .dark-mode .InlineAlert__text--info { color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .InlineAlert__text--success { color: rgb(var(--color-success-200)); } .dark-mode .InlineAlert__text--warning { color: rgb(var(--color-warning-300)); } .dark-mode .InlineAlert__text--error { color: rgb(var(--color-error-300)); }.logoDash3--left-edge { padding-left: 0; } .logoDash3--left-edge img { padding-left: 0; } .logoDash3__img { margin-top: 0.3rem; height: 3.5rem; } .logoDash3__img--padded { padding: 16px 0 15px 0; } .logoDash3__img--fluid { height: auto; min-width: 150px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ConfirmDeleteModal__message { color: rgb(var(--color-gray-800)); line-height: 18px; margin-bottom: 10px; } .ConfirmDeleteModal__message__wrapper { margin-bottom: 1.5rem; } .dark-mode .ConfirmDeleteModal__message { color: rgb(var(--color-gray-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .InviteMemberModal__item { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .InviteMemberModal__item--end { margin-bottom: 0; } .InviteMemberModal__role { display: flex; flex-direction: column; } .InviteMemberModal__role__name { font-weight: 600; } .InviteMemberModal__role__description { font-weight: 500; line-height: 20px; white-space: normal; } .InviteMemberModal__project { cursor: pointer; font-size: 16px; display: flex; flex-direction: row; align-items: center; padding: 12px 0; padding-left: 10px; border-radius: 5px; } .InviteMemberModal__project:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .InviteMemberModal__project__name { margin-left: 15px; line-height: 18px; } .InviteMemberModal__piiAccess { display: flex; flex-direction: row; padding-top: 5px; } .InviteMemberModal__piiAccess--textBox { margin-left: 10px; display: flex; flex-direction: column; font-family: "Onest"; color: rgb(var(--color-title-dash3)); } .InviteMemberModal__piiAccess--label { margin-top: 2px; font-weight: 600; } .InviteMemberModal__piiAccess--description { margin-top: 10px; font-size: 14px; white-space: normal; } .dark-mode .InviteMemberModal__project:hover { color: rgb(var(--color-gray-300)); background-color: rgba(var(--color-white), 0.1); } .dark-mode .InviteMemberModal__piiAccess--textBox { color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ThemeSelector { display: flex; flex-direction: column; gap: 8px; margin: 5px; padding: 5px 8px; } .ThemeSelector__buttonGroup { width: 100%; box-shadow: none; } .dark-mode .ThemeSelector__label { color: rgb(var(--color-extra-lilac-dash3-800)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .Well { border-radius: 5px; padding: 0.6rem 2.2rem 0.6rem 0.8rem; font-size: 16px; background: rgb(var(--color-gray-900)); color: rgb(var(--color-white)); position: relative; } .Well--code { font-family: "Source Code Pro", Courier New, Courier, monospace; letter-spacing: 1px; line-height: 20px; color: rgb(var(--color-extra-green-400)); margin-bottom: 8px; } .Well--isLoading:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px); background-size: 800%; animation: buttonIsLoading 60s infinite; animation-timing-function: linear; } .Well--isLoading { color: rgba(255, 255, 255, 0.7); } .Well--danger { background: rgb(var(--color-error-800)); color: rgb(var(--color-error-200)); } .Well--danger .CopyToClipboardButton { background: rgb(var(--color-error-700)); } .dark-mode .Well { background-color: rgba(var(--color-white), 0.1); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ApiKeyField__field { margin-bottom: 2rem; } .ApiKeyField__field__title { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 12px; } .ApiKeyField__gutter { padding: 0 2px; font-size: 15px; display: flex; justify-content: space-between; } .ApiKeyField__gutter__expiry { font-style: italic; color: rgb(var(--color-gray-600)); } .ApiKeyField__gutter__expiry--isExpired { color: rgb(var(--color-error-800)); } .ApiKeyField__gutter__button { color: rgb(var(--color-primary-600)); font-weight: 600; cursor: pointer; text-decoration: underline; } .ApiKeyField__gutter__button:hover { color: rgb(var(--color-primary-700)); } .ApiKeyField__gutter__deleteButton { font-weight: 600; margin-left: 15px; color: rgb(var(--color-error-600)); text-decoration: underline; cursor: pointer; } .ApiKeyField__gutter__deleteButton--confirm { font-weight: 600; margin-left: 15px; color: rgb(var(--color-error-600)); text-decoration: none; cursor: default; } .ApiKeyField__gutter__deleteButton__sub { font-weight: 600; cursor: pointer; margin: 0 4px; } .ApiKeyField__gutter__deleteButton__sub:hover { color: rgb(var(--color-error-700)); text-decoration: underline; } .ApiKeyField__gutter__deleteButton:hover { color: rgb(var(--color-error-700)); } .dark-mode .ApiKeyField__field__title { color: rgb(var(--color-gray-300)); } .dark-mode .ApiKeyField__gutter__expiry { color: rgb(var(--color-gray-400)); } .dark-mode .ApiKeyField__gutter__expiry--isExpired { color: rgb(var(--color-error-500)); } .dark-mode .ApiKeyField__gutter__button { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .ApiKeyField__gutter__button:hover { color: rgb(var(--color-extra-indigo-dash3-700)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .avatar-circle { background-color: rgb(var(--color-primary-500)); width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; color: rgb(var(--color-white)); } .avatar-circle--large { width: 120px; height: 120px; line-height: 120px; font-size: 30px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .navbarDash3 { z-index: 95; margin: 0; height: 65px; padding: 0 30px; display: flex; justify-content: space-between; } @media screen and (max-width: 1537px) { .navbarDash3 { padding: 0 1rem; } } .navbarDash3__container { width: 100%; } .navbarDash3__bg { background-color: rgb(var(--color-deep-navy-500)); } @media screen and (max-width: 769px) { .navbarDash3__logo { display: none; } } .navbarDash3__logo--clickable { cursor: pointer; } .navbarDash3__leftContainer { display: flex; align-items: center; } .navbarDash3__leftContainer__barMenu { display: none; } @media screen and (max-width: 1201px) { .navbarDash3__leftContainer__barMenu { display: flex; } } .navbarDash3__leftContainer__barMenu .Icon { color: rgb(var(--color-white)); margin-left: 1rem; } .navbarDash3__leftContainer__barMenu .NiceDropdownDash3__dropdown__content__groupList { padding: 0; overflow-y: hidden; } .navbarDash3__leftContainer__menu__tabs { display: flex; margin-left: 50px; } @media screen and (max-width: 1537px) { .navbarDash3__leftContainer__menu__tabs { margin-left: 1rem; font-size: 14px; } } @media screen and (max-width: 1201px) { .navbarDash3__leftContainer__menu__tabs { display: none; } } .navbarDash3__leftContainer__menu__tabs__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60px; margin: 0 1em; margin-bottom: -5px; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0.5px; list-style-type: none; border-bottom: 4px solid transparent; min-width: 75px; color: rgb(var(--color-white)); text-decoration: none; } .navbarDash3__leftContainer__menu__tabs__tab:hover { color: rgb(var(--color-extra-indigo-dash3-100)); } @media screen and (max-width: 1537px) { .navbarDash3__leftContainer__menu__tabs__tab { margin: 0 0.2rem -5px 0.2rem; } } .navbarDash3__leftContainer__menu__tabs__tab--active { border-bottom: 4px solid rgb(var(--color-white)); } .navbarDash3-right { display: flex; padding-right: 10px; align-items: center; } .navbarDash3-right__left { padding: 10px; } .navbarDash3-right__username { padding-left: 10px; } .navbarDash3-right__item { display: flex; justify-content: center; align-items: center; margin: 0 0.6rem; color: rgb(var(--color-white)); } @media screen and (max-width: 1537px) { .navbarDash3-right__item { margin: 0 0.35rem; } } .navbarDash3-right__button { background-color: rgba(255, 255, 255, 0.2); } .navbarDash3-right__button:hover { background-color: rgba(255, 255, 255, 0.3); } @media screen and (max-width: 1627px) { .navbarDash3-right__button { min-height: 2rem; min-width: 4.6rem; padding: 0.5rem 0.78rem; font-size: 0.85rem; line-height: 0.85rem; letter-spacing: 0.05em; } } .NavSidebar { box-sizing: border-box; display: flex; flex-direction: column; background-color: rgb(var(--color-extra-silver-dash3-900)); width: 20vw; max-width: 350px; min-width: 250px; height: 100%; color: rgb(var(--color-extra-navy-dash3-900)); } .NavSidebar__sections { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .NavSidebar__sections:hover { scrollbar-color: #808080 transparent; } .NavSidebar__sections::-webkit-scrollbar { background-color: transparent; width: 7px; } .NavSidebar__sections::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .NavSidebar__sections::-webkit-scrollbar-button { display: none; } .NavSidebar__sections { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding-top: 10px; } .NavSidebar__section { display: flex; flex-direction: column; min-height: 0; padding: 10px; } .NavSidebar__section::before { content: ""; display: block; height: 2px; } .NavSidebar__section:first-of-type { margin-top: 0; flex: 0 0 auto; } .NavSidebar__section:first-of-type::before { display: none; } .NavSidebar__section:last-of-type { flex: 1; } .NavSidebar__section--fade-enter { opacity: 0.01; height: 0; } .NavSidebar__section--fade-enter-active { opacity: 1; height: 45px; transition: all 500ms ease-in; } .NavSidebar__section--fade-exit { opacity: 1; height: 45px; } .NavSidebar__section--fade-exit-active { opacity: 0.01; height: 0; transition: all 500ms ease-in; } .NavSidebar__footer { margin: 10px; padding-top: 5px; border-top: 1px solid rgb(var(--color-gray-600)); } .NavSidebar__footer--temp { margin: 10px; padding-top: 1rem; border-top: 1px solid rgb(var(--color-gray-600)); } .NavSidebar__searchbar { margin-left: 35px; padding-right: 4px; margin-top: 0.25rem; margin-bottom: 0.5rem; } .NavSidebar__searchbar .InputField__input { font-size: 14px !important; border-color: rgb(var(--color-gray-500)) !important; min-height: 32px; padding: 0px 12px; } .NavSidebar__searchbar .InputField__input::placeholder { font-size: 14px !important; } .NavSidebar__testMode { width: 240px; display: flex; justify-content: space-between; padding: 10px; margin-bottom: 15px; } .NavSidebar__testMode__toggle { padding-right: 30px; width: 70%; } .NavSidebar__testMode .Icon { margin-top: 2px; } .NavSidebar__testMode .help-icon { font-size: 18px; } .NavSidebar__sortIcon { margin-top: 3px; margin-right: 5px; } .NavSidebar__sortIcon:hover { color: rgba(var(--color-extra-indigo-dash3-500)); } .NavSidebar__searchIcon { margin-top: 3px; margin-left: 5px; margin-right: 5px; width: 16px !important; } .NavSidebar__searchIcon:hover { color: rgba(var(--color-extra-indigo-dash3-500)); } .NavSidebar__sectionHeader { display: flex; justify-content: space-between; align-items: center; padding-right: 5px; cursor: pointer; } .NavSidebar__sectionHeader--disabled { opacity: 0.6; cursor: not-allowed; } .NavSidebar__sectionTitle { display: flex; align-items: center; padding: 10px 7px; font-size: 15px; font-weight: 700; } .NavSidebar__sectionTitle:hover { color: rgba(var(--color-soft-purple-600)); } .NavSidebar__sectionTitle__icons { display: flex; align-items: center; } .NavSidebar__sectionTitle__icon { margin-right: 12px; font-size: 16px; } .NavSidebar__groupList--collapsed { display: none; max-height: 0px; } .NavSidebar__item { position: relative; padding: 8px 7px 8px 40px; font-size: 14px; font-weight: 400; border-radius: 3px; margin: 3px 2px 3px 2px; cursor: pointer; display: flex; word-wrap: anywhere; line-height: 16px; } .NavSidebar__item:hover { background: rgba(var(--color-soft-purple-600), 0.07); border-radius: 5px; color: rgba(var(--color-soft-purple-600)); } .NavSidebar__item__defaultIcon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; } .NavSidebar__item__defaultIcon svg { margin: 0; } .NavSidebar__item__icon { margin-right: 8px; display: inline-block; width: 18px; height: 1em; align-items: center; } .NavSidebar__item--active { background: rgba(var(--color-soft-purple-600), 0.2); border-radius: 5px; color: rgba(var(--color-soft-purple-600)); font-weight: 550; } .NavSidebar__item--active:hover { background: rgba(var(--color-soft-purple-600), 0.2); border-radius: 5px; color: rgba(var(--color-soft-purple-600)); font-weight: 550; } .NavSidebar__item--disabled { opacity: 0.6; cursor: not-allowed; } .NavSidebar__item__iconButton svg { margin: 0; } .NavSidebar__item__newIcon { margin-left: auto; font-size: 10px; display: inline-block; margin-top: 2px; } .NavSidebar__child:first-of-type { margin-top: 10px; } .NavSidebar__child { padding: 7px 0 7px; color: rgb(var(--color-secondary-300)); font-weight: 400; } .NavSidebar__child--active { font-weight: 700; color: rgb(var(--color-secondary-600)); } .NavSidebar__child--active:hover { color: rgb(var(--color-secondary-600)); } .NavSidebar__child:hover { color: rgb(var(--color-secondary-300)); } .settingsMenu .ToggleButton { margin: 10px 10px 10px 0; } .settingsMenu .ToggleButton__label { font-size: 16px; line-height: 1.5em; font-weight: 500; margin-left: 12px; display: flex; align-items: center; } .settingsMenu__header { display: flex; flex-direction: row; justify-content: space-between; padding: 10px 0; gap: 0.5rem; } .settingsMenu__header__user { display: flex; flex-direction: column; justify-content: center; width: 80%; } .settingsMenu__header__user--name { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; color: rgb(var(--color-soft-purple-600)); margin-bottom: 5px; } .settingsMenu__header__user--role { font-size: 14px; font-weight: 500; letter-spacing: 0.5px; color: rgb(var(--color-gray-500)); } .projectsMenu__label { background: transparent !important; border: none; font-size: 15px; font-weight: 700; color: rgb(var(--color-white)) !important; } .projectsMenu__label:hover { background: rgba(255, 255, 255, 0.2) !important; } .projectsMenu__header { width: 100%; padding: 10px 0; font-size: 16px; line-height: 1.5em; display: flex; justify-content: center; color: rgb(var(--color-black)); text-align: center; } .projectsMenu__item { width: 100%; font-size: 14px; } .projectsMenu__empty { font-size: 15px; font-weight: 500; padding: 10px 7px; margin: 3px 5px; color: rgb(var(--color-gray-500)); display: flex; align-items: center; justify-content: space-between; } .projectsMenu__empty__add { font-size: 18px; color: rgb(var(--color-soft-purple-600)); } .projectsMenu__empty__add:hover { color: rgb(var(--color-primary-dash3-500)); } .projectsMenu .createProject__container { display: flex; justify-content: flex-start; color: rgb(var(--color-soft-purple-600)); width: 80%; padding: 10px 0; cursor: pointer; } .projectsMenu .createProject__container:hover { color: rgb(var(--color-primary-dash3-500)); } .projectsMenu .createProject__icon { width: 30px; font-size: 18px; } .projectsMenu .createProject__icon .createProjectIcon .svg-inline--fa.fa-w-16 { width: 2em; } .projectsMenu .createProject__text { font-weight: 600; font-size: 14px; } .dark-mode .settingsMenu__header__user--name { color: rgb(var(--color-gray-300)); } .dark-mode .projectsMenu__header span { color: rgb(var(--color-white)); } .dark-mode .projectsMenu__empty__add { color: rgb(var(--color-primary-300)); } .dark-mode .projectsMenu__empty__add:hover { color: rgb(var(--color-primary-500)); } .dark-mode .NavSidebar { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-white)); } .dark-mode .NavSidebar__footer { border-top: 1px solid rgb(var(--color-gray-500)); } .dark-mode .NavSidebar__item--active { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .NavSidebar__item:hover { color: rgb(var(--color-extra-violet-dash3-800)); } .dark-mode .NavSidebar__sectionTitle:hover { color: rgba(var(--color-extra-indigo-dash3-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .plan-expire-banner { padding: 0.4rem 0; background-color: rgb(var(--color-extra-violet-500)); width: 100%; display: flex; justify-content: center; align-items: center; } .plan-expire-banner--warning { background-color: rgb(var(--color-error-400)); } .plan-expire-banner .plan-expire-banner-text { color: white; font-size: 14px; line-height: 1rem; margin: 5px 10px 5px 0; text-align: center; } .plan-expire-banner .plan-expire-banner-text--bold { font-weight: bold; } .plan-expire-banner .plan-expire-banner-text--underlined { text-decoration: underline; } .plan-expire-banner-button { background-color: rgb(var(--color-extra-violet-600)); padding: 0.1rem 0.7rem; min-height: 1.5rem; font-size: 13px; } .plan-expire-banner-button:hover { background-color: rgb(var(--color-extra-violet-700)); } .plan-expire-banner-button--warning { background-color: transparent; border: 1px solid rgb(var(--color-white)) !important; } .plan-expire-banner-button--warning:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5) !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .usage-warning-banner { padding: 0.4rem 0; background-color: rgb(var(--color-extra-violet-500)); width: 100%; height: 38px; display: flex; justify-content: center; align-items: center; } .usage-warning-banner .button { background-color: rgb(var(--color-extra-violet-600)); padding: 0.1rem 0.7rem; min-height: 1.5rem; font-size: 13px; } .usage-warning-banner .button:hover { background-color: rgb(var(--color-extra-violet-700)); } .usage-warning-banner-text { color: white; font-size: 14px; line-height: 1em; margin-right: 10px; } /* ----------------------------------------------------------------------- * Command Palette – Styling * * The app ships an aggressive Meyer CSS reset (_reset.scss) that zeroes * margin / padding on almost every HTML element. Every spacing value * below is therefore set explicitly so nothing collapses. * ----------------------------------------------------------------------- */ /* ── Modal chrome ─────────────────────────────────────────────────────── */ .command-palette__modal { overflow: hidden !important; border: 1px solid var(--cp-border, #e0e0e0) !important; background: var(--cp-bg, #ffffff) !important; } .command-palette__body { padding: 0 !important; } /* ── Search bar ───────────────────────────────────────────────────────── */ .command-palette__search { padding: 4px 16px !important; border-bottom: 1px solid var(--cp-border, #e0e0e0); /* The Mantine TextInput wrapper */ } .command-palette__search .mantine-TextInput-wrapper { padding: 0 !important; } .command-palette__search { /* Left / right section containers (icon + ESC badge) */ } .command-palette__search .mantine-TextInput-section { display: flex !important; align-items: center !important; justify-content: center !important; color: var(--cp-placeholder, #999); } /* The actual element – must clear the left-section icon */ .command-palette__input { font-size: 16px !important; padding: 8px 0 8px 36px !important; margin: 0 !important; height: auto !important; } .command-palette__input::placeholder { color: var(--cp-placeholder, #999); } .command-palette__escape-hint { pointer-events: none; } /* ── Command list ─────────────────────────────────────────────────────── */ .command-palette__list { padding: 8px 0 !important; } .command-palette__group:not(:first-child) { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--cp-border, #e0e0e0); } .command-palette__group-label { padding: 6px 20px 6px !important; margin: 0 !important; letter-spacing: 0.05em; font-size: 11px !important; line-height: 1.4 !important; } /* ── Individual command row ────────────────────────────────────────────── */ .command-palette__item { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 10px 20px !important; margin: 0 !important; border-radius: 0 !important; cursor: pointer; box-sizing: border-box !important; transition: background-color 0.1s ease; } .command-palette__item:hover, .command-palette__item.command-palette__item--active { background: var(--cp-item-active-bg, #f5f5f5) !important; } .command-palette__icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; flex-shrink: 0 !important; border-radius: 6px !important; background: var(--cp-icon-bg, #f0f0f0) !important; color: var(--cp-icon-color, #555) !important; margin: 0 !important; padding: 0 !important; } .command-palette__hint { flex-shrink: 0 !important; margin-left: auto !important; padding-left: 16px !important; white-space: nowrap !important; } /* ── Footer ───────────────────────────────────────────────────────────── */ .command-palette__footer { padding: 10px 20px !important; border-top: 1px solid var(--cp-border, #e0e0e0); } .command-palette__footer kbd { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; padding: 2px 6px !important; line-height: 1.4 !important; } /* ── Dark-mode overrides ──────────────────────────────────────────────── */ .dark-mode .command-palette__modal { --cp-bg: #1a1b1e; --cp-border: #2c2e33; --cp-placeholder: #666; --cp-item-active-bg: #25262b; --cp-icon-bg: #25262b; --cp-icon-color: #c1c2c5; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CreateProjectModal__item { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .CreateProjectModal__item--end { margin-bottom: 0; } .CreateProjectModal__label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 15px; display: flex; align-items: center; } .CreateProjectModal__label--noMargin { margin-bottom: 0; } .CreateProjectModal__type { display: flex; flex-direction: column; } .CreateProjectModal__type__title { display: flex; flex-direction: row; align-items: center; } .CreateProjectModal__type__title__text { font-weight: 600; } .CreateProjectModal__type__title__description { font-weight: 500; } .CreateProjectModal__type__title__icon { margin-bottom: -5px; } .CreateProjectModal__category { display: flex; flex-direction: column; border-radius: 5px; padding: 7px 5px; margin: 5px 0; cursor: pointer; } .CreateProjectModal__category:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .CreateProjectModal__category__pill { display: flex; align-items: center; gap: 0.2rem; cursor: default; background-color: rgb(var(--color-gray-300)); border-radius: 5px; padding: 4px 8px; margin: 3px 5px; line-height: 16px; } .CreateProjectModal__category__pill__remove:hover { color: rgb(var(--color-primary-500)); } .CreateProjectModal__category__pill__container { display: flex; flex-wrap: wrap; margin: -3px -5px -3px -5px; cursor: default; } .CreateProjectModal__category__group__title { font-size: 16px; display: flex; flex-direction: row; align-items: center; margin-left: 15px; } .CreateProjectModal__category__sublist { padding-left: 30px; } .CreateProjectModal__category__subcategory { cursor: pointer; padding-left: 20px; display: flex; } .CreateProjectModal__category__subcategory:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .CreateProjectModal__category__subcategory__title { margin-left: 15px; } .CreateProjectModal__store { display: flex; align-items: center; } .CreateProjectModal__store__text { display: flex; flex-direction: column; margin-left: 15px; } .CreateProjectModal__store__text__title { color: rgb(var(--color-title-dash3)); } .CreateProjectModal__store__text__title--disabled { color: rgb(var(--color-gray-500)); } .CreateProjectModal__store__text__subtitle { font-size: 14px; line-height: 16px; } .CreateProjectModal__store__text__subtitle--disabled { font-size: 14px; line-height: 16px; color: rgb(var(--color-gray-500)); } .CreateProjectModal__store__icon { margin-left: 12px; margin-top: 1px; } .CreateProjectModal__advanced { display: flex; flex-direction: column; gap: 1rem; } .CreateProjectModal__advanced__item { display: flex; align-items: center; gap: 0.5rem; } .dark-mode .CreateProjectModal__label { color: rgb(var(--color-gray-200)); } .dark-mode .CreateProjectModal__category:hover { color: rgb(var(--color-gray-300)); background-color: rgba(var(--color-white), 0.1); } .dark-mode .CreateProjectModal__category__subcategory:hover { color: rgb(var(--color-gray-300)); background-color: rgba(var(--color-white), 0.1); } .dark-mode .CreateProjectModal__category__pill { background-color: rgb(var(--color-extra-indigo-dash3-800)); color: rgb(var(--color-gray-200)); } .dark-mode .CreateProjectModal__category__pill__remove:hover { color: rgb(var(--color-gray-500)); } .dark-mode .CreateProjectModal__store { line-height: 18px; } .dark-mode .CreateProjectModal__store__text__title { color: rgb(var(--color-gray-300)); } .dark-mode .CreateProjectModal__store__text__subtitle { color: rgb(var(--color-gray-400)); } .dark-mode .CreateProjectModal__advanced { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .EmptyAlert { background: transparent; display: flex; justify-content: center; align-items: center; } .EmptyAlert__text { text-align: center; font-family: "Onest"; padding-top: 8px; } .EmptyAlert__title { margin-bottom: 12px; font-size: 18px; color: rgb(var(--color-extra-indigo-dash3-700)); } .EmptyAlert__body { font-size: 14px; color: rgb(var(--color-gray-600)); } .EmptyAlert__body p { color: rgb(var(--color-gray-600)); } .dark-mode .EmptyAlert { background: transparent; min-height: 375px; display: flex; justify-content: center; align-items: center; } .dark-mode .EmptyAlert__text { text-align: center; font-family: "Onest"; } .dark-mode .EmptyAlert__title { margin-bottom: 12px; font-size: 18px; color: rgb(var(--color-gray-300)); } .dark-mode .EmptyAlert__body { font-size: 14px; color: rgb(var(--color-gray-300)); } .dark-mode .EmptyAlert__body p { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .EmptyOrganization { display: flex; flex-direction: row; align-items: center; font-family: "Onest" !important; margin-bottom: 4rem; } @media (max-width: 1201px) { .EmptyOrganization { flex-direction: column; min-width: 700px; } } .EmptyOrganization .EmptyAlert { width: 100%; } .EmptyOrganization .EmptyAlert .empty_organization__alert__button { display: flex; justify-content: center; }.TagPill { border-radius: 4px; } .TagPill__wrapper { display: flex; justify-content: center; align-items: center; border-radius: 4px; padding: 5px 10px; font-size: 13px; font-weight: 600; line-height: 16px; } .TagPill__wrapper--tiny { display: flex; justify-content: center; align-items: center; border-radius: 3px; padding: 4px 8px; font-size: 13px; font-weight: 600; line-height: 14px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CreateSessionTag__item { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .CreateSessionTag__item--end { margin-bottom: 0; } .CreateSessionTag__pill { display: flex; } .CreateSessionTag__color-picker { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .CreateSessionTag__color-picker__item { cursor: pointer; width: 32px; height: 32px; border-radius: 32px; display: flex; align-items: center; justify-content: center; } .CreateSessionTag__color-picker__item__core { width: 30px; height: 30px; border-radius: 30px; } .CreateSessionTag__color-picker__item__core--active { border: solid 2px rgb(var(--color-white)); } .CreateSessionTag__project { cursor: pointer; font-size: 16px; display: flex; flex-direction: row; align-items: center; border-radius: 5px; padding: 7px 5px; margin: 5px 0; } .CreateSessionTag__project:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .CreateSessionTag__project__name { margin-left: 15px; line-height: 20px; } .CreateSessionTag__project__message { font-size: 14px; font-style: italic; margin: 5px 0 8px 5px; line-height: 14px; white-space: normal; } .dark-mode .CreateSessionTag__project:hover { color: rgb(var(--color-gray-300)); background-color: rgba(var(--color-white), 0.1); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .loadingGhost { width: 100%; height: 1em; border-radius: 0.5rem; background-image: -webkit-linear-gradient(left, rgba(var(--color-secondary-800), 0.04) 35%, rgba(var(--color-secondary-800), 0.08) 50%, rgba(var(--color-secondary-800), 0.04) 65%); background-image: -o-linear-gradient(left, rgba(var(--color-secondary-800), 0.04) 35%, rgba(var(--color-secondary-800), 0.08) 50%, rgba(var(--color-secondary-800), 0.04) 65%); background-image: linear-gradient(to right, rgba(var(--color-secondary-800), 0.04) 35%, rgba(var(--color-secondary-800), 0.08) 50%, rgba(var(--color-secondary-800), 0.04) 65%); background-repeat: no-repeat; background-size: 300% 100%; background-position-x: 0%; animation-name: loadingHelperSwipe; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingGhost--fullWidth { margin: 0px -20px; } @keyframes loadingHelperSwipe { 0% { background-position-x: 0%; } 100% { background-position-x: 100%; } } .dark-mode .loadingGhost { background-image: -webkit-linear-gradient(left, rgba(var(--color-white), 0.2) 35%, rgba(var(--color-white), 0.1) 50%, rgba(var(--color-white), 0.2) 65%); background-image: -o-linear-gradient(left, rgba(var(--color-white), 0.2) 35%, rgba(var(--color-white), 0.1) 50%, rgba(var(--color-white), 0.2) 65%); background-image: linear-gradient(to right, rgba(var(--color-white), 0.2) 35%, rgba(var(--color-white), 0.1) 50%, rgba(var(--color-white), 0.2) 65%); background-repeat: no-repeat; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .NiceTableDash3__pagination li a { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NiceTableDash3 { display: grid; grid-template-rows: auto; min-height: 42px; } .NiceTableDash3__container { border-radius: 10px; border: solid 1px rgb(var(--color-gray-300)); margin: 0 2rem 2rem; } @media (max-width: 1537px) { .NiceTableDash3__container { margin: 0 1rem 1rem; } } .NiceTableDash3__container--noBorder { border: none; } .NiceTableDash3__container--noMargin { margin: 0px; } .NiceTableDash3__superHeader { width: 100%; display: flex; justify-content: space-between; } .NiceTableDash3__superHeader__left, .NiceTableDash3__superHeader__right { padding: 1rem 2rem; display: flex; justify-content: center; width: fit-content; align-items: center; } .NiceTableDash3__superHeader__left__item:not(:last-child), .NiceTableDash3__superHeader__right__item:not(:last-child) { margin-right: 10px; } .NiceTableDash3__header { padding: 15px 50px; color: rgb(var(--color-title-dash3)); cursor: default; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ border-bottom: 1px solid rgb(var(--color-gray-300)); min-height: 70px; } .NiceTableDash3__header--noPadding { height: 0; padding: 0; } .NiceTableDash3__header__cell { display: flex; align-items: center; font-weight: 700; font-size: 16px; line-height: 16px; } .NiceTableDash3__header__cell--sortable { cursor: pointer; } .NiceTableDash3__header__cell--sortable:hover { color: rgb(var(--color-primary-500)); } .NiceTableDash3__header__cell--bold { font-weight: 700; } .NiceTableDash3__header__cell--verticalFlex { display: flex; flex-direction: column; align-items: center; } .NiceTableDash3__header__cell--horizontalFlex { display: flex; flex-direction: row; } .NiceTableDash3__header__cell--alignRight { display: flex; align-items: flex-end; } .NiceTableDash3__header__cell--alignLeft { display: flex; align-items: flex-start; } .NiceTableDash3__header__cell--alignTop { display: flex; align-items: flex-start; } .NiceTableDash3__header__cell--alignBase { display: flex; align-items: baseline; } .NiceTableDash3__header__cell--alignCenter { display: flex; align-items: center; } .NiceTableDash3__header__cell--justifyLeft { justify-content: flex-start; } .NiceTableDash3__header__cell--justifyRight { justify-content: flex-end; } .NiceTableDash3__header__cell--justifyCenter { justify-content: center; } .NiceTableDash3__header__cell--invisible { visibility: hidden; opacity: 0; transition: 0.1s all; } .NiceTableDash3__header__cell--invisibleAlways { visibility: hidden; opacity: 0; } .NiceTableDash3__row { display: grid; margin: 0px 50px; color: rgb(var(--color-gray-800)); background-color: transparent; font-family: "Onest"; border-bottom: 1px solid rgb(var(--color-gray-300)); } .NiceTableDash3__row--empty { height: 140px; display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: 500; color: rgb(var(--color-gray-700)); } .NiceTableDash3__row--loading { display: grid; padding: 15px 0px; margin: 0 50px; background-color: transparent; } .NiceTableDash3__row--nopaginate:nth-last-of-type(1) { border-bottom: none; } .NiceTableDash3__row > div { transition: 0.2s all; } .NiceTableDash3__row:hover { cursor: default; background: rgb(var(--color-gray-100)); color: rgb(var(--color-extra-midnight-dash3-400)); } .NiceTableDash3__row--draggable { cursor: grab; } .NiceTableDash3__row--dragging { box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11); cursor: grabbing; } .NiceTableDash3__row--dragging .exitpoll-edit-question-set__drag-handle { box-shadow: 0 2px 0 rgba(255, 255, 255, 0.15), 0 8px 8px hsla(0, 0%, 0%, 0.1) inset; background: rgb(var(--color-gray-400)); } .NiceTableDash3__cell { min-width: 0; display: flex; align-items: center; padding: 15px 0px; font-size: 16px; line-height: 16px; } .NiceTableDash3__cell--clickable { cursor: pointer; } .NiceTableDash3__cell--icon { padding: 0 8px; } .NiceTableDash3__cell--icon:hover { color: rgb(var(--color-primary-600)); } .NiceTableDash3__cell--bold { font-weight: 700; } .NiceTableDash3__cell--verticalFlex { display: flex; flex-direction: column; align-items: center; } .NiceTableDash3__cell--horizontalFlex { display: flex; flex-direction: row; } .NiceTableDash3__cell--alignRight { display: flex; align-items: flex-end; } .NiceTableDash3__cell--alignLeft { display: flex; align-items: flex-start; } .NiceTableDash3__cell--alignTop { display: flex; align-items: flex-start; } .NiceTableDash3__cell--alignBase { display: flex; align-items: baseline; } .NiceTableDash3__cell--alignCenter { display: flex; align-items: center; } .NiceTableDash3__cell--justifyLeft { justify-content: flex-start; } .NiceTableDash3__cell--justifyRight { justify-content: flex-end; } .NiceTableDash3__cell--justifyCenter { justify-content: center; } .NiceTableDash3__cell--invisible { visibility: hidden; opacity: 0; transition: 0.1s all; } .NiceTableDash3__cell--invisibleAlways { visibility: hidden; opacity: 0; } .NiceTableDash3__cell--rightPadding { padding-right: 10px; } .NiceTableDash3__cell--color-warning { color: rgb(var(--color-warning-400)); } .NiceTableDash3__cell--dropdown { width: 200px; } .NiceTableDash3__cell--rightPadding { padding-right: 10px; } .NiceTableDash3__cell--topPadding { padding-top: 5px; } .NiceTableDash3__cell--bottomPadding { padding-bottom: 5px; } .NiceTableDash3__cell--bottomPadding10 { padding-bottom: 10px; } .NiceTableDash3__cell--bottomPaddingLarger { padding-bottom: 20px; } .NiceTableDash3__cell--bottomMarginLarger { margin-bottom: 20px; } .NiceTableDash3__cell--maxWidth { width: 100%; } .NiceTableDash3__cell--90Width { width: 90%; } .NiceTableDash3__cell--maxWidthNoButton { width: calc(100% - 15.56px); } .NiceTableDash3__cell--trimmed { padding-right: 30px; display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; } .NiceTableDash3__cell--trimmed:hover { background: rgb(var(--color-gray-100)); } .NiceTableDash3__cell--item { display: grid; } .NiceTableDash3__cell--trimmed { padding-right: 30px; line-height: 1.2rem; display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .NiceTableDash3__cell--trimmed:hover { background: rgb(var(--color-gray-100)); z-index: 9; } .NiceTableDash3__pagination { padding: 3rem 0; margin: 0px; display: flex; justify-content: center; text-decoration: none; } .NiceTableDash3__pagination li { margin: 0 3px; list-style-type: none; } .NiceTableDash3__pagination li a { color: rgb(var(--color-gray-800)); padding: 8px 11px; letter-spacing: 0.03em; font-size: 10pt; } .NiceTableDash3__pagination li:hover { cursor: pointer; } .NiceTableDash3__pagination .active a { background: rgba(var(--color-soft-purple-600), 0.12); border-radius: 5px; color: rgba(var(--color-soft-purple-600), 0.7) !important; font-weight: 550; } .NiceTableDash3__pagination .break { cursor: default !important; } .NiceTableDash3 .NiceDropdownDash3__item__text { font-size: 16px; } .NiceTableDash3--ProjectList { height: 75px; grid-template-columns: 2fr 1fr 0.5fr 0.5fr 0.4fr; } .NiceTableDash3--SceneList { height: 75px; grid-template-columns: 1.5fr 0.7fr 1fr 1fr 0.5fr 0.4fr; } .NiceTableDash3--MediaList { height: 75px; grid-template-columns: 1.1fr 0.35fr 0.6fr 0.8fr 0.3fr; } .NiceTableDash3--MediaAppearsInList { min-height: 40px; grid-template-columns: 0.5fr 0.3fr 0.3fr; } .NiceTableDash3--RemoteConfigurationsList { grid-template-columns: 0.8fr 0.9fr 0.8fr 0.3fr 0.2fr; } .NiceTableDash3--RemoteVariablesList { grid-template-columns: 1fr 0.75fr 0.4fr 0.7fr; } .NiceTableDash3--ABTestVariantsList { grid-template-columns: 0.7fr 0.35fr 0.8fr 0.25fr; } .NiceTableDash3--OrganizationList { grid-template-columns: 0.5fr 1.4fr 1.2fr 0.3fr; min-height: 70px; } .NiceTableDash3--ExitPoll { grid-template-columns: 1fr 2fr 1fr; } .NiceTableDash3--ExitPollResponseList { grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr 200px; } .NiceTableDash3--ManageQuestionSetsList { grid-template-columns: 0.8fr 1.5fr 0.8fr 0.4fr; } .NiceTableDash3--WidgetLibrary { grid-template-columns: 0.3fr 1fr 1fr 0.3fr; } .NiceTableDash3--ExitPollHooksList { grid-template-columns: 0.7fr 1fr 0.7fr; } .NiceTableDash3--EditQuestionSetGrabbable { grid-template-columns: 0.03fr 1fr 1fr 0.07fr; } .NiceTableDash3--EditQuestionSet { grid-template-columns: 0.3fr 1fr; } .NiceTableDash3--UserList { grid-template-columns: 1.4fr 0.8fr 1.1fr 0.5fr 0.5fr 0.3fr; } @media (max-width: 1500px) { .NiceTableDash3--UserList { grid-template-columns: 1.2fr 0.8fr 1fr 0.45fr 0.45fr 0.3fr; } } .NiceTableDash3--InviteList { height: 70px; grid-template-columns: 1.5fr 1fr 1.2fr 0.6fr 0.4fr; } .NiceTableDash3--EditUserRoles { min-height: 80px; grid-template-columns: 1fr 1fr; } .NiceTableDash3--SessionTag { height: 70px; grid-template-columns: 0.8fr 1.5fr 0.8fr 0.4fr; } .NiceTableDash3--DomainList { min-height: 70px; grid-template-columns: 0.2fr 1fr 0.8fr 0.45fr 0.3fr 0.3fr 0.2fr; } .NiceTableDash3--DomainAuthenticationResultList { height: 50px; grid-template-columns: 1fr 1fr 0.3fr; } .NiceTableDash3--OrganizationList--backoffice { height: 75px; grid-template-columns: 0.25fr 0.6fr 0.45fr 0.25fr 0.2fr 0.4fr 0.5fr 0.3fr 0.35fr 0.3fr; } @media (max-width: 1600px) { .NiceTableDash3--OrganizationList--backoffice { grid-template-columns: 0.25fr 0.4fr 0.5fr 0.25fr 0.2fr 0.4fr 0.5fr 0.2fr 0.2fr 0.2fr; } .NiceTableDash3--OrganizationList--backoffice .NiceTableDash3__cell { font-size: 13px; padding: 0; } .NiceTableDash3--OrganizationList--backoffice .NiceTableDash3__header__cell { font-size: 13px; } .NiceTableDash3--OrganizationList--backoffice .NiceTableDash3__header { padding: 0px; } } .NiceTableDash3--OrganizationList--backoffice--superuser { min-height: 75px; grid-template-columns: 0.3fr 0.65fr 0.45fr 0.25fr 0.25fr 0.35fr 0.4fr 0.4fr 0.4fr 0.3fr 0.4fr; } @media (max-width: 1600px) { .NiceTableDash3--OrganizationList--backoffice--superuser { grid-template-columns: 0.35fr 0.4fr 0.4fr 0.25fr 0.2fr 0.35fr 0.4fr 0.2fr 0.2fr 0.3fr 0.4fr; height: 55px; } .NiceTableDash3--OrganizationList--backoffice--superuser .NiceTableDash3__cell { font-size: 13px; padding: 0; } .NiceTableDash3--OrganizationList--backoffice--superuser .NiceTableDash3__header__cell { font-size: 13px; } } .NiceTableDash3--CustomPlanEntitlementsList { min-height: 71px; grid-template-columns: 0.8fr 0.3fr 0.5fr; } .NiceTableDash3--UserList--backoffice { min-height: 80px; grid-template-columns: 0.3fr 1fr 1fr 0.85fr 0.6fr 0.4fr 0.4fr 1.1fr 0.4fr; } @media (max-width: 1650px) { .NiceTableDash3--UserList--backoffice { grid-template-columns: 0.15fr 0.4fr 0.55fr 0.5fr 0.45fr 0.2fr 0.2fr 0.65fr 0.2fr; } .NiceTableDash3--UserList--backoffice .NiceTableDash3__header__cell { font-size: 14px; } } .NiceTableDash3--ObjectList { min-height: 60px; grid-template-columns: 0.7fr 2.6fr 2fr 2fr 1.5fr 1.5fr 1.2fr; } @media (max-width: 1650px) { .NiceTableDash3--ObjectList { grid-template-columns: 0.7fr 2.4fr 1.8fr 1.8fr 1.5fr 1.5fr 1.5fr; } } .NiceTableDash3--ObjectMetricsList { min-height: 80px; grid-template-columns: 1fr 0.7fr; } .NiceTableDash3--ObjectiveListPage { min-height: 70px; grid-template-columns: 1.8fr 1.2fr 0.7fr 0.7fr 0.5fr 0.4fr; } @media (max-width: 1650px) { .NiceTableDash3--ObjectiveListPage { grid-template-columns: 1.7fr 1.2fr 0.4fr 0.4fr 0.4fr 0.3fr; } } .NiceTableDash3--ObjectiveSessionList { grid-template-columns: 1fr 3fr 0.3fr; min-height: 75px; } .NiceTableDash3--ObjectiveEventPropertyList { grid-template-columns: 0.75fr 0.75fr 0.7fr 0.2fr; } .NiceTableDash3--SceneSessionList { min-height: 75px; grid-template-columns: 0.3fr 1.2fr 0.5fr 0.6fr 0.5fr 0.4fr 0.4fr; } @media (max-width: 1500px) { .NiceTableDash3--SceneSessionList { grid-template-columns: 0.3fr 0.9fr 0.45fr 0.45fr 0.4fr 0.35fr 0.35fr; } } .NiceTableDash3--SceneSessionList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ProjectSessionList { min-height: 75px; grid-template-columns: 0.3fr 1.2fr 0.5fr 0.65fr 0.5fr 0.45fr 0.45fr; } @media (max-width: 1500px) { .NiceTableDash3--ProjectSessionList { grid-template-columns: 0.3fr 0.9fr 0.45fr 0.6fr 0.45fr 0.35fr 0.35fr; } } .NiceTableDash3--ProjectSessionList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ParticipantSessionList { min-height: 75px; grid-template-columns: 0.9fr 0.45fr 0.3fr 0.35fr 0.3fr 0.3fr; } @media (max-width: 1500px) { .NiceTableDash3--ParticipantSessionList { grid-template-columns: 0.8fr 0.4fr 0.3fr 0.35fr 0.35fr 0.35fr; } } .NiceTableDash3--ParticipantSessionList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ParticipantSubscriptionList { min-height: 75px; grid-template-columns: 0.7fr 0.3fr 0.3fr 0.4fr 0.4fr 0.4fr; } @media (max-width: 1500px) { .NiceTableDash3--ParticipantSubscriptionList { grid-template-columns: 0.65fr 0.25fr 0.25fr 0.35fr 0.35fr 0.35fr; } } .NiceTableDash3--ParticipantSubscriptionList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--SessionPropertiesList { min-height: 55px; grid-template-columns: 0.15fr 0.5fr 1fr; } @media (max-width: 2000px) { .NiceTableDash3--SessionPropertiesList { grid-template-columns: 0.4fr 1.2fr 1fr; } } .NiceTableDash3--ParticipantList { min-height: 65px; grid-template-columns: 0.45fr 0.35fr 0.35fr 0.25fr 0.25fr 0.25fr 0.25fr; } .NiceTableDash3--ParticipantList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ParticipantPropertiesList { min-height: 55px; grid-template-columns: 0.5fr 1fr; } @media (max-width: 2000px) { .NiceTableDash3--ParticipantPropertiesList { grid-template-columns: 1.2fr 1fr; } } .NiceTableDash3--LmsConfigurationsList { min-height: 70px; grid-template-columns: 0.5fr 0.5fr 1fr 1fr 0.3fr; } .NiceTableDash3--OrganizationApiKeyList { min-height: 70px; grid-template-columns: 0.65fr 0.65fr 0.4fr 0.4fr 0.3fr; } .NiceTableDash3--PlansList { min-height: 75px; grid-template-columns: 0.25fr 0.8fr 0.5fr 0.65fr 0.65fr 0.55fr 0.25fr; } .NiceTableDash3--EntitlementsList { min-height: 75px; grid-template-columns: 1fr 0.5fr 0.5fr 0.3fr; } .NiceTableDash3__header.NiceTableDash3--ProjectSessionList { padding: 0px 50px; } @media (max-width: 1500px) { .NiceTableDash3__header.NiceTableDash3--ProjectSessionList { padding: 0px; } } .NiceTableDash3__row.NiceTableDash3--ProjectSessionList { margin: 0px 50px; } @media (max-width: 1500px) { .NiceTableDash3__row.NiceTableDash3--ProjectSessionList { margin: 0px; } } .NiceTableDash3__header.NiceTableDash3--ABTestVariantsList { padding: 0px; } .NiceTableDash3__header.NiceTableDash3--ABTestVariantsList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ABTestVariantsList.NiceTableDash3__row { margin: 0px; padding: 10px 0px; } .NiceTableDash3--ABTestVariantsList.NiceTableDash3__row .NiceTableDash3__cell { padding: 5px 0px; } .NiceTableDash3--ABTestVariantsList.NiceTableDash3__row:nth-last-of-type(1) { border-bottom: none; } .NiceTableDash3__header.NiceTableDash3--CustomPlanEntitlementsList { padding: 0px; } .NiceTableDash3__header.NiceTableDash3--CustomPlanEntitlementsList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--CustomPlanEntitlementsList.NiceTableDash3__row { margin: 0px; padding: 10px 0px; } .NiceTableDash3--CustomPlanEntitlementsList.NiceTableDash3__row .NiceTableDash3__cell { padding: 5px 0px; } .NiceTableDash3--CustomPlanEntitlementsList.NiceTableDash3__row:nth-last-of-type(1) { border-bottom: none; } .NiceTableDash3--RemoteVariablesList.NiceTableDash3__row { height: 70px; } .NiceTableDash3__header.NiceTableDash3--LmsConfigurationsList { padding: 0px 50px; } .NiceTableDash3.NiceTableDash3--LmsConfigurationsList.NiceTableDash3__row:nth-last-of-type(1) { border-bottom: none; } .NiceTableDash3__header.NiceTableDash3--OrganizationApiKeyList { padding: 0px 50px; } .NiceTableDash3.NiceTableDash3--MediaAppearsInList.NiceTableDash3__row { padding: 0px; margin: 0px; } .NiceTableDash3__header.NiceTableDash3--MediaAppearsInList { padding: 0px; } .NiceTableDash3.NiceTableDash3--DomainAuthenticationResultList.NiceTableDash3__row { padding: 0px; margin: 0px; } .NiceTableDash3__header.NiceTableDash3--DomainAuthenticationResultList { padding: 0px; } .NiceTableDash3__header.NiceTableDash3--ObjectiveEventPropertyList { padding: 0px; } .NiceTableDash3__header.NiceTableDash3--ObjectiveEventPropertyList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ObjectiveEventPropertyList.NiceTableDash3__row { margin: 0px; padding: 10px 0px; } .NiceTableDash3--ObjectiveEventPropertyList.NiceTableDash3__row .NiceTableDash3__cell { padding: 5px 0px; } .NiceTableDash3--ObjectiveEventPropertyList.NiceTableDash3__row:nth-last-of-type(1) { border-bottom: none; } .dark-mode .NiceTableDash3__container { border: solid 1px rgb(var(--color-gray-600)); } .dark-mode .NiceTableDash3__container--noBorder { border: none; } .dark-mode .NiceTableDash3__superHeader { color: rgb(var(--color-gray-600)); } .dark-mode .NiceTableDash3__header { color: rgb(var(--color-gray-300)); border-bottom: 1px solid rgb(var(--color-gray-600)); } .dark-mode .NiceTableDash3__header__cell--sortable:hover { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .NiceTableDash3__row { color: rgb(var(--color-gray-200)); border-bottom: 1px solid rgb(var(--color-gray-600)); } .dark-mode .NiceTableDash3__row:hover { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-extra-indigo-dash3-200)); } .dark-mode .NiceTableDash3__row--empty { color: rgb(var(--color-gray-200)); } .dark-mode .NiceTableDash3__cell--trimmed:hover { background: transparent; } .dark-mode .NiceTableDash3__pagination li { color: rgb(var(--color-white)); } .dark-mode .NiceTableDash3__pagination li a { color: rgb(var(--color-white)); } .dark-mode .NiceTableDash3__pagination .active a { background: rgba(var(--color-white), 0.15); color: rgb(var(--color-primary-400)) !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PageHeader-dash3 { min-width: 1000px; margin: 0 2rem 2rem 2rem; padding-top: 1.2rem; position: relative; } .PageHeader-dash3::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--color-white), 1) 0%, rgba(var(--color-white), 0.75) 85%, rgba(var(--color-white), 0) 100%); backdrop-filter: blur(2px); pointer-events: none; } @media (max-width: 1537px) { .PageHeader-dash3 { margin: 0 1rem 2rem 1rem; } } .PageHeader-dash3--sticky { top: 0px; position: sticky; z-index: 3; } .PageHeader-dash3__content { display: flex; justify-content: space-between; } .PageHeader-dash3__left { display: flex; justify-content: flex-start; align-items: center; min-height: 40px; } .PageHeader-dash3__left__main { display: flex; flex-direction: column; margin-right: 20px; } .PageHeader-dash3__left__main__title { font-weight: 600; font-size: 20px; line-height: 24px; color: rgb(var(--color-title-dash3)); } .PageHeader-dash3__left__main__subTitle { font-weight: 600; font-size: 20px; line-height: 22px; color: rgb(var(--color-title-dash3)); } .PageHeader-dash3__left__main__subTitle__overline { font-weight: 600; font-size: 1rem; line-height: 1.5rem; color: rgb(var(--color-primary-400)); } .PageHeader-dash3__left__main__description { font-weight: 500; font-size: 16px; line-height: 20px; color: rgb(var(--color-gray-700)); margin-top: 8px; } .PageHeader-dash3__right { display: flex; justify-content: flex-end; align-items: center; } .PageHeader-dash3 .dashboard-header__filters-info { display: flex; align-items: center; gap: 1rem; } .PageHeader-dash3__children { position: sticky; top: 0; z-index: 3; margin-top: 1rem; } .dark-mode .PageHeader-dash3::before { background: linear-gradient(180deg, rgba(var(--color-extra-midnight-dash3-900), 1) 0%, rgba(var(--color-extra-midnight-dash3-900), 0.75) 85%, rgba(var(--color-extra-midnight-dash3-900), 0) 100%); } .dark-mode .PageHeader-dash3__left__main__title { color: rgb(var(--color-gray-300)); } .dark-mode .PageHeader-dash3__left__main__subTitle { color: rgb(var(--color-gray-400)); } .dark-mode .PageHeader-dash3__left__main__description { color: rgb(var(--color-gray-400)); }.ManageSessionTags { display: grid; } .ManageSessionTags__description { line-height: 1.2rem; margin-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PlansAndBilling__plans { display: flex; flex-direction: column; gap: 2rem; margin: 0px 2rem 2rem 2rem; min-width: 1000px; } .PlansAndBilling__plans__toggle { display: flex; justify-content: center; margin-bottom: 1rem; } .PlansAndBilling__planTypeToggle { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; position: relative; } .PlansAndBilling__planTypeToggle .ToggleSwitch { background: rgb(var(--color-white)); border-radius: 12px; padding: 3px; border: 1px solid rgb(var(--color-gray-300)); height: 40px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .PlansAndBilling__planTypeToggle .ToggleSwitch__button { background: transparent; border: none; border-radius: 8px; padding: 0.4rem 1rem; margin: 0.1rem; min-width: 110px; font-size: 14px; font-weight: 600; font-family: "Onest"; color: rgb(var(--color-gray-600)); cursor: pointer; } .PlansAndBilling__planTypeToggle .ToggleSwitch__button--active { color: rgb(var(--color-title-dash3)); background: linear-gradient(135deg, #f8f9fa 50%, #e9ecef 100%); font-weight: 700; border: 1px solid rgb(var(--color-gray-200)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2); } .PlansAndBilling__planTypeToggle .ToggleSwitch__button--disabled { cursor: not-allowed; opacity: 0.4; transform: none !important; } .PlansAndBilling__planTypeToggle .ToggleSwitch__button--disabled:hover { background: transparent; color: rgb(var(--color-gray-600)); } .PlansAndBilling__planTypeToggle .PlanCard__savingsTag { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.3rem 0.6rem; border-radius: 20px; font-size: 12px; font-weight: 700; position: absolute; top: -12px; right: -40px; overflow: hidden; z-index: 10; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); } .PlansAndBilling__planTypeToggle .PlanCard__savingsTag::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shimmer 3s infinite; } .PlansAndBilling__planCards { display: flex; flex-direction: row; gap: 1.5rem; } .PlansAndBilling__planCards > * { flex: 1 1 0; min-width: 0; } .PlansAndBilling__seeComparison { display: flex; justify-content: center; padding: 15px 20px; border-radius: 0.5rem; border: 1px solid rgb(var(--color-gray-300)); } .PlansAndBilling__enterprise { display: flex; flex-direction: column; gap: 0.8rem; border-radius: 0.5rem; border: 1px solid rgb(var(--color-gray-300)); padding: 35px 20px; } .PlansAndBilling__enterprise__content { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .PlansAndBilling__enterprise__title { font-size: 24px; font-weight: 700; color: rgb(var(--color-title-dash3)); display: flex; flex-direction: row; align-items: center; gap: 1rem; } .PlansAndBilling__enterprise__title--current { font-size: 14px; line-height: 16px; letter-spacing: 0.02rem; font-weight: 600; border-radius: 5px; border: 0.1rem solid rgb(var(--color-gray-600)); padding: 0.2rem 0.5rem; color: rgb(var(--color-gray-700)); } .PlansAndBilling__enterprise__subtitleNote { font-size: 14px; font-weight: 600; color: rgb(var(--color-title-dash3)); height: 16px; } .PlansAndBilling__enterprise__subtitleNote--invisible { visibility: hidden; pointer-events: none; } .PlansAndBilling__enterprise__description { display: flex; flex-direction: column; margin-right: 3rem; font-size: 14px; font-weight: 500; color: rgb(var(--color-title-dash3)); line-height: 20px; } .PlansAndBilling__enterprise__button { border: 1px solid #dedede; background-color: transparent; color: rgb(var(--color-primary-500)) !important; min-width: 150px; } .PlansAndBilling__enterprise__button:hover { border-color: rgb(var(--color-primary-500)); color: rgb(var(--color-primary-600)) !important; background-color: transparent; } .PlansAndBilling__planFeatures { display: flex; flex-direction: column; gap: 1.4rem; padding: 30px 40px 30px 20px; } .PlansAndBilling__planFeatures__title { font-size: 24px; font-weight: 700; color: rgb(var(--color-title-dash3)); } .PlansAndBilling__planFeatures__features { display: flex; justify-content: space-between; } .PlansAndBilling__planFeatures__feature { display: flex; gap: 1rem; } .PlansAndBilling__planFeatures__feature__icon { color: rgb(var(--color-primary-500)); } .PlansAndBilling__planFeatures__feature__content { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; } .PlansAndBilling__planFeatures__feature__title { font-size: 15px; font-weight: 700; color: rgb(var(--color-title-dash3)); } .PlansAndBilling__planFeatures__feature__description { font-size: 14px; font-weight: 500; color: rgb(var(--color-gray-600)); margin-bottom: 0.5rem; } .PlansAndBilling__applyLicense { display: flex; flex-direction: row; margin: 0px 2rem 5rem 2rem; gap: 1.5rem; } .PlansAndBilling__applyLicense > * { flex: 1 1 0; min-width: 0; } .PlansAndBilling__applyLicense .ContentContainerDash3 { margin: 0; min-width: 300px; } .PlansAndBilling__applyLicense__content { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 25px 20px; } .PlansAndBilling__applyLicense__description { display: flex; flex-direction: column; margin-right: 2rem; font-size: 14px; font-weight: 500; color: rgb(var(--color-title-dash3)); line-height: 20px; } .PlansAndBilling__applyLicense__button { border: 1px solid #dedede; background-color: transparent; color: rgb(var(--color-primary-500)) !important; min-width: 120px; text-align: center; } .PlansAndBilling__applyLicense__button:hover { border-color: rgb(var(--color-primary-500)); color: rgb(var(--color-primary-600)) !important; background-color: transparent; } .dark-mode .PlansAndBilling__seeComparison { border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .PlansAndBilling__enterprise { border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .PlansAndBilling__enterprise__title { color: rgb(var(--color-gray-100)); } .dark-mode .PlansAndBilling__enterprise__title--current { color: rgb(var(--color-gray-400)); border-color: rgb(var(--color-gray-400)); } .dark-mode .PlansAndBilling__enterprise__subtitleNote { color: rgb(var(--color-gray-200)); } .dark-mode .PlansAndBilling__enterprise__description { color: rgb(var(--color-gray-100)); } .dark-mode .PlansAndBilling__enterprise__button { color: rgb(var(--color-primary-400)) !important; } .dark-mode .PlansAndBilling__planFeatures__title { color: rgb(var(--color-gray-100)); } .dark-mode .PlansAndBilling__planFeatures__feature__title { color: rgb(var(--color-gray-100)); } .dark-mode .PlansAndBilling__planFeatures__feature__description { color: rgb(var(--color-gray-400)); } .dark-mode .PlansAndBilling__applyLicense__description { color: rgb(var(--color-gray-100)); } .dark-mode .PlansAndBilling__applyLicense__button { color: rgb(var(--color-primary-400)) !important; } .dark-mode .PlansAndBilling__planTypeToggle .ToggleSwitch { background: linear-gradient(135deg, rgb(var(--color-extra-navy-dash3-900)) 0%, rgb(var(--color-extra-midnight-dash3-700)) 100%); border: 1px solid rgb(var(--color-gray-800)); } .dark-mode .PlansAndBilling__planTypeToggle .ToggleSwitch__button { color: rgb(var(--color-gray-400)); } .dark-mode .PlansAndBilling__planTypeToggle .ToggleSwitch__button--active { background: linear-gradient(135deg, rgb(var(--color-extra-navy-dash3-900)) 0%, rgb(var(--color-extra-midnight-dash3-900)) 100%); color: rgb(var(--color-gray-100)); border: 1px solid rgb(var(--color-gray-600)); } @keyframes pulse-savings { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PlanCard { position: relative; padding: 25px 20px; border-radius: 5px; border: 1px solid rgb(var(--color-gray-300)); display: flex; flex-direction: column; align-items: left; } .PlanCard__ribbon { position: absolute; top: -16px; right: 30px; width: 130px; height: 32px; background-color: rgb(var(--color-primary-500)); border-radius: 16px; font-size: 14px; font-weight: 700; color: rgb(var(--color-white)); font-family: "Onest"; display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, #008be6 3%, #b616c8 100%); } .PlanCard__title { font-size: 24px; font-weight: 700; color: rgb(var(--color-title-dash3)); margin-bottom: 10px; display: flex; flex-direction: row; align-items: center; gap: 1rem; } .PlanCard__title--current { font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: 0.02rem; border-radius: 5px; border: 0.1rem solid rgb(var(--color-gray-600)); padding: 0.2rem 0.5rem; color: rgb(var(--color-gray-700)); } .PlanCard__subtitle { font-size: 14px; font-weight: 700; color: rgb(var(--color-title-dash3)); margin-bottom: 1.5rem; margin-left: 0.1rem; } .PlanCard__subtitleNote { font-size: 14px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 0.5rem; height: 16px; } .PlanCard__subtitleNote--invisible { visibility: hidden; pointer-events: none; } .PlanCard__descriptions { margin-bottom: 0.5rem; min-height: 250px; } .PlanCard__description { display: flex; flex-direction: row; margin-bottom: 0.5rem; } .PlanCard__description--check { font-size: 14px; margin-right: 10px; padding-top: 2px; color: rgb(var(--color-primary-500)); } .PlanCard__description--text { font-size: 14px; font-weight: 500; color: rgb(var(--color-title-dash3)); line-height: 20px; } .PlanCard__defaultButton { width: 100%; height: 38px; border-radius: 5px; border: 0.1rem solid #dedede; color: rgb(var(--color-title-dash3)); font-size: 12px; font-weight: 700; display: flex; justify-content: center; align-items: center; letter-spacing: 0.06em; margin-bottom: 10px; } .PlanCard__pricing { display: flex; flex-direction: column; margin-bottom: 1rem; } .PlanCard__pricing--invisible { visibility: hidden; pointer-events: none; } .PlanCard__pricingHeader { display: flex; justify-content: flex-start; align-items: baseline; margin-bottom: 1rem; gap: 0.5rem; } .PlanCard__pricingHeader--label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); } .PlanCard__pricingHeader--value { font-size: 24px; font-weight: 700; color: rgb(var(--color-primary-500)); } .PlanCard__slider { margin-bottom: 1.2rem; width: 100%; height: 0.4rem; border-radius: 0.2rem; outline: none; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) var(--slider-progress, 0%), rgb(var(--color-gray-200)) var(--slider-progress, 0%), rgb(var(--color-gray-200)) 100%); } .PlanCard__slider::-webkit-slider-track { width: 100%; height: 6px; background: transparent; border-radius: 3px; cursor: pointer; } .PlanCard__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: rgb(var(--color-white)); border: 3px solid rgb(var(--color-primary-500)); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .PlanCard__slider::-moz-range-track { width: 100%; height: 6px; background: transparent; border-radius: 3px; border: none; cursor: pointer; } .PlanCard__slider::-moz-range-thumb { width: 16px; height: 16px; background: rgb(var(--color-white)); border: 3px solid rgb(var(--color-primary-500)); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .PlanCard__price { text-align: start; display: flex; align-items: center; margin-bottom: 1rem; } .PlanCard__priceValue { font-size: 24px; font-weight: 700; color: rgb(var(--color-title-dash3)); } .PlanCard__priceSuffix { font-size: 16px; font-weight: 500; color: rgb(var(--color-gray-600)); margin-left: 4px; } .PlanCard__savingsTag { font-size: 13px; font-weight: 600; color: rgb(var(--color-white)); background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 0.3rem 0.6rem; border-radius: 12px; margin-left: 1rem; height: fit-content; } .PlanCard__buttonContainer { display: flex; justify-content: space-between; flex-direction: row; gap: 0.5rem; } .PlanCard__buttonContainer > * { width: 100%; } .dark-mode .PlanCard { border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .PlanCard__title { color: rgb(var(--color-gray-100)); } .dark-mode .PlanCard__title--current { color: rgb(var(--color-gray-400)); border-color: rgb(var(--color-gray-400)); } .dark-mode .PlanCard__subtitle { color: rgb(var(--color-gray-100)); } .dark-mode .PlanCard__subtitleNote { color: rgb(var(--color-gray-200)); } .dark-mode .PlanCard__description--check { color: rgb(var(--color-primary-400)); } .dark-mode .PlanCard__description--text { color: rgb(var(--color-gray-200)); } .dark-mode .PlanCard__defaultButton { color: rgb(var(--color-gray-300)); } .dark-mode .PlanCard__pricingHeader--label { color: rgb(var(--color-gray-100)); } .dark-mode .PlanCard__pricingHeader--value { color: rgb(var(--color-primary-400)); } .dark-mode .PlanCard__slider { background: linear-gradient(to right, rgb(var(--color-primary-400)) 0%, rgb(var(--color-primary-400)) var(--slider-progress, 0%), rgb(var(--color-gray-600)) var(--slider-progress, 0%), rgb(var(--color-gray-600)) 100%); } .dark-mode .PlanCard__slider::-webkit-slider-track { background: transparent; } .dark-mode .PlanCard__slider::-webkit-slider-thumb { background: rgb(var(--color-white)); border-color: rgb(var(--color-primary-400)); } .dark-mode .PlanCard__slider::-moz-range-track { background: transparent; } .dark-mode .PlanCard__slider::-moz-range-thumb { background: rgb(var(--color-white)); border-color: rgb(var(--color-primary-400)); } .dark-mode .PlanCard__priceValue { color: rgb(var(--color-gray-100)); } .dark-mode .PlanCard__priceSuffix { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ManageProjects { display: flex; flex-direction: column; max-width: 100%; } .ManageProjects__title { display: flex; align-items: center; font-size: 16px; font-weight: 600; padding-right: 10px; } .ManageProjects__title__name { line-height: 20px; color: rgb(var(--color-secondary-500)); display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ManageProjects__title__name:hover { cursor: pointer; text-decoration: underline; } .ManageProjects__title__type { margin-left: 10px; margin-bottom: -4px; min-width: 32px; } .ManageProjects__description { font-size: 14px; line-height: 1.2rem; margin-top: 2px; margin-right: 30px; display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .dark-mode .ManageProjects__title__name { color: rgb(var(--color-secondary-500)); } .dark-mode .ManageProjects__title__name:hover { color: rgb(var(--color-secondary-600)); background-color: rgb(var(--color-extra-midnight-dash3-800)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DataUsage__planName { font-size: 18px; font-weight: 700; color: rgb(var(--color-primary-500)); } .DataUsage__info { display: flex; flex-direction: row; gap: 1.5rem; margin: 0px 2rem 5rem 2rem; } .DataUsage__info .ContentContainerDash3 { margin: 0; min-width: 300px; display: flex; flex-direction: column; } .DataUsage__info .ContentContainerDash3 .ContentContainerDash3__body { flex: 1; display: flex; flex-direction: column; } .DataUsage__info > *:first-child { flex: 2 1 0; min-width: 0; } .DataUsage__info > *:nth-child(2) { flex: 3 1 0; min-width: 0; } @media (max-width: 1300px) { .DataUsage__info { flex-direction: column; } .DataUsage__info > * { flex: none; min-width: 100%; } } .DataUsage__info__container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 30px 20px; flex: 1; min-height: 400px; } .DataUsage__info__table { display: flex; flex-direction: column; width: 100%; height: 100%; gap: 2rem; max-height: 400px; overflow-y: auto; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .DataUsage__info__table:hover { scrollbar-color: #808080 transparent; } .DataUsage__info__table::-webkit-scrollbar { background-color: transparent; width: 7px; } .DataUsage__info__table::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .DataUsage__info__table::-webkit-scrollbar-button { display: none; } .DataUsage__info__divider { height: 0; border-top: 1px solid rgb(var(--color-gray-300)); margin-right: 1rem; } .DataUsage__info__row { display: grid; grid-template-columns: 1fr 0.8fr; gap: 10px; color: rgb(var(--color-gray-800)); font-size: 16px; } .DataUsage__info__row__label { font-weight: 600; } .DataUsage__info__row__value { display: flex; flex-direction: row; align-items: center; gap: 0.35rem; } .DataUsage__info__row__booleanIcon--true { margin-left: -2px; color: rgb(var(--color-success-600)); } .DataUsage__info__row__booleanIcon--false { margin-left: -2px; color: rgb(var(--color-error-400)); } .DataUsage__mtu { margin: 30px 20px; } .DataUsage__mtu__summary { margin-bottom: 2rem; } .DataUsage__mtu__current { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .DataUsage__mtu__number { font-size: 20px; font-weight: 600; color: rgb(var(--color-gray-900)); } .DataUsage__mtu__percentage { font-size: 24px; font-weight: 700; color: rgb(var(--color-primary-500)); } .DataUsage__mtu__percentage--warning { color: goldenrod; } .DataUsage__mtu__percentage--danger { color: rgb(var(--color-error-500)); } .DataUsage__mtu__date-range { font-size: 14px; color: rgb(var(--color-gray-600)); } .DataUsage__mtu__progress { width: 100%; height: 6px; background-color: rgb(var(--color-gray-200)); border-radius: 4px; overflow: hidden; margin-top: 0.5rem; } .DataUsage__mtu__progress__fill { height: 100%; background: linear-gradient(90deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-400)) 100%); border-radius: 4px; transition: width 0.3s ease; } .DataUsage__mtu__progress__fill--warning { background: goldenrod; } .DataUsage__mtu__progress__fill--danger { background: rgb(var(--color-error-500)); } .DataUsage__mtu__warning { color: rgb(var(--color-error-500)); font-size: 14px; font-weight: 600; margin-top: 0.5rem; text-align: left; } .DataUsage__mtu__average { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .DataUsage__mtu__average__label { font-size: 17px; color: rgb(var(--color-gray-700)); } .DataUsage__mtu__average__value { font-weight: 600; color: rgb(var(--color-gray-900)); } .DataUsage__mtu__averageRange { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: rgb(var(--color-gray-700)); } .DataUsage__mtu__averageRange--range { font-size: 14px; color: rgb(var(--color-gray-600)); } .DataUsage__mtu__averageRange .NiceDropdownDash3__field { min-height: 0; } .DataUsage__mtu__chart-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 16px; font-weight: 600; color: rgb(var(--color-gray-700)); margin-bottom: 1rem; } .DataUsage__mtu__chart-title .ToggleSwitch__button { min-width: 60px; } .dark-mode .DataUsage__info__row { color: rgb(var(--color-gray-200)); } .dark-mode .DataUsage__info__divider { border-top-color: rgb(var(--color-gray-700)); } .dark-mode .DataUsage__mtu__headerLeft { color: rgb(var(--color-gray-200)); } .dark-mode .DataUsage__mtu__number { color: rgb(var(--color-gray-100)); } .dark-mode .DataUsage__mtu__date-range { color: rgb(var(--color-gray-400)); } .dark-mode .DataUsage__mtu__progress { background-color: rgb(var(--color-gray-700)); } .dark-mode .DataUsage__mtu__average__label { color: rgb(var(--color-gray-300)); } .dark-mode .DataUsage__mtu__average__value { color: rgb(var(--color-gray-100)); } .dark-mode .DataUsage__mtu__averageRange { color: rgb(var(--color-gray-400)); } .dark-mode .DataUsage__mtu__averageRange--range { color: rgb(var(--color-gray-400)); } .dark-mode .DataUsage__mtu__chart-title { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DiffPreview { background-color: rgb(var(--color-gray-200)); margin-top: 30px; border-radius: 5px; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; } .DiffPreview__oldValue { text-align: left; color: rgb(var(--color-gray-700)); } .DiffPreview__arrow { text-align: center; font-size: 20px; color: rgb(var(--color-gray-600)); } .DiffPreview__newValue { text-align: right; color: rgb(var(--color-primary-500)); font-weight: 700; } .dark-mode .DiffPreview { background-color: rgba(var(--color-white), 0.1); } .dark-mode .DiffPreview__oldValue { color: rgb(var(--color-gray-400)); } .dark-mode .DiffPreview__arrow { color: rgb(var(--color-gray-400)); } .dark-mode .DiffPreview__newValue { color: rgb(var(--color-primary-400)); }.EditMemberRoles__header__org { min-width: 260px; } .EditMemberRoles__table__projectRole { min-width: 220px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ManageMembers { display: grid; } .ManageMembers__mode { margin-right: 1rem; min-width: 160px; } .ManageMembers__name { font-size: 16px; line-height: 22px; font-weight: 600; color: rgb(var(--color-title-dash3)); } .ManageMembers__email { font-size: 15px; line-height: 1.2rem; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ManageMembers__orgRole { font-size: 16px; line-height: 20px; font-weight: 600; color: rgb(var(--color-primary-500)); } .ManageMembers__orgRole--noRole { font-size: 18px; line-height: 24px; font-weight: 600; color: rgb(var(--color-gray-500)); } .ManageMembers__userRole { margin-top: 5px; font-size: 15px; } .ManageMembers__roleIcon { width: 14px !important; margin-right: 7px; } /* Dark mode */ .dark-mode .ManageMembers__name { color: rgb(var(--color-gray-300)); } .dark-mode .ManageMembers__orgRole { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .AuditLog__showOrgs { display: flex; align-items: center; margin-right: 25px; } .AuditLog__showOrgs--text { margin-left: 10px; } .AuditLog__wrapper { border-radius: 10px; border: solid 1px rgb(var(--color-gray-300)); min-width: 1000px; margin: 0px 2rem 2rem 2rem; } .AuditLog__filter { display: flex; height: 100%; } .AuditLog__filter__label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); } .AuditLog__cell { width: 100%; margin: 10px 0; } .AuditLog__cellTitle { display: flex; justify-content: space-between; align-items: flex-start; color: rgb(var(--color-title-dash3)); font-size: 18px; padding-bottom: 10px; } .AuditLog__cellTitle--left { font-weight: 600; } .AuditLog__cellTitle--right { display: flex; align-items: center; font-weight: 500; } .AuditLog__cellTitle--icon { font-size: 24px; } .AuditLog__cellContent { display: grid; grid-template-rows: auto; grid-template-columns: 0.5fr 2fr; } .AuditLog__rowKey { display: flex; flex-direction: row; align-items: center; margin: 8px 0; min-height: 26px; } .AuditLog__rowValue { display: flex; flex-direction: row; align-items: center; margin: 8px 0; font-weight: 600; min-height: 26px; color: rgb(var(--color-title-dash3)); } .AuditLog__rowValue .TagPill { margin: 0 10px 0 0; } .AuditLog__rowValue a { text-decoration: underline; cursor: pointer; } .AuditLog__apiLink { display: flex; flex-direction: row; align-items: center; margin: 10px 0; color: rgb(var(--color-secondary-500)); } .AuditLog--endRow { margin-bottom: 0; } .dark-mode .AuditLog__showOrgs--text { color: rgb(var(--color-gray-300)); } .dark-mode .AuditLog__wrapper { border: solid 1px rgb(var(--color-gray-600)); } .dark-mode .AuditLog__filter__label { color: rgb(var(--color-gray-300)); } .dark-mode .AuditLog__cellTitle { color: rgb(var(--color-gray-300)); } .dark-mode .AuditLog__rowValue { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .StepProgress { display: flex; flex-direction: column; } .StepProgress--expandVertically { height: 100%; } .StepProgress__bar { display: flex; justify-content: space-between; margin-bottom: 2rem; } .StepProgress__step { position: relative; flex-grow: 1; display: flex; flex-basis: 0; justify-content: flex-start; margin: 0 7px; border-bottom: 2px solid rgb(var(--color-gray-200)); padding-bottom: 9px; transition: 0.2s all; } .StepProgress__step:first-of-type { margin-left: 0; } .StepProgress__step:last-of-type { margin-right: 0; } .StepProgress__step:hover .StepProgress__step__name { color: rgb(var(--color-gray-600)); } .StepProgress__step--canClick { cursor: pointer; } .StepProgress__step--highlight { border-bottom-color: rgb(var(--color-primary-300)); } .StepProgress__step--error { border-bottom-color: rgb(var(--color-error-500)); } .StepProgress__step--active { border-bottom-color: rgb(var(--color-primary-300)); border-bottom-width: 4px; } .StepProgress__step__name { color: rgb(var(--color-gray-500)); font-size: 20px; font-weight: 500; font-family: "Onest"; } .StepProgress__step__name--active { color: rgb(var(--color-gray-800)); } .StepProgress__buttonRow { display: flex; flex-wrap: wrap; margin-top: auto; width: 100%; align-self: flex-end; justify-content: flex-end; } .StepProgress__buttonRow .button { margin-left: 10px; } .dark-mode .StepProgress__step__name { color: rgb(var(--color-gray-300)); } .dark-mode .StepProgress__step__name--active { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .StepProgress__step:hover .StepProgress__step__name { color: rgb(var(--color-primary-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .Form-dash3 { padding-bottom: 15px; } .Form-dash3__title { font-size: 24px; font-weight: 500; color: rgb(var(--color-primary-500)); margin-bottom: 30px; font-family: "Onest"; } .Form-dash3__section__title { font-size: 18px; font-weight: 600; transition: 0.2s color; margin-bottom: 0.3rem; } .Form-dash3__section__title--success { color: rgb(var(--color-soft-purple-600)) !important; } .Form-dash3__section__title--error { color: rgb(var(--color-gray-600)); } .Form-dash3__section__title__icon { margin-left: 10px; transition: 0.2s color; } .Form-dash3__section__title__icon--success { color: rgb(var(--color-success-500)); display: inline-block; } .Form-dash3__section__title__icon--error { color: rgb(var(--color-error-500)); display: inline-block; } .Form-dash3__section__description { font-size: 14px; color: rgb(var(--color-gray-600)); margin-bottom: 1rem; } .Form-dash3__section__divider { height: 1px; width: 100%; background-color: rgb(var(--color-gray-200)); margin-bottom: 30px; } .Form-dash3__row { display: flex; align-items: center; padding-bottom: 30px; font-size: 14px; } .Form-dash3__row--noMargin { padding-bottom: 0; } @media screen and (max-width: 48em) { .Form-dash3__row { flex-wrap: wrap; } } .Form-dash3__infoColumn { font-size: 15px; width: 350px; flex-shrink: 0; color: rgb(var(--color-extra-indigo-dash3-600)); line-height: 1.35; padding-right: 5px; } .Form-dash3__infoColumn a { text-decoration: underline; font-style: italic; color: rgb(var(--color-extra-indigo-dash3-600)); } .Form-dash3__infoColumn a:hover { color: rgb(var(--color-extra-indigo-dash3-800)); } @media screen and (max-width: 62em) { .Form-dash3__infoColumn { width: 200px; } } @media screen and (max-width: 48em) { .Form-dash3__infoColumn { width: 100%; margin-bottom: 10px; } } .Form-dash3__inputColumn { display: flex; flex-grow: 1; } @media screen and (max-width: 48em) { .Form-dash3__inputColumn { flex-wrap: wrap; } } .Form-dash3__input { flex: 1; margin-left: 1rem; } .Form-dash3__input > .button { height: 37px; width: 100%; } @media screen and (max-width: 48em) { .Form-dash3__input { flex-basis: auto; width: 100%; margin-left: 0; } } .Form-dash3__input--noInfoColumn { margin-left: 0px; } .Form-dash3__input--half { max-width: calc(50% - 10px); } @media screen and (max-width: 48em) { .Form-dash3__input--half { max-width: unset; } } .Form-dash3__gutter { padding: 15px 0; display: flex; justify-content: flex-end; } .dark-mode .Form-dash3__title { color: rgb(var(--color-primary-300)); } .dark-mode .Form-dash3__section__title { color: rgb(var(--color-primary-400)) !important; } .dark-mode .Form-dash3__section__divider { height: 1px; background-color: rgb(var(--color-gray-600)); } .dark-mode .Form-dash3__row { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .Form-dash3__infoColumn { color: rgb(var(--color-extra-indigo-dash3-300)); } .dark-mode .Form-dash3__infoColumn a { color: rgb(var(--color-primary-300)); } .dark-mode .Form-dash3__infoColumn a:hover { color: rgb(var(--color-primary-500)); }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .status-badge { display: inline-block; text-align: center; border-radius: 5px; font-size: 85%; font-weight: 700; padding: 3px 8px; } .status-badge--success { color: rgb(var(--color-white)); background-color: rgb(var(--color-success-500)); } .status-badge--unused { color: rgb(var(--color-white)); background-color: rgb(var(--color-secondary-500)); } .status-badge--error { color: rgb(var(--color-white)); background-color: rgb(var(--color-error-500)); } .status-badge--active { color: rgb(var(--color-success-600)); background-color: rgb(var(--color-success-200)); } .status-badge--disabled { color: rgb(var(--color-error-500)); background-color: rgb(var(--color-error-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PasswordForm { padding-bottom: 0; } .PasswordForm__strengthBar { margin-top: 10px; } .PasswordForm__rule { display: flex; margin-bottom: 15px; font-size: 15px; color: rgb(var(--color-gray-700)); } .PasswordForm__rule__last { margin-bottom: 0; } .PasswordForm__rule__label { font-weight: 500; line-height: 18px; } .PasswordForm__rule__icon { display: flex; align-items: center; min-width: 30px; } .PasswordForm__rule__icon--success { color: rgb(var(--color-success-500)); } .PasswordForm__rule__icon--error { font-size: 16px; color: rgb(var(--color-error-500)); } .PasswordForm__rule__icon--pending { font-size: 16px; color: rgb(var(--color-warning-200)); } .dark-mode .PasswordForm__rule { color: rgb(var(--color-gray-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .mfa-settings__container { margin: 1rem 0; } .mfa-settings__loading { margin-bottom: 4rem; } .mfa-settings__phone-number__container { margin-top: 1rem; } .mfa-settings__method__container { margin-top: 1rem; } .mfa-settings__button-row { display: flex; } .mfa-settings__alert__button { display: flex; justify-content: center; } .mfa-settings__disable { cursor: pointer; color: rgb(var(--color-error-600)); text-decoration: underline; } .mfa-settings__disable:hover { color: rgb(var(--color-error-700)); } .mfa-settings__phoneInput__container { min-height: 40px; color: rgb(var(--color-secondary-900)); background: rgb(var(--color-white)) !important; border: 1px solid rgb(var(--color-gray-400)); border-radius: 5px; } .mfa-settings__phoneInput__input { width: 100% !important; min-height: 40px; border: none !important; font-family: "Onest"; background: transparent !important; font-size: 16px !important; padding-left: 60px !important; } .mfa-settings__phoneInput__button { display: flex; justify-content: center; width: 50px !important; border: none !important; background: transparent !important; } .mfa-settings__phoneInput__button .selected-flag { background-color: transparent !important; } .mfa-settings__phoneInput__button .selected-flag :hover { background-color: transparent !important; } .mfa-settings__phoneInput__button .arrow { margin-left: 5px; } .mfa-settings__phoneInput__button .up { margin-left: 5px; } .mfa-settings__phoneInput__dropdown { left: 0; top: 50px; width: 510px !important; max-height: 250px !important; background-color: rgb(var(--color-white)) !important; color: rgb(var(--color-extra-navy-dash3-900)); border-radius: 5px !important; border: none !important; padding: 0 15px !important; margin: 0 !important; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .mfa-settings__phoneInput__dropdown:hover { scrollbar-color: #808080 transparent; } .mfa-settings__phoneInput__dropdown::-webkit-scrollbar { background-color: transparent; width: 7px; } .mfa-settings__phoneInput__dropdown::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .mfa-settings__phoneInput__dropdown::-webkit-scrollbar-button { display: none; } .mfa-settings__phoneInput__dropdown .divider { border-radius: 0px; border-bottom: 1px solid rgb(var(--color-gray-300)) !important; list-style: none !important; } .mfa-settings__phoneInput__dropdown .search { margin-top: 0 !important; padding: 25px 5px 10px 5px !important; } .mfa-settings__phoneInput__dropdown .search-box { min-height: 38px; font-family: "Onest"; font-size: 16px; line-height: 20px; box-sizing: border-box; border: 1px solid rgb(var(--color-gray-400)) !important; border-radius: 5px !important; padding: 8px 13px !important; margin-left: 0 !important; width: 100%; caret-color: rgb(var(--color-primary-500)); } .mfa-settings__phoneInput__dropdown .search-box:focus { border-color: rgb(var(--color-primary-300)) !important; } .mfa-settings__phoneInput__dropdown .country { margin: 5px !important; padding: 5px 8px !important; line-height: 1.5em !important; font-family: "Onest"; font-size: 16px !important; list-style: none !important; border-radius: 5px; } .mfa-settings__phoneInput__dropdown .no-entries-message { font-family: "Onest"; font-size: 16px !important; list-style: none !important; padding-bottom: 25px !important; } .mfa-settings__phoneInput__search { background-color: rgb(var(--color-white)) !important; margin-top: 0 5px 5px 5px !important; padding: 15px 0 5px 0 !important; list-style: none !important; } .mfa-verify__section { margin-top: 1rem; margin-bottom: 2rem; } .mfa-verify__title { font-size: 18px; color: rgb(var(--color-primary-600)); margin-bottom: 0.5rem; } .mfa-verify__message { font-size: 16px; line-height: 1.5rem; color: rgb(var(--color-gray-700)); margin-bottom: 1.8rem; } .mfa-verify__code { display: block; margin: 0 65px; } .mfa-verify__qrcode { width: 28%; display: block; margin-left: auto; margin-right: auto; border: 1.5px solid rgb(var(--color-white)); } .react-tel-input .country-list .country { margin: 0; line-height: 1rem; } .react-tel-input .country-list .divider { margin-top: 0; line-height: 0; } .dark-mode .mfa-settings__phoneInput__container { background-color: rgba(var(--color-white), 0.05) !important; } .dark-mode .mfa-settings__phoneInput__input { color: rgb(var(--color-gray-400)); } .dark-mode .mfa-settings__phoneInput__button .arrow { border-top-color: rgb(var(--color-gray-400)) !important; } .dark-mode .mfa-settings__phoneInput__button .up { border-bottom-color: rgb(var(--color-gray-400)) !important; } .dark-mode .mfa-settings__phoneInput__dropdown { border: solid 0.1px rgba(var(--color-gray-700), 0.5) !important; background-color: rgb(var(--color-extra-midnight-dash3-900)) !important; color: rgb(var(--color-gray-300)) !important; } .dark-mode .mfa-settings__phoneInput__dropdown .search-box { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-gray-300)); } .dark-mode .mfa-settings__phoneInput__dropdown .search-box::placeholder { color: rgb(var(--color-gray-500)); } .dark-mode .mfa-settings__phoneInput__dropdown .search-box:focus { border-color: rgb(var(--color-primary-500)) !important; } .dark-mode .mfa-settings__phoneInput__dropdown .country:hover { background-color: rgba(var(--color-white), 0.1) !important; color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .mfa-settings__phoneInput__dropdown .highlight { background-color: rgba(var(--color-extra-violet-dash3-900), 0.2) !important; } .dark-mode .mfa-settings__phoneInput__dropdown .divider { border-bottom-color: rgba(var(--color-gray-700), 0.5) !important; } .dark-mode .mfa-settings__phoneInput__search { background-color: rgb(var(--color-extra-midnight-dash3-900)) !important; } .dark-mode .mfa-verify__title { color: rgb(var(--color-primary-500)); } .dark-mode .mfa-verify__message { color: rgb(var(--color-gray-300)); }.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACmCAMAAAACnqETAAADAFBMVEUAAAD30gQCKn0GJJ4MP4kMlD43WGf9/f329vcBAQHhAADx8vHvAwL8AQL7UlL4RUUzqDP2MjLp6un2Jyj0Ghn2PTr9fHvi5OJYuln7Xl75+UPpNzXUAQH29jH6cXC+AAIAJwBNtE/23Ff5aGdDr0TJAQHsZV3qR0IAOQB3x3fdRD/Z2NvuWFLkcG7fVlH4kI4AAlXO0M8BATsdS6MCagIBfQEASgPoKSc4VKL442q4xeQAigD46eetAABYd9jvf3nZMiwAAoD30zz55X5ng9tPbKZnwGXz8x77+lY7OTjzzikABGsenh72pKNPldEAWgHgGBgAACH88/Gqt95JR0OWAwP3uLd/qdr53kMBBJJ3d3XMPTpWer8NnAwABKPH1O1VVFIuLSz13NtZnlf2kEh9keLn7vfZ4vNkZGHzvwJIXZRfZLuDwfv4y8tvk79LlUblzsxorGcCBusFKuYCCcdmfq5jqvlxt/tzktEABLb8/HL2tlTAw8SLlMFpj/ZlpNhBZ81BYbQcGxuToN9SYdjXY2Lz7lD0dCQ6S9Dm0EUCYPdDlvWWvd2AnviXqc11eMZTqPc3cPMCRev16ZrRUE0Hf/tNT7HIJyTptDVTffSsTkvhtgQ0T4jigoFUx/g+hsX9/QUHzQY1dbJ7sHV02Pduvd0leiK1XmaTrfpCQPgELrrdsrY1NamgyPrh03iPxosvX92ysbCgoZzk5kP1YD7t6AILnu+45LykNS40qvXDdHnR6tBennz6u3TSxU1Or9Swz6wqzCsPZKzglJbIqEY8hDhyAgFzbJxuOC+Li4d9sJLFsnhwbvH2d1A3kzAqPZQITsN76nq2dzaZdKJf4F6RJkb078YFiM+tnWZGh2F+dDibykYoMcsnekdI1UhCAwWb25qVkEq43km9yBrclQMGwfyZ3/zZ2QK9gJxsJWCBUk32QwqOSYKRxh6Xdm3B4oMW22EPZzawnR72kgZltCqPxrdH1dkBkqDdWwwMwMO9O2sqKXHvipPGJkzlRVLhJjVIs9KrAAAAB3RSTlMA/v3+/Pn9Fk05qAAAUU9JREFUeNp0nAlYVNcVxzHazoroGBkXhAgCCjMsroDoKIgKdFABBwQUnSAoCqLRFBfcCBIM4kbqShO1hlSrCJqQQmNssVFqjBarsdjFJWlMTOLXJDZt8/X7+j/n3pk3vNq/bb8+3nbP79137/+dd954qTVt8uTJL73OMhqNer03ady4cWOhWbNmjV+0FfKGjMb36Y9/1fXUst9cb2y8/lpb797z5k2dOjXVD9Ljn59fcHBwQEDAgGch3l9on6feeeedn0r9kvT222+/sErRgvcDArwV8f5tN/rcvPnMZ22pqVFRSVGjR38k9Rsp9fLql/MXLj20VGjt2rVeak2Og/auI/kHBQ3We/tCo0ZNhwYNGj58/NaWlpbOyMhIX1//2/jTrICvckhXruQsWbJw4cL3tzhPORynSk5lZWVtglL9IkmdDQ05NqvVGhLwbKSUL+Tvb9yH/2sj+eN0IZZ3fvq3Hnp71ZtCOyofdnTYSzq9xX7UtsF9+/Y1FpeZT54sc2aUlq6Jy89YM/qj2oZaoeOkMR8dV/Tee++NWb04rrA5MRYKDAyc/NKCpwDIyKhE9LEzZ/r4DLQAAE6EyEeM6AcNH7m1pTMnB+fHX7tG9Bs0Xt+GwM/frqm5tz950aKDk6rsiA0xbUrbRAii/BDeV9bGhQsPRlyOCAuZ9GykZwT++n2RHPnVYQU+oaFDPQD8jEQAPiDdaLPaHGVXbn/O7YHQuIH9B/gYgzts1iqrtSopKWlNRkzS6I8arFaOFvTfew8AfiYil/rN6sWTKwtbArOzExISUl7+vwCuQNt8Bg71AQCcTwNpWeFbW3IIQEmJr08XgIzX2xDcvZrs7Jru5EWXwwKSwh2RkQ77w7Q0bXp6YRoDaKO+kZl8MCwsYpJ3pEf8liAAoPhDhqUMQ/wAkF+oqKiosJYA7HxotdnTtVe6Pr/S0h+AI90QffU3T9obGuwdD5PqkmJiMtbM+ajWI/60TX0COhoarAAE1dfXV80FgMmLi1oSKP7/B6ASAGyBV4YM7D/Bx8/bF7g5fgmgEwCCSiJtJQRgxEi9zZqVdYUu9pW0tLCIgOvxdR0dpxx5aWl7EzV7CYDV+tXnCzMzkzMvE4AFlTuhZaSf/OQny1L32RC+JcHikzJ06NAJoe+YNKRbsbG3xPlWZTxssNmdOP/J27ffudLJ60V7DAaT1lxRVvfwYe3Jlrq4uJiKjAwAcIWP+BkAhV/i7HA0uAG8BAIUf8qfzvwvgJcQf+XMK4GWi8OGTpgQ6uftzwC0LIM2WgcASwaXOBwlA7v6/YgAhFRt2pRGeu0/UyImbal77eHDo2kVAJAeKwE0fl6P63/5nSlTAKBCiR8AovbZEL9lf8I5AMD5booAE7OzY8X5fhGJi0/nTzTcMh+80iIBaF0APqvIu3EjqfRGcV3S4aSKYk8AaW4ADU4gOFlfn8sAXnoJBDpTCMDL87zU2kwATl+x1Nw+P2HChKHBBMDHFT8DwGjX11FSYu/f/aMf9XtOjwAacf2hmxRg7ywXDrr30kb7NVhDquo/z0y+nJs7ZUoYA5DxM4BFmcnJyV93PzjbvQhK3urqAYF7xflWVT5ssDaU4Ox7T9+6Ei4BaN0AUkvXJEExMTGHD9cdFgA2yfgZQAP1f0dJw0lrfS4BmIb4z5yZBgL/H8DibbehGROenQ0AQRhvZPwQAGDQ8wlqsFkmdP9ofr/n/OgK2ml1xxQECAAy/tdee++91wCA1mfWJy/KXUTr536T+O67764X2r9//T+3JkPdDx50f7qItDXfff+zeAxY1lYV0VCmPV1Ts5fGAGUYDbHpo0qT6vKTignAtWvXiuf0StwGZZPQybMPAYC8/xF/bj0AUPwvvzytKCdl6dMAvJxRuXjxkCHnL86YMXs2A8B4m4yWQTrdIp0uByMajcATJrwzXwCIiIjAFSrbJwGI+FlH00YH8/rQy5enQPsYgBK/BLCI1c0Afonhn/XjH8MNLP9o1Y4Pfg795N9hYQ23bt1q4fb07z+A/ITR2J8AFJnqOP7iuj7Fc35TK+9/bkPaM+NGiSnsB6wRIwGA4n/5T5Pzc5aeeAqAP1VCM4niWRqVgr1p1sEYlskNJQC4BQZbLJi0MAgCgBUKqYo3VEVEhIWFTZqXtYmVxiIAtB4QeDUAvMuSFBgAJCkwAKHlLAKw4wMIFG5URVgdLdwedEq6BuCgj1qzpi4uiVScYa6I0fWKJQVC2aRDY0eNWrlyECwMMIDDc2vZ6UF0F7z8tB5w4kTvtZ+ygklGkk4lvZ6sne45SDg8aJIQ2z+4Mmg0qcfauXPnfvPNN9XV/1S0VSWyf1Ls4FZ5aIHu/blGKb2UOM0ckq4PmsZ2b8yYMb2l4FbhX8ePHwmhuSPXkhaQ5q0tXzBvntdUUq9eSyFu9njXxpA74Leg198yktRWVI4OkAkymw2Q3WO90+nnN3u2H0QkHI6JpHHj2GvTYdsupd68GfVZ4yTJqJeUaNKhQ+rzCUvOMXEr//4vD3333XdLe+rRJx4iqumDnT2O5zW1HII1hPLy8pJGjz9GWgk9D61Al4fWkWay9VRbUa1GEVCYDRoonu0dr++n0ZQ0dMCNdDRYHVrtuImjWHQ80lvfl4WfhJetw1CFm6h+rkazd28iJHvyIe/IHt7ZOBY7o4GPH4smPqf7nRwz/sH6bmmi2HtvYiBUYPxEcZakt701PdsPAIhb3DBbYmIIAOK+F9HXJ6z7t799AwDI48+cOQRi66m2ogoAYVwIQEkQb8DrJza1azRWq9NpjUjXtg+aNXHU9EEQHW/YsGFD3toHMFZbgzUsDNPkPgAgpScG1vA4TgB8PZATAAoc6IasWPHhhwCQkyNCdwMIJCVqDabA8+cAAJFLYVD92dvpjvQe7ZcA7p0/350dEzNmy+iRAHBPrO9+AwB41Of4h2HoFdZYhsfL7ej7QmbSBdED/GkDXv+ju9Pv4i9mM+g09Rs1duKoQSQR/4whb7msbFhufHy8M2xup6AZ3sHzWOChaveIWQCtn00A7s/84MDuD4bd+fBDcYEukrVna5fwMQPAsqnQZOqqLtBzezysvHd6z/YLANndUELMGAmgXqzPfeON3+IE8PHbuL2YegYCAO+/fz/io2VMM+5HpR/BGXIPGCzix3oAaBo13aApK9Mahg8fNAo9ANsPGi7iB4BLZRUPH9advJGb6zx+3Jk7FwFtCNekNzQUabW3cAv0Ek9uUA0U+PGsY4NmzrxQVBS3e82wGQDA7bvI8SsAsgNP7y26HV4GALyeJzGaY5J18fZ4GT+3DwBK8/K2ZF/s7v46ZYwEsMJHrJ/gApBJ8QPAs9gh2BYBnT077OwUnvcBwB0/nCEAQPFBdADefv5dPEu3p2u18e39Bg2aPou2h9wNmP3wi7bGL9qsuVOcizoBgM/X0BBtamggK2wGABn+WSLw8awm9P4Du3ecys+aMWPGt6J9medF/EsBIBbxJxSFm4vM5moJAOGL+AHAO90jfglgy5bshO7uFAIQM2fkyhUr6sX6fW+MJQDYX1wvWI/+uOIc79mziJec4ESxDPGy6AF9RfzYHgBw02s7yswNhf1GDJ8+lvcfPgKrxfoAa0S9uP9HTV95LHdur8TzuF7W5OSqDdEGAFiaiIjk9U8hAMdw+1Ts3r37VPOMGR/K9l3k+CUA9P9b4c6y8LKC6upqAiDj3wpxD1Dix/m9Uku3KAD6xMx5DgC6xfrLYwnAEuw/jOJnAMHjpnvECwA8aK5YseK3EA2aogf0pQNIAIOaXI8S0/sBAPaHaLUEIOJHPmjUsWACACN7/qLVmoz2Zjabv3x8X+oBdP/DWeih94d9sHv3BzO+fOOND6l9C93xL00BgOy97dHo/ZHm6EcAwM8OHlZ+YLpFtF9eQAGA9+81pg8DQCzdU3D9Ef/YN3AC8OP4Z5D1DBg7XYmfAKitqYl7AA8AvDxxVLtGW1VVVhYRZjC0jhg/Tuzv3j6gCuEjfghGYd/cXrFk5BNqai4K633k938h/Zp15C8Tx68E7X7Dtm2b8QZEAH743j8gYQQwC8TGlp08Z7ZWC+k/4eFf6pc//Sje3+TZ/pFeqXkQ7hoIhhoAnve8ogRgCQZBMQsgTgBgXykpAoDKmpoIuJP/wMvzwaOKHkisVfUnDYZZ2J/k3n4ST/94UiHt2/d+Lx7yttFAXnP+60W6+X9ggQFzGDdeOJT791fQNAgAv/qHFFMAAJou7AWQBCAkKXzknW71bD96APnWQ4c+hthRsv1Ty2WNA4InwYYpzhJSW1MT+lmkxx9awyfNhQVmvf9+c9M4kVt1by8tsmuLub3I/in6er7URGkh1SZ1znfk/xR9o2oP7F8Pax1vbO8RgJcwhYp8BvpMcD1t+0GffPJ7xUo+CA54Yc+DPXv2vGA0vkBavfqIW+xeH3kr8iJ9QxJegQNpu/TMzZupnzXOkQ7+OkumeCCOU+Si2Sr7kR6RkQZ/iA0y62PWVKlUiLy8fsz1MSd6s+YhLz1vu0t7ILS4T1Rqn2cU9fF6YQdpMZIAG6dNmzZ5bX+7PZKGsXi0CM9xwZ+0DmuVnejxsHMDJu3Zu24vkrT+QTtYq4/8nvWHPzyeCa2HUySRbzMKAO9CGhZ15Pku67uGlaS7frzoeFat26uY2CpzijiIrbKfLdH2buy7eKLkR8oAaXWhQNLH8+qEKirKy0tLS6O8bXVZQpvg8dPmbV/O+jH0IvRClLY06hkPAcBGqLa19ckBzC0HVg+0R9rQFpqFtWER1oBPhr3+eutPocevPzIaBwTseTORAu/rQ7sd2AgA4g69T1PlfmGVsX9fn8ESALk4ER5Gsb/Mny2tbzGkPQwASH1s2iTDBwC2yhYeVdgq+yXODAwpCCzAozT7Dml12fqR8VGcOMtk9A0pkUvsI7YvR+DQrl2vQLtWpdbFPAVAq8lgMrcygKEEoKQsJKTMYQgLDQn4ZN3r60T43ngSrH5g1rBcWaINAoCMX1plXq8GoBUAXNYX4RcfPqzVXa8tqk3bpATAVtnCVpytsp8tsCBifcJVil8BoFhfu7OE5RCyGn0HWxweQLYvf/HF2tp1T568IgD0Gf2MJilKBSCrPf5Cc3h76e4zuwmAv8ZqQ5cLMwwNA4DWn+IfwoeqX3/8kQvAQC2rGQCU+NkqywuiAqAVACa6rO/hYsR/uBi3wKZd7wGA1gPAcEvfhAQAmEEA4DwLEgo4/tmzwyYdYqurWF+9zWKxhCKlTjnV2WEBxkhHX5/G8jSZEZoKALWJWbuyYgWBVRgA6vqk9hgDNh54YtI2t2jbn5wBgAl2m1XTYAmxhFoNU5DG/uRnHuG/d/yjEa0X7kID+99tgu6OxTytxK8A0KoAaCGexz+rWHPpUtKaG4e1hwnAhhNZlLtMhwyG+HhDGVvl0PXZ2fv7w3oMe8vPijuf4of2AQCyutDmzWdI1zcv0Psr8SOFF2As0Th8Qr84CiEzcjSKni09b4l5C+al4r9uAcCBA1nthuYKc3spA4i0hWgNdFazgbK8n3iEjzct380S1rd/f+mkAECJH87O21/2v76eALQM4MiRX0+MKqXsFXSYAei8/d3WXLHaoQNTUga4AYSGiesPTSEASvwEwCrin4D4GYAv4m9MS5M5yalGX1uixccntCDwKqf5n5FSboGNBw4caG03m1tbz5zZs3v1bAAAKvtJDAuzAeD1c0r4DEBY4f4DKH4C8AclfgYQxFl0etRWAAj+RwjA6DUyfuoC3xt02F6JnwDQ8UNpeQAB+DTY6op/HxJLU+au3jj5JYRPwvR5ZoFN3v12oVxjkE+oXbG+4o71WH5dJa9VALD7wBPMArvP7AEAfaTVgm3NZkzcszHoBCvhM4BvhTcfMOCB8OZH/sDxp0hrCwA8PvKjNqkaAPaL80sAyvU3fF+sU1tptspDaRkA3gKAEIoforwaAPhZ3f2de4RWeUvAARqDKH65ZDKE7/nxriexm17ZtO0JxvhXX1n1Q5UAYCMQTCsvn7ybEuYL9JE2q9jfZJoSBgADEP5xt757MJM0xMcHUUOfzr9Pywlua+vtThhJAOvdPYDc/LjRayC+CxiDTm2l2SpbeJmPHywzyhLDXH1ICI96wEAcAlIr4ABKSThuXt4c75ByyJ2Zj9qDWbD2SSJmAdaqBSp5CdPoB5frx9LDdEVDG6C5cKnB/xz1kdB3rAcP2Bb7+X0q9GtOXirWU7HGEgBSwI/CoehosrIT2f7pFKmtNFvlYF4W/jvAI6kMoX2y1kBIZKBHu1PDwfNI7A1ZbP+UIgPMAn08hFnAIOROal3P6pnlzSQlK8pHf4F2s+AwjSRNvDsCadl76bQif9tbqDBdNvzPfxcy8+nCw1OULDDrOukEi7PXnngo+IDLY8UZZMmGOmsMn09yPTI8VwjhWEUkXIY4mYVu2/7qq9tJXuqsLoxJj+XMZqEWUmdnskabf8olWOI9Rl9Ik07vqeh1id/EpqZRUGKOhksqxveuZGm0Idx3g//+BPrd734n793wXnuFEoUOXc+ClJcrC4wiI8rv0On4GNUbbh8TBRtwDOPVWerxv2P9SuiPukKcBwd0xRPusuLSH+/xUmd1r9dm5XsuZzZ35kBLxCt+ANBoihA5CY6YAODEmnS8KRpIr7cBgJp2uyDkahcmi+EAUE7SpvPQFRrw9yfcvk5nPHUyApDokQWPBQCOXN7DafPo+ABH1RN8fL0t6OrVq1X3eC7C8dVZ6vHu2P/4xz//WQDAQ44rnmhXFlrYYxeAW+mJ6bcSEyUAEFCyqJdPfkX6HLp8+fJXBEBTyAR2uAD0tWjSfbh9BGAUxX/1zi8HVXcpAHZq03m9BNBptXY4ET8DUOKXANJk/AxAFETYbO/ayJ3aACAwcH3gep/Qru4PUZ8w/nW8X9gWOMSdZR7bRG81jkOU1XjeDUArFOey4i++WFW1vr4NAMTLaFjLvekuAJvylYKIXIcvFcQItzLB9o5G44CzylcA+Pe1+GjS+fojwGDO4hbcOfuXX35bnZ0deIgB7Nyp1QqrygB+1Wb9lbOBAUQTAOV1XuwhdRZXI7Q3UVplfSKS45aEc0MH9p/yTveKkQCw7WrIXneWmYDMrD3++Mnx47x8Iqt8GiTs4+bJ8y6V3Xj4sOLkjV27qjA9AYCBvGJsQkLgXraKBAAEOsCdZPfLdbjjRwQAUOJvxy7t/BK+NKuPhqVYTX6PEHJ101+qq8MWLcrUqdf/ne5Pa+OvMLPRPB3dBw+ychaDSkers7gaFiAliv31sSHr14euv0o8n322XoeAHXhwOyuydsMYwJDax0+ePD5OywCA8NM4fAIwdWfdtIqKvKyMXbuKDPWFRS8wAG3r3lvtF0RBAveANuqv7K2Dc+3K9Z/g7gGtlKRja9sjPjSQF6/eqc7+9ttztKz3Z6uarl22BcqL+jvdo1URvyqzGbSUpOTX6XlkW0mvpaqzuBLA6dOxOD4DKMA7koRzaMyUf3+xczUCvlVgic+m+CWAIUNqjz95vEkBwJdfAniVhj6+/xuRjGyTAO42XRjVxJMfACjxE4CuveRlC2SO7d13NJD59yJFSQD0QRj+tPHu7flhpqv6y+pv/9lF7wn0QexZ4g1bBIBZBCAnIsJaEm+QAJT4f/Naqrmndd2wCFMPhuHTp3OWQDk6vS1hfcL+6v6I/iU8vgPAkAs1+5vPIn62zt6+56AsdNChjx49OqcvwsEQPx2OjwcAIv5d+YW5hfkSgNZ814wNGADHP0HEo58Q8PXe2Fjx/JkCxd7T8uXn+CUA3P4AILcPFu8NuqrDziF+lND4hfCjigAQsywKozQN0Esc8eJ89LTHLk8+7ZmV+LnBnJX2KNAA8KvVQ//9xWTYkDNnJq9VW2m5XF8vl2lSx/X3AMDhU35kee7yXS94mfh8St78RNZDOetAEwBAmaRjoS6t4a7M0TKFcWxNtfE+cvvgsWKCjs3U8jwFAGxd0w150DIAkHO0QSjaSPM3Pa6BI+RnVtojAPAErBRo6AeHtN1YDP8uRra1aiutXgYALTZ1H287pn+SxAAA0pFB0aQT7wuzKbOQwV93kfC/Qt13j/TI0k5kg2Yqox1YY0VBwlKdWXgx6VvLzKlRrPEjRU53Q7QQdpenE/bW7G7JBpZOpUmfLVi9arXQWkhtpdXLZP8WzFsQFx3Hh2vm/CjrBZaX9UbvmzenotZWWmpZ3AOJUgvCtkq/2u2Vy0lmbiOfZhxLqSWuyC/FpS5qbCyiW/6LUm/om2rv6mrvR9VGyCRkNErs6uOprS2bcpaZ91Bbd0CTmsTiPd/i8gtuzxGVPpoIebTY61qJ+aT9pJOytEnQ6NfiSBlxcbWsMTRG7LBtdFvJ8nxI9FAyKEhgkJRa4jqHpigjQxMZqamry/fV1Hk3eWRx198zmjTpmEZovSbe7tRGq4+ntraGnlY9nJfT47Wu5YAGVIKSZIEF7y8KOrg9R5C++r2iI6/W9myvF2p3/YNwyqQYcl/Fc14TkcNAk+r60AkPhBzg0wkA4GNi2fyDCMAg5VURKkfz4uwOzWJN0GBNuR0Qrnk3jTrrqlh68O1wvDlyNCBp6R+k0Tqq7ACgOp7K2koA6b7xSgFGeuTgvkElWBYAEDgidxVY8P5c0DGMrbLTgx908tVTPdo73uumw+4baW94WByTlp+fFuMCkJGhBqD1ACCeFP2pTg/WVzkgTpiXUV6GtCCeD4Li82N29vYGoDs1/Lrvy379ngcADaWtg0JwMAe8ufp46gIM+brdYnEKL4/lSF5fItqjFE6ms6/g/UVBB18Qb1xgeno4x7qqf/XUKdr81i2ZIfJaU1LR0YEsbUxMWmnFUQEgP5/sYFxceXlWn1XIGR6w0JzDWosGZ2SIBgeFwJvDeBBvtxWVz5Ior2Xle486i4KIO1fP3aEXkiv0QQ47pa9CQoTTnP304227d08ejwMsszRaylwAZIGDvwCw/RQ8ObRRaBUXcIiCDpwPAN6NvQoN5vgHngOA5XT7NDVJa+31WUXSjRsxa27EXEuLawGAo3HU/+OysnBjlpdmPeNnExkYV16+HO3NEKMQJjgrGizjl1a0MTLI4xL2vek9KrBg+IiuhBRUFhMAfrojiae74Kcf715m8j0+ngDgj/vBR9QOAyArUmj2njc5cJmkOLCKa5u5PTO4YMM7cR0REPELAMtxxA0bpDX3SsXYFwNdu5bWmZN0bc7RjNraOMSPHpBRCgCrKWcYKq//njNrp4kGmyCQCQlGg5X40WDZA3z6u3vAnUEjRtw5d+5LAJi/Qm9xcOstFht9JxHp9/TjDeteKJyd7AFhuVPKhFX39vcXXd4hssjbuQO4IGxkAD6iPZy1Rg9Yj/g5/IGPAGD58kJ42Q0bwnE8AUDG39mZl5eToyMAiL62Fok2AkD34O7QM26jlIcG14oui6sYEjymrpxeyuUJlaZuqViWnz5Y0x8AQpt7J6V6Hxs+4k4N2chD386f/6EeRseB9lso89oBY6I+3lhVAQYDSHfud5qEkUEWGftj574ii2xWUqJyPTqfKOjg/WlQ5P7v4wJwSguhoJEV7hW1huOHKO1xDQD45aJWWyoAUAPOhBEAgwtAbZ2YhC2haDA/bbkfNvKmxmRobJF5mgEDNL/Q2EPKU72nD7rPPhq5rwf9CIDdageAUK2hod4GAKrj/U8BRiQ/ju8/R/7UJ4Ssbl9HutbpL63uUws2RH/k5bKe1vrKq8td1nsflDsXAES5OXQY9da639SS6uQswAC0ByyTlR6QAQkbEgIBQNbicggY8qCpdRpb3M6dNAguS4rTWC4ZjwVCXIABCitgdZ2RGNBDMAs4bSUAoDre/xRgsCFYvx5hkbkVVjfIv6/L6j61YIMLOs7ysuvttdSRV+vcnqEecycAiFpbFtUbiEpbzpiy6NKsDlhL/pS1ZQuq6TZwkjCYJOtuSVNJpZ8nIQeaf/NmPlKyz9R+b4T++cj46JF+9iM9JK2un5+0uurjkX2T5Qsso5Df/7O6smCj5/a93oI+5eUjKu0JVpLMJK/r18PDZRaWq4i3k0ykcHbLKmcqaoVlCvcQtGjEjyZ6emF1Fre3CpDa6vKZhbHn8wdLueytnqU8n7CTFSllugeMik0WaJd6CrUZDTfmwep/cY3S5M/hmqjP73V9Mj0uKjnA7ZQtFebiRWiVt8x/yrHW6GE1SYf8Hraa2psUa2m0QWRlQ0QWd8FiUrkrL5XK+ytm13iiUog3mzZtQbANsrpL7CfpySCz+G8BXEChYRVAxj1vSsmCDVUBxTfFTq3zpDO+Li5/Q9OFlrg6tdX2MovZCn6MtXM7PS8LAPQ+HQA48IcPeardqFesJtf6HvL2bby97tat9unCCQIAz/ORkWKeBwB3PgafKWxOFVYXCYvjwuqe4NAlnpcIgIhcFkQAAAfOfwwNIwAALR4IkKEpMJp6ZrWj1QUUgx2Yde32G/hIB+VVx6LUVlsCcF2Dyt4MQBzvFQgAKP62pvA2CUBaTZmF/RjLEV+dn7nuVvuo4fQRFQBYoHRH31DKAgdX5EMSb0ZGXIy0uiU+JcLqEoBprvgZgBK/BKDEHxYBAIMEAG16NQDoJYAdO7QCQAKnL043N5+mbpB4qNEZ77CXlFRk5FMJfFOd/OyOxJ/deZ1A99+8Weue5gjALphFLL+yezcB2AhZmy5Y2Wnh9feSCGE1ET8DAM2D3WeHDKFuMGi80R/hl+CjqvgSBsBlc5V0vMpCqigRF4viN7AVXV252B3+S8jaKtdTZoH5q7IIaUUjJnEBhYHWxysA3ty4482Nb2r5+KyMuvw64fQqnBknT2aU7aQe0PX8MqoXaKUsaCvivWvQmiQA7qHQ5t7bkSt5RctWYzcD2MEAwsNDJICvFi7sewf6knRnIltPn8vdxGNYvGkcAPj42OPt9hJfTqpyAws1GRnaImRBXQAQf4mBG7i2snwnaxlp51R1FjnEYRfqgBo69nHO0YD1ngAKNxbiP7S9BFAXV1EhnN7D8KLw5riiirq4lXUHK47VIf6mC63tTU3trU3T78IJilJSpQcAwK5XeLlQAXCg6oMbVYife8DCep8RSqkpACD+e0hL70UPGD5S70/pLXQ6pyhY4BzfYi20uNDgBoD4Bxi4gQyQZnVZPK3OMquXOecIdgQA0vMGuPwbD+yg9RIA4o8T20+tAFvxlV59Te6y0Vh5wWQytLYaTOgBAFCp3KNiEPzxrldUADD8VV06/wUWfw4AZDUVqzoSy2GXHwyZiTGgHwGhLHGoj7Mk0jmUAVS4D54BxcVcr90E5fUfkJTGb36ox4gSDwg9hkthP4RQCDtu3Ic6dYEDF1CYPAHweowBwgqPbVoJyXJXfFCxrCgjDv8Jr4urO51bk1GBLDOUQ+IssxesKKlSqveeH7+iBnAAqo/YTTogsq49rOfB7m23brUOp2UGQNH4DJ1gEVnledP47pKvfLdEqd/9occo8TMAJX4CoFXilwBg+lQA5HoFAIcvviiZWsHXH4q5nVDzk9HqLLNXUaFLJlORqahuz4uQOCDPAkblUYvkx1bTw3oGt3Xi4ivLsoDBnVWeygNc3mYSsoQA4PnyFwDIMCglD8EjXc3/kAQAPbPE4Wx9PW6BF6RDkW1ci2+K+JsngQE9AB2QOwEudGNdRoU6y+zl/ohMmjWyf6uiyfduWEVSnJ0wZLw4UvkMTaebCCuqLOtVFQxKGasQdwSYZdcZPWweSykFFuKwlZxoOBdQXIiGmvUkVxJ5g5TaSivnHs3SqeQ1UZUl7Q1p9Bp3kQWvFicXNvvQfGX7cR8fmqs6oPozOp1KAqgClSyw1AKSnqVA/PbTXj3E7RWnn/81jrcb4loHme7+n/Pz5krWuu3GM5+hVnmOfAICAFVWtzdVE9g05VApHvNTPawnW8fLiYmPeXvofmCNztv2lRxRuG/p1AUXOl6rrDd6WFGyyqsXQ4oXnKe3sRIT2f5YAsY2PV4nNJPUS2nv/a9wQJ3yewPiW2OcP3wDN8LQvIHP3zO+7/kXJ8IvrYGuJBUDgEhqyruaAJSXa0I0eaSjRwGA1otw2DrqOs8HBt6hzb+tSbi4RAdn17jE/UI7UwJw+Po6xLOFjmsroj//fEMmr+eCCovl6lUfeqHu47d2scsG0WA5eSqMj1AovM/QiAB8JXZnnRvBul6u9k4/v9Ccmbzwn8ZIgROwwDPET6sxdeaEa5xOTfiSnHA+//OeWetce0cDVAzl5BwGgNb29lb570L73fZ+AFCqsWg4fgCIYuspLidbVxzwNgggzZOQ0o2AyNpG2JWHKQZgJ6sdycvR3CGdDbYyE6kFABD/+uyEgoFcUBHQEAHVV1XxZyNhcwUAy/r1FP+UiIBZo0zmY+2etcQc//3uzE5T54P1evSokvj4SB/w7I/jAUB4Z3N6ZF8f3/TmJRsYwMILraQLUOvwz8ocHR2ODlSo5V65sg8ANKx0B7IsJGGtLaraXXF+Nir0/r77fPb58wkXM1HAAACUpbZjvQJAfJY00EnLRt8gdPXPIyIuiwoRLqi4mlBQkFI9gQFQUWpDhNNZbwWAXADg+AMD9w8dOmVKaMAsg2FQ+3BYFs/2TL+/EIN4Z8qjgXqjf4kdpoP7kwCgMWkdMGNDI03hOD+11+xhrWWt8uHiwyfbGk+6AdjtjkhhPV3Fx2F0/tnyszixP9cCy8/UshP2y8/Q7Brg9sHeImvLX42JlLADy+E4HrxxZlhY8gSuEGGrjOrnagAg4wMA9RH4lCu+w5lLADpQ+mlxxm8LvFUytKTEcnCWofV5fOVzzAmVlDk7yAneP4/4M79GcSoBcJb4l8SHIH4+Hj8oNoeGLtv8kNojASjWGlnwS5eK16BMM6eidMlhFwBtpK/Bw3qGqqyn2J+SkASAPtM6fz7l62QG4O8RvwQQL95qOGnZDeCyLGaGVeYesL8ayxKANl6Lt125+/DV2CVTZZGzcrHZPDmvbPLm8O/RA4a39+uux+WQF2T6/ZZMxJ/yDbcHPcBGPYDjFwBM2lPL8jafyTCF4/zUXrOHlY7iStXDEDlUAPCNdzgdeHqz8z9Hwzx8SQoAR4/S6/yYo1FsPbUKADipewnZeMvxZcrS7q2LuNY3TMYPAQAUSfHbeDma/1xmtdIYYMYYQE5yYEFKyjdoLwMIC4sHAPzHSQAqKovi8L5w2uT8yrz8uPLiWStN7Su60COnkADg8fkWU2dmZkr/ZwWAoCCMAUEU/7M4np9BE57TrM3avLm8sHnhBkM0ffbX4S4mdoSNXiPiv3b7ypIlt2/rvNjaYnwXFQb99QRAO5QB4Fvio6PZeor4OAury7mYXfMtWeFvD/X6OpNqfbtkXpYLIkTBhX1w30gDA6D9Mfp2d/cTn6kZg7gQoLpaFlQsKH/J9Sj6p1/8Yktq76LFIDAtP39yXn5dXv4zs5DFqFB06Us8jYZn7v/GVRCBW4qrC4aKMQA9wJyzJFqbn2+IXrgkmgHkDqRV8nwE4DDU53DO7dt0C6gLCqZi+tdatHlyGhjN1lPL4vVbAwPvu2aVOyn7dd4h92ReVhREqAsuxk6XqyFplT0LMILXyklQUpiaVJlfWRkXt7g8P6M8I2Na1KyVpTt2vPjiRgjO/MAq3RKopsDd3lNFbuVDWTj/hmYTj3ctzQYCEIFRVzkfirUheRdcAwB1lpXsnyHAFOVyj2w9hdPk9UsPjVM+Oxv/9cdzx49VliF1wcVY1S84eBg9JavMLlyqeOrhw6mpl4qjooqfiSruM+sErLmHYP7++sijvduVYgfa7gX1+XV6Y48TzoF6WOFPDilfxZHUWWB1VlY+Fe12qTe0wCOIQKkE+SaAQcp6E1JvlZRSYaH+AyCPn1sTnxMqmq2SOsurXl5L6vUWnYFb4KXWJ3v39viFBXXWVFpT/EFY0wOiSjg//03Wmd5ZdRcSL9SJdyN4MRK4cuX69bHvtjWyLn4claHNqFCssfN/ACSSlF+MGKC8+fSFjHPbWOJ4Bw/+1VsldXvVy2sXQ+ug2Fgy108DwIHXPr4gfmHhs4fQDegL0g2dPhI20/2ISwA4B52fv5EeQncAwGk0/HReHj/u5qUGrny+oCBWNPhg48GuKK3GcMkKcR2DddI8IfQYIffvA8hfjEDBBklG4A8AHDj0DnTwr656mAApdZZXvcxWe+bM27e3bQujn/J6CoDH/FFkQs1dBnCiklL4izERbebSUmEMTE3HzOIzOQaw42+dnX/bCBGAFjS/heNXADQ27u+6eLHrIABkGOouKVmdsgyhiooMoU/58/ga1vnzNV/j9beUqB94v02JnwDopFxPzOqCCvUyAZi8rQa/d5f9fwAkcg/APXteApgGFWq0hZM9ANx9fkWTJ4CizOQiAWDBYnR8cf1BYHNq4PMAEAgACfsPgkBXVMWlS+gBso6lapJGqKVFI6T+BQpTz6ywuSzeKVVG6tCxtrZsdQPgeLu65C9W8LLyCxEAgFlm2+2IiHsAMOWpAKgHXKAe8AQE3j5BxMrp/NO4tJQBtFOKpp2sJAPYsTwuOTnuRQbwfcWNG5eEMLdc0kkABxMu7t+f0nWzK75nlrdMxpe8SAGgxA8fYVJlhf+nFpkVvUSn6RQAOCtd39WVi3gJQKS4f0R9bxAATAaAewUFADDlqQD+W9y1hkVRRmGyy+6ygrYleMVCM4sQoRvQKiFSBlG56CZiYYigEIgFlcJWhIJ0YUuUCLMbT1mhS4ClaRJPEQRElhbhpRD1qSyhInvq6f6e832zMzta/arebm4zOzvnnW9n3j3fOe9H8f/gev6HH57vpPZyMAbK0pESpAfz/YKA5YuWvb9skdnMBGCq6PO2lpbMz6l19pWhUZdg8h1ljvLHSOCiZUxASxyw/eM9F7Cbn1LHNGWugYHyv3pJgIcDhSRAla5B/zQCZNvdnj2y7U73/lAiYFVJ3/33980jJXkqAsDA84e+aaorq5MEYCaLlBjiVwgw73z//eadZgAEIAV3O6YB9qN4CASQ1t/KMkP82BEE4Mu/5+ieoyDA6pnVzd3G6Ni3r0P8aVqwNA94nJDcetfnWyRuB7Z80rqDvv8MPA+36y1M9W13escIEACVNW9eX9+8vyIghr0Fnq/r/IEdFnq/xP1fwbHjprFqZyYCvHDaYzRXGBkHJAoCArby5qtJa4KAGctAwIzqTR9/vP3j7Xu20whQ69gwAs7UgbPIfGyRRUYxs1LMCzy6tnWTGj8R8CkDnUfyDyc5WOiyxCtmQmTOGxcXd20cm7mdTIALI4DwvHBYGOopjceO9czaggDcA0TBA+4BIGCSsp1mr8YIAgKrqqs/BrbvOWr1lMa5egJ0WWQQAIhqXgAEqE9BQu+3OuilvL7W+FZKOAmHvYuBkwl4rV81WCB4CmNtgncag+XfKyr0bWyiq7kK2MDQdb2dPALUtzPWywznWolWoFcD/fv1Ul6pE1DKjVmkiloGPgMvPTh/qpGOWjsGoPeZUlF9+ypv//pVTspyLe5S3n/paR5YynvfweDt+qzzEAn5CWhkdySGR2NKMD4+1oH/c5WAsv9lO9qSqJZ5k5LbNgukKuerrxUmKrSXzyTQ2moSuJEgiiouIKBfAPBTpWO0IzJS9rAsWNAWPLR0ZQw9VyIisH1UQcnXnJVdSYjg/U/Twcdvl5/fewzejv0ZSlZ2SDmhsLs7t5w+I2yIozwjwwGxjFcZkflh+iz1L7VBtW+jzc3pzM8CwoyGUM7hBcjz5YIKqTSBaWrWWbTxcVZ6IHhgYNMAZ6Vv7ADEk4J9jgUBE1TpiConQzls5WJji2IHStN+8vErCEzzpSqlEVtnVG0dylnZEioQmMf7y7jnzXMTEDjBF/aHAG/n/YHD54us8xDE7WjurLVXuPDDlAjIiUzPyTcY8ImRKSBAZH0PHJAFF4+/jfDwd2wl5c5jw8xB9cSAzVeeL0tleZ8gpYik6yRlQp0KMSkrXb3uq2EXvpv8LmWluWNFEIAqBDcBqnSMTiQCEH7R/D2lu1ItkJZdBWm+aWkj0qq2YjtnZbkKawbvf4TQ39/d3d/Pf/TZFVjg+xID22l/jv6aiyYOP4DECBNQX9HgKMx3VRAB0Q5k9nNiiYCUICaA4p84ejTCp/25zQ21zCCgvHxmJUZAoYEJkOcLLzQMDE5fsRcaLDQ+BA5to8IwImCA4qcn7cePX6cSAG8zI0nj8WJ6fJQqHeMdiZH5dPk3IXyjOf/rkC5fhF9QUFp69jkoNOSsLBdIzOD9ScGcf+gio/GiQ+dfjxcYMV2SAN6O/YGJzcaJQuoSARXfFDkiwztiYjPzw8opNZcSaTBGRpYnwhwT+59/WEijfux/heI4URk+8+aamZWzzTKNPUyebxKZwRURwskLbSqatCj+nTsPCQJ8/Dyn35kAY27nV7VaAiZdDAjT03gUfdLl79rVbcxw5M+mvjykMEePSyutikPpKkvXEtkxzwQA2wzANv6jT0RBYJcggLfT/ofroKK2NSOi4ZOHOEBAaE650VEUkwkC+LGNf5SkJRFwzWiaGm08QbW+xxxZe/dWOvdmhs901EzP1BAgpO9UR74U4sBZbSYm4KNtOz8iIAlLSlGVSgoB/vUDQWb+bSAIGMnnTlL0ivgcXP62Tbu6zZE54bDW+toPI6CrNC6utPQcGgEsXRE/CGDlxe1Tt8Ay8NAtz9KffWBmtpXCv/NO1RFip9G80+hfh+MTAfmFFbGO0AUdMZnhsbPLUzLSMQjQ05kY5J8YGUv7L2scfaB/XOMLtH+8MysWU9tAT0tfX7gkwGgdIaWvvlZZEPAhj4DPQIDOoYIJ2GdsQFkiDDLcBJyvFjzE5+Dmtys7qDwW1ZIgAFJza0HaCIRf+v3XisMD1+IKAoRIsaRmp2/nP/pEzPAkgM3TcAecOFwc35Gf73C5CuubY9rDQQCMkVPgCms04kVkfvhs3v/9/nHj+hE/E1CE+LmYt69vtyQAOWSY1UkCZPyybQ7KkupCP9yG+ImAG2vUyXYyiLyCCfBvaPDXEGA8Xy14iM9v67Tj4u++dPduJiCgYF7p2WdXVZ177tenfT9CODzw58Wx9OQMlq/9ppvsvufSn/EVmAECKEGnOkIMP7TN/9A1fHwiIL+jor4+ph7FuUxAeUo+EwBvcBDA+7//Pp8PEyDiZ4AAPl8iQErfE4cPc8GSBNr4hDK/Wrb9ieOp8YGAffvEF078NmDpeI1a4DC1vjYxJ5YQDuArMCuwC4MItjaY7Kq6lmtz5VOApScr2DE3QcvjP4APPZ9fYpyyljdetMkWFnJ2lghIsVgc+UYjnoL+QeGz9ftP5cd/bCxYIJhk1tn6F7XC+qzzeP32K94ABAEXAyCApOONkwGRtT1rSLxaPQzAP4qwdKk34wvOEn/xKnDUmzBGB9477w4gj7frfX01hg8MvMbfYRZLmHAX4/35DfyOydjbo5pZJn1zvSXUUmEBVb4L6D+f/yMKQKYRvPKSBgeTUKp7gdT0c3XSNSlaZqzjo4upse0DAVFcDHytgmt3rwDqLNQXbekwAaLAwky1x3w8ofRVua/P4iImwwcGNQ198OBBLy2mMlQSnQGLF/vOnD5scyCjTPEpVnZhFjRtdkrbHX8U4JVUUVFfUeF4z2wjWHN9NtZ5SNFop8PBZXzF6dmjID0/ePjh4vLyYsXn4davd0mI/uKh8CWm2Wwz5uN2ki8xS1tRsMDHQy2ytnfzTn3tMLLQhocNAcETpOPEwaHeBz0IQLM5Q5ixzX4iIzVjZUZ2yr0ls8gQvEw6RNCdZm8+vmLjbXZjsGfbnTGdunBEgYa31/6KehdKS9dMkVlfH79JfdousCSnK7ANPviRlgBIz4TmDx7+xlUyq6T+vpkzUeM0EwSkKSil2l2y2AQBNTWoxiSLTZa2ggA+HipRAf65DxABOBN3HpMImGS42cClc+w4sXmoNfVlDwI4cDm7Ezt7UmpMQkRIRMLqEkYZHCJYOmeGH99xfDcISDWkTvHwPU7npplhskADBDhcaE5fY7EycimrmqvxCU5yBoIAZ0YqbEKH5W678VgFcsz7R4/u3MsIy7ZZFaQCtZMFAYsWGY3bXmACRgoCjGaWtg8h06Ma3N3+4Dlau/xRAd6CAJmCIQJsqanW0zUE5GjihxvdsOyYkEC/iLensB98SZl0iNiLG+bx3cczZ4832g1TZPxyBKRsYTM04XiBr0CM0+VyrrmYSwKmjB+6o2CS77qFC5WSl2hnW1tloiUE99yQoIuoDW3WrP19eAYMGwY16uuN2IDsXbtkSQwREGrYtuydDiLgHZNa22tmKawYQsRUiIIFs2cWOMgA3Ky+tuy2W63eY4d4jgCKX5qxPZFhD5oVaX9xeiPiBwGKQ0T4pszdxzcdnz0+WG2rpPoD5fMofiYgz4HLDygjYKhrfqDvsGTFwQEEVGbh8o84e5h950RuQ5vVtx8MjEP8RIA4YEJX6S7hQEG+xKGGmnfeWW5sJgLU2l4LZX0VApo3SkcIszZ+aeCw+D5gJq8Qcesv3t6bdyN9oBCwocKloKmpyTW4KmHx4mGLnVOyED9QdmxvZlvbk20gYNPu3cfDmQAZPxOwfosYfTTbRZ4kXhdQ/z6AEUfCYLz3QGDwsGS+/A8IAootCfh2+gUdIqlMI2B0H+KfQfFTZ6c6AjgLS77Eoc3L33lnUUcz+RKrtb0Wer86AmKE9jfrsrj06j5NQcMvYzdu5OsvQStKuGd3z8g0Bc7CzY/RyASobYAQckPCTdK3mJukqP6A70G4Aymf52W1EZRvsTWXtHM20hUSndEZVrQt4vKPFFJ58jdNfXPm9I07wZnJfaZt8maxU6D5PCKgbhkufkcz+RKTtJUE8PvlPeD55/kxcPfa0++RM/EA2d9ByRnuY8cV4RU2NSo1dcpULQHlhoxYEf4ZggAZ/jyE31g1NV+N/9iQ3aZp5Fs8nCDOn9sBRDl0SBSyxl5jgy/RZnWnQfunwdWcgPRG3NEgKviZkNs8XErJyW8coJo4jh+pWZNH29pVw88jX2I00eBGENRMvsQsRQUB/H4qxmasB2BuFp0jg+dmrefCxk4iAjhLTO5x08JgTD9pWpibAHiRWSIRvyDgSRDA8SN8ip8IcMdfXX0MBJBvscZHGN5iiJ8IyL5wTDYISLUB6n28FtpftrkxC0d98JCy+9e5peR57FEk8SkI0ElN8iVGaVxNjdFcCF9isV0QwNvXqklvgAjIkUOAAQImGW82KlVaIOACOKmOBwMqATnKUwA8yBEgKWACshQdn3kcbYDsW6w5v7UYeQSaqU6lEUBunLUCbxOGfr90A5qtjiqAYuqsu0yVkqjj9YBeatLmGmRlC4NCF7m3hwbR/zmPtq8FtPZm0bpaXsg/88sWNcuJ/81QGFCW01DA8k+iCsD+HrtwOhonqIh9pZgCYpghfIXF1RcNegLu1rVeb0+p2pDkmTcmWenO4QI2BXJIXRYVdUWS5h1508aqWXZAX2sszNDUz1uvgvXzKZf40MwX6R0puCXvVeC009T0uSZGL5aimlrgsbq2NdPARqFSAgp4++juYqdmsawwesRrpbPNs1Y4NcpiycbuLqcLv7OzKqfe8d6XG0UWF4Djg77WGFIaULPU6kQJpm0efXTtqZf4GFD8vkx6RwquRdYsEeI9aRSyppw2JYwHATiQphZ4rK5tDVnV6kt8gbQZcVuxHQEmInBgMyAIuIZqd6Ujg00bPhPgb8/KaiqrbGrLbNkNApAvp/dI5OprjSGllx9oKiiQWV8QgMB/+OabH14ngIBTLfGB0IXXGQjQOVLk0WSvcJTg/b1HjRmT3NWVfDWDCcDxNLXAcqkrV0y3UGKUVv4KS06k4a5IvsFGg82W4pTxny4IQPzI+E1sngil5yZABvhCtr2msrKsrL2sJbNpSWwYCHjpvQx1u77WGAQ0lXVtLaiSWV8i4BCmYcYJBtby8ckugn1ozf5iBHD8TIDekSKPJns1S4SMRU3pxStXagkAnZpaYNGuHjElLcIqCVhY2DCnetjWrajuRUbI2L1ypc3s3Mzxn75ZElDnP3L4yJ3NUHoKAcoVDsKZVFa2tcMvP65lScvUOx5JwdpRe1ezozwmS30CRslaY5WArtTcLrmEBxMw7hmgkVYgen2tCDg1JCRVU5w9wPEzAXpHCnah1SwRMgQP3ITkZDseusBz8V6cNVVrgQUBFYGrdwRWSHO0woVz6ue8m3z2OaVLUZxs6541q9uwsuH4McJxk5l+506sI9P+kcNJKofILyjPWI7CXB0IaI/tmUEE7G8JuyPSkIFs0XEpTVuJAG2tsSAgI7iKs54gAN/9ZwjjBAHpQnnWObOF9BZKEvFLAvSOFAoBSOLheIIAFDFnX6olQK4mp86vm8v37i2HYwET0DBnznx8P7efc24ptmMEVNhsIe4sKxFw/sSLzIdkgYM+CxtKBLS0NM3vw11uMBNfgUhaNkuugLYaI0CNX0rpAy1dUWVx4v0g4NFHrxUj4DUQcKcgIDUqCgSYFQIGZPyt75r0jhRUIHF/ibpECBEA45mNl3KPPAgQq8npCDBmwARItKlRre2cBvpl0Ps4B2zrtmVPkPFJApBTbTbX1TWPBAH6goWhWI+wMhMFUC0tRwaXbAYBuP4Z6nS5rtaYf0scaKqqKsX7FQLoHnBtx2uCAGVPbvNKZwKMRhl+77smvSPFipmo9OD4BQFGIDk7N5mPgQssaoU1tcB6H18QUN9O8QNzh3LACcPUggQmgB4AdTv9rxl+1clLbnh3pq3bvHl+S8sgsGTzbBCwyuJu6zHX6muNJ9MSH+/jAPx+IgC3vh8OH0b8TADf1QFaLg1marcyAQNMQG8rCNA7UqygUieO/1U+Ht+YduzINQv4i1phtRYYBEzx8PFFbW77EqXN7N2rva/tDtEvqWH+uyU3QMDqrErG5vDNRMBe7ZoarfpaY7HEh/r+9fT4B15nEAGA6LYGmACcungMAia9IwXXInMWex4fz6wWTwgChhJyGd6EC7QqDTB5ojVNV5BAVN+od3AANJP0c8NUeTo7r3U8jqsuqaGrNZZaW33/ep37WR5B02amb03TO1LQXis2cIGEPF8mxw0vo4TSO6lRngycm8f6c3mL895Tz2D7IGRuUvQR8i6Tvr46qXoGgAINLomYCgz19qw/GeMMv2l8uPNxxQhZ3/ZmtCkwQ1pbLM+6cQvDKODuHLuccBrjlFL6KkDbR6f3Fc5YzwVaAi7X3WshTRmyE9NUbFxsSHwPwJewweXaHw2dW78SSBPS9Ko6T6l6BrLHqATOEXg6zDvbZseyvAEy6zu2MiElISTFnuh0kt1g1lSeKFXPx6Jvw4MpitYW5Rb9+bO5GytfIX3VeISPsFqwIXyJ9b7C/kgZKVnrzrIyFwhwNyPj7rTMlFecQrGvATrLmpYhY5SV5YLUTGNpSgURNVqpCgJycvCDTVr0gQCbPcAOF6ULpZMUChsnTAAdYoa/CATgt4Z6PhabgWtm+bUgQLPuDlas0J0/CEBgmtXx1HiEj7BnBsq80+slt0cwrW35yB14g7L/fU1N5SBgUd225prmZvzT8QIIWJyBq4/w9zaVHXiBCWgX8Z+tFEQs12QYckHADcgv5CN+SUDqJVi2WcQPAi5IwHjxi9pRVNQCFE2FoUIGtxKuIkxPeiUxalSq36jixYziFZ9tOwQoo+DDZyUBLpdRIQAXViN9RTx3bdnyKKUh7lrrE8J1pAUFUqh54bHEEBO6L92xXsaP3ekNdxIBzc11zXUdy5mANcZVxmJx+V9A3osIcLnjv8SeS1ng5WrbSOhS/ZIYdlsCHtDSIv/C8UUJiVEbEzc6isKZgLAVM+1m+xrCQWBNdN4jAci8+zqJEJTu3qp+PTRSuK4C+dHl/BoE0Fp2Bw4I6QsCEM2WlIwMUPDoQyCACyZm4IRYamsJoCzFS3dgvh1QZpxLvkCWt3lnc0dH3aLlNcsQcF7kquJVuPxNB16QBLTL+M+eYIew4CzwIqVSDwREqPETAUNxBTTl9xfMjSzescNZviM8fMCR4ggHAZhtUOJ/GQQsDh6VGuI7cxURsMZNgHL8IL5gD3f+8ENPA7JMd93Jnz8aNSaHxep44oLiB3IK4gcBomAibdy4UsSvJ+AOEKAvOJisLqbGAa/A+HfSt5/iv4wIcHH8IwKy3W12y/3l+TEBFL+6GpzNMwucixHEX38QMLBsERGAG4wHAaHOmc7a6Rw/E6B9vyRgeWddTc+yh4gAWcDR3y+lr/ARvj09/faHeLuQ3jNQyS1Xm5u28WfCbwI/t+oLDkiaNjMKmwUBaxo6cfk5fiKggeIfRj/OcEtpvhxZ4EWaR23hkJynn0b80qP0uTAmQOMHEO1E/JVU4VS0bFlReNjcL38W+Jjwc+/4jW/nTg/FuuF8fuvmHpSOQwC7zrBP8H03d7bcdwNPtbEZm0b6Ch9h3Ai2KFNxbqXGaX0vvXRFAB7L0REBYt21ukV0xfPqcfkXyfiR9Y12pQ3zTbCiBubQRcOx/+XXLJqjdWgAAc/h+iN+JmC2TY2fgBGgVHjtxlK54WGn8AkOsEepr1es4tEB5AEHo0Wef0ts7O0iQM5Sq6vjgQB1KpK2mw3ysy2M0JPa5k7K8roNKd4hmOZ0lnVqV6ML2+Vn99/ZXDdyotj/suWeDg1UEIG7AB4CjNlmXe1wvJPL3ABRkPFPPsG3riIo3xEQIGcZRZhEgPoUoP312y93t/HJ1eZOMifTFRwAJi2ODr7g8frdd9+/6jLs7y5AMHmC5B+yzO4SB5Jz0gwil0ACkHPCEv/kE6zvslOFsgCXVyAHitU5dFJabscO2iy211kmT4zXFUioApyxoiF4UrCKKVfrs7TwRvFwJt7Rdvqxj4cc26Skvrm0gl0hNrAWlu+9SpGm+uONB7T11nkEFvj4B2jV7T958uPT5k4+7zvluumPZxZQzdSefEVncRHlKRXvhLXMI8WPKHeeFfWpU66+2I2bxuuztDeopjkPA2+dIWt9xSIwsWFsniYW1SA5PFYWSLg/T18wofcN5l+D5JPlqidtkGTq3OXx+ZM7MLkB++7QDp7BMZ3sU5zqB6td5TUIeH29RyelT9QkjfEuCPDw+gIBWEYZi2lLPL5dn6X9vkK7uvqun0St78bg2KL89vZYIgB5e9EoCCFABCRkB4waFSgelWVy9ThVCut9gykfkJ7TiQVPmnqK1tyfZJrfE9ilfj4I2LFxdce+jn3+b/ASG3x+2Zj/svtJn+JRtByesj8IwK+kyFSLgoU+fl1pJcDoRrqTNvanpKutuUBxvXVXdwgYUAjQL2xMxcvrqhcutNqruc3tmFzSIraoKbCqpWg2ETBTNEqyEPLB9Ugd5et2f6tkSyMH4AQc0eK5H1NREWHj43OOL316J9DUfpAIWNJXUqDWOk/uwFjZV7gv1PLGp5IAX7vdzzfAHjJB+BRnj4Kxsbrw8hkPbXvo0ewQBe9CKnaljR5dMoj4B68dfcTgqbUt9fVL2g3Z5yhfKzYsMDaT+dghiyQgrQWPgVBrbkvuu9W9+bLWt6ioottNADu9BUIOEwF2q93X94QEapI4feLOOhs5/u6KCmuMQkBDw/T0+9e0d7b3HLw/2tQQtHB/ybw0WTsMAlZvWr3vDf+gjn1MAElfu1+C1c8vdQJtlxdMXXj5jIefKXxw/c8+Er1QSl1bYex73eC4/bcNjpMEpNTUpIiChvr65x21BssxBXRArK6N+M+/iKRv647OzoUNDXMKl7TX7tmDEeBYwKvLhYe3NLWAAG7MdHG36BgmIISywr7utrloJ8evpt0pfuSpkaN2kfSFUnQ1dC5Ys6aop70FvxVMFqyEg4qVNFkLfB4TsG/fGxQ/pu9J+dl9rX7D7NZRtF1XOwwCHq149MEv8UoABPAIaBwcd+2rg9cyAXyNm2XBQkPnlztiUqBZBIbwCGCLjzp/MxPgKK+GCij0r9/elrO9N56qLlnptBw4MBg+m5e8cFH8IECt5j7BGH7iininev1PT9osa4PxiypGSGsQ0NlQ1g4CsEY6pDKPgMZ5aUoW+rw3Vg+sw7y1nL4XBASEWBP8Un1puz5r7XXWaw8+mNJtVbDQZ8LWNEUJv/pqY3+k+v0X94DumApHtLpiob5NjdvcPr7utsJaavOSBIQTAZktLWeFzz6dZmpcFH8ZF0EtjaCeYVmQgIWTk4o1M4+VWVPNuuODgPbOpibcAfct20cEzJ+zv0TMoigEVK/m+CUByDonJEwYAWfJS2i7LmsNAh5c/60GV/gEY4EkjVsc33SgvbDEHdTXqlvxFFgQPUSF3pzse9z+GVWEgp9AgIj/0ieBcNPp90xfsMDF/cJXEgEbIsoA8l0mxA3qzdN4Ieh3VOmNLG9WT1N7T0/PvmUvEwFL+maUqtIZBLy9eqMIXxKAeO2pVmvCKN6ul9pev6z/9lktAd471BwtcF6e6vIEHkBAyu54TfzxenMyOFMzygWGTOXHP0HU+t56j3ITdF0IoJbX8/N88MiWE0sEb/1C0LfiPJwNrsCypvY3yHHC1FMwSiOVQQAeg7J8AzD9g7TGCPiOcYWCabqCB9XxVqAt3mPR1l9MOkD+aZ2Jz9CW+tL205OAQV43mBPQemmql776haClFI6Pjxbo1e1vMs31qDn4J2ntpZeKVgzkB6y+7tetEr2M7b0vM2B6JrerWdbLTxzBB+qzynqCshT4BfAMvX7JjPjElKypUxMdiZI3xV3CIrPEdDlOkyDmXj1yhMsfFOxou/XYx0mQ3sBUQH98fbxeeql4jq1h/vwGm1153bpDwaZO16ae3pdp4QG4aSvb3W1uFzWW9KHAAQUNgFrQYFINHAmmLMMW+sv4ovimN5htFVjj62HCzcDp8UYkiOm2K+6Cs3k1OpRVKlnhvPe43oHTvlSQ8X7UykPyNWFpkpDexe4CjgqrrbvCUIG/u7u7K1z6eEWBREKC6sBgt7UvXDjfliBf66XpyzcXw4UX5dlyu2JudrgR1lq37R+k6WwOXRY0cIpN9SF+NWuLdCDBrDD8xqZYUHpbwfe8dEJkfEa6IyMyIzIofDM1SIAAIRttstY3773pq5TjkTna+4unf6M5/lLZZrfaXcBRERGD6CNKbLaIwLLGTindu7oUKcxS0Wq1qw4MCWBgznxriHgNy1as2vQmgMLNuI4hgoDp0y9Us8Bk7tXYuB/3wMHGfhCgncpae5pYKFlK3XlHs7YYHzM+Zn5sPY3LWeZCEFCyEi1jW7bwyh5vtX6ptAF+DFSblMXYbObuzs5uKwhYtQrF2qNJqpOP8WlEsOpzvEFI7417Kzcvwn0QBEBDlJQsdux9zzXuSFl3EMULFMxQpDCEiJ/Nb1jACOswxYEhwTZ/DjHAr/F+Q4qM/+mON0EA1ieFR+aFQkoyAbj8TXPQlHek8dAHTMBTMn5MZgqhk91gtIv9s7Y8Rlj/li8oP8dvndkaE2M1SpdReIzqsr6FICCCYMzo6Ww6UiEIOHzg8OETh6+l2uM8nqVIxwDiLHJSFknv4tq9mzfvq2letjnMaQx1BZY4sVNZo6sisZDPZ96M0aPj4s5mKQxlZLdhPCOppUhFMICCgCXWEHptaG7GIBDxPx3XEX36zewRugBnL9vi6PL34RnY19j45utrP3n4ecKbEpdCGAHGhiVGaoDfjnsALr/lQf8P+L6UXm+hiSCcvkShrna4cKkwWcFPIXNPj9koCDgwsbFxeP+1JJ3xGvEXrzlYnIEs2ZqkY85KVHdnEQF1ze+AgIxIgyHCFpy7uqy5OAMEsI0vjZcROH8mAPEGQCj5ZZ/rlooh1iW33bbEGoXXMRUx3Rkcf08cLWV98kLJB+jyX4fLX0fT16d5ZpVp/UASxsaL68XqcTwCHnzrg5eZQb/qG1J4+Ct4K10bv4YAY4WrtrY+NHSFGAEnTvQfuZZylnjN8R8EA5QjjHZL6X3LQMDs4sgUw7JAIqAx0uEPAvj8S5EWl1KYpKEd9Xw0Ia9KRTDwwAMLU6PO9jZ0d3P4lOmJewME6KTkVa6SPmigvsbDb74mCFDjJwIGXU3AEQX70Umi+qQGpba/fLNqsksE97KUdsO0IUa47GCuqbbWbAmlgFHwcWI4jk6lt71uvwdRshOfpfyU6Ozra9rMXWaNByqaWppccUGQ0uL8x20dgaSxJIDiDaH4tVIxxLrwgQfmpIZ466WpXkp+4VooLj8qWCQBavyvjtvwjOfrL/yy/ahVW3yDfAKqM/j+z4Crr6VQ5yvMBAQCZloMGgFQVrgEXYX9OBoRoD8fECB/SvUAggBzs6UszlVcaGYCeK0KavbD/kzAqaUixsB1ty1J9e5Vbsp7qvYgw3GStCQp3NdY8vzrDBCgPvUIG3y6BLYKeAepbFrS/f27XlZshm9gRF/h6SsMAuRTgN7DBOArII7feKqCjHihH+QwYAL487qRpmMC9FL4r6Virgmo7WVAYP7Ue0ppif+1/4sTH7izrm5jsA0C+v2nELhEpJrhr1teTilEUCCOcvRortxpxYqkJOXopyrI0LflWdxrTwicJIUf2GCaq5WGSTC4nzZtndvyIgzgo2G7B2SNw1VXjQw9R/N+/epzQZM1OWZgnhszGJfq8MckTbGtbdIfXv82TD0xAzs00jDJiaxncIIsY1s3Nyy/PMgRCTsouR0ODVF+qpPt2P66ukOWBPX9l9cp6CkoaEk7z2io+YaADlfCVaNHqEBKqErGHa4QkD3l92xeZZWqAX+fku31b8M0vy8QpbCKFGYCVq97e906tvYhAiLb2spRmy+2gwBEfoni4njJ2MGYi5ZftDNhgnw/CLhIunuPXJ6WVjMZN9FOrRSeN8LdIgkwAUVFOQtynAvuKSrCC4Ph1z9+tRm6ugw2/MFg8Pq3QVnVsq+q3VlSImAdCEhel2tMTU5uRYNCZnkbehPk9pBsuwLy6LzQ1BlxzfKROy3yfweDAMR/jSwrWT7ZuDLBMCBvgj/9tHU8CKDoq6q8CRczAU6MAAyBBQvwgi/879lRUfRvw39BgCuwqa9MWeh4jkkSkJycm1yLv0BAZmI59WZI6asvUKC8PFWLi6zGyCtAgDR3H3PObQ+keUfFzAqJql5XnZzMbnCt80Yg/LRzq6puSsPEEAgQGOjJFH8wEH4dExx8MS7/f0JA55KyOftlv8WGsj3JYi2L5GRj7eNvm0FAW2Ybxf+LlL46qUq+vX2B15xPFilw9Zl43uV1irm9IMAeMmuW3Sj5hRIUBFS99VZV2lg3AZkopJQMSJ/jm25KMPxHBPS0NO0vk+eHE5wWLK29UpPffhwjQC999W1uuIeU1cD1REwlnT8ZBMjhf+W5D4AAc8isAnM1H5L79ogA79KqHxdV/aQSgPjBQLgkgG8D+Ps/ImAJrv+c990LKU9bLU82udZci2puvfRtL9Sux19/namzERUFO/3FdGBklljiYqRKAHyWv8Is4k8//cQNGCDAG6iqajmGphVJQHgPCBhQRkAqf/v/s3vAEjV+QQDHT0DG7vFWvdTEkFduGDxiBiOoXWLxGqVgQV3i4qZzHzCVggBzzziNFJ43huMvrfqpCk07IICR2TMwHwNAfQoA/9VToM+15HzNQspz8fgHkiUNraeQvu48MGDqp6fgYnfFQrS6xMWFY667rdTbaK45wBBGF5fNGKN1uU0GAYz5bh1wCS484T/TAUdNk7ULKSuFvK0SJ0lfHS677MzyFZrV1NQlLi6Aj9dYb3+T55IXM9CxogAcV/3vSvC/Bj1utPD6n/EnnaQbrf6BCX0AAAAASUVORK5CYII=)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap} /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .code-input { display: flex; justify-content: space-between; align-items: center; width: 100%; } .code-input__cell { cursor: pointer; caret-color: transparent; text-align: center; width: 36px; height: 52px; margin: auto; font-size: 1.5rem; border: 1.5px solid rgb(var(--color-gray-400)); border-radius: 5px; } .code-input__cell:focus { opacity: 0.7; border: 1.5px solid rgb(var(--color-primary-500)); } .code-input__cell:nth-child(1) { margin-left: 0; } .code-input__cell:nth-child(7) { margin-right: 0; } .code-input__dash { content: ""; margin: 0 7px; display: block; background: rgb(var(--color-gray-400)); width: 10px; height: 2px; } .dark-mode .code-input__cell { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-gray-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PersonalSettings-dash3 { height: 100%; display: flex; flex-direction: column; } .PersonalSettings-dash3__content { display: flex; flex-direction: column; } .PersonalSettings-dash3__userProfile { width: 100%; } .PersonalSettings-dash3__userProfile__content { min-width: 769px; display: grid; row-gap: 40px; column-gap: 40px; grid-template-columns: 30% 1fr 1fr; margin: 0px 50px 35px 50px; } @media (max-width: 1537px) { .PersonalSettings-dash3__userProfile__content { display: flex; flex-direction: column; } } .PersonalSettings-dash3__userProfile__profilePicSection, .PersonalSettings-dash3__userProfile__personalInfoSection { background-color: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; } .PersonalSettings-dash3__userProfile__profilePicSection { grid-column: auto/span 1; width: 100%; color: rgb(var(--color-soft-purple-600)); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 0; } .PersonalSettings-dash3__userProfile__profilePicSection__content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .PersonalSettings-dash3__userProfile__profilePicSection__name { font-family: "Onest"; font-style: normal; font-weight: 700; font-size: 30px; line-height: 34px; color: rgb(var(--color-extra-navy-dash3-900)); margin-top: 20px; } .PersonalSettings-dash3__userProfile__profilePicSection__email { font-family: "Onest"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: rgb(var(--color-soft-purple-600)); margin-top: 10px; margin-bottom: 0; } .PersonalSettings-dash3__userProfile__personalInfoSection { grid-column: 2/span 2; width: 100%; color: rgb(var(--color-extra-navy-dash3-900)); background-color: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .PersonalSettings-dash3__userProfile__personalInfoSection__header { display: grid; grid-template-columns: 0.5fr 0.8fr 0.5fr; color: rgb(var(--color-soft-purple-600)); border-bottom: 1px solid rgb(var(--color-extra-silver-dash3-900)); font-size: 16px; } .PersonalSettings-dash3__userProfile__personalInfoSection__header__title { display: flex; align-items: center; margin-left: 25px; margin-right: 0; } .PersonalSettings-dash3__userProfile__personalInfoSection__header__actions { display: flex; align-items: center; justify-content: center; padding: 0; margin-right: 15px; } .PersonalSettings-dash3__userProfile__personalInfoSection__header th { white-space: nowrap; height: 60px; display: flex; align-items: center; font-weight: 600; padding: 0; } .PersonalSettings-dash3__userProfile__personalInfoSection__row { display: grid; grid-template-columns: 0.5fr 0.8fr 0.5fr; border-top: 1px solid rgb(var(--color-extra-silver-dash3-900)); font-weight: 600; font-size: 15px; } .PersonalSettings-dash3__userProfile__personalInfoSection__row--top { border-top: none; } .PersonalSettings-dash3__userProfile__personalInfoSection__row__title { display: flex; align-items: center; margin-left: 25px; margin-right: 0; padding: 0; } .PersonalSettings-dash3__userProfile__personalInfoSection__row__field { padding: 35px 0; font-weight: 500; } .PersonalSettings-dash3__userProfile__personalInfoSection__row__field__enabled { color: rgb(var(--color-success-600)); font-weight: 700; } .PersonalSettings-dash3__userProfile__personalInfoSection__row__field .PasswordForm { width: 100%; } .PersonalSettings-dash3__userProfile__personalInfoSection__row__actions { display: flex; align-items: center; justify-content: center; padding: 0; margin-right: 15px; } .PersonalSettings-dash3__userProfile__personalInfoSection__nameEdit { display: flex; flex-direction: column; } .PersonalSettings-dash3__userProfile__personalInfoSection .PasswordForm { margin-top: 1.25rem; width: 100%; } .PersonalSettings-dash3__userProfile__editButton { font-size: 18px; } .PersonalSettings-dash3__userProfile__buttonWrapper { height: 100%; display: flex; align-items: end; } .PersonalSettings-dash3__userProfile__buttonRow { display: flex; align-items: center; margin-bottom: 36px; } .PersonalSettings-dash3__userProfile__buttonRow button { margin: 0 10px; } .PersonalSettings-dash3__organizations__role { display: flex; align-items: center; padding: 6px 0; margin-bottom: 5px; } .PersonalSettings-dash3__organizations__role__icon { margin-right: 5px; } .PersonalSettings-dash3__organizations__role__meta { display: flex; flex-direction: column; } .PersonalSettings-dash3__organizations__role__superadmin { color: rgb(var(--color-primary-500)); font-weight: 700; } .PersonalSettings-dash3__organizations__role__description { color: rgb(var(--color-primary-500)); margin-bottom: 4px; } .PersonalSettings-dash3__organizations__role__type { color: rgb(var(--color-gray-900)); font-size: 10px; letter-spacing: 0.05em; } .dark-mode .PersonalSettings-dash3__userProfile__profilePicSection, .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection { background: rgba(var(--color-white), 0.1); border: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection__header { color: rgb(var(--color-gray-300)); border-bottom: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection__row { border-top: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection__row--top { border-top: none; } .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection__row__title { color: rgb(var(--color-extra-indigo-dash3-100)); } .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection__row__field { color: rgb(var(--color-gray-400)); } .dark-mode .PersonalSettings-dash3__userProfile__personalInfoSection__row__actions { color: rgb(var(--color-primary-400)); } .dark-mode .PersonalSettings-dash3__userProfile__profilePicSection__name { color: rgb(var(--color-white)); } .dark-mode .PersonalSettings-dash3__userProfile__profilePicSection__email { color: rgb(var(--color-extra-lilac-dash3-900)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .exitpoll-dash3-edit-question-set__delete { margin-left: 5px; color: rgb(var(--color-gray-500)); } .exitpoll-dash3-edit-question-set__delete:hover { cursor: pointer; color: rgb(var(--color-gray-600)); } .exitpoll-dash3-edit-question-set__deleteQuestion { margin: 20px 0; display: flex; flex-direction: column; justify-content: flex-end; color: rgb(var(--color-error-dash3-500)); } .exitpoll-dash3-edit-question-set__deleteQuestion:hover { cursor: pointer; color: rgb(var(--color-error-dash3-300)); } .exitpoll-dash3-edit-question-set__answers { margin: 25px 0; } .exitpoll-dash3-edit-question-set__drag-handle { margin: 0px 10px; background: transparent; color: rgb(var(--color-extra-indigo-dash3-400)); height: 100%; display: flex; justify-content: center; align-items: center; padding: 0px 3px 0px 8px; } .exitpoll-dash3-edit-question-set__drag-handle:hover { cursor: grab; } .exitpoll-dash3-edit-question-set__row--dragging { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); opacity: 1 !important; position: relative !important; z-index: 1000 !important; background: rgb(var(--color-white)) !important; } .checkbox { display: flex; } .NiceTableDash3--EditQuestionSetGrabbable.NiceTableDash3__row { margin: 0px; } .NiceTableDash3--EditQuestionSetGrabbable.NiceTableDash3__row:hover { background: transparent; color: rgb(var(--color-gray-800)); } .NiceTableDash3--EditQuestionSetGrabbable.NiceTableDash3__row > div { transition: none; } .dark-mode .NiceTableDash3--EditQuestionSetGrabbable.NiceTableDash3__row { color: rgb(var(--color-gray-300)); } .dark-mode .NiceTableDash3--EditQuestionSetGrabbable.NiceTableDash3__row:hover { background-color: transparent; color: rgb(var(--color-gray-300)); } .dark-mode .exitpoll-dash3-edit-question-set__row--dragging { background: rgb(var(--color-extra-midnight-dash3-900)) !important; }.CreateNewQuestionSet_dash3__addStep { height: 90px; display: flex; justify-content: center; align-items: center; border-top: 1px solid #f2f0f0; color: white; } .CreateNewQuestionSet_dash3 .ContentContainerDash3 { margin: 0px 40px 40px 40px; } .CreateNewQuestionSet_dash3 .PageHeader-dash3 { margin-left: 40px; margin-right: 40px; } .CreateNewQuestionSet_dash3 .NiceDropdownDash3 { width: fit-content; } .ManageExitPolls-dash3__row { display: grid; font-weight: 500; font-size: 15px; } .ManageExitPolls-dash3__row--first { grid-template-columns: 1fr 1fr; } .ManageExitPolls-dash3__row__title { padding: 20px 0 20px 0; margin-left: 30px; } .ManageExitPolls-dash3__row__field { padding: 20px 0 20px 0; margin-right: 30px; }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .ManageExitPolls-dash3__description { line-height: 1.2rem; margin-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ManageExitPolls-dash3__questionIdDropdown { min-width: 250px; width: 100%; } .ManageExitPolls-dash3__questionIdDropdown__dropdown { width: 100%; } .ManageExitPolls-dash3__assignedHook--unassigned { color: rgb(var(--color-gray-dash3-600)); } .ManageExitPolls-dash3 .NiceTableDash3__cell--textOverflow div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 10px; } .ManageExitPolls-dash3 .NiceTableDash3__cell--textOverflow div.NiceDropdownDash3 { overflow: visible; } .ManageExitPolls-dash3 .NiceTableDash3__cell--trimmed { overflow: visible !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SetupGuide { display: flex; flex-direction: row; align-items: center; font-family: "Onest" !important; margin-bottom: 4rem; } @media (max-width: 1201px) { .SetupGuide { flex-direction: column; min-width: 700px; } } .SetupGuide__info { margin-left: auto; padding-left: 50px; margin-top: 4rem; } @media (max-width: 1201px) { .SetupGuide__info { margin-right: auto; padding-right: 50px; margin-left: 0; } } .SetupGuide__info__header { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 56px; color: rgb(var(--color-title-dash3)); } .SetupGuide__info__byline { font-size: 19px; margin-top: 1rem; line-height: 30px; max-width: 750px; color: rgb(var(--color-title-dash3)); } .SetupGuide__info__step { color: rgb(var(--color-title-dash3)); margin-top: 4rem; font-size: 26px; font-weight: 600; line-height: 30px; } @media (max-width: 1800px) { .SetupGuide__info__step { margin-top: 2.5rem; } } .SetupGuide__info__step--upload { margin-top: 0.3rem; } .SetupGuide__info__step--sdk { margin-top: 2.3rem; } @media (max-width: 1800px) { .SetupGuide__info__step--sdk { margin-top: 1rem; } } .SetupGuide__info__stepMessage { display: block; margin-top: 15px; font-size: 19px; line-height: 30px; min-width: 390px; max-width: 750px; color: rgb(var(--color-title-dash3)); } .SetupGuide__info__keySection { padding: 0 8px; padding-bottom: 3px; background-color: rgb(var(--color-gray-300)); border-radius: 5px; display: inline; align-items: center; word-wrap: normal; } .SetupGuide__info__devkey { letter-spacing: 0.5px; font-size: 14px; font-family: "Source Code Pro", Courier New, Courier, monospace; } .SetupGuide__info__copyButton { display: inline; font-size: 18px; color: rgb(var(--color-gray-700)); margin-bottom: -1px; margin-left: 8px; } .SetupGuide__info__copyButton:hover { color: rgb(var(--color-primary-600)); } .SetupGuide__info__generateButton { margin-left: 5px; cursor: pointer; font-size: 15px; font-weight: 600; color: rgb(var(--color-primary-500)); text-decoration: underline; } .SetupGuide__info__generateButton:hover { color: rgb(var(--color-primary-600)); } .SetupGuide__info__buttonContainer { margin-top: 1.5rem; display: flex; flex-direction: row; gap: 1rem; } .SetupGuide__info__guideButton { width: fit-content; min-width: 70px; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 15px; border: 1px solid rgb(var(--color-gray-400)); border-radius: 10px; color: rgb(var(--color-gray-800)); box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); } .SetupGuide__info__guideButton:hover { border: 1px solid rgb(var(--color-primary-300)); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); color: rgb(var(--color-primary-500)); } .SetupGuide__info__sdkIcon { margin-right: 10px; min-width: 22px; } .SetupGuide__info__sdkText { font-size: 16px; font-weight: 600; } .SetupGuide__info__sessionContainer { margin-top: 1.5rem; display: flex; flex-direction: row; align-items: center; } .SetupGuide__info__checkMessage { margin-left: 20px; color: rgb(var(--color-gray-700)); } .SetupGuide__info__checkMessage--failure { margin-left: 20px; color: rgb(var(--color-error-500)); } .SetupGuide__video { margin-right: auto; padding-left: 70px; padding-right: 50px; margin-top: 6rem; } @media (max-width: 1201px) { .SetupGuide__video { margin-top: 4rem; padding-left: 50px; } } .SetupGuide__link { text-decoration: underline; font-weight: 600; } .SetupGuide__demoButtonBox { margin-top: 1.5rem; display: flex; flex-direction: row; } .SetupGuide__demoButton { margin-right: 20px; width: fit-content; } .SetupGuide__copy { margin-top: 2px; width: fit-content; padding: 5px 7px; border-radius: 5px; border: 1px solid rgb(var(--color-gray-700)); color: rgb(var(--color-gray-700)); } .SetupGuide__copy--active { animation: copyToClipboardActive 1.5s alternate; } .SetupGuide__copy--inactive { opacity: 0; } @keyframes copyToClipboardActive { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .dark-mode .SetupGuide__info__header { color: rgb(var(--color-gray-300)); } .dark-mode .SetupGuide__info__byline { color: rgb(var(--color-gray-300)); } .dark-mode .SetupGuide__info__step { color: rgb(var(--color-gray-300)); } .dark-mode .SetupGuide__info__stepMessage { color: rgb(var(--color-gray-300)); } .dark-mode .SetupGuide__info__keySection { background-color: rgb(var(--color-gray-200)); } .dark-mode .SetupGuide__info__devkey { color: rgb(var(--color-extra-midnight-dash3-700)); } .dark-mode .SetupGuide__info__copyButton { color: rgb(var(--color-gray-700)); } .dark-mode .SetupGuide__info__copyButton:hover { color: rgb(var(--color-primary-400)); } .dark-mode .SetupGuide__info__generateButton { color: rgb(var(--color-primary-600)); } .dark-mode .SetupGuide__info__generateButton:hover { color: rgb(var(--color-primary-500)); } .dark-mode .SetupGuide__info__guideButton { color: rgb(var(--color-extra-midnight-dash3-900)); background-color: rgb(var(--color-gray-200)); } .dark-mode .SetupGuide__info__guideButton:hover { border: 1px solid rgb(var(--color-primary-500)); color: rgb(var(--color-primary-500)); } .dark-mode .SetupGuide__info__checkMessage { color: rgb(var(--color-gray-300)); } .dark-mode .SetupGuide__info__checkMessage--failure { color: rgb(var(--color-error-500)); } .dark-mode .SetupGuide__copy { border: 1px solid rgb(var(--color-gray-200)); color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .StatusOverlayDash3 { font-family: "Onest"; position: fixed; z-index: 1000; left: 50%; transform: translateX(-50%); background: rgb(var(--color-white)); border-radius: 10px; width: 100%; max-width: 500px; padding: 20px 30px 30px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); bottom: -200px; transition: 0.4s all; opacity: 0; } .StatusOverlayDash3--visible { bottom: 100px; opacity: 1; } .StatusOverlayDash3__title { font-size: 12pt; font-weight: 700; margin-bottom: 25px; color: rgb(var(--color-title-dash3)); } .StatusOverlayDash3__message { color: rgb(var(--color-gray-800)); font-size: 15px; margin-bottom: 8px; } .StatusOverlayDash3__progressBar { height: 6px; background-color: rgb(var(--color-gray-400)); border-radius: 5px; } .StatusOverlayDash3__progressFill { border-radius: inherit; height: 100%; background: rgb(var(--color-primary-400)); width: 95%; transition: 0.2s all; transition-timing-function: cubic-bezier(0.1, 0.51, 0.54, 0.88); position: relative; overflow: hidden; } .StatusOverlayDash3__progressFill::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: pulsatingLoadingEffect 1s infinite; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-repeat: no-repeat; } .StatusOverlayDash3__progressFill--started { animation: loadingBarSlowGrowthAnimation 15s; animation-timing-function: cubic-bezier(0.1, 0.51, 0.54, 0.88); } .StatusOverlayDash3__progressFill--completed { width: 100%; transition: 0.2s all; } .StatusOverlayDash3__progressFill--failed { background: rgb(var(--color-extra-red-500)); width: 100%; transition: 0.2s all; } @keyframes loadingBarSlowGrowthAnimation { 0% { width: 0%; } 100% { width: 75%; } } @keyframes pulsatingLoadingEffect { 0% { left: -50%; right: 100%; } 100% { left: 100%; right: -50%; } } .dark-mode .StatusOverlayDash3 { background: rgb(var(--color-gray-900)); } .dark-mode .StatusOverlayDash3__title { color: rgb(var(--color-gray-200)); } .dark-mode .StatusOverlayDash3__message { color: rgb(var(--color-gray-200)); } .dark-mode .StatusOverlayDash3__progressFill { background: rgb(var(--color-primary-500)); } .dark-mode .StatusOverlayDash3__progressBar { background-color: rgb(var(--color-white)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SessionCountDisplay { font-size: 17px; font-weight: 600; min-width: 100px; position: relative; } .SessionCountDisplay__wrapper { text-align: right; } .SessionCountDisplay__total { font-weight: 500; } .SessionCountDisplay__count { color: rgb(var(--color-primary-500)); } .SessionCountDisplay--loading { opacity: 0.6; } .SessionCountDisplay__skeleton { display: inline-block; width: 120px; height: 20px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .dark-mode .SessionCountDisplay { color: rgb(var(--color-white)); } .dark-mode .SessionCountDisplay__total { color: rgb(var(--color-gray-300)); } .dark-mode .SessionCountDisplay__skeleton { background: linear-gradient(90deg, #3a3a3a 25%, #2a2a2a 50%, #3a3a3a 75%); }.ClearFiltersButton { white-space: nowrap; font-size: 0.875rem; } .ClearFiltersButton:hover { text-decoration: underline; }.FilterControls { display: flex; align-items: center; }.GlobalFilters { display: flex; gap: 1rem; justify-content: flex-start; align-items: center; min-width: 1000px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .SessionTagsSelector__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .SessionTagsSelector__pill, .dark-mode .SessionTagsSelector__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-500)); font-size: 0.8rem; line-height: 1rem; font-weight: 600; white-space: nowrap; max-width: 250px; } .SessionTagsSelector__pill-text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .SessionTagsSelector__pill-remove { flex-shrink: 0; margin-left: 0.2rem; margin-right: 0; font-size: 0.8rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .SessionTagsSelector__pill-remove:hover { opacity: 1; } .SessionTagsSelector { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 26px; } .SessionTagsSelector .NiceDropdownDash3, .SessionTagsSelector .NicePortalMenu, .SessionTagsSelector .InputField { margin-top: 4px; } .SessionTagsSelector .NiceDropdownDash3__field { min-height: 0 !important; } .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ } .dark-mode .SessionTagsSelector__pill { background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-gray-200)); } .dark-mode .SessionTagsSelector__pill-remove { opacity: 1; } .dark-mode .SessionTagsSelector__pill-remove:hover { opacity: 0.7; } .SessionTagsSelector__pill { color: rgb(var(--color-soft-purple-600)); background-color: rgb(var(--color-soft-purple-200)); } .SessionTagsSelector__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); flex-shrink: 0; transition: color 0.15s ease; } .SessionTagsSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .SessionTagsSelector__icon { color: rgb(var(--color-white)); } .dark-mode .SessionTagsSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .SessionTagsSelector__pill { color: rgb(var(--color-white)) !important; background-color: rgb(var(--color-soft-purple-600)) !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .ToggleButtonRow { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ToggleButtonRow { display: flex; align-items: center; } .ToggleButtonRow__button { color: rgb(var(--color-gray-700)); font-weight: 700; transition: 0.2s all; font-size: 14px; border-left: 1px solid rgb(var(--color-gray-600)); background: rgb(var(--color-gray-300)); padding: 11px 20px; cursor: pointer; } .ToggleButtonRow__button:first-of-type { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-left: none; border-right: none; } .ToggleButtonRow__button:last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: none; border-right: none; } .ToggleButtonRow__button--active { background: rgb(var(--color-extra-violet-500)); color: rgb(var(--color-white)); } .dark-mode .ToggleButtonRow__button { color: rgb(var(--color-gray-500)); background: rgb(var(--color-gray-700)); } .dark-mode .ToggleButtonRow__button--active { background: rgb(var(--color-extra-violet-500)); color: rgb(var(--color-white)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .SlicerFilters__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .SlicerFilters__pill, .dark-mode .SlicerFilters__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-500)); font-size: 0.8rem; line-height: 1rem; font-weight: 600; white-space: nowrap; max-width: 250px; } .SlicerFilters__pill-text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .SlicerFilters__pill-remove { flex-shrink: 0; margin-left: 0.2rem; margin-right: 0; font-size: 0.8rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .SlicerFilters__pill-remove:hover { opacity: 1; } .SlicerFilters { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 26px; } .SlicerFilters .NiceDropdownDash3, .SlicerFilters .NicePortalMenu, .SlicerFilters .InputField { margin-top: 4px; } .SlicerFilters .NiceDropdownDash3__field { min-height: 0 !important; } .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ } .dark-mode .SlicerFilters__pill { background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-gray-200)); } .dark-mode .SlicerFilters__pill-remove { opacity: 1; } .dark-mode .SlicerFilters__pill-remove:hover { opacity: 0.7; } .SlicerFilters__pill--event { color: rgb(var(--color-sky-blue-600)); background-color: rgb(var(--color-sky-blue-200)); } .SlicerFilters__pill--inactive { color: rgb(var(--color-gray-700)); background-color: rgb(var(--color-gray-200)); cursor: default; } .SlicerFilters__pill--inactive:hover { background-color: rgb(var(--color-gray-200)); transform: none; } .SlicerFilters__pill--inactive .SlicerFilters__pill-remove { display: none; } .SlicerFilters__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); flex-shrink: 0; transition: color 0.15s ease; } .SlicerFilters__icon:hover { color: rgb(var(--color-electric-purple-500)); } .SlicerFilters__collapsible { min-width: 1000px; } .SlicerFilters__editor__filters { display: flex; flex-direction: column; margin-bottom: 1rem; max-width: 900px; width: 100%; gap: 1rem; } .SlicerFilters__editor__actions { display: flex; justify-content: flex-start; } .SlicerFilters__editor__actions .Icon { font-size: 16px; } .SlicerFilters__editor__buttons { background-color: rgb(var(--color-white)); display: flex; justify-content: space-between; align-items: center; } .SlicerFilters__editor__buttons-left { display: flex; gap: 8px; } .SlicerFilters__editor__buttons-right { display: flex; gap: 8px; } .SlicerFilters__filter-row { display: flex; align-items: flex-end; width: min-content; } .SlicerFilters__filter-row__remove { padding-bottom: 8px; } .SlicerFilters__filter-row__remove .Icon { color: rgb(var(--color-error-500)); } .SlicerFilters__filter-row__remove .Icon:hover { color: rgb(var(--color-error-600)); } .dark-mode .SlicerFilters__icon { color: rgb(var(--color-white)); cursor: pointer; transition: color 0.15s ease; } .dark-mode .SlicerFilters__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .SlicerFilters__editor__buttons { background-color: transparent; } .dark-mode .SlicerFilters__pill--event { color: rgb(var(--color-sky-blue-200)); background-color: rgb(var(--color-sky-blue-600)); } .dark-mode .SlicerFilters__pill--inactive { color: rgb(var(--color-gray-400)); background-color: rgb(var(--color-gray-800)); cursor: default; } .dark-mode .SlicerFilters .SlicerFilters__filter-row__remove .Icon { color: rgb(var(--color-error-400)); } .dark-mode .SlicerFilters .SlicerFilters__filter-row__remove .Icon:hover { color: rgb(var(--color-error-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .EventFilters__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .EventFilters__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-500)); font-size: 0.8rem; line-height: 1rem; font-weight: 600; white-space: nowrap; max-width: 250px; } .EventFilters__pill-text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .EventFilters__pill-remove, .dark-mode .EventFilters__pill-remove { flex-shrink: 0; margin-left: 0.2rem; margin-right: 0; font-size: 0.8rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .EventFilters__pill-remove:hover { opacity: 1; } .EventFilters { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 26px; } .EventFilters .NiceDropdownDash3, .EventFilters .NicePortalMenu, .EventFilters .InputField { margin-top: 4px; } .EventFilters .NiceDropdownDash3__field { min-height: 0 !important; } .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ } .dark-mode .EventFilters__pill { background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-gray-200)); } .dark-mode .EventFilters__pill-remove { opacity: 1; } .dark-mode .EventFilters__pill-remove:hover { opacity: 0.7; } .EventFilters { position: relative; display: flex; gap: 0.5rem; } .EventFilters__pill { color: rgb(var(--color-sky-blue-600)); background-color: rgb(var(--color-sky-blue-200)); } .EventFilters__pill-remove { color: rgb(var(--color-sky-blue-600)); } .EventFilters__pill--inactive { color: rgb(var(--color-gray-700)); background-color: rgb(var(--color-gray-200)); cursor: default; } .EventFilters__pill--inactive:hover { background-color: rgb(var(--color-gray-200)); transform: none; } .EventFilters__pill--inactive .EventFilters__pill-remove { display: none; } .EventFilters__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); flex-shrink: 0; transition: color 0.15s ease; } .EventFilters__icon:hover { color: rgb(var(--color-electric-purple-500)); } .EventFilters__editor__filters { display: flex; flex-direction: column; margin-bottom: 1rem; min-width: 600px; max-width: 900px; width: 100%; gap: 1rem; } .EventFilters__editor__actions { display: flex; justify-content: flex-start; } .EventFilters__editor__actions .Icon { font-size: 16px; } .EventFilters__editor__buttons { background-color: rgb(var(--color-white)); display: flex; justify-content: space-between; align-items: center; } .EventFilters__editor__buttons-left { display: flex; gap: 8px; } .EventFilters__editor__buttons-right { display: flex; gap: 8px; } .EventFilters__property-row { display: flex; align-items: flex-end; border-radius: 4px; margin-left: 20px; } .EventFilters__property-row__remove { padding-bottom: 8px; } .EventFilters__property-row__remove .Icon { color: rgb(var(--color-error-500)); } .EventFilters__property-row__remove .Icon:hover { color: rgb(var(--color-error-600)); } .EventFilters__event-row { display: flex; flex-direction: column; border-radius: 8px; } .EventFilters__event-row__header { display: flex; align-items: flex-end; } .EventFilters__event-row__remove { padding-bottom: 8px; } .EventFilters__event-row__remove .Icon { color: rgb(var(--color-error-500)); } .EventFilters__event-row__remove .Icon:hover { color: rgb(var(--color-error-600)); } .EventFilters__event-row__event { flex: 0 0 250px; min-width: 250px; } .EventFilters__event-row__properties { margin-top: 8px; } .EventFilters__properties-list { display: flex; flex-direction: column; gap: 8px; } .EventFilters__properties-actions { display: flex; justify-content: flex-start; padding: 0.75rem 1.2rem 0; /* requested icon size from Calder to match the other icons */ } .EventFilters__properties-actions .Icon { font-size: 16px; } .dark-mode .EventFilters__icon { color: rgb(var(--color-white)); } .dark-mode .EventFilters__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .EventFilters__editor__buttons { background-color: transparent; } .dark-mode .EventFilters__pill { color: rgb(var(--color-white)); background-color: rgb(var(--color-sky-blue-600)); } .dark-mode .EventFilters__pill--inactive { color: rgb(var(--color-gray-400)); background-color: rgb(var(--color-gray-800)); cursor: default; } .dark-mode .EventFilters__pill-remove { color: rgb(var(--color-sky-blue-200)); } .dark-mode .EventFilters__event-row__remove .Icon { color: rgb(var(--color-error-400)); } .dark-mode .EventFilters__event-row__remove .Icon:hover { color: rgb(var(--color-error-300)); } .dark-mode .EventFilters__property-row__remove .Icon { color: rgb(var(--color-error-400)); } .dark-mode .EventFilters__property-row__remove .Icon:hover { color: rgb(var(--color-error-300)); } .dark-mode .EventFilters .EventFilters__filter-row__remove .Icon { color: rgb(var(--color-error-400)); } .dark-mode .EventFilters .EventFilters__filter-row__remove .Icon:hover { color: rgb(var(--color-error-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .ObjectiveFilters__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ObjectiveFilters__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-500)); font-size: 0.8rem; line-height: 1rem; font-weight: 600; white-space: nowrap; max-width: 250px; } .ObjectiveFilters__pill-text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .ObjectiveFilters__pill-remove, .dark-mode .ObjectiveFilters__pill-remove { flex-shrink: 0; margin-left: 0.2rem; margin-right: 0; font-size: 0.8rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .ObjectiveFilters__pill-remove:hover { opacity: 1; } .ObjectiveFilters { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 26px; } .ObjectiveFilters .NiceDropdownDash3, .ObjectiveFilters .NicePortalMenu, .ObjectiveFilters .InputField { margin-top: 4px; } .ObjectiveFilters .NiceDropdownDash3__field { min-height: 0 !important; } .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ } .dark-mode .ObjectiveFilters__pill { background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-gray-200)); } .dark-mode .ObjectiveFilters__pill-remove { opacity: 1; } .dark-mode .ObjectiveFilters__pill-remove:hover { opacity: 0.7; } .ObjectiveFilters { position: relative; } .ObjectiveFilters__pill { color: rgb(var(--color-electric-purple-600)); background-color: rgb(var(--color-electric-purple-200)); } .ObjectiveFilters__pill-remove { color: rgb(var(--color-electric-purple-600)); } .ObjectiveFilters__pill--inactive { color: rgb(var(--color-gray-700)); background-color: rgb(var(--color-gray-200)); cursor: default; } .ObjectiveFilters__pill--inactive:hover { background-color: rgb(var(--color-gray-200)); transform: none; } .ObjectiveFilters__pill--inactive .ObjectiveFilters__pill-remove { display: none; } .ObjectiveFilters__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); flex-shrink: 0; transition: color 0.15s ease; } .ObjectiveFilters__icon:hover { color: rgb(var(--color-electric-purple-500)); } .ObjectiveFilters__loading { padding: 1rem; color: rgb(var(--color-gray-600)); font-style: italic; } .ObjectiveFilters__editor__filters { display: flex; flex-direction: column; margin-bottom: 1rem; min-width: 600px; max-width: 900px; width: 100%; gap: 1rem; } .ObjectiveFilters__editor__actions { display: flex; justify-content: flex-start; } .ObjectiveFilters__editor__actions .Icon { font-size: 16px; } .ObjectiveFilters__editor__buttons { background-color: rgb(var(--color-white)); display: flex; justify-content: space-between; align-items: center; } .ObjectiveFilters__editor__buttons-left { display: flex; gap: 8px; } .ObjectiveFilters__editor__buttons-right { display: flex; gap: 8px; } .ObjectiveFilters__objective-row { display: flex; flex-direction: column; border-radius: 8px; } .ObjectiveFilters__objective-row__header { display: flex; align-items: flex-end; gap: 8px; } .ObjectiveFilters__objective-row__remove { flex-shrink: 0; padding-bottom: 9px; } .ObjectiveFilters__objective-row__remove .Icon { color: rgb(var(--color-error-500)); } .ObjectiveFilters__objective-row__remove .Icon:hover { color: rgb(var(--color-error-600)); } .ObjectiveFilters__objective-row__properties { margin-top: 8px; } .ObjectiveFilters__property-row { display: flex; align-items: flex-end; border-radius: 4px; margin-left: 20px; padding-bottom: 0.5rem; gap: 8px; flex-wrap: wrap; } .ObjectiveFilters__property-row__remove { flex-shrink: 0; padding-bottom: 9px; } .ObjectiveFilters__property-row__remove .Icon { color: rgb(var(--color-error-500)); } .ObjectiveFilters__property-row__remove .Icon:hover { color: rgb(var(--color-error-600)); } .ObjectiveFilters__property-row__value .ToggleButtonRow { padding-bottom: 0; } .ObjectiveFilters__property-row__value .InputField { margin-bottom: 0; min-width: 100px; width: min-content; } .ObjectiveFilters__properties-list { display: flex; flex-direction: column; gap: 8px; } .ObjectiveFilters__properties-actions { display: flex; justify-content: flex-start; padding: 0 1.2rem; /* requested icon size from Calder to match the other icons */ } .ObjectiveFilters__properties-actions .Icon { font-size: 16px; } .dark-mode .ObjectiveFilters__icon { color: rgb(var(--color-white)); } .dark-mode .ObjectiveFilters__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .ObjectiveFilters__loading { color: rgb(var(--color-gray-400)); } .dark-mode .ObjectiveFilters__editor__buttons { background-color: transparent; } .dark-mode .ObjectiveFilters__pill { color: rgb(var(--color-white)); background-color: rgb(var(--color-electric-purple-600)); } .dark-mode .ObjectiveFilters__pill--inactive { color: rgb(var(--color-gray-400)); background-color: rgb(var(--color-gray-800)); cursor: default; } .dark-mode .ObjectiveFilters__pill-remove { color: rgb(var(--color-electric-purple-200)); } .dark-mode .ObjectiveFilters__objective-row__remove .Icon { color: rgb(var(--color-error-400)); } .dark-mode .ObjectiveFilters__objective-row__remove .Icon:hover { color: rgb(var(--color-error-300)); } .dark-mode .ObjectiveFilters__property-row__remove .Icon { color: rgb(var(--color-error-400)); } .dark-mode .ObjectiveFilters__property-row__remove .Icon:hover { color: rgb(var(--color-error-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .UserSegmentSelector__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .UserSegmentSelector__pill, .dark-mode .UserSegmentSelector__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-500)); font-size: 0.8rem; line-height: 1rem; font-weight: 600; white-space: nowrap; max-width: 250px; } .UserSegmentSelector__pill-text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .UserSegmentSelector__pill-remove { flex-shrink: 0; margin-left: 0.2rem; margin-right: 0; font-size: 0.8rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .UserSegmentSelector__pill-remove:hover { opacity: 1; } .UserSegmentSelector { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 26px; } .UserSegmentSelector .NiceDropdownDash3, .UserSegmentSelector .NicePortalMenu, .UserSegmentSelector .InputField { margin-top: 4px; } .UserSegmentSelector .NiceDropdownDash3__field { min-height: 0 !important; } .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ } .dark-mode .UserSegmentSelector__pill { background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-gray-200)); } .dark-mode .UserSegmentSelector__pill-remove { opacity: 1; } .dark-mode .UserSegmentSelector__pill-remove:hover { opacity: 0.7; } .UserSegmentSelector__pill { color: rgb(var(--color-teal-800)); background-color: rgb(var(--color-teal-300)); } .UserSegmentSelector__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); transition: color 0.15s ease; } .UserSegmentSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .UserSegmentSelector__icon { color: rgb(var(--color-white)); } .dark-mode .UserSegmentSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .UserSegmentSelector__pill { color: rgb(var(--color-white)); background-color: rgb(var(--color-teal-700)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .SceneSelector__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .SceneSelector__pill, .dark-mode .SceneSelector__pill { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 0.5rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-500)); font-size: 0.8rem; line-height: 1rem; font-weight: 600; white-space: nowrap; max-width: 250px; } .SceneSelector__pill-text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .SceneSelector__pill-remove, .dark-mode .SceneSelector__pill-remove { flex-shrink: 0; margin-left: 0.2rem; margin-right: 0; font-size: 0.8rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .SceneSelector__pill-remove:hover { opacity: 1; } .SceneSelector { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 26px; } .SceneSelector .NiceDropdownDash3, .SceneSelector .NicePortalMenu, .SceneSelector .InputField { margin-top: 4px; } .SceneSelector .NiceDropdownDash3__field { min-height: 0 !important; } .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ } .dark-mode .SceneSelector__pill { background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-gray-200)); } .dark-mode .SceneSelector__pill-remove { opacity: 1; } .dark-mode .SceneSelector__pill-remove:hover { opacity: 0.7; } .SceneSelector__pill { color: rgb(var(--color-extra-orange-800)); background-color: rgb(var(--color-extra-orange-300)); } .SceneSelector__pill-remove { color: rgb(var(--color-extra-orange-800)); } .SceneSelector__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); flex-shrink: 0; transition: color 0.15s ease; } .SceneSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .SceneSelector__menu-item { cursor: pointer; font-size: 16px; display: flex; flex-direction: row; align-items: center; border-radius: 5px; padding: 7px 5px; margin: 5px 0; } .SceneSelector__menu-item:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .SceneSelector__menu-item .checkboxInput { margin-bottom: 0; } .SceneSelector__menu-item-text { margin-left: 15px; line-height: 20px; } .SceneSelector__menu-message { font-size: 14px; font-style: italic; margin: 5px 0 8px 5px; line-height: 14px; white-space: normal; } .dark-mode .SceneSelector__icon { color: rgb(var(--color-white)); } .dark-mode .SceneSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .SceneSelector__pill { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-orange-700)); } .dark-mode .SceneSelector__pill-remove { color: rgb(var(--color-white)); } .dark-mode .SceneSelector__menu-item:hover { color: rgb(var(--color-gray-300)); background-color: rgba(var(--color-white), 0.1); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .FilterBar__wrapper { position: relative; width: 100%; min-width: 1000px; } .FilterBar { min-width: 940px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; position: relative; } @media (max-width: 1537px) { .FilterBar { padding: 0.5rem; } } .FilterBar__content { display: flex; flex-grow: 1; justify-content: space-between; } .FilterBar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; position: relative; } @media (max-width: 1537px) { .FilterBar__left { max-width: 900px; } } .FilterBar__right { display: flex; gap: 0.5rem; position: relative; height: 2.5rem; padding-left: 1rem; } .FilterBar__expand-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; width: 100%; bottom: 0; z-index: 10; padding-top: 1rem; padding-bottom: 0.35rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .FilterBar__expand-button:hover { text-decoration: underline; } .FilterBar--expanded .FilterBar__expand-button { background: none; padding-top: 0; } /* Shared styles for filter pills across all filter components */ .dark-mode .FilterBar { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .FilterBar__expand-button { color: rgb(var(--color-gray-200)); background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .FilterBar--expanded .dark-mode .FilterBar__expand-button { background: none; } .dark-mode { /* Dark mode styles for filter pills */ }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .DateFilterDropdown { position: relative; display: flex; align-items: center; } .DateFilterDropdown__customDatePicker { width: 100%; font-size: 14px; color: rgb(var(--color-soft-purple-600)); cursor: pointer; display: flex; align-items: center; } .DateFilterDropdown__customDatePicker:hover { color: rgb(var(--color-extra-violet-dash3-900)); } .DateFilterDropdown__customDatePicker__icon { margin: 0 5px 0 10px; font-size: 1.125rem; flex-shrink: 0; transition: color 0.15s ease; } .DateFilterDropdown__customDatePicker__icon:hover { color: rgb(var(--color-electric-purple-500)); } .DateFilterDropdown__customDatePicker__text { font-weight: 600; font-size: 14px; } .DateFilterDropdown__customDatePicker__container { position: relative; min-width: 460px; } .DateFilterDropdown__customDatePicker__inputFields { align-items: center; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .DateFilterDropdown__customDatePicker__inputFields--noApplyButton { grid-template-columns: 1fr 1fr; } .DateFilterDropdown__customDatePicker__inputFields--tip { margin-top: 1rem; font-size: 14px; color: rgb(var(--color-gray-600)); display: flex; align-items: center; gap: 6px; } .DateFilterDropdown__quick-actions { margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgb(var(--color-gray-300)); } .DateFilterDropdown__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(var(--color-gray-300)); } .DateFilterDropdown__icon-wrapper { font-size: 1.125rem; position: relative; } .DateFilterDropdown__icon-wrapper .Icon { color: rgb(var(--color-gray-800)); } .DateFilterDropdown__icon-wrapper .Icon:hover { color: rgb(var(--color-electric-purple-500)); } .DateFilterDropdown__badge { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; background: rgb(var(--color-error-500)); border-radius: 50%; z-index: 1; } .DateFilterDropdown__dropdown .NicePortalMenu__dropdown .NicePortalMenu__dropdown__content { padding: 16px; min-width: 400px; } .DateFilterDropdown__dropdown .NicePortalMenu__dropdown .NicePortalMenu__dropdown__content__groupList { padding: 0; } .DateFilterDropdown__dropdown .NicePortalMenu__dropdown .NicePortalMenu__dropdown__content .DateRangeInput { width: 100%; } .DateFilterDropdown__dropdown .NicePortalMenu__field__caret { padding-left: 5px; font-size: 12px; } .DateFilterDropdown__apply-button { background: rgb(var(--color-primary-dash3-500)); color: white; border: none; border-radius: 4px; padding: 8px 16px; font-size: 14px; cursor: pointer; } .DateFilterDropdown__apply-button:disabled { background-color: rgb(var(--color-primary-dash3-200)); cursor: not-allowed; } .DateFilterDropdown__apply-button:hover:not(:disabled) { background: rgb(var(--color-primary-dash3-600)); } .DateFilterDropdown__clear-button { background: transparent; color: #666; border: 1px solid #ccc; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .DateFilterDropdown__clear-button:disabled { background: #f9f9f9; color: #ccc; border-color: #e5e5e5; cursor: not-allowed; opacity: 0.6; } .DateFilterDropdown__clear-button:hover:not(:disabled) { background: #f5f5f5; border-color: #999; color: #333; } @media (max-width: 768px) { .DateFilterDropdown__dropdown .NicePortalMenu__dropdown .NicePortalMenu__dropdown__content { min-width: 320px; padding: 12px; } } .dark-mode .DateFilterDropdown__quick-actions { border-bottom: 1px solid rgb(var(--color-gray-600)); } .dark-mode .DateFilterDropdown__footer { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .DateFilterDropdown__dropdown { color: rgb(var(--color-white)); } .dark-mode .DateFilterDropdown__dropdown .NicePortalMenu__dropdown .NicePortalMenu__dropdown__content .DateFilterDropdown__quick-actions { border-bottom: 1px solid rgb(var(--color-gray-600)); } .dark-mode .DateFilterDropdown__dropdown .NicePortalMenu__dropdown .NicePortalMenu__dropdown__content .DateFilterDropdown__footer { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .DateFilterDropdown__icon-wrapper .Icon { color: rgb(var(--color-white)); } .dark-mode .DateFilterDropdown__icon-wrapper .Icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .DateFilterDropdown__icon-wrapper__customDatePicker__inputFields--tip { color: rgb(var(--color-gray-400)); } .dark-mode .DateFilterDropdown__icon-wrapper__clear-button { color: rgb(var(--color-gray-400)); border-color: rgb(var(--color-gray-500)); } .dark-mode .DateFilterDropdown__icon-wrapper__clear-button:disabled { background: rgb(var(--color-gray-800)); color: rgb(var(--color-gray-600)); border-color: rgb(var(--color-gray-700)); } .dark-mode .DateFilterDropdown__icon-wrapper__clear-button:hover:not(:disabled) { background: rgb(var(--color-gray-700)); border-color: rgb(var(--color-gray-400)); color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CopyToClipboardButton-dash3 { cursor: pointer; border-radius: 4px; overflow: visible; color: rgb(var(--color-primary-500)); } .CopyToClipboardButton-dash3__container { position: relative; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; outline: none; appearance: none; } .CopyToClipboardButton-dash3__message { position: absolute; left: -70px; top: 5px; padding: 5px 7px; border-radius: 5px; background-color: rgb(var(--color-extra-navy-dash3-900)); color: rgb(var(--color-white)); } .CopyToClipboardButton-dash3__message--active { animation: copyToClipboardActive 1.5s alternate; } .CopyToClipboardButton-dash3__message--inactive { opacity: 0; } @keyframes copyToClipboardActive { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .dark-mode .CopyToClipboardButton-dash3 { color: rgb(var(--color-gray-100)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ParticipantDash3__history { font-family: "Onest"; } .ParticipantDash3__history__title { font-size: 16px; font-weight: 500; color: rgb(var(--color-extra-indigo-dash3-700)); padding-bottom: 10px; } .ParticipantDash3__history__row { border-top: 1px solid rgb(var(--color-gray-200)); padding: 5px 0; } .ParticipantDash3__history__valueRow { font-size: 14px; color: rgb(var(--color-gray-600)); margin-bottom: 4px; } .ParticipantDash3__history__value { color: rgb(var(--color-primary-500)); } .ParticipantDash3__history__date { font-size: 12px; color: rgb(var(--color-gray-600)); } .ParticipantDash3__history__property { font-size: 14px; color: rgb(var(--color-gray-700)); font-weight: bold; } .ParticipantDash3__history__link { color: rgb(var(--color-primary-500)); cursor: pointer; text-decoration: underline; } .ParticipantDash3__history__link:hover { color: rgb(var(--color-primary-700)); } .dark-mode .ParticipantDash3__history__title { color: rgb(var(--color-gray-300)); } .dark-mode .ParticipantDash3__history__valueRow { color: rgb(var(--color-gray-300)); } .dark-mode .ParticipantDash3__history__row { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .ParticipantDash3__history__property { color: rgb(var(--color-gray-100)); } .dark-mode .ParticipantDash3__history__link { color: rgb(var(--color-primary-400)); } .dark-mode .ParticipantDash3__history__link:hover { color: rgb(var(--color-primary-300)); } .NiceTableDash3__header.NiceTableDash3--ParticipantList { padding: 10px 50px; } .NiceTableDash3__header.NiceTableDash3--ParticipantSessionList { padding: 0px 50px; } .NiceTableDash3__header.NiceTableDash3--ParticipantSubscriptionList { padding: 0px 50px; }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .voice-player { margin-left: 5px; } .voice-player:hover { color: rgb(var(--color-primary-600)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ProjectSessionTimeline__exitReasonTooltip { position: relative; display: inline-block; margin-left: 8px; vertical-align: top; z-index: 10; } .ProjectSessionTimeline__exitReasonTooltip:hover { color: rgba(var(--color-extra-indigo-dash3-500)); } .ProjectSessionTimeline__exitReasonText { position: relative; font-size: 1rem; padding: 0.2rem; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .audio-player { font-family: "Onest"; width: calc(100% - 290px); max-width: 500px; height: auto; display: flex; flex-direction: column; position: fixed; bottom: 20px; left: calc(250px + (100% - 250px) / 2); transform: translateX(-50%); z-index: 1000; } .audio-player__mask-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 20px; z-index: 9999; display: flex; align-items: center; justify-content: center; text-align: center; } .audio-player__main-content { position: relative; overflow: visible; z-index: 1000; } .audio-player__content-wrapper { position: relative; width: 100%; } .audio-player__transcript-container { background: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); margin-bottom: 0.5rem; border-radius: 20px; left: 0; right: 0; max-height: 350px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .audio-player__transcript-scroll-wrapper { padding: 1rem 2rem; overflow-y: auto; overflow-x: hidden; flex: 1; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .audio-player__transcript-scroll-wrapper:hover { scrollbar-color: #808080 transparent; } .audio-player__transcript-scroll-wrapper::-webkit-scrollbar { background-color: transparent; width: 7px; } .audio-player__transcript-scroll-wrapper::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .audio-player__transcript-scroll-wrapper::-webkit-scrollbar-button { display: none; } .audio-player__transcript { display: flex; flex-direction: column; gap: 0.8rem; } .audio-player__segment { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .audio-player__segment:last-child { margin-bottom: 0; } .audio-player__segment:hover .audio-player__text { color: rgb(var(--color-title-dash3)); opacity: 0.8; } .audio-player__segment--active .audio-player__text { color: rgb(var(--color-title-dash3)); font-weight: 600; } .audio-player__timestamp { font-size: 12px; color: rgb(var(--color-gray-600)); font-weight: 600; min-width: 40px; margin-top: 0.35rem; } .audio-player__text { font-size: 16px; line-height: 1.4; color: rgb(var(--color-title-dash3)); } .audio-player__controls-header { display: flex; justify-content: space-between; align-items: center; margin: 1rem 1.1rem; } .audio-player__controls-title { font-size: 15px; font-weight: 600; color: rgb(var(--color-title-dash3)); } .audio-player__download-button:hover svg { color: rgb(var(--color-gray-700)); } .audio-player__controls-container { background: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 20px; overflow: visible; position: relative; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .audio-player__current-transcript { background: rgb(var(--color-gray-200)); padding: 0.6rem 1rem; margin: 1rem 1rem; display: flex; align-items: center; gap: 12px; border-radius: 0.5rem; cursor: pointer; } .audio-player__current-transcript:hover { background: rgb(var(--color-gray-300)); } .audio-player__current-timestamp { font-size: 12px; color: rgb(var(--color-gray-600)); font-weight: 600; min-width: 40px; } .audio-player__current-text { flex: 1; font-size: 14px; color: rgb(var(--color-title-dash3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .audio-player__controls-row { display: flex; align-items: center; gap: 16px; padding: 0.2rem 1rem 1rem 1rem; position: relative; overflow: visible; } .audio-player__play-button { width: 2rem; height: 2rem; border-radius: 50%; background-color: rgb(var(--color-white)); border: 2px solid rgb(var(--color-extra-indigo-dash3-500)); display: flex; align-items: center; justify-content: center; cursor: pointer; } .audio-player__play-button:hover { border-color: rgb(var(--color-extra-indigo-dash3-700)); } .audio-player__play-button:hover svg { color: rgb(var(--color-extra-indigo-dash3-700)); } .audio-player__play-button:disabled { background-color: rgb(var(--color-gray-400)); cursor: not-allowed; } .audio-player__play-button svg { color: rgb(var(--color-extra-indigo-dash3-500)); font-size: 12px; } .audio-player__play-button-play { margin-left: 2px; } .audio-player__volume-control { position: relative; display: flex; align-items: center; z-index: 1020; } .audio-player__volume-button { width: 1.5rem; height: 1.5rem; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .audio-player__volume-button svg { color: rgb(var(--color-gray-600)); font-size: 14px; } .audio-player__volume-button svg:hover { color: rgb(var(--color-gray-700)); } .audio-player__volume-popup { position: absolute; bottom: 100%; left: -50%; margin-bottom: 0.5rem; background: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 8px; padding: 20px 12px 12px 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1010; } .audio-player__volume-slider-container { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; height: 180px; } .audio-player__mute-button { width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.2s ease; } .audio-player__mute-button svg { color: rgb(var(--color-gray-600)); font-size: 12px; } .audio-player__mute-button svg:hover { color: rgb(var(--color-gray-700)); } .audio-player__volume-slider { width: 4px; height: 120px; background: rgb(var(--color-gray-300)); border-radius: 3px; position: relative; cursor: pointer; flex: 1; } .audio-player__volume-fill { position: absolute; bottom: 0; width: 100%; background: rgb(var(--color-extra-indigo-dash3-500)); border-radius: 3px; transition: height 0.1s ease; } .audio-player__volume-handle { position: absolute; left: 50%; width: 16px; height: 16px; background: rgb(var(--color-white)); border: 2px solid rgb(var(--color-extra-indigo-dash3-500)); border-radius: 50%; cursor: grab; transition: transform 0.1s ease; transform: translateX(-50%) translateY(50%); } .audio-player__volume-handle:hover { transform: translateX(-50%) translateY(50%) scale(1.2); } .audio-player__volume-handle:active { cursor: grabbing; transform: translateX(-50%) translateY(50%) scale(1.2); } .audio-player__progress-container { flex: 1; margin-top: 0.3rem; } .audio-player__progress-bar { width: 100%; height: 5px; background: rgb(var(--color-gray-300)); border-radius: 3px; position: relative; cursor: pointer; } .audio-player__progress-fill { height: 100%; background: rgb(var(--color-primary-500)); border-radius: 3px; } .audio-player__progress-handle { position: absolute; top: 50%; width: 18px; height: 18px; background: rgb(var(--color-white)); border: 3px solid rgb(var(--color-primary-500)); border-radius: 50%; cursor: grab; transition: transform 0.1s ease; transform: translateY(-50%) translateX(-50%); } .audio-player__progress-handle:hover { transform: translateY(-50%) translateX(-50%) scale(1.2); } .audio-player__progress-handle:active { cursor: grabbing; transform: translateY(-50%) translateX(-50%) scale(1.2); } .audio-player__time-stamps { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 12px; color: rgb(var(--color-gray-600)); font-weight: 600; } .audio-player__toggle-button { color: rgb(var(--color-gray-700)); border-radius: 6px; padding: 0.2rem; width: 1rem; height: 1rem; } .audio-player__loading { text-align: center; padding: 20px; color: rgb(var(--color-gray-700)); font-style: italic; font-size: 16px; } .audio-player__loading-spinner { width: 16px; height: 16px; border: 2px solid rgb(var(--color-gray-300)); border-top: 2px solid rgb(var(--color-primary-500)); border-radius: 50%; animation: audio-player-spin 1s linear infinite; } @media (max-width: 600px) { .audio-player__transcript-container { padding: 20px; min-height: 150px; max-height: 40vh; } .audio-player__current-transcript { padding: 12px 16px; } .audio-player__controls-row { padding: 12px 16px; } .audio-player__text { font-size: 15px; } .audio-player__segment { gap: 12px; margin-bottom: 12px; } } @keyframes audio-player-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .dark-mode .audio-player__mask-background { background: rgba(0, 0, 0, 0.4); } .dark-mode .audio-player__transcript-container { background: rgb(var(--color-gray-800)); border: 1px solid rgb(var(--color-gray-600)); } .dark-mode .audio-player__transcript-scroll-wrapper { scrollbar-color: rgb(var(--color-gray-600)) transparent; } .dark-mode .audio-player__transcript-scroll-wrapper:hover { scrollbar-color: rgb(var(--color-gray-500)) transparent; } .dark-mode .audio-player__transcript-scroll-wrapper::-webkit-scrollbar-thumb { background-color: rgb(var(--color-gray-600)); } .dark-mode .audio-player__transcript-scroll-wrapper::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--color-gray-500)); } .dark-mode .audio-player__controls-title { color: rgb(var(--color-gray-100)); } .dark-mode .audio-player__download-button svg { color: rgb(var(--color-gray-100)); } .dark-mode .audio-player__download-button:hover svg { color: rgb(var(--color-gray-500)); } .dark-mode .audio-player__controls-container { background: rgb(var(--color-gray-800)); border: 1px solid rgb(var(--color-gray-600)); } .dark-mode .audio-player__current-transcript { background: rgb(var(--color-gray-700)); } .dark-mode .audio-player__current-transcript:hover { background: rgb(var(--color-gray-600)); } .dark-mode .audio-player__current-timestamp { color: rgb(var(--color-gray-400)); } .dark-mode .audio-player__current-text { color: rgb(var(--color-gray-100)); } .dark-mode .audio-player__progress-bar { background: rgb(var(--color-gray-600)); } .dark-mode .audio-player__progress-fill { background: rgb(var(--color-primary-400)); } .dark-mode .audio-player__progress-handle { background: rgb(var(--color-gray-800)); } .dark-mode .audio-player__timestamp { color: rgb(var(--color-gray-200)); } .dark-mode .audio-player__text { color: rgb(var(--color-gray-100)); } .dark-mode .audio-player__time-stamps { color: rgb(var(--color-gray-200)); } .dark-mode .audio-player__toggle-button { color: rgb(var(--color-gray-200)); } .dark-mode .audio-player__segment:hover .audio-player__text { color: rgb(var(--color-gray-200)); } .dark-mode .audio-player__segment--active .audio-player__text { color: rgb(var(--color-gray-100)); } .dark-mode .audio-player__loading { color: rgb(var(--color-gray-400)); } .dark-mode .audio-player__loading-spinner { border-color: rgb(var(--color-gray-600)); border-top-color: rgb(var(--color-primary-400)); } .dark-mode .audio-player__play-button { background-color: transparent; } .dark-mode .audio-player__play-button:disabled { background-color: rgb(var(--color-gray-600)); } .dark-mode .audio-player__volume-button svg { color: rgb(var(--color-gray-300)); } .dark-mode .audio-player__volume-button svg:hover { color: rgb(var(--color-gray-400)); } .dark-mode .audio-player__volume-popup { background: rgb(var(--color-gray-800)); border: 1px solid rgb(var(--color-gray-600)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .audio-player__volume-popup::after { border-top-color: rgb(var(--color-gray-800)); } .dark-mode .audio-player__volume-popup::before { border-top-color: rgb(var(--color-gray-600)); } .dark-mode .audio-player__mute-button svg { color: rgb(var(--color-gray-300)); } .dark-mode .audio-player__mute-button svg:hover { color: rgb(var(--color-gray-400)); } .dark-mode .audio-player__volume-slider { background: rgb(var(--color-gray-600)); } .dark-mode .audio-player__volume-fill { background: rgb(var(--color-primary-400)); } .dark-mode .audio-player__volume-handle { background: rgb(var(--color-gray-800)); border-color: rgb(var(--color-primary-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WarningBar { display: flex; justify-content: center; align-items: center; min-width: 818px; border-radius: 5px; border-width: 1px; border-style: solid; background: rgb(var(--color-warning-100)); border-color: rgb(var(--color-warning-300)); margin: 0px 2rem 2rem 2rem; padding: 20px 40px; } .WarningBar__text { font-family: "Onest"; display: flex; flex-direction: column; justify-content: center; color: rgb(var(--color-warning-400)); font-size: 16px; line-height: 20px; } .WarningBar__closeButton { margin-left: 20px; cursor: pointer; font-size: 16px; color: rgb(var(--color-title-dash3)); } .WarningBar__closeButton:hover { color: rgb(var(--color-primary-600)); } .WarningBar a { color: rgb(var(--color-warning-600)); font-weight: bold; } .WarningBar a:hover { color: rgb(var(--color-warning-700)); text-decoration: underline; font-weight: bold; } .dark-mode .WarningBar { background-color: rgba(var(--color-white), 0.1); border-color: rgb(var(--color-gray-200)); } .dark-mode .WarningBar__text { color: rgb(var(--color-gray-200)); } .dark-mode .WarningBar a { color: rgb(var(--color-secondary-500)); } .dark-mode .WarningBar a:hover { color: rgb(var(--color-secondary-600)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ProjectSessionTimeline { font-family: "Onest"; flex-grow: 1; position: relative; width: 100%; margin-bottom: 10px; } .ProjectSessionTimeline__eventGroup__headerWrapper { cursor: pointer; display: flex; justify-content: space-between; height: 40px; padding: 0 20px; background: rgba(var(--color-gray-400), 0.2); border-left: 4px solid rgb(var(--color-primary-500)); } .ProjectSessionTimeline__eventGroup__headerWrapper:hover { background: rgba(var(--color-gray-400), 0.3); } .ProjectSessionTimeline__eventGroup__headerWrapper:hover .ProjectSessionTimeline__eventGroup__header { color: rgb(var(--color-extra-indigo-dash3-700)); } .ProjectSessionTimeline__eventGroup__header { display: flex; font-size: 15px; font-weight: 600; } .ProjectSessionTimeline__eventGroup__header__icon { display: flex; align-items: center; margin-right: 10px; } .ProjectSessionTimeline__eventGroup__header__title { display: flex; align-items: center; } .ProjectSessionTimeline__eventGroup__headerRight { display: flex; font-size: 15px; align-items: center; } .ProjectSessionTimeline { /* Event Rows */ } .ProjectSessionTimeline__eventRow { display: flex; margin: 0 auto; width: 100%; justify-content: center; } .ProjectSessionTimeline__eventRow:first-of-type .ProjectSessionTimeline__eventColumn--center::before { top: 50%; } .ProjectSessionTimeline__eventRow:last-of-type .ProjectSessionTimeline__eventColumn--center:before { bottom: 50%; } .ProjectSessionTimeline__eventRow--highlighted { background-color: rgba(var(--color-primary-400), 0.1); border: 1px solid rgba(var(--color-primary-400), 0.9); border-radius: 8px; margin: 0; padding: 0px; } .ProjectSessionTimeline__eventColumn { padding-top: 15px; padding-bottom: 15px; display: flex; flex-basis: 50%; } .ProjectSessionTimeline__eventColumn--left { width: 45%; justify-content: flex-end; padding-left: 30px; padding-right: 30px; } .ProjectSessionTimeline__eventColumn--right { width: 45%; justify-content: flex-start; padding-left: 30px; padding-right: 30px; } .ProjectSessionTimeline__eventColumn--center { flex-basis: 2px; flex-grow: 0; flex-shrink: 0; position: relative; } .ProjectSessionTimeline__eventColumn--center::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(var(--color-primary-300)); } .ProjectSessionTimeline__eventColumn__timelineNumber { width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 100%; background: rgb(var(--color-primary-500)); position: absolute; top: 50%; transform: translateX(-45%) translateY(-50%); font-size: 13px; color: white; font-weight: 700; } .ProjectSessionTimeline__eventColumn__timelineNumber--tiny { width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 100%; background: rgb(var(--color-primary-500)); position: absolute; top: 50%; transform: translateX(-45%) translateY(-50%); font-size: 12px; color: white; font-weight: 700; } .ProjectSessionTimeline__eventThumbnail { position: relative; overflow: hidden; } .ProjectSessionTimeline__eventThumbnail img { display: block; margin: 0 auto; max-width: 300px; } .ProjectSessionTimeline__goToSceneButton { display: flex; justify-content: center; padding: 10px 0px; } .ProjectSessionTimeline__goToObjectButton { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid rgb(var(--color-gray-300)); } .ProjectSessionTimeline__goToObjectButton .button { font-size: 14px; min-height: 22px; min-width: 45px; padding: 6px 9px; } .ProjectSessionTimeline__viewStackTraceButton { display: flex; justify-content: start; padding: 0px; } .ProjectSessionTimeline__viewStackTraceButton .button { font-size: 13px; min-height: 18px; padding: 3px 7px; } .ProjectSessionTimeline__stackTraceLine { font-size: 14px; line-height: 16px; color: rgb(var(--color-gray-700)); padding: 8px 0; border-bottom: 1px solid rgb(var(--color-gray-200)); word-wrap: break-word; } .ProjectSessionTimeline { /* Event Contents */ } .ProjectSessionTimeline__eventContents { border: 1px solid rgb(var(--color-gray-300)); background: rgb(var(--color-white)); border-radius: 10px; padding: 15px 12px 5px 12px; width: 100%; position: relative; box-sizing: border-box; } .ProjectSessionTimeline__eventContents::after { right: 0; position: absolute; top: 50%; transform: translateY(-50%) translateX(5px) rotate(-45deg); border-right: rgb(var(--color-gray-300)) 1px solid; border-bottom: rgb(var(--color-gray-300)) 1px solid; background: white; content: ""; width: 7px; height: 7px; } .ProjectSessionTimeline__eventContents--c3d:after { transform: translateY(-50%) translateX(-5px) rotate(135deg); right: auto; left: 0; } .ProjectSessionTimeline__eventMetaData { display: flex; align-items: center; } .ProjectSessionTimeline__eventName { font-size: 16px; line-height: 20px; font-weight: 700; color: rgb(var(--color-secondary-900)); flex-grow: 1; word-break: break-word; } .ProjectSessionTimeline__eventTime { font-size: 14px; line-height: 16px; color: rgb(var(--color-gray-600)); display: block; position: relative; margin-left: 10px; } .ProjectSessionTimeline__eventTime:hover .ProjectSessionTimeline__eventTime__hover { display: block; } .ProjectSessionTimeline__eventTime__hover { display: none; position: absolute; top: 0; right: 0; background: white; color: rgb(var(--color-secondary-900)); padding: 5px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2); } .ProjectSessionTimeline__eventMetaProperties { padding: 10px 0; width: 100%; } .ProjectSessionTimeline__isInternal { font-size: 13px; color: rgb(var(--color-gray-600)); text-transform: uppercase; } .ProjectSessionTimeline { /*Event Properties*/ } .ProjectSessionTimeline__eventProperty { display: flex; align-items: start; padding: 12px 0; border-top: 1px solid rgb(var(--color-gray-300)); } .ProjectSessionTimeline__eventProperty__name { display: flex; align-items: center; width: 50%; color: rgb(var(--color-gray-900)); font-size: 15px; font-weight: 700; line-height: 18px; } .ProjectSessionTimeline__eventProperty__name .pill { font-size: 12px; line-height: 22px; } .ProjectSessionTimeline__eventProperty__value { width: 50%; padding-left: 20px; font-size: 15px; line-height: 20px; box-sizing: border-box; color: rgb(var(--color-secondary-900)); overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .ProjectSessionTimeline__eventProperty__value:hover { scrollbar-color: #808080 transparent; } .ProjectSessionTimeline__eventProperty__value::-webkit-scrollbar { background-color: transparent; width: 7px; } .ProjectSessionTimeline__eventProperty__value::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .ProjectSessionTimeline__eventProperty__value::-webkit-scrollbar-button { display: none; } .ProjectSessionTimeline__eventProperty__value { max-height: 200px; overflow: visible; position: relative; z-index: 1; word-break: break-word; } .ProjectSessionTimeline__exitPoll { margin: 5px 0; border-top: 1px solid rgb(var(--color-gray-300)); padding: 15px 0; } .ProjectSessionTimeline__exitPoll__header { width: 100%; margin-bottom: 10px; color: rgb(var(--color-gray-600)); text-transform: uppercase; font-size: 16px; font-weight: 500; letter-spacing: 1px; } .ProjectSessionTimeline__exitPoll__container { display: flex; } .ProjectSessionTimeline__exitPoll__title { width: 50%; color: rgb(var(--color-gray-900)); font-size: 16px; font-weight: 700; border-left: 4px solid rgb(var(--color-primary-500)); padding-left: 15px; line-height: 14pt; margin-left: -12px; } .ProjectSessionTimeline__exitPoll__answerKey { width: 50%; padding-left: 20px; box-sizing: border-box; position: relative; } .ProjectSessionTimeline__exitPoll__answerKey .voice-player { text-align: left; margin-left: 0; } .ProjectSessionTimeline__exitPoll__answer { color: rgb(var(--color-gray-500)); margin: 0 0 10px; display: flex; align-items: center; } .ProjectSessionTimeline__exitPoll__answer--userAnswer { font-weight: 600; font-size: 16px; color: rgb(var(--color-extra-indigo-600)); } .ProjectSessionTimeline__exitPoll__answer__label { margin-left: 17px; font-size: 14px; line-height: 14px; text-transform: uppercase; color: rgb(var(--color-gray-600)); } .ProjectSessionTimeline__exitPoll__skipped { position: absolute; top: -5px; left: 10px; right: 0; bottom: -5px; background: rgba(var(--color-gray-300), 0.6); border-radius: 5px; } .ProjectSessionTimeline__exitPoll__skipped span { color: rgb(var(--color-gray-800)); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 0.9rem; text-align: center; width: 100%; } .ProjectSessionTimeline__timeline-dropdown { padding-bottom: 10px; } .ProjectSessionTimeline__isObjective--complete { color: rgb(var(--color-success-500)); } .ProjectSessionTimeline__isObjective--incomplete { color: rgb(var(--color-error-500)); } .ProjectSessionTimeline__isObjective__propertyHeader { display: flex; justify-content: space-between; padding: 12px 0 10px 0; margin-top: 10px; border-top: 1px solid rgb(var(--color-gray-300)); } .ProjectSessionTimeline__isObjective__propertyTitle { font-size: 14px; font-weight: 700; color: rgb(var(--color-extra-indigo-600)); } .ProjectSessionTimeline__isObjective__propertyStepsCount { font-size: 14px; color: rgb(var(--color-gray-600)); } .ProjectSessionTimeline__isObjective__propertyBox { margin: 0 -10px 15px -10px; padding: 0 10px; } .ProjectSessionTimeline__isObjective__propertyBox--complete > span, .ProjectSessionTimeline__isObjective__propertyBox--complete em, .ProjectSessionTimeline__isObjective__propertyBox--complete div { color: rgb(var(--color-success-600)); border: none; } .ProjectSessionTimeline__isObjective__propertyBox--incomplete > span, .ProjectSessionTimeline__isObjective__propertyBox--incomplete em, .ProjectSessionTimeline__isObjective__propertyBox--incomplete div { color: rgb(var(--color-error-500)); border: none; } .dark-mode .ProjectSessionTimeline__goToObjectButton { border-top: solid 1px rgb(var(--color-gray-600)); } .dark-mode .ProjectSessionTimeline__eventGroup__headerWrapper { border-left: 4px solid rgb(var(--color-primary-400)); background: rgba(var(--color-extra-midnight-dash3-600), 0.5); } .dark-mode .ProjectSessionTimeline__eventGroup__headerWrapper:hover { background: rgba(var(--color-extra-midnight-dash3-600), 0.2); } .dark-mode .ProjectSessionTimeline__eventGroup__headerWrapper:hover .ProjectSessionTimeline__eventGroup__header { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .ProjectSessionTimeline__eventGroup__header { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__eventGroup__headerRight { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__eventContents { border: solid 1px rgb(var(--color-gray-600)); background-color: rgba(var(--color-extra-midnight-dash3-900), 0.05); } .dark-mode .ProjectSessionTimeline__eventContents:after { display: none; } .dark-mode .ProjectSessionTimeline__eventName { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__eventTime { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__isInternal { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__eventProperty { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .ProjectSessionTimeline__eventProperty__name { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__eventProperty__value { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__exitPoll { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .ProjectSessionTimeline__exitPoll__header { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__exitPoll__title { color: rgb(var(--color-gray-300)); border-left: 4px solid rgb(var(--color-primary-400)); } .dark-mode .ProjectSessionTimeline__exitPoll__answer { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__exitPoll__answer--userAnswer { color: rgb(var(--color-primary-400)); } .dark-mode .ProjectSessionTimeline__exitPoll__answer__label { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__exitPoll__skipped { background: rgba(var(--color-gray-300), 0.2); } .dark-mode .ProjectSessionTimeline__exitPoll__skipped span { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__timeline-dropdown { padding-bottom: 10px; } .dark-mode .ProjectSessionTimeline__isObjective__propertyHeader { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .ProjectSessionTimeline__isObjective__propertyTitle { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__isObjective__propertyStepsCount { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__isObjective__propertyBox { color: rgb(var(--color-gray-200)); } .dark-mode .ProjectSessionTimeline__isObjective__propertyBox--complete > span, .dark-mode .ProjectSessionTimeline__isObjective__propertyBox--complete em, .dark-mode .ProjectSessionTimeline__isObjective__propertyBox--complete div { color: rgb(var(--color-success-500)); } .dark-mode .ProjectSessionTimeline__isObjective__propertyBox--incomplete > span, .dark-mode .ProjectSessionTimeline__isObjective__propertyBox--incomplete em, .dark-mode .ProjectSessionTimeline__isObjective__propertyBox--incomplete div { color: rgb(var(--color-error-500)); } .dark-mode .ProjectSessionTimeline__stackTraceLine { color: rgb(var(--color-gray-200)); border-bottom: 1px solid rgb(var(--color-gray-700)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .PlansAndEntitlements__item { display: flex; align-items: center; gap: 0.5rem; } .PlansAndEntitlements__title { font-weight: 600; font-size: 14px; } .PlansAndEntitlements__name { color: rgb(var(--color-gray-800)); } .dark-mode .PlansAndEntitlements__name { color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .StatsCounts { display: flex; justify-content: space-evenly; } .StatsCounts h3 { display: flex; justify-content: center; font-size: 17px; font-weight: 600; margin-bottom: 20px; } .StatsCounts__count { font-size: 16px; font-weight: 500; } .StatsCounts__count h2 { display: flex; justify-content: center; font-size: 20px; font-weight: 600; margin: 0; } .StatsCounts__count h4 { display: flex; justify-content: center; font-size: 14px; font-weight: 300; margin: 0; } .StatsCounts__count--success h2 { color: rgb(var(--color-success-600)); } .StatsCounts__count--success h4 { margin-bottom: 10px; color: rgb(var(--color-success-700)); } .StatsCounts__count--failed h2 { color: rgb(var(--color-error-400)); } .StatsCounts__count--failed h4 { color: rgb(var(--color-error-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .StatsCard { width: 100%; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; background-color: transparent; font-family: "Onest"; color: rgb(var(--color-title-dash3)); } .StatsCard-header { display: flex; justify-content: space-between; padding: 0 1.5rem; border-bottom: 1px solid rgb(var(--color-gray-300)); } .StatsCard-title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin: 1.2rem 0; } .StatsCard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 0; } .StatsCard-body { padding: 1.5rem; } .StatsCard-body h3 { color: rgb(var(--color-title-dash3)); } .StatsCard-actions { display: flex; align-items: center; gap: 1rem; } .StatsCard-actions:hover { cursor: pointer; } .StatsCard-refresh-button:hover { cursor: pointer; color: rgb(var(--color-primary-500)); } .StatsCard--loading { display: flex; flex-direction: column; justify-content: center; } .dark-mode .StatsCard { border: 1px solid rgba(var(--color-gray-600), 0.7); background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-gray-300)); } .dark-mode .StatsCard-header { border-bottom: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .StatsCard-title { color: rgb(var(--color-gray-300)); } .dark-mode .StatsCard-body h3 { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .Stats { margin: 0px 2rem 2rem 2rem; min-width: 1000px; display: flex; flex-direction: column; gap: 3rem; } .Stats__grid { display: flex; justify-content: space-between; gap: 1rem; } .Stats__row { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 0.5rem; } .Stats__box { display: flex; flex-direction: column; padding-top: 0.5rem; padding-bottom: 0.5rem; } .Stats__box:not(:nth-child(3n)) { padding-right: 1.2rem; margin-right: 1.2rem; border-right: 1px solid rgb(var(--color-gray-300)); } .Stats__header { display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgb(var(--color-gray-800)); margin-bottom: 0.8rem; gap: 1rem; } .Stats__title { font-size: 17px; font-weight: bold; } .Stats__totalcount { font-size: 15px; font-weight: bold; } .Stats__timeperiod { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; } .Stats__timeperiod__orgname { display: flex; align-items: center; font-size: 14px; font-weight: 600; color: rgb(var(--color-gray-800)); } .Stats__timeperiod__bar { color: rgb(var(--color-extra-indigo-800)); border-radius: 8px; height: 24px; min-width: 20%; background-color: rgb(var(--color-primary-300)); display: flex; align-items: center; padding-left: 5px; padding-right: 5px; font-weight: 600; font-size: 14px; } .dark-mode .Stats__box:not(:nth-child(3n)) { border-right-color: rgb(var(--color-gray-700)); } .dark-mode .Stats__header { color: rgb(var(--color-gray-200)); } .dark-mode .Stats__timeperiod__orgname { color: rgb(var(--color-gray-300)); } .dark-mode .Stats__timeperiod__bar { background-color: rgb(var(--color-primary-500)); color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .slicer-options__line, .slicer-options__short-line { background-color: rgb(var(--color-gray-500)); height: 1px; } .slicer-options__line { width: 40px; margin-right: 3px; } .slicer-options__short-line { width: 35px; z-index: 1; margin-left: 3px; } .slicer-options__short-line::after { content: ""; position: absolute; display: block; height: 1px; width: 2px; margin-left: 34px; background-color: rgb(var(--color-gray-500)); } .slicer-options__show-hide-button { display: inline-block; cursor: pointer; padding-right: 20px; } .slicer-options__show-hide-button:hover { color: rgb(var(--color-secondary-500)); } .slicer-options__filter { border-left: 1px solid rgb(var(--color-gray-500)); display: flex; position: relative; align-items: center; padding: 10px 0; } .slicer-options__filter .filter-line-mask-top { position: absolute; left: -2px; top: 0; width: 2px; background: rgb(var(--color-white)); height: 50%; } .slicer-options__filter .filter-line-mask-bottom { position: absolute; left: -2px; bottom: 0; width: 2px; background: rgb(var(--color-white)); height: 50%; } .slicer-options__first-gate { display: flex; align-content: center; align-items: center; } .slicer-options__group-container { display: flex; padding: 0; } .slicer-options__group { padding-top: 20px; padding-bottom: 20px; } .slicer-options__add-group { width: fit-content; margin-top: 20px; } .slicer-options__delete-group { margin-left: 10px; color: rgb(var(--color-error-500)); } .slicer-options__delete-group:hover { color: rgb(var(--color-error-600)); } .slicer-options__delete-group i { padding: 0 5px 0 0; } .slicer-options__group { position: relative; display: flex; align-content: center; align-items: center; border-left: 1px solid rgb(var(--color-gray-500)); } .slicer-options__group .group-line-mask-top { position: absolute; left: -2px; top: 0; width: 2px; background: rgb(var(--color-white)); height: 50%; } .slicer-options__group .group-line-mask-bottom { position: absolute; left: -2px; bottom: 0; width: 2px; background: rgb(var(--color-white)); height: 50%; } .filter-gate { display: flex; align-items: center; white-space: nowrap; font-weight: bold; } .property-filter { display: flex; align-items: flex-end; position: relative; top: -13px; } .property-filter-modal { display: flex; align-items: flex-end; margin-bottom: 20px; } .property-filter__remove { padding: 5px; margin-top: 15px; color: rgb(var(--color-gray-600)); } .property-filter__remove i:hover { cursor: pointer; } .property-filter .form-dropdown__label { height: 36px; box-sizing: border-box; align-items: center; display: flex; } .property-filter__date { border: 1px solid rgba(var(--color-gray-600), 0.5); font-size: 14px; } .property-filter__label { color: rgb(var(--color-gray-600)); padding: 5px 0 5px 3px; font-size: 0.8em; } .property-filter__dropdown-row { display: flex; align-items: flex-end; margin-bottom: 0px; } .property-filter__dropdown-row--item { padding-left: 10px; padding-right: 10px; } .property-filter__dropdown-row--item-only-left { padding-left: 10px; } .property-filter__dropdown-row--warning { color: goldenrod; margin-left: 10px; margin-bottom: 10px; } .property-filter__dropdown-row .InputField { min-width: 150px; } .property-filter__verticalFlex { display: flex; flex-direction: column; } .property-filter__label-and-item { position: relative; } .property-filter__label-and-item__add-row { margin-top: 10px; position: absolute; cursor: pointer; font-family: "Onest"; font-style: normal; font-weight: 600; font-size: 16px; color: rgb(var(--color-extra-indigo-dash3-500)); } .property-filter__label-and-item__add-row__button:hover { color: rgb(var(--color-extra-indigo-dash3-600)); } .property-filter__label-and-item__input { display: inline-block; border-radius: 2px; border: 1px solid rgb(var(--color-gray-600)); color: rgb(var(--color-gray-600)); text-align: left; padding: 6px 9px 5px 9px; caret-color: rgb(var(--color-gray-600)); } .dark-mode .slicer-options__line, .dark-mode .slicer-options__short-line { background-color: rgb(var(--color-gray-300)); } .dark-mode .slicer-options__filter { border-left: 1px solid rgb(var(--color-gray-300)); } .dark-mode .slicer-options__filter .filter-line-mask-top { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .slicer-options__filter .filter-line-mask-bottom { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .slicer-options__group { border-left: 1px solid rgb(var(--color-gray-300)); } .dark-mode .slicer-options__group .group-line-mask-top { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .slicer-options__group .group-line-mask-bottom { background: rgb(var(--color-extra-midnight-dash3-900)); }.c3d-agent-logo { display: flex; justify-content: center; align-items: center; color: #a0adc4; } .dark-mode .c3d-agent-logo { color: #fff; } .c3d-agent-logo svg { width: 100%; height: 100%; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ /* ── Sparkle Generate Button ───────────────────────────────────── * * Ported from Jhey Tompkins' "Sparkle Generate Button" CodePen. * --active toggles 0→1 on hover. Idle state keeps purple tint * so the button looks inviting even before interaction. * ─────────────────────────────────────────────────────────────── */ :root { --spark-transition: 0.25s; --spark-speed: 1.8s; } /* ── Wrapper ─────────────────────────────────────────────────── */ .sparkle-button { position: relative; display: inline-flex; } .sparkle-button--running { --play-state: running; } /* ── The Button ──────────────────────────────────────────────── */ .ai-assist-btn { --cut: 0.1em; --active: 0; --spark-color: hsl(260 calc(70% - (var(--active) * 70%)) calc(60% + (var(--active) * 40%))); /* Light mode --bg idle → hsl(260 40% 97%) = soft lavender white hover → hsl(260 97% 56%) = rich purple */ --bg: radial-gradient( 40% 50% at center 100%, hsl(260 calc(var(--active) * 97%) 72% / var(--active)), transparent ), radial-gradient( 80% 100% at center 120%, hsl(260 calc(var(--active) * 97%) 70% / var(--active)), transparent ), hsl(260 calc(var(--active) * 57% + 40%) calc(97% - (var(--active) * 41%))); background: var(--bg); font-size: 0.85rem; font-weight: 600; border: 0; cursor: pointer; padding: 0.55em 0.9em; display: flex; align-items: center; gap: 0.35em; white-space: nowrap; border-radius: 8px; position: relative; /* Box-shadow: outer border ring + subtle idle glow + hover glow */ box-shadow: 0 0 0 0.15em hsl(260, 70%, 60%, calc(var(--active) * 0.2 + 0.3)), 0 0 calc(var(--active) * 3em + 0.4em) calc(var(--active) * 1em) hsl(260, 80%, 70%, calc(var(--active) * 0.5 + 0.1)), 0 0.05em 0 0 hsl(260, calc(var(--active) * 47% + 50%), calc(var(--active) * 50% + 30%), var(--active)) inset, 0 -0.05em 0 0 hsl(260, calc(var(--active) * 47% + 50%), calc(var(--active) * 60%), var(--active)) inset; transition: box-shadow var(--spark-transition), scale var(--spark-transition), background var(--spark-transition); scale: calc(1 + var(--active) * 0.1); } .ai-assist-btn:active { scale: 1; } .ai-assist-btn:is(:hover, :focus-visible) { --active: 1; --play-state: running; } .ai-assist-btn--running { --active: 1; --play-state: running; --spark-idle-opacity: 1; box-shadow: none; } .ai-assist-btn { /* ── Outer glowing border (::before) — used by dark mode only ── */ } .ai-assist-btn::before { content: ""; position: absolute; inset: -0.2em; z-index: -1; border: 0.15em solid transparent; border-radius: 10px; opacity: calc(var(--active) * 0.4 + 0.6); transition: opacity var(--spark-transition), border-color var(--spark-transition); } .ai-assist-btn { /* ── Rotating spark highlight ──────────────────────────────── */ } .ai-assist-btn__spark { position: absolute; inset: 0; border-radius: 8px; rotate: 0deg; overflow: hidden; mask: linear-gradient(white, transparent 50%); animation: spark-flip calc(var(--spark-speed) * 2) infinite steps(2, end); } .ai-assist-btn__spark::before { content: ""; position: absolute; width: 200%; aspect-ratio: 1; top: 0%; left: 50%; z-index: -1; translate: -50% -15%; rotate: 0; transform: rotate(-90deg); opacity: calc(var(--active) + var(--spark-idle-opacity, 0.4)); background: conic-gradient(from 0deg, transparent 0 340deg, var(--spark-color) 360deg); transition: opacity var(--spark-transition); animation: spark-rotate var(--spark-speed) linear infinite both; } .ai-assist-btn__spark::after { content: ""; position: absolute; inset: var(--cut); border-radius: 8px; } .ai-assist-btn { /* ── Inner backdrop ────────────────────────────────────────── */ } .ai-assist-btn__backdrop { position: absolute; inset: var(--cut); background: var(--bg); border-radius: 7px; transition: background var(--spark-transition); } .ai-assist-btn { /* ── Sparkle icon ──────────────────────────────────────────── */ } .ai-assist-btn__icon { inline-size: 1.25em; overflow: visible !important; position: relative; z-index: 1; } .ai-assist-btn { /* Icon paths: always purple, gets brighter on hover idle → hsl(260 80% ~50-70%) = purple hover → hsl(260 97% ~80-110%) = bright/white */ } .ai-assist-btn__icon-path { color: hsl(260, calc((1 - var(--active, 0)) * 80%), calc(var(--active, 0) * (100% - var(--base)) + var(--base))); transform-box: fill-box; transform-origin: center; fill: currentColor; stroke: currentColor; animation-delay: calc(var(--spark-transition) * 1.5 + var(--delay) * 1s); animation-duration: 0.6s; transition: color var(--spark-transition); } .ai-assist-btn--running .ai-assist-btn__icon-path { animation-name: icon-bounce; animation-iteration-count: infinite; } .ai-assist-btn:is(:hover, :focus-visible) .ai-assist-btn__icon-path { animation-name: icon-bounce; } .ai-assist-btn { /* ── Text label ────────────────────────────────────────────── * * idle → hsl(260 80% 40%) / hsl(260 80% 28%) = purple gradient * hover → hsl(260 97% 90%) / hsl(260 97% 78%) = near-white */ } .ai-assist-btn__text { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; line-height: 15px; position: relative; z-index: 1; background: linear-gradient(90deg, hsl(260, calc((1 - var(--active)) * 80%), calc(var(--active) * 60% + 40%)), hsl(260, calc((1 - var(--active)) * 80%), calc(var(--active) * 72% + 28%))); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; transition: background var(--spark-transition); } .ai-assist-btn { /* ── Dark mode ─────────────────────────────────────────────── */ } .dark-mode .ai-assist-btn { --spark-color: white; /* Remove outer ring from box-shadow — dark mode uses ::before border instead */ box-shadow: 0 0 calc(var(--active) * 3em + 0.4em) calc(var(--active) * 1em) hsl(260, 80%, 61%, calc(var(--active) * 0.55 + 0.15)), 0 0.05em 0 0 hsl(260, calc(var(--active) * 47% + 50%), calc(var(--active) * 50% + 30%), var(--active)) inset, 0 -0.05em 0 0 hsl(260, calc(var(--active) * 47% + 50%), calc(var(--active) * 60%), var(--active)) inset; /* Dark mode --bg idle → hsl(260 40% 14%) = rich dark purple hover → hsl(260 97% 52%) = same vivid purple as light */ --bg: radial-gradient( 40% 50% at center 100%, hsl(270 calc(var(--active) * 97%) 72% / var(--active)), transparent ), radial-gradient( 80% 100% at center 120%, hsl(260 calc(var(--active) * 97%) 70% / var(--active)), transparent ), hsl(260 calc(var(--active) * 7% + 90%) calc(60% + (var(--active) * 2%))); } .ai-assist-btn { /* Dark-mode text: white on vivid purple background */ } .dark-mode .ai-assist-btn .ai-assist-btn__text { background: linear-gradient(90deg, hsl(0, 0%, 100%), hsl(0, 0%, 92%)); -webkit-background-clip: text; background-clip: text; } .ai-assist-btn { /* Dark-mode icon: white */ } .dark-mode .ai-assist-btn .ai-assist-btn__icon-path { color: hsl(0, 0%, 100%); } .ai-assist-btn { /* Dark-mode border */ } .dark-mode .ai-assist-btn::before { border-color: hsl(260, 80%, 55%, calc(var(--active) * 0.3 + 0.25)); } /* ── Keyframes ─────────────────────────────────────────────────── */ @keyframes spark-flip { to { rotate: 360deg; } } @keyframes spark-rotate { to { transform: rotate(90deg); } } @keyframes icon-bounce { 35%, 65% { scale: var(--scale); } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .c3d-agent-button { border-radius: 12px; color: rgb(var(--color-white)); font-family: "Onest"; display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, #008be6, #b616c8, #008be6); background-size: 200% 100%; background-position: 0% 0%; padding: 0.5rem 0.8rem; cursor: pointer; transition: background-position 0.5s ease; } .c3d-agent-button:hover { background-position: 100% 0%; } .c3d-agent-button__icon { width: 24px; height: 24px; } .c3d-agent-button__text { font-size: 14px; font-weight: 700; margin-left: 0.5rem; letter-spacing: 0.02em; } .chat-container { max-height: none; background: transparent; border-radius: 10px; line-height: 1.5; display: flex; flex-direction: column; } .chat-container-dropdown .NiceDropdownDash3__field, .chat-container-dropdown .NiceDropdownDash3__field__children { overflow: visible; min-height: none; } .chat-container-dropdown .NiceDropdownDash3__dropdown__content__groupList { overflow-y: hidden; } .chat-container__tabs { display: flex; align-items: center; gap: 2px; padding: 0 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgb(var(--color-gray-200)); overflow-x: auto; flex-shrink: 0; /* hide scrollbar but keep scrollable */ scrollbar-width: none; } .chat-container__tabs::-webkit-scrollbar { display: none; } .dark-mode .chat-container__tabs { border-bottom-color: rgb(var(--color-gray-700)); } .chat-container__tabs__tab { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem; font-family: "Onest"; font-size: 12px; font-weight: 500; color: rgb(var(--color-gray-500)); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; max-width: 180px; transition: color 0.15s ease, border-color 0.15s ease; user-select: none; } .chat-container__tabs__tab:hover { color: rgb(var(--color-gray-700)); } .dark-mode .chat-container__tabs__tab:hover { color: rgb(var(--color-gray-300)); } .chat-container__tabs__tab--active { color: rgb(var(--color-primary-600)); border-bottom-color: rgb(var(--color-primary-500)); } .dark-mode .chat-container__tabs__tab--active { color: rgb(var(--color-primary-400)); border-bottom-color: rgb(var(--color-primary-400)); } .chat-container__tabs__tab__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } .chat-container__tabs__tab__close { opacity: 0.4; transition: opacity 0.15s ease; flex-shrink: 0; } .chat-container__tabs__tab__close:hover { opacity: 1; } .chat-container__tabs__new-chat { margin-left: 0.2rem; color: rgb(var(--color-gray-500)); cursor: pointer; transition: color 0.15s ease; } .chat-container__tabs__new-chat:hover { color: rgb(var(--color-primary-500)); } .chat-container__tabs__new-chat[disabled] { opacity: 0.3; cursor: not-allowed; } .chat-container__greeting { display: flex; flex-direction: column; gap: 0.75rem; background-color: transparent; font-family: "Onest"; padding: 0.5rem 1rem 1rem; width: 550px; } .chat-container__greeting__title { display: flex; align-items: center; gap: 0.5rem; font-size: 20px; font-weight: 600; color: rgb(var(--color-gray-900)); margin-bottom: 0.5rem; white-space: normal; } .chat-container__greeting__title .c3d-agent-logo { margin-left: -0.4rem; } .dark-mode .chat-container__greeting__title { color: rgb(var(--color-gray-100)); } .chat-container__greeting__description { font-size: 15px; color: rgb(var(--color-gray-800)); white-space: normal; line-height: 1.4; } .dark-mode .chat-container__greeting__description { color: rgb(var(--color-gray-300)); } .chat-container__greeting__examples { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; margin-top: 0.75rem; } .chat-container__greeting__examples__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--color-gray-600)); } .dark-mode .chat-container__greeting__examples__label { color: rgb(var(--color-gray-400)); } .chat-container__greeting__examples__item { display: block; width: 100%; text-align: left; padding: 0.4rem 0.6rem; font-size: 13px; font-family: "Onest"; color: rgb(var(--color-gray-700)); background: rgb(var(--color-gray-100)); border: 1px solid rgb(var(--color-gray-200)); border-radius: 8px; cursor: pointer; transition: all 0.15s ease; } .chat-container__greeting__examples__item:hover { background: rgb(var(--color-primary-100)); border-color: rgb(var(--color-primary-300)); color: rgb(var(--color-primary-700)); } .chat-container__greeting__examples__item:disabled { opacity: 0.5; cursor: not-allowed; } .dark-mode .chat-container__greeting__examples__item { color: rgb(var(--color-gray-300)); background: rgb(var(--color-gray-800)); border-color: rgb(var(--color-gray-700)); } .dark-mode .chat-container__greeting__examples__item:hover { background: rgba(var(--color-primary-500), 0.1); border-color: rgb(var(--color-primary-500)); color: rgb(var(--color-primary-300)); } .chat-container__messages { display: flex; flex-direction: column; gap: 1rem; background-color: transparent; font-family: "SF Mono", "Consolas", "Monaco", monospace; font-size: 0.9rem; min-height: 200px; max-height: 60vh; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .chat-container__messages:hover { scrollbar-color: #808080 transparent; } .chat-container__messages::-webkit-scrollbar { background-color: transparent; width: 7px; } .chat-container__messages::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .chat-container__messages::-webkit-scrollbar-button { display: none; } .chat-container__messages .message { padding: 0.4rem 0.8rem; border-radius: 8px; background-color: rgb(var(--color-gray-100)); max-width: 90%; font-size: 14px; white-space: pre-wrap; } .chat-container__messages .message-container { display: flex; flex-direction: column; gap: 0.5rem; min-width: 600px; max-width: 900px; } .chat-container__messages .message-container--user { align-items: flex-end; } .chat-container__messages .message-container--agent { align-items: flex-start; } .chat-container__messages .message-icon-container-user { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; } .chat-container__messages .message-icon-container-agent { display: flex; align-items: center; gap: 0.5rem; font-size: 14px; font-family: "Onest"; } .chat-container__messages .message-icon--user { background-color: rgb(var(--color-primary-500)); width: 22px; height: 22px; font-size: 12px; border-radius: 50%; text-align: center; line-height: 22px; color: rgb(var(--color-white)); } .chat-container__messages .message.user-message { background-color: rgb(var(--color-primary-100)); color: rgb(var(--color-primary-900)); border-top-right-radius: 0; } .chat-container__messages .message.agent-message { background-color: rgb(var(--color-gray-100)); color: rgb(var(--color-gray-900)); border-top-left-radius: 0; } .chat-container__messageForm { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; background-color: transparent; padding-top: 1rem; } .chat-container__messageForm label { font-weight: 500; color: rgb(var(--color-gray-600)); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .json-container { position: relative; display: flex; flex-direction: column; gap: 0.5rem; } .json-container__wrapper { position: relative; border: 1px solid rgb(var(--color-gray-200)); border-radius: 4px; } .dark-mode .json-container__wrapper { border-color: rgb(var(--color-gray-700)); } .json-container__toggle { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; font-family: "Onest"; font-size: 12px; font-weight: 500; color: rgb(var(--color-gray-500)); user-select: none; padding: 0.35rem 0.75rem; } .json-container__toggle:hover { color: rgb(var(--color-gray-700)); } .dark-mode .json-container__toggle:hover { color: rgb(var(--color-gray-300)); } .json-container .json-content { background: none; border: none; padding: 1rem; overflow: hidden; white-space: pre-wrap; font-family: "SF Mono", "Consolas", "Monaco", monospace; font-size: 12px; color: rgb(var(--color-gray-600)); margin: 0; max-height: 8rem; } .dark-mode .json-container .json-content { color: rgb(var(--color-gray-200)); } .json-container .json-content--expanded { max-height: none; overflow-x: auto; } .json-container .json-content:not(.json-container .json-content--expanded) { padding-bottom: 0; } .json-container__actions { position: absolute; top: 0.5rem; right: 1rem; display: flex; align-items: center; gap: 0.5rem; z-index: 1; } .json-container__actions .Icon { cursor: pointer; color: rgb(var(--color-gray-500)); font-size: 1rem; } .json-container__actions .Icon:hover { color: rgb(var(--color-primary-500)); } .json-container__actions .CopyToClipboardButton { position: relative; width: auto; top: auto; bottom: auto; right: auto; } /* Error message */ .error-message { background-color: rgb(var(--color-error-100)) !important; color: rgb(var(--color-error-700)) !important; border-left: 3px solid rgb(var(--color-error-500)); border-top-left-radius: 0 !important; } /* Thinking animation */ .thinking { display: flex; align-items: flex-end; gap: 0.3rem; color: rgb(var(--color-gray-500)); font-size: 0.9rem; font-weight: 500; padding: 0.5rem 1.5rem; animation: thinking-text 1.4s infinite; } .thinking.hidden { opacity: 0; pointer-events: none; } .thinking .thinking-dots { display: flex; gap: 0.2rem; margin-bottom: 0.25rem; } .thinking .thinking-dot { width: 2px; height: 2px; background-color: rgb(var(--color-gray-500)); border-radius: 50%; animation: thinking-dot 1.4s infinite; } .thinking .thinking-dot:nth-child(2) { animation-delay: 0.2s; } .thinking .thinking-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes thinking-dot { 0%, 100% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(-4px); opacity: 1; } } @keyframes thinking-text { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }.logo--left-edge { padding-left: 0; } .logo--left-edge img { padding-left: 0; } .logo__img { height: 35px; } .logo__img--padded { padding: 15px; } .logo__img--fluid { height: auto; min-width: 150px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .LoginForm__container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; min-width: 400px; } .LoginForm__wrapper { display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 10px 30px; width: 32.75rem; } @media screen and (max-width: 1000px) { .LoginForm__wrapper { padding: 10px 40px; width: 320px; } } @media screen and (max-width: 769px) { .LoginForm__wrapper { width: 300px; padding: 1.6rem; border-radius: 10px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } } .LoginForm__heading { font-family: "Onest"; color: #13294b; font-size: 2.3rem; font-weight: 700; line-height: 1.19; margin: 0 auto 40px; text-align: center; } @media screen and (max-width: 769px) { .LoginForm__heading { font-size: 1.6rem; } } .LoginForm__login-options { max-width: 400px; width: 100%; display: flex; flex-direction: column; margin: 0 auto; } .LoginForm__sso { display: flex; flex-direction: column; margin-bottom: 20px; } .LoginForm__sso__button { margin-bottom: 20px; min-height: 42px; padding: 10px 15px; display: flex; flex-direction: row; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.7); font-family: "Onest"; font-size: 15px; font-weight: 600; background-color: rgb(var(--color-white)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } .LoginForm__sso__button:hover { background-color: rgb(var(--color-gray-100)); } .LoginForm__sso__button--icon { margin-right: 18px; } .LoginForm__form-divider { display: flex; justify-content: center; align-items: center; color: rgb(var(--color-gray-500)); font-size: 15px; font-family: "Lato", sans-serif; margin-bottom: 2rem; } .LoginForm__form-divider::after { content: ""; display: block; background: rgb(var(--color-gray-500)); width: 50%; height: 1px; margin-left: 35px; } .LoginForm__form-divider::before { content: ""; display: block; background: rgb(var(--color-gray-500)); width: 50%; height: 1px; margin-right: 35px; } .LoginForm__email { font-family: "Onest"; } .LoginForm__email__label { font-weight: 700; font-size: 14px; color: #13294b; margin-bottom: 15px; } .LoginForm__email__input { height: 42px; font-size: 14px; box-sizing: border-box; border: 1.5px solid rgb(var(--color-gray-400)); border-radius: 5px; padding: 0 12px; margin-bottom: 18px; } .LoginForm__email__input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgb(var(--color-gray-500)); } .LoginForm__email__forgotpw { cursor: pointer; text-align: center; margin-top: 13px; font-size: 13px; font-weight: 700; color: rgb(var(--color-primary-500)); } .LoginForm__email__forgotpw:hover { color: rgb(var(--color-primary-700)); text-decoration: underline; } .LoginForm__lockedEmail { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; } .LoginForm__lockedEmail__label { display: flex; color: rgb(var(--color-gray-800)); font-family: "Onest"; font-weight: 600; font-size: 14px; border: 1px solid rgb(var(--color-gray-400)); border-radius: 24px; padding: 10px 15px; width: fit-content; } .LoginForm__lockedEmail__back { font-size: 15px; color: rgb(var(--color-primary-500)); margin-right: 8px; } .LoginForm__lockedEmail__back:hover { color: rgb(var(--color-primary-700)); } .LoginForm__mfa__message { font-family: "Onest"; text-align: center; font-size: 15px; font-weight: 500; color: rgb(var(--color-gray-800)); line-height: 1.2rem; margin-bottom: 2rem; } .LoginForm__mfa__code { display: flex; align-items: center; margin-bottom: 2rem; } .LoginForm__mfa__resend { cursor: pointer; text-align: center; margin-top: 13px; font-size: 13px; font-weight: 700; color: rgb(var(--color-primary-500)); } .LoginForm__mfa__resend:hover { color: rgb(var(--color-primary-700)); text-decoration: underline; } .LoginForm__mfa__checkbox { display: flex; flex-direction: row; align-items: center; margin-bottom: 1.5rem; } .LoginForm__mfa__checkbox__text { padding-left: 10px; font-family: "Onest"; font-size: 14px; color: #13294b; } .LoginForm__primary-button { min-height: 42px; padding: 0.8rem 1rem; display: flex; flex-direction: row; align-items: center; justify-content: center; color: rgb(var(--color-white)); font-family: "Onest"; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, rgb(var(--color-sky-blue-600)) 0%, #a443f0 90%); border-radius: 5px; position: relative; overflow: hidden; z-index: 1; } .LoginForm__primary-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #a443f0 0%, #0087f6 90%); transition: left 0.4s ease-in-out; border-radius: 5px; z-index: -1; } .LoginForm__primary-button:hover::before { left: 0; } .LoginForm__primary-button { /* Ensure content stays on top */ } .LoginForm__primary-button > * { position: relative; z-index: 2; } .LoginForm__primary-button--disabled { background-color: rgb(var(--color-primary-200)) !important; cursor: default; } .LoginForm__message { margin-bottom: 2rem; font-family: "Onest"; font-weight: 500; font-size: 16px; text-align: center; color: rgb(var(--color-primary-600)); } .LoginForm__forgot-password { margin-top: 1rem; text-align: center; font-size: 14px; font-family: "Onest"; } .LoginForm__signup { margin-top: 1rem; text-align: center; font-size: 14px; font-family: "Onest"; } .LoginForm__signup__link { cursor: pointer; font-style: normal; font-weight: 600; margin: 0 3px; color: rgb(var(--color-primary-500)); } .LoginForm__signup__link:hover { color: rgb(var(--color-sky-blue-600)); text-decoration: underline; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .code__block { border-radius: 5px; margin-bottom: 20px; background-color: rgb(var(--color-gray-900)); padding: 10px; color: rgb(var(--color-white)); font-weight: 700; font-size: 12pt; font-family: "Source Code Pro", Courier New, Courier, monospace; } .code__row { flex-wrap: nowrap; display: flex; margin: 5px 0; } .code__row--header { margin: 0 0 10px 0; } .code__cell { display: block; flex-basis: 0; flex-grow: 1; } .code__cell--header { flex-basis: 150px; flex-grow: 0; flex-shrink: 0; } .code__cell--value { color: rgb(var(--color-extra-green-500)); } .code__cell--key { color: rgb(var(--color-gray-500)); } .code__cell--bool { font-style: italic; color: rgb(var(--color-extra-blue-500)); } .code__cell--error { color: rgb(var(--color-error-400)); } .code__line { padding: 4px 0; } .code__line__key { white-space: pre; font-weight: 400; color: rgb(var(--color-gray-500)); } .code__line__value { font-weight: 700; color: rgb(var(--color-extra-green-500)); } .code__line__value--null { font-style: italic; color: rgb(var(--color-extra-blue-500)); } .code__line__value--bool { font-style: italic; color: rgb(var(--color-extra-blue-500)); } .code__line__comma { font-weight: 400; color: rgb(var(--color-gray-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .Status { color: rgb(var(--color-white)); display: inline-block; padding: 2px 4px; margin-left: 8px; position: relative; line-height: 1.142em; font-size: 1em; border-radius: 3px; font-weight: 700; } .Status--error { color: rgb(var(--color-error-600)); background: rgb(var(--color-error-200)); } .Status--warning { color: rgb(var(--color-warning-600)); background: rgb(var(--color-warning-200)); } .Status--info { color: rgb(var(--color-extra-blue-600)); background: rgb(var(--color-extra-blue-200)); } .Status--success { color: rgb(var(--color-success-600)); background: rgb(var(--color-success-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .NetworkProgress__bar { padding: 10px 0 20px; } .NetworkProgress__bar__progressBg { margin: 5px 0; background: rgb(var(--color-gray-200)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 1px hsla(0, 0%, 0%, 0.1) inset; width: 100%; height: 5px; border-radius: 5px; } .NetworkProgress__bar__progressFill { height: 100%; border-radius: 5px; transition-timing-function: cubic-bezier(0.1, 0.51, 0.54, 0.88); position: relative; overflow: hidden; width: 0%; } .NetworkProgress__bar__progressFill--notStarted { background: rgb(var(--color-gray-400)); } .NetworkProgress__bar__progressFill--pending { background: rgb(var(--color-success-600)); transition: 15s width; } .NetworkProgress__bar__progressFill--rejected { background: rgb(var(--color-error-500)); transition: 0.2s all; } .NetworkProgress__bar__progressFill--rejected:after { display: none; } .NetworkProgress__bar__progressFill--fulfilled { background: rgb(var(--color-success-600)); transition: 0.2s all; } .NetworkProgress__bar__progressFill--fulfilled:after { display: none; } .NetworkProgress__bar__progressFill:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: pulsatingLoadingEffect 1s infinite; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-repeat: no-repeat; } .NetworkProgress__bar__name { font-size: 16px; font-weight: 700; } .NetworkProgress__bar__icon { float: right; } .NetworkProgress__bar__icon--pending { color: rgb(var(--color-success-600)); } .NetworkProgress__bar__icon--rejected { color: rgb(var(--color-error-500)); } .NetworkProgress__bar__icon--fulfilled { color: rgb(var(--color-success-600)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WidgetLibrary__formContainer { border-radius: 10px; border: 1px solid rgb(var(--color-gray-300)); margin: 0 2rem 2rem; } @media (max-width: 1537px) { .WidgetLibrary__formContainer { margin: 0 1rem 1rem; } } .WidgetLibrary__formHeader { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; } .WidgetLibrary__formHeader__title { color: rgb(var(--color-soft-purple-600)); font-weight: 600; font-size: 16px; line-height: 20px; } .WidgetLibrary__formHeader__subtitle { color: rgb(var(--color-gray-700)); font-size: 14px; line-height: 18px; margin-top: 4px; } .WidgetLibrary__formHeader__env { flex-shrink: 0; } .WidgetLibrary__formBody { border-top: 1px solid rgb(var(--color-gray-300)); padding: 20px; display: flex; align-items: flex-end; gap: 16px; } .WidgetLibrary__formFields { display: flex; gap: 16px; flex: 1; } .WidgetLibrary__formFields .InputField { min-width: 280px; flex: 1; } .WidgetLibrary__actions { display: flex; align-items: center; gap: 12px; } .WidgetLibrary__editForm { display: flex; flex-direction: column; gap: 16px; } .Icon--danger { color: rgb(var(--color-error-500)); } .dark-mode .WidgetLibrary__formContainer { background: transparent; border: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .WidgetLibrary__formHeader__title { color: rgb(var(--color-gray-300)); } .dark-mode .WidgetLibrary__formHeader__subtitle { color: rgb(var(--color-gray-500)); } .dark-mode .WidgetLibrary__formBody { border-top: 1px solid rgba(var(--color-gray-600), 0.7); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .BackofficeDash3__checkmark { font-size: 18px; color: rgb(var(--color-success-dash3-600)); } .BackofficeDash3__shield--active { font-size: 20px; } .BackofficeDash3__shield--inactive { font-size: 20px; color: rgb(var(--color-success-dash3-500)); } .BackofficeDash3__orgs__icon--clear { font-size: 18px; margin-left: 8px; color: rgb(var(--color-primary-500)); cursor: pointer; transition: color 0.2s; } .BackofficeDash3__orgs__icon--clear:hover { color: rgb(var(--color-primary-700)); } .BackofficeDash3__orgs__dropdown--planType { width: 125px; } .BackofficeDash3__users__roles { width: 100%; display: flex; flex-direction: column; } .BackofficeDash3__users__role { max-width: 320px; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-top: 4px; margin-bottom: 4px; background: rgba(var(--color-gray-dash3-500), 0.2); color: rgb(var(--color-gray-dash3-700)); border-radius: 5px; } .BackofficeDash3__users__role--superAdmin, .BackofficeDash3__users__role--domainAdmin { background: rgba(var(--color-extra-red-500), 0.2); color: rgb(var(--color-extra-red-500)); } .BackofficeDash3__users__role--superUser { background: rgba(var(--color-extra-orange-600), 0.2); color: rgb(var(--color-extra-orange-500)); } .BackofficeDash3__users__role--orgAdmin, .BackofficeDash3__users__role--orgObserver, .BackofficeDash3__users__role--projectRolesOnly { background: rgba(var(--color-primary-dash3-500), 0.2); color: rgb(var(--color-primary-dash3-500)); } .BackofficeDash3__users__role__icon { color: rgb(var(--color-soft-purple-600)); opacity: 0.8; font-size: 14px; margin-right: 0; margin-left: 5px; } .BackofficeDash3__users__role__icon:hover { opacity: 1; } .BackofficeDash3__users__role__meta { display: grid; flex-direction: column; } .BackofficeDash3__users__role__description { font-size: 16px; font-weight: 600; line-height: 20px; } .BackofficeDash3__users__role__description--link { text-decoration: underline; cursor: pointer; } .BackofficeDash3__users__role__type { margin-top: 2px; font-size: 14px; font-weight: 500; } .BackofficeDash3__count { min-width: 1000px; font-size: 16px; font-weight: 500; color: rgb(var(--color-gray-800)); line-height: 20px; text-align: right; margin-bottom: 12px; margin-right: 50px; } .DomainWizard__previewCssAlert { position: fixed; left: 50%; transform: translateX(-50%); z-index: 1000; bottom: 0; margin: 15px; padding: 20px; background-color: rgb(var(--color-white)); border-radius: 3px; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 0 1px rgba(0, 0, 0, 0.21); display: flex; flex-direction: column; align-items: center; } .DomainWizard__previewCssAlert__text { margin-bottom: 15px; font-size: 14px; color: rgb(var(--color-gray-700)); } .DomainWizard__previewCssAlert .button { width: 100%; } .DomainWizard__colorSquare { height: 38px; flex-grow: 1; align-items: center; justify-content: center; color: white; text-shadow: 1px 1px 2px black; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2); } .DomainWizard__imagePreviewBox { display: flex; position: relative; transition: 0.2s all; align-items: center; justify-content: center; padding: 10px; min-height: 37px; box-sizing: border-box; border: 1px solid rgb(var(--color-gray-300)); border-radius: 3px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%); background-size: 30px 30px; background-position: 0 0, 0 15px, 15px -15px, -15px 0; } .DomainWizard__imagePreviewBox__text { color: rgb(var(--color-gray-600)); } .DomainWizard__imagePreviewBox__dimensions { position: absolute; z-index: 4; bottom: -20px; right: 0px; color: rgb(var(--color-gray-600)); } .DomainWizard__imagePreviewBox__dimensions--valid { color: rgb(var(--color-success-500)); } .DomainWizard__previewElementWrapper { padding: 10px; box-sizing: border-box; border: 1px solid rgb(var(--color-gray-300)); border-radius: 3px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.04) 75%); background-size: 30px 30px; background-position: 0 0, 0 15px, 15px -15px, -15px 0; } .DomainWizard .StepProgress { margin: 0 2rem 2rem 2rem; } .FeatureFlags-dash3__form { margin: 0px 50px 35px 50px; } .dark-mode .BackofficeDash3__checkmark--active { color: rgb(var(--color-success-dash3-500)) !important; } .dark-mode .BackofficeDash3__checkmark--active:hover { color: rgb(var(--color-success-dash3-700)) !important; } .dark-mode .BackofficeDash3__checkmark--inactive { color: rgb(var(--color-success-dash3-500)) !important; } .dark-mode .BackofficeDash3__checkmark--disabled { color: rgb(var(--color-gray-700)) !important; } .dark-mode .BackofficeDash3__checkmark--disabled:hover { color: rgb(var(--color-gray-500)) !important; } .dark-mode .BackofficeDash3__users__roles { width: 100%; display: flex; flex-direction: column; } .dark-mode .BackofficeDash3__users__role { background: rgba(var(--color-gray-dash3-500), 0.3); color: rgb(var(--color-gray-dash3-400)); } .dark-mode .BackofficeDash3__users__role--superAdmin, .dark-mode .BackofficeDash3__users__role--domainAdmin { background: rgba(var(--color-extra-red-500), 0.3); color: rgb(var(--color-extra-red-500)); } .dark-mode .BackofficeDash3__users__role--superUser { background: rgba(var(--color-extra-orange-600), 0.3); color: rgb(var(--color-extra-orange-500)); } .dark-mode .BackofficeDash3__users__role--orgAdmin, .dark-mode .BackofficeDash3__users__role--orgObserver, .dark-mode .BackofficeDash3__users__role--projectRolesOnly { background: rgba(var(--color-primary-dash3-500), 0.2); color: rgb(var(--color-primary-dash3-400)); } .dark-mode .BackofficeDash3__users__role__icon { color: rgb(var(--color-white)); opacity: 0.8; } .dark-mode .BackofficeDash3__users__role__icon:hover { opacity: 1; } .dark-mode .BackofficeDash3__count { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SaveStatusIndicator { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgb(var(--color-gray-dash3-600)); padding: 0 0.5rem; min-height: 2rem; } .SaveStatusIndicator--saving { color: rgb(var(--color-gray-dash3-600)); } .SaveStatusIndicator--saved { color: rgb(var(--color-electric-purple-500)); animation: fadeIn 0.2s ease-in; } .SaveStatusIndicator--error { color: rgb(var(--color-error-dash3-500)); } .SaveStatusIndicator__spinner { display: inline-block; width: 0.875rem; height: 0.875rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; } .SaveStatusIndicator__icon { font-weight: 600; } .SaveStatusIndicator__icon--error { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: rgb(var(--color-error-dash3-500)); color: rgb(var(--color-white)); font-size: 0.6875rem; } .SaveStatusIndicator__text { white-space: nowrap; } .SaveStatusIndicator__retry { background: none; border: none; color: rgb(var(--color-sky-blue-500)); cursor: pointer; padding: 0; font-size: 0.875rem; text-decoration: underline; } .SaveStatusIndicator__retry:hover { opacity: 0.8; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SlicerQueryWidget__chartCanvas { position: relative; overflow: hidden; height: 100%; width: 100%; } .SlicerQueryWidget__loadingScreen { z-index: 2; position: absolute; width: 100%; height: 100%; background-color: rgba(var(--color-white), 0.3); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; border-radius: 5px; } .SlicerQueryWidget__loadingScreen--hidden { width: 0; height: 0; } .SlicerQueryWidget__loadingScreen__title { font-family: "Onest"; font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-900)); box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); background: white; padding: 10px 30px; border-radius: 5px; display: flex; align-items: center; } .SlicerQueryWidget__loadingScreen__spinner { margin-left: 10px; } .SlicerQueryWidget__headerRightComponent { display: flex; align-items: center; justify-content: flex-end; gap: 0.2rem; } .SlicerQueryWidget__headerRightComponent .NiceDropdown__item__text { display: flex; align-items: center; min-width: 12rem; } .SlicerQueryWidget__headerRightComponent span { font-size: 14px; } .SlicerQueryWidget__headerRightComponent .SlicerQuery__buttonGroup { width: 7rem; } .SlicerQueryWidget__headerRightComponent .button { min-width: 25px !important; min-height: 25px !important; width: 25px; height: 25px; padding: 0px 0px; margin-left: 10px; } .SlicerQueryWidget__headerRightComponent .button svg { margin: 0 0 0 2px; width: 0.75em; } .SlicerQueryWidget__filter-icon { margin-left: 8px; margin-right: 4px; color: rgb(var(--color-primary-600)); cursor: pointer; } .SlicerQueryWidget__filter-icon--text { max-height: 3em; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .SlicerQueryWidget__filter-icon:hover { color: rgb(var(--color-primary-700)); } .SlicerQueryWidget .ColumnChart-dash3 { margin: 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DashboardContainer { display: grid; width: 100%; height: auto; gap: 2rem; grid-auto-flow: row; grid-template-columns: 1fr 1fr 1fr; padding: 0 2rem 2rem 2rem; min-width: 1000px; } @media (max-width: 1537px) { .DashboardContainer { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1rem 1rem 1rem; } } .DashboardRow { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; margin-bottom: 15px; } .DashboardRow__wrapper { padding: 0 2rem; } @media (max-width: 1537px) { .DashboardRow__wrapper { padding: 0 1rem; } } .DashboardRow__headerText { font-style: normal; font-weight: 600; font-size: 1rem; line-height: 40px; color: rgb(var(--color-extra-navy-dash3-900)); } .DashboardRow__grid { display: grid; width: 100%; height: auto; gap: 2rem; grid-auto-flow: row dense; grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 1440px) { .DashboardRow__grid { grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (max-width: 769px) { .DashboardRow__grid { display: flex; flex-direction: column; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .DashboardGrid { width: 100%; } .DashboardGrid--editable .DashboardGrid__grid-item:hover .DashboardCard { border-radius: 4px; } .DashboardGrid__grid-item { position: relative; contain: layout style; } .DashboardGrid__grid-item .react-resizable-handle { z-index: 10; width: 50px; height: 50px; bottom: 4px; right: 4px; opacity: 0; transition: opacity 0.2s ease; background: none; } .DashboardGrid__grid-item .react-resizable-handle::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 50px; height: 50px; border-right: 2px solid rgb(var(--color-electric-purple-500)); border-bottom: 2px solid rgb(var(--color-electric-purple-500)); border-radius: 0 0 5px 0; } .DashboardGrid__grid-item .react-resizable-handle:hover { opacity: 1; } .DashboardGrid__grid-item:hover .react-resizable-handle { opacity: 0.7; } .DashboardGrid__grid-item:hover .drag-handle { opacity: 1; color: rgb(var(--color-electric-purple-500)); } .dark-mode .DashboardGrid__grid-item .react-resizable-handle::after { border-right-color: rgb(var(--color-sky-blue-600)); border-bottom-color: rgb(var(--color-sky-blue-600)); } .dark-mode .DashboardGrid__grid-item:hover .drag-handle { color: rgb(var(--color-sky-blue-600)); } .DashboardGrid .react-grid-layout { position: relative; margin-top: -25px; } .DashboardGrid .react-grid-layout .react-grid-item { transition: all 200ms ease; transition-property: left, top, width, height; } .DashboardGrid .react-grid-layout .react-grid-item.react-grid-item--dragging { transition: none; z-index: 3; opacity: 0.8; } .DashboardGrid .react-grid-layout .react-grid-item.react-grid-item--dragging .DashboardCard { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .DashboardGrid .react-grid-layout .react-grid-item.react-grid-item--resizing { transition: none; z-index: 3; opacity: 0.9; } .DashboardGrid .react-grid-layout .react-grid-item.react-grid-placeholder { background: rgba(74, 144, 226, 0.2); border-radius: 4px; opacity: 0.7; transition-duration: 100ms; z-index: 2; user-select: none; } @media (max-width: 768px) { .DashboardGrid .react-grid-layout .react-grid-item { transition-duration: 100ms; } } @media (max-width: 480px) { .DashboardGrid__grid-item .react-resizable-handle { opacity: 1; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .CustomDashboard-dash3__loading { display: flex; align-items: center; justify-content: center; min-height: 70vh; width: 100%; } .CustomDashboard-dash3__emptyAlert { display: flex; flex-direction: column; justify-content: center; } .CustomDashboard-dash3--editMode { min-height: 75vh; border-radius: 10px; padding: 15px; width: 100%; background-color: rgba(var(--color-white), 0.15); } .CustomDashboard-dash3__sceneViewer { margin: 40px 0 0 0; } .CustomDashboard-dash3__sceneViewer #sceneViewerCanvas { width: 100%; } .CustomDashboard-dash3__sceneViewerDropdown { margin: 30px 10px 30px 0; } .CustomDashboard-dash3__sceneViewerDropdown__dropdown { top: 55px; left: 0px; } .CustomDashboard-dash3__performanceStandards { grid-template-columns: 1fr 1fr 1fr 1fr; margin: 10px 0; } .CustomDashboard-dash3__performanceStandards .DashboardCard-dash3--span-2 { grid-column: auto/span 2; } @media (max-width: 2000px) { .CustomDashboard-dash3__performanceStandards .DashboardCard-dash3--span-2 { grid-column: auto/span 4; } } .CustomDashboard-dash3__performanceStandards__card { min-height: 200px; display: flex; flex-direction: row; justify-content: space-between; } .CustomDashboard-dash3__performanceStandards__card__chart { display: flex; flex-direction: column; align-items: center; justify-content: center; width: fit-content; } .CustomDashboard-dash3__performanceStandards__card__chart .HeroFigure-dash3 { margin: 0 !important; } .CustomDashboard-dash3__performanceStandards__card__label { margin-top: 10px; font-family: "Onest"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: rgb(var(--color-extra-navy-dash3-900)); } .CustomDashboard-dash3__retention { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow-x: scroll; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .CustomDashboard-dash3__retention:hover { scrollbar-color: #808080 transparent; } .CustomDashboard-dash3__retention::-webkit-scrollbar { background-color: transparent; height: 7px; } .CustomDashboard-dash3__retention::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; outline: 2px solid transparent; } .CustomDashboard-dash3__retention::-webkit-scrollbar-button { display: none; } .CustomDashboard-dash3__retention .Table-dash3 { height: 100%; } .CustomDashboard-dash3__retention table { border-collapse: separate; border-spacing: 3px; } .CustomDashboard-dash3__retention th, .CustomDashboard-dash3__retention td { white-space: nowrap; } .CustomDashboard-dash3__sessionTimeAverage { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .CustomDashboard-dash3__widgetDropdown { max-width: 200px; white-space: nowrap; } .CustomDashboard-dash3__widgetDropdown__dropdown { width: fit-content; top: 50px; } .CustomDashboard-dash3__immersiveInsights { grid-template-columns: 1fr 1fr 1fr 1fr; margin: 10px 0; } .CustomDashboard-dash3__immersiveInsights .DashboardCard-dash3 { overflow: visible; } .CustomDashboard-dash3__immersiveInsights .DashboardCard-dash3--span-2 { grid-column: auto/span 2; } @media (max-width: 2000px) { .CustomDashboard-dash3__immersiveInsights .DashboardCard-dash3--span-2 { grid-column: auto/span 4; } } .CustomDashboard-dash3__immersiveInsights__card { width: fit-content; display: flex; flex-direction: row; justify-content: center; } .CustomDashboard-dash3__immersiveInsights__card__chart { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: fit-content; } .CustomDashboard-dash3__immersiveInsights__card__chart h2 { font-style: normal; font-weight: 600; font-size: 14px; color: rgb(var(--color-extra-navy-dash3-900)); } .CustomDashboard-dash3__spatialAnalysis { grid-template-columns: 1fr 1fr 1fr; margin: 10px 0; } @media (max-width: 2000px) { .CustomDashboard-dash3__spatialAnalysis { grid-template-columns: 1fr 1fr; } } .CustomDashboard-dash3__playableSpace, .CustomDashboard-dash3__sessionsByGeography { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; } .CustomDashboard-dash3__highestTrafficCountries { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-around; } .CustomDashboard-dash3__highestTrafficCountries .IllustrationFigure-dash3__illustration__text { width: 10em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .CustomDashboard-dash3__highestTrafficCountries__customHeroFigure { margin-top: 0; margin-bottom: 10px; font-size: 40px; } .CustomDashboard-dash3__playableSpace .ColumnChart-dash3 { margin-left: 6vw; } .CustomDashboard-dash3__playableSpace, .CustomDashboard-dash3__sessionTimeAverage { align-items: center; } .CustomDashboard-dash3__playableSpace__customHeroFigure, .CustomDashboard-dash3__sessionTimeAverage__customHeroFigure { margin-top: 10px; font-size: 60px; } .CustomDashboard-dash3__playableSpace__customHeroFigure--small, .CustomDashboard-dash3__sessionTimeAverage__customHeroFigure--small { margin-top: 0px; font-size: 40px; } .CustomDashboard-dash3__playableSpace__drillDown, .CustomDashboard-dash3__sessionTimeAverage__drillDown { display: flex; flex-direction: column; width: 100%; } .CustomDashboard-dash3__playableSpace__drillDown .button, .CustomDashboard-dash3__sessionTimeAverage__drillDown .button { font-size: 13px; min-height: 22px; min-width: fit-content !important; padding: 6px 8px; margin-left: 6vw; } .CustomDashboard-dash3__sessionsByGeography { align-items: flex-start; } @media (max-width: 62em) { .CustomDashboard-dash3__sessionsByGeography { flex-direction: column; } } .CustomDashboard-dash3__tableWrapper { height: 350px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .CustomDashboard-dash3__tableWrapper:hover { scrollbar-color: #808080 transparent; } .CustomDashboard-dash3__tableWrapper::-webkit-scrollbar { background-color: transparent; width: 7px; } .CustomDashboard-dash3__tableWrapper::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .CustomDashboard-dash3__tableWrapper::-webkit-scrollbar-button { display: none; } .CustomDashboard-dash3__worldMap { width: 60%; height: 100%; margin: 0 20px; } @media (max-width: 1560px) { .CustomDashboard-dash3__worldMap { margin: 20px; } } .CustomDashboard-dash3__headsetOrientation { position: relative; width: 100%; height: 90%; } .CustomDashboard-dash3__headsetOrientation__icon { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; } .CustomDashboard-dash3__headsetOrientation__degrees { width: 100%; color: rgb(var(--color-white)); font-size: 12px; font-family: "Onest"; display: flex; flex-direction: row; justify-content: space-between; margin: 0 auto; position: relative; margin: 0 auto; top: 145px; } .CustomDashboard-dash3__headsetOrientation__degrees__container { width: 100%; height: fit-content; display: flex; justify-content: space-between; } .CustomDashboard-dash3__headsetOrientation__degrees__text { color: #959ba4 !important; font-weight: 400; font-size: 12px; font-family: "Onest"; } .CustomDashboard-dash3__headsetOrientationV2 { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } .CustomDashboard-dash3__headsetOrientationV2__icon { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; } .CustomDashboard-dash3__headsetOrientationV2__degrees { width: 100%; color: rgb(var(--color-white)); font-size: 12px; font-family: "Onest"; display: flex; flex-direction: row; justify-content: space-between; margin: 0 auto; position: relative; margin: 0 auto; top: 145px; } .CustomDashboard-dash3__headsetOrientationV2__degrees__container { width: 100%; height: fit-content; display: flex; justify-content: space-between; } .CustomDashboard-dash3__headsetOrientationV2__degrees__text { color: #959ba4 !important; font-weight: 400; font-size: 12px; font-family: "Onest"; } .dark-mode .CustomDashboard-dash3__performanceStandards__card__label { color: rgb(var(--color-white)); } .react-grid-layout { position: relative; transition: height 200ms ease; } .react-grid-item { transition: all 200ms ease; transition-property: left, top; font-family: Arial, Helvetica, sans-serif; text-align: center; border-radius: 10px; background-color: transparent; height: 330px; overflow-y: hidden; margin-bottom: 40px; } .react-grid-item.cssTransforms { transition-property: transform; } .react-grid-item.resizing { z-index: 1; will-change: width, height; } .react-grid-item.react-draggable-dragging { transition: none; z-index: 3; will-change: transform; } .react-grid-item.react-grid-placeholder { opacity: 0.2; transition-duration: 100ms; z-index: 2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .react-grid-item > .react-resizable-handle { position: absolute; width: 50px; height: 50px; bottom: 0; right: 0; cursor: se-resize; background: none; } .react-grid-item > .react-resizable-handle::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-right: 2px solid rgb(var(--color-electric-purple-500)); border-bottom: 2px solid rgb(var(--color-electric-purple-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SceneViewerWidget__sceneViewer { margin: 40px 0 0 0; } .SceneViewerWidget__sceneViewer__loadingBar { position: absolute; box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: white; width: 350px; padding: 15px; } .SceneViewerWidget__sceneViewer__loadingBar--complete { opacity: 0; top: unset; bottom: 0; transform: translateX(-50%) translateY(105%); transition: 1s all; } .SceneViewerWidget__sceneViewer__loadingBar__title { font-size: 12pt; font-weight: 700; margin-bottom: 25px; color: rgb(var(--color-secondary-900)); text-align: center; } .SceneViewerWidget__sceneViewer__loadingBar__bar { background: rgb(var(--color-gray-500)); border-radius: 5px; width: 100%; height: 5px; position: relative; } .SceneViewerWidget__sceneViewer__loadingBar__bar__progress { overflow: hidden; border-radius: 5px; transition: 1s bottom, 1s top, 1s transform, 0.2s opacity; transition-delay: 0.2s; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgb(var(--color-success-500)); } .SceneViewerWidget__sceneViewer__loadingBar__bar__progress:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: pulsatingLoadingEffect 1s infinite; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-repeat: no-repeat; } .SceneViewerWidget__sceneViewer__loadingBar__bar__progress--stretch { animation: loadingBarFinalStretch 10s ease-out; } @keyframes loadingBarFinalStretch { 0% { width: 95% !important; } 100% { width: 99.5% !important; } }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .SVGChart { display: flex; justify-content: center; flex-direction: column; } .SVGChart__svg { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .SVGChart__container { width: 100%; min-height: 300px; } .SVGChart .apexcharts-pie { display: none; } .SVGChart .apexcharts-legend-text { color: rgb(var(--color-extra-midnight-dash3-800)) !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ExitPollResults-dash3__questionChart { position: relative; width: 100%; height: 90%; } .ExitPollResults-dash3__questionChart__calculateNPS { width: 100%; display: flex; justify-content: center; } .ExitPollResults-dash3__questionChart__npsText { display: flex; flex-direction: column; align-items: center; margin-left: 20px; color: rgb(var(--color-extra-violet-dash3-800)); } .ExitPollResults-dash3__questionChart__npsText span:first-child { margin-bottom: 5px; font-size: 13px; } .ExitPollResults-dash3__questionChart__npsText span:last-child { margin-bottom: 5px; font-size: 20px; text-decoration: underline; } .ExitPollResults-dash3__questionSetDropdown, .ExitPollResults-dash3__questionVersionDropdown { margin-left: 10px; } .ExitPollResults-dash3__questionSetDropdown__dropdown, .ExitPollResults-dash3__questionVersionDropdown__dropdown { top: 55px; left: 0px; } .ExitPollResults-dash3__questionIdDropdown { margin-left: 10px; min-width: 250px; } .ExitPollResults-dash3__questionIdDropdown__dropdown { top: calc(100% + 0px) !important; } .ExitPollResults-dash3__questionSetInfo { font-family: "Onest"; } .ExitPollResults-dash3__questionSetInfo__text { font-weight: 500; font-size: 17px; line-height: 20px; color: rgb(var(--color-title-dash3)); padding: 10px 0; } .ExitPollResults-dash3__questionSetInfo__typeLabel { display: flex; } .ExitPollResults-dash3__questionSetInfo__row { display: grid; font-weight: 500; font-size: 15px; } .ExitPollResults-dash3__questionSetInfo__row--first { grid-template-columns: 0.4fr 0.9fr; } .ExitPollResults-dash3__questionSetInfo__row--second { border-top: 1px solid rgb(var(--color-gray-300)); grid-template-columns: 0.4fr 0.5fr 0.4fr; } .ExitPollResults-dash3__questionSetInfo__row__title { padding: 25px 0 30px 0; margin-left: 30px; margin-right: 0; } .ExitPollResults-dash3__questionSetInfo__row__field { margin-right: 30px; padding: 25px 0 30px 0; } .ExitPollResults-dash3__questionSetInfo__row__field--middle { margin-right: 0; padding: 25px 0 30px 0; } .ExitPollResults-dash3__emptyAlert { display: flex; flex-direction: column; justify-content: center; } .ExitPollResults-dash3 .DashboardContainer { margin-bottom: 42px; } .ExitPollResults-dash3 .ButtonRow--spacingBottom { margin-bottom: 30px; } .ExitPollResults-dash3 .DashboardCard-dash3__content__description { margin: 0px 0 10px 0; } .ExitPollResults-dash3 .DashboardCard-dash3__content__description__text { width: 100%; display: flex; justify-content: center; } .ExitPollResults-dash3 .DashboardCard-dash3__content .button { font-size: 13px; min-height: 22px; min-width: fit-content !important; padding: 6px 8px; } .ExitPollResults-dash3 .NiceTableDash3 { margin: 0; } .ExitPollResults-dash3 .NiceTableDash3__container--noBorder { border: solid 1px rgb(var(--color-gray-600)); } .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sessionName, .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sceneName { font-size: 15px; padding: 0 1rem; font-weight: 600; line-height: 18px; margin-right: 15px; margin-bottom: 3px; display: flex; align-items: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sessionName:hover, .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sceneName:hover { overflow: visible; } .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sessionName--link, .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sceneName--link { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sessionName--link:hover, .ExitPollResults-dash3 .NiceTableDash3 .userResponseTable__sceneName--link:hover { cursor: pointer; text-decoration: underline; } .ExitPollResults-dash3__headerDropdown__dropdown { left: -30px; } .ExitPollResults-dash3 .apexcharts-toolbar { z-index: 0 !important; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ObjectiveResults-dash3__objectiveDropdown, .ObjectiveResults-dash3__versionDropdown { margin-left: 10px; } .ObjectiveResults-dash3__objectiveDropdown__dropdown, .ObjectiveResults-dash3__versionDropdown__dropdown { top: 55px; left: 0px; } .ObjectiveResults-dash3__emptyAlert { display: flex; flex-direction: column; justify-content: center; } .ObjectiveResults-dash3 .DashboardContainer { margin-bottom: 42px; } .ObjectiveResults-dash3 .ButtonRow--spacingBottom { margin-bottom: 30px; }.Dashboards-dash3__content { min-height: 75vh; min-width: 1000px; padding: 0px 50px 35px 50px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .ObjectivesDash3__objectiveInfo { font-family: "Onest"; } .ObjectivesDash3__objectiveInfo__text { font-weight: 500; font-size: 16px; line-height: 18px; color: rgb(var(--color-title-dash3)); padding: 9px 0; } .ObjectivesDash3__objectiveInfo__typeLabel { display: flex; } .ObjectivesDash3__objectiveInfo__row { display: grid; font-weight: 500; font-size: 15px; } .ObjectivesDash3__objectiveInfo__row--first { grid-template-columns: 0.4fr 0.9fr; } .ObjectivesDash3__objectiveInfo__row--second { border-top: 1px solid rgb(var(--color-gray-300)); grid-template-columns: 0.4fr 0.5fr 0.4fr; } .ObjectivesDash3__objectiveInfo__row__title { padding: 25px 0 30px 0; margin-left: 30px; margin-right: 0; } .ObjectivesDash3__objectiveInfo__row__field { margin-right: 30px; padding: 25px 0 30px 0; } .ObjectivesDash3__objectiveInfo__row__field--middle { margin-right: 0; padding: 25px 0 30px 0; } .ObjectivesDash3__objectiveSteps { font-family: "Onest"; } .ObjectivesDash3__objectiveSteps__row { display: grid; min-height: 80px; } .ObjectivesDash3__objectiveSteps__row__header { color: rgb(var(--color-title-dash3)); font-weight: 700; font-size: 16px; grid-template-columns: 0.15fr 1fr 0.3fr 0.3fr 0.3fr 0.25fr; } .ObjectivesDash3__objectiveSteps__row__header--item { display: flex; align-items: center; } .ObjectivesDash3__objectiveSteps__row__header--item--center { justify-content: center; } .ObjectivesDash3__objectiveSteps__row__step { user-select: none; border-top: 1px solid rgb(var(--color-gray-300)); font-weight: 500; font-size: 17px; grid-template-columns: 0.15fr 1fr 0.3fr 0.3fr 0.3fr 0.25fr; } .ObjectivesDash3__objectiveSteps__row__step--draggable { cursor: grab; font-family: "Onest"; } .ObjectivesDash3__objectiveSteps__row__step--dragging { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); border: none; background: rgb(var(--color-white)) !important; opacity: 1 !important; position: relative !important; z-index: 1000 !important; } .ObjectivesDash3__objectiveSteps__row__step--item { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 0.3rem; } .ObjectivesDash3__objectiveSteps__row__step--item b { font-weight: 600; } .ObjectivesDash3__objectiveSteps__row__step--item--stepType { color: #959ba4; margin-bottom: 0.5rem; font-size: 15px; } .ObjectivesDash3__objectiveSteps__row__step--item--handle { color: rgb(var(--color-extra-indigo-dash3-400)); cursor: grab; } .ObjectivesDash3__objectiveSteps__row__step--item--center { align-items: center; } .ObjectivesDash3__objectiveSteps__row__step--item--padding { margin-right: 1rem; } .ObjectivesDash3__objectiveSteps__row__addStep { height: 90px; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgb(var(--color-gray-300)); } .ObjectivesDash3__stepModal__eventPropertyDropdown { width: 100%; padding-right: 0.5rem; } .ObjectivesDash3__stepModal__image { width: 30px; height: 30px; margin: -10px 0; } .ObjectivesDash3__stepModal__checkboxLabel { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-left: 15px; } .ObjectivesDash3__stepModal .StepProgress__bar { margin-bottom: 25px; } .ObjectivesDash3__stepModal .StepProgress__step__name { font-family: "Onest"; font-size: 15px; font-weight: 600; } .ObjectivesDash3__stepModal .Form-dash3__section__title { font-family: "Onest"; color: rgb(var(--color-primary-500)); margin-bottom: 15px; } .ObjectivesDash3__stepModal .Form-dash3__section__description { color: rgb(var(--color-gray-700)); margin-top: 0; font-size: 15px; margin-bottom: 25px; } .ObjectivesDash3__resultsOverview { display: flex; justify-content: space-around; margin: 40px 0; min-height: 156px; } .ObjectivesDash3__resultsOverview__metric { display: flex; flex-direction: column; align-items: center; max-width: 50%; } .ObjectivesDash3__resultsOverview__metric__label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 30px; } .ObjectivesDash3__resultsOverview__metric--participant { font-size: 60px; text-align: center; word-wrap: anywhere; } .ObjectivesDash3__resultsOverview__metric--participantLong { font-size: 45px; text-align: center; word-wrap: anywhere; } .ObjectivesDash3__stepOverview { display: flex; justify-content: center; align-items: center; margin: 25px 40px 40px 40px; min-height: 300px; } .ObjectivesDash3__sessionTable__name { font-size: 15px; padding-right: 10px; font-weight: 600; line-height: 18px; display: flex; overflow: hidden; } .ObjectivesDash3__sessionTable__name--link { color: rgb(var(--color-secondary-500)); display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ObjectivesDash3__sessionTable__name--link:hover { text-decoration: underline; } .ObjectivesDash3__sessionTable__description { font-size: 14px; line-height: 18px; display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ObjectivesDash3__sessionTable__date { font-size: 14px; line-height: 18px; } .ObjectivesDash3__sessionTable__successRate { font-size: 15px; font-weight: 600; color: rgb(var(--color-primary-500)); margin-bottom: 2px; text-align: center; } .ObjectivesDash3__sessionTable__successRatio { font-size: 14px; text-align: center; } .ObjectivesDash3__sessionTable__stepBarContainer { display: flex; } .ObjectivesDash3__sessionTable__stepBar { width: 100%; display: flex !important; height: 30px; align-items: center; justify-content: center; flex-grow: 1; transition: 0.2s background-color; gap: 3px; } .ObjectivesDash3__sessionTable__stepBar--shrunken { gap: 1px; } .ObjectivesDash3__sessionTable__stepBar--success { color: rgb(var(--color-white)); background: rgb(var(--color-primary-500)); } .ObjectivesDash3__sessionTable__stepBar--success:hover { background-color: rgb(var(--color-primary-400)); } .ObjectivesDash3__sessionTable__stepBar--failure { color: rgb(var(--color-title-dash3)); background: rgb(var(--color-gray-400)); } .ObjectivesDash3__sessionTable__stepBar--failure:hover { background-color: rgb(var(--color-gray-300)); } .ObjectivesDash3__exclamation { color: gold; } .ObjectivesDash3__exclamation--warning { color: rgb(var(--color-error-500)); } .ObjectivesDash3__arrowsRepeat { color: rgb(var(--color-soft-purple-600)); } .ObjectivesDash3__dashboardCard--indigoHeader .DashboardCard-dash3__header h3 { color: rgb(var(--color-soft-purple-600)); } /* Dark mode */ .dark-mode .ObjectivesDash3__objectiveInfo__text { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectivesDash3__objectiveInfo__row--second { border-top: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .ObjectivesDash3__objectiveInfo__row__title { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectivesDash3__objectiveInfo__row__field { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectivesDash3__objectiveSteps__row__header { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectivesDash3__objectiveSteps__row__step { color: rgb(var(--color-gray-300)); border-top: 1px solid rgba(var(--color-gray-600), 0.7); } .dark-mode .ObjectivesDash3__objectiveSteps__row__step--dragging { background: rgb(var(--color-extra-midnight-dash3-900)) !important; border-bottom: 1px solid rgba(var(--color-gray-600), 0.7); opacity: 1 !important; position: relative !important; z-index: 1000 !important; } .dark-mode .ObjectivesDash3__objectiveSteps__row__step--item--stepType { color: rgb(var(--color-gray-400)); } .dark-mode .ObjectivesDash3__objectiveSteps__row__addStep { border-top: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .ObjectivesDash3__stepModal__checkboxLabel { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectivesDash3__resultsOverview__metric__label { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectivesDash3__sessionTable__successRate { color: rgb(var(--color-primary-300)); } .dark-mode .ObjectivesDash3__sessionTable__successRatio { color: rgb(var(--color-gray-200)); } .dark-mode .ObjectivesDash3__sessionTable__stepBar--success { background: rgb(var(--color-primary-400)); } .dark-mode .ObjectivesDash3__sessionTable__stepBar--success:hover { background-color: rgb(var(--color-primary-300)); } .dark-mode .ObjectivesDash3__arrowsRepeat { color: rgb(var(--color-extra-indigo-dash3-100)); } .dark-mode .ObjectivesDash3__dashboardCard--indigoHeader .DashboardCard-dash3__header h3 { color: rgb(var(--color-gray-300)); } .NiceTableDash3__header.NiceTableDash3--ObjectiveSessionList { padding: 0px 50px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .Analysis__container { display: flex; flex-direction: column; padding: 30px; } .Analysis__headerActions { display: flex; gap: 1rem; justify-content: space-between; align-items: center; min-width: 1000px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 0.6rem 1rem; } .Analysis__headerActions__left { display: flex; align-items: center; gap: 1rem; } .Analysis__headerActions__right { display: flex; align-items: center; gap: 1rem; } .Analysis__headerActions__title { font-weight: 600; font-size: 16px; color: rgb(var(--color-title-dash3)); white-space: nowrap; } .Analysis__filterHeader { font-family: "Onest"; color: rgb(var(--color-title-dash3)); font-size: 18px; margin-bottom: 20px; display: flex; align-items: center; } .Analysis__filterHeader--title { font-weight: 600; } .Analysis__filterHeader--disabled { margin-left: 15px; font-weight: 600; font-size: 16px; color: rgb(var(--color-gray-600)); } .Analysis__filterHeader--noMargin { margin-bottom: 0; } .Analysis__filterHeader--visualize { justify-content: space-between; } .Analysis__filterRow { display: flex; flex-direction: row; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid rgb(var(--color-gray-300)); } .Analysis__filterRow--andText { display: flex; align-items: center; margin-right: 20px; margin-top: 25px; font-size: 14px; font-weight: 600; color: rgb(var(--color-title-dash3)); } .Analysis__filterRow--groupByDate { display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px; } .Analysis__filterRow--operation { gap: 10px; } .Analysis__filterRow--lastItem { border-bottom: none; padding-bottom: 0px; margin-bottom: 10px; } .Analysis__buttonRow { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem; margin-right: 20px; } .Analysis__chartCanvas { position: relative; overflow: visible; height: 640px; display: flex; justify-content: center; align-items: flex-start; } .Analysis__chartCanvas .data-table__main { margin-top: 18px; } .Analysis__chartCanvas .table-chart__controls { margin-top: 18px; padding-top: 8px; padding-left: 0; } .Analysis__chartCanvas .data-table__pagination { font-size: 16px; } .Analysis__loadingScreen { z-index: 2; position: absolute; width: 100%; height: 100%; background-color: rgba(var(--color-white), 0.3); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; border-radius: 5px; } .Analysis__loadingScreen--hidden { width: 0; height: 0; } .Analysis__loadingScreen__title { font-family: "Onest"; font-size: 14px; font-weight: 600; color: rgb(var(--color-secondary-900)); box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); background: white; padding: 10px 30px; border-radius: 5px; display: flex; align-items: center; } .Analysis__loadingScreen__spinner { margin-left: 10px; } .Analysis__actionButtons { display: flex; align-items: center; gap: 0.5rem; } .Analysis__actionButtons__bulk__title { font-size: 15px; font-weight: 600; margin-right: 10px; line-height: 40px; } .Analysis__actionButtons__bulk__title--nonselected { color: rgb(var(--color-gray-600)); } .Analysis__dateRangeMenu { width: 100%; font-size: 14px; color: rgb(var(--color-soft-purple-600)); cursor: pointer; display: flex; align-items: center; } .Analysis__dateRangeMenu__icon { font-size: 18px; } .Analysis__dateRangeMenu__text { font-weight: 600; font-size: 14px; } .dark-mode .Analysis__headerActions { border-color: rgba(var(--color-gray-600), 0.7); } .dark-mode .Analysis__headerActions__title { color: rgb(var(--color-gray-300)); } .dark-mode .Analysis__filterHeader { color: rgb(var(--color-gray-200)); } .dark-mode .Analysis__filterHeader--disabled { color: rgb(var(--color-gray-400)); } .dark-mode .Analysis__filterRow { border-bottom: 1px solid rgba(242, 240, 240, 0.3); } .dark-mode .Analysis__filterRow--lastItem { border-bottom: none; } .dark-mode .Analysis__filterRow--andText { color: rgb(var(--color-gray-200)); }.rc-slider { position: relative; width: 100%; height: 14px; padding: 5px 0; border-radius: 6px; touch-action: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rc-slider * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rc-slider-rail { position: absolute; width: 100%; height: 4px; background-color: #e9e9e9; border-radius: 6px; } .rc-slider-track, .rc-slider-tracks { position: absolute; height: 4px; background-color: #abe2fb; border-radius: 6px; } .rc-slider-track-draggable { z-index: 1; box-sizing: content-box; background-clip: content-box; border-top: 5px solid rgba(0, 0, 0, 0); border-bottom: 5px solid rgba(0, 0, 0, 0); transform: translateY(-5px); } .rc-slider-handle { position: absolute; z-index: 1; width: 14px; height: 14px; margin-top: -5px; background-color: #fff; border: solid 2px #96dbfa; border-radius: 50%; cursor: pointer; cursor: -webkit-grab; cursor: grab; opacity: 0.8; user-select: none; touch-action: pan-x; } .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging { border-color: #57c5f7; box-shadow: 0 0 0 5px #96dbfa; } .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging-delete { opacity: 0; } .rc-slider-handle:focus { outline: none; box-shadow: none; } .rc-slider-handle:focus-visible { border-color: #2db7f5; box-shadow: 0 0 0 3px #96dbfa; } .rc-slider-handle-click-focused:focus { border-color: #96dbfa; box-shadow: unset; } .rc-slider-handle:hover { border-color: #57c5f7; } .rc-slider-handle:active { border-color: #57c5f7; box-shadow: 0 0 5px #57c5f7; cursor: -webkit-grabbing; cursor: grabbing; } .rc-slider-mark { position: absolute; top: 18px; left: 0; width: 100%; font-size: 12px; } .rc-slider-mark-text { position: absolute; display: inline-block; color: #999; text-align: center; vertical-align: middle; cursor: pointer; } .rc-slider-mark-text-active { color: #666; } .rc-slider-step { position: absolute; width: 100%; height: 4px; background: transparent; } .rc-slider-dot { position: absolute; bottom: -2px; width: 8px; height: 8px; vertical-align: middle; background-color: #fff; border: 2px solid #e9e9e9; border-radius: 50%; cursor: pointer; } .rc-slider-dot-active { border-color: #96dbfa; } .rc-slider-dot-reverse { margin-right: -4px; } .rc-slider-disabled { background-color: #e9e9e9; } .rc-slider-disabled .rc-slider-track { background-color: #ccc; } .rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-dot { background-color: #fff; border-color: #ccc; box-shadow: none; cursor: not-allowed; } .rc-slider-disabled .rc-slider-mark-text, .rc-slider-disabled .rc-slider-dot { cursor: not-allowed !important; } .rc-slider-vertical { width: 14px; height: 100%; padding: 0 5px; } .rc-slider-vertical .rc-slider-rail { width: 4px; height: 100%; } .rc-slider-vertical .rc-slider-track { bottom: 0; left: 5px; width: 4px; } .rc-slider-vertical .rc-slider-track-draggable { border-top: 0; border-right: 5px solid rgba(0, 0, 0, 0); border-bottom: 0; border-left: 5px solid rgba(0, 0, 0, 0); transform: translateX(-5px); } .rc-slider-vertical .rc-slider-handle { position: absolute; z-index: 1; margin-top: 0; margin-left: -5px; touch-action: pan-y; } .rc-slider-vertical .rc-slider-mark { top: 0; left: 18px; height: 100%; } .rc-slider-vertical .rc-slider-step { width: 4px; height: 100%; } .rc-slider-vertical .rc-slider-dot { margin-left: -2px; } .rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear { display: block !important; animation-duration: 0.3s; animation-fill-mode: both; animation-play-state: paused; } .rc-slider-tooltip-zoom-down-leave { display: block !important; animation-duration: 0.3s; animation-fill-mode: both; animation-play-state: paused; } .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { animation-name: rcSliderTooltipZoomDownIn; animation-play-state: running; } .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { animation-name: rcSliderTooltipZoomDownOut; animation-play-state: running; } .rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear { transform: scale(0, 0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } .rc-slider-tooltip-zoom-down-leave { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } @keyframes rcSliderTooltipZoomDownIn { 0% { transform: scale(0, 0); transform-origin: 50% 100%; opacity: 0; } 100% { transform: scale(1, 1); transform-origin: 50% 100%; } } @keyframes rcSliderTooltipZoomDownOut { 0% { transform: scale(1, 1); transform-origin: 50% 100%; } 100% { transform: scale(0, 0); transform-origin: 50% 100%; opacity: 0; } } .rc-slider-tooltip { position: absolute; top: -9999px; left: -9999px; visibility: visible; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rc-slider-tooltip * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rc-slider-tooltip-hidden { display: none; } .rc-slider-tooltip-placement-top { padding: 4px 0 8px 0; } .rc-slider-tooltip-inner { min-width: 24px; height: 24px; padding: 6px 2px; color: #fff; font-size: 12px; line-height: 1; text-align: center; text-decoration: none; background-color: #6c6c6c; border-radius: 6px; box-shadow: 0 0 4px #d9d9d9; } .rc-slider-tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { bottom: 4px; left: 50%; margin-left: -4px; border-width: 4px 4px 0; border-top-color: #6c6c6c; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .RestrictedContent { display: flex; align-items: center; gap: 8px; font-family: "Onest"; color: rgb(var(--color-gray-600)); } .RestrictedContent__icon { display: flex; align-items: center; color: rgb(var(--color-gray-600)); } .RestrictedContent__text { display: flex; flex-direction: column; } .RestrictedContent__title { font-size: 13px; font-weight: 500; color: rgb(var(--color-extra-indigo-dash3-700)); } .RestrictedContent__message { font-size: 12px; color: rgb(var(--color-gray-600)); margin-top: 2px; } .RestrictedContent--inline { padding: 6px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.03); } .RestrictedContent--block { flex-direction: column; justify-content: center; text-align: center; padding: 24px; min-height: 120px; } .RestrictedContent--block .RestrictedContent__icon { font-size: 24px; margin-bottom: 8px; } .RestrictedContent--block .RestrictedContent__title { font-size: 14px; } .dark-mode .RestrictedContent { color: rgb(var(--color-gray-300)); } .dark-mode .RestrictedContent__icon { color: rgb(var(--color-gray-300)); } .dark-mode .RestrictedContent__title { color: rgb(var(--color-gray-300)); } .dark-mode .RestrictedContent__message { color: rgb(var(--color-gray-400)); } .dark-mode .RestrictedContent--inline { background: rgba(255, 255, 255, 0.04); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .poi-player__circle { fill: rgba(var(--color-secondary-500), 0.1); stroke: rgb(var(--color-secondary-500)); stroke-width: 3px; } .poi-player__rectangle { fill: rgba(var(--color-primary-500), 0.1); stroke: rgb(var(--color-primary-500)); stroke-width: 1px; } .poi-player__name { min-width: 100px; position: absolute; text-align: left; } .poi-player__name--rectangle { background: rgb(var(--color-primary-500)); color: rgb(var(--color-primary-100)); } .poi-player__name--circle { background: rgb(var(--color-secondary-500)); color: rgb(var(--color-primary-100)); transform: translateX(-50%); } .poi-player__metrics { mix-blend-mode: exclusion; position: absolute; top: 0; margin: 10px; padding: 5px; font-size: 14px; color: rgb(var(--color-white)); font-weight: bold; font-family: Lekton; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .video-controls { position: relative; height: 60px; } .video-controls__horizental-group { height: 60px; display: flex; align-items: center; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .video-controls__horizental-group2 { display: flex; } .video-controls__horizental-group3 { display: flex; align-items: center; } .video-controls__children { display: flex; width: 100%; justify-content: center; } .video-controls #play-pause { cursor: pointer; width: 12px; padding: 12px; color: rgb(var(--color-secondary-500)); font-size: 1.2em; } .video-controls__volume { display: flex; align-items: center; width: 180px; } .video-controls__volume .icon { width: 12px; padding: 12px; color: rgb(var(--color-gray-600)); font-size: 1.2em; } .video-controls__volume__speaker-holder { width: 40px; height: 40px; } .video-controls__volume i { cursor: pointer; width: 20px; } .video-controls__volume .fa-volume-off { color: rgb(var(--color-gray-600)); } .video-controls__volume input#volume-bar { background: transparent; height: 25px; -webkit-appearance: none; margin: 0px 0; width: 100%; } .video-controls__volume input#volume-bar:focus { outline: none; } .video-controls__volume input#volume-bar::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; transition: 0.2s; box-shadow: 0px 0px 0px color-white; background: rgb(var(--color-gray-600)); border-radius: 1px; border: 0px solid color-white; } .video-controls__volume input#volume-bar::-webkit-slider-thumb { box-shadow: 0px 0px 0px color-white; border: 5px solid rgb(var(--color-gray-600)); height: 18px; width: 18px; border-radius: 25px; background: rgb(var(--color-gray-100)); cursor: pointer; -webkit-appearance: none; margin-top: -7px; } .video-controls__volume input#volume-bar:focus::-webkit-slider-runnable-track { background: rgb(var(--color-gray-600)); } .video-controls__volume input#volume-bar::-moz-range-track { width: 100%; height: 5px; cursor: pointer; transition: 0.2s; box-shadow: 0px 0px 0px color-white; background: rgb(var(--color-gray-600)); border-radius: 1px; border: 0px solid color-white; } .video-controls__volume input#volume-bar::-moz-range-thumb { box-shadow: 0px 0px 0px color-white; border: 1px solid rgb(var(--color-gray-600)); height: 18px; width: 18px; border-radius: 25px; background: rgb(var(--color-gray-100)); cursor: pointer; } .video-controls__volume input#volume-bar::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } .video-controls__volume input#volume-bar::-ms-fill-lower { background: rgb(var(--color-gray-600)); border: 0px solid color-white; border-radius: 2px; box-shadow: 0px 0px 0px color-white; } .video-controls__volume input#volume-bar::-ms-fill-upper { background: rgb(var(--color-gray-600)); border: 0px solid color-white; border-radius: 2px; box-shadow: 0px 0px 0px color-white; } .video-controls__volume input#volume-bar::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 0px color-white; border: 1px solid rgb(var(--color-gray-600)); height: 18px; width: 18px; border-radius: 25px; background: rgb(var(--color-gray-100)); cursor: pointer; } .video-controls__volume input#volume-bar:focus::-ms-fill-lower { background: rgb(var(--color-gray-600)); } .video-controls__volume input#volume-bar:focus::-ms-fill-upper { background: rgb(var(--color-gray-600)); } .video-controls__time { color: rgb(var(--color-gray-600)); } .video-controls .seeking-bar__tick { position: absolute; width: 1px; height: 110px; border-left: 1px dashed rgb(var(--color-secondary-500)); } .video-controls .seeking-bar__dot { position: absolute; width: 5px; height: 5px; border-radius: 10px; background: rgb(var(--color-gray-500)); z-index: 12; transform: translateX(-50%) translateY(-50%); box-shadow: 0px 0px 0px color-white; border: 2px solid rgb(var(--color-secondary-500)); } .video-controls .seeking-bar input[type=range] { z-index: 6; position: absolute; top: -13px; background: transparent; height: 25px; -webkit-appearance: none; margin: 0px 0; width: 100%; } .video-controls .seeking-bar input[type=range]:focus { outline: none; } .video-controls .seeking-bar input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px color-white; background: rgb(var(--color-secondary-500)); border-radius: 1px; border: 0px solid color-white; } .video-controls .seeking-bar input[type=range]::-webkit-slider-thumb { transform: translateY(25%); z-index: 6; box-shadow: 0px 0px 0px color-white; border: 2px solid rgb(var(--color-secondary-500)); height: 12px; width: 12px; background: rgb(var(--color-gray-500)); cursor: pointer; -webkit-appearance: none; margin-top: -7px; } .video-controls .seeking-bar input[type=range]:focus::-webkit-slider-runnable-track { background: rgb(var(--color-secondary-500)); } .video-controls .seeking-bar input[type=range]::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px color-white; background: rgb(var(--color-secondary-500)); border-radius: 1px; border: 0px solid color-white; } .video-controls .seeking-bar input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px color-white; border: 1px solid rgb(var(--color-secondary-500)); height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } .video-controls .seeking-bar input[type=range]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } .video-controls .seeking-bar input[type=range]::-ms-fill-lower { background: rgb(var(--color-secondary-500)); border: 0px solid color-white; border-radius: 2px; box-shadow: 0px 0px 0px color-white; } .video-controls .seeking-bar input[type=range]::-ms-fill-upper { background: rgb(var(--color-secondary-500)); border: 0px solid color-white; border-radius: 2px; box-shadow: 0px 0px 0px color-white; } .video-controls .seeking-bar input[type=range]::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 0px color-white; border: 1px solid rgb(var(--color-secondary-500)); height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } .video-controls .seeking-bar input[type=range]:focus::-ms-fill-lower { background: rgb(var(--color-secondary-500)); } .video-controls .seeking-bar input[type=range]:focus::-ms-fill-upper { background: rgb(var(--color-secondary-500)); } .video-player-wrapper { position: relative; } .video-player-wrapper .show-video-player-loading { position: absolute; width: 104%; height: 100%; } .video-player-wrapper .hide-video-player { visibility: hidden; } .hotspot-main-container { position: absolute; top: 0px; bottom: 0px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .hotspot-board--draw { cursor: crosshair; } .hotspot-board__message-container { position: absolute; top: 0; background: rgba(var(--color-black), 0.5); color: rgb(var(--color-gray-100)); display: flex; justify-content: center; align-items: center; } .hotspot-board .hotspot-board-overlay { position: absolute; top: 0; bottom: 0; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle { fill: rgba(var(--color-primary-500), 0.1); stroke: rgb(var(--color-primary-500)); stroke-width: 1px; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle:hover { cursor: move; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point { fill: rgb(var(--color-secondary-500)); } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point:hover { fill: rgb(var(--color-primary-700)); } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point__nwse:hover { cursor: nwse-resize; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point__nesw:hover { cursor: nesw-resize; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point__ew:hover { cursor: ew-resize; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point__ns:hover { cursor: ns-resize; } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point__primary-color { fill: rgb(var(--color-primary-400)); } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-point__primary-color:hover { fill: rgb(var(--color-primary-500)); } .hotspot-board .hotspot-board-overlay .hotspot-rectangle__edit-options__edit:hover { cursor: pointer; } .hotspot-board .hotspot-board-overlay .hotspot-circle { fill: rgba(var(--color-secondary-500), 0.1); stroke: rgb(var(--color-secondary-500)); stroke-width: 3px; } .hotspot-board .hotspot-board-overlay .hotspot-circle:hover { cursor: move; } .hotspot-board .hotspot-board-overlay .fill-color-primary-500 { fill: rgb(var(--color-primary-500)); } .hotspot-board .hotspot-board-overlay .fill-color-secondary-500 { fill: rgb(var(--color-secondary-500)); } .hotspot-board .hotspot-board-overlay .fill-color-white { fill: rgb(var(--color-white)); } .hotspot-board .hotspot-overlay__circle-labels { position: absolute; min-width: 186px; transform: translateX(-50%); } .hotspot-board .hotspot-overlay__circle-labels__item { padding: 5px; margin-top: 2px; border: 1px solid rgb(var(--color-secondary-500)); border-radius: 3px; color: rgb(var(--color-white)); background: rgb(var(--color-secondary-500)); } .hotspot-board .hotspot-overlay__circle-labels__item--clickable:hover { background: rgb(var(--color-secondary-400)); cursor: pointer; } .hotspot-board .hotspot-overlay__circle-labels__item--name { display: flex; justify-content: space-between; } .hotspot-board .hotspot-overlay__circle-labels__item--cancel { cursor: pointer; } .hotspot-board .hotspot-overlay__circle-labels__item--cancel:hover { color: rgb(var(--color-primary-400)); } .hotspot-board .hotspot-overlay__circle-labels__container { display: flex; justify-content: space-between; } .hotspot-board .hotspot-overlay__rect-labels { position: absolute; min-width: 188px; } .hotspot-board .hotspot-overlay__rect-labels__item { padding: 5px; margin-top: 2px; border: 1px solid rgb(var(--color-primary-500)); border-radius: 3px; color: rgb(var(--color-white)); background: rgb(var(--color-primary-500)); } .hotspot-board .hotspot-overlay__rect-labels__item--clickable:hover { background: rgb(var(--color-primary-400)); cursor: pointer; } .hotspot-board .hotspot-overlay__rect-labels__item--name { display: flex; justify-content: space-between; } .hotspot-board .hotspot-overlay__rect-labels__item--cancel { cursor: pointer; } .hotspot-board .hotspot-overlay__rect-labels__item--cancel:hover { color: rgb(var(--color-primary-400)); } .hotspot-board .hotspot-overlay__rect-labels__container { display: flex; justify-content: space-between; }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .poi-timeline-wrapper__showall:hover { cursor: pointer; color: rgb(var(--color-secondary-500)); }.properties-selector { display: flex; align-items: center; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .poi-to-be-created-timeline-container { padding: 10px 0; background: rgb(var(--color-gray-100)); border-bottom: 1px solid rgb(var(--color-gray-500)); } .poi-to-be-created-timeline-container .poi-info { display: flex; justify-content: space-between; } .poi-to-be-created-timeline-container .poi-info__poi-shape__rect { margin: 5px; width: 10px; height: 10px; background-color: rgb(var(--color-primary-500)); } .poi-to-be-created-timeline-container .poi-info__poi-shape__circle { margin: 5px; width: 10px; height: 10px; border-radius: 100%; background-color: rgb(var(--color-secondary-500)); } .poi-to-be-created-timeline-container .poi-info__name-group { margin: 0 0 5px 5px; display: flex; } .poi-to-be-created-timeline-container .poi-info__delete { margin-right: 5px; font-weight: 300; } .poi-to-be-created-timeline-container .poi-to-be-created-timeline { position: relative; } .poi-to-be-created-timeline-container .poi-to-be-created-timeline__all-slider { height: 3px; width: 100%; background: rgb(var(--color-gray-500)); } .poi-to-be-created-timeline-container .poi-to-be-created-timeline__range { position: absolute; height: 3px; background: rgb(var(--color-primary-500)); } .poi-to-be-created-timeline-container .poi-to-be-created-timeline__left { position: absolute; height: 10px; top: -10px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid rgb(var(--color-gray-600)); } .poi-to-be-created-timeline-container .poi-to-be-created-timeline__right { position: absolute; height: 10px; top: -10px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid rgb(var(--color-gray-600)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .line-chart-simple #linear #stop-1 { stop-color: rgba(var(--color-secondary-500), 0.3); } .line-chart-simple #linear #stop-2 { stop-color: rgb(var(--color-secondary-300)); } .line-chart-simple .line-path { cursor: pointer; stroke: rgb(var(--color-secondary-500)); stroke-width: 0; } .line-chart-simple .overlay { fill: none; pointer-events: all; z-index: 9999; } .line-chart-simple .focus circle { fill: rgb(var(--color-white)); stroke: rgb(var(--color-secondary-500)); stroke-width: 2px; } .line-chart-simple .focus text { fill: rgb(var(--color-gray-600)); } .line-chart-simple .focus-rect { fill: rgb(var(--color-gray-500)); border: 1px solid rgb(var(--color-secondary-500)); } .line-chart-simple #vis { display: inline-block; position: relative; } .line-chart-simple .tool-tip { flex-direction: column; transition: all 0.2s; position: absolute; } .line-chart-simple .tool-tip .tool-tip-content { border: 1px solid rgb(var(--color-gray-600)); padding: 5px; border-radius: 4px; background-color: rgb(var(--color-gray-500)); } .line-chart-simple .tool-tip .tool-tip-content__text { color: rgb(var(--color-secondary-500)); font-size: 1em; font-weight: bold; padding: 5px; } .line-chart-simple .tool-tip .tool-tip-content__time { color: rgb(var(--color-gray-600)); font-size: 0.7em; padding: 5px; } .line-chart-simple .tool-tip .tool-tip-triangle { bottom: -15px; border-left: 1px solid rgb(var(--color-gray-600)); border-bottom: 1px solid rgb(var(--color-gray-600)); position: absolute; height: 15px; width: 15px; background: rgb(var(--color-gray-500)); transform: rotate(-45deg) translateY(-10px); align-self: center; }/* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .poi-timeline-wrapper__showall:hover { cursor: pointer; color: rgb(var(--color-secondary-500)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .poi-timeline-container { padding: 10px 0; border-bottom: 1px solid rgb(var(--color-gray-500)); } .poi-timeline-container__gray { background: rgb(var(--color-gray-100)); } .poi-timeline-container:hover .poi-info__delete { visibility: visible; } .poi-timeline-container .poi-info { display: flex; justify-content: space-between; } .poi-timeline-container .poi-info__name { font-weight: 700; } .poi-timeline-container .poi-info__poi-shape__rect { margin: 5px; width: 10px; height: 10px; background-color: rgb(var(--color-primary-500)); } .poi-timeline-container .poi-info__poi-shape__circle { margin: 5px; width: 10px; height: 10px; border-radius: 100%; background-color: rgb(var(--color-secondary-500)); } .poi-timeline-container .poi-info__name-group { margin-left: 5px; margin-bottom: 5px; display: flex; } .poi-timeline-container .poi-info__delete { visibility: hidden; } .poi-timeline-container .poi-timeline { position: relative; } .poi-timeline-container .poi-timeline__all-slider { height: 3px; background: rgb(var(--color-gray-500)); } .poi-timeline-container .poi-timeline__range { position: absolute; height: 3px; background: rgb(var(--color-secondary-500)); } .poi-timeline-container .poi-timeline__left { position: absolute; height: 10px; top: -10px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid rgb(var(--color-gray-600)); } .poi-timeline-container .poi-timeline__right { position: absolute; height: 10px; top: -10px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid rgb(var(--color-gray-600)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .media-player-container__media { position: relative; } .media-player-container__chart { width: 100%; position: absolute; } .media-player-container__backgroundImage { top: 0; right: 0; bottom: 0; left: 0; position: absolute; z-index: 0; opacity: 0.2; } .media-player-container__photo { position: relative; } .media-player-container__player { position: relative; z-index: 1; } .media-player-container__player img { max-height: 620px; } .static-poi-player-controls { display: flex; } .static-poi-player-controls__name { color: rgb(var(--color-gray-600)); } .video-metrics__title { font-weight: 300; color: rgb(var(--color-gray-600)); border-bottom: 1px solid rgb(var(--color-gray-500)); } .video-metrics__figure { padding: 0px; } .video-metrics__figure__subject { color: rgb(var(--color-primary-500)); padding: 10px 0 15px 0; } .video-metrics__figure__body__item { padding: 0px; display: flex; flex-direction: column; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .SceneViewerCanvas__setting__button { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SceneViewer__menu__label { color: rgb(var(--color-title-dash3)); font-weight: 600; font-size: 15px; margin-bottom: 18px; } .SceneViewer__menu__label--noMargin { margin-bottom: 0; } .SceneViewer__menu__header { color: rgb(var(--color-extra-indigo-dash3-700)); font-weight: 600; font-size: 15px; } .SceneViewer__menu__item { display: flex; align-items: center; padding-bottom: 15px; } .SceneViewer__menu__item--last { margin-bottom: 5px; } .SceneViewer__menu__text { font-family: "Onest"; font-size: 15px; color: rgb(var(--color-title-dash3)); margin-left: 15px; } .SceneViewer__menu__gpu { display: flex; align-items: center; justify-content: space-between; } .SceneViewer__buttonRow { padding: 15px 30px; display: flex; justify-content: start; align-items: center; border-top: 1px solid rgb(var(--color-gray-300)); } .SceneViewer__buttonRow__dropdown { color: rgb(var(--color-title-dash3)); margin-right: 35px; } .SceneViewer__buttonRow__dropdown:hover { color: rgb(var(--color-primary-500)); } .SceneViewer__summary { display: flex; justify-content: space-around; margin: 50px 0; } .SceneViewer__summary__metric { display: flex; flex-direction: column; align-items: center; justify-content: center; } .SceneViewer__summary__label { font-size: 15px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 10px; } .SceneViewer__summary__header { display: flex; align-items: center; gap: 1rem; font-size: 14px; color: rgb(var(--color-title-dash3)); margin-top: 2px; } .SceneViewer__summary__header__item { display: flex; align-items: center; line-height: 20px; } .SceneViewer__summary__header__label { font-weight: 600; margin-right: 5px; } .SceneViewer__summary__header__value { font-weight: 500; color: rgb(var(--color-title-dash3)); } .SceneViewer__summary .LoadingContainer--relative { height: 100px; } .SceneViewer__summary .HeroFigure-dash3 { color: rgb(var(--color-extra-violet-dash3-900)); font-size: 44px; margin: 0 0 25px 0; } .SceneViewer__summary .DurationFigure-dash3__separator, .SceneViewer__summary .DurationFigure-dash3__separator--end { font-weight: 600; } .SceneViewer__summary .DurationFigure-dash3 { margin: 0 0 25px 0; } .SceneViewer__summary .DurationFigure-dash3__number { font-size: 44px; line-height: 50px; } .SceneViewer__download { display: flex; justify-content: center; } .SceneViewer__download__icon { margin-left: -10px; display: flex; align-items: center; justify-content: center; width: 40px; } .SceneViewer__download__title { color: rgb(var(--color-white)); } .SceneViewer__download__wrapper .NiceDropdownDash3__field { background-color: rgb(var(--color-primary-dash3-500)); border-color: transparent; color: rgb(var(--color-white)); font-weight: 600; font-size: 14px; letter-spacing: 0.01rem; } .SceneViewer__download__wrapper .NiceDropdownDash3__field:hover { background-color: rgb(var(--color-primary-dash3-600)); } .SceneViewer__download__wrapper--disabled .NiceDropdownDash3__field { background-color: rgb(var(--color-primary-dash3-200)); } .SceneViewer__sessionTable__actions { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgb(var(--color-gray-300)); } .SceneViewer__sessionTable__actions--left { display: flex; align-items: center; } .SceneViewer__sessionTable__bulk { display: flex; align-items: center; gap: 0.5rem; } .SceneViewer__sessionTable__bulk__title { font-family: "Onest"; font-size: 15px; font-weight: 600; margin-right: 0.5rem; line-height: 40px; } .SceneViewer__sessionTable__bulk__title--nonselected { color: rgb(var(--color-gray-600)); } .SceneViewer__sessionTable__checkbox { font-size: 12px; line-height: 24px; display: flex; flex-direction: column; align-items: center; margin-top: 10px; color: rgb(var(--color-gray-600)); } .SceneViewer__sessionTable__name { font-size: 15px; padding-right: 10px; font-weight: 600; line-height: 18px; margin-bottom: 3px; display: flex; align-items: center; overflow: hidden; } .SceneViewer__sessionTable__name:hover { background-color: rgb(var(--color-gray-100)); } .SceneViewer__sessionTable__name--link { color: rgb(var(--color-secondary-500)); display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .SceneViewer__sessionTable__name--link:hover { text-decoration: underline; } .SceneViewer__sessionTable__editName { margin-left: 15px; color: rgb(var(--color-gray-700)); } .SceneViewer__sessionTable__editName:hover { color: rgb(var(--color-extra-indigo-900)); } .SceneViewer__sessionTable__editTag { color: rgb(var(--color-gray-700)); } .SceneViewer__sessionTable__editTag:hover { color: rgb(var(--color-extra-indigo-900)); } .SceneViewer__sessionTable__sessionId { font-size: 14px; margin-right: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .SceneViewer__sessionTable__date { font-size: 15px; } .SceneViewer__sessionTable__tags { margin: -10px 0; display: flex; } .SceneViewer__sessionTable__tags .NiceDropdownDash3__field { color: rgb(var(--color-gray-500)); margin-left: 0.3rem; height: 100%; } .SceneViewer__sessionTable__tagWrapper { display: flex; flex-wrap: wrap; align-items: center; } .SceneViewer__sessionTable__tag { margin: 2px; white-space: nowrap; } .SceneViewer__sessionTable__tag .TagPill { display: inline-flex; } .SceneViewer__sessionTable__tag .TagPill__wrapper { display: inline-flex; padding: 3px 5px; font-size: 13px; font-weight: 600; line-height: 14px; border-radius: 3px; } .SceneViewer__sessionTable__download { width: 100%; display: flex; justify-content: center; color: rgb(var(--color-primary-400)); font-size: 18px; } .SceneViewer__sessionTable__replay { width: 100%; display: flex; justify-content: center; color: rgb(var(--color-primary-400)); font-size: 18px; } .SceneViewer__sessionTable__replay:hover { color: rgb(var(--color-primary-500)); } .SceneViewer__sessionTable__replay a { color: rgb(var(--color-primary-400)); } .SceneViewer__sessionTable__replay a:hover { color: rgb(var(--color-primary-500)); } .SceneViewerCanvas { min-height: 465px; position: relative; overflow: hidden; width: 100%; aspect-ratio: 21/8; } .SceneViewerCanvas__loadingScreen { z-index: 2 !important; position: absolute; width: 100%; height: 100%; background-color: rgba(var(--color-white), 0.3); } .SceneViewerCanvas__loadingScreen--hidden { width: 0; height: 0; } .SceneViewerCanvas__loadingBar { position: absolute; box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); font-family: "Onest"; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: white; width: 350px; padding: 15px; border-radius: 5px; } .SceneViewerCanvas__loadingBar--complete { opacity: 0; top: unset; bottom: 0; transform: translateX(-50%) translateY(105%); transition: 1s all; } .SceneViewerCanvas__loadingBar__title { font-size: 12pt; font-weight: 700; margin-bottom: 25px; color: rgb(var(--color-secondary-900)); text-align: center; } .SceneViewerCanvas__loadingBar__bar { margin: 7px 0; background: rgb(var(--color-gray-500)); border-radius: 5px; width: 100%; height: 5px; position: relative; } .SceneViewerCanvas__loadingBar__bar__progress { overflow: hidden; border-radius: 5px; transition-delay: 0.2s; transition: 1s bottom, 1s top, 1s transform, 0.2s opacity; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgb(var(--color-primary-500)); } .SceneViewerCanvas__loadingBar__bar__progress:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: pulsatingLoadingEffect 1s infinite; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0)); background-repeat: no-repeat; } .SceneViewerCanvas__loadingBar__bar__progress--stretch { animation: loadingBarFinalStretch 10s ease-out; } @keyframes loadingBarFinalStretch { 0% { width: 95% !important; } 100% { width: 99.5% !important; } } .SceneViewerCanvas__loadingBar__spinner { display: flex; justify-content: center; } .SceneViewerCanvas__screenshot { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; object-fit: cover; z-index: 1; } .SceneViewerCanvas__loadButton { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } .SceneViewerCanvas__clipSlider { position: absolute; right: 50px; top: 50%; width: 70px; margin-top: -225px; padding: 18px 20px 20px 20px; border-radius: 10px; background-color: rgba(var(--color-white), 0.8); backdrop-filter: blur(2px); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .SceneViewerCanvas__clipSlider__dragHandle { display: block; width: 32px; height: 3px; margin: 0 auto 16px; border: none; border-radius: 2px; background-color: rgb(var(--color-extra-indigo-dash3-400)); opacity: 0.4; cursor: grab; touch-action: none; } .SceneViewerCanvas__clipSlider__dragHandle:hover { opacity: 0.8; } .SceneViewerCanvas__clipSlider__dragHandle:active { cursor: grabbing; } @media screen and (max-width: 2000px) { .SceneViewerCanvas__clipSlider { margin-top: -177px; padding: 14px 10px 15px 10px; } } .SceneViewerCanvas__clipSlider .rc-slider { height: 400px; } @media screen and (max-width: 2000px) { .SceneViewerCanvas__clipSlider .rc-slider { height: 320px; } } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-rail { width: 3px; background: rgb(var(--color-gray-400)); } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-track { width: 3px; background: rgb(var(--color-extra-violet-600)); } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-handle { width: 21px; height: 21px; margin-left: -9px; border-color: rgb(var(--color-extra-violet-600)); opacity: 1; } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-dot { width: 11px; height: 11px; left: -2px; border-color: rgb(var(--color-gray-400)); } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-dot-active { border-color: rgb(var(--color-extra-violet-600)); } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-mark { left: 20px; font-family: "Onest"; font-size: 14px; } .SceneViewerCanvas__lut_legend { position: absolute; left: 10px; top: 10px; width: 200px; padding: 5px; color: white; font-size: 12px; border-radius: 10px; background-color: rgba(var(--color-gray-800), 0.5); backdrop-filter: blur(2px); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .SceneViewerCanvas__lut { width: 200px; height: 15px; text-align: center; border-radius: 10px; background: rgb(9, 44, 121); background: linear-gradient(90deg, rgb(0, 0, 255) 0%, rgb(0, 247, 255) 25%, rgb(255, 250, 0) 50%, rgb(255, 2.490234375, 0) 100%); } .SceneViewerCanvas .lut_idx_start { float: left; margin: 2px 5px; user-select: none; } .SceneViewerCanvas .lut_idx_median { float: left; margin: 2px 5px; padding-left: calc(50% - 35px); color: rgba(var(--color-extra-midnight-dash3-900), 0.8); user-select: none; } .SceneViewerCanvas .lut_idx_end { float: right; margin: 2px 5px; user-select: none; } .SceneViewerCanvas a.lut-tooltip { top: 50px; left: 50px; color: rgba(var(--color-extra-midnight-dash3-900), 0.8) !important; } .SceneViewerCanvas .lut-tooltip > a:link { color: rgba(var(--color-extra-midnight-dash3-900), 0.8) !important; } .SceneViewerCanvas a.lut-tooltip:hover span { opacity: 1; visibility: visible; } .SceneViewerCanvas a.lut-tooltip span { padding: 8px; top: 20px; left: 65px; min-width: 50px; max-width: 150px; background-color: rgba(var(--color-extra-midnight-dash3-900), 0.8); color: #ffffff; height: auto; border-radius: 5px; opacity: 0; position: absolute; visibility: hidden; word-wrap: break-word; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .SceneViewerCanvas .sliderCubeColors { margin-top: -25px; height: 0; } .SceneViewerCanvas__heatmapSettings { position: absolute; left: 50px; top: 50%; height: 400px; margin-top: -205px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px 45px 45px 35px; border-radius: 10px; background-color: rgba(var(--color-white), 0.9); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } @media screen and (max-width: 2000px) { .SceneViewerCanvas__heatmapSettings { height: 400px; padding: 20px 35px 35px 25px; } } .SceneViewerCanvas__heatmapSettings__title { display: flex; align-items: center; font-family: "Onest"; color: rgb(var(--color-title-dash3)); font-size: 17px; font-weight: 700; margin-bottom: 24px; margin-left: -4px; } @media screen and (max-width: 2000px) { .SceneViewerCanvas__heatmapSettings__title { font-size: 16px; margin-bottom: 15px; } } .SceneViewerCanvas__heatmapSettings__label { display: flex; align-items: center; font-family: "Onest"; color: rgb(var(--color-title-dash3)); font-size: 15px; margin-bottom: 12px; margin-left: -3px; } @media screen and (max-width: 2000px) { .SceneViewerCanvas__heatmapSettings__label { font-size: 14px; margin-bottom: 8px; } } .SceneViewerCanvas__heatmapSettings .rc-slider { width: 180px; } @media screen and (max-width: 2000px) { .SceneViewerCanvas__heatmapSettings .rc-slider { width: 150px; } } .SceneViewerCanvas__heatmapSettings .rc-slider .rc-slider-rail { height: 3px; background: rgb(var(--color-gray-400)); } .SceneViewerCanvas__heatmapSettings .rc-slider .rc-slider-track { height: 3px; background: rgb(var(--color-extra-violet-600)); } .SceneViewerCanvas__heatmapSettings .rc-slider .rc-slider-handle { width: 18px; height: 18px; margin-top: -8px; border-color: rgb(var(--color-extra-violet-600)); opacity: 1; } .SceneViewerCanvas__heatmapSettings .rc-slider .rc-slider-dot { width: 11px; height: 11px; top: -4px; border-color: rgb(var(--color-gray-400)); } .SceneViewerCanvas__heatmapSettings .rc-slider .rc-slider-dot-active { border-color: rgb(var(--color-extra-violet-600)); } .SceneViewerCanvas__heatmapSettings .rc-slider .rc-slider-mark { top: 20px; left: 2px; font-family: "Onest"; font-size: 14px; } .SceneViewerCanvas .overlay-canvas { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .SceneViewerCanvas .centerOrbit { pointer-events: none; visibility: visible; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border: thin solid white; border-radius: 50%; opacity: 0.3; position: absolute; top: -10px; left: -10px; } .SceneViewerCanvas .fading { opacity: 0; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; transition: visibility 0s 0.35s, opacity 0.25s, width 0.25s, height 0.25s, margin-left 0.25s, margin-top 0.25s linear; } .SceneViewerCanvas__viewSelectContainer { position: absolute; top: 0; padding-top: 10px; z-index: 4; display: flex; width: 100%; max-width: 100%; left: 50%; transform: translateX(-50%); } .SceneViewerCanvas__viewSelectButton:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-left: none; margin-left: 20px; } .SceneViewerCanvas__viewSelectButton:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .SceneViewerCanvas__viewSelectButton { transition: 0.2s background; font-size: 10pt; border-left: 1px solid rgb(var(--color-gray-700)); background: rgb(var(--color-gray-600)); color: white; padding: 8px 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; } .SceneViewerCanvas__viewSelectButton--active { background: rgb(var(--color-secondary-500)); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1) inset; padding-top: 9px; padding-bottom: 7px; } .SceneViewerCanvas__settingsSelectorButton { padding: 10px; color: rgb(var(--color-gray-600)); font-size: 12pt; } .SceneViewerCanvas__settingsSelectorButton:first-of-type { border-top-left-radius: 3px; border-top-right-radius: 3px; } .SceneViewerCanvas__settingsSelectorButton:last-of-type { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .SceneViewerCanvas__settingsSelectorButton { cursor: pointer; } .SceneViewerCanvas__settingsSelectorButton:hover { color: rgb(var(--color-secondary-500)); background: rgb(var(--color-secondary-100)); } .SceneViewerCanvas__settingsSelectorButton--active { color: rgb(var(--color-white)) !important; background: rgb(var(--color-secondary-500)) !important; } .SceneViewerCanvas__settingContainer { position: absolute; z-index: 3; bottom: 0; width: 100%; display: flex; padding: 10px 0; left: 50%; transform: translateX(-50%); } .SceneViewerCanvas__frameRateContainer { position: absolute; z-index: 3; bottom: 0; padding: 10px 10px 10px 0; right: 0; color: rgb(var(--color-secondary-300)); } .SceneViewerCanvas__gazePointNumberContainer { position: absolute; z-index: 3; bottom: 0; padding: 10px 10px 30px 0; right: 0; color: rgb(var(--color-secondary-300)); } .SceneViewerCanvas__setting { position: relative; margin-right: 10px; margin-left: 20px; } .SceneViewerCanvas__setting__content { position: absolute; box-sizing: border-box; bottom: 150%; width: 100%; background: rgb(var(--color-white)); padding: 0px; border-radius: 3px; box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); } .SceneViewerCanvas__setting__button { transition: 0.2s background; padding: 10px 10px; border-radius: 3px; background: rgb(var(--color-gray-600)); color: white; font-size: 25px; text-align: center; font-size: 10pt; cursor: pointer; box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.15), 0 2px 4px hsla(0, 0%, 0%, 0.12); } .SceneViewerCanvas__setting__button:hover { background: rgb(var(--color-gray-400)); } .SceneViewerCanvas__setting__button .fa { opacity: 0.9; margin-right: 2px; } .SceneViewerCanvas__setting__button--active { box-shadow: 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1) inset; background: rgb(var(--color-secondary-500)) !important; transform: translateY(1px); } .SceneViewerCanvas__setting__button--noToggle:active { box-shadow: 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1) inset; background: rgb(var(--color-secondary-500)) !important; transform: translateY(1px); } .SceneSessionViewer__meta { display: flex; justify-content: flex-start; font-family: "Onest"; padding: 30px 20px; } .SceneSessionViewer__meta a { font-weight: 600; } .SceneSessionViewer__meta a:hover { text-decoration: underline; } .SceneSessionViewer__meta__item { margin-right: 20px; min-width: 20%; } .SceneSessionViewer__meta__label { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: rgb(var(--color-title-dash3)); } .SceneSessionViewer__meta__value { font-size: 16px; color: rgb(var(--color-title-dash3)); line-height: 20px; } .SceneSessionViewer__tags { display: flex; flex-direction: column; padding: 0px 20px; width: 100%; margin-bottom: 20px; } .SceneSessionViewer__tags__list { width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 12px; gap: 10px; } .SceneSessionViewer__buttonRow { display: flex; justify-content: left; padding: 0 20px; margin-bottom: 30px; align-items: center; } .SceneSessionViewer__dropdownIcon { margin-left: 15px; color: rgb(var(--color-extra-indigo-600)); } .SceneSessionViewer__property--smallMargin .ContentContainerDash3 { min-width: auto; margin: 0px 20px 10px 20px; background: rgba(var(--color-white), 0.02); } .SceneSessionViewer__property__table { position: relative; } .SceneSessionViewer__property__table--show { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .SceneSessionViewer__property__table--show:hover { scrollbar-color: #808080 transparent; } .SceneSessionViewer__property__table--show::-webkit-scrollbar { background-color: transparent; width: 7px; } .SceneSessionViewer__property__table--show::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .SceneSessionViewer__property__table--show::-webkit-scrollbar-button { display: none; } .SceneSessionViewer__property__table--show { max-height: 40vh; } .SceneSessionViewer__property__table--hide { max-height: 250px; overflow: hidden; } .SceneSessionViewer__property__showButtonOverlay { position: sticky; bottom: 0; text-align: center; padding-top: 220px; padding-bottom: 1rem; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); } .SceneSessionViewer__property__showButton { font-size: 16px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .SceneSessionViewer__property__showButton:hover { text-decoration: underline; } .SceneSessionViewer__property__hideButton { margin-top: 1.5rem; margin-bottom: 1rem; text-align: center; font-size: 16px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .SceneSessionViewer__property__hideButton:hover { text-decoration: underline; } .SceneSessionViewer__property__pill { font-size: 13px; font-weight: 600; line-height: 15px; width: 70px; border-radius: 7px; padding: 3px 2px; text-align: center; color: rgb(var(--color-white)); } .SceneSessionViewer__property__pill--ABTest { background-color: rgb(var(--color-extra-violet-500)); } .SceneSessionViewer__property__pill--App { background-color: #24be67; } .SceneSessionViewer__property__pill--Common { background-color: rgb(var(--color-extra-indigo-400)); } .SceneSessionViewer__property__pill--Device { background-color: rgb(var(--color-gray-500)); } .SceneSessionViewer__property__pill--Geo { background-color: rgb(var(--color-teal-500)); } .SceneSessionViewer__property__pill--User { background-color: rgb(var(--color-secondary-400)); } .SceneSessionViewer__property__pill--Participant { background-color: rgb(var(--color-secondary-700)); font-size: 0.7rem; } .SceneSessionViewer__property__pill--Sensor { background-color: rgb(var(--color-extra-orange-400)); } .SceneSessionViewer__property__pill--HMD { background-color: rgb(var(--color-primary-400)); } .SceneSessionViewer__property__pill--Custom { background-color: rgb(var(--color-secondary-500)); } .SceneSessionViewer__property__pill--Warning { background-color: rgb(var(--color-error-400)); } .SceneSessionViewer__property__pill--Tag { background-color: rgb(var(--color-extra-pink-500)); } .SceneSessionViewer__property__pill--ExitPoll { background-color: rgb(var(--color-extra-violet-300)); } .SceneSessionViewer__property__pill--Event { background-color: rgb(var(--color-extra-violet-300)); } .SceneSessionViewer__property__pill--Metrics { background-color: rgb(var(--color-extra-green-400)); } .SceneSessionViewer__property__pill--XRPF { background-color: rgb(var(--color-extra-orange-500)); } .SceneSessionViewer__property__pill--Multiplayer { background-color: rgb(var(--color-extra-indigo-400)); font-size: 0.7rem; } .SceneSessionViewer__property__displayName { font-size: 15px; line-height: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 10px; } .SceneSessionViewer__property__value { font-size: 15px; } .SceneSessionViewer__property__sortIcon { color: rgb(var(--color-title-dash3)); margin-right: 15px; } .SceneSessionViewer__property__sortIcon:hover { color: rgb(var(--color-gray-700)); } .SceneSessionViewer__raw { padding: 0 20px; margin-bottom: 20px; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .SceneSessionViewer__raw:hover { scrollbar-color: #808080 transparent; } .SceneSessionViewer__raw::-webkit-scrollbar { background-color: transparent; width: 7px; } .SceneSessionViewer__raw::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .SceneSessionViewer__raw::-webkit-scrollbar-button { display: none; } .SceneSessionTimeline { font-family: "Onest"; flex-grow: 1; position: relative; width: 100%; margin: 20px 0; /* Event Rows */ } .SceneSessionTimeline__eventRow { display: flex; margin: 0 auto; width: 100%; justify-content: center; } .SceneSessionTimeline__eventRow:first-of-type .SceneSessionTimeline__eventColumn--center:before { top: 50%; } .SceneSessionTimeline__eventRow:last-of-type .SceneSessionTimeline__eventColumn--center:before { bottom: 50%; } .SceneSessionTimeline__eventColumn { padding-top: 15px; padding-bottom: 15px; display: flex; flex-basis: 50%; } .SceneSessionTimeline__eventColumn--left { width: 45%; justify-content: flex-end; padding-left: 30px; padding-right: 30px; } .SceneSessionTimeline__eventColumn--right { width: 45%; justify-content: flex-start; padding-left: 30px; padding-right: 30px; } .SceneSessionTimeline__eventColumn--center { flex-basis: 2px; flex-grow: 0; flex-shrink: 0; position: relative; } .SceneSessionTimeline__eventColumn--center:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(var(--color-primary-300)); } .SceneSessionTimeline__eventColumn__timelineNumber { width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 100%; background: rgb(var(--color-primary-500)); position: absolute; top: 50%; transform: translateX(-45%) translateY(-50%); font-size: 13px; color: white; font-weight: 700; } .SceneSessionTimeline__eventColumn__timelineNumber--tiny { width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 100%; background: rgb(var(--color-primary-500)); position: absolute; top: 50%; transform: translateX(-45%) translateY(-50%); font-size: 12px; color: white; font-weight: 700; } .SceneSessionTimeline__eventThumbnail { position: relative; overflow: hidden; } .SceneSessionTimeline__eventThumbnail img { display: block; margin: 0 auto; max-width: 300px; } .SceneSessionTimeline__goToSceneButton { display: flex; justify-content: center; padding: 10px 0px; } .SceneSessionTimeline__goToObjectButton { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid rgb(var(--color-gray-300)); } .SceneSessionTimeline__goToObjectButton .button { font-size: 14px; min-height: 22px; min-width: 45px; padding: 6px 9px; } .SceneSessionTimeline__viewStackTraceButton { display: flex; justify-content: start; padding: 0px; } .SceneSessionTimeline__viewStackTraceButton .button { font-size: 13px; min-height: 18px; padding: 3px 7px; } .SceneSessionTimeline__stackTraceLine { font-size: 14px; line-height: 16px; color: rgb(var(--color-gray-700)); padding: 8px 0; border-bottom: 1px solid rgb(var(--color-gray-200)); word-wrap: break-word; } .SceneSessionTimeline { /* Event Contents */ } .SceneSessionTimeline__eventContents { border: 1px solid rgb(var(--color-gray-300)); background: rgb(var(--color-white)); border-radius: 10px; padding: 15px 12px 5px 12px; width: 100%; position: relative; box-sizing: border-box; } .SceneSessionTimeline__eventContents:after { right: 0; position: absolute; top: 50%; transform: translateY(-50%) translateX(5px) rotate(-45deg); border-right: rgb(var(--color-gray-300)) 1px solid; border-bottom: rgb(var(--color-gray-300)) 1px solid; background: white; content: ""; width: 7px; height: 7px; } .SceneSessionTimeline__eventContents--c3d:after { transform: translateY(-50%) translateX(-5px) rotate(135deg); right: auto; left: 0; } .SceneSessionTimeline__eventMetaData { display: flex; align-items: center; } .SceneSessionTimeline__eventName { font-size: 16px; line-height: 20px; font-weight: 700; color: rgb(var(--color-secondary-900)); flex-grow: 1; word-break: break-word; } .SceneSessionTimeline__eventTime { font-size: 14px; line-height: 16px; color: rgb(var(--color-gray-600)); display: block; position: relative; margin-left: 10px; } .SceneSessionTimeline__eventTime:hover .SceneSessionTimeline__eventTime__hover { display: block; } .SceneSessionTimeline__eventTime__hover { display: none; position: absolute; top: 0; right: 0; background: white; color: rgb(var(--color-secondary-900)); padding: 5px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2); } .SceneSessionTimeline__eventMetaProperties { padding: 10px 0; width: 100%; } .SceneSessionTimeline__isInternal { font-size: 13px; color: rgb(var(--color-gray-600)); text-transform: uppercase; } .SceneSessionTimeline { /*Event Properties*/ } .SceneSessionTimeline__eventProperty { display: flex; align-items: start; padding: 12px 0; border-top: 1px solid rgb(var(--color-gray-300)); } .SceneSessionTimeline__eventProperty__name { display: flex; align-items: center; width: 50%; color: rgb(var(--color-gray-900)); font-size: 15px; font-weight: 700; line-height: 18px; } .SceneSessionTimeline__eventProperty__name .pill { font-size: 12px; line-height: 22px; } .SceneSessionTimeline__eventProperty__value { width: 50%; padding-left: 20px; font-size: 15px; line-height: 20px; box-sizing: border-box; color: rgb(var(--color-secondary-900)); overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .SceneSessionTimeline__eventProperty__value:hover { scrollbar-color: #808080 transparent; } .SceneSessionTimeline__eventProperty__value::-webkit-scrollbar { background-color: transparent; width: 7px; } .SceneSessionTimeline__eventProperty__value::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .SceneSessionTimeline__eventProperty__value::-webkit-scrollbar-button { display: none; } .SceneSessionTimeline__eventProperty__value { max-height: 200px; word-break: break-word; } .SceneSessionTimeline__exitPoll { margin: 5px 0; border-top: 1px solid rgb(var(--color-gray-300)); padding: 15px 0; } .SceneSessionTimeline__exitPoll__header { width: 100%; margin-bottom: 10px; color: rgb(var(--color-gray-600)); text-transform: uppercase; font-size: 16px; font-weight: 500; letter-spacing: 1px; } .SceneSessionTimeline__exitPoll__container { display: flex; } .SceneSessionTimeline__exitPoll__title { width: 50%; color: rgb(var(--color-gray-900)); font-size: 16px; font-weight: 700; border-left: 4px solid rgb(var(--color-primary-500)); padding-left: 15px; line-height: 14pt; margin-left: -12px; } .SceneSessionTimeline__exitPoll__answerKey { width: 50%; padding-left: 20px; box-sizing: border-box; position: relative; } .SceneSessionTimeline__exitPoll__answerKey .voice-player { text-align: left; margin-left: 0; } .SceneSessionTimeline__exitPoll__answer { color: rgb(var(--color-gray-500)); margin: 0 0 10px; display: flex; align-items: center; } .SceneSessionTimeline__exitPoll__answer--userAnswer { font-weight: 600; font-size: 16px; color: rgb(var(--color-extra-indigo-600)); } .SceneSessionTimeline__exitPoll__answer__label { margin-left: 17px; font-size: 14px; line-height: 14px; text-transform: uppercase; color: rgb(var(--color-gray-600)); } .SceneSessionTimeline__exitPoll__skipped { position: absolute; top: -5px; left: 10px; right: 0; bottom: -5px; background: rgba(var(--color-gray-300), 0.8); border-radius: 5px; } .SceneSessionTimeline__exitPoll__skipped span { color: rgb(var(--color-gray-800)); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 13px; text-align: center; width: 100%; } .SceneSessionTimeline__timeline-dropdown { padding-bottom: 10px; } .SceneSessionTimeline__isObjective--complete { color: rgb(var(--color-success-500)); } .SceneSessionTimeline__isObjective--incomplete { color: rgb(var(--color-error-500)); } .SceneSessionTimeline__isObjective__propertyHeader { display: flex; justify-content: space-between; padding: 12px 0 10px 0; margin-top: 10px; border-top: 1px solid rgb(var(--color-gray-300)); } .SceneSessionTimeline__isObjective__propertyTitle { font-size: 14px; font-weight: 700; color: rgb(var(--color-extra-indigo-600)); } .SceneSessionTimeline__isObjective__propertyStepsCount { font-size: 14px; color: rgb(var(--color-gray-600)); } .SceneSessionTimeline__isObjective__propertyBox { margin: 0 -10px 15px -10px; padding: 0 10px; } .SceneSessionTimeline__isObjective__propertyBox--complete > span, .SceneSessionTimeline__isObjective__propertyBox--complete em, .SceneSessionTimeline__isObjective__propertyBox--complete div { color: rgb(var(--color-success-600)); border: none; } .SceneSessionTimeline__isObjective__propertyBox--incomplete > span, .SceneSessionTimeline__isObjective__propertyBox--incomplete em, .SceneSessionTimeline__isObjective__propertyBox--incomplete div { color: rgb(var(--color-error-500)); border: none; } .ObjectExplorer__tileGrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; row-gap: 20px; justify-content: center; column-gap: 20px; min-width: 1000px; margin: 0 2rem 2rem 2rem; } @media screen and (max-width: 2200px) { .ObjectExplorer__tileGrid { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media screen and (max-width: 1800px) { .ObjectExplorer__tileGrid { grid-template-columns: 1fr 1fr 1fr; } } .ObjectExplorer__table__image { width: 50px; height: 50px; } .ObjectExplorer__table__sdkId { margin-top: 3px; color: rgb(var(--color-gray-600)); font-weight: 400; font-size: 13px; line-height: 14px; display: inline; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ObjectExplorer--empty { height: 140px; display: flex; justify-content: center; align-items: center; font-size: 17px; font-weight: 500; border-radius: 10px; border: 1px solid rgb(var(--color-gray-300)); color: rgb(var(--color-gray-700)); } .SceneViewer__menu__item { margin-bottom: 12px; } .ObjectViewerCanvas { min-height: 450px; max-height: 650px; height: 50vh; position: relative; overflow: hidden; } .ObjectMetricsViewer__sdkId { margin-top: 2px; font-size: 14px; color: rgb(var(--color-gray-600)); font-weight: 400; } .ObjectMetricsViewer__topMetrics { padding: 30px 0 30px 50px; } .ObjectMetricsViewer__metrics { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .ObjectMetricsViewer__metric { font-family: "Onest"; } .ObjectMetricsViewer__metric__value { color: rgb(var(--color-primary-600)); font-size: 36px; margin-top: 10px; } .ObjectMetricsViewer__metric__label { margin-top: 12px; color: rgb(var(--color-gray-600)); font-size: 20px; } .ObjectMetricsViewer__metric__description { color: rgb(var(--color-gray-500)); margin-top: 5px; font-size: 16px; } .ObjectTile { padding: 0 10px 15px 10px; border-radius: 10px; border: 1px solid rgb(var(--color-gray-300)); overflow: hidden; transition: 0.2s all; font-family: "Onest"; } .ObjectTile:hover { cursor: pointer; } .ObjectTile:hover .ObjectTile__image__main { transform: scale(1.1); } .ObjectTile:hover .ObjectTile__highlight { opacity: 0.4; } .ObjectTile--selected { border: 2px solid rgb(var(--color-primary-300)); } .ObjectTile__image { overflow: hidden; } .ObjectTile__image img { transition: 0.2s all; object-fit: cover; width: 100%; height: 100%; } .ObjectTile__image { position: relative; aspect-ratio: 1.4; margin: 0 -10px; transition: 0.2s all; } .ObjectTile__image__main { background-color: rgba(var(--color-gray-300), 0.2); } .ObjectTile__name { font-size: 18px; font-weight: 500; line-height: 22px; color: rgb(var(--color-primary-500)); margin-top: 10px; margin-bottom: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: flex; flex-direction: column; } .ObjectTile__name__sdkId { font-size: 13px; color: rgb(var(--color-gray-600)); font-weight: 400; } .ObjectTile__description { font-size: 14px; color: rgb(var(--color-gray-700)); line-height: 18px; margin-bottom: 15px; min-height: 18px; width: 210px; } .ObjectTile__highlight { position: absolute; right: 0; bottom: 0; left: 0; top: 0; opacity: 0; transition: 0.2s all; background: rgb(var(--color-primary-500)); } .ObjectTile__stats { display: grid; grid-template-columns: 1fr 1fr; row-gap: 12px; column-gap: 10px; } @media screen and (max-width: 48em) { .ObjectTile__stats { grid-template-columns: 1fr; } } .ObjectTile__stat__label { font-size: 16px; margin-bottom: 3px; color: rgb(var(--color-gray-600)); } .ObjectTile__stat__value { font-size: 18px; color: rgb(var(--color-gray-700)); } .ObjectTile__button { display: flex; justify-content: center; margin-top: 15px; margin-bottom: 5px; } .EmailSelectorModal__buttons { float: right; } .EmailSelectorModal__button { margin-left: 8px; font-size: 10pt; cursor: pointer; color: rgb(var(--color-secondary-500)); } .EmailSelectorModal__button:hover { text-decoration: underline; } .EmailSelectorModal__list { display: flex; flex-direction: column; justify-items: center; margin-left: 15px; } .EmailSelectorModal__list__name { line-height: 16px; margin-bottom: 2px; } .EmailSelectorModal__list__email { font-size: 14px; color: rgb(var(--color-gray-600)); line-height: 16px; } .dark-mode .SceneViewer__sceneTooltip { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__menu__label { color: rgb(var(--color-gray-300)); } .dark-mode .SceneViewer__menu__header { color: rgb(var(--color-gray-300)); } .dark-mode .SceneViewer__menu__text { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__menu__text__disabled { color: rgba(var(--color-gray-200), 0.5); padding-left: 20px; } .dark-mode .SceneViewer__buttonRow { border-top: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .SceneViewer__buttonRow__dropdown { color: rgb(var(--color-gray-400)); } .dark-mode .SceneViewer__buttonRow__dropdown:hover { color: rgb(var(--color-extra-indigo-dash3-400)); } .dark-mode .SceneViewer__summary__label { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__summary__header { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__summary__header__value { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__sessionTable__actions { border-bottom: 1px solid rgb(var(--color-gray-600)); } .dark-mode .SceneViewer__sessionTable__bulk__title { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__sessionTable__checkbox { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__sessionTable__tags .NiceDropdownDash3__field { color: rgb(var(--color-gray-300)); } .dark-mode .SceneViewer__sessionTable__editName { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__sessionTable__editName:hover { color: rgb(var(--color-primary-400)); } .dark-mode .SceneViewer__sessionTable__editTag { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewer__sessionTable__editTag:hover { color: rgb(var(--color-primary-400)); } .dark-mode .SceneViewer__sessionTable__name:hover { background-color: rgba(var(--color-extra-midnight-dash3-600), 0.1); } .dark-mode .SceneViewer__sessionTable__name a:hover { color: rgb(var(--color-secondary-400)); } .dark-mode .SceneViewerCanvas__loadingScreen { background-color: rgba(var(--color-gray-800), 0.3); } .dark-mode .SceneViewerCanvas__clipSlider { background-color: rgba(var(--color-gray-800), 0.5); } .dark-mode .SceneViewerCanvas__clipSlider .rc-slider-mark-text { color: rgb(var(--color-gray-300)); } .dark-mode .SceneViewerCanvas__heatmapSettings { background-color: rgba(var(--color-gray-800), 0.9); } .dark-mode .SceneViewerCanvas__heatmapSettings__dropdownBox { display: flex; flex-direction: column; margin-top: 4px; } .dark-mode .SceneViewerCanvas__heatmapSettings__title { color: rgb(var(--color-gray-300)); } .dark-mode .SceneViewerCanvas__heatmapSettings__label { color: rgb(var(--color-gray-200)); } .dark-mode .SceneViewerCanvas__heatmapSettings .rc-slider-mark-text { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewer__meta__label { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewer__meta__value { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewer__dropdownIcon { color: rgb(var(--color-extra-indigo-200)); } .dark-mode .SceneSessionViewer__property--smallMargin .ContentContainerDash3 { background: rgba(var(--color-white), 0.02); } .dark-mode .SceneSessionViewer__property__showButtonOverlay { background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .dark-mode .SceneSessionViewer__property__showButton, .dark-mode .SceneSessionViewer__property__hideButton { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewer__property__sortIcon { color: rgb(var(--color-gray-300)); } .dark-mode .SceneSessionViewer__property__sortIcon:hover { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewer__raw .Well { background-color: rgba(var(--color-white), 0.05); } .dark-mode .SceneSessionTimeline__goToObjectButton { border-top: solid 1px rgb(var(--color-gray-600)); } .dark-mode .SceneSessionTimeline__eventContents { border: solid 1px rgb(var(--color-gray-600)); background-color: rgba(var(--color-extra-midnight-dash3-900), 0.05); } .dark-mode .SceneSessionTimeline__eventContents:after { display: none; } .dark-mode .SceneSessionTimeline__eventName { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__eventTime { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__isInternal { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__eventProperty { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .SceneSessionTimeline__eventProperty__name { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__eventProperty__value { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__exitPoll { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .SceneSessionTimeline__exitPoll__header { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__exitPoll__title { color: rgb(var(--color-gray-300)); border-left: 4px solid rgb(var(--color-primary-400)); } .dark-mode .SceneSessionTimeline__exitPoll__answer { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__exitPoll__answer--userAnswer { color: rgb(var(--color-primary-400)); } .dark-mode .SceneSessionTimeline__exitPoll__answer__label { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__exitPoll__skipped { background: rgba(var(--color-white), 0.2); } .dark-mode .SceneSessionTimeline__exitPoll__skipped span { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__timeline-dropdown { padding-bottom: 10px; } .dark-mode .SceneSessionTimeline__isObjective__propertyHeader { border-top: 1px solid rgb(var(--color-gray-600)); } .dark-mode .SceneSessionTimeline__isObjective__propertyTitle { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__isObjective__propertyStepsCount { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__isObjective__propertyBox { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionTimeline__isObjective__propertyBox--complete > span, .dark-mode .SceneSessionTimeline__isObjective__propertyBox--complete em, .dark-mode .SceneSessionTimeline__isObjective__propertyBox--complete div { color: rgb(var(--color-success-500)); } .dark-mode .SceneSessionTimeline__isObjective__propertyBox--incomplete > span, .dark-mode .SceneSessionTimeline__isObjective__propertyBox--incomplete em, .dark-mode .SceneSessionTimeline__isObjective__propertyBox--incomplete div { color: rgb(var(--color-error-500)); } .dark-mode .SceneSessionTimeline__stackTraceLine { color: rgb(var(--color-gray-200)); border-bottom: 1px solid rgb(var(--color-gray-700)); } .dark-mode .voice-player { color: rgb(var(--color-gray-200)); } .dark-mode .ObjectExplorer--empty { border: 1px solid rgba(242, 240, 240, 0.15); color: rgb(var(--color-gray-400)); } .dark-mode .ObjectExplorer__table__sdkId { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectTile { border: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .ObjectTile--selected { border: 2px solid rgb(var(--color-primary-400)); } .dark-mode .ObjectTile__image__main { background-color: rgba(var(--color-white), 0.15); } .dark-mode .ObjectTile__highlight { background: rgb(var(--color-primary-400)); } .dark-mode .ObjectTile__name { color: rgb(var(--color-primary-400)); } .dark-mode .ObjectTile__name__sdkId { color: rgb(var(--color-gray-400)); } .dark-mode .ObjectTile__description { color: rgb(var(--color-gray-500)); } .dark-mode .ObjectTile__stat__label { color: rgb(var(--color-gray-400)); } .dark-mode .ObjectTile__stat__value { color: rgb(var(--color-gray-200)); } .dark-mode .ObjectMetricsViewer__sdkId { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectMetricsViewer__metric__value { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectMetricsViewer__metric__label { color: rgb(var(--color-gray-300)); } .dark-mode .ObjectMetricsViewer__metric__description { color: rgb(var(--color-gray-300)); } .dark-mode .EmailSelectorModal__button { color: rgb(var(--color-secondary-400)); } .dark-mode .EmailSelectorModal__list__email { color: rgb(var(--color-gray-200)); } .scene-canvas-wrapper { position: relative; width: 100%; height: 100%; /* ✅ important */ display: flex; flex-direction: column; flex: 1; /* ✅ in case it's inside a flex layout */ } /* Overlay that only covers SceneExplorerCanvas */ .SceneViewerCanvas__loadingScreen { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; /* allow click-through unless needed */ } .SceneViewerCanvas__screenshot { width: 100%; height: auto; object-fit: cover; max-height: 100%; pointer-events: none; } .SceneViewerCanvas__loadButton { margin-top: 1rem; z-index: 11; pointer-events: auto; /* enable interaction with button */ } .NiceTableDash3__header.NiceTableDash3--ObjectList { padding: 10px 50px; } .NiceTableDash3__header.NiceTableDash3--ObjectMetricsList { padding: 0px 50px; } .NiceTableDash3__header.NiceTableDash3--SceneSessionList { padding: 0px 50px; } @media (max-width: 1500px) { .NiceTableDash3__header.NiceTableDash3--SceneSessionList { padding: 0px; } } .NiceTableDash3__row.NiceTableDash3--SceneSessionList { margin: 0px 50px; } @media (max-width: 1500px) { .NiceTableDash3__row.NiceTableDash3--SceneSessionList { margin: 0px; } } .NiceTableDash3--SessionPropertiesList .NiceTableDash3__cell { padding: 12px 0px; } .SceneSettingsModal { position: absolute; left: 50px; top: 15px; display: flex; flex-direction: column; justify-content: flex-start; padding: 25px 45px 45px 35px; border-radius: 10px; } .SceneSettingsModal__tooltip { font-size: 5px; padding: 0.5rem; } .SceneSettingsModal__dragHandle { position: absolute; color: rgb(var(--color-extra-indigo-dash3-400)); top: 8px; right: 8px; cursor: grab; padding: 4px; opacity: 0.4; touch-action: none; } .SceneSettingsModal__dragHandle:hover { opacity: 0.8; } .SceneSettingsModal__dragHandle:active { cursor: grabbing; } .SceneSettingsModal { background-color: rgba(var(--color-white), 0.9); z-index: 10; min-width: 380px; max-height: calc(100% - 30px); overflow-y: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } @media screen and (max-width: 2000px) { .SceneSettingsModal { padding: 20px 35px 35px 25px; } } .SceneSettingsModal__subheader { display: flex; align-items: center; flex-shrink: 0; font-family: "Onest"; color: rgb(var(--color-title-dash3)); font-size: 16px; font-weight: 700; margin-top: 8px; margin-bottom: 12px; margin-left: -3px; } @media screen and (max-width: 2000px) { .SceneSettingsModal__subheader { font-size: 15px; } } .SceneSettingsModal__toggleRow { display: flex; align-items: center; flex-shrink: 0; gap: 16px; margin-bottom: 16px; } .SceneSettingsModal__dropdownRow { display: flex; align-items: center; flex-shrink: 0; gap: 16px; margin-bottom: 20px; } .SceneSettingsModal__dropdownRow .NiceDropdownDash3 { width: 180px; } .SceneSettingsModal__label { display: flex; align-items: center; justify-content: space-between; font-family: "Onest"; color: rgb(var(--color-title-dash3)); font-size: 15px; width: 170px; flex-shrink: 0; } @media screen and (max-width: 2000px) { .SceneSettingsModal__label { font-size: 15px; } } .SceneSettingsModal .ButtonGroup { margin-bottom: 20px; flex-shrink: 0; } .SceneSettingsModal__sliderRow { display: flex; align-items: center; flex-shrink: 0; gap: 16px; margin-bottom: 28px; } .SceneSettingsModal__heatmapSettings { display: flex; flex-direction: column; } .SceneSettingsModal__heatmapSettings .rc-slider { width: 180px; } @media screen and (max-width: 2000px) { .SceneSettingsModal__heatmapSettings .rc-slider { width: 150px; } } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-rail { height: 3px; background: rgb(var(--color-gray-400)); } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-track { height: 3px; background: rgb(var(--color-extra-violet-600)); } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-handle { width: 18px; height: 18px; margin-top: -8px; border-color: rgb(var(--color-extra-violet-600)); background: rgb(var(--color-white)); opacity: 1; } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-dot { width: 11px; height: 11px; top: -4px; border-color: rgb(var(--color-gray-400)); background: rgb(var(--color-white)); } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-dot-active { border-color: rgb(var(--color-extra-violet-600)); } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-mark { top: 20px; left: 2px; font-family: "Onest"; font-size: 14px; } .SceneSettingsModal__heatmapSettings .rc-slider .rc-slider-mark-text { color: rgb(var(--color-title-dash3)); } .dark-mode .SceneSettingsModal { background-color: rgba(var(--color-gray-800), 0.9); } .dark-mode .SceneSettingsModal__subheader { color: rgb(var(--color-gray-300)); } .dark-mode .SceneSettingsModal__label { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSettingsModal .rc-slider-rail { background: rgb(var(--color-gray-600)); } .dark-mode .SceneSettingsModal .rc-slider-handle { background: rgb(var(--color-gray-300)); border-color: rgb(var(--color-extra-violet-400)); } .dark-mode .SceneSettingsModal .rc-slider-dot { background: rgb(var(--color-gray-700)); border-color: rgb(var(--color-gray-500)); } .dark-mode .SceneSettingsModal .rc-slider-dot-active { border-color: rgb(var(--color-extra-violet-400)); } .dark-mode .SceneSettingsModal .rc-slider-mark-text { color: rgb(var(--color-gray-200)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .OrgKpiCard { --kpi-accent: #8347F5; position: relative; background: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; padding: 20px; overflow: hidden; min-width: 0; } .dark-mode .OrgKpiCard { background: rgb(var(--color-soft-purple-600)); border-color: rgba(255, 255, 255, 0.08); } .OrgKpiCard__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kpi-accent); } .OrgKpiCard__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgb(var(--color-gray-600)); margin-bottom: 8px; } .dark-mode .OrgKpiCard__label { color: rgb(var(--color-gray-400)); } .OrgKpiCard__value { font-size: 28px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; color: rgb(var(--color-soft-purple-600)); } .dark-mode .OrgKpiCard__value { color: rgb(var(--color-white)); } .OrgKpiCard__subtitle { font-size: 12px; color: rgb(var(--color-gray-500)); } .dark-mode .OrgKpiCard__subtitle { color: rgb(var(--color-gray-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .OrgProjectTable { width: 100%; background-color: rgb(var(--color-white)); border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; overflow: hidden; } .dark-mode .OrgProjectTable { background-color: rgb(var(--color-soft-purple-600)); border-color: rgba(255, 255, 255, 0.08); } .OrgProjectTable__header { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgb(var(--color-gray-300)); } .dark-mode .OrgProjectTable__header { border-color: rgba(255, 255, 255, 0.08); } .OrgProjectTable__header h3 { color: rgb(var(--color-extra-navy-dash3-900)); font-family: "Onest", sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 20px; margin: 0; } .dark-mode .OrgProjectTable__header h3 { color: rgb(var(--color-white)); } .OrgProjectTable__body { padding: 0 20px 20px; overflow-x: auto; } .OrgProjectTable__table { width: 100%; border-collapse: collapse; font-size: 13px; } .OrgProjectTable__table thead th { text-align: left; padding: 12px 0; border-bottom: 1px solid rgb(var(--color-gray-300)); color: rgb(var(--color-gray-600)); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; user-select: none; white-space: nowrap; } .dark-mode .OrgProjectTable__table thead th { border-color: rgba(255, 255, 255, 0.08); color: rgb(var(--color-gray-400)); } .OrgProjectTable__table thead th:hover { color: #8347F5; } .OrgProjectTable__table tbody td { padding: 12px 0; border-bottom: 1px solid rgb(var(--color-gray-100)); } .dark-mode .OrgProjectTable__table tbody td { border-color: rgba(255, 255, 255, 0.04); } .OrgProjectTable__table tbody tr:last-child td { border-bottom: none; } .OrgProjectTable__table tbody tr:hover { background: rgba(131, 71, 245, 0.03); } .dark-mode .OrgProjectTable__table tbody tr:hover { background: rgba(131, 71, 245, 0.08); } .OrgProjectTable__row--clickable { cursor: pointer; } .OrgProjectTable__projectName { font-weight: 600; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .OrgProgressBar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; } .OrgProgressBar__track { width: 100%; height: 6px; background: rgb(var(--color-gray-200)); border-radius: 3px; overflow: hidden; } .dark-mode .OrgProgressBar__track { background: rgba(255, 255, 255, 0.08); } .OrgProgressBar__fill { height: 100%; background: linear-gradient(90deg, #8347F5, #B616C8); border-radius: 3px; transition: width 0.4s ease; } .OrgProgressBar__label { font-size: 12px; color: rgb(var(--color-gray-600)); font-weight: 500; } .dark-mode .OrgProgressBar__label { color: rgb(var(--color-gray-400)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .OrgProjectSelector { display: flex; align-items: center; } .OrgProjectSelector__trigger { position: relative; display: flex; align-items: center; } .OrgProjectSelector__icon { font-size: 1.125rem; color: rgb(var(--color-gray-800)); flex-shrink: 0; transition: color 0.15s ease; cursor: pointer; } .OrgProjectSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .OrgProjectSelector__badge { position: absolute; top: -6px; right: -8px; background: #8347F5; color: rgb(var(--color-white)); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } .OrgProjectSelector__menu-item { cursor: pointer; font-size: 16px; display: flex; flex-direction: row; align-items: center; border-radius: 5px; padding: 7px 5px; margin: 5px 0; } .OrgProjectSelector__menu-item:hover { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 1); } .OrgProjectSelector__menu-item .checkboxInput { margin-bottom: 0; } .OrgProjectSelector__menu-item-text { margin-left: 15px; line-height: 20px; } .dark-mode .OrgProjectSelector__icon { color: rgb(var(--color-white)); } .dark-mode .OrgProjectSelector__icon:hover { color: rgb(var(--color-electric-purple-500)); } .dark-mode .OrgProjectSelector__menu-item:hover { color: rgb(var(--color-gray-300)); background-color: rgba(var(--color-white), 0.1); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .OrgDashboard { min-height: 75vh; min-width: 1000px; padding: 35px 50px 35px 50px; } .OrgDashboard__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgb(var(--color-gray-300)); } .dark-mode .OrgDashboard__header { border-color: rgba(255, 255, 255, 0.08); } .OrgDashboard__title { font-size: 22px; font-weight: 700; margin: 0; } .OrgDashboard__subtitle { font-size: 13px; color: rgb(var(--color-gray-600)); margin: 2px 0 0; } .dark-mode .OrgDashboard__subtitle { color: rgb(var(--color-gray-400)); } .OrgDashboard__dateFilter { display: flex; align-items: center; gap: 12px; } .OrgDashboard__dateFilter .OrgProjectSelector { padding-right: 12px; border-right: 1px solid rgb(var(--color-gray-300)); } .dark-mode .OrgDashboard__dateFilter .OrgProjectSelector { border-color: rgba(255, 255, 255, 0.12); } .OrgDashboard__kpiRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .OrgDashboard__chartRow { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 24px; } .OrgDashboard__chartRow--equal { grid-template-columns: 1fr 1fr; } .OrgDashboard__chartRow--triple { grid-template-columns: 1fr 1fr 1fr; } .OrgDashboard__chartRow--full { grid-template-columns: 1fr; } .OrgDashboard__chartRow .DashboardCard-dash3 { min-width: 0; min-height: 300px; } .OrgDashboard__chartRow .DashboardCard-dash3--span-2 { min-width: 0; } .OrgDashboard__chartRow .DashboardCard-dash3--span-1 { min-width: 0; } @media (max-width: 1201px) { .OrgDashboard__chartRow { grid-template-columns: 1fr; } } .OrgDashboard__sectionHeading { margin-top: 32px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgb(var(--color-gray-300)); } .dark-mode .OrgDashboard__sectionHeading { border-color: rgba(255, 255, 255, 0.08); } .OrgDashboard__sectionHeading h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; } .OrgDashboard__sectionHeading p { font-size: 13px; color: rgb(var(--color-gray-600)); margin: 0; } .dark-mode .OrgDashboard__sectionHeading p { color: rgb(var(--color-gray-400)); } .OrgDashboard__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; } .OrgDashboard__empty h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; } .OrgDashboard__empty { /* stylelint-disable-next-line no-descending-specificity */ } .OrgDashboard__empty p { color: rgb(var(--color-gray-600)); font-size: 14px; } .dark-mode .OrgDashboard__empty p { color: rgb(var(--color-gray-400)); }.ParticipantFinder { background: var(--card-bg, #fff); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color, #e5e7eb); } .ParticipantFinder__header { margin-bottom: 16px; } .ParticipantFinder__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--text-primary, #111); } .ParticipantFinder__subtitle { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; } .ParticipantFinder__searchBar { position: relative; display: flex; align-items: center; margin-bottom: 12px; } .ParticipantFinder__searchIcon { position: absolute; left: 12px; color: var(--text-secondary, #9ca3af); font-size: 14px; pointer-events: none; } .ParticipantFinder__input { width: 100%; padding: 10px 36px 10px 36px; border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; font-size: 14px; font-family: Onest, sans-serif; background: var(--input-bg, #fff); color: var(--text-primary, #111); outline: none; transition: border-color 0.15s; } .ParticipantFinder__input::placeholder { color: var(--text-secondary, #9ca3af); } .ParticipantFinder__input:focus { border-color: #8347F5; box-shadow: 0 0 0 2px rgba(131, 71, 245, 0.12); } .ParticipantFinder__clearBtn { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: var(--text-secondary, #9ca3af); font-size: 14px; padding: 4px; display: flex; align-items: center; justify-content: center; } .ParticipantFinder__clearBtn:hover { color: var(--text-primary, #111); } .ParticipantFinder__progress { position: relative; height: 24px; background: var(--progress-bg, #f3f4f6); border-radius: 6px; margin-bottom: 12px; overflow: hidden; } .ParticipantFinder__progressBar { position: absolute; top: 0; left: 0; height: 100%; background: #8347F5; opacity: 0.15; transition: width 0.3s ease; border-radius: 6px; } .ParticipantFinder__progressLabel { position: relative; display: flex; align-items: center; height: 100%; padding: 0 10px; font-size: 12px; color: var(--text-secondary, #6b7280); } .ParticipantFinder__noResults { text-align: center; padding: 32px 16px; font-size: 14px; color: var(--text-secondary, #6b7280); } .ParticipantFinder__results { margin-top: 4px; } .ParticipantFinder__resultCount { font-size: 14px; color: var(--text-secondary, #6b7280); margin-bottom: 12px; padding: 0 2px; } .ParticipantFinder__resultList { max-height: 1440px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .ParticipantFinder__resultItem { border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; padding: 20px 22px; transition: border-color 0.15s; } .ParticipantFinder__resultItem:hover { border-color: #8347F5; } .ParticipantFinder__participantHeader { margin-bottom: 12px; } .ParticipantFinder__fullName { font-size: 18px; font-weight: 600; color: var(--text-primary, #111); line-height: 1.3; } .ParticipantFinder__userId { font-size: 14px; color: var(--text-secondary, #6b7280); word-break: break-all; line-height: 1.4; } .ParticipantFinder__participantHeader:not(:has(.ParticipantFinder__fullName)) .ParticipantFinder__userId { font-size: 18px; font-weight: 600; color: var(--text-primary, #111); } .ParticipantFinder__projectList { display: flex; flex-direction: column; gap: 6px; } .ParticipantFinder__projectLink { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px; border-radius: 8px; background: var(--subtle-bg, #f9fafb); text-decoration: none; transition: background 0.15s; } .ParticipantFinder__projectLink:hover { background: rgba(131, 71, 245, 0.08); } .ParticipantFinder__projectName { font-size: 15px; color: #8347F5; font-weight: 500; flex-shrink: 0; } .ParticipantFinder__projectMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 14px; color: var(--text-secondary, #6b7280); } .ParticipantFinder__metaSep { opacity: 0.4; } .ParticipantFinder__metaItem { white-space: nowrap; } .ParticipantFinder__metaItem--pass { color: #16a34a; } .ParticipantFinder__metaItem--fail { color: #dc2626; } .ParticipantFinder__metaItem--noObj { font-style: italic; opacity: 0.6; } .ParticipantFinder__objectiveIcon { margin-right: 3px; font-size: 11px; } .dark-mode .ParticipantFinder { --card-bg: #1e1e2e; --border-color: #2d2d3d; --text-primary: #e5e5f0; --text-secondary: #8b8ba0; --input-bg: #16162a; --progress-bg: #2a2a3a; --subtle-bg: #24243a; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .footer { margin-top: 150px; height: 100%; font-family: "Onest"; text-align: center; } .footer--login { height: unset; text-align: center; margin-top: 40px; } .footer--login__link { font-size: 14px; padding: 5px; margin: 0 5px; color: rgb(var(--color-white)); font-weight: bold; cursor: pointer; display: inline-block; } .footer--login__link:hover { color: rgb(var(--color-teal-500)); } .footer--login__copyright { color: rgb(var(--color-gray-200)); } .footer__link { font-size: 14px; padding: 5px; margin: 0 5px; color: rgb(var(--color-gray-600)); font-weight: bold; cursor: pointer; display: inline-block; } .footer__link:hover { color: rgb(var(--color-primary-500)); } .dark-mode .footer__link { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .LoginContainer { min-height: 100vh; min-width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: auto; } .LoginContainer__wrapper { width: 75rem; height: 43rem; border-radius: 5px; background: rgb(var(--color-white)); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .LoginContainer__wrapper::-webkit-scrollbar { background-color: transparent; width: 5px; } .LoginContainer__wrapper::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; outline: 2px solid transparent; } @media screen and (max-width: 769px) { .LoginContainer__wrapper { width: 90%; min-width: 500px; } } .LoginContainer__header { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .LoginContainer__header--floating { position: absolute; top: 20px; left: 20px; right: 20px; } .LoginContainer__header__logo { max-width: 300px; } @media screen and (max-width: 769px) { .LoginContainer__header__logo { display: none; } } .LoginContainer__header__search { max-width: 300px; } .LoginContainer__header__search .InputField { margin-bottom: 0; } .LoginContainer__main { display: flex; justify-content: space-evenly; align-items: center; } @media screen and (max-width: 769px) { .LoginContainer__main { display: flex; justify-content: center; align-items: center; } } .LoginContainer__LeftHero { min-height: 700px; position: relative; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .LoginContainer__LeftHero__MottoContainer { height: 100%; position: relative; z-index: 3; display: flex; align-items: flex-end; } .LoginContainer__LeftHero__Motto { color: white !important; margin-left: 2%; margin-bottom: 2%; } .LoginContainer__LeftHero__logo { padding-top: 10px; } @media screen and (max-width: 769px) { .LoginContainer__LeftHero { display: none; } } .LoginContainer__Page { position: relative; display: flex; flex-direction: column; align-self: stretch; align-items: stretch; justify-content: stretch; padding: 40px 60px; } @media screen and (max-width: 769px) { .LoginContainer__Page { padding: 40px 30px 30px 30px; } } .LoginContainer__Page--homepage { padding: 0; min-height: 700px; } @media screen and (max-width: 769px) { .LoginContainer__Page--homepage { padding: 50px 0; } } .LoginContainer__FormContainer { min-height: 500px; padding-top: 20px; } .LoginContainer__FormContainer__Gutter { align-self: flex-end; padding-top: 30px; } .terms-condiditons { display: flex; align-items: center; } .terms-condiditons input { margin-left: 0; margin-right: 10px; cursor: pointer; } .terms-condiditons div { display: flex; line-height: 1rem; } .terms-condiditons a { margin: 0 3px 0 3px; } .LoginContentWrapper .LoginContainer__Page { position: relative; display: flex; flex-direction: column; align-self: center; align-items: stretch; justify-content: stretch; padding: 40px 60px; min-width: 800px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .login-right-side { width: 100%; height: 100dvh; background-image: url("/assets/login_bg-CFJnMSTp.svg"); background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2rem; position: relative; } .login-right-side__headline { font-size: 2.3rem; font-weight: 700; color: white; text-align: center; margin: 0; margin-bottom: 2rem; } @media screen and (max-width: 769px) { .login-right-side { display: none; } } .login-right-side .content-wrapper { display: flex; flex-direction: column; gap: 2rem; justify-content: flex-start; align-items: center; max-width: 600px; height: 400px; width: 100%; } .login-right-side .headline { font-size: 2.5rem; font-weight: 700; color: white; text-align: center; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .login-right-side .cards-container { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; } .login-right-side .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 1.875rem; padding: 1.2rem 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); will-change: transform, opacity; transition: none; } .login-right-side .glass-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; gap: 1rem; } .login-right-side .glass-card__title { font-size: 1.25rem; font-weight: 600; color: white; margin: 0; line-height: 1.3; flex: 1; } .login-right-side .glass-card__date { font-size: 0.875rem; color: rgb(var(--color-white)); font-weight: 500; } .login-right-side .error-placeholder, .login-right-side .empty-placeholder { text-align: center; color: rgba(255, 255, 255, 0.8); padding: 2rem; } .login-right-side .error-placeholder p, .login-right-side .empty-placeholder p { margin: 0.5rem 0; } .login-right-side .error-placeholder .error-link, .login-right-side .empty-placeholder .error-link { color: rgba(255, 255, 255, 0.9); text-decoration: underline; } .login-right-side .error-placeholder .error-link:hover, .login-right-side .empty-placeholder .error-link:hover { color: white; } .login-right-side .footer { position: absolute; bottom: 0; left: 0; right: 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ .SubmitNewPassword__verifyForm { display: flex; flex-direction: column; align-items: center; justify-content: center; } .SubmitNewPassword__message { margin: 0; line-height: 2rem; font-family: "Onest"; font-size: 18px; } .SubmitNewPassword__codeInput { margin-top: 2rem; margin-bottom: 2rem; width: 350px; }.create-account-form__noPadding { padding-bottom: 0; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .invite-team__form { max-height: 350px; padding-right: 1rem; margin-right: -1rem; overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .invite-team__form:hover { scrollbar-color: #808080 transparent; } .invite-team__form::-webkit-scrollbar { background-color: transparent; width: 7px; } .invite-team__form::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .invite-team__form::-webkit-scrollbar-button { display: none; } .invite-team__form__noPadding { padding-bottom: 0; } .invite-team__button { text-align: right; margin-top: 3px; } .invite-team__remove { cursor: pointer; color: rgb(var(--color-primary-500)); text-decoration: underline; font-family: "Onest"; font-size: 15px; } .invite-team__remove:hover { color: rgb(var(--color-primary-700)); } .invite-team__add-member { display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; margin-bottom: 2.5rem; } .invite-team-row { display: flex; justify-content: center; } .invite-team-row--email { min-width: 500px; } .invite-team-row--remove-user-container { display: flex; flex-direction: column; justify-content: center; color: rgb(var(--color-secondary-900)); height: 100%; margin-top: 20px; margin-left: 15px; } .invite-team-row--remove-user-container:hover { color: rgb(var(--color-primary-700)); cursor: pointer; } .invite-team-row--add-user-container { color: rgb(var(--color-secondary-500)); } .invite-team-row--add-user-container:hover { color: rgb(var(--color-secondary-600)); cursor: pointer; } .invite-team-row--add-user-container { margin-top: 10px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .confirm-account__instruction { font-size: 18px; font-family: "Onest"; padding-bottom: 2rem; color: rgb(var(--color-gray-600)); } .confirm-account__instruction-email { font-weight: 700; } .confirm-account__input-button { text-align: left; margin-top: 10px; } .confirm-account__resend-code { cursor: pointer; font-size: 16px; color: rgb(var(--color-primary-500)); text-decoration: underline; font-family: "Onest"; } .confirm-account__resend-code:hover { color: rgb(var(--color-primary-700)); } .confirm-account__buttonRow { display: flex; flex-wrap: wrap; margin-top: 2rem; width: 100%; align-self: flex-end; justify-content: flex-end; } .confirm-account__buttonRow .button { margin-left: 10px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .SignupForm__form-wrapper { display: flex; flex-direction: column; overflow: hidden; padding: 4rem; width: 32.75rem; background: rgb(var(--color-white)); box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); border-radius: 5px; } @media screen and (max-width: 1200px) { .SignupForm__form-wrapper { padding: 30px 40px; } } .SignupForm__form-heading { font-family: "Onest"; max-width: 400px; color: #13294b; font-size: 2.3rem; font-weight: 700; line-height: 1.19; margin: 0 auto 35px; text-align: center; } .SignupForm__sso { display: flex; flex-direction: column; margin-bottom: 10px; } .SignupForm__sso__button { margin-bottom: 20px; min-height: 38px; padding: 10px 15px; display: flex; flex-direction: row; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.7); font-family: "Onest"; font-size: 15px; font-weight: 600; background-color: rgb(var(--color-white)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } .SignupForm__sso__button:hover { background-color: rgb(var(--color-gray-100)); } .SignupForm__sso__button--icon { margin-right: 18px; } .SignupForm__form-divider { display: flex; justify-content: center; align-items: center; color: rgb(var(--color-gray-500)); font-size: 15px; font-family: "Lato", sans-serif; margin: 1rem 0 2rem; } .SignupForm__form-divider::after { content: ""; display: block; background: rgb(var(--color-gray-500)); width: 50%; height: 1px; margin-left: 35px; } .SignupForm__form-divider::before { content: ""; display: block; background: rgb(var(--color-gray-500)); width: 50%; height: 1px; margin-right: 35px; } .SignupForm__email { font-family: "Onest"; } .SignupForm__email__label { font-weight: 700; font-size: 14px; color: #13294b; margin-bottom: 15px; } .SignupForm__email__input { height: 42px; font-size: 14px; box-sizing: border-box; border: 1.5px solid rgb(var(--color-gray-400)); border-radius: 5px; padding: 0 12px; margin-bottom: 18px; } .SignupForm__email__input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: rgb(var(--color-gray-500)); } .SignupForm__subscribe { display: flex; margin-bottom: 18px; } .SignupForm__subscribe__text { margin-top: -2px; padding-left: 10px; font-family: "Onest"; font-size: 14px; line-height: 1.1rem; color: #13294b; } .SignupForm__subscribe__link { cursor: pointer; font-style: normal; font-weight: 600; margin: 0 3px; color: rgb(var(--color-primary-500)); } .SignupForm__subscribe__link:hover { color: rgb(var(--color-sky-blue-600)); text-decoration: underline; } .SignupForm__recaptcha { display: flex; justify-content: center; margin-bottom: 18px; } .SignupForm__primary-button { min-height: 42px; padding: 0.8rem 1rem; display: flex; flex-direction: row; align-items: center; justify-content: center; color: rgb(var(--color-white)); font-family: "Onest"; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, rgb(var(--color-sky-blue-600)) 0%, #a443f0 90%); border-radius: 5px; position: relative; overflow: hidden; margin-bottom: 2rem; z-index: 1; } .SignupForm__primary-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #a443f0 0%, #0087f6 90%); transition: left 0.4s ease-in-out; border-radius: 5px; z-index: -1; } .SignupForm__primary-button:hover::before { left: 0; } .SignupForm__primary-button { /* Ensure content stays on top */ } .SignupForm__primary-button > * { position: relative; z-index: 2; } .SignupForm__primary-button--disabled { background-color: rgb(var(--color-primary-200)) !important; cursor: default; } .SignupForm__login { margin-bottom: 2rem; display: flex; flex-direction: row; justify-content: center; font-size: 14px; font-family: "Onest"; } .SignupForm__terms { text-align: center; font-family: "Onest"; font-size: 14px; line-height: 18px; color: rgb(var(--color-gray-600)); font-weight: 500; } .SignupForm__terms__link { cursor: pointer; font-style: normal; margin: 0 3px; color: rgb(var(--color-primary-500)); } .SignupForm__terms__link:hover { color: rgb(var(--color-sky-blue-600)); text-decoration: underline; }.VerifyInvitedUser { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; margin: 0; } .VerifyInvitedUser__logo { margin-top: -40px; margin-bottom: 40px; display: flex; justify-content: center; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .MissingPageGraphics { padding-top: 80px; padding-bottom: 80px; font-family: "Onest"; } .MissingPageGraphics__TextBox { z-index: 2; width: 100%; max-width: 900px; margin: 0 auto; margin-top: 100px; text-align: center; display: flex; flex-direction: column; } .MissingPageGraphics__Title { font-size: 1.8em; font-weight: 400; margin-bottom: 40px; } .MissingPageGraphics__SubTitle { font-size: 1.2em; font-weight: 400; margin-bottom: 70px; } .MissingPageGraphics__Description { font-size: 1.2em; font-weight: 400; margin-bottom: 40px; } .MissingPageGraphics__BackLink { font-size: 1em; font-weight: 300; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .MissingPageGraphics__SVG > div, .MissingPageGraphics__SVG > div > div { margin: 0 auto; width: 100%; } .MissingPageGraphics__SVG svg { width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; } .MissingPageGraphics__SVG { position: relative; z-index: 1; } .dark-mode .MissingPageGraphics__Title { color: rgb(var(--color-gray-300)); } .dark-mode .MissingPageGraphics__SubTitle { color: rgb(var(--color-gray-200)); } .dark-mode .MissingPageGraphics__Description { color: rgb(var(--color-gray-300)); } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .brand-logo { transform: scale(0.95); transition: transform 0.2s; } .brand-logo--clickable:hover { transform: scale(1); } .brand-logo__image--clickable:hover { opacity: 1; }.customer-brands { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: center; padding: 0; column-gap: 110px; row-gap: 30px; } @media screen and (max-width: 1200px) { .customer-brands { column-gap: 50px; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .GetStarted__section { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding: 0; margin: 0; } @media (max-width: 1440px) { .GetStarted__section { grid-template-columns: 1fr; } } .GetStarted__text-container { padding: 50px 12% 50px 0; display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 1440px) { .GetStarted__text-container { padding: 50px 20px; justify-content: unset; align-items: unset; } } .GetStarted__text-wrapper { width: 90%; max-width: 800px; } @media (max-width: 1440px) { .GetStarted__text-wrapper { width: 100%; margin: 0 auto; } } .GetStarted__logo { display: flex; margin-bottom: 1rem; } @media (max-width: 1440px) { .GetStarted__logo { text-align: center; } } .GetStarted__heading { color: #13294b; font-size: 2.33rem; font-weight: 900; line-height: 1.2; margin-bottom: 35px; } .GetStarted__heading span { color: #a543f1; } @media (max-width: 1440px) { .GetStarted__heading { font-size: 1.875rem; text-align: center; } } .GetStarted__list { padding-left: 3rem; margin-bottom: 30px; margin-left: 0; } .GetStarted__list li { color: #13294b; font-size: 1.25rem; line-height: 1.7; list-style: none; margin-top: 10px; } .GetStarted__list li::before { content: "•"; font-size: 17px; font-weight: bold; display: inline-block; width: 30px; margin-left: -30px; } @media (max-width: 1440px) { .GetStarted__list li { font-size: 1rem; line-height: 1.5; } } @media (max-width: 769px) { .GetStarted__list li { font-size: 1rem; } } .GetStarted__subheading { color: #13294b; font-size: 1.5rem; font-weight: bold; line-height: 1.5; margin-bottom: 60px; } @media (max-width: 1440px) { .GetStarted__subheading { font-size: 1.25rem; margin-bottom: 50px; text-align: center; } } @media (max-width: 769px) { .GetStarted__subheading { text-align: center; font-size: 1.25rem; margin-bottom: 40px; } } .GetStarted__customers-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; padding: 0; column-gap: 110px; row-gap: 20px; margin-bottom: 0 !important; } @media (max-width: 1440px) { .GetStarted__customers-wrapper { column-gap: 50px; } } .GetStarted__customers-wrapper .logo-wrapper__logo { margin: 0; } .GetStarted__customers-wrapper .logo-wrapper__logo:not(:last-child) { max-width: 120px !important; } .GetStarted__customers-wrapper .logo-wrapper__image--top { opacity: 0.5; } .GetStarted__form-container { background: radial-gradient(ellipse at center bottom, #A443F0 2.14%, #25116A 80%); display: flex; align-items: center; justify-content: center; height: 100%; padding: 50px; } @media (max-width: 769px) { .GetStarted__form-container { padding: 50px 10px; } } .GetStarted__form-wrapper { overflow: hidden; padding: 40px; width: 400px; background: rgb(var(--color-white)); border-radius: 5px; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } @media (max-width: 1440px) { .GetStarted__form-wrapper { padding: 30px 20px; } } .GetStarted__form-heading { max-width: 400px; color: #13294b; font-size: 24px; font-weight: 900; line-height: 1.19; margin: 0 auto 40px; text-align: center; } @media (max-width: 1440px) { .GetStarted__form-heading { font-size: 30px; margin: 0 auto 30px; } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .WelcomePage { width: 650px; display: flex; flex-direction: column; align-items: center; padding-top: 70px; padding-bottom: 30px; border-radius: 5px; background: rgb(var(--color-white)); border-top: solid 5px rgb(var(--color-primary-500)); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .WelcomePage__container { min-height: 100vh; min-width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: auto; } .WelcomePage__icon { margin-bottom: 2.5rem; } .WelcomePage__title { font-family: "Onest"; font-size: 22px; font-weight: 500; margin-bottom: 1rem; color: "Onest"; } .WelcomePage__subtitle { font-family: "Onest"; font-size: 16px; line-height: 22px; margin-bottom: 2rem; color: rgb(var(--color-gray-800)); width: 450px; text-align: center; } .WelcomePage__logo { margin-top: 5rem; }.maintenance-mode-page { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80vh; } .maintenance-mode-page h1 { font-size: 3em; font-weight: bold; margin: 20px; } .maintenance-mode-page h2 { font-size: 1.5em; font-weight: bold; margin: 5px; }:root { --toastify-color-light: #fff; --toastify-color-dark: #121212; --toastify-color-info: #3498db; --toastify-color-success: #07bc0c; --toastify-color-warning: #f1c40f; --toastify-color-error: hsl(6, 78%, 57%); --toastify-color-transparent: rgba(255, 255, 255, 0.7); --toastify-icon-color-info: var(--toastify-color-info); --toastify-icon-color-success: var(--toastify-color-success); --toastify-icon-color-warning: var(--toastify-color-warning); --toastify-icon-color-error: var(--toastify-color-error); --toastify-container-width: fit-content; --toastify-toast-width: 320px; --toastify-toast-offset: 16px; --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top)); --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right)); --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left)); --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom)); --toastify-toast-background: #fff; --toastify-toast-padding: 14px; --toastify-toast-min-height: 64px; --toastify-toast-max-height: 800px; --toastify-toast-bd-radius: 6px; --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); --toastify-font-family: sans-serif; --toastify-z-index: 9999; --toastify-text-color-light: #757575; --toastify-text-color-dark: #fff; /* Used only for colored theme */ --toastify-text-color-info: #fff; --toastify-text-color-success: #fff; --toastify-text-color-warning: #fff; --toastify-text-color-error: #fff; --toastify-spinner-color: #616161; --toastify-spinner-color-empty-area: #e0e0e0; --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); --toastify-color-progress-dark: #bb86fc; --toastify-color-progress-info: var(--toastify-color-info); --toastify-color-progress-success: var(--toastify-color-success); --toastify-color-progress-warning: var(--toastify-color-warning); --toastify-color-progress-error: var(--toastify-color-error); /* used to control the opacity of the progress trail */ --toastify-color-progress-bgo: 0.2; } .Toastify__toast-container { z-index: var(--toastify-z-index); -webkit-transform: translate3d(0, 0, var(--toastify-z-index)); position: fixed; width: var(--toastify-container-width); box-sizing: border-box; color: #fff; display: flex; flex-direction: column; } .Toastify__toast-container--top-left { top: var(--toastify-toast-top); left: var(--toastify-toast-left); } .Toastify__toast-container--top-center { top: var(--toastify-toast-top); left: 50%; transform: translateX(-50%); align-items: center; } .Toastify__toast-container--top-right { top: var(--toastify-toast-top); right: var(--toastify-toast-right); align-items: end; } .Toastify__toast-container--bottom-left { bottom: var(--toastify-toast-bottom); left: var(--toastify-toast-left); } .Toastify__toast-container--bottom-center { bottom: var(--toastify-toast-bottom); left: 50%; transform: translateX(-50%); align-items: center; } .Toastify__toast-container--bottom-right { bottom: var(--toastify-toast-bottom); right: var(--toastify-toast-right); align-items: end; } .Toastify__toast { --y: 0px; position: relative; touch-action: none; width: var(--toastify-toast-width); min-height: var(--toastify-toast-min-height); box-sizing: border-box; margin-bottom: 1rem; padding: var(--toastify-toast-padding); border-radius: var(--toastify-toast-bd-radius); box-shadow: var(--toastify-toast-shadow); max-height: var(--toastify-toast-max-height); font-family: var(--toastify-font-family); /* webkit only issue #791 */ z-index: 0; /* inner swag */ display: flex; flex: 1 auto; align-items: center; word-break: break-word; } @media only screen and (max-width: 480px) { .Toastify__toast-container { width: 100vw; left: env(safe-area-inset-left); margin: 0; } .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { top: env(safe-area-inset-top); transform: translateX(0); } .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right { bottom: env(safe-area-inset-bottom); transform: translateX(0); } .Toastify__toast-container--rtl { right: env(safe-area-inset-right); left: initial; } .Toastify__toast { --toastify-toast-width: 100%; margin-bottom: 0; border-radius: 0; } } .Toastify__toast-container[data-stacked='true'] { width: var(--toastify-toast-width); } @media only screen and (max-width: 480px) { .Toastify__toast-container[data-stacked='true'] { width: 100vw; } } .Toastify__toast--stacked { position: absolute; width: 100%; transform: translate3d(0, var(--y), 0) scale(var(--s)); transition: transform 0.3s; } .Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button { transition: opacity 0.1s; } .Toastify__toast--stacked[data-collapsed='false'] { overflow: visible; } .Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * { opacity: 0; } .Toastify__toast--stacked:after { content: ''; position: absolute; left: 0; right: 0; height: calc(var(--g) * 1px); bottom: 100%; } .Toastify__toast--stacked[data-pos='top'] { top: 0; } .Toastify__toast--stacked[data-pos='bot'] { bottom: 0; } .Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before { transform-origin: top; } .Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before { transform-origin: bottom; } .Toastify__toast--stacked:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: scaleY(3); z-index: -1; } .Toastify__toast--rtl { direction: rtl; } .Toastify__toast--close-on-click { cursor: pointer; } .Toastify__toast-icon { margin-inline-end: 10px; width: 22px; flex-shrink: 0; display: flex; } .Toastify--animate { animation-fill-mode: both; animation-duration: 0.5s; } .Toastify--animate-icon { animation-fill-mode: both; animation-duration: 0.3s; } .Toastify__toast-theme--dark { background: var(--toastify-color-dark); color: var(--toastify-text-color-dark); } .Toastify__toast-theme--light { background: var(--toastify-color-light); color: var(--toastify-text-color-light); } .Toastify__toast-theme--colored.Toastify__toast--default { background: var(--toastify-color-light); color: var(--toastify-text-color-light); } .Toastify__toast-theme--colored.Toastify__toast--info { color: var(--toastify-text-color-info); background: var(--toastify-color-info); } .Toastify__toast-theme--colored.Toastify__toast--success { color: var(--toastify-text-color-success); background: var(--toastify-color-success); } .Toastify__toast-theme--colored.Toastify__toast--warning { color: var(--toastify-text-color-warning); background: var(--toastify-color-warning); } .Toastify__toast-theme--colored.Toastify__toast--error { color: var(--toastify-text-color-error); background: var(--toastify-color-error); } .Toastify__progress-bar-theme--light { background: var(--toastify-color-progress-light); } .Toastify__progress-bar-theme--dark { background: var(--toastify-color-progress-dark); } .Toastify__progress-bar--info { background: var(--toastify-color-progress-info); } .Toastify__progress-bar--success { background: var(--toastify-color-progress-success); } .Toastify__progress-bar--warning { background: var(--toastify-color-progress-warning); } .Toastify__progress-bar--error { background: var(--toastify-color-progress-error); } .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error { background: var(--toastify-color-transparent); } .Toastify__close-button { color: #fff; position: absolute; top: 6px; right: 6px; background: transparent; outline: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: 0.3s ease; z-index: 1; } .Toastify__toast--rtl .Toastify__close-button { left: 6px; right: unset; } .Toastify__close-button--light { color: #000; opacity: 0.3; } .Toastify__close-button > svg { fill: currentColor; height: 16px; width: 14px; } .Toastify__close-button:hover, .Toastify__close-button:focus { opacity: 1; } @keyframes Toastify__trackProgress { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .Toastify__progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; transform-origin: left; } .Toastify__progress-bar--animated { animation: Toastify__trackProgress linear 1 forwards; } .Toastify__progress-bar--controlled { transition: transform 0.2s; } .Toastify__progress-bar--rtl { right: 0; left: initial; transform-origin: right; border-bottom-left-radius: initial; } .Toastify__progress-bar--wrp { position: absolute; overflow: hidden; bottom: 0; left: 0; width: 100%; height: 5px; border-bottom-left-radius: var(--toastify-toast-bd-radius); border-bottom-right-radius: var(--toastify-toast-bd-radius); } .Toastify__progress-bar--wrp[data-hidden='true'] { opacity: 0; } .Toastify__progress-bar--bg { opacity: var(--toastify-color-progress-bgo); width: 100%; height: 100%; } .Toastify__spinner { width: 20px; height: 20px; box-sizing: border-box; border: 2px solid; border-radius: 100%; border-color: var(--toastify-spinner-color-empty-area); border-right-color: var(--toastify-spinner-color); animation: Toastify__spin 0.65s linear infinite; } @keyframes Toastify__bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, var(--y), 0); } to { opacity: 0; transform: translate3d(2000px, var(--y), 0); } } @keyframes Toastify__bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { transform: none; } } @keyframes Toastify__bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, var(--y), 0); } to { opacity: 0; transform: translate3d(-2000px, var(--y), 0); } } @keyframes Toastify__bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes Toastify__bounceOutUp { 20% { transform: translate3d(0, calc(var(--y) - 10px), 0); } 40%, 45% { opacity: 1; transform: translate3d(0, calc(var(--y) + 20px), 0); } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } @keyframes Toastify__bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform: none; } } @keyframes Toastify__bounceOutDown { 20% { transform: translate3d(0, calc(var(--y) - 10px), 0); } 40%, 45% { opacity: 1; transform: translate3d(0, calc(var(--y) + 20px), 0); } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left { animation-name: Toastify__bounceInLeft; } .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right { animation-name: Toastify__bounceInRight; } .Toastify__bounce-enter--top-center { animation-name: Toastify__bounceInDown; } .Toastify__bounce-enter--bottom-center { animation-name: Toastify__bounceInUp; } .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left { animation-name: Toastify__bounceOutLeft; } .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right { animation-name: Toastify__bounceOutRight; } .Toastify__bounce-exit--top-center { animation-name: Toastify__bounceOutUp; } .Toastify__bounce-exit--bottom-center { animation-name: Toastify__bounceOutDown; } @keyframes Toastify__zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes Toastify__zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .Toastify__zoom-enter { animation-name: Toastify__zoomIn; } .Toastify__zoom-exit { animation-name: Toastify__zoomOut; } @keyframes Toastify__flipIn { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes Toastify__flipOut { from { transform: translate3d(0, var(--y), 0) perspective(400px); } 30% { transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .Toastify__flip-enter { animation-name: Toastify__flipIn; } .Toastify__flip-exit { animation-name: Toastify__flipOut; } @keyframes Toastify__slideInRight { from { transform: translate3d(110%, 0, 0); visibility: visible; } to { transform: translate3d(0, var(--y), 0); } } @keyframes Toastify__slideInLeft { from { transform: translate3d(-110%, 0, 0); visibility: visible; } to { transform: translate3d(0, var(--y), 0); } } @keyframes Toastify__slideInUp { from { transform: translate3d(0, 110%, 0); visibility: visible; } to { transform: translate3d(0, var(--y), 0); } } @keyframes Toastify__slideInDown { from { transform: translate3d(0, -110%, 0); visibility: visible; } to { transform: translate3d(0, var(--y), 0); } } @keyframes Toastify__slideOutRight { from { transform: translate3d(0, var(--y), 0); } to { visibility: hidden; transform: translate3d(110%, var(--y), 0); } } @keyframes Toastify__slideOutLeft { from { transform: translate3d(0, var(--y), 0); } to { visibility: hidden; transform: translate3d(-110%, var(--y), 0); } } @keyframes Toastify__slideOutDown { from { transform: translate3d(0, var(--y), 0); } to { visibility: hidden; transform: translate3d(0, 500px, 0); } } @keyframes Toastify__slideOutUp { from { transform: translate3d(0, var(--y), 0); } to { visibility: hidden; transform: translate3d(0, -500px, 0); } } .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left { animation-name: Toastify__slideInLeft; } .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right { animation-name: Toastify__slideInRight; } .Toastify__slide-enter--top-center { animation-name: Toastify__slideInDown; } .Toastify__slide-enter--bottom-center { animation-name: Toastify__slideInUp; } .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left { animation-name: Toastify__slideOutLeft; animation-timing-function: ease-in; animation-duration: 0.3s; } .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right { animation-name: Toastify__slideOutRight; animation-timing-function: ease-in; animation-duration: 0.3s; } .Toastify__slide-exit--top-center { animation-name: Toastify__slideOutUp; animation-timing-function: ease-in; animation-duration: 0.3s; } .Toastify__slide-exit--bottom-center { animation-name: Toastify__slideOutDown; animation-timing-function: ease-in; animation-duration: 0.3s; } @keyframes Toastify__spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .list-pagination li a, .list-pagination-dash3 li a { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ ::-webkit-scrollbar-button { display: none; } .pointer { cursor: pointer; } .pointer-bold-on-hover:hover { cursor: pointer; font-weight: bolder; } .pad-5 { padding: 5px; } .pad-10 { padding: 10px; } .pad-20 { padding: 20px; } .pad-5-top-bottom { padding-top: 5px; padding-bottom: 5px; } .pad-10-top-bottom { padding-top: 10px; padding-bottom: 10px; } .pad-10-top { padding-top: 10px; } .pad-0-top { padding-top: 0px; } .pad-5-right { padding-right: 5px; } .pad-20-top-bottom { padding-top: 20px; padding-bottom: 20px; } .pad-20-top { padding-top: 20px; } .margin-5 { margin: 5px; } .margin-10 { margin: 10px; } .margin-10-top { margin-top: 10px; } .margin-20-top { margin-top: 20px; } .margin-10-bottom { margin-bottom: 10px; } .margin-15-bottom { margin-bottom: 15px; } .margin-20-bottom { margin-bottom: 20px; } .margin-30-bottom { margin-bottom: 30px; } .margin-40-bottom { margin-bottom: 40px; } .margin-50-bottom { margin-bottom: 50px; } .margin-5-right { margin-right: 5px; } .margin-10-right { margin-right: 10px; } .margin-15-right { margin-right: 15px; } .margin-20-right { margin-right: 20px; } .margin-30-right { margin-right: 30px; } .margin-5-left { margin-left: 5px; } .margin-10-left { margin-left: 10px; } .margin-15-left { margin-left: 15px; } .margin-20-left { margin-left: 20px; } .margin-25-left { margin-left: 25px; } .margin-30-left { margin-left: 30px; } .no-margin { margin: 0; } .no-padding { padding: 0; } .max-width-none { max-width: none; } .inline { display: inline-block; } .border-gray { border: 1px solid rgb(var(--color-gray-500)); } .border-bottom-gray { border-bottom: 1px solid rgb(var(--color-gray-500)); } .border-bottom-gray-400 { border-bottom: 1px solid rgb(var(--color-gray-400)); } .border-bottom-gray-300 { border-bottom: 1px solid rgb(var(--color-gray-400)); } .border-bottom-gray-600 { border-bottom: 1px solid rgb(var(--color-gray-600)); } .border-top-gray-600 { border-top: 1px solid rgb(var(--color-gray-600)); } .border-top-gray { border-top: 1px solid rgb(var(--color-gray-500)); } .nomargin { margin: 0; } .margin-8-left-right { margin-left: 8px; margin-right: 8px; } .nopadding { padding: 0; } .background { margin: 0px 5px 0px 5px; } .square-height { height: 275px; } .square-height-2 { height: 133px; } .full-height { height: 100%; } .full-width { width: 100%; } .color-white { color: rgb(var(--color-white)); } .list-pagination { margin: 0px; display: flex; justify-content: center; text-decoration: none; } .list-pagination li a { color: rgb(var(--color-gray-500)); padding: 10px; letter-spacing: 0.03em; font-size: 10pt; } .list-pagination li { list-style-type: none; } .list-pagination li:hover { text-decoration: underline; cursor: pointer; } .list-pagination .active a { border-bottom: 3px solid rgb(var(--color-secondary-500)); } .hidden { visibility: hidden; } .active-tab { font-weight: bold; } .list-pagination-dash3 { margin: 0px; display: flex; justify-content: center; text-decoration: none; } .list-pagination-dash3 li { margin: 0 3px; list-style-type: none; } .list-pagination-dash3 li a { color: rgb(var(--color-gray-800)); padding: 8px 11px; letter-spacing: 0.03em; font-size: 10pt; } .list-pagination-dash3 li:hover { cursor: pointer; } .list-pagination-dash3 .active a { background: rgba(var(--color-soft-purple-600), 0.12); border-radius: 5px; color: rgba(var(--color-soft-purple-600), 0.7) !important; font-weight: 550; } .dark-mode .list-pagination-dash3 li a { color: rgb(var(--color-white)); } .dark-mode .list-pagination-dash3 .active a { background: rgba(var(--color-white), 0.15); color: rgb(var(--color-primary-400)) !important; } .hidden-dash3 { visibility: hidden; } .active-tab-dash3 { font-weight: bold; } .bg-primary-100 { background-color: rgb(var(--color-primary-100)); } .color-primary-100 { color: rgb(var(--color-primary-100)); } .fill-color-primary-100 { fill: rgb(var(--color-primary-100)); } .fill-color-primary-100--hoverable { fill: rgb(var(--color-primary-100)); } .fill-color-primary-100--hoverable:hover { fill: rgb(var(--color-primary-200)); } .stroke-color-primary-100 { stroke: rgb(var(--color-primary-100)); } .stroke-color-primary-100--hoverable { stroke: rgb(var(--color-primary-100)); } .stroke-color-primary-100--hoverable:hover { stroke: rgb(var(--color-primary-200)); } .border-color--primary-100 { border-color: rgb(var(--color-primary-100)) !important; } .bg-primary-200 { background-color: rgb(var(--color-primary-200)); } .color-primary-200 { color: rgb(var(--color-primary-200)); } .fill-color-primary-200 { fill: rgb(var(--color-primary-200)); } .fill-color-primary-200--hoverable { fill: rgb(var(--color-primary-200)); } .fill-color-primary-200--hoverable:hover { fill: rgb(var(--color-primary-300)); } .stroke-color-primary-200 { stroke: rgb(var(--color-primary-200)); } .stroke-color-primary-200--hoverable { stroke: rgb(var(--color-primary-200)); } .stroke-color-primary-200--hoverable:hover { stroke: rgb(var(--color-primary-300)); } .border-color--primary-200 { border-color: rgb(var(--color-primary-200)) !important; } .bg-primary-300 { background-color: rgb(var(--color-primary-300)); } .color-primary-300 { color: rgb(var(--color-primary-300)); } .fill-color-primary-300 { fill: rgb(var(--color-primary-300)); } .fill-color-primary-300--hoverable { fill: rgb(var(--color-primary-300)); } .fill-color-primary-300--hoverable:hover { fill: rgb(var(--color-primary-400)); } .stroke-color-primary-300 { stroke: rgb(var(--color-primary-300)); } .stroke-color-primary-300--hoverable { stroke: rgb(var(--color-primary-300)); } .stroke-color-primary-300--hoverable:hover { stroke: rgb(var(--color-primary-400)); } .border-color--primary-300 { border-color: rgb(var(--color-primary-300)) !important; } .bg-primary-400 { background-color: rgb(var(--color-primary-400)); } .color-primary-400 { color: rgb(var(--color-primary-400)); } .fill-color-primary-400 { fill: rgb(var(--color-primary-400)); } .fill-color-primary-400--hoverable { fill: rgb(var(--color-primary-400)); } .fill-color-primary-400--hoverable:hover { fill: rgb(var(--color-primary-500)); } .stroke-color-primary-400 { stroke: rgb(var(--color-primary-400)); } .stroke-color-primary-400--hoverable { stroke: rgb(var(--color-primary-400)); } .stroke-color-primary-400--hoverable:hover { stroke: rgb(var(--color-primary-500)); } .border-color--primary-400 { border-color: rgb(var(--color-primary-400)) !important; } .bg-primary-500 { background-color: rgb(var(--color-primary-500)); } .color-primary-500 { color: rgb(var(--color-primary-500)); } .fill-color-primary-500 { fill: rgb(var(--color-primary-500)); } .fill-color-primary-500--hoverable { fill: rgb(var(--color-primary-500)); } .fill-color-primary-500--hoverable:hover { fill: rgb(var(--color-primary-600)); } .stroke-color-primary-500 { stroke: rgb(var(--color-primary-500)); } .stroke-color-primary-500--hoverable { stroke: rgb(var(--color-primary-500)); } .stroke-color-primary-500--hoverable:hover { stroke: rgb(var(--color-primary-600)); } .border-color--primary-500 { border-color: rgb(var(--color-primary-500)) !important; } .bg-primary-600 { background-color: rgb(var(--color-primary-600)); } .color-primary-600 { color: rgb(var(--color-primary-600)); } .fill-color-primary-600 { fill: rgb(var(--color-primary-600)); } .fill-color-primary-600--hoverable { fill: rgb(var(--color-primary-600)); } .fill-color-primary-600--hoverable:hover { fill: rgb(var(--color-primary-700)); } .stroke-color-primary-600 { stroke: rgb(var(--color-primary-600)); } .stroke-color-primary-600--hoverable { stroke: rgb(var(--color-primary-600)); } .stroke-color-primary-600--hoverable:hover { stroke: rgb(var(--color-primary-700)); } .border-color--primary-600 { border-color: rgb(var(--color-primary-600)) !important; } .bg-primary-700 { background-color: rgb(var(--color-primary-700)); } .color-primary-700 { color: rgb(var(--color-primary-700)); } .fill-color-primary-700 { fill: rgb(var(--color-primary-700)); } .fill-color-primary-700--hoverable { fill: rgb(var(--color-primary-700)); } .fill-color-primary-700--hoverable:hover { fill: rgb(var(--color-primary-800)); } .stroke-color-primary-700 { stroke: rgb(var(--color-primary-700)); } .stroke-color-primary-700--hoverable { stroke: rgb(var(--color-primary-700)); } .stroke-color-primary-700--hoverable:hover { stroke: rgb(var(--color-primary-800)); } .border-color--primary-700 { border-color: rgb(var(--color-primary-700)) !important; } .bg-primary-800 { background-color: rgb(var(--color-primary-800)); } .color-primary-800 { color: rgb(var(--color-primary-800)); } .fill-color-primary-800 { fill: rgb(var(--color-primary-800)); } .fill-color-primary-800--hoverable { fill: rgb(var(--color-primary-800)); } .fill-color-primary-800--hoverable:hover { fill: rgb(var(--color-primary-900)); } .stroke-color-primary-800 { stroke: rgb(var(--color-primary-800)); } .stroke-color-primary-800--hoverable { stroke: rgb(var(--color-primary-800)); } .stroke-color-primary-800--hoverable:hover { stroke: rgb(var(--color-primary-900)); } .border-color--primary-800 { border-color: rgb(var(--color-primary-800)) !important; } .bg-secondary-100 { background-color: rgb(var(--color-secondary-100)); } .color-secondary-100 { color: rgb(var(--color-secondary-100)); } .fill-color-secondary-100 { fill: rgb(var(--color-secondary-100)); } .fill-color-secondary-100--hoverable { fill: rgb(var(--color-secondary-100)); } .fill-color-secondary-100--hoverable:hover { fill: rgb(var(--color-secondary-200)); } .stroke-color-secondary-100 { stroke: rgb(var(--color-secondary-100)); } .stroke-color-secondary-100--hoverable { stroke: rgb(var(--color-secondary-100)); } .stroke-color-secondary-100--hoverable:hover { stroke: rgb(var(--color-secondary-200)); } .border-color--secondary-100 { border-color: rgb(var(--color-secondary-100)) !important; } .bg-secondary-200 { background-color: rgb(var(--color-secondary-200)); } .color-secondary-200 { color: rgb(var(--color-secondary-200)); } .fill-color-secondary-200 { fill: rgb(var(--color-secondary-200)); } .fill-color-secondary-200--hoverable { fill: rgb(var(--color-secondary-200)); } .fill-color-secondary-200--hoverable:hover { fill: rgb(var(--color-secondary-300)); } .stroke-color-secondary-200 { stroke: rgb(var(--color-secondary-200)); } .stroke-color-secondary-200--hoverable { stroke: rgb(var(--color-secondary-200)); } .stroke-color-secondary-200--hoverable:hover { stroke: rgb(var(--color-secondary-300)); } .border-color--secondary-200 { border-color: rgb(var(--color-secondary-200)) !important; } .bg-secondary-300 { background-color: rgb(var(--color-secondary-300)); } .color-secondary-300 { color: rgb(var(--color-secondary-300)); } .fill-color-secondary-300 { fill: rgb(var(--color-secondary-300)); } .fill-color-secondary-300--hoverable { fill: rgb(var(--color-secondary-300)); } .fill-color-secondary-300--hoverable:hover { fill: rgb(var(--color-secondary-400)); } .stroke-color-secondary-300 { stroke: rgb(var(--color-secondary-300)); } .stroke-color-secondary-300--hoverable { stroke: rgb(var(--color-secondary-300)); } .stroke-color-secondary-300--hoverable:hover { stroke: rgb(var(--color-secondary-400)); } .border-color--secondary-300 { border-color: rgb(var(--color-secondary-300)) !important; } .bg-secondary-400 { background-color: rgb(var(--color-secondary-400)); } .color-secondary-400 { color: rgb(var(--color-secondary-400)); } .fill-color-secondary-400 { fill: rgb(var(--color-secondary-400)); } .fill-color-secondary-400--hoverable { fill: rgb(var(--color-secondary-400)); } .fill-color-secondary-400--hoverable:hover { fill: rgb(var(--color-secondary-500)); } .stroke-color-secondary-400 { stroke: rgb(var(--color-secondary-400)); } .stroke-color-secondary-400--hoverable { stroke: rgb(var(--color-secondary-400)); } .stroke-color-secondary-400--hoverable:hover { stroke: rgb(var(--color-secondary-500)); } .border-color--secondary-400 { border-color: rgb(var(--color-secondary-400)) !important; } .bg-secondary-500 { background-color: rgb(var(--color-secondary-500)); } .color-secondary-500 { color: rgb(var(--color-secondary-500)); } .fill-color-secondary-500 { fill: rgb(var(--color-secondary-500)); } .fill-color-secondary-500--hoverable { fill: rgb(var(--color-secondary-500)); } .fill-color-secondary-500--hoverable:hover { fill: rgb(var(--color-secondary-600)); } .stroke-color-secondary-500 { stroke: rgb(var(--color-secondary-500)); } .stroke-color-secondary-500--hoverable { stroke: rgb(var(--color-secondary-500)); } .stroke-color-secondary-500--hoverable:hover { stroke: rgb(var(--color-secondary-600)); } .border-color--secondary-500 { border-color: rgb(var(--color-secondary-500)) !important; } .bg-secondary-600 { background-color: rgb(var(--color-secondary-600)); } .color-secondary-600 { color: rgb(var(--color-secondary-600)); } .fill-color-secondary-600 { fill: rgb(var(--color-secondary-600)); } .fill-color-secondary-600--hoverable { fill: rgb(var(--color-secondary-600)); } .fill-color-secondary-600--hoverable:hover { fill: rgb(var(--color-secondary-700)); } .stroke-color-secondary-600 { stroke: rgb(var(--color-secondary-600)); } .stroke-color-secondary-600--hoverable { stroke: rgb(var(--color-secondary-600)); } .stroke-color-secondary-600--hoverable:hover { stroke: rgb(var(--color-secondary-700)); } .border-color--secondary-600 { border-color: rgb(var(--color-secondary-600)) !important; } .bg-secondary-700 { background-color: rgb(var(--color-secondary-700)); } .color-secondary-700 { color: rgb(var(--color-secondary-700)); } .fill-color-secondary-700 { fill: rgb(var(--color-secondary-700)); } .fill-color-secondary-700--hoverable { fill: rgb(var(--color-secondary-700)); } .fill-color-secondary-700--hoverable:hover { fill: rgb(var(--color-secondary-800)); } .stroke-color-secondary-700 { stroke: rgb(var(--color-secondary-700)); } .stroke-color-secondary-700--hoverable { stroke: rgb(var(--color-secondary-700)); } .stroke-color-secondary-700--hoverable:hover { stroke: rgb(var(--color-secondary-800)); } .border-color--secondary-700 { border-color: rgb(var(--color-secondary-700)) !important; } .bg-secondary-800 { background-color: rgb(var(--color-secondary-800)); } .color-secondary-800 { color: rgb(var(--color-secondary-800)); } .fill-color-secondary-800 { fill: rgb(var(--color-secondary-800)); } .fill-color-secondary-800--hoverable { fill: rgb(var(--color-secondary-800)); } .fill-color-secondary-800--hoverable:hover { fill: rgb(var(--color-secondary-900)); } .stroke-color-secondary-800 { stroke: rgb(var(--color-secondary-800)); } .stroke-color-secondary-800--hoverable { stroke: rgb(var(--color-secondary-800)); } .stroke-color-secondary-800--hoverable:hover { stroke: rgb(var(--color-secondary-900)); } .border-color--secondary-800 { border-color: rgb(var(--color-secondary-800)) !important; } .bg-gray-100 { background-color: rgb(var(--color-gray-100)); } .color-gray-100 { color: rgb(var(--color-gray-100)); } .fill-color-gray-100 { fill: rgb(var(--color-gray-100)); } .fill-color-gray-100--hoverable { fill: rgb(var(--color-gray-100)); } .fill-color-gray-100--hoverable:hover { fill: rgb(var(--color-gray-200)); } .stroke-color-gray-100 { stroke: rgb(var(--color-gray-100)); } .stroke-color-gray-100--hoverable { stroke: rgb(var(--color-gray-100)); } .stroke-color-gray-100--hoverable:hover { stroke: rgb(var(--color-gray-200)); } .border-color--gray-100 { border-color: rgb(var(--color-gray-100)) !important; } .bg-gray-200 { background-color: rgb(var(--color-gray-200)); } .color-gray-200 { color: rgb(var(--color-gray-200)); } .fill-color-gray-200 { fill: rgb(var(--color-gray-200)); } .fill-color-gray-200--hoverable { fill: rgb(var(--color-gray-200)); } .fill-color-gray-200--hoverable:hover { fill: rgb(var(--color-gray-300)); } .stroke-color-gray-200 { stroke: rgb(var(--color-gray-200)); } .stroke-color-gray-200--hoverable { stroke: rgb(var(--color-gray-200)); } .stroke-color-gray-200--hoverable:hover { stroke: rgb(var(--color-gray-300)); } .border-color--gray-200 { border-color: rgb(var(--color-gray-200)) !important; } .bg-gray-300 { background-color: rgb(var(--color-gray-300)); } .color-gray-300 { color: rgb(var(--color-gray-300)); } .fill-color-gray-300 { fill: rgb(var(--color-gray-300)); } .fill-color-gray-300--hoverable { fill: rgb(var(--color-gray-300)); } .fill-color-gray-300--hoverable:hover { fill: rgb(var(--color-gray-400)); } .stroke-color-gray-300 { stroke: rgb(var(--color-gray-300)); } .stroke-color-gray-300--hoverable { stroke: rgb(var(--color-gray-300)); } .stroke-color-gray-300--hoverable:hover { stroke: rgb(var(--color-gray-400)); } .border-color--gray-300 { border-color: rgb(var(--color-gray-300)) !important; } .bg-gray-400 { background-color: rgb(var(--color-gray-400)); } .color-gray-400 { color: rgb(var(--color-gray-400)); } .fill-color-gray-400 { fill: rgb(var(--color-gray-400)); } .fill-color-gray-400--hoverable { fill: rgb(var(--color-gray-400)); } .fill-color-gray-400--hoverable:hover { fill: rgb(var(--color-gray-500)); } .stroke-color-gray-400 { stroke: rgb(var(--color-gray-400)); } .stroke-color-gray-400--hoverable { stroke: rgb(var(--color-gray-400)); } .stroke-color-gray-400--hoverable:hover { stroke: rgb(var(--color-gray-500)); } .border-color--gray-400 { border-color: rgb(var(--color-gray-400)) !important; } .bg-gray-500 { background-color: rgb(var(--color-gray-500)); } .color-gray-500 { color: rgb(var(--color-gray-500)); } .fill-color-gray-500 { fill: rgb(var(--color-gray-500)); } .fill-color-gray-500--hoverable { fill: rgb(var(--color-gray-500)); } .fill-color-gray-500--hoverable:hover { fill: rgb(var(--color-gray-600)); } .stroke-color-gray-500 { stroke: rgb(var(--color-gray-500)); } .stroke-color-gray-500--hoverable { stroke: rgb(var(--color-gray-500)); } .stroke-color-gray-500--hoverable:hover { stroke: rgb(var(--color-gray-600)); } .border-color--gray-500 { border-color: rgb(var(--color-gray-500)) !important; } .bg-gray-600 { background-color: rgb(var(--color-gray-600)); } .color-gray-600 { color: rgb(var(--color-gray-600)); } .fill-color-gray-600 { fill: rgb(var(--color-gray-600)); } .fill-color-gray-600--hoverable { fill: rgb(var(--color-gray-600)); } .fill-color-gray-600--hoverable:hover { fill: rgb(var(--color-gray-700)); } .stroke-color-gray-600 { stroke: rgb(var(--color-gray-600)); } .stroke-color-gray-600--hoverable { stroke: rgb(var(--color-gray-600)); } .stroke-color-gray-600--hoverable:hover { stroke: rgb(var(--color-gray-700)); } .border-color--gray-600 { border-color: rgb(var(--color-gray-600)) !important; } .bg-gray-700 { background-color: rgb(var(--color-gray-700)); } .color-gray-700 { color: rgb(var(--color-gray-700)); } .fill-color-gray-700 { fill: rgb(var(--color-gray-700)); } .fill-color-gray-700--hoverable { fill: rgb(var(--color-gray-700)); } .fill-color-gray-700--hoverable:hover { fill: rgb(var(--color-gray-800)); } .stroke-color-gray-700 { stroke: rgb(var(--color-gray-700)); } .stroke-color-gray-700--hoverable { stroke: rgb(var(--color-gray-700)); } .stroke-color-gray-700--hoverable:hover { stroke: rgb(var(--color-gray-800)); } .border-color--gray-700 { border-color: rgb(var(--color-gray-700)) !important; } .bg-gray-800 { background-color: rgb(var(--color-gray-800)); } .color-gray-800 { color: rgb(var(--color-gray-800)); } .fill-color-gray-800 { fill: rgb(var(--color-gray-800)); } .fill-color-gray-800--hoverable { fill: rgb(var(--color-gray-800)); } .fill-color-gray-800--hoverable:hover { fill: rgb(var(--color-gray-900)); } .stroke-color-gray-800 { stroke: rgb(var(--color-gray-800)); } .stroke-color-gray-800--hoverable { stroke: rgb(var(--color-gray-800)); } .stroke-color-gray-800--hoverable:hover { stroke: rgb(var(--color-gray-900)); } .border-color--gray-800 { border-color: rgb(var(--color-gray-800)) !important; } .bg-white-100 { background-color: rgb(var(--color-white-100)); } .color-white-100 { color: rgb(var(--color-white-100)); } .fill-color-white-100 { fill: rgb(var(--color-white-100)); } .fill-color-white-100--hoverable { fill: rgb(var(--color-white-100)); } .fill-color-white-100--hoverable:hover { fill: rgb(var(--color-white-200)); } .stroke-color-white-100 { stroke: rgb(var(--color-white-100)); } .stroke-color-white-100--hoverable { stroke: rgb(var(--color-white-100)); } .stroke-color-white-100--hoverable:hover { stroke: rgb(var(--color-white-200)); } .border-color--white-100 { border-color: rgb(var(--color-white-100)) !important; } .bg-white-200 { background-color: rgb(var(--color-white-200)); } .color-white-200 { color: rgb(var(--color-white-200)); } .fill-color-white-200 { fill: rgb(var(--color-white-200)); } .fill-color-white-200--hoverable { fill: rgb(var(--color-white-200)); } .fill-color-white-200--hoverable:hover { fill: rgb(var(--color-white-300)); } .stroke-color-white-200 { stroke: rgb(var(--color-white-200)); } .stroke-color-white-200--hoverable { stroke: rgb(var(--color-white-200)); } .stroke-color-white-200--hoverable:hover { stroke: rgb(var(--color-white-300)); } .border-color--white-200 { border-color: rgb(var(--color-white-200)) !important; } .bg-white-300 { background-color: rgb(var(--color-white-300)); } .color-white-300 { color: rgb(var(--color-white-300)); } .fill-color-white-300 { fill: rgb(var(--color-white-300)); } .fill-color-white-300--hoverable { fill: rgb(var(--color-white-300)); } .fill-color-white-300--hoverable:hover { fill: rgb(var(--color-white-400)); } .stroke-color-white-300 { stroke: rgb(var(--color-white-300)); } .stroke-color-white-300--hoverable { stroke: rgb(var(--color-white-300)); } .stroke-color-white-300--hoverable:hover { stroke: rgb(var(--color-white-400)); } .border-color--white-300 { border-color: rgb(var(--color-white-300)) !important; } .bg-white-400 { background-color: rgb(var(--color-white-400)); } .color-white-400 { color: rgb(var(--color-white-400)); } .fill-color-white-400 { fill: rgb(var(--color-white-400)); } .fill-color-white-400--hoverable { fill: rgb(var(--color-white-400)); } .fill-color-white-400--hoverable:hover { fill: rgb(var(--color-white-500)); } .stroke-color-white-400 { stroke: rgb(var(--color-white-400)); } .stroke-color-white-400--hoverable { stroke: rgb(var(--color-white-400)); } .stroke-color-white-400--hoverable:hover { stroke: rgb(var(--color-white-500)); } .border-color--white-400 { border-color: rgb(var(--color-white-400)) !important; } .bg-white-500 { background-color: rgb(var(--color-white-500)); } .color-white-500 { color: rgb(var(--color-white-500)); } .fill-color-white-500 { fill: rgb(var(--color-white-500)); } .fill-color-white-500--hoverable { fill: rgb(var(--color-white-500)); } .fill-color-white-500--hoverable:hover { fill: rgb(var(--color-white-600)); } .stroke-color-white-500 { stroke: rgb(var(--color-white-500)); } .stroke-color-white-500--hoverable { stroke: rgb(var(--color-white-500)); } .stroke-color-white-500--hoverable:hover { stroke: rgb(var(--color-white-600)); } .border-color--white-500 { border-color: rgb(var(--color-white-500)) !important; } .bg-white-600 { background-color: rgb(var(--color-white-600)); } .color-white-600 { color: rgb(var(--color-white-600)); } .fill-color-white-600 { fill: rgb(var(--color-white-600)); } .fill-color-white-600--hoverable { fill: rgb(var(--color-white-600)); } .fill-color-white-600--hoverable:hover { fill: rgb(var(--color-white-700)); } .stroke-color-white-600 { stroke: rgb(var(--color-white-600)); } .stroke-color-white-600--hoverable { stroke: rgb(var(--color-white-600)); } .stroke-color-white-600--hoverable:hover { stroke: rgb(var(--color-white-700)); } .border-color--white-600 { border-color: rgb(var(--color-white-600)) !important; } .bg-white-700 { background-color: rgb(var(--color-white-700)); } .color-white-700 { color: rgb(var(--color-white-700)); } .fill-color-white-700 { fill: rgb(var(--color-white-700)); } .fill-color-white-700--hoverable { fill: rgb(var(--color-white-700)); } .fill-color-white-700--hoverable:hover { fill: rgb(var(--color-white-800)); } .stroke-color-white-700 { stroke: rgb(var(--color-white-700)); } .stroke-color-white-700--hoverable { stroke: rgb(var(--color-white-700)); } .stroke-color-white-700--hoverable:hover { stroke: rgb(var(--color-white-800)); } .border-color--white-700 { border-color: rgb(var(--color-white-700)) !important; } .bg-white-800 { background-color: rgb(var(--color-white-800)); } .color-white-800 { color: rgb(var(--color-white-800)); } .fill-color-white-800 { fill: rgb(var(--color-white-800)); } .fill-color-white-800--hoverable { fill: rgb(var(--color-white-800)); } .fill-color-white-800--hoverable:hover { fill: rgb(var(--color-white-900)); } .stroke-color-white-800 { stroke: rgb(var(--color-white-800)); } .stroke-color-white-800--hoverable { stroke: rgb(var(--color-white-800)); } .stroke-color-white-800--hoverable:hover { stroke: rgb(var(--color-white-900)); } .border-color--white-800 { border-color: rgb(var(--color-white-800)) !important; } .bg-black-100 { background-color: rgb(var(--color-black-100)); } .color-black-100 { color: rgb(var(--color-black-100)); } .fill-color-black-100 { fill: rgb(var(--color-black-100)); } .fill-color-black-100--hoverable { fill: rgb(var(--color-black-100)); } .fill-color-black-100--hoverable:hover { fill: rgb(var(--color-black-200)); } .stroke-color-black-100 { stroke: rgb(var(--color-black-100)); } .stroke-color-black-100--hoverable { stroke: rgb(var(--color-black-100)); } .stroke-color-black-100--hoverable:hover { stroke: rgb(var(--color-black-200)); } .border-color--black-100 { border-color: rgb(var(--color-black-100)) !important; } .bg-black-200 { background-color: rgb(var(--color-black-200)); } .color-black-200 { color: rgb(var(--color-black-200)); } .fill-color-black-200 { fill: rgb(var(--color-black-200)); } .fill-color-black-200--hoverable { fill: rgb(var(--color-black-200)); } .fill-color-black-200--hoverable:hover { fill: rgb(var(--color-black-300)); } .stroke-color-black-200 { stroke: rgb(var(--color-black-200)); } .stroke-color-black-200--hoverable { stroke: rgb(var(--color-black-200)); } .stroke-color-black-200--hoverable:hover { stroke: rgb(var(--color-black-300)); } .border-color--black-200 { border-color: rgb(var(--color-black-200)) !important; } .bg-black-300 { background-color: rgb(var(--color-black-300)); } .color-black-300 { color: rgb(var(--color-black-300)); } .fill-color-black-300 { fill: rgb(var(--color-black-300)); } .fill-color-black-300--hoverable { fill: rgb(var(--color-black-300)); } .fill-color-black-300--hoverable:hover { fill: rgb(var(--color-black-400)); } .stroke-color-black-300 { stroke: rgb(var(--color-black-300)); } .stroke-color-black-300--hoverable { stroke: rgb(var(--color-black-300)); } .stroke-color-black-300--hoverable:hover { stroke: rgb(var(--color-black-400)); } .border-color--black-300 { border-color: rgb(var(--color-black-300)) !important; } .bg-black-400 { background-color: rgb(var(--color-black-400)); } .color-black-400 { color: rgb(var(--color-black-400)); } .fill-color-black-400 { fill: rgb(var(--color-black-400)); } .fill-color-black-400--hoverable { fill: rgb(var(--color-black-400)); } .fill-color-black-400--hoverable:hover { fill: rgb(var(--color-black-500)); } .stroke-color-black-400 { stroke: rgb(var(--color-black-400)); } .stroke-color-black-400--hoverable { stroke: rgb(var(--color-black-400)); } .stroke-color-black-400--hoverable:hover { stroke: rgb(var(--color-black-500)); } .border-color--black-400 { border-color: rgb(var(--color-black-400)) !important; } .bg-black-500 { background-color: rgb(var(--color-black-500)); } .color-black-500 { color: rgb(var(--color-black-500)); } .fill-color-black-500 { fill: rgb(var(--color-black-500)); } .fill-color-black-500--hoverable { fill: rgb(var(--color-black-500)); } .fill-color-black-500--hoverable:hover { fill: rgb(var(--color-black-600)); } .stroke-color-black-500 { stroke: rgb(var(--color-black-500)); } .stroke-color-black-500--hoverable { stroke: rgb(var(--color-black-500)); } .stroke-color-black-500--hoverable:hover { stroke: rgb(var(--color-black-600)); } .border-color--black-500 { border-color: rgb(var(--color-black-500)) !important; } .bg-black-600 { background-color: rgb(var(--color-black-600)); } .color-black-600 { color: rgb(var(--color-black-600)); } .fill-color-black-600 { fill: rgb(var(--color-black-600)); } .fill-color-black-600--hoverable { fill: rgb(var(--color-black-600)); } .fill-color-black-600--hoverable:hover { fill: rgb(var(--color-black-700)); } .stroke-color-black-600 { stroke: rgb(var(--color-black-600)); } .stroke-color-black-600--hoverable { stroke: rgb(var(--color-black-600)); } .stroke-color-black-600--hoverable:hover { stroke: rgb(var(--color-black-700)); } .border-color--black-600 { border-color: rgb(var(--color-black-600)) !important; } .bg-black-700 { background-color: rgb(var(--color-black-700)); } .color-black-700 { color: rgb(var(--color-black-700)); } .fill-color-black-700 { fill: rgb(var(--color-black-700)); } .fill-color-black-700--hoverable { fill: rgb(var(--color-black-700)); } .fill-color-black-700--hoverable:hover { fill: rgb(var(--color-black-800)); } .stroke-color-black-700 { stroke: rgb(var(--color-black-700)); } .stroke-color-black-700--hoverable { stroke: rgb(var(--color-black-700)); } .stroke-color-black-700--hoverable:hover { stroke: rgb(var(--color-black-800)); } .border-color--black-700 { border-color: rgb(var(--color-black-700)) !important; } .bg-black-800 { background-color: rgb(var(--color-black-800)); } .color-black-800 { color: rgb(var(--color-black-800)); } .fill-color-black-800 { fill: rgb(var(--color-black-800)); } .fill-color-black-800--hoverable { fill: rgb(var(--color-black-800)); } .fill-color-black-800--hoverable:hover { fill: rgb(var(--color-black-900)); } .stroke-color-black-800 { stroke: rgb(var(--color-black-800)); } .stroke-color-black-800--hoverable { stroke: rgb(var(--color-black-800)); } .stroke-color-black-800--hoverable:hover { stroke: rgb(var(--color-black-900)); } .border-color--black-800 { border-color: rgb(var(--color-black-800)) !important; } .bg-error-100 { background-color: rgb(var(--color-error-100)); } .color-error-100 { color: rgb(var(--color-error-100)); } .fill-color-error-100 { fill: rgb(var(--color-error-100)); } .fill-color-error-100--hoverable { fill: rgb(var(--color-error-100)); } .fill-color-error-100--hoverable:hover { fill: rgb(var(--color-error-200)); } .stroke-color-error-100 { stroke: rgb(var(--color-error-100)); } .stroke-color-error-100--hoverable { stroke: rgb(var(--color-error-100)); } .stroke-color-error-100--hoverable:hover { stroke: rgb(var(--color-error-200)); } .border-color--error-100 { border-color: rgb(var(--color-error-100)) !important; } .bg-error-200 { background-color: rgb(var(--color-error-200)); } .color-error-200 { color: rgb(var(--color-error-200)); } .fill-color-error-200 { fill: rgb(var(--color-error-200)); } .fill-color-error-200--hoverable { fill: rgb(var(--color-error-200)); } .fill-color-error-200--hoverable:hover { fill: rgb(var(--color-error-300)); } .stroke-color-error-200 { stroke: rgb(var(--color-error-200)); } .stroke-color-error-200--hoverable { stroke: rgb(var(--color-error-200)); } .stroke-color-error-200--hoverable:hover { stroke: rgb(var(--color-error-300)); } .border-color--error-200 { border-color: rgb(var(--color-error-200)) !important; } .bg-error-300 { background-color: rgb(var(--color-error-300)); } .color-error-300 { color: rgb(var(--color-error-300)); } .fill-color-error-300 { fill: rgb(var(--color-error-300)); } .fill-color-error-300--hoverable { fill: rgb(var(--color-error-300)); } .fill-color-error-300--hoverable:hover { fill: rgb(var(--color-error-400)); } .stroke-color-error-300 { stroke: rgb(var(--color-error-300)); } .stroke-color-error-300--hoverable { stroke: rgb(var(--color-error-300)); } .stroke-color-error-300--hoverable:hover { stroke: rgb(var(--color-error-400)); } .border-color--error-300 { border-color: rgb(var(--color-error-300)) !important; } .bg-error-400 { background-color: rgb(var(--color-error-400)); } .color-error-400 { color: rgb(var(--color-error-400)); } .fill-color-error-400 { fill: rgb(var(--color-error-400)); } .fill-color-error-400--hoverable { fill: rgb(var(--color-error-400)); } .fill-color-error-400--hoverable:hover { fill: rgb(var(--color-error-500)); } .stroke-color-error-400 { stroke: rgb(var(--color-error-400)); } .stroke-color-error-400--hoverable { stroke: rgb(var(--color-error-400)); } .stroke-color-error-400--hoverable:hover { stroke: rgb(var(--color-error-500)); } .border-color--error-400 { border-color: rgb(var(--color-error-400)) !important; } .bg-error-500 { background-color: rgb(var(--color-error-500)); } .color-error-500 { color: rgb(var(--color-error-500)); } .fill-color-error-500 { fill: rgb(var(--color-error-500)); } .fill-color-error-500--hoverable { fill: rgb(var(--color-error-500)); } .fill-color-error-500--hoverable:hover { fill: rgb(var(--color-error-600)); } .stroke-color-error-500 { stroke: rgb(var(--color-error-500)); } .stroke-color-error-500--hoverable { stroke: rgb(var(--color-error-500)); } .stroke-color-error-500--hoverable:hover { stroke: rgb(var(--color-error-600)); } .border-color--error-500 { border-color: rgb(var(--color-error-500)) !important; } .bg-error-600 { background-color: rgb(var(--color-error-600)); } .color-error-600 { color: rgb(var(--color-error-600)); } .fill-color-error-600 { fill: rgb(var(--color-error-600)); } .fill-color-error-600--hoverable { fill: rgb(var(--color-error-600)); } .fill-color-error-600--hoverable:hover { fill: rgb(var(--color-error-700)); } .stroke-color-error-600 { stroke: rgb(var(--color-error-600)); } .stroke-color-error-600--hoverable { stroke: rgb(var(--color-error-600)); } .stroke-color-error-600--hoverable:hover { stroke: rgb(var(--color-error-700)); } .border-color--error-600 { border-color: rgb(var(--color-error-600)) !important; } .bg-error-700 { background-color: rgb(var(--color-error-700)); } .color-error-700 { color: rgb(var(--color-error-700)); } .fill-color-error-700 { fill: rgb(var(--color-error-700)); } .fill-color-error-700--hoverable { fill: rgb(var(--color-error-700)); } .fill-color-error-700--hoverable:hover { fill: rgb(var(--color-error-800)); } .stroke-color-error-700 { stroke: rgb(var(--color-error-700)); } .stroke-color-error-700--hoverable { stroke: rgb(var(--color-error-700)); } .stroke-color-error-700--hoverable:hover { stroke: rgb(var(--color-error-800)); } .border-color--error-700 { border-color: rgb(var(--color-error-700)) !important; } .bg-error-800 { background-color: rgb(var(--color-error-800)); } .color-error-800 { color: rgb(var(--color-error-800)); } .fill-color-error-800 { fill: rgb(var(--color-error-800)); } .fill-color-error-800--hoverable { fill: rgb(var(--color-error-800)); } .fill-color-error-800--hoverable:hover { fill: rgb(var(--color-error-900)); } .stroke-color-error-800 { stroke: rgb(var(--color-error-800)); } .stroke-color-error-800--hoverable { stroke: rgb(var(--color-error-800)); } .stroke-color-error-800--hoverable:hover { stroke: rgb(var(--color-error-900)); } .border-color--error-800 { border-color: rgb(var(--color-error-800)) !important; } .bg-success-100 { background-color: rgb(var(--color-success-100)); } .color-success-100 { color: rgb(var(--color-success-100)); } .fill-color-success-100 { fill: rgb(var(--color-success-100)); } .fill-color-success-100--hoverable { fill: rgb(var(--color-success-100)); } .fill-color-success-100--hoverable:hover { fill: rgb(var(--color-success-200)); } .stroke-color-success-100 { stroke: rgb(var(--color-success-100)); } .stroke-color-success-100--hoverable { stroke: rgb(var(--color-success-100)); } .stroke-color-success-100--hoverable:hover { stroke: rgb(var(--color-success-200)); } .border-color--success-100 { border-color: rgb(var(--color-success-100)) !important; } .bg-success-200 { background-color: rgb(var(--color-success-200)); } .color-success-200 { color: rgb(var(--color-success-200)); } .fill-color-success-200 { fill: rgb(var(--color-success-200)); } .fill-color-success-200--hoverable { fill: rgb(var(--color-success-200)); } .fill-color-success-200--hoverable:hover { fill: rgb(var(--color-success-300)); } .stroke-color-success-200 { stroke: rgb(var(--color-success-200)); } .stroke-color-success-200--hoverable { stroke: rgb(var(--color-success-200)); } .stroke-color-success-200--hoverable:hover { stroke: rgb(var(--color-success-300)); } .border-color--success-200 { border-color: rgb(var(--color-success-200)) !important; } .bg-success-300 { background-color: rgb(var(--color-success-300)); } .color-success-300 { color: rgb(var(--color-success-300)); } .fill-color-success-300 { fill: rgb(var(--color-success-300)); } .fill-color-success-300--hoverable { fill: rgb(var(--color-success-300)); } .fill-color-success-300--hoverable:hover { fill: rgb(var(--color-success-400)); } .stroke-color-success-300 { stroke: rgb(var(--color-success-300)); } .stroke-color-success-300--hoverable { stroke: rgb(var(--color-success-300)); } .stroke-color-success-300--hoverable:hover { stroke: rgb(var(--color-success-400)); } .border-color--success-300 { border-color: rgb(var(--color-success-300)) !important; } .bg-success-400 { background-color: rgb(var(--color-success-400)); } .color-success-400 { color: rgb(var(--color-success-400)); } .fill-color-success-400 { fill: rgb(var(--color-success-400)); } .fill-color-success-400--hoverable { fill: rgb(var(--color-success-400)); } .fill-color-success-400--hoverable:hover { fill: rgb(var(--color-success-500)); } .stroke-color-success-400 { stroke: rgb(var(--color-success-400)); } .stroke-color-success-400--hoverable { stroke: rgb(var(--color-success-400)); } .stroke-color-success-400--hoverable:hover { stroke: rgb(var(--color-success-500)); } .border-color--success-400 { border-color: rgb(var(--color-success-400)) !important; } .bg-success-500 { background-color: rgb(var(--color-success-500)); } .color-success-500 { color: rgb(var(--color-success-500)); } .fill-color-success-500 { fill: rgb(var(--color-success-500)); } .fill-color-success-500--hoverable { fill: rgb(var(--color-success-500)); } .fill-color-success-500--hoverable:hover { fill: rgb(var(--color-success-600)); } .stroke-color-success-500 { stroke: rgb(var(--color-success-500)); } .stroke-color-success-500--hoverable { stroke: rgb(var(--color-success-500)); } .stroke-color-success-500--hoverable:hover { stroke: rgb(var(--color-success-600)); } .border-color--success-500 { border-color: rgb(var(--color-success-500)) !important; } .bg-success-600 { background-color: rgb(var(--color-success-600)); } .color-success-600 { color: rgb(var(--color-success-600)); } .fill-color-success-600 { fill: rgb(var(--color-success-600)); } .fill-color-success-600--hoverable { fill: rgb(var(--color-success-600)); } .fill-color-success-600--hoverable:hover { fill: rgb(var(--color-success-700)); } .stroke-color-success-600 { stroke: rgb(var(--color-success-600)); } .stroke-color-success-600--hoverable { stroke: rgb(var(--color-success-600)); } .stroke-color-success-600--hoverable:hover { stroke: rgb(var(--color-success-700)); } .border-color--success-600 { border-color: rgb(var(--color-success-600)) !important; } .bg-success-700 { background-color: rgb(var(--color-success-700)); } .color-success-700 { color: rgb(var(--color-success-700)); } .fill-color-success-700 { fill: rgb(var(--color-success-700)); } .fill-color-success-700--hoverable { fill: rgb(var(--color-success-700)); } .fill-color-success-700--hoverable:hover { fill: rgb(var(--color-success-800)); } .stroke-color-success-700 { stroke: rgb(var(--color-success-700)); } .stroke-color-success-700--hoverable { stroke: rgb(var(--color-success-700)); } .stroke-color-success-700--hoverable:hover { stroke: rgb(var(--color-success-800)); } .border-color--success-700 { border-color: rgb(var(--color-success-700)) !important; } .bg-success-800 { background-color: rgb(var(--color-success-800)); } .color-success-800 { color: rgb(var(--color-success-800)); } .fill-color-success-800 { fill: rgb(var(--color-success-800)); } .fill-color-success-800--hoverable { fill: rgb(var(--color-success-800)); } .fill-color-success-800--hoverable:hover { fill: rgb(var(--color-success-900)); } .stroke-color-success-800 { stroke: rgb(var(--color-success-800)); } .stroke-color-success-800--hoverable { stroke: rgb(var(--color-success-800)); } .stroke-color-success-800--hoverable:hover { stroke: rgb(var(--color-success-900)); } .border-color--success-800 { border-color: rgb(var(--color-success-800)) !important; } .bg-warning-100 { background-color: rgb(var(--color-warning-100)); } .color-warning-100 { color: rgb(var(--color-warning-100)); } .fill-color-warning-100 { fill: rgb(var(--color-warning-100)); } .fill-color-warning-100--hoverable { fill: rgb(var(--color-warning-100)); } .fill-color-warning-100--hoverable:hover { fill: rgb(var(--color-warning-200)); } .stroke-color-warning-100 { stroke: rgb(var(--color-warning-100)); } .stroke-color-warning-100--hoverable { stroke: rgb(var(--color-warning-100)); } .stroke-color-warning-100--hoverable:hover { stroke: rgb(var(--color-warning-200)); } .border-color--warning-100 { border-color: rgb(var(--color-warning-100)) !important; } .bg-warning-200 { background-color: rgb(var(--color-warning-200)); } .color-warning-200 { color: rgb(var(--color-warning-200)); } .fill-color-warning-200 { fill: rgb(var(--color-warning-200)); } .fill-color-warning-200--hoverable { fill: rgb(var(--color-warning-200)); } .fill-color-warning-200--hoverable:hover { fill: rgb(var(--color-warning-300)); } .stroke-color-warning-200 { stroke: rgb(var(--color-warning-200)); } .stroke-color-warning-200--hoverable { stroke: rgb(var(--color-warning-200)); } .stroke-color-warning-200--hoverable:hover { stroke: rgb(var(--color-warning-300)); } .border-color--warning-200 { border-color: rgb(var(--color-warning-200)) !important; } .bg-warning-300 { background-color: rgb(var(--color-warning-300)); } .color-warning-300 { color: rgb(var(--color-warning-300)); } .fill-color-warning-300 { fill: rgb(var(--color-warning-300)); } .fill-color-warning-300--hoverable { fill: rgb(var(--color-warning-300)); } .fill-color-warning-300--hoverable:hover { fill: rgb(var(--color-warning-400)); } .stroke-color-warning-300 { stroke: rgb(var(--color-warning-300)); } .stroke-color-warning-300--hoverable { stroke: rgb(var(--color-warning-300)); } .stroke-color-warning-300--hoverable:hover { stroke: rgb(var(--color-warning-400)); } .border-color--warning-300 { border-color: rgb(var(--color-warning-300)) !important; } .bg-warning-400 { background-color: rgb(var(--color-warning-400)); } .color-warning-400 { color: rgb(var(--color-warning-400)); } .fill-color-warning-400 { fill: rgb(var(--color-warning-400)); } .fill-color-warning-400--hoverable { fill: rgb(var(--color-warning-400)); } .fill-color-warning-400--hoverable:hover { fill: rgb(var(--color-warning-500)); } .stroke-color-warning-400 { stroke: rgb(var(--color-warning-400)); } .stroke-color-warning-400--hoverable { stroke: rgb(var(--color-warning-400)); } .stroke-color-warning-400--hoverable:hover { stroke: rgb(var(--color-warning-500)); } .border-color--warning-400 { border-color: rgb(var(--color-warning-400)) !important; } .bg-warning-500 { background-color: rgb(var(--color-warning-500)); } .color-warning-500 { color: rgb(var(--color-warning-500)); } .fill-color-warning-500 { fill: rgb(var(--color-warning-500)); } .fill-color-warning-500--hoverable { fill: rgb(var(--color-warning-500)); } .fill-color-warning-500--hoverable:hover { fill: rgb(var(--color-warning-600)); } .stroke-color-warning-500 { stroke: rgb(var(--color-warning-500)); } .stroke-color-warning-500--hoverable { stroke: rgb(var(--color-warning-500)); } .stroke-color-warning-500--hoverable:hover { stroke: rgb(var(--color-warning-600)); } .border-color--warning-500 { border-color: rgb(var(--color-warning-500)) !important; } .bg-warning-600 { background-color: rgb(var(--color-warning-600)); } .color-warning-600 { color: rgb(var(--color-warning-600)); } .fill-color-warning-600 { fill: rgb(var(--color-warning-600)); } .fill-color-warning-600--hoverable { fill: rgb(var(--color-warning-600)); } .fill-color-warning-600--hoverable:hover { fill: rgb(var(--color-warning-700)); } .stroke-color-warning-600 { stroke: rgb(var(--color-warning-600)); } .stroke-color-warning-600--hoverable { stroke: rgb(var(--color-warning-600)); } .stroke-color-warning-600--hoverable:hover { stroke: rgb(var(--color-warning-700)); } .border-color--warning-600 { border-color: rgb(var(--color-warning-600)) !important; } .bg-warning-700 { background-color: rgb(var(--color-warning-700)); } .color-warning-700 { color: rgb(var(--color-warning-700)); } .fill-color-warning-700 { fill: rgb(var(--color-warning-700)); } .fill-color-warning-700--hoverable { fill: rgb(var(--color-warning-700)); } .fill-color-warning-700--hoverable:hover { fill: rgb(var(--color-warning-800)); } .stroke-color-warning-700 { stroke: rgb(var(--color-warning-700)); } .stroke-color-warning-700--hoverable { stroke: rgb(var(--color-warning-700)); } .stroke-color-warning-700--hoverable:hover { stroke: rgb(var(--color-warning-800)); } .border-color--warning-700 { border-color: rgb(var(--color-warning-700)) !important; } .bg-warning-800 { background-color: rgb(var(--color-warning-800)); } .color-warning-800 { color: rgb(var(--color-warning-800)); } .fill-color-warning-800 { fill: rgb(var(--color-warning-800)); } .fill-color-warning-800--hoverable { fill: rgb(var(--color-warning-800)); } .fill-color-warning-800--hoverable:hover { fill: rgb(var(--color-warning-900)); } .stroke-color-warning-800 { stroke: rgb(var(--color-warning-800)); } .stroke-color-warning-800--hoverable { stroke: rgb(var(--color-warning-800)); } .stroke-color-warning-800--hoverable:hover { stroke: rgb(var(--color-warning-900)); } .border-color--warning-800 { border-color: rgb(var(--color-warning-800)) !important; } .bg-teal-100 { background-color: rgb(var(--color-teal-100)); } .color-teal-100 { color: rgb(var(--color-teal-100)); } .fill-color-teal-100 { fill: rgb(var(--color-teal-100)); } .fill-color-teal-100--hoverable { fill: rgb(var(--color-teal-100)); } .fill-color-teal-100--hoverable:hover { fill: rgb(var(--color-teal-200)); } .stroke-color-teal-100 { stroke: rgb(var(--color-teal-100)); } .stroke-color-teal-100--hoverable { stroke: rgb(var(--color-teal-100)); } .stroke-color-teal-100--hoverable:hover { stroke: rgb(var(--color-teal-200)); } .border-color--teal-100 { border-color: rgb(var(--color-teal-100)) !important; } .bg-teal-200 { background-color: rgb(var(--color-teal-200)); } .color-teal-200 { color: rgb(var(--color-teal-200)); } .fill-color-teal-200 { fill: rgb(var(--color-teal-200)); } .fill-color-teal-200--hoverable { fill: rgb(var(--color-teal-200)); } .fill-color-teal-200--hoverable:hover { fill: rgb(var(--color-teal-300)); } .stroke-color-teal-200 { stroke: rgb(var(--color-teal-200)); } .stroke-color-teal-200--hoverable { stroke: rgb(var(--color-teal-200)); } .stroke-color-teal-200--hoverable:hover { stroke: rgb(var(--color-teal-300)); } .border-color--teal-200 { border-color: rgb(var(--color-teal-200)) !important; } .bg-teal-300 { background-color: rgb(var(--color-teal-300)); } .color-teal-300 { color: rgb(var(--color-teal-300)); } .fill-color-teal-300 { fill: rgb(var(--color-teal-300)); } .fill-color-teal-300--hoverable { fill: rgb(var(--color-teal-300)); } .fill-color-teal-300--hoverable:hover { fill: rgb(var(--color-teal-400)); } .stroke-color-teal-300 { stroke: rgb(var(--color-teal-300)); } .stroke-color-teal-300--hoverable { stroke: rgb(var(--color-teal-300)); } .stroke-color-teal-300--hoverable:hover { stroke: rgb(var(--color-teal-400)); } .border-color--teal-300 { border-color: rgb(var(--color-teal-300)) !important; } .bg-teal-400 { background-color: rgb(var(--color-teal-400)); } .color-teal-400 { color: rgb(var(--color-teal-400)); } .fill-color-teal-400 { fill: rgb(var(--color-teal-400)); } .fill-color-teal-400--hoverable { fill: rgb(var(--color-teal-400)); } .fill-color-teal-400--hoverable:hover { fill: rgb(var(--color-teal-500)); } .stroke-color-teal-400 { stroke: rgb(var(--color-teal-400)); } .stroke-color-teal-400--hoverable { stroke: rgb(var(--color-teal-400)); } .stroke-color-teal-400--hoverable:hover { stroke: rgb(var(--color-teal-500)); } .border-color--teal-400 { border-color: rgb(var(--color-teal-400)) !important; } .bg-teal-500 { background-color: rgb(var(--color-teal-500)); } .color-teal-500 { color: rgb(var(--color-teal-500)); } .fill-color-teal-500 { fill: rgb(var(--color-teal-500)); } .fill-color-teal-500--hoverable { fill: rgb(var(--color-teal-500)); } .fill-color-teal-500--hoverable:hover { fill: rgb(var(--color-teal-600)); } .stroke-color-teal-500 { stroke: rgb(var(--color-teal-500)); } .stroke-color-teal-500--hoverable { stroke: rgb(var(--color-teal-500)); } .stroke-color-teal-500--hoverable:hover { stroke: rgb(var(--color-teal-600)); } .border-color--teal-500 { border-color: rgb(var(--color-teal-500)) !important; } .bg-teal-600 { background-color: rgb(var(--color-teal-600)); } .color-teal-600 { color: rgb(var(--color-teal-600)); } .fill-color-teal-600 { fill: rgb(var(--color-teal-600)); } .fill-color-teal-600--hoverable { fill: rgb(var(--color-teal-600)); } .fill-color-teal-600--hoverable:hover { fill: rgb(var(--color-teal-700)); } .stroke-color-teal-600 { stroke: rgb(var(--color-teal-600)); } .stroke-color-teal-600--hoverable { stroke: rgb(var(--color-teal-600)); } .stroke-color-teal-600--hoverable:hover { stroke: rgb(var(--color-teal-700)); } .border-color--teal-600 { border-color: rgb(var(--color-teal-600)) !important; } .bg-teal-700 { background-color: rgb(var(--color-teal-700)); } .color-teal-700 { color: rgb(var(--color-teal-700)); } .fill-color-teal-700 { fill: rgb(var(--color-teal-700)); } .fill-color-teal-700--hoverable { fill: rgb(var(--color-teal-700)); } .fill-color-teal-700--hoverable:hover { fill: rgb(var(--color-teal-800)); } .stroke-color-teal-700 { stroke: rgb(var(--color-teal-700)); } .stroke-color-teal-700--hoverable { stroke: rgb(var(--color-teal-700)); } .stroke-color-teal-700--hoverable:hover { stroke: rgb(var(--color-teal-800)); } .border-color--teal-700 { border-color: rgb(var(--color-teal-700)) !important; } .bg-teal-800 { background-color: rgb(var(--color-teal-800)); } .color-teal-800 { color: rgb(var(--color-teal-800)); } .fill-color-teal-800 { fill: rgb(var(--color-teal-800)); } .fill-color-teal-800--hoverable { fill: rgb(var(--color-teal-800)); } .fill-color-teal-800--hoverable:hover { fill: rgb(var(--color-teal-900)); } .stroke-color-teal-800 { stroke: rgb(var(--color-teal-800)); } .stroke-color-teal-800--hoverable { stroke: rgb(var(--color-teal-800)); } .stroke-color-teal-800--hoverable:hover { stroke: rgb(var(--color-teal-900)); } .border-color--teal-800 { border-color: rgb(var(--color-teal-800)) !important; } .bg-extra-red-100 { background-color: rgb(var(--color-extra-red-100)); } .color-extra-red-100 { color: rgb(var(--color-extra-red-100)); } .fill-color-extra-red-100 { fill: rgb(var(--color-extra-red-100)); } .fill-color-extra-red-100--hoverable { fill: rgb(var(--color-extra-red-100)); } .fill-color-extra-red-100--hoverable:hover { fill: rgb(var(--color-extra-red-200)); } .stroke-color-extra-red-100 { stroke: rgb(var(--color-extra-red-100)); } .stroke-color-extra-red-100--hoverable { stroke: rgb(var(--color-extra-red-100)); } .stroke-color-extra-red-100--hoverable:hover { stroke: rgb(var(--color-extra-red-200)); } .border-color--extra-red-100 { border-color: rgb(var(--color-extra-red-100)) !important; } .bg-extra-red-200 { background-color: rgb(var(--color-extra-red-200)); } .color-extra-red-200 { color: rgb(var(--color-extra-red-200)); } .fill-color-extra-red-200 { fill: rgb(var(--color-extra-red-200)); } .fill-color-extra-red-200--hoverable { fill: rgb(var(--color-extra-red-200)); } .fill-color-extra-red-200--hoverable:hover { fill: rgb(var(--color-extra-red-300)); } .stroke-color-extra-red-200 { stroke: rgb(var(--color-extra-red-200)); } .stroke-color-extra-red-200--hoverable { stroke: rgb(var(--color-extra-red-200)); } .stroke-color-extra-red-200--hoverable:hover { stroke: rgb(var(--color-extra-red-300)); } .border-color--extra-red-200 { border-color: rgb(var(--color-extra-red-200)) !important; } .bg-extra-red-300 { background-color: rgb(var(--color-extra-red-300)); } .color-extra-red-300 { color: rgb(var(--color-extra-red-300)); } .fill-color-extra-red-300 { fill: rgb(var(--color-extra-red-300)); } .fill-color-extra-red-300--hoverable { fill: rgb(var(--color-extra-red-300)); } .fill-color-extra-red-300--hoverable:hover { fill: rgb(var(--color-extra-red-400)); } .stroke-color-extra-red-300 { stroke: rgb(var(--color-extra-red-300)); } .stroke-color-extra-red-300--hoverable { stroke: rgb(var(--color-extra-red-300)); } .stroke-color-extra-red-300--hoverable:hover { stroke: rgb(var(--color-extra-red-400)); } .border-color--extra-red-300 { border-color: rgb(var(--color-extra-red-300)) !important; } .bg-extra-red-400 { background-color: rgb(var(--color-extra-red-400)); } .color-extra-red-400 { color: rgb(var(--color-extra-red-400)); } .fill-color-extra-red-400 { fill: rgb(var(--color-extra-red-400)); } .fill-color-extra-red-400--hoverable { fill: rgb(var(--color-extra-red-400)); } .fill-color-extra-red-400--hoverable:hover { fill: rgb(var(--color-extra-red-500)); } .stroke-color-extra-red-400 { stroke: rgb(var(--color-extra-red-400)); } .stroke-color-extra-red-400--hoverable { stroke: rgb(var(--color-extra-red-400)); } .stroke-color-extra-red-400--hoverable:hover { stroke: rgb(var(--color-extra-red-500)); } .border-color--extra-red-400 { border-color: rgb(var(--color-extra-red-400)) !important; } .bg-extra-red-500 { background-color: rgb(var(--color-extra-red-500)); } .color-extra-red-500 { color: rgb(var(--color-extra-red-500)); } .fill-color-extra-red-500 { fill: rgb(var(--color-extra-red-500)); } .fill-color-extra-red-500--hoverable { fill: rgb(var(--color-extra-red-500)); } .fill-color-extra-red-500--hoverable:hover { fill: rgb(var(--color-extra-red-600)); } .stroke-color-extra-red-500 { stroke: rgb(var(--color-extra-red-500)); } .stroke-color-extra-red-500--hoverable { stroke: rgb(var(--color-extra-red-500)); } .stroke-color-extra-red-500--hoverable:hover { stroke: rgb(var(--color-extra-red-600)); } .border-color--extra-red-500 { border-color: rgb(var(--color-extra-red-500)) !important; } .bg-extra-red-600 { background-color: rgb(var(--color-extra-red-600)); } .color-extra-red-600 { color: rgb(var(--color-extra-red-600)); } .fill-color-extra-red-600 { fill: rgb(var(--color-extra-red-600)); } .fill-color-extra-red-600--hoverable { fill: rgb(var(--color-extra-red-600)); } .fill-color-extra-red-600--hoverable:hover { fill: rgb(var(--color-extra-red-700)); } .stroke-color-extra-red-600 { stroke: rgb(var(--color-extra-red-600)); } .stroke-color-extra-red-600--hoverable { stroke: rgb(var(--color-extra-red-600)); } .stroke-color-extra-red-600--hoverable:hover { stroke: rgb(var(--color-extra-red-700)); } .border-color--extra-red-600 { border-color: rgb(var(--color-extra-red-600)) !important; } .bg-extra-red-700 { background-color: rgb(var(--color-extra-red-700)); } .color-extra-red-700 { color: rgb(var(--color-extra-red-700)); } .fill-color-extra-red-700 { fill: rgb(var(--color-extra-red-700)); } .fill-color-extra-red-700--hoverable { fill: rgb(var(--color-extra-red-700)); } .fill-color-extra-red-700--hoverable:hover { fill: rgb(var(--color-extra-red-800)); } .stroke-color-extra-red-700 { stroke: rgb(var(--color-extra-red-700)); } .stroke-color-extra-red-700--hoverable { stroke: rgb(var(--color-extra-red-700)); } .stroke-color-extra-red-700--hoverable:hover { stroke: rgb(var(--color-extra-red-800)); } .border-color--extra-red-700 { border-color: rgb(var(--color-extra-red-700)) !important; } .bg-extra-red-800 { background-color: rgb(var(--color-extra-red-800)); } .color-extra-red-800 { color: rgb(var(--color-extra-red-800)); } .fill-color-extra-red-800 { fill: rgb(var(--color-extra-red-800)); } .fill-color-extra-red-800--hoverable { fill: rgb(var(--color-extra-red-800)); } .fill-color-extra-red-800--hoverable:hover { fill: rgb(var(--color-extra-red-900)); } .stroke-color-extra-red-800 { stroke: rgb(var(--color-extra-red-800)); } .stroke-color-extra-red-800--hoverable { stroke: rgb(var(--color-extra-red-800)); } .stroke-color-extra-red-800--hoverable:hover { stroke: rgb(var(--color-extra-red-900)); } .border-color--extra-red-800 { border-color: rgb(var(--color-extra-red-800)) !important; } .bg-extra-orange-100 { background-color: rgb(var(--color-extra-orange-100)); } .color-extra-orange-100 { color: rgb(var(--color-extra-orange-100)); } .fill-color-extra-orange-100 { fill: rgb(var(--color-extra-orange-100)); } .fill-color-extra-orange-100--hoverable { fill: rgb(var(--color-extra-orange-100)); } .fill-color-extra-orange-100--hoverable:hover { fill: rgb(var(--color-extra-orange-200)); } .stroke-color-extra-orange-100 { stroke: rgb(var(--color-extra-orange-100)); } .stroke-color-extra-orange-100--hoverable { stroke: rgb(var(--color-extra-orange-100)); } .stroke-color-extra-orange-100--hoverable:hover { stroke: rgb(var(--color-extra-orange-200)); } .border-color--extra-orange-100 { border-color: rgb(var(--color-extra-orange-100)) !important; } .bg-extra-orange-200 { background-color: rgb(var(--color-extra-orange-200)); } .color-extra-orange-200 { color: rgb(var(--color-extra-orange-200)); } .fill-color-extra-orange-200 { fill: rgb(var(--color-extra-orange-200)); } .fill-color-extra-orange-200--hoverable { fill: rgb(var(--color-extra-orange-200)); } .fill-color-extra-orange-200--hoverable:hover { fill: rgb(var(--color-extra-orange-300)); } .stroke-color-extra-orange-200 { stroke: rgb(var(--color-extra-orange-200)); } .stroke-color-extra-orange-200--hoverable { stroke: rgb(var(--color-extra-orange-200)); } .stroke-color-extra-orange-200--hoverable:hover { stroke: rgb(var(--color-extra-orange-300)); } .border-color--extra-orange-200 { border-color: rgb(var(--color-extra-orange-200)) !important; } .bg-extra-orange-300 { background-color: rgb(var(--color-extra-orange-300)); } .color-extra-orange-300 { color: rgb(var(--color-extra-orange-300)); } .fill-color-extra-orange-300 { fill: rgb(var(--color-extra-orange-300)); } .fill-color-extra-orange-300--hoverable { fill: rgb(var(--color-extra-orange-300)); } .fill-color-extra-orange-300--hoverable:hover { fill: rgb(var(--color-extra-orange-400)); } .stroke-color-extra-orange-300 { stroke: rgb(var(--color-extra-orange-300)); } .stroke-color-extra-orange-300--hoverable { stroke: rgb(var(--color-extra-orange-300)); } .stroke-color-extra-orange-300--hoverable:hover { stroke: rgb(var(--color-extra-orange-400)); } .border-color--extra-orange-300 { border-color: rgb(var(--color-extra-orange-300)) !important; } .bg-extra-orange-400 { background-color: rgb(var(--color-extra-orange-400)); } .color-extra-orange-400 { color: rgb(var(--color-extra-orange-400)); } .fill-color-extra-orange-400 { fill: rgb(var(--color-extra-orange-400)); } .fill-color-extra-orange-400--hoverable { fill: rgb(var(--color-extra-orange-400)); } .fill-color-extra-orange-400--hoverable:hover { fill: rgb(var(--color-extra-orange-500)); } .stroke-color-extra-orange-400 { stroke: rgb(var(--color-extra-orange-400)); } .stroke-color-extra-orange-400--hoverable { stroke: rgb(var(--color-extra-orange-400)); } .stroke-color-extra-orange-400--hoverable:hover { stroke: rgb(var(--color-extra-orange-500)); } .border-color--extra-orange-400 { border-color: rgb(var(--color-extra-orange-400)) !important; } .bg-extra-orange-500 { background-color: rgb(var(--color-extra-orange-500)); } .color-extra-orange-500 { color: rgb(var(--color-extra-orange-500)); } .fill-color-extra-orange-500 { fill: rgb(var(--color-extra-orange-500)); } .fill-color-extra-orange-500--hoverable { fill: rgb(var(--color-extra-orange-500)); } .fill-color-extra-orange-500--hoverable:hover { fill: rgb(var(--color-extra-orange-600)); } .stroke-color-extra-orange-500 { stroke: rgb(var(--color-extra-orange-500)); } .stroke-color-extra-orange-500--hoverable { stroke: rgb(var(--color-extra-orange-500)); } .stroke-color-extra-orange-500--hoverable:hover { stroke: rgb(var(--color-extra-orange-600)); } .border-color--extra-orange-500 { border-color: rgb(var(--color-extra-orange-500)) !important; } .bg-extra-orange-600 { background-color: rgb(var(--color-extra-orange-600)); } .color-extra-orange-600 { color: rgb(var(--color-extra-orange-600)); } .fill-color-extra-orange-600 { fill: rgb(var(--color-extra-orange-600)); } .fill-color-extra-orange-600--hoverable { fill: rgb(var(--color-extra-orange-600)); } .fill-color-extra-orange-600--hoverable:hover { fill: rgb(var(--color-extra-orange-700)); } .stroke-color-extra-orange-600 { stroke: rgb(var(--color-extra-orange-600)); } .stroke-color-extra-orange-600--hoverable { stroke: rgb(var(--color-extra-orange-600)); } .stroke-color-extra-orange-600--hoverable:hover { stroke: rgb(var(--color-extra-orange-700)); } .border-color--extra-orange-600 { border-color: rgb(var(--color-extra-orange-600)) !important; } .bg-extra-orange-700 { background-color: rgb(var(--color-extra-orange-700)); } .color-extra-orange-700 { color: rgb(var(--color-extra-orange-700)); } .fill-color-extra-orange-700 { fill: rgb(var(--color-extra-orange-700)); } .fill-color-extra-orange-700--hoverable { fill: rgb(var(--color-extra-orange-700)); } .fill-color-extra-orange-700--hoverable:hover { fill: rgb(var(--color-extra-orange-800)); } .stroke-color-extra-orange-700 { stroke: rgb(var(--color-extra-orange-700)); } .stroke-color-extra-orange-700--hoverable { stroke: rgb(var(--color-extra-orange-700)); } .stroke-color-extra-orange-700--hoverable:hover { stroke: rgb(var(--color-extra-orange-800)); } .border-color--extra-orange-700 { border-color: rgb(var(--color-extra-orange-700)) !important; } .bg-extra-orange-800 { background-color: rgb(var(--color-extra-orange-800)); } .color-extra-orange-800 { color: rgb(var(--color-extra-orange-800)); } .fill-color-extra-orange-800 { fill: rgb(var(--color-extra-orange-800)); } .fill-color-extra-orange-800--hoverable { fill: rgb(var(--color-extra-orange-800)); } .fill-color-extra-orange-800--hoverable:hover { fill: rgb(var(--color-extra-orange-900)); } .stroke-color-extra-orange-800 { stroke: rgb(var(--color-extra-orange-800)); } .stroke-color-extra-orange-800--hoverable { stroke: rgb(var(--color-extra-orange-800)); } .stroke-color-extra-orange-800--hoverable:hover { stroke: rgb(var(--color-extra-orange-900)); } .border-color--extra-orange-800 { border-color: rgb(var(--color-extra-orange-800)) !important; } .bg-extra-yellow-100 { background-color: rgb(var(--color-extra-yellow-100)); } .color-extra-yellow-100 { color: rgb(var(--color-extra-yellow-100)); } .fill-color-extra-yellow-100 { fill: rgb(var(--color-extra-yellow-100)); } .fill-color-extra-yellow-100--hoverable { fill: rgb(var(--color-extra-yellow-100)); } .fill-color-extra-yellow-100--hoverable:hover { fill: rgb(var(--color-extra-yellow-200)); } .stroke-color-extra-yellow-100 { stroke: rgb(var(--color-extra-yellow-100)); } .stroke-color-extra-yellow-100--hoverable { stroke: rgb(var(--color-extra-yellow-100)); } .stroke-color-extra-yellow-100--hoverable:hover { stroke: rgb(var(--color-extra-yellow-200)); } .border-color--extra-yellow-100 { border-color: rgb(var(--color-extra-yellow-100)) !important; } .bg-extra-yellow-200 { background-color: rgb(var(--color-extra-yellow-200)); } .color-extra-yellow-200 { color: rgb(var(--color-extra-yellow-200)); } .fill-color-extra-yellow-200 { fill: rgb(var(--color-extra-yellow-200)); } .fill-color-extra-yellow-200--hoverable { fill: rgb(var(--color-extra-yellow-200)); } .fill-color-extra-yellow-200--hoverable:hover { fill: rgb(var(--color-extra-yellow-300)); } .stroke-color-extra-yellow-200 { stroke: rgb(var(--color-extra-yellow-200)); } .stroke-color-extra-yellow-200--hoverable { stroke: rgb(var(--color-extra-yellow-200)); } .stroke-color-extra-yellow-200--hoverable:hover { stroke: rgb(var(--color-extra-yellow-300)); } .border-color--extra-yellow-200 { border-color: rgb(var(--color-extra-yellow-200)) !important; } .bg-extra-yellow-300 { background-color: rgb(var(--color-extra-yellow-300)); } .color-extra-yellow-300 { color: rgb(var(--color-extra-yellow-300)); } .fill-color-extra-yellow-300 { fill: rgb(var(--color-extra-yellow-300)); } .fill-color-extra-yellow-300--hoverable { fill: rgb(var(--color-extra-yellow-300)); } .fill-color-extra-yellow-300--hoverable:hover { fill: rgb(var(--color-extra-yellow-400)); } .stroke-color-extra-yellow-300 { stroke: rgb(var(--color-extra-yellow-300)); } .stroke-color-extra-yellow-300--hoverable { stroke: rgb(var(--color-extra-yellow-300)); } .stroke-color-extra-yellow-300--hoverable:hover { stroke: rgb(var(--color-extra-yellow-400)); } .border-color--extra-yellow-300 { border-color: rgb(var(--color-extra-yellow-300)) !important; } .bg-extra-yellow-400 { background-color: rgb(var(--color-extra-yellow-400)); } .color-extra-yellow-400 { color: rgb(var(--color-extra-yellow-400)); } .fill-color-extra-yellow-400 { fill: rgb(var(--color-extra-yellow-400)); } .fill-color-extra-yellow-400--hoverable { fill: rgb(var(--color-extra-yellow-400)); } .fill-color-extra-yellow-400--hoverable:hover { fill: rgb(var(--color-extra-yellow-500)); } .stroke-color-extra-yellow-400 { stroke: rgb(var(--color-extra-yellow-400)); } .stroke-color-extra-yellow-400--hoverable { stroke: rgb(var(--color-extra-yellow-400)); } .stroke-color-extra-yellow-400--hoverable:hover { stroke: rgb(var(--color-extra-yellow-500)); } .border-color--extra-yellow-400 { border-color: rgb(var(--color-extra-yellow-400)) !important; } .bg-extra-yellow-500 { background-color: rgb(var(--color-extra-yellow-500)); } .color-extra-yellow-500 { color: rgb(var(--color-extra-yellow-500)); } .fill-color-extra-yellow-500 { fill: rgb(var(--color-extra-yellow-500)); } .fill-color-extra-yellow-500--hoverable { fill: rgb(var(--color-extra-yellow-500)); } .fill-color-extra-yellow-500--hoverable:hover { fill: rgb(var(--color-extra-yellow-600)); } .stroke-color-extra-yellow-500 { stroke: rgb(var(--color-extra-yellow-500)); } .stroke-color-extra-yellow-500--hoverable { stroke: rgb(var(--color-extra-yellow-500)); } .stroke-color-extra-yellow-500--hoverable:hover { stroke: rgb(var(--color-extra-yellow-600)); } .border-color--extra-yellow-500 { border-color: rgb(var(--color-extra-yellow-500)) !important; } .bg-extra-yellow-600 { background-color: rgb(var(--color-extra-yellow-600)); } .color-extra-yellow-600 { color: rgb(var(--color-extra-yellow-600)); } .fill-color-extra-yellow-600 { fill: rgb(var(--color-extra-yellow-600)); } .fill-color-extra-yellow-600--hoverable { fill: rgb(var(--color-extra-yellow-600)); } .fill-color-extra-yellow-600--hoverable:hover { fill: rgb(var(--color-extra-yellow-700)); } .stroke-color-extra-yellow-600 { stroke: rgb(var(--color-extra-yellow-600)); } .stroke-color-extra-yellow-600--hoverable { stroke: rgb(var(--color-extra-yellow-600)); } .stroke-color-extra-yellow-600--hoverable:hover { stroke: rgb(var(--color-extra-yellow-700)); } .border-color--extra-yellow-600 { border-color: rgb(var(--color-extra-yellow-600)) !important; } .bg-extra-yellow-700 { background-color: rgb(var(--color-extra-yellow-700)); } .color-extra-yellow-700 { color: rgb(var(--color-extra-yellow-700)); } .fill-color-extra-yellow-700 { fill: rgb(var(--color-extra-yellow-700)); } .fill-color-extra-yellow-700--hoverable { fill: rgb(var(--color-extra-yellow-700)); } .fill-color-extra-yellow-700--hoverable:hover { fill: rgb(var(--color-extra-yellow-800)); } .stroke-color-extra-yellow-700 { stroke: rgb(var(--color-extra-yellow-700)); } .stroke-color-extra-yellow-700--hoverable { stroke: rgb(var(--color-extra-yellow-700)); } .stroke-color-extra-yellow-700--hoverable:hover { stroke: rgb(var(--color-extra-yellow-800)); } .border-color--extra-yellow-700 { border-color: rgb(var(--color-extra-yellow-700)) !important; } .bg-extra-yellow-800 { background-color: rgb(var(--color-extra-yellow-800)); } .color-extra-yellow-800 { color: rgb(var(--color-extra-yellow-800)); } .fill-color-extra-yellow-800 { fill: rgb(var(--color-extra-yellow-800)); } .fill-color-extra-yellow-800--hoverable { fill: rgb(var(--color-extra-yellow-800)); } .fill-color-extra-yellow-800--hoverable:hover { fill: rgb(var(--color-extra-yellow-900)); } .stroke-color-extra-yellow-800 { stroke: rgb(var(--color-extra-yellow-800)); } .stroke-color-extra-yellow-800--hoverable { stroke: rgb(var(--color-extra-yellow-800)); } .stroke-color-extra-yellow-800--hoverable:hover { stroke: rgb(var(--color-extra-yellow-900)); } .border-color--extra-yellow-800 { border-color: rgb(var(--color-extra-yellow-800)) !important; } .bg-extra-green-100 { background-color: rgb(var(--color-extra-green-100)); } .color-extra-green-100 { color: rgb(var(--color-extra-green-100)); } .fill-color-extra-green-100 { fill: rgb(var(--color-extra-green-100)); } .fill-color-extra-green-100--hoverable { fill: rgb(var(--color-extra-green-100)); } .fill-color-extra-green-100--hoverable:hover { fill: rgb(var(--color-extra-green-200)); } .stroke-color-extra-green-100 { stroke: rgb(var(--color-extra-green-100)); } .stroke-color-extra-green-100--hoverable { stroke: rgb(var(--color-extra-green-100)); } .stroke-color-extra-green-100--hoverable:hover { stroke: rgb(var(--color-extra-green-200)); } .border-color--extra-green-100 { border-color: rgb(var(--color-extra-green-100)) !important; } .bg-extra-green-200 { background-color: rgb(var(--color-extra-green-200)); } .color-extra-green-200 { color: rgb(var(--color-extra-green-200)); } .fill-color-extra-green-200 { fill: rgb(var(--color-extra-green-200)); } .fill-color-extra-green-200--hoverable { fill: rgb(var(--color-extra-green-200)); } .fill-color-extra-green-200--hoverable:hover { fill: rgb(var(--color-extra-green-300)); } .stroke-color-extra-green-200 { stroke: rgb(var(--color-extra-green-200)); } .stroke-color-extra-green-200--hoverable { stroke: rgb(var(--color-extra-green-200)); } .stroke-color-extra-green-200--hoverable:hover { stroke: rgb(var(--color-extra-green-300)); } .border-color--extra-green-200 { border-color: rgb(var(--color-extra-green-200)) !important; } .bg-extra-green-300 { background-color: rgb(var(--color-extra-green-300)); } .color-extra-green-300 { color: rgb(var(--color-extra-green-300)); } .fill-color-extra-green-300 { fill: rgb(var(--color-extra-green-300)); } .fill-color-extra-green-300--hoverable { fill: rgb(var(--color-extra-green-300)); } .fill-color-extra-green-300--hoverable:hover { fill: rgb(var(--color-extra-green-400)); } .stroke-color-extra-green-300 { stroke: rgb(var(--color-extra-green-300)); } .stroke-color-extra-green-300--hoverable { stroke: rgb(var(--color-extra-green-300)); } .stroke-color-extra-green-300--hoverable:hover { stroke: rgb(var(--color-extra-green-400)); } .border-color--extra-green-300 { border-color: rgb(var(--color-extra-green-300)) !important; } .bg-extra-green-400 { background-color: rgb(var(--color-extra-green-400)); } .color-extra-green-400 { color: rgb(var(--color-extra-green-400)); } .fill-color-extra-green-400 { fill: rgb(var(--color-extra-green-400)); } .fill-color-extra-green-400--hoverable { fill: rgb(var(--color-extra-green-400)); } .fill-color-extra-green-400--hoverable:hover { fill: rgb(var(--color-extra-green-500)); } .stroke-color-extra-green-400 { stroke: rgb(var(--color-extra-green-400)); } .stroke-color-extra-green-400--hoverable { stroke: rgb(var(--color-extra-green-400)); } .stroke-color-extra-green-400--hoverable:hover { stroke: rgb(var(--color-extra-green-500)); } .border-color--extra-green-400 { border-color: rgb(var(--color-extra-green-400)) !important; } .bg-extra-green-500 { background-color: rgb(var(--color-extra-green-500)); } .color-extra-green-500 { color: rgb(var(--color-extra-green-500)); } .fill-color-extra-green-500 { fill: rgb(var(--color-extra-green-500)); } .fill-color-extra-green-500--hoverable { fill: rgb(var(--color-extra-green-500)); } .fill-color-extra-green-500--hoverable:hover { fill: rgb(var(--color-extra-green-600)); } .stroke-color-extra-green-500 { stroke: rgb(var(--color-extra-green-500)); } .stroke-color-extra-green-500--hoverable { stroke: rgb(var(--color-extra-green-500)); } .stroke-color-extra-green-500--hoverable:hover { stroke: rgb(var(--color-extra-green-600)); } .border-color--extra-green-500 { border-color: rgb(var(--color-extra-green-500)) !important; } .bg-extra-green-600 { background-color: rgb(var(--color-extra-green-600)); } .color-extra-green-600 { color: rgb(var(--color-extra-green-600)); } .fill-color-extra-green-600 { fill: rgb(var(--color-extra-green-600)); } .fill-color-extra-green-600--hoverable { fill: rgb(var(--color-extra-green-600)); } .fill-color-extra-green-600--hoverable:hover { fill: rgb(var(--color-extra-green-700)); } .stroke-color-extra-green-600 { stroke: rgb(var(--color-extra-green-600)); } .stroke-color-extra-green-600--hoverable { stroke: rgb(var(--color-extra-green-600)); } .stroke-color-extra-green-600--hoverable:hover { stroke: rgb(var(--color-extra-green-700)); } .border-color--extra-green-600 { border-color: rgb(var(--color-extra-green-600)) !important; } .bg-extra-green-700 { background-color: rgb(var(--color-extra-green-700)); } .color-extra-green-700 { color: rgb(var(--color-extra-green-700)); } .fill-color-extra-green-700 { fill: rgb(var(--color-extra-green-700)); } .fill-color-extra-green-700--hoverable { fill: rgb(var(--color-extra-green-700)); } .fill-color-extra-green-700--hoverable:hover { fill: rgb(var(--color-extra-green-800)); } .stroke-color-extra-green-700 { stroke: rgb(var(--color-extra-green-700)); } .stroke-color-extra-green-700--hoverable { stroke: rgb(var(--color-extra-green-700)); } .stroke-color-extra-green-700--hoverable:hover { stroke: rgb(var(--color-extra-green-800)); } .border-color--extra-green-700 { border-color: rgb(var(--color-extra-green-700)) !important; } .bg-extra-green-800 { background-color: rgb(var(--color-extra-green-800)); } .color-extra-green-800 { color: rgb(var(--color-extra-green-800)); } .fill-color-extra-green-800 { fill: rgb(var(--color-extra-green-800)); } .fill-color-extra-green-800--hoverable { fill: rgb(var(--color-extra-green-800)); } .fill-color-extra-green-800--hoverable:hover { fill: rgb(var(--color-extra-green-900)); } .stroke-color-extra-green-800 { stroke: rgb(var(--color-extra-green-800)); } .stroke-color-extra-green-800--hoverable { stroke: rgb(var(--color-extra-green-800)); } .stroke-color-extra-green-800--hoverable:hover { stroke: rgb(var(--color-extra-green-900)); } .border-color--extra-green-800 { border-color: rgb(var(--color-extra-green-800)) !important; } .bg-extra-blue-100 { background-color: rgb(var(--color-extra-blue-100)); } .color-extra-blue-100 { color: rgb(var(--color-extra-blue-100)); } .fill-color-extra-blue-100 { fill: rgb(var(--color-extra-blue-100)); } .fill-color-extra-blue-100--hoverable { fill: rgb(var(--color-extra-blue-100)); } .fill-color-extra-blue-100--hoverable:hover { fill: rgb(var(--color-extra-blue-200)); } .stroke-color-extra-blue-100 { stroke: rgb(var(--color-extra-blue-100)); } .stroke-color-extra-blue-100--hoverable { stroke: rgb(var(--color-extra-blue-100)); } .stroke-color-extra-blue-100--hoverable:hover { stroke: rgb(var(--color-extra-blue-200)); } .border-color--extra-blue-100 { border-color: rgb(var(--color-extra-blue-100)) !important; } .bg-extra-blue-200 { background-color: rgb(var(--color-extra-blue-200)); } .color-extra-blue-200 { color: rgb(var(--color-extra-blue-200)); } .fill-color-extra-blue-200 { fill: rgb(var(--color-extra-blue-200)); } .fill-color-extra-blue-200--hoverable { fill: rgb(var(--color-extra-blue-200)); } .fill-color-extra-blue-200--hoverable:hover { fill: rgb(var(--color-extra-blue-300)); } .stroke-color-extra-blue-200 { stroke: rgb(var(--color-extra-blue-200)); } .stroke-color-extra-blue-200--hoverable { stroke: rgb(var(--color-extra-blue-200)); } .stroke-color-extra-blue-200--hoverable:hover { stroke: rgb(var(--color-extra-blue-300)); } .border-color--extra-blue-200 { border-color: rgb(var(--color-extra-blue-200)) !important; } .bg-extra-blue-300 { background-color: rgb(var(--color-extra-blue-300)); } .color-extra-blue-300 { color: rgb(var(--color-extra-blue-300)); } .fill-color-extra-blue-300 { fill: rgb(var(--color-extra-blue-300)); } .fill-color-extra-blue-300--hoverable { fill: rgb(var(--color-extra-blue-300)); } .fill-color-extra-blue-300--hoverable:hover { fill: rgb(var(--color-extra-blue-400)); } .stroke-color-extra-blue-300 { stroke: rgb(var(--color-extra-blue-300)); } .stroke-color-extra-blue-300--hoverable { stroke: rgb(var(--color-extra-blue-300)); } .stroke-color-extra-blue-300--hoverable:hover { stroke: rgb(var(--color-extra-blue-400)); } .border-color--extra-blue-300 { border-color: rgb(var(--color-extra-blue-300)) !important; } .bg-extra-blue-400 { background-color: rgb(var(--color-extra-blue-400)); } .color-extra-blue-400 { color: rgb(var(--color-extra-blue-400)); } .fill-color-extra-blue-400 { fill: rgb(var(--color-extra-blue-400)); } .fill-color-extra-blue-400--hoverable { fill: rgb(var(--color-extra-blue-400)); } .fill-color-extra-blue-400--hoverable:hover { fill: rgb(var(--color-extra-blue-500)); } .stroke-color-extra-blue-400 { stroke: rgb(var(--color-extra-blue-400)); } .stroke-color-extra-blue-400--hoverable { stroke: rgb(var(--color-extra-blue-400)); } .stroke-color-extra-blue-400--hoverable:hover { stroke: rgb(var(--color-extra-blue-500)); } .border-color--extra-blue-400 { border-color: rgb(var(--color-extra-blue-400)) !important; } .bg-extra-blue-500 { background-color: rgb(var(--color-extra-blue-500)); } .color-extra-blue-500 { color: rgb(var(--color-extra-blue-500)); } .fill-color-extra-blue-500 { fill: rgb(var(--color-extra-blue-500)); } .fill-color-extra-blue-500--hoverable { fill: rgb(var(--color-extra-blue-500)); } .fill-color-extra-blue-500--hoverable:hover { fill: rgb(var(--color-extra-blue-600)); } .stroke-color-extra-blue-500 { stroke: rgb(var(--color-extra-blue-500)); } .stroke-color-extra-blue-500--hoverable { stroke: rgb(var(--color-extra-blue-500)); } .stroke-color-extra-blue-500--hoverable:hover { stroke: rgb(var(--color-extra-blue-600)); } .border-color--extra-blue-500 { border-color: rgb(var(--color-extra-blue-500)) !important; } .bg-extra-blue-600 { background-color: rgb(var(--color-extra-blue-600)); } .color-extra-blue-600 { color: rgb(var(--color-extra-blue-600)); } .fill-color-extra-blue-600 { fill: rgb(var(--color-extra-blue-600)); } .fill-color-extra-blue-600--hoverable { fill: rgb(var(--color-extra-blue-600)); } .fill-color-extra-blue-600--hoverable:hover { fill: rgb(var(--color-extra-blue-700)); } .stroke-color-extra-blue-600 { stroke: rgb(var(--color-extra-blue-600)); } .stroke-color-extra-blue-600--hoverable { stroke: rgb(var(--color-extra-blue-600)); } .stroke-color-extra-blue-600--hoverable:hover { stroke: rgb(var(--color-extra-blue-700)); } .border-color--extra-blue-600 { border-color: rgb(var(--color-extra-blue-600)) !important; } .bg-extra-blue-700 { background-color: rgb(var(--color-extra-blue-700)); } .color-extra-blue-700 { color: rgb(var(--color-extra-blue-700)); } .fill-color-extra-blue-700 { fill: rgb(var(--color-extra-blue-700)); } .fill-color-extra-blue-700--hoverable { fill: rgb(var(--color-extra-blue-700)); } .fill-color-extra-blue-700--hoverable:hover { fill: rgb(var(--color-extra-blue-800)); } .stroke-color-extra-blue-700 { stroke: rgb(var(--color-extra-blue-700)); } .stroke-color-extra-blue-700--hoverable { stroke: rgb(var(--color-extra-blue-700)); } .stroke-color-extra-blue-700--hoverable:hover { stroke: rgb(var(--color-extra-blue-800)); } .border-color--extra-blue-700 { border-color: rgb(var(--color-extra-blue-700)) !important; } .bg-extra-blue-800 { background-color: rgb(var(--color-extra-blue-800)); } .color-extra-blue-800 { color: rgb(var(--color-extra-blue-800)); } .fill-color-extra-blue-800 { fill: rgb(var(--color-extra-blue-800)); } .fill-color-extra-blue-800--hoverable { fill: rgb(var(--color-extra-blue-800)); } .fill-color-extra-blue-800--hoverable:hover { fill: rgb(var(--color-extra-blue-900)); } .stroke-color-extra-blue-800 { stroke: rgb(var(--color-extra-blue-800)); } .stroke-color-extra-blue-800--hoverable { stroke: rgb(var(--color-extra-blue-800)); } .stroke-color-extra-blue-800--hoverable:hover { stroke: rgb(var(--color-extra-blue-900)); } .border-color--extra-blue-800 { border-color: rgb(var(--color-extra-blue-800)) !important; } .bg-extra-indigo-100 { background-color: rgb(var(--color-extra-indigo-100)); } .color-extra-indigo-100 { color: rgb(var(--color-extra-indigo-100)); } .fill-color-extra-indigo-100 { fill: rgb(var(--color-extra-indigo-100)); } .fill-color-extra-indigo-100--hoverable { fill: rgb(var(--color-extra-indigo-100)); } .fill-color-extra-indigo-100--hoverable:hover { fill: rgb(var(--color-extra-indigo-200)); } .stroke-color-extra-indigo-100 { stroke: rgb(var(--color-extra-indigo-100)); } .stroke-color-extra-indigo-100--hoverable { stroke: rgb(var(--color-extra-indigo-100)); } .stroke-color-extra-indigo-100--hoverable:hover { stroke: rgb(var(--color-extra-indigo-200)); } .border-color--extra-indigo-100 { border-color: rgb(var(--color-extra-indigo-100)) !important; } .bg-extra-indigo-200 { background-color: rgb(var(--color-extra-indigo-200)); } .color-extra-indigo-200 { color: rgb(var(--color-extra-indigo-200)); } .fill-color-extra-indigo-200 { fill: rgb(var(--color-extra-indigo-200)); } .fill-color-extra-indigo-200--hoverable { fill: rgb(var(--color-extra-indigo-200)); } .fill-color-extra-indigo-200--hoverable:hover { fill: rgb(var(--color-extra-indigo-300)); } .stroke-color-extra-indigo-200 { stroke: rgb(var(--color-extra-indigo-200)); } .stroke-color-extra-indigo-200--hoverable { stroke: rgb(var(--color-extra-indigo-200)); } .stroke-color-extra-indigo-200--hoverable:hover { stroke: rgb(var(--color-extra-indigo-300)); } .border-color--extra-indigo-200 { border-color: rgb(var(--color-extra-indigo-200)) !important; } .bg-extra-indigo-300 { background-color: rgb(var(--color-extra-indigo-300)); } .color-extra-indigo-300 { color: rgb(var(--color-extra-indigo-300)); } .fill-color-extra-indigo-300 { fill: rgb(var(--color-extra-indigo-300)); } .fill-color-extra-indigo-300--hoverable { fill: rgb(var(--color-extra-indigo-300)); } .fill-color-extra-indigo-300--hoverable:hover { fill: rgb(var(--color-extra-indigo-400)); } .stroke-color-extra-indigo-300 { stroke: rgb(var(--color-extra-indigo-300)); } .stroke-color-extra-indigo-300--hoverable { stroke: rgb(var(--color-extra-indigo-300)); } .stroke-color-extra-indigo-300--hoverable:hover { stroke: rgb(var(--color-extra-indigo-400)); } .border-color--extra-indigo-300 { border-color: rgb(var(--color-extra-indigo-300)) !important; } .bg-extra-indigo-400 { background-color: rgb(var(--color-extra-indigo-400)); } .color-extra-indigo-400 { color: rgb(var(--color-extra-indigo-400)); } .fill-color-extra-indigo-400 { fill: rgb(var(--color-extra-indigo-400)); } .fill-color-extra-indigo-400--hoverable { fill: rgb(var(--color-extra-indigo-400)); } .fill-color-extra-indigo-400--hoverable:hover { fill: rgb(var(--color-extra-indigo-500)); } .stroke-color-extra-indigo-400 { stroke: rgb(var(--color-extra-indigo-400)); } .stroke-color-extra-indigo-400--hoverable { stroke: rgb(var(--color-extra-indigo-400)); } .stroke-color-extra-indigo-400--hoverable:hover { stroke: rgb(var(--color-extra-indigo-500)); } .border-color--extra-indigo-400 { border-color: rgb(var(--color-extra-indigo-400)) !important; } .bg-extra-indigo-500 { background-color: rgb(var(--color-extra-indigo-500)); } .color-extra-indigo-500 { color: rgb(var(--color-extra-indigo-500)); } .fill-color-extra-indigo-500 { fill: rgb(var(--color-extra-indigo-500)); } .fill-color-extra-indigo-500--hoverable { fill: rgb(var(--color-extra-indigo-500)); } .fill-color-extra-indigo-500--hoverable:hover { fill: rgb(var(--color-extra-indigo-600)); } .stroke-color-extra-indigo-500 { stroke: rgb(var(--color-extra-indigo-500)); } .stroke-color-extra-indigo-500--hoverable { stroke: rgb(var(--color-extra-indigo-500)); } .stroke-color-extra-indigo-500--hoverable:hover { stroke: rgb(var(--color-extra-indigo-600)); } .border-color--extra-indigo-500 { border-color: rgb(var(--color-extra-indigo-500)) !important; } .bg-extra-indigo-600 { background-color: rgb(var(--color-extra-indigo-600)); } .color-extra-indigo-600 { color: rgb(var(--color-extra-indigo-600)); } .fill-color-extra-indigo-600 { fill: rgb(var(--color-extra-indigo-600)); } .fill-color-extra-indigo-600--hoverable { fill: rgb(var(--color-extra-indigo-600)); } .fill-color-extra-indigo-600--hoverable:hover { fill: rgb(var(--color-extra-indigo-700)); } .stroke-color-extra-indigo-600 { stroke: rgb(var(--color-extra-indigo-600)); } .stroke-color-extra-indigo-600--hoverable { stroke: rgb(var(--color-extra-indigo-600)); } .stroke-color-extra-indigo-600--hoverable:hover { stroke: rgb(var(--color-extra-indigo-700)); } .border-color--extra-indigo-600 { border-color: rgb(var(--color-extra-indigo-600)) !important; } .bg-extra-indigo-700 { background-color: rgb(var(--color-extra-indigo-700)); } .color-extra-indigo-700 { color: rgb(var(--color-extra-indigo-700)); } .fill-color-extra-indigo-700 { fill: rgb(var(--color-extra-indigo-700)); } .fill-color-extra-indigo-700--hoverable { fill: rgb(var(--color-extra-indigo-700)); } .fill-color-extra-indigo-700--hoverable:hover { fill: rgb(var(--color-extra-indigo-800)); } .stroke-color-extra-indigo-700 { stroke: rgb(var(--color-extra-indigo-700)); } .stroke-color-extra-indigo-700--hoverable { stroke: rgb(var(--color-extra-indigo-700)); } .stroke-color-extra-indigo-700--hoverable:hover { stroke: rgb(var(--color-extra-indigo-800)); } .border-color--extra-indigo-700 { border-color: rgb(var(--color-extra-indigo-700)) !important; } .bg-extra-indigo-800 { background-color: rgb(var(--color-extra-indigo-800)); } .color-extra-indigo-800 { color: rgb(var(--color-extra-indigo-800)); } .fill-color-extra-indigo-800 { fill: rgb(var(--color-extra-indigo-800)); } .fill-color-extra-indigo-800--hoverable { fill: rgb(var(--color-extra-indigo-800)); } .fill-color-extra-indigo-800--hoverable:hover { fill: rgb(var(--color-extra-indigo-900)); } .stroke-color-extra-indigo-800 { stroke: rgb(var(--color-extra-indigo-800)); } .stroke-color-extra-indigo-800--hoverable { stroke: rgb(var(--color-extra-indigo-800)); } .stroke-color-extra-indigo-800--hoverable:hover { stroke: rgb(var(--color-extra-indigo-900)); } .border-color--extra-indigo-800 { border-color: rgb(var(--color-extra-indigo-800)) !important; } .bg-extra-violet-100 { background-color: rgb(var(--color-extra-violet-100)); } .color-extra-violet-100 { color: rgb(var(--color-extra-violet-100)); } .fill-color-extra-violet-100 { fill: rgb(var(--color-extra-violet-100)); } .fill-color-extra-violet-100--hoverable { fill: rgb(var(--color-extra-violet-100)); } .fill-color-extra-violet-100--hoverable:hover { fill: rgb(var(--color-extra-violet-200)); } .stroke-color-extra-violet-100 { stroke: rgb(var(--color-extra-violet-100)); } .stroke-color-extra-violet-100--hoverable { stroke: rgb(var(--color-extra-violet-100)); } .stroke-color-extra-violet-100--hoverable:hover { stroke: rgb(var(--color-extra-violet-200)); } .border-color--extra-violet-100 { border-color: rgb(var(--color-extra-violet-100)) !important; } .bg-extra-violet-200 { background-color: rgb(var(--color-extra-violet-200)); } .color-extra-violet-200 { color: rgb(var(--color-extra-violet-200)); } .fill-color-extra-violet-200 { fill: rgb(var(--color-extra-violet-200)); } .fill-color-extra-violet-200--hoverable { fill: rgb(var(--color-extra-violet-200)); } .fill-color-extra-violet-200--hoverable:hover { fill: rgb(var(--color-extra-violet-300)); } .stroke-color-extra-violet-200 { stroke: rgb(var(--color-extra-violet-200)); } .stroke-color-extra-violet-200--hoverable { stroke: rgb(var(--color-extra-violet-200)); } .stroke-color-extra-violet-200--hoverable:hover { stroke: rgb(var(--color-extra-violet-300)); } .border-color--extra-violet-200 { border-color: rgb(var(--color-extra-violet-200)) !important; } .bg-extra-violet-300 { background-color: rgb(var(--color-extra-violet-300)); } .color-extra-violet-300 { color: rgb(var(--color-extra-violet-300)); } .fill-color-extra-violet-300 { fill: rgb(var(--color-extra-violet-300)); } .fill-color-extra-violet-300--hoverable { fill: rgb(var(--color-extra-violet-300)); } .fill-color-extra-violet-300--hoverable:hover { fill: rgb(var(--color-extra-violet-400)); } .stroke-color-extra-violet-300 { stroke: rgb(var(--color-extra-violet-300)); } .stroke-color-extra-violet-300--hoverable { stroke: rgb(var(--color-extra-violet-300)); } .stroke-color-extra-violet-300--hoverable:hover { stroke: rgb(var(--color-extra-violet-400)); } .border-color--extra-violet-300 { border-color: rgb(var(--color-extra-violet-300)) !important; } .bg-extra-violet-400 { background-color: rgb(var(--color-extra-violet-400)); } .color-extra-violet-400 { color: rgb(var(--color-extra-violet-400)); } .fill-color-extra-violet-400 { fill: rgb(var(--color-extra-violet-400)); } .fill-color-extra-violet-400--hoverable { fill: rgb(var(--color-extra-violet-400)); } .fill-color-extra-violet-400--hoverable:hover { fill: rgb(var(--color-extra-violet-500)); } .stroke-color-extra-violet-400 { stroke: rgb(var(--color-extra-violet-400)); } .stroke-color-extra-violet-400--hoverable { stroke: rgb(var(--color-extra-violet-400)); } .stroke-color-extra-violet-400--hoverable:hover { stroke: rgb(var(--color-extra-violet-500)); } .border-color--extra-violet-400 { border-color: rgb(var(--color-extra-violet-400)) !important; } .bg-extra-violet-500 { background-color: rgb(var(--color-extra-violet-500)); } .color-extra-violet-500 { color: rgb(var(--color-extra-violet-500)); } .fill-color-extra-violet-500 { fill: rgb(var(--color-extra-violet-500)); } .fill-color-extra-violet-500--hoverable { fill: rgb(var(--color-extra-violet-500)); } .fill-color-extra-violet-500--hoverable:hover { fill: rgb(var(--color-extra-violet-600)); } .stroke-color-extra-violet-500 { stroke: rgb(var(--color-extra-violet-500)); } .stroke-color-extra-violet-500--hoverable { stroke: rgb(var(--color-extra-violet-500)); } .stroke-color-extra-violet-500--hoverable:hover { stroke: rgb(var(--color-extra-violet-600)); } .border-color--extra-violet-500 { border-color: rgb(var(--color-extra-violet-500)) !important; } .bg-extra-violet-600 { background-color: rgb(var(--color-extra-violet-600)); } .color-extra-violet-600 { color: rgb(var(--color-extra-violet-600)); } .fill-color-extra-violet-600 { fill: rgb(var(--color-extra-violet-600)); } .fill-color-extra-violet-600--hoverable { fill: rgb(var(--color-extra-violet-600)); } .fill-color-extra-violet-600--hoverable:hover { fill: rgb(var(--color-extra-violet-700)); } .stroke-color-extra-violet-600 { stroke: rgb(var(--color-extra-violet-600)); } .stroke-color-extra-violet-600--hoverable { stroke: rgb(var(--color-extra-violet-600)); } .stroke-color-extra-violet-600--hoverable:hover { stroke: rgb(var(--color-extra-violet-700)); } .border-color--extra-violet-600 { border-color: rgb(var(--color-extra-violet-600)) !important; } .bg-extra-violet-700 { background-color: rgb(var(--color-extra-violet-700)); } .color-extra-violet-700 { color: rgb(var(--color-extra-violet-700)); } .fill-color-extra-violet-700 { fill: rgb(var(--color-extra-violet-700)); } .fill-color-extra-violet-700--hoverable { fill: rgb(var(--color-extra-violet-700)); } .fill-color-extra-violet-700--hoverable:hover { fill: rgb(var(--color-extra-violet-800)); } .stroke-color-extra-violet-700 { stroke: rgb(var(--color-extra-violet-700)); } .stroke-color-extra-violet-700--hoverable { stroke: rgb(var(--color-extra-violet-700)); } .stroke-color-extra-violet-700--hoverable:hover { stroke: rgb(var(--color-extra-violet-800)); } .border-color--extra-violet-700 { border-color: rgb(var(--color-extra-violet-700)) !important; } .bg-extra-violet-800 { background-color: rgb(var(--color-extra-violet-800)); } .color-extra-violet-800 { color: rgb(var(--color-extra-violet-800)); } .fill-color-extra-violet-800 { fill: rgb(var(--color-extra-violet-800)); } .fill-color-extra-violet-800--hoverable { fill: rgb(var(--color-extra-violet-800)); } .fill-color-extra-violet-800--hoverable:hover { fill: rgb(var(--color-extra-violet-900)); } .stroke-color-extra-violet-800 { stroke: rgb(var(--color-extra-violet-800)); } .stroke-color-extra-violet-800--hoverable { stroke: rgb(var(--color-extra-violet-800)); } .stroke-color-extra-violet-800--hoverable:hover { stroke: rgb(var(--color-extra-violet-900)); } .border-color--extra-violet-800 { border-color: rgb(var(--color-extra-violet-800)) !important; } .bg-extra-pink-100 { background-color: rgb(var(--color-extra-pink-100)); } .color-extra-pink-100 { color: rgb(var(--color-extra-pink-100)); } .fill-color-extra-pink-100 { fill: rgb(var(--color-extra-pink-100)); } .fill-color-extra-pink-100--hoverable { fill: rgb(var(--color-extra-pink-100)); } .fill-color-extra-pink-100--hoverable:hover { fill: rgb(var(--color-extra-pink-200)); } .stroke-color-extra-pink-100 { stroke: rgb(var(--color-extra-pink-100)); } .stroke-color-extra-pink-100--hoverable { stroke: rgb(var(--color-extra-pink-100)); } .stroke-color-extra-pink-100--hoverable:hover { stroke: rgb(var(--color-extra-pink-200)); } .border-color--extra-pink-100 { border-color: rgb(var(--color-extra-pink-100)) !important; } .bg-extra-pink-200 { background-color: rgb(var(--color-extra-pink-200)); } .color-extra-pink-200 { color: rgb(var(--color-extra-pink-200)); } .fill-color-extra-pink-200 { fill: rgb(var(--color-extra-pink-200)); } .fill-color-extra-pink-200--hoverable { fill: rgb(var(--color-extra-pink-200)); } .fill-color-extra-pink-200--hoverable:hover { fill: rgb(var(--color-extra-pink-300)); } .stroke-color-extra-pink-200 { stroke: rgb(var(--color-extra-pink-200)); } .stroke-color-extra-pink-200--hoverable { stroke: rgb(var(--color-extra-pink-200)); } .stroke-color-extra-pink-200--hoverable:hover { stroke: rgb(var(--color-extra-pink-300)); } .border-color--extra-pink-200 { border-color: rgb(var(--color-extra-pink-200)) !important; } .bg-extra-pink-300 { background-color: rgb(var(--color-extra-pink-300)); } .color-extra-pink-300 { color: rgb(var(--color-extra-pink-300)); } .fill-color-extra-pink-300 { fill: rgb(var(--color-extra-pink-300)); } .fill-color-extra-pink-300--hoverable { fill: rgb(var(--color-extra-pink-300)); } .fill-color-extra-pink-300--hoverable:hover { fill: rgb(var(--color-extra-pink-400)); } .stroke-color-extra-pink-300 { stroke: rgb(var(--color-extra-pink-300)); } .stroke-color-extra-pink-300--hoverable { stroke: rgb(var(--color-extra-pink-300)); } .stroke-color-extra-pink-300--hoverable:hover { stroke: rgb(var(--color-extra-pink-400)); } .border-color--extra-pink-300 { border-color: rgb(var(--color-extra-pink-300)) !important; } .bg-extra-pink-400 { background-color: rgb(var(--color-extra-pink-400)); } .color-extra-pink-400 { color: rgb(var(--color-extra-pink-400)); } .fill-color-extra-pink-400 { fill: rgb(var(--color-extra-pink-400)); } .fill-color-extra-pink-400--hoverable { fill: rgb(var(--color-extra-pink-400)); } .fill-color-extra-pink-400--hoverable:hover { fill: rgb(var(--color-extra-pink-500)); } .stroke-color-extra-pink-400 { stroke: rgb(var(--color-extra-pink-400)); } .stroke-color-extra-pink-400--hoverable { stroke: rgb(var(--color-extra-pink-400)); } .stroke-color-extra-pink-400--hoverable:hover { stroke: rgb(var(--color-extra-pink-500)); } .border-color--extra-pink-400 { border-color: rgb(var(--color-extra-pink-400)) !important; } .bg-extra-pink-500 { background-color: rgb(var(--color-extra-pink-500)); } .color-extra-pink-500 { color: rgb(var(--color-extra-pink-500)); } .fill-color-extra-pink-500 { fill: rgb(var(--color-extra-pink-500)); } .fill-color-extra-pink-500--hoverable { fill: rgb(var(--color-extra-pink-500)); } .fill-color-extra-pink-500--hoverable:hover { fill: rgb(var(--color-extra-pink-600)); } .stroke-color-extra-pink-500 { stroke: rgb(var(--color-extra-pink-500)); } .stroke-color-extra-pink-500--hoverable { stroke: rgb(var(--color-extra-pink-500)); } .stroke-color-extra-pink-500--hoverable:hover { stroke: rgb(var(--color-extra-pink-600)); } .border-color--extra-pink-500 { border-color: rgb(var(--color-extra-pink-500)) !important; } .bg-extra-pink-600 { background-color: rgb(var(--color-extra-pink-600)); } .color-extra-pink-600 { color: rgb(var(--color-extra-pink-600)); } .fill-color-extra-pink-600 { fill: rgb(var(--color-extra-pink-600)); } .fill-color-extra-pink-600--hoverable { fill: rgb(var(--color-extra-pink-600)); } .fill-color-extra-pink-600--hoverable:hover { fill: rgb(var(--color-extra-pink-700)); } .stroke-color-extra-pink-600 { stroke: rgb(var(--color-extra-pink-600)); } .stroke-color-extra-pink-600--hoverable { stroke: rgb(var(--color-extra-pink-600)); } .stroke-color-extra-pink-600--hoverable:hover { stroke: rgb(var(--color-extra-pink-700)); } .border-color--extra-pink-600 { border-color: rgb(var(--color-extra-pink-600)) !important; } .bg-extra-pink-700 { background-color: rgb(var(--color-extra-pink-700)); } .color-extra-pink-700 { color: rgb(var(--color-extra-pink-700)); } .fill-color-extra-pink-700 { fill: rgb(var(--color-extra-pink-700)); } .fill-color-extra-pink-700--hoverable { fill: rgb(var(--color-extra-pink-700)); } .fill-color-extra-pink-700--hoverable:hover { fill: rgb(var(--color-extra-pink-800)); } .stroke-color-extra-pink-700 { stroke: rgb(var(--color-extra-pink-700)); } .stroke-color-extra-pink-700--hoverable { stroke: rgb(var(--color-extra-pink-700)); } .stroke-color-extra-pink-700--hoverable:hover { stroke: rgb(var(--color-extra-pink-800)); } .border-color--extra-pink-700 { border-color: rgb(var(--color-extra-pink-700)) !important; } .bg-extra-pink-800 { background-color: rgb(var(--color-extra-pink-800)); } .color-extra-pink-800 { color: rgb(var(--color-extra-pink-800)); } .fill-color-extra-pink-800 { fill: rgb(var(--color-extra-pink-800)); } .fill-color-extra-pink-800--hoverable { fill: rgb(var(--color-extra-pink-800)); } .fill-color-extra-pink-800--hoverable:hover { fill: rgb(var(--color-extra-pink-900)); } .stroke-color-extra-pink-800 { stroke: rgb(var(--color-extra-pink-800)); } .stroke-color-extra-pink-800--hoverable { stroke: rgb(var(--color-extra-pink-800)); } .stroke-color-extra-pink-800--hoverable:hover { stroke: rgb(var(--color-extra-pink-900)); } .border-color--extra-pink-800 { border-color: rgb(var(--color-extra-pink-800)) !important; } .stoke-thick { stroke-width: 4px; } /*------------------------------------*\ # Typography Variables \*------------------------------------*/ /* ******************************************************************************************* * Reset basic CSS styles across many browsers. * * Based on: https://meyerweb.com/eric/tools/css/reset/ * ******************************************************************************************* */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } img { max-width: 100%; } /* This file is used to create a default color palette consisting of a spectrum of neutral colors. None of these colors are specifically branded. The Primary and Secondary colors are retrieved from the backend, from a theme configuration based on the domain. - Robert Merki, August 2019 */ :root { --color-black: 0, 0, 0; --color-white: 255, 255, 255; --color-gray-900: 26, 32, 44; --color-gray-800: 45, 55, 72; --color-gray-700: 74, 85, 104; --color-gray-600: 113, 128, 150; --color-gray-500: 160, 174, 192; --color-gray-400: 203, 213, 224; --color-gray-300: 226, 232, 240; --color-gray-200: 237, 242, 247; --color-gray-100: 247, 250, 252; --color-error-900: 77, 4, 21; --color-error-800: 111, 7, 32; --color-error-700: 145, 11, 44; --color-error-600: 180, 17, 56; --color-error-500: 214, 23, 69; --color-error-400: 224, 70, 107; --color-error-300: 235, 122, 149; --color-error-200: 245, 177, 194; --color-error-100: 255, 237, 241; --color-success-900: 4, 77, 35; --color-success-800: 7, 109, 50; --color-success-700: 10, 142, 66; --color-success-600: 14, 175, 82; --color-success-500: 19, 208, 99; --color-success-400: 66, 220, 131; --color-success-300: 118, 232, 166; --color-success-200: 175, 243, 204; --color-success-100: 237, 255, 245; --color-warning-900: 77, 66, 4; --color-warning-800: 97, 84, 5; --color-warning-700: 118, 103, 7; --color-warning-600: 139, 121, 8; --color-warning-500: 160, 139, 10; --color-warning-400: 184, 165, 51; --color-warning-300: 208, 193, 103; --color-warning-200: 231, 222, 165; --color-warning-100: 255, 253, 237; --color-extra-red-900: 77, 6, 4; --color-extra-red-800: 114, 13, 10; --color-extra-red-700: 152, 23, 20; --color-extra-red-600: 189, 36, 32; --color-extra-red-500: 227, 52, 47; --color-extra-red-400: 234, 95, 91; --color-extra-red-300: 241, 140, 137; --color-extra-red-200: 248, 188, 186; --color-extra-red-100: 255, 238, 237; --color-extra-orange-900: 77, 40, 4; --color-extra-orange-800: 119, 65, 12; --color-extra-orange-700: 161, 92, 25; --color-extra-orange-600: 204, 121, 42; --color-extra-orange-500: 246, 153, 63; --color-extra-orange-400: 248, 176, 105; --color-extra-orange-300: 251, 199, 149; --color-extra-orange-200: 253, 222, 192; --color-extra-orange-100: 255, 246, 237; --color-extra-yellow-900: 77, 69, 4; --color-extra-yellow-800: 121, 110, 13; --color-extra-yellow-700: 166, 152, 28; --color-extra-yellow-600: 210, 194, 48; --color-extra-yellow-500: 255, 237, 74; --color-extra-yellow-400: 255, 241, 115; --color-extra-yellow-300: 255, 245, 156; --color-extra-yellow-200: 255, 249, 196; --color-extra-yellow-100: 255, 253, 237; --color-extra-green-900: 4, 77, 35; --color-extra-green-800: 12, 106, 51; --color-extra-green-700: 23, 135, 70; --color-extra-green-600: 38, 164, 91; --color-extra-green-500: 56, 193, 114; --color-extra-green-400: 94, 209, 142; --color-extra-green-300: 137, 224, 174; --color-extra-green-200: 184, 240, 208; --color-extra-green-100: 237, 255, 245; --color-extra-blue-900: 4, 44, 77; --color-extra-blue-800: 11, 66, 112; --color-extra-blue-700: 21, 91, 148; --color-extra-blue-600: 35, 117, 184; --color-extra-blue-500: 52, 144, 220; --color-extra-blue-400: 94, 168, 229; --color-extra-blue-300: 139, 193, 238; --color-extra-blue-200: 186, 219, 246; --color-extra-blue-100: 237, 247, 255; --color-extra-indigo-900: 4, 14, 77; --color-extra-indigo-800: 17, 31, 109; --color-extra-indigo-700: 38, 53, 141; --color-extra-indigo-600: 66, 81, 173; --color-extra-indigo-500: 101, 116, 205; --color-extra-indigo-400: 131, 143, 218; --color-extra-indigo-300: 164, 173, 230; --color-extra-indigo-200: 199, 205, 243; --color-extra-indigo-100: 237, 240, 255; --color-extra-violet-900: 33, 4, 77; --color-extra-violet-800: 56, 16, 114; --color-extra-violet-700: 83, 36, 151; --color-extra-violet-600: 114, 63, 189; --color-extra-violet-500: 149, 97, 226; --color-extra-violet-400: 171, 129, 233; --color-extra-violet-300: 195, 163, 241; --color-extra-violet-200: 219, 199, 248; --color-extra-violet-100: 244, 237, 255; --color-extra-pink-900: 77, 4, 28; --color-extra-pink-800: 119, 18, 52; --color-extra-pink-700: 161, 40, 81; --color-extra-pink-600: 204, 70, 115; --color-extra-pink-500: 246, 109, 155; --color-extra-pink-400: 248, 140, 176; --color-extra-pink-300: 251, 172, 198; --color-extra-pink-200: 253, 204, 221; --color-extra-pink-100: 255, 237, 243; --color-primary-dash3-900: 29, 4, 77; --color-primary-dash3-800: 49, 13, 119; --color-primary-dash3-700: 73, 27, 161; --color-primary-dash3-600: 115, 56, 176; --color-primary-dash3-500: 131, 71, 245; --color-primary-dash3-500: 153, 74, 232; --color-primary-dash3-400: 158, 111, 248; --color-primary-dash3-300: 186, 152, 250; --color-primary-dash3-200: 214, 194, 252; --color-primary-dash3-100: 243, 237, 255; --color-secondary-dash3-900: 4, 50, 77; --color-secondary-dash3-800: 8, 77, 118; --color-secondary-dash3-700: 14, 106, 159; --color-secondary-dash3-600: 22, 135, 201; --color-secondary-dash3-500: 31, 164, 242; --color-secondary-dash3-400: 81, 184, 245; --color-secondary-dash3-300: 131, 205, 248; --color-secondary-dash3-200: 184, 227, 252; --color-secondary-dash3-100: 237, 248, 255; --color-gray-dash3-900: 26, 32, 44; --color-gray-dash3-800: 45, 55, 72; --color-gray-dash3-700: 74, 85, 104; --color-gray-dash3-600: 113, 128, 150; --color-gray-dash3-500: 160, 174, 192; --color-gray-dash3-400: 203, 213, 224; --color-gray-dash3-300: 226, 232, 240; --color-gray-dash3-200: 237, 242, 247; --color-gray-dash3-100: 247, 250, 252; --color-error-dash3-900: 77, 4, 21; --color-error-dash3-800: 111, 7, 32; --color-error-dash3-700: 145, 11, 44; --color-error-dash3-600: 180, 17, 56; --color-error-dash3-500: 214, 23, 69; --color-error-dash3-400: 224, 70, 107; --color-error-dash3-300: 235, 122, 149; --color-error-dash3-200: 245, 177, 194; --color-error-dash3-100: 255, 237, 241; --color-success-dash3-900: 4, 77, 35; --color-success-dash3-800: 7, 109, 50; --color-success-dash3-700: 10, 142, 66; --color-success-dash3-600: 14, 175, 82; --color-success-dash3-500: 19, 208, 99; --color-success-dash3-400: 66, 220, 131; --color-success-dash3-300: 118, 232, 166; --color-success-dash3-200: 175, 243, 204; --color-success-dash3-100: 237, 255, 245; --color-teal-dash3-900: 4, 77, 70; --color-teal-dash3-800: 15, 105, 97; --color-teal-dash3-700: 30, 134, 124; --color-teal-dash3-600: 51, 163, 152; --color-teal-dash3-500: 77, 192, 181; --color-teal-dash3-400: 111, 208, 198; --color-teal-dash3-300: 149, 224, 216; --color-teal-dash3-200: 191, 239, 235; --color-teal-dash3-100: 237, 255, 253; --color-extra-midnight-dash3-900: 13, 11, 40; --color-extra-midnight-dash3-800: 18, 15, 56; --color-extra-midnight-dash3-700: 23, 20, 72; --color-extra-midnight-dash3-600: 28, 24, 88; --color-extra-midnight-dash3-500: 33, 29, 104; --color-extra-midnight-dash3-400: 38, 33, 120; --color-extra-midnight-dash3-300: 43, 38, 136; --color-extra-midnight-dash3-200: 54, 46, 168; --color-extra-midnight-dash3-100: 60, 51, 184; --color-soft-purple-600: 64, 58, 177; --color-extra-indigo-dash3-800: 70, 63, 192; --color-extra-indigo-dash3-700: 84, 78, 197; --color-extra-indigo-dash3-600: 99, 94, 202; --color-extra-indigo-dash3-500: 114, 109, 207; --color-extra-indigo-dash3-400: 129, 124, 212; --color-extra-indigo-dash3-300: 144, 140, 217; --color-extra-indigo-dash3-200: 159, 155, 222; --color-extra-indigo-dash3-100: 173, 170, 227; --color-extra-plum-dash3-900: 182, 22, 200; --color-extra-violet-dash3-900: 131, 71, 245; --color-extra-violet-dash3-800: 123, 108, 245; --color-extra-navy-dash3-900: 19, 41, 75; --color-extra-blue-dash3-900: 0, 139, 230; --color-extra-lilac-dash3-900: 148, 147, 203; --color-extra-lilac-dash3-800: 243, 237, 255; --color-extra-silver-dash3-900: 239, 238, 238; --color-extra-silver-dash3-800: 252, 252, 252; --color-title-dash3: 19, 41, 75; --color-electric-purple-900: 38, 18, 58; --color-electric-purple-800: 77, 37, 117; --color-electric-purple-700: 115, 56, 176; --color-electric-purple-600: 115, 55, 175; --color-electric-purple-500: 153, 74, 232; --color-electric-purple-400: 194, 146, 242; --color-electric-purple-300: 215, 194, 254; --color-electric-purple-200: 235, 219, 251; --color-electric-purple-100: 247, 237, 254; --color-sky-blue-900: 14, 32, 56; --color-sky-blue-800: 28, 63, 112; --color-sky-blue-700: 41, 95, 167; --color-sky-blue-600: 55, 126, 223; --color-sky-blue-400: 135, 178, 236; --color-sky-blue-300: 175, 203, 242; --color-sky-blue-200: 215, 229, 249; --color-sky-blue-100: 237, 247, 255; --color-teal-900: 10, 49, 49; --color-teal-800: 21, 99, 99; --color-teal-700: 32, 149, 149; --color-teal-600: 42, 198, 198; --color-teal-500: 85, 209, 209; --color-teal-400: 127, 221, 221; --color-teal-300: 170, 232, 232; --color-teal-200: 212, 244, 244; --color-teal-100: 237, 252, 252; --color-soft-purple-900: 23, 20, 49; --color-soft-purple-800: 46, 41, 99; --color-soft-purple-700: 69, 62, 149; --color-soft-purple-600: 92, 82, 198; --color-soft-purple-500: 125, 117, 209; --color-soft-purple-400: 157, 151, 221; --color-soft-purple-300: 190, 186, 232; --color-soft-purple-200: 222, 220, 244; --color-soft-purple-100: 240, 238, 252; --color-deep-navy-500: 38, 18, 107; } /* ******************************************************************************************* * Mixins and functions * ******************************************************************************************* */ /** This addresses a compiler warning regarding the no-select mixin. */ .pill--query, .pill--operator { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version */ } @keyframes buttonIsLoading { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* Do not attempt to set color variables in this file. This file is used only to set SCSS color variables as rgb variations of CSS variables. The CSS variables are set outside of this project, based on a theme configuration from the backend. - Robert Merki, August 2019 */ /* Mobile devices */ /* iPads, Tablets */ /* Small screens, laptops */ /* Desktops */ /* Large screens */ /* Extra large screens, TV */ .modal { box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 0 1px rgba(0, 0, 0, 0.21); z-index: 1000; width: 450px; } .modal__body { padding: 10px; background: #fff; color: rgb(var(--color-gray-600)); } .modal__header { font-size: 0.75em; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; color: rgb(var(--color-gray-600)); margin: 0.65em 0 1.67em; } .modal__smaller-header { font-size: 0.5em; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; color: rgb(var(--color-gray-600)); margin: 0.65em 0 1.67em; } .modal__p { font-size: 0.9em; margin-top: 10px; margin-bottom: 10px; line-height: 1.25em; } .modal__p--danger { color: rgb(var(--color-error-500)); } .modal__p__link { text-decoration: underline; cursor: pointer; } .modal textarea { height: 100px; } .modal__radio-buttons { margin: 1em 0; } .modal__radio-buttons input { visibility: hidden; display: none; } .modal__radio-buttons label { display: block; margin-bottom: 5px; } .modal__radio-buttons__button span { font-size: 1em; line-height: 1.3em; } .modal__radio-buttons__button { -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; border-radius: 5px; border: 1px solid rgb(var(--color-gray-600)); padding: 0.5em; } .modal__radio-buttons__button i { -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; height: 1em; padding: 4px; font-size: 0.85em; border-radius: 4px; background-color: rgb(var(--color-gray-100)); border: 1px solid rgb(var(--color-gray-600)); color: rgb(var(--color-gray-600)); } .modal__radio-buttons__button { background-color: rgb(var(--color-gray-100)); color: rgb(var(--color-gray-600)); } .modal__radio-buttons__button:hover { cursor: pointer; background-color: rgb(var(--color-secondary-100)); } .modal__radio-buttons__button.selected i { background-color: rgb(var(--color-success-300)); border: 1px solid rgb(var(--color-success-700)); color: white; } .modal__radio-buttons__button.selected { background-color: rgb(var(--color-secondary-100)); color: rgb(var(--color-secondary-500)); border-color: rgb(var(--color-secondary-500)); } .modal__gutter { background-color: rgb(var(--color-gray-100)); padding: 10px; } .modal__gutter .button { margin-left: 10px; } .modal-page-overlay { z-index: 1000; display: flex; align-items: center; justify-content: center; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(226, 234, 255, 0.671); } body { height: 100vh; overflow-x: hidden; overflow-y: scroll; background: rgb(var(--color-gray-100)); } *:focus { outline: 0; } .dash3 { overflow: hidden !important; } .shadow-sm { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .shadow-md { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .shadow-lg { box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08); } .fullHeight--centered { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .horizontal-divider { transition: 0.2s all; height: 1px; background: rgb(var(--color-primary-500)); margin-top: 3px; margin-bottom: 5px; } .horizontal-divider--2x { height: 1px; background: rgb(var(--color-primary-500)); } .horizontal-divider--gray { background: rgb(var(--color-gray-300)); } .transparent { opacity: 0; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .disable-hover { position: relative; } .disable-hover:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .not-relative { position: static !important; } .fadeBecauseLoading { opacity: 0.2; } .disabled { opacity: 0.4; color: rgb(var(--color-gray-600)); cursor: not-allowed; } .disabled:hover { color: rgb(var(--color-gray-600)); } .clickable { cursor: pointer; } .uppercase { text-transform: uppercase; } .h-spacing-5 { margin-left: 5px; margin-right: 5px; } .h-spacing-10 { margin-left: 10px; margin-right: 10px; } .hasTooltip { text-decoration: underline; cursor: help; } .tippy-touch { cursor: pointer !important; } .tippy-notransition { transition: none !important; } .tippy-popper { max-width: 500px; perspective: 800px; z-index: 9999; outline: 0; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); pointer-events: none; } .tippy-popper.html-template { max-width: 96%; max-width: calc(100% - 20px); } .tippy-popper .tippy-tooltip.transparent-theme { background-color: rgba(0, 0, 0, 0.7); } .tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] { background-color: transparent; } .tippy-popper .tippy-tooltip.light-theme { color: #26323d; box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2); background-color: rgb(var(--color-secondary-900)); } .tippy-popper .tippy-tooltip.light-theme[data-animatefill] { background-color: transparent; } .tippy-popper[x-placement^=top] [x-arrow] { border-top: 5px solid rgb(var(--color-white)); border-right: 5px solid transparent; border-left: 5px solid transparent; bottom: -5px; margin: 0 9px; } .tippy-popper[x-placement^=top] [x-arrow].arrow-small { border-top: 5px solid rgb(var(--color-white)); border-right: 5px solid transparent; border-left: 5px solid transparent; bottom: -5px; } .tippy-popper[x-placement^=top] [x-arrow].arrow-big { border-top: 10px solid rgb(var(--color-white)); border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -10px; } .tippy-popper[x-placement^=top] [x-circle] { transform-origin: 0 33%; } .tippy-popper[x-placement^=top] [x-circle].enter { transform: scale(1) translate(-50%, -55%); opacity: 1; } .tippy-popper[x-placement^=top] [x-circle].leave { transform: scale(0.15) translate(-50%, -50%); opacity: 0; } .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] { background-color: rgb(var(--color-secondary-900)); } .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] { border-top: 5px solid rgb(var(--color-secondary-900)); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small { border-top: 5px solid rgb(var(--color-secondary-900)); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big { border-top: 10px solid rgb(var(--color-secondary-900)); border-right: 10px solid transparent; border-left: 10px solid transparent; } .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] { background-color: rgba(0, 0, 0, 0.7); } .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] { border-top: 5px solid rgba(0, 0, 0, 0.7); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { border-top: 5px solid rgba(0, 0, 0, 0.7); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { border-top: 10px solid rgba(0, 0, 0, 0.7); border-right: 10px solid transparent; border-left: 10px solid transparent; } .tippy-popper[x-placement^=top] [data-animation=perspective] { transform-origin: bottom; } .tippy-popper[x-placement^=top] [data-animation=perspective].enter { opacity: 1; transform: translateY(-10px) rotateX(0); } .tippy-popper[x-placement^=top] [data-animation=perspective].leave { opacity: 0; transform: translateY(0) rotateX(90deg); } .tippy-popper[x-placement^=top] [data-animation=fade].enter { opacity: 1; transform: translateY(-10px); } .tippy-popper[x-placement^=top] [data-animation=fade].leave { opacity: 0; transform: translateY(-10px); } .tippy-popper[x-placement^=top] [data-animation=shift].enter { opacity: 1; transform: translateY(-10px); } .tippy-popper[x-placement^=top] [data-animation=shift].leave { opacity: 0; transform: translateY(0); } .tippy-popper[x-placement^=top] [data-animation=scale].enter { opacity: 1; transform: translateY(-10px) scale(1); } .tippy-popper[x-placement^=top] [data-animation=scale].leave { opacity: 0; transform: translateY(0) scale(0); } .tippy-popper[x-placement^=bottom] [x-arrow] { border-bottom: 5px solid rgb(var(--color-white)); border-right: 5px solid transparent; border-left: 5px solid transparent; top: -5px; margin: 0 9px; } .tippy-popper[x-placement^=bottom] [x-arrow].arrow-small { border-bottom: 5px solid rgb(var(--color-white)); border-right: 5px solid transparent; border-left: 5px solid transparent; top: -5px; } .tippy-popper[x-placement^=bottom] [x-arrow].arrow-big { border-bottom: 10px solid rgb(var(--color-white)); border-right: 10px solid transparent; border-left: 10px solid transparent; top: -10px; } .tippy-popper[x-placement^=bottom] [x-circle] { transform-origin: 0 -50%; } .tippy-popper[x-placement^=bottom] [x-circle].enter { transform: scale(1) translate(-50%, -45%); opacity: 1; } .tippy-popper[x-placement^=bottom] [x-circle].leave { transform: scale(0.15) translate(-50%, -5%); opacity: 0; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] { background-color: rgb(var(--color-secondary-900)); } .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] { border-bottom: 5px solid rgb(var(--color-secondary-900)); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small { border-bottom: 5px solid rgb(var(--color-secondary-900)); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big { border-bottom: 10px solid rgb(var(--color-secondary-900)); border-right: 10px solid transparent; border-left: 10px solid transparent; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] { background-color: rgba(0, 0, 0, 0.7); } .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] { border-bottom: 5px solid rgba(0, 0, 0, 0.7); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { border-bottom: 5px solid rgba(0, 0, 0, 0.7); border-right: 5px solid transparent; border-left: 5px solid transparent; } .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { border-bottom: 10px solid rgba(0, 0, 0, 0.7); border-right: 10px solid transparent; border-left: 10px solid transparent; } .tippy-popper[x-placement^=bottom] [data-animation=perspective] { transform-origin: top; } .tippy-popper[x-placement^=bottom] [data-animation=perspective].enter { opacity: 1; transform: translateY(10px) rotateX(0); } .tippy-popper[x-placement^=bottom] [data-animation=perspective].leave { opacity: 0; transform: translateY(0) rotateX(-90deg); } .tippy-popper[x-placement^=bottom] [data-animation=fade].enter { opacity: 1; transform: translateY(10px); } .tippy-popper[x-placement^=bottom] [data-animation=fade].leave { opacity: 0; transform: translateY(10px); } .tippy-popper[x-placement^=bottom] [data-animation=shift].enter { opacity: 1; transform: translateY(10px); } .tippy-popper[x-placement^=bottom] [data-animation=shift].leave { opacity: 0; transform: translateY(0); } .tippy-popper[x-placement^=bottom] [data-animation=scale].enter { opacity: 1; transform: translateY(10px) scale(1); } .tippy-popper[x-placement^=bottom] [data-animation=scale].leave { opacity: 0; transform: translateY(0) scale(0); } .tippy-popper[x-placement^=left] [x-arrow] { border-left: 5px solid rgb(var(--color-white)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; right: -5px; margin: 6px 0; } .tippy-popper[x-placement^=left] [x-arrow].arrow-small { border-left: 5px solid rgb(var(--color-white)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; right: -5px; } .tippy-popper[x-placement^=left] [x-arrow].arrow-big { border-left: 10px solid rgb(var(--color-white)); border-top: 10px solid transparent; border-bottom: 10px solid transparent; right: -10px; } .tippy-popper[x-placement^=left] [x-circle] { transform-origin: 50% 0; } .tippy-popper[x-placement^=left] [x-circle].enter { transform: scale(1) translate(-50%, -50%); opacity: 1; } .tippy-popper[x-placement^=left] [x-circle].leave { transform: scale(0.15) translate(-50%, -50%); opacity: 0; } .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] { background-color: rgb(var(--color-secondary-900)); } .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] { border-left: 5px solid rgb(var(--color-secondary-900)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small { border-left: 5px solid rgb(var(--color-secondary-900)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big { border-left: 10px solid rgb(var(--color-secondary-900)); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] { background-color: rgba(0, 0, 0, 0.7); } .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] { border-left: 5px solid rgba(0, 0, 0, 0.7); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { border-left: 5px solid rgba(0, 0, 0, 0.7); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { border-left: 10px solid rgba(0, 0, 0, 0.7); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tippy-popper[x-placement^=left] [data-animation=perspective] { transform-origin: right; } .tippy-popper[x-placement^=left] [data-animation=perspective].enter { opacity: 1; transform: translateX(-10px) rotateY(0); } .tippy-popper[x-placement^=left] [data-animation=perspective].leave { opacity: 0; transform: translateX(0) rotateY(-90deg); } .tippy-popper[x-placement^=left] [data-animation=fade].enter { opacity: 1; transform: translateX(-10px); } .tippy-popper[x-placement^=left] [data-animation=fade].leave { opacity: 0; transform: translateX(-10px); } .tippy-popper[x-placement^=left] [data-animation=shift].enter { opacity: 1; transform: translateX(-10px); } .tippy-popper[x-placement^=left] [data-animation=shift].leave { opacity: 0; transform: translateX(0); } .tippy-popper[x-placement^=left] [data-animation=scale].enter { opacity: 1; transform: translateX(-10px) scale(1); } .tippy-popper[x-placement^=left] [data-animation=scale].leave { opacity: 0; transform: translateX(0) scale(0); } .tippy-popper[x-placement^=right] [x-arrow] { border-right: 5px solid rgb(var(--color-white)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; left: -5px; margin: 6px 0; } .tippy-popper[x-placement^=right] [x-arrow].arrow-small { border-right: 5px solid rgb(var(--color-white)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; left: -5px; } .tippy-popper[x-placement^=right] [x-arrow].arrow-big { border-right: 10px solid rgb(var(--color-white)); border-top: 10px solid transparent; border-bottom: 10px solid transparent; left: -10px; } .tippy-popper[x-placement^=right] [x-circle] { transform-origin: -50% 0; } .tippy-popper[x-placement^=right] [x-circle].enter { transform: scale(1) translate(-50%, -50%); opacity: 1; } .tippy-popper[x-placement^=right] [x-circle].leave { transform: scale(0.15) translate(-50%, -50%); opacity: 0; } .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] { background-color: rgb(var(--color-secondary-900)); } .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] { border-right: 5px solid rgb(var(--color-secondary-900)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small { border-right: 5px solid rgb(var(--color-secondary-900)); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big { border-right: 10px solid rgb(var(--color-secondary-900)); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] { background-color: rgba(0, 0, 0, 0.7); } .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] { border-right: 5px solid rgba(0, 0, 0, 0.7); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small { border-right: 5px solid rgba(0, 0, 0, 0.7); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big { border-right: 10px solid rgba(0, 0, 0, 0.7); border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tippy-popper[x-placement^=right] [data-animation=perspective] { transform-origin: left; } .tippy-popper[x-placement^=right] [data-animation=perspective].enter { opacity: 1; transform: translateX(10px) rotateY(0); } .tippy-popper[x-placement^=right] [data-animation=perspective].leave { opacity: 0; transform: translateX(0) rotateY(90deg); } .tippy-popper[x-placement^=right] [data-animation=fade].enter { opacity: 1; transform: translateX(10px); } .tippy-popper[x-placement^=right] [data-animation=fade].leave { opacity: 0; transform: translateX(10px); } .tippy-popper[x-placement^=right] [data-animation=shift].enter { opacity: 1; transform: translateX(10px); } .tippy-popper[x-placement^=right] [data-animation=shift].leave { opacity: 0; transform: translateX(0); } .tippy-popper[x-placement^=right] [data-animation=scale].enter { opacity: 1; transform: translateX(10px) scale(1); } .tippy-popper[x-placement^=right] [data-animation=scale].leave { opacity: 0; transform: translateX(0) scale(0); } .tippy-tooltip { position: relative; color: rgb(var(--color-secondary-900)); border-radius: 5px; font-size: 0.95rem; padding: 0.9rem 1.2rem; text-align: left; line-height: 1.24em; will-change: transform; background-color: rgb(var(--color-white)); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 0 1px rgba(0, 0, 0, 0.21); } .tippy-tooltip p { line-height: 1.1; } .tippy-tooltip p:last-of-type { margin-bottom: 0; } .tippy-tooltip [x-arrow] { position: absolute; width: 0; height: 0; } .tippy-tooltip [x-circle] { position: absolute; will-change: transform; background-color: rgb(var(--color-white)); border-radius: 50%; width: 130%; width: calc(110% + 2rem); left: 50%; top: 50%; z-index: -1; overflow: hidden; transition: all ease; } .tippy-tooltip [x-circle]:before { content: ""; padding-top: 90%; float: left; } .tippy-tooltip--small { padding: 0.25rem 0.5rem; font-size: 0.8rem; } .tippy-tooltip--big { padding: 0.6rem 1.2rem; font-size: 1.2rem; } .tippy-tooltip[data-animatefill] { overflow: hidden; background-color: transparent; } .tippy-tooltip[data-interactive] { pointer-events: auto; } .tippy-tooltip[data-inertia] { transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85); } @media (max-width: 450px) { .tippy-popper { max-width: 96%; max-width: calc(100% - 20px); } } .pill { font-size: 85%; font-weight: 700; padding: 3px 6px; display: inline-block; margin: 0 6px; border-radius: 12px; text-align: center; } .pill--small { padding: 1px 2px; line-height: 1em; } .pill .fa { margin: 0; } .pill--noround { border-radius: 0px; } .pill--smallMargin { margin: 0 2px; } .pill { /* For Slicer properties select */ } .pill--hide { display: none; } .pill--query { margin-left: 0; width: 47px; border-radius: 5px; padding: 5px 2px; font-size: 75%; } .pill--query .Icon { margin: 0; } .pill--sessionProperties { width: 70px !important; } .pill--ABTest { background-color: rgb(var(--color-extra-violet-500)); color: rgb(var(--color-white)); } .pill--App { background-color: rgb(var(--color-success-300)); color: rgb(var(--color-success-700)); } .pill--Common { background-color: rgb(var(--color-extra-indigo-300)); color: rgb(var(--color-extra-indigo-700)); } .pill--Device { background-color: rgb(var(--color-gray-300)); color: rgb(var(--color-gray-700)); } .pill--Geo { background-color: rgb(var(--color-teal-300)); color: rgb(var(--color-teal-700)); } .pill--User { background-color: rgb(var(--color-secondary-300)); color: rgb(var(--color-secondary-700)); } .pill--Participant { background-color: rgb(var(--color-secondary-800)); color: rgb(var(--color-secondary-100)); font-size: 10px; } .pill--Sensor { background-color: rgb(var(--color-extra-orange-300)); color: rgb(var(--color-extra-orange-700)); } .pill--HMD { background-color: rgb(var(--color-primary-300)); color: rgb(var(--color-primary-700)); } .pill--Custom { background-color: rgb(var(--color-secondary-500)); color: rgb(var(--color-white)); } .pill--Warning { background-color: rgb(var(--color-error-300)); color: rgb(var(--color-error-700)); } .pill--Tag { background-color: rgb(var(--color-extra-pink-500)); color: rgb(var(--color-extra-pink-900)); } .pill--ExitPoll { background-color: rgb(var(--color-extra-violet-300)); color: rgb(var(--color-extra-violet-700)); } .pill--Event { background-color: rgb(var(--color-extra-violet-300)); color: rgb(var(--color-extra-violet-700)); } .pill--Metrics { background-color: rgb(var(--color-extra-green-300)); color: rgb(var(--color-extra-green-700)); } .pill--XRPF { background-color: rgb(var(--color-extra-orange-500)); color: rgb(var(--color-white)); } .pill { /* For Slicer operators select */ } .pill--operator { display: flex; align-items: center; justify-content: center; margin-left: 0; margin-right: 10px; width: 40px; min-width: 40px; min-height: 20px; border-radius: 5px; padding: 3px 2px; font-size: 11px; } .pill__symbol { font-size: 10pt; line-height: 10px; text-align: center; } .pill .fa { padding-top: 1px; padding-bottom: 1px; } .pill--primary { color: rgb(var(--color-white)); background-color: rgb(var(--color-primary-500)); border: 1px solid rgb(var(--color-primary-500)); } .pill--o-primary { color: rgb(var(--color-primary-500)); border: 1px solid rgb(var(--color-primary-500)); } .pill--secondary { color: rgb(var(--color-white)); background-color: rgb(var(--color-secondary-500)); border: 1px solid rgb(var(--color-secondary-500)); } .pill--o-secondary { color: rgb(var(--color-secondary-500)); border: 1px solid rgb(var(--color-secondary-500)); } .pill--gray { color: rgb(var(--color-white)); background-color: rgb(var(--color-gray-500)); border: 1px solid rgb(var(--color-gray-500)); } .pill--o-gray { color: rgb(var(--color-gray-500)); border: 1px solid rgb(var(--color-gray-500)); } .pill--white { color: rgb(var(--color-white)); background-color: rgb(var(--color-white)); border: 1px solid rgb(var(--color-white)); } .pill--o-white { color: rgb(var(--color-white)); border: 1px solid rgb(var(--color-white)); } .pill--black { color: rgb(var(--color-white)); background-color: rgb(var(--color-black)); border: 1px solid rgb(var(--color-black)); } .pill--o-black { color: rgb(var(--color-black)); border: 1px solid rgb(var(--color-black)); } .pill--error { color: rgb(var(--color-white)); background-color: rgb(var(--color-error-500)); border: 1px solid rgb(var(--color-error-500)); } .pill--o-error { color: rgb(var(--color-error-500)); border: 1px solid rgb(var(--color-error-500)); } .pill--success { color: rgb(var(--color-white)); background-color: rgb(var(--color-success-500)); border: 1px solid rgb(var(--color-success-500)); } .pill--o-success { color: rgb(var(--color-success-500)); border: 1px solid rgb(var(--color-success-500)); } .pill--warning { color: rgb(var(--color-white)); background-color: rgb(var(--color-warning-500)); border: 1px solid rgb(var(--color-warning-500)); } .pill--o-warning { color: rgb(var(--color-warning-500)); border: 1px solid rgb(var(--color-warning-500)); } .pill--teal { color: rgb(var(--color-white)); background-color: rgb(var(--color-teal-500)); border: 1px solid rgb(var(--color-teal-500)); } .pill--o-teal { color: rgb(var(--color-teal-500)); border: 1px solid rgb(var(--color-teal-500)); } .pill--extra-red { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-red-500)); border: 1px solid rgb(var(--color-extra-red-500)); } .pill--o-extra-red { color: rgb(var(--color-extra-red-500)); border: 1px solid rgb(var(--color-extra-red-500)); } .pill--extra-orange { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-orange-500)); border: 1px solid rgb(var(--color-extra-orange-500)); } .pill--o-extra-orange { color: rgb(var(--color-extra-orange-500)); border: 1px solid rgb(var(--color-extra-orange-500)); } .pill--extra-yellow { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-yellow-500)); border: 1px solid rgb(var(--color-extra-yellow-500)); } .pill--o-extra-yellow { color: rgb(var(--color-extra-yellow-500)); border: 1px solid rgb(var(--color-extra-yellow-500)); } .pill--extra-green { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-green-500)); border: 1px solid rgb(var(--color-extra-green-500)); } .pill--o-extra-green { color: rgb(var(--color-extra-green-500)); border: 1px solid rgb(var(--color-extra-green-500)); } .pill--extra-blue { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-blue-500)); border: 1px solid rgb(var(--color-extra-blue-500)); } .pill--o-extra-blue { color: rgb(var(--color-extra-blue-500)); border: 1px solid rgb(var(--color-extra-blue-500)); } .pill--extra-indigo { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-indigo-500)); border: 1px solid rgb(var(--color-extra-indigo-500)); } .pill--o-extra-indigo { color: rgb(var(--color-extra-indigo-500)); border: 1px solid rgb(var(--color-extra-indigo-500)); } .pill--extra-violet { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-violet-500)); border: 1px solid rgb(var(--color-extra-violet-500)); } .pill--o-extra-violet { color: rgb(var(--color-extra-violet-500)); border: 1px solid rgb(var(--color-extra-violet-500)); } .pill--extra-pink { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-pink-500)); border: 1px solid rgb(var(--color-extra-pink-500)); } .pill--o-extra-pink { color: rgb(var(--color-extra-pink-500)); border: 1px solid rgb(var(--color-extra-pink-500)); } .pill { padding: 0px 2px; width: 58px; min-width: 58px; overflow: hidden; text-overflow: ellipsis; } /* ******************************************************************************************* * This is the typography file. Themeing fonts is not supported, but can be built out * * if truly necessary. * ******************************************************************************************* Note: Fonts are imported using webfontloader ("WebFont.load") within Javascript. Check index.js for more info. – Rob */ /*------------------------------------*\ # Type Default Settings \*------------------------------------*/ *, html, body { font-family: "Onest"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizeLegibility; } h4, h5, h6 { margin: 36px 0 24px 0; color: #000000; line-height: 1.25em; font-weight: 400; } h3 { font-size: 16px; font-weight: 700; color: rgb(var(--color-secondary-700)); } h4 { font-size: 0.9558823529rem; } h5 { font-size: 0.9027777778rem; } h6 { font-size: 0.8125rem; } .title-1 { color: rgb(var(--color-white)); font-size: 2.731092437rem; font-weight: 400; line-height: 1.25em; } .title-1-no-color { font-size: 2.731092437rem; font-weight: 400; line-height: 1.25em; } .title-2 { color: rgb(var(--color-primary-500)); font-size: 2.731092437rem; font-weight: 400; line-height: 1.25em; } .H1 { color: rgb(var(--color-primary-500)); line-height: 1.25em; font-weight: 400; } .H1-nocolor { line-height: 1.25em; font-weight: 400; } .H2 { font-size: 0.8812364425rem; line-height: 0.9170946442em; font-weight: 400; color: rgb(var(--color-gray-600)); } .H3 { line-height: 1.0869565217em; font-weight: 400; color: rgb(var(--color-primary-500)); } .fig-1 { font-size: 2.6209677419rem; font-weight: 400; line-height: 1.25em; } .fig-2 { font-size: 2rem; font-weight: 400; line-height: 1.25em; } .fig-3 { font-size: 1.3750095193rem; font-weight: 400; line-height: 1.25em; } .insight-1 { font-size: 1.3750211542rem; line-height: 1.25em; font-weight: 400; } .insight-2 { font-size: 0.8783783784rem 7; line-height: 0.8333333333em; font-weight: 400; } .body-copy { font-size: 1.0030864198rem 5; line-height: 0.9191176471em; font-weight: 400; color: rgb(var(--color-secondary-900)); } .body-copy--highlight { color: rgb(var(--color-secondary-500)); } .body-copy-small { font-size: 0.8750673129rem; line-height: 0.8333333333em; font-weight: 400; } .digits { /* 4th: */ font-weight: 400; display: block; font-size: 32px; color: rgb(var(--color-secondary-900)); letter-spacing: 0; } .descriptions { font-weight: 400; font-size: 14px; color: rgb(var(--color-secondary-900)); letter-spacing: 0; line-height: 20px; } .descriptions--400 { color: rgb(var(--color-gray-600)); } .disabled { opacity: 0.4; color: rgb(var(--color-gray-600)); cursor: not-allowed; } .disabled:hover { color: rgb(var(--color-gray-600)); } .link { font-size: 0.8750673129rem; line-height: 0.9166238909em; font-weight: 700; display: inline-block; } .link--disabled { opacity: 0.4; color: rgb(var(--color-gray-600)); cursor: not-allowed; } .link--disabled:hover { color: rgb(var(--color-gray-600)); } .link-400 { font-size: 0.7499884617rem; line-height: 1.25em; font-weight: 700; } .hover-underline:hover { text-decoration: underline; } .simple-text-link { cursor: pointer; color: rgb(var(--color-secondary-500)); } .simple-text-link--disabled { cursor: not-allowed; color: rgb(var(--color-gray-500)); font-weight: 400 !important; text-decoration: none !important; } .simple-text-link--small { font-size: 10pt; } .simple-text-link--active { font-weight: 700; } .simple-text-link--withSpacing { display: inline-block; margin: 0 5px; } .simple-text-link:hover { text-decoration: underline; } p { margin: 20px 0; font-size: 1rem; line-height: 1.5em; color: rgb(var(--color-gray-700)); } p:first-of-type { margin-top: 0; } a { color: rgb(var(--color-secondary-500)); text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } a:hover { color: rgb(var(--color-secondary-700)); cursor: pointer; } ul, ol { margin: 0 0 0 20px; } ul li, ol li { margin-top: 10px; line-height: 1.5em; color: inherit; } ul ul, ul ol, ol ul, ol ol { margin-top: 0; } ul li { list-style: disc; } ul ul li { list-style: circle; } ol li { list-style: decimal; } hr { height: 1px; margin: 0px -20px; border: none; background-color: rgb(var(--color-gray-300)); } sub { vertical-align: sub; font-size: smaller; } blockquote { margin: 30px 0; font-size: 1.4375rem; line-height: 1.5em; color: #505050; text-align: center; font-style: italic; } table { width: 100%; border-collapse: collapse; } table, td, th { text-align: left; } th { font-weight: 800; } th, td { padding: 15px; } figure { margin: 30px 0; } figure img { margin: 0; } figcaption { margin-top: 10px; color: rgb(var(--color-gray-500)); font-size: 16px; } pre { display: block; margin: 0 0 40px 0; padding: 20px; background-color: rgb(var(--color-gray-500)); border: 1px solid #dadada; overflow: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } pre code { position: static; padding: 0; border: none; line-height: 1.5em; } code { background-color: rgb(var(--color-gray-800)); border: 1px solid rgb(var(--color-gray-900)); border-radius: 3px; padding: 1px 2px; color: rgb(var(--color-white)); font-weight: 700; font-size: 10pt; font-family: "Source Code Pro", Courier New, Courier, monospace; } code em { font-style: normal; font-weight: 400; color: rgb(var(--color-gray-500)); } code strong { font-weight: 700; color: rgb(var(--color-extra-green-500)); } em, i, .italic { font-style: italic; } strong, b { font-weight: 800; } .bold { font-weight: 800; } .underline { text-decoration: underline; } .cta { font-size: 0.857em; font-weight: 800; color: rgb(var(--color-gray-600)); letter-spacing: 0.98px; text-transform: uppercase; } .regular { font-weight: 400; } .light { font-weight: 300; } .text-sm { font-size: 0.75em; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-with-hint { border-bottom: 1px dashed; border-bottom-color: rgb(var(--color-gray-600)); border-bottom-color: inherit; cursor: help; } /* Some Metrics Page Elements*/ .Metrics__dividerTitle { color: rgb(var(--color-gray-600)); padding-top: 30px; padding-bottom: 5px; margin-bottom: 15px; font-size: 1em; position: relative; } .Metrics__dividerTitle:after { content: ""; position: absolute; bottom: 0; right: 8px; left: 8px; height: 1px; background: rgba(var(--color-gray-600), 0.2); } @media only screen and (min-width: 48em) { .hide-sm { display: none; } } .show-sm { visibility: hidden; } @media only screen and (min-width: 48em) { .show-sm { visibility: visible; } } @media only screen and (min-width: 62em) { .hide-md { display: none; } } .show-md { visibility: hidden; } @media only screen and (min-width: 62em) { .show-md { visibility: visible; } } @media only screen and (min-width: 75em) { .hide-lg { display: none; } } .show-lg { visibility: hidden; } @media only screen and (min-width: 75em) { .show-lg { visibility: visible; } } @media only screen and (max-width: 48em) { .hide-xs { display: none; } } .show-xs { visibility: hidden; } @media only screen and (max-width: 48em) { .show-xs { visibility: visible; } } .row-column { flex-direction: column; } .children-bottom-right { display: flex; align-items: flex-end; justify-content: flex-end; } .grow { flex: 1; } .self-bottom { align-self: flex-bottom; } .self-top { align-self: flex-top; } .self-center { align-self: center; } .justify-self-end { justify-self: flex-end; } .justify-center { justify-content: center; } .place-center { place-self: center; } .self-end { margin-left: auto; justify-content: flex-end; } .space-around { justify-content: space-around; } .space-between { justify-content: space-between; } .rowBlock { margin-right: -0.5rem; margin-left: -0.5rem; } .row-nomargin { display: flex; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; margin: 0; } .col-xs-6-nopadding { flex: 0 0 auto; max-width: 100%; box-sizing: border-box; flex-basis: 50%; max-width: 50%; padding-left: 0; padding-right: 0; } .col-xs-half { flex: 0 0 auto; max-width: 100%; box-sizing: border-box; flex-basis: 8.33333333%; max-width: 8.33333333%; max-width: 4.1666666667%; flex-basis: 4.1666666667%; } .col-xs-12-nopadding { flex: 0 0 auto; max-width: 100%; box-sizing: border-box; flex-basis: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .dash3-col-xs-12 { padding-left: 20px !important; padding-right: 20px !important; } .items-stretch { align-items: stretch; } .items-center { align-items: center; } .h-100 { height: 100%; } .w-100 { width: 100%; } .panel-header { align-self: flex-start; padding-top: 1.5rem; padding-bottom: 1.5rem; width: 100%; } .panel-footer { align-self: flex-end; padding-top: 1.5rem; padding-bottom: 1.5rem; width: 100%; } .wrapper { position: relative; } .wrapper--phantomHeight { height: 200px; } .flex { display: flex; } .relative { position: relative; } .legends-container { padding: 10px 0 10px 0; display: flex; flex-wrap: wrap; justify-content: center; } .legends-container-dash3 { font-family: "Onest"; } .legends-container-dash3 .legend { border-radius: 5px; padding-left: 12px !important; } .legends-container-dash3 .legend__label { margin-right: 8px !important; } .legends-container .legend { display: flex; position: relative; flex-basis: 120px; max-width: 33%; align-items: center; margin-left: 10px; margin-bottom: 5px; padding: 10px 8px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 3px; } .legends-container .legend.nocursor { cursor: default !important; } .legends-container .legend { -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .legends-container .legend--clickable { flex-grow: 1; background: rgb(var(--color-gray-100)); } .legends-container .legend--clickable.active { background: rgb(var(--color-white)); } .legends-container .legend--clickable.active .legend__label { opacity: 1; color: transparent; } .legends-container .legend--clickable.active .legend__bgcolor { opacity: 0.3; } .legends-container .legend--clickable:hover .legend__label { opacity: 1; } .legends-container .legend--clickable:hover { cursor: pointer; } .legends-container .legend--clickable .legend__text-container { flex-direction: column; } .legends-container .legend--clickable .legend__text { font-family: "Onest"; color: rgb(var(--color-title-dash3)); width: 100%; } .legends-container .legend--unselected { background: rgb(var(--color-gray-300)); opacity: 0.5; } .legends-container .legend__bgcolor { position: absolute; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .legends-container .legend__label { width: 10px; height: 10px; opacity: 0.6; margin-right: 5px; -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -ms-transition: 0.2s all; -o-transition: 0.2s all; transition: 0.2s all; } .legends-container .legend__label--hasborder { margin-right: 0px; border-left-width: 10px; border-left-style: solid; height: 100%; } .legends-container .legend__text-container { position: relative; z-index: 1; display: flex; flex-grow: 1; flex-direction: column; align-items: flex-end; text-align: right; } .legends-container .legend__text { padding: 3px 0; font-weight: bold; overflow: hidden; } .legends-container .legend__ratio { display: block; width: 100%; } .dark-mode .legends-container-dash3 .legend { background: rgba(var(--color-white), 0.05); } .dark-mode .legends-container-dash3 .legend__text { color: rgb(var(--color-gray-300)); } .dark-mode .legend--clickable { background: rgb(var(--color-gray-200)); } .piechart { height: auto; margin-top: 50px; } .piechart > svg { overflow: visible; display: block; height: 500px; } .piechart__slice { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .piechart__slice:hover { cursor: pointer; } .piechart__labelgroup { overflow: visible; } .piechart__labelbg { fill: rgb(var(--color-white)); stroke-width: 1px; transform: translateY(5px); shape-rendering: auto; } .piechart__linesAndlabels { position: relative; z-index: 1; opacity: 0; transition: 0.2s opacity; } .piechart__linesAndlabels--active { opacity: 1; } .piechart__textLine { stroke: rgba(0, 0, 0, 0.2); stroke-width: 1px; } .piechart__lineDot { fill: rgba(0, 0, 0, 0.4); } .piechart__titletext { font-family: "Onest"; fill: rgb(var(--color-gray-900)); font-weight: 600; } .piechart__valueText { fill: rgb(var(--color-gray-900)); font-weight: 600; font-size: 14px; transform: translateY(-5px); } .dark-mode .piechart__labelbg { fill: rgb(var(--color-gray-200)); } .mapchart__region { fill: rgb(var(--color-secondary-400)); stroke: rgb(var(--color-white)); stroke-width: 0.5; } .apexcharts-tooltip { z-index: 9999 !important; pointer-events: none !important; } .apexcharts-tooltip.apexcharts-theme-light, .apexcharts-tooltip.apexcharts-theme-dark { z-index: 9999 !important; } .apexcharts-canvas { overflow: visible !important; } .math__description { font-size: 14px; font-family: "Onest"; color: rgb(var(--color-gray-700)); } .math__value { font-family: "Onest"; font-size: 14px; font-weight: 600; } .dark-mode__copyButton { color: rgb(var(--color-white)); } .dark-mode .AnimatedCheckbox__box { background: transparent; } .dark-mode { /* dash3 */ } .dark-mode .PageContainerDash3 { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .ComparisonFigure-dash3__beforeTitle, .dark-mode .ComparisonFigure-dash3__afterTitle { color: rgb(var(--color-white)); } .dark-mode .ComparisonFigure-dash3--navy { color: rgba(var(--color-white), 0.5); } .dark-mode .IllustrationFigure-dash3__illustration__text { color: rgb(var(--color-white)); } .dark-mode .Table-dash3 th { color: rgb(var(--color-white)); } .dark-mode .Table-dash3 td { color: rgb(var(--color-white)); } .dark-mode .RetentionTable-dash3 th { color: rgb(var(--color-white)); } .dark-mode { /* Dashboard card */ } .dark-mode .DashboardCard-dash3 { background: rgba(var(--color-white), 0.1); border: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .DashboardCard-dash3--placeholder { background: transparent !important; border: none; } .dark-mode .DashboardCard-dash3--alt { color: rgb(var(--color-white)); background-color: rgb(var(--color-soft-purple-600)); border: none; } .dark-mode .DashboardCard-dash3__header--border { border-bottom: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .DashboardCard-dash3__header__icon { color: rgba(var(--color-white), 0.5); } .dark-mode .DashboardCard-dash3__header__icon--alt { color: rgba(var(--color-white), 1); } .dark-mode .DashboardCard-dash3__header__icon--active { color: rgba(var(--color-white), 1); } .dark-mode .DashboardCard-dash3__header h3 { color: rgb(var(--color-white)); font-weight: 500; } .dark-mode .DashboardCard-dash3__content__title { color: rgb(var(--color-white)); } .dark-mode .DashboardCard-dash3__content__description__text h4, .dark-mode .DashboardCard-dash3__content__description__text p { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .DashboardCard-dash3__infoTooltip p { color: rgb(var(--color-white)); } .dark-mode .DashboardCard-dash3__infoTooltip .help-icon { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .DashboardCard-dash3__emptyDataCard h3 { color: rgb(var(--color-white)); } .dark-mode .DashboardCard-dash3__emptyDataCard p { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ExitPollResults-dash3__questionChart__npsText { color: rgb(var(--color-extra-violet-dash3-800)); } .dark-mode .LineChart__noData { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .LineChart__noData__text { background-color: rgba(var(--color-soft-purple-600), 0.15); color: rgb(var(--color-gray-300)); } .dark-mode .LineChart .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .LineChart .apexcharts-yaxis text, .dark-mode .LineChart .apexcharts-xaxis text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .LineChart .apexcharts-legend-text { color: rgb(var(--color-extra-lilac-dash3-800)) !important; } .dark-mode .LineChart .apexcharts-tooltip { background-color: rgb(var(--color-extra-navy-dash3-900)); border: solid 0.1px rgba(var(--color-gray-700), 0.5); color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .LineChart .apexcharts-tooltip-title { color: rgb(var(--color-extra-lilac-dash3-800)); background-color: rgba(var(--color-gray-700), 0.5) !important; border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important; } .dark-mode .LineChart__zoomHint { color: rgba(var(--color-gray-300), 0.8); background: rgba(var(--color-gray-800), 0.9); } .dark-mode .FunnelChart__noData { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .FunnelChart__noData__text { background-color: rgba(var(--color-soft-purple-600), 0.15); color: rgb(var(--color-gray-300)); } .dark-mode .FunnelChart .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .FunnelChart .apexcharts-yaxis text, .dark-mode .FunnelChart .apexcharts-xaxis text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .FunnelChart .apexcharts-legend-text { color: rgb(var(--color-extra-lilac-dash3-800)) !important; } .dark-mode .FunnelChart .apexcharts-tooltip { background-color: rgb(var(--color-extra-navy-dash3-900)); border: solid 0.1px rgba(var(--color-gray-700), 0.5); color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .FunnelChart .apexcharts-tooltip-title { color: rgb(var(--color-extra-lilac-dash3-800)); background-color: rgba(var(--color-gray-700), 0.5) !important; border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important; } .dark-mode .ScatterChart__noData { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ScatterChart__noData__text { background-color: rgba(var(--color-soft-purple-600), 0.15); color: rgb(var(--color-gray-300)); } .dark-mode .ScatterChart .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ScatterChart .apexcharts-yaxis text, .dark-mode .ScatterChart .apexcharts-xaxis text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ScatterChart .apexcharts-legend-text { color: rgb(var(--color-extra-lilac-dash3-800)) !important; } .dark-mode .ScatterChart .apexcharts-tooltip { background-color: rgb(var(--color-extra-navy-dash3-900)); border: solid 0.1px rgba(var(--color-gray-700), 0.5); color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ScatterChart .apexcharts-tooltip-title { color: rgb(var(--color-extra-lilac-dash3-800)); background-color: rgba(var(--color-gray-700), 0.5) !important; border-bottom: solid 0.1px rgba(var(--color-gray-700), 0.5) !important; } .dark-mode .ScatterChart__zoomHint { color: rgba(var(--color-gray-300), 0.8); background: rgba(var(--color-gray-800), 0.9); } .dark-mode .BubbleChart .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .BubbleChart .apexcharts-yaxis text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .RadarChart .apexcharts-datalabel { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .RadarChart .apexcharts-text { fill: rgb(var(--color-extra-lilac-dash3-900)); } .dark-mode .RadarChart .apexcharts-legend-text { color: rgb(var(--color-extra-lilac-dash3-800)) !important; } .dark-mode .RadarChart .apexcharts-tooltip { background-color: rgb(var(--color-extra-navy-dash3-900)); border: 1px solid rgba(var(--color-gray-700), 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-mode .RadarChart .apexcharts-tooltip .radar-tooltip__title { color: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .RadarChart .apexcharts-tooltip .radar-tooltip__value { color: rgb(var(--color-extra-violet-dash3-800)); } .dark-mode .RadarChart .apexcharts-tooltip .radar-tooltip__body { color: rgba(255, 255, 255, 0.7); } .dark-mode .ColumnChart-dash3 .apexcharts-xaxis-texts-g text { fill: rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .DonutChart .apexcharts-legend-text, .dark-mode .PieChart .apexcharts-legend-text, .dark-mode .SVGChart .apexcharts-legend-text { color: rgb(var(--color-extra-lilac-dash3-800)) !important; } .dark-mode .DashboardRow__headerText { color: rgb(var(--color-white)); } .dark-mode .auditLog-dash3__table { border: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode { /* date picker */ } .dark-mode .DayPicker_transitionContainer { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .DayPickerNavigation_button { background-color: transparent; border: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .DayPickerKeyboardShortcuts_panel { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .CalendarMonth { background: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .CalendarMonth_caption { color: rgb(var(--color-white)); } .dark-mode .CalendarDay__default { background-color: transparent; color: rgba(var(--color-white), 0.9); border: 1px solid rgba(242, 240, 240, 0.15); } .dark-mode .CalendarDay__default:hover { color: rgb(var(--color-white)); background-color: rgb(var(--color-soft-purple-600)); } .dark-mode .CalendarDay__selected { background: rgb(var(--color-extra-midnight-dash3-600)); border: 1px solid rgb(var(--color-extra-midnight-dash3-500)); color: #fff; } .dark-mode .CalendarDay__selected_span { background: rgb(var(--color-extra-midnight-dash3-400)); border: 1px solid rgb(var(--color-extra-midnight-dash3-300)); color: #fff; } .dark-mode .CalendarDay__blocked_calendar { color: rgb(var(--color-gray-800)); background: transparent; border-color: transparent; } .dark-mode .CalendarDay__blocked_calendar:hover { background: transparent; color: rgb(var(--color-gray-800)); } .dark-mode .count--success h4 { color: rgb(var(--color-success-400)); } .dark-mode .count--failed h4 { color: rgb(var(--color-error-400)); } .dark-mode .SceneViewerCanvas__viewSelectButton--active { background-color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .SlicerQueryWidget__headerRightComponent span { color: rgb(var(--color-white)) !important; } .dark-mode .TextWidget-dash3__content p { color: rgb(var(--color-white)); } .mantine-DatePicker-weekday { padding: 0; width: 36px; height: 36px; text-align: center; vertical-align: middle; } .mantine-DatePicker-day { font-weight: 600; border-radius: 0; } .mantine-DatePicker-day:where([data-in-range]) { background-color: rgb(var(--color-extra-indigo-dash3-400)); color: white; } .mantine-DatePicker-day:where([data-in-range]):hover { background-color: rgb(var(--color-extra-indigo-dash3-400)); } .mantine-DatePicker-day:where([data-selected]) { background-color: rgb(var(--color-extra-indigo-dash3-800)) !important; color: white; } .mantine-DatePicker-day:where([data-selected]):hover { background-color: rgb(var(--color-extra-indigo-dash3-800)) !important; } .mantine-DatePicker-day:not([data-static], [data-disabled], [data-selected], [data-in-range]):hover { background-color: rgb(var(--color-gray-300)); color: rgb(var(--color-soft-purple-600)); } /* Header controls styling */ .mantine-DatePicker-calendarHeaderLevel:hover, .mantine-DatePicker-calendarHeaderControl:hover, .mantine-DatePicker-monthsListControl:hover, .mantine-DatePicker-yearsListControl:hover { background-color: rgb(var(--color-gray-200)); color: rgb(var(--color-extra-indigo-dash3-800)); } .mantine-Popover-dropdown { display: flex; } .dark-mode .mantine-DatePicker-weekday { color: rgb(var(--color-gray-200)); } .dark-mode .mantine-DatePicker-day { color: rgb(var(--color-gray-100)); } .dark-mode .mantine-DatePicker-day:where([data-in-range]) { background-color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .mantine-DatePicker-day:where([data-in-range]):hover { background-color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .mantine-DatePicker-day:not([data-static], [data-disabled], [data-selected], [data-in-range]):hover { background-color: rgba(var(--color-white), 0.1); color: rgb(var(--color-extra-indigo-dash3-100)); } .dark-mode { /* Calendar control styles */ } .dark-mode .mantine-DatePicker-calendarHeaderLevel:hover, .dark-mode .mantine-DatePicker-calendarHeaderControl:hover { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-extra-indigo-dash3-100)); } .dark-mode .mantine-DatePicker-monthsListControl, .dark-mode .mantine-DatePicker-yearsListControl { color: rgb(var(--color-white)); } .dark-mode .mantine-DatePicker-monthsListControl:hover, .dark-mode .mantine-DatePicker-yearsListControl:hover { background-color: rgba(var(--color-white), 0.05); color: rgb(var(--color-extra-indigo-dash3-100)); }