@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"); /*------------------------------------*\ # 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-dash3 { cursor: pointer; color: white; display: inline-block; padding: 10px 15px; border-radius: 5px; border: 0; } .button-dash3--noMargin { margin: 0 !important; } .button-dash3--lg { padding-top: 14px; padding-bottom: 14px; } .button-dash3--stale { opacity: 0.65; } .button-dash3 .fa { margin-left: 5px; } .button-dash3--isLoading { position: relative; overflow: hidden; } .button-dash3--isLoading:hover { cursor: default; } .button-dash3--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-dash3-size-xs { padding: 2px 12px; font-size: 12px; line-height: 12px; border: 1px solid transparent; box-sizing: border-box; } .button-dash3-size-sm { padding: 4px 14px; font-size: 14px; line-height: 14px; border: 1px solid transparent; box-sizing: border-box; } .button-dash3-size-md { padding: 6px 16px; font-size: 16px; line-height: 16px; border: 1px solid transparent; box-sizing: border-box; } .button-dash3-size-lg { padding: 8px 18px; font-size: 18px; line-height: 18px; border: 1px solid transparent; box-sizing: border-box; } .button-dash3-size-xl { padding: 10px 20px; font-size: 20px; line-height: 20px; border: 1px solid transparent; box-sizing: border-box; } .button-dash3-primary { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-primary:hover { background-color: rgb(var(--color-primary-dash3-600)); } .button-dash3-primary.button-dash3--isLoading { background-color: rgb(var(--color-primary-dash3-200)); } .button-dash3-primary.button-dash3--isLoading:hover { background-color: rgb(var(--color-primary-dash3-200)) !important; } .button-dash3-primary.button-dash3--disabled { background-color: rgb(var(--color-primary-dash3-200)) !important; cursor: default; } .button-dash3-primary.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-primary.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-primary:hover { color: rgb(var(--color-primary-dash3-600)); text-decoration: underline; } .button-dash3-text-primary.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-secondary { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-secondary:hover { background-color: rgb(var(--color-secondary-dash3-600)); } .button-dash3-secondary.button-dash3--isLoading { background-color: rgb(var(--color-secondary-dash3-200)); } .button-dash3-secondary.button-dash3--isLoading:hover { background-color: rgb(var(--color-secondary-dash3-200)) !important; } .button-dash3-secondary.button-dash3--disabled { background-color: rgb(var(--color-secondary-dash3-200)) !important; cursor: default; } .button-dash3-secondary.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-secondary.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-secondary:hover { color: rgb(var(--color-secondary-dash3-600)); text-decoration: underline; } .button-dash3-text-secondary.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-gray { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-gray:hover { background-color: rgb(var(--color-gray-dash3-700)); } .button-dash3-gray.button-dash3--isLoading { background-color: rgb(var(--color-gray-dash3-200)); } .button-dash3-gray.button-dash3--isLoading:hover { background-color: rgb(var(--color-gray-dash3-200)) !important; } .button-dash3-gray.button-dash3--disabled { background-color: rgb(var(--color-gray-dash3-200)) !important; cursor: default; } .button-dash3-gray.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-gray.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-gray:hover { color: rgb(var(--color-gray-dash3-700)); text-decoration: underline; } .button-dash3-text-gray.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-white { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-white:hover { background-color: rgb(var(--color-white)); } .button-dash3-white.button-dash3--isLoading { background-color: rgb(var(--color-white-dash3-200)); } .button-dash3-white.button-dash3--isLoading:hover { background-color: rgb(var(--color-white-dash3-200)) !important; } .button-dash3-white.button-dash3--disabled { background-color: rgb(var(--color-white-dash3-200)) !important; cursor: default; } .button-dash3-white.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-white.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-white:hover { color: rgb(var(--color-white)); text-decoration: underline; } .button-dash3-text-white.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-black { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-black:hover { background-color: rgb(var(--color-black)); } .button-dash3-black.button-dash3--isLoading { background-color: rgb(var(--color-black-dash3-200)); } .button-dash3-black.button-dash3--isLoading:hover { background-color: rgb(var(--color-black-dash3-200)) !important; } .button-dash3-black.button-dash3--disabled { background-color: rgb(var(--color-black-dash3-200)) !important; cursor: default; } .button-dash3-black.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-black.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-black:hover { color: rgb(var(--color-black)); text-decoration: underline; } .button-dash3-text-black.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-error { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-error:hover { background-color: rgb(var(--color-error-dash3-600)); } .button-dash3-error.button-dash3--isLoading { background-color: rgb(var(--color-error-dash3-200)); } .button-dash3-error.button-dash3--isLoading:hover { background-color: rgb(var(--color-error-dash3-200)) !important; } .button-dash3-error.button-dash3--disabled { background-color: rgb(var(--color-error-dash3-200)) !important; cursor: default; } .button-dash3-error.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-error.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-error:hover { color: rgb(var(--color-error-dash3-600)); text-decoration: underline; } .button-dash3-text-error.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-success { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-success:hover { background-color: rgb(var(--color-success-dash3-600)); } .button-dash3-success.button-dash3--isLoading { background-color: rgb(var(--color-success-dash3-200)); } .button-dash3-success.button-dash3--isLoading:hover { background-color: rgb(var(--color-success-dash3-200)) !important; } .button-dash3-success.button-dash3--disabled { background-color: rgb(var(--color-success-dash3-200)) !important; cursor: default; } .button-dash3-success.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-success.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-success:hover { color: rgb(var(--color-success-dash3-600)); text-decoration: underline; } .button-dash3-text-success.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-warning { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-warning:hover { background-color: rgb(var(--color-warning-dash3-600)); } .button-dash3-warning.button-dash3--isLoading { background-color: rgb(var(--color-warning-dash3-200)); } .button-dash3-warning.button-dash3--isLoading:hover { background-color: rgb(var(--color-warning-dash3-200)) !important; } .button-dash3-warning.button-dash3--disabled { background-color: rgb(var(--color-warning-dash3-200)) !important; cursor: default; } .button-dash3-warning.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-warning.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-warning:hover { color: rgb(var(--color-warning-dash3-600)); text-decoration: underline; } .button-dash3-text-warning.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-red { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-red:hover { background-color: rgb(var(--color-extra-red-dash3-600)); } .button-dash3-extra-red.button-dash3--isLoading { background-color: rgb(var(--color-extra-red-dash3-200)); } .button-dash3-extra-red.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-red-dash3-200)) !important; } .button-dash3-extra-red.button-dash3--disabled { background-color: rgb(var(--color-extra-red-dash3-200)) !important; cursor: default; } .button-dash3-extra-red.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-red.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-red:hover { color: rgb(var(--color-extra-red-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-red.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-orange { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-orange:hover { background-color: rgb(var(--color-extra-orange-dash3-600)); } .button-dash3-extra-orange.button-dash3--isLoading { background-color: rgb(var(--color-extra-orange-dash3-200)); } .button-dash3-extra-orange.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-orange-dash3-200)) !important; } .button-dash3-extra-orange.button-dash3--disabled { background-color: rgb(var(--color-extra-orange-dash3-200)) !important; cursor: default; } .button-dash3-extra-orange.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-orange.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-orange:hover { color: rgb(var(--color-extra-orange-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-orange.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-yellow { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-yellow:hover { background-color: rgb(var(--color-extra-yellow-dash3-600)); } .button-dash3-extra-yellow.button-dash3--isLoading { background-color: rgb(var(--color-extra-yellow-dash3-200)); } .button-dash3-extra-yellow.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-yellow-dash3-200)) !important; } .button-dash3-extra-yellow.button-dash3--disabled { background-color: rgb(var(--color-extra-yellow-dash3-200)) !important; cursor: default; } .button-dash3-extra-yellow.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-yellow.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-yellow:hover { color: rgb(var(--color-extra-yellow-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-yellow.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-green { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-green:hover { background-color: rgb(var(--color-extra-green-dash3-600)); } .button-dash3-extra-green.button-dash3--isLoading { background-color: rgb(var(--color-extra-green-dash3-200)); } .button-dash3-extra-green.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-green-dash3-200)) !important; } .button-dash3-extra-green.button-dash3--disabled { background-color: rgb(var(--color-extra-green-dash3-200)) !important; cursor: default; } .button-dash3-extra-green.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-green.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-green:hover { color: rgb(var(--color-extra-green-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-green.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-teal { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-color: rgb(var(--color-extra-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; } .button-dash3-extra-teal:hover { background-color: rgb(var(--color-extra-teal-dash3-600)); } .button-dash3-extra-teal.button-dash3--isLoading { background-color: rgb(var(--color-extra-teal-dash3-200)); } .button-dash3-extra-teal.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-teal-dash3-200)) !important; } .button-dash3-extra-teal.button-dash3--disabled { background-color: rgb(var(--color-extra-teal-dash3-200)) !important; cursor: default; } .button-dash3-extra-teal.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-teal.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-text-extra-teal { display: flex; justify-content: center; align-items: center; font-family: "Onest"; font-weight: 700; color: rgb(var(--color-extra-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; margin-right: 15px; } .button-dash3-text-extra-teal:hover { color: rgb(var(--color-extra-teal-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-teal.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-text-extra-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-dash3-extra-blue { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-blue:hover { background-color: rgb(var(--color-extra-blue-dash3-600)); } .button-dash3-extra-blue.button-dash3--isLoading { background-color: rgb(var(--color-extra-blue-dash3-200)); } .button-dash3-extra-blue.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-blue-dash3-200)) !important; } .button-dash3-extra-blue.button-dash3--disabled { background-color: rgb(var(--color-extra-blue-dash3-200)) !important; cursor: default; } .button-dash3-extra-blue.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-blue.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-blue:hover { color: rgb(var(--color-extra-blue-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-blue.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-indigo { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-indigo:hover { background-color: rgb(var(--color-extra-indigo-dash3-600)); } .button-dash3-extra-indigo.button-dash3--isLoading { background-color: rgb(var(--color-extra-indigo-dash3-200)); } .button-dash3-extra-indigo.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-indigo-dash3-200)) !important; } .button-dash3-extra-indigo.button-dash3--disabled { background-color: rgb(var(--color-extra-indigo-dash3-200)) !important; cursor: default; } .button-dash3-extra-indigo.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-indigo.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-indigo:hover { color: rgb(var(--color-extra-indigo-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-indigo.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-violet { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-violet:hover { background-color: rgb(var(--color-extra-violet-dash3-600)); } .button-dash3-extra-violet.button-dash3--isLoading { background-color: rgb(var(--color-extra-violet-dash3-200)); } .button-dash3-extra-violet.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-violet-dash3-200)) !important; } .button-dash3-extra-violet.button-dash3--disabled { background-color: rgb(var(--color-extra-violet-dash3-200)) !important; cursor: default; } .button-dash3-extra-violet.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-violet.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-violet:hover { color: rgb(var(--color-extra-violet-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-violet.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-extra-pink { display: flex; justify-content: center; align-items: center; min-height: 38px; min-width: 90px; padding: 10px 15px; color: rgb(var(--color-white)) !important; font-family: "Onest"; font-weight: 700; letter-spacing: 0.02em; background-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; } .button-dash3-extra-pink:hover { background-color: rgb(var(--color-extra-pink-dash3-600)); } .button-dash3-extra-pink.button-dash3--isLoading { background-color: rgb(var(--color-extra-pink-dash3-200)); } .button-dash3-extra-pink.button-dash3--isLoading:hover { background-color: rgb(var(--color-extra-pink-dash3-200)) !important; } .button-dash3-extra-pink.button-dash3--disabled { background-color: rgb(var(--color-extra-pink-dash3-200)) !important; cursor: default; } .button-dash3-extra-pink.button-dash3--disabled:hover { text-decoration: none; } .button-dash3-extra-pink.button-dash3--disabled .SvgIcon--icon { cursor: default !important; } .button-dash3-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; margin-right: 15px; } .button-dash3-text-extra-pink:hover { color: rgb(var(--color-extra-pink-dash3-600)); text-decoration: underline; } .button-dash3-text-extra-pink.button--disabled { color: rgb(var(--color-gray-400)); cursor: default; } .button-dash3-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-dash3-text-primary { color: rgb(var(--color-primary-dash3-500)); } .dark-mode .button-dash3-text-primary:hover { color: rgb(var(--color-primary-dash3-600)); } .dark-mode .button-dash3-text-secondary { color: rgb(var(--color-secondary-dash3-500)); } .dark-mode .button-dash3-text-secondary:hover { color: rgb(var(--color-secondary-dash3-600)); } .dark-mode .button-dash3-text-gray { color: rgb(var(--color-gray-dash3-100)); } .dark-mode .button-dash3-text-gray:hover { color: rgb(var(--color-gray-dash3-400)); } .dark-mode .button-dash3-text-white { color: rgb(var(--color-white-dash3-500)); } .dark-mode .button-dash3-text-white:hover { color: rgb(var(--color-white-dash3-600)); } .dark-mode .button-dash3-text-black { color: rgb(var(--color-black-dash3-500)); } .dark-mode .button-dash3-text-black:hover { color: rgb(var(--color-black-dash3-600)); } .dark-mode .button-dash3-text-error { color: rgb(var(--color-error-dash3-500)); } .dark-mode .button-dash3-text-error:hover { color: rgb(var(--color-error-dash3-600)); } .dark-mode .button-dash3-text-success { color: rgb(var(--color-success-dash3-500)); } .dark-mode .button-dash3-text-success:hover { color: rgb(var(--color-success-dash3-600)); } .dark-mode .button-dash3-text-warning { color: rgb(var(--color-warning-dash3-500)); } .dark-mode .button-dash3-text-warning:hover { color: rgb(var(--color-warning-dash3-600)); } .dark-mode .button-dash3-text-extra-red { color: rgb(var(--color-extra-red-dash3-500)); } .dark-mode .button-dash3-text-extra-red:hover { color: rgb(var(--color-extra-red-dash3-600)); } .dark-mode .button-dash3-text-extra-orange { color: rgb(var(--color-extra-orange-dash3-500)); } .dark-mode .button-dash3-text-extra-orange:hover { color: rgb(var(--color-extra-orange-dash3-600)); } .dark-mode .button-dash3-text-extra-yellow { color: rgb(var(--color-extra-yellow-dash3-500)); } .dark-mode .button-dash3-text-extra-yellow:hover { color: rgb(var(--color-extra-yellow-dash3-600)); } .dark-mode .button-dash3-text-extra-green { color: rgb(var(--color-extra-green-dash3-500)); } .dark-mode .button-dash3-text-extra-green:hover { color: rgb(var(--color-extra-green-dash3-600)); } .dark-mode .button-dash3-text-extra-teal { color: rgb(var(--color-extra-teal-dash3-500)); } .dark-mode .button-dash3-text-extra-teal:hover { color: rgb(var(--color-extra-teal-dash3-600)); } .dark-mode .button-dash3-text-extra-blue { color: rgb(var(--color-extra-blue-dash3-500)); } .dark-mode .button-dash3-text-extra-blue:hover { color: rgb(var(--color-extra-blue-dash3-600)); } .dark-mode .button-dash3-text-extra-indigo { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .button-dash3-text-extra-indigo:hover { color: rgb(var(--color-extra-indigo-dash3-600)); } .dark-mode .button-dash3-text-extra-violet { color: rgb(var(--color-extra-violet-dash3-500)); } .dark-mode .button-dash3-text-extra-violet:hover { color: rgb(var(--color-extra-violet-dash3-600)); } .dark-mode .button-dash3-text-extra-pink { color: rgb(var(--color-extra-pink-dash3-500)); } .dark-mode .button-dash3-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--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; overflow: hidden; } .PageContainerDash3 { display: flex; height: calc(100vh - 65px); margin-top: 65px; background: rgb(var(--color-white)); } .PageContainerDash3--bannerVisible { margin-top: 115px; } .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; } .MainContainerDash3__content .PageHeader-dash3 { min-width: 900px; } .ContentContainerDash3 { min-width: 900px; background: rgb(var(--color-white)); border-radius: 10px; border: 1px solid rgb(var(--color-gray-300)); margin: 0px 2rem 2rem 2rem; } .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; margin-right: 10px; } .ContentContainerDash3__header__section { display: flex; align-items: center; } .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: 10px; 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 */ .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: 16px; font-family: "Onest"; font-weight: 500; } .InputField { 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: 12px; font-family: "Onest"; } .InputField__label__required { color: rgb(var(--color-primary-500)); font-weight: 700; margin-left: 5px; } .InputField__wrapper { position: relative; } .InputField__input { width: 100%; line-height: 20px; font-size: 16px; box-sizing: border-box; display: block; padding: 8px 13px; transition: 0.2s all; caret-color: rgb(var(--color-primary-500)); color: rgb(var(--color-secondary-900)); border: 1px solid rgb(var(--color-gray-400)); border-radius: 5px; min-height: 40px; font-family: "Onest"; 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 { background-color: rgb(var(--color-white)); border-color: rgb(var(--color-primary-300)); } .InputField__input--search { padding-right: 35px; } .InputField__input--loading { padding-left: 35px; } .InputField__input--warning { border-color: rgb(var(--color-warning-600)); color: rgb(var(--color-warning-500)); padding-right: 30px; } .InputField__input--warning:focus { background-color: rgb(var(--color-warning-100)); border-color: rgb(var(--color-warning-600)); } .InputField__input--warning:focus::placeholder { color: rgb(var(--color-warning-200)); } .InputField__input--error { border-color: rgb(var(--color-error-600)); color: rgb(var(--color-error-600)); } .InputField__input--error:focus { background-color: rgb(var(--color-error-100)); border-color: rgb(var(--color-error-600)); } .InputField__input--error:focus::placeholder { color: rgb(var(--color-error-200)); } .InputField__input--validation { padding-right: 30px; } .InputField__input--valid { border-color: rgb(var(--color-success-600)); color: rgb(var(--color-success-600)); padding-right: 30px; } .InputField__input--valid:focus { background-color: rgb(var(--color-success-100)); border-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)); background-color: rgb(var(--color-gray-100)); border-color: rgb(var(--color-gray-300)); } .InputField__input--noBorder { border: none; padding: 0; } .InputField .LoadingContainer { height: 100%; padding-left: 25px; } .InputField__infoContainer { height: 30px; position: absolute; height: 100%; padding-right: 6px; right: 0; bottom: 0; display: flex; flex-direction: row; align-items: center; } .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--dash3 { right: 10px; bottom: 10px; top: 10px; } .FileInputField__button--valid { background-color: rgb(var(--color-success-500)); } .FileInputField__button--hasLabel { top: 38px; } .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__input { background-color: rgba(var(--color-white), 0.05); border: 1px solid rgb(var(--color-gray-400)); color: rgb(var(--color-gray-400)); } .dark-mode .InputField__input:focus { border-color: rgb(var(--color-primary-500)); } .dark-mode .InputField__input--disabled { background-color: rgba(var(--color-white), 0.1); color: rgb(var(--color-gray-600)); border-color: rgb(var(--color-gray-700)); } .dark-mode .InputField__input--error { border-color: rgb(var(--color-error-dash3-500)) !important; } .dark-mode .InputField__input--noBorder { border: none; background-color: transparent; } .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 */ .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; overflow-x: auto; } .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__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; } .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; } .NiceModalDash3__gutter--right { display: flex; justify-content: flex-end; } .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. */ .ToggleButtonDash3__label, .ToggleButtonDash3__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 */ .ToggleButtonDash3 { display: flex; align-items: center; height: 100%; max-width: 350px; } .ToggleButtonDash3--loading { pointer-events: none; } .ToggleButtonDash3__label { display: block; padding-left: 0; font-weight: 700; font-size: 16px; color: rgb(var(--color-extra-navy-dash3-900)); } .ToggleButtonDash3__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; } .ToggleButtonDash3__sliderContainer--noMargin { margin-left: 0; } .ToggleButtonDash3__sliderContainer--active { background-position-x: right; background: rgb(var(--color-extra-violet-dash3-900)); } .ToggleButtonDash3__sliderContainer--loading { position: relative; overflow: hidden; } .ToggleButtonDash3__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; } } .ToggleButtonDash3__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; } .ToggleButtonDash3__slider--right { left: 50%; right: 3px; background: rgb(var(--color-white)); } .ToggleButtonDash3__slider--left { left: 3px; right: 50%; } .dark-mode .ToggleButtonDash3__label { color: rgb(var(--color-gray-300)); } .dark-mode .ToggleButtonDash3__sliderContainer { border: 1px solid rgb(var(--color-extra-lilac-dash3-800)); } .dark-mode .ToggleButtonDash3__sliderContainer--active { background-color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .ToggleButtonDash3__slider { background: rgb(var(--color-extra-lilac-dash3-800)); }.TestModeToggle-dash3 { width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px; padding-left: 0.5rem; margin-right: 12px; } .TestModeToggle-dash3__toggleButton { display: flex; justify-content: space-between; width: 100%; } .TestModeToggle-dash3 .Icon { margin-top: 2px; } .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. */ .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; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 12px; display: flex; } .NiceDropdownDash3__field { min-width: 100px; min-height: 40px; 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: 8px 13px; text-align: left; border-radius: 5px; cursor: pointer; position: relative; font-size: 16px; 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; } .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:hover { color: unset !important; } .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: 16px; 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: 1000; top: calc(100% + 15px); min-width: 100%; max-width: 700px; border-radius: 5px; } .NiceDropdownDash3__dropdown--popup { top: auto; bottom: 100%; } .NiceDropdownDash3__dropdown--openOnLeft { left: unset; right: 0; } .NiceDropdownDash3__dropdown--openOnLeft .NiceDropdownDash3__dropdown__content::after { top: -8px; right: 22px; left: unset; } .NiceDropdownDash3__dropdown__wrapper { border-radius: 5px; } .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: 10px 15px; 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: 5; 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: 10px 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__itemList { padding: 0 4px; } .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: 16px; 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 { width: 100%; font-size: 14px; } .NiceDropdownDash3__footer__container { display: flex; justify-content: flex-start; align-items: center; color: rgb(var(--color-soft-purple-600)); padding: 10px 3px; 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__icon .footerIcon .svg-inline--fa.fa-w-16 { width: 1.5em; } .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__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; margin-bottom: 18px; 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 */ .free-trial-banner { background-color: rgb(var(--color-extra-violet-500)); width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; font-weight: bolder; position: absolute; z-index: 3; font-family: "Onest"; } .free-trial-banner .free-trial-banner-text { color: white; font-size: 15px; line-height: 1em; margin: 5px 10px 5px 0; } .free-trial-banner .free-trial-banner-text--bold { font-weight: bold; } .free-trial-banner .free-trial-banner-text--underlined { text-decoration: underline; } .free-trial-banner a { color: rgb(var(--color-extra-blue-100)); }.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; }.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 */ .CreateProjectModalDash3__item { display: flex; flex-direction: column; margin-bottom: 1.3rem; } .CreateProjectModalDash3__item--end { margin-bottom: 0; } .CreateProjectModalDash3__label { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 15px; display: flex; align-items: center; } .CreateProjectModalDash3__label--noMargin { margin-bottom: 0; } .CreateProjectModalDash3__type { display: flex; flex-direction: column; } .CreateProjectModalDash3__type__title { display: flex; flex-direction: row; align-items: center; } .CreateProjectModalDash3__type__title__text { font-weight: 600; } .CreateProjectModalDash3__type__title__description { font-weight: 500; } .CreateProjectModalDash3__type__title__icon { margin-bottom: -5px; } .CreateProjectModalDash3__category { display: flex; flex-direction: column; padding: 5px; margin: 10px 5px; } .CreateProjectModalDash3__category__pill { cursor: default; background-color: rgb(var(--color-gray-300)); border-radius: 5px; padding: 4px 8px; padding-right: 3px; margin: 3px 5px; } .CreateProjectModalDash3__category__pill__remove:hover { color: rgb(var(--color-primary-500)); } .CreateProjectModalDash3__category__pill__container { display: flex; flex-wrap: wrap; margin: -3px -8px -3px -10px; cursor: default; } .CreateProjectModalDash3__category__group__title { font-size: 16px; display: flex; flex-direction: row; align-items: center; margin-left: 15px; } .CreateProjectModalDash3__category__sublist { padding-left: 30px; } .CreateProjectModalDash3__category__subcategory { padding-left: 20px; display: flex; } .CreateProjectModalDash3__category__subcategory__title { margin-left: 15px; } .CreateProjectModalDash3__store { display: flex; align-items: center; } .CreateProjectModalDash3__store__text { display: flex; flex-direction: column; margin-left: 15px; } .CreateProjectModalDash3__store__text__title { color: rgb(var(--color-title-dash3)); } .CreateProjectModalDash3__store__text__title--disabled { color: rgb(var(--color-gray-500)); } .CreateProjectModalDash3__store__text__subtitle { font-size: 14px; line-height: 16px; } .CreateProjectModalDash3__store__text__subtitle--disabled { font-size: 14px; line-height: 16px; color: rgb(var(--color-gray-500)); } .CreateProjectModalDash3__store__icon { margin-left: 12px; margin-top: 1px; } .CreateProjectModalDash3__advanced__text { margin-left: 15px; } .dark-mode .CreateProjectModalDash3__label { color: rgb(var(--color-gray-200)); } .dark-mode .CreateProjectModalDash3__category__pill { background-color: rgb(var(--color-extra-indigo-dash3-800)); color: rgb(var(--color-gray-200)); } .dark-mode .CreateProjectModalDash3__category__pill__remove:hover { color: rgb(var(--color-gray-500)); } .dark-mode .CreateProjectModalDash3__store { line-height: 18px; } .dark-mode .CreateProjectModalDash3__store__text__title { color: rgb(var(--color-gray-300)); } .dark-mode .CreateProjectModalDash3__store__text__subtitle { color: rgb(var(--color-gray-400)); } .dark-mode .CreateProjectModalDash3__advanced__text { 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 */ .InlineAlert-dash3 { padding: 15px; border-radius: 5px; position: relative; margin-bottom: 1.5rem; background: rgb(var(--color-gray-100)); color: rgb(var(--color-gray-700)); } .InlineAlert-dash3--info { background: rgba(var(--color-soft-purple-600), 0.1); color: rgba(var(--color-soft-purple-600), 0.8); } .InlineAlert-dash3--warning { background: rgb(var(--color-warning-100)); color: rgb(var(--color-warning-500)); } .InlineAlert-dash3--error { background: rgb(var(--color-error-100)); color: rgb(var(--color-error-500)); } .InlineAlert-dash3--hidden { display: none; } .InlineAlert-dash3--noMargin { margin-bottom: 0; } .InlineAlert-dash3__title { margin-bottom: 10px; text-transform: uppercase; font-weight: 700; font-size: 12px; color: rgb(var(--color-gray-500)); } .InlineAlert-dash3__title--info { color: rgb(var(--color-extra-indigo-dash3-700)); } .InlineAlert-dash3__title--warning { color: rgb(var(--color-warning-400)); } .InlineAlert-dash3__title--error { color: rgb(var(--color-error-400)); } .InlineAlert-dash3__subtitle { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: rgb(var(--color-gray-800)); } .InlineAlert-dash3__subtitle--info { color: rgb(var(--color-extra-indigo-dash3-700)); } .InlineAlert-dash3__subtitle--warning { color: rgb(var(--color-warning-600)); } .InlineAlert-dash3__subtitle--error { color: rgb(var(--color-error-500)); } .InlineAlert-dash3__text { line-height: 1.35em; } .InlineAlert-dash3__text--info { color: rgb(var(--color-extra-indigo-dash3-600)); } .InlineAlert-dash3__text--warning { color: rgb(var(--color-warning-600)); } .InlineAlert-dash3__text--error { color: rgb(var(--color-error-500)); } .InlineAlert-dash3__dismissButton { cursor: pointer; padding: 5px; position: absolute; top: 5px; right: 5px; } .InlineAlert-dash3 .code { margin: 0 -16px; } .InlineAlert-dash3 .code .code__block { border-radius: 0; padding-left: 16px; padding-right: 16px; } .dark-mode .InlineAlert-dash3 { background-color: rgba(var(--color-white), 0.05); } /*------------------------------------*\ # 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 */ .UpgradePlanModal { 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"; } .UpgradePlanModal__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)); display: flex; flex-direction: column; border-radius: 5px; } .UpgradePlanModal__contents { padding: 50px 45px; display: flex; flex-direction: column; justify-content: center; min-width: 540px; } .UpgradePlanModal__plans { display: flex; flex-direction: row; justify-content: center; align-items: center; } .UpgradePlanModal__academic { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 30px; border-radius: 5px; border: 1px solid rgb(var(--color-gray-200)); padding: 20px 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .UpgradePlanModal__academic__button { border: 0.1rem solid #dedede; background-color: transparent; color: rgb(var(--color-primary-500)) !important; } .UpgradePlanModal__academic__button:hover { border-color: rgb(var(--color-primary-500)); color: rgb(var(--color-primary-600)) !important; background-color: transparent; } .UpgradePlanModal__academic:hover { border-color: rgb(var(--color-primary-500)); } .UpgradePlanModal__close { position: absolute; top: -35px; right: -7px; font-size: 24px; color: rgb(var(--color-gray-700)); } .UpgradePlanModal__close:hover { color: rgb(var(--color-gray-500)); } .UpgradePlanModal__card { position: relative; width: 290px; padding: 25px 20px; border-radius: 5px; border: 1px solid rgb(var(--color-gray-200)); display: flex; flex-direction: column; align-items: left; margin: 0 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .UpgradePlanModal__card:first-child { margin-left: 0; margin-right: 15px; } .UpgradePlanModal__card:last-child { margin-right: 0; margin-left: 15px; } .UpgradePlanModal__card:hover { border-color: rgb(var(--color-primary-500)); } .UpgradePlanModal__card__ribbon { position: absolute; top: -16px; right: 20px; 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%); } .UpgradePlanModal__card__title { font-size: 28px; font-weight: 700; color: rgb(var(--color-title-dash3)); margin-bottom: 10px; } .UpgradePlanModal__card__subtitle { font-size: 14px; font-weight: 700; color: rgb(var(--color-title-dash3)); margin-bottom: 6px; } .UpgradePlanModal__card__subtitleNote { font-size: 14px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 15px; height: 16px; } .UpgradePlanModal__card__descriptions { margin-bottom: 10px; } .UpgradePlanModal__card__description { display: flex; flex-direction: row; margin-bottom: 10px; } .UpgradePlanModal__card__description--check { font-size: 14px; margin-right: 10px; padding-top: 4px; color: rgb(var(--color-primary-500)); } .UpgradePlanModal__card__description--text { font-size: 14px; font-weight: 500; color: rgb(var(--color-title-dash3)); line-height: 20px; } .UpgradePlanModal__card__defaultButton { width: 100%; height: 38px; border-radius: 5px; border: 0.1rem solid #dedede; color: rgb(var(--color-title-dash3)); font-size: 14px; font-weight: 700; display: flex; justify-content: center; align-items: center; letter-spacing: 0.06em; margin-bottom: 9px; } .UpgradePlanModal__card__note { text-align: center; font-size: 11px; font-weight: 500; color: rgb(var(--color-title-dash3)); line-height: 14px; min-height: 30px; } .UpgradePlanModal__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(5px); } .UpgradeTooltip { font-family: "Onest"; } .UpgradeTooltip__icon { margin-right: 5px; } .UpgradeTooltip__button { cursor: pointer; font-weight: 600; color: rgb(var(--color-primary-500)); text-decoration: underline; line-height: 25px; } .UpgradeTooltip__button:hover { color: rgb(var(--color-primary-400)); } /* Dark mode */ .dark-mode .UpgradePlanModal__background { background-color: rgba(var(--color-white), 0.08); } .dark-mode .UpgradePlanModal__container { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .UpgradePlanModal__close { color: rgb(var(--color-gray-400)); } .dark-mode .UpgradePlanModal__close:hover { color: rgb(var(--color-gray-200)); } .dark-mode .UpgradePlanModal__academic__button { border: 0.1rem solid rgb(var(--color-primary-500)); background-color: rgb(var(--color-primary-500)); color: rgb(var(--color-white)) !important; } .dark-mode .UpgradePlanModal__academic__button:hover { border-color: rgb(var(--color-primary-600)); background-color: rgb(var(--color-primary-600)); color: rgb(var(--color-white)) !important; } .dark-mode .UpgradePlanModal__academic:hover { border-color: rgb(var(--color-primary-400)); } .dark-mode .UpgradePlanModal__card__title { color: rgb(var(--color-gray-300)); } .dark-mode .UpgradePlanModal__card__subtitle { color: rgb(var(--color-gray-300)); } .dark-mode .UpgradePlanModal__card__subtitleNote { color: rgb(var(--color-gray-300)); } .dark-mode .UpgradePlanModal__card__description--check { color: rgb(var(--color-primary-400)); } .dark-mode .UpgradePlanModal__card__description--text { color: rgb(var(--color-gray-200)); } .dark-mode .UpgradePlanModal__card__note { color: rgb(var(--color-white)); } .dark-mode .UpgradePlanModal__card__defaultButton { color: rgb(var(--color-gray-200)); } .dark-mode .UpgradePlanModal__card:hover { 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 */ .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 */ .Well { border-radius: 5px; padding: 9px 13px; 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 { color: rgba(255, 255, 255, 0.7); } .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--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 { margin-bottom: 12px; color: rgb(var(--color-secondary-700)); } .ApiKeyField__gutter { margin-top: 4px; font-size: 12px; } .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-secondary-700)); cursor: pointer; text-decoration: underline; } .ApiKeyField__gutter__button:hover { color: rgb(var(--color-secondary-800)); } .ApiKeyField__gutter__deleteButton { font-weight: 500; margin-left: 15px; color: rgb(var(--color-error-600)); cursor: pointer; } .ApiKeyField__gutter__deleteButton--confirm { margin-left: 15px; color: rgb(var(--color-error-600)); text-decoration: none; cursor: default; } .ApiKeyField__gutter__deleteButton__sub { 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)); text-decoration: underline; } .ApiKeyFieldDash3__field { margin-bottom: 2rem; } .ApiKeyFieldDash3__field__title { font-size: 16px; font-weight: 600; color: rgb(var(--color-title-dash3)); margin-bottom: 12px; } .ApiKeyFieldDash3__gutter { padding: 0 2px; font-size: 15px; display: flex; justify-content: space-between; } .ApiKeyFieldDash3__gutter__expiry { font-style: italic; color: rgb(var(--color-gray-600)); } .ApiKeyFieldDash3__gutter__expiry--isExpired { color: rgb(var(--color-error-800)); } .ApiKeyFieldDash3__gutter__button { color: rgb(var(--color-primary-600)); font-weight: 600; cursor: pointer; text-decoration: underline; } .ApiKeyFieldDash3__gutter__button:hover { color: rgb(var(--color-primary-700)); } .ApiKeyFieldDash3__gutter__deleteButton { font-weight: 600; margin-left: 15px; color: rgb(var(--color-error-600)); text-decoration: underline; cursor: pointer; } .ApiKeyFieldDash3__gutter__deleteButton--confirm { font-weight: 600; margin-left: 15px; color: rgb(var(--color-error-600)); text-decoration: none; cursor: default; } .ApiKeyFieldDash3__gutter__deleteButton__sub { font-weight: 600; cursor: pointer; margin: 0 4px; } .ApiKeyFieldDash3__gutter__deleteButton__sub:hover { color: rgb(var(--color-error-700)); text-decoration: underline; } .ApiKeyFieldDash3__gutter__deleteButton:hover { color: rgb(var(--color-error-700)); } .dark-mode .ApiKeyFieldDash3__field__title { color: rgb(var(--color-gray-300)); } .dark-mode .ApiKeyFieldDash3__gutter__expiry { color: rgb(var(--color-gray-400)); } .dark-mode .ApiKeyFieldDash3__gutter__expiry--isExpired { color: rgb(var(--color-error-500)); } .dark-mode .ApiKeyFieldDash3__gutter__button { color: rgb(var(--color-extra-indigo-dash3-500)); } .dark-mode .ApiKeyFieldDash3__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: 48em) { .navbarDash3 { padding: 0 1rem; } } .navbarDash3__container { position: absolute; 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: 1201px) { .navbarDash3__leftContainer__menu__tabs { display: none; } } @media (max-width: 1300px) { .navbarDash3__leftContainer__menu__tabs { margin-left: 20px; } } .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 (max-width: 1300px) { .navbarDash3__leftContainer__menu__tabs__tab { margin: 0 0.7em -5px 0.7em; } } @media (max-width: 1120px) { .navbarDash3__leftContainer__menu__tabs__tab { margin: 0 0.2em -5px 0.2em; font-size: 14px; } } .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)); } .navbarDash3-right__button { background-color: rgba(255, 255, 255, 0.1); } .navbarDash3-right__button:hover { background-color: rgba(255, 255, 255, 0.2); } @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 { position: relative; 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: calc(100vh - 65px); color: rgb(var(--color-extra-navy-dash3-900)); font-family: "Onest"; } .NavSidebar__sections { display: flex; flex-direction: column; flex: 1; min-height: 0; 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; } .NavSidebar__searchbar .InputField__input { height: 33px !important; min-height: 33px !important; margin: 5px 2px 10px 2px !important; background-color: rgba(var(--color-white), 0.1) !important; font-size: 14px !important; border-color: rgb(var(--color-gray-500)) !important; } .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; } .NavSidebar__sectionTitle { display: flex; align-items: center; padding: 10px 7px; font-size: 15px; font-weight: 700; cursor: pointer; } .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 { overflow-y: scroll; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #ccc transparent; min-height: 0; overflow-y: auto; } .NavSidebar__groupList:hover { scrollbar-color: #808080 transparent; } .NavSidebar__groupList::-webkit-scrollbar { background-color: transparent; width: 7px; } .NavSidebar__groupList::-webkit-scrollbar-thumb { background-color: #ccc; outline: 2px solid transparent; border-radius: 5px; } .NavSidebar__groupList::-webkit-scrollbar-button { display: none; } .NavSidebar__groupList--collapsed { display: none; max-height: 0px; } .NavSidebar__item { 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__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--active .NavSidebar__item__icon { color: rgb(var(--color-secondary-400)); } .NavSidebar__item__iconButton svg { margin: 0; } .NavSidebar__item__newIcon { margin-left: auto; font-size: 10px; display: inline-block; margin-top: 2px; } .NavSidebar__child { padding: 7px 0 7px; color: rgb(var(--color-secondary-300)); font-weight: 400; } .NavSidebar__child:first-of-type { margin-top: 10px; } .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 .ToggleButtonDash3 { margin: 10px 10px 10px 0; } .settingsMenu .ToggleButtonDash3__label { font-size: 16px; line-height: 1.5em; font-weight: 500; margin-left: 12px; display: flex; align-items: center; } .settingsMenu .NiceDropdownDash3__dropdown { width: 300px; } .settingsMenu__header { display: flex; flex-direction: row; justify-content: space-between; padding: 10px 0; } .settingsMenu__header__user { display: flex; flex-direction: column; justify-content: center; width: 75%; } .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 .NiceDropdownDash3__dropdown { width: 350px; } .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 */ .EmptyAlert { background: transparent; display: flex; justify-content: center; align-items: center; } .EmptyAlert__text { text-align: center; font-family: "Onest"; padding-top: 8px; } .EmptyAlert__title { font-weight: 700; 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 { font-weight: 700; 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; } /*------------------------------------*\ # 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; overflow-x: auto; } .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__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; } .NiceModal__gutter--right { display: flex; justify-content: flex-end; } .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. */ @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 */ .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; padding: 5px; margin: 10px 5px; } .CreateProjectModal__category__pill { cursor: default; background-color: rgb(var(--color-gray-300)); border-radius: 5px; padding: 4px 8px; padding-right: 3px; margin: 3px 5px; } .CreateProjectModal__category__pill__remove:hover { color: rgb(var(--color-primary-500)); } .CreateProjectModal__category__pill__container { display: flex; flex-wrap: wrap; margin: -3px -8px -3px -10px; 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 { padding-left: 20px; display: flex; } .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__text { margin-left: 15px; } .dark-mode .CreateProjectModal__label { color: rgb(var(--color-gray-200)); } .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__text { 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 */ .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 */ .loadingGhost { width: 100%; height: 1em; 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: 0px 2rem 2rem 2rem; } .NiceTableDash3__container--noBorder { border: none; } .NiceTableDash3__container--noMargin { margin: 0px; } .NiceTableDash3__superHeader { border-bottom: 1px solid rgb(var(--color-gray-600)); width: 100%; display: flex; justify-content: space-between; } .NiceTableDash3__superHeader__left, .NiceTableDash3__superHeader__right { padding: 20px 50px; 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: 20px; } .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; } .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--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: 80px; grid-template-columns: 0.25fr 0.6fr 0.45fr 0.25fr 0.2fr 0.45fr 0.6fr 0.25fr 0.35fr 0.3fr 0.3fr; } @media (max-width: 1600px) { .NiceTableDash3--OrganizationList--backoffice { grid-template-columns: 0.2fr 0.4fr 0.4fr 0.25fr 0.2fr 0.5fr 0.8fr 0.2fr 0.2fr 0.4fr 0.2fr; } .NiceTableDash3--OrganizationList--backoffice .NiceTableDash3__header__cell { font-size: 14px; } } .NiceTableDash3--OrganizationList--backoffice--superuser { min-height: 80px; 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.3fr 0.4fr 0.4fr 0.25fr 0.2fr 0.35fr 0.4fr 0.2fr 0.2fr 0.3fr 0.4fr; } .NiceTableDash3--OrganizationList--backoffice--superuser .NiceTableDash3__header__cell { font-size: 14px; } } .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: 65px; 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.3fr 0.3fr 0.3fr 0.3fr; } .NiceTableDash3--ParticipantList .NiceTableDash3__header__cell { font-size: 15px; } .NiceTableDash3--ParticipantPropertiesList { min-height: 65px; 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__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--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-300)); } .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; } .PageHeader-dash3--sticky { top: 0px; position: sticky; z-index: 3; } .PageHeader-dash3__content { display: flex; justify-content: space-between; padding: 35px 0; } .PageHeader-dash3__background { position: absolute; z-index: -1; width: 100%; height: 100%; } .PageHeader-dash3__background--sticky { background: linear-gradient(180deg, rgba(var(--color-white), 1) 0%, rgba(var(--color-white), 0.5) 78%, rgba(var(--color-white), 0) 100%); backdrop-filter: blur(2px); } .PageHeader-dash3__left { display: flex; justify-content: flex-start; align-items: center; min-height: 40px; padding: 0 2rem; } .PageHeader-dash3__left__main { display: flex; flex-direction: column; margin-right: 20px; } .PageHeader-dash3__left__main__title { font-weight: 600; font-size: 22px; 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-start; align-items: center; padding: 0 2rem; } .dark-mode .PageHeader-dash3__background { background: linear-gradient(180deg, rgba(var(--color-extra-midnight-dash3-900), 0.8) 0%, rgba(var(--color-extra-midnight-dash3-900), 0.5) 78%, 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)); } /*------------------------------------*\ # 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 */ .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: 25px; 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)); }.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); }.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 */ .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 50px 35px 50px; } .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: 25px; } .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)); }/* 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 */ .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)); display: flex; justify-content: center; align-items: center; padding: 0px 3px 0px 8px; } .exitpoll-dash3-edit-question-set__drag-handle:hover { cursor: grab; } .checkbox { display: flex; }.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; }/* 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)); }/* 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 */ .ToggleSwitchDash3 { display: flex; align-items: center; padding: 4px 5px; background: #efeeee; border-radius: 5px; } .ToggleSwitchDash3__button { transition: 0.2s all; font-size: 14px; 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; } .ToggleSwitchDash3__button:first-of-type { margin-left: 0px; } .ToggleSwitchDash3__button:last-of-type { margin-right: 0px; } .ToggleSwitchDash3__button--active { border-radius: 4px; background-color: rgb(var(--color-white)); font-weight: 600; } .ToggleSwitchDash3__button--disabled { cursor: not-allowed; opacity: 0.5; } .dark-mode .ToggleSwitchDash3 { background: rgb(var(--color-gray-500)); } .dark-mode .ToggleSwitchDash3__button { color: rgb(var(--color-extra-navy-dash3-900)); } .dark-mode .ToggleSwitchDash3__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 */ .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--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 */ .LineChart { position: relative; display: flex; justify-content: flex-start; width: 100%; height: 300px; } .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. */ @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. */ .ToggleButtonRowDash3 { -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 */ .ToggleButtonRowDash3 { display: flex; align-items: center; } .ToggleButtonRowDash3__button { transition: 0.2s all; font-size: 15px; font-family: "Onest"; border-left: 1px solid rgb(var(--color-gray-600)); background: rgb(var(--color-gray-400)); color: white; padding: 12px 20px; cursor: pointer; } .ToggleButtonRowDash3__button:first-of-type { border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-left: none; border-right: none; } .ToggleButtonRowDash3__button:last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: none; border-right: none; } .ToggleButtonRowDash3__button--disabled { cursor: not-allowed; background: rgb(var(--color-gray-500)) !important; border-left: 1px solid rgb(var(--color-gray-600)); box-shadow: 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 */ .SlicerFilters-dash3__container { width: 100%; display: flex; justify-content: flex-end; color: rgb(var(--color-soft-purple-600)); padding: 10px 0; cursor: pointer; } .SlicerFilters-dash3__icon { margin: 10px; } .SlicerFilters-dash3__icon__remove { margin-left: 1px; margin-bottom: 11px; color: rgb(var(--color-error-500)); } .SlicerFilters-dash3__icon__remove:hover { color: rgb(var(--color-error-600)); } .SlicerFilters-dash3__dropdown { max-width: 350px; } .SlicerFilters-dash3 .NiceModalDash3__container { width: 900px !important; height: 80vh; } .SlicerFilters-dash3 .NiceModalDash3__contents { flex-grow: 1; }.DateRangeSelector-dash3 { width: fit-content; display: flex; } .DateRangeSelector-dash3 .NiceDropdownDash3__footer__container { padding: 0; } .DateRangeSelector-dash3 .NiceDropdownDash3__dropdown__content__groupList { max-height: none; height: 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 */ .SessionsSelector-dash3 { width: fit-content; display: flex; position: relative; margin-right: 10px; } .SessionsSelector-dash3__counter { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; bottom: 6.5px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background-color: rgb(var(--color-extra-violet-dash3-900)); color: rgb(var(--color-white)); pointer-events: none; } .SessionsSelector-dash3__counter span { font-size: 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 */ .SegmentSelector-dash3 { display: flex; justify-content: flex-start; width: fit-content; position: relative; } .SegmentSelector-dash3__counter { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; bottom: 5px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background-color: rgb(var(--color-extra-violet-dash3-900)); color: rgb(var(--color-white)); pointer-events: none; } .SegmentSelector-dash3__counter span { font-size: 10px; } .SegmentSelector-dash3__container { width: 100%; display: flex; justify-content: flex-end; color: rgb(var(--color-soft-purple-600)); padding: 10px 0; cursor: pointer; } /*------------------------------------*\ # 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 */ .SceneSelector-dash3 { display: flex; justify-content: flex-start; width: fit-content; margin-right: 10px; } .SceneSelector-dash3__container { width: 100%; display: flex; justify-content: flex-end; color: rgb(var(--color-soft-purple-600)); padding: 10px 0; cursor: pointer; } .SceneSelector-dash3__icon { margin: 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 */ .CopyToClipboardButton-dash3 { position: absolute; bottom: 0; top: 0; right: 0; cursor: pointer; background: rgba(255, 255, 255, 0.15); border-radius: 4px; overflow: visible; color: rgb(var(--color-white)); } .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; } } /*------------------------------------*\ # 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 */ .DashboardFilters-dash3 { display: flex; justify-content: flex-start; width: fit-content; } .DashboardFilters-dash3__container { width: 100%; display: flex; justify-content: flex-end; color: rgb(var(--color-soft-purple-600)); padding: 10px 0; cursor: pointer; } .DashboardFilters-dash3__iconButtons { display: flex; justify-content: flex-start; } .DashboardFilters-dash3__slicerFilters { display: flex; position: relative; } .DashboardFilters-dash3__slicerFilters__counter { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; bottom: 5px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background-color: rgb(var(--color-extra-violet-dash3-900)); color: rgb(var(--color-white)); pointer-events: none; } .DashboardFilters-dash3__slicerFilters__counter span { font-size: 10px; } .DashboardFilters-dash3__icon { font-size: 18px; margin: 10px; } .DashboardFilters-dash3__icon:hover { color: rgb(var(--color-extra-violet-dash3-900)); } .DashboardFilters-dash3__customDatePicker { width: 100%; font-size: 14px; color: rgb(var(--color-soft-purple-600)); cursor: pointer; display: flex; align-items: center; } .DashboardFilters-dash3__customDatePicker:hover { color: rgb(var(--color-extra-violet-dash3-900)); } .DashboardFilters-dash3__customDatePicker__icon { margin: 0 5px 0 10px; font-size: 18px; } .DashboardFilters-dash3__customDatePicker__text { font-weight: 600; font-size: 14px; } .DashboardFilters-dash3__customDatePicker__container { position: relative; min-width: 460px; } .DashboardFilters-dash3__customDatePicker__inputFields { align-items: center; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr 0.1fr; gap: 10px; } .DashboardFilters-dash3__customDatePicker__inputFields--noApplyButton { grid-template-columns: 1fr 1fr; } .DashboardFilters-dash3__copyButton { position: relative; background: transparent; color: rgb(var(--color-extra-navy-dash3-900)); } .DateRangeInput__tip { margin-bottom: 8px; color: #6c757d; font-size: 13px; font-weight: 500; border-bottom: 1px solid #e9ecef; padding-bottom: 8px; } .dark-mode .DateRangeInput__tip { border-bottom: 1px solid #e9ecef; } .dark-mode .DashboardFilters-dash3__slicerFilters__icon { color: rgb(var(--color-white)); } .dark-mode .DashboardFilters-dash3__icon { color: rgb(var(--color-white)); } .dark-mode .DashboardFilters-dash3__customDatePicker { color: rgb(var(--color-extra-violet-dash3-900)); } .dark-mode .DashboardFilters-dash3__customDatePicker:hover { color: rgb(var(--color-extra-violet-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 */ .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)); } .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)); } .ParticipantDash3__history__link { color: rgb(var(--color-primary-500)); cursor: pointer; text-decoration: underline; } .ParticipantDash3__history__link:hover { color: rgb(var(--color-primary-700)); } .NiceTableDash3__header.NiceTableDash3--ParticipantList { padding: 10px 50px; } .NiceTableDash3__header.NiceTableDash3--ParticipantSessionList { padding: 0px 50px; } .NiceTableDash3__header.NiceTableDash3--ParticipantSubscriptionList { 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 */ .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 */ .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 50px 35px 50px; 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; /* Event Rows */ /* Event Contents */ /*Event Properties*/ } .ProjectSessionTimeline__eventGroup__headerWrapper { cursor: pointer; display: flex; justify-content: space-between; height: 40px; padding: 0 20px; background: rgba(var(--color-soft-purple-600), 0.07); border-left: 4px solid rgb(var(--color-primary-500)); } .ProjectSessionTimeline__eventGroup__headerWrapper:hover { background: rgba(var(--color-soft-purple-600), 0.1); } .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__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__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__goToSceneButton .button-dash3 { font-size: 14px; min-height: 22px; min-width: 45px; padding: 6px 9px; } .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-dash3 { font-size: 14px; min-height: 22px; min-width: 45px; padding: 6px 9px; } .ProjectSessionTimeline__viewStackTraceButton { display: flex; justify-content: start; padding: 0px; } .ProjectSessionTimeline__viewStackTraceButton .button-dash3 { 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__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__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; max-height: 200px; overflow: visible; position: relative; z-index: 1; } .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__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); backdrop-filter: blur(1px); 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); backdrop-filter: blur(1.5px); } .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 */ .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: -15px; } .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: 13px; } .property-filter__dropdown-row .InputField { margin-bottom: 0; } .property-filter__dropdown-row .InputField__input { height: 30px; } .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)); } /*------------------------------------*\ # 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; color: rgb(var(--color-extra-silver-dash3-900)); } .ColumnChart-dash3 .ellipsis-menu g { fill: 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); }/* 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; height: 100%; } .DonutChart__container { width: 100%; height: 100%; min-height: 300px; } .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; } /*------------------------------------*\ # 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; } .PieChart__container { width: 100%; height: 100%; min-height: 300px; } .PieChart__total { width: 100%; height: 100%; position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } .PieChart__total span { margin-top: -40px; margin-left: 25px; color: rgb(var(--color-white)); } .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; }/* 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 */ .globalSlicer-dash3 { display: flex; justify-content: center; } .globalSlicer-dash3__body { width: 100%; margin: 0px 50px 35px 50px; border: 1px solid rgb(var(--color-gray-300)); border-radius: 5px; } .globalSlicer-dash3__body__section { padding: 0px; } .globalSlicer-dash3__body__section .runQuery { margin: 0 20px; }.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: 1440px) { .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: 1440px) { .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; /* Ensure content stays on top */ } .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 > * { 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 */ .card-grid { margin: 35px 50px 35px 50px; min-width: 900px; } .card-grid--row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .card--dash3 { width: 100%; border: 1px solid rgb(var(--color-gray-300)); border-radius: 10px; background-color: rgb(var(--color-gray-100)); padding: 25px 20px; font-family: "Onest"; color: rgb(var(--color-title-dash3)); } .card--dash3-header { display: flex; justify-content: space-between; margin-bottom: 20px; } .card--dash3-title { font-size: 24px; font-weight: 600; color: rgb(var(--color-title-dash3)); } .card--dash3-body { display: flex; flex-direction: column; justify-content: center; height: 90%; } .card--dash3-body h3 { color: rgb(var(--color-title-dash3)); } .card--dash3-refresh-button { margin: 0; padding: 0; } .card--dash3-refresh-button:hover { cursor: pointer; color: rgb(var(--color-primary-500)); } .card--dash3--loading { display: flex; justify-content: center; height: 100%; width: 100%; } .dark-mode .card--dash3 { border: 1px solid rgba(242, 240, 240, 0.15); background-color: rgba(var(--color-white), 0.1); color: rgb(var(--color-gray-300)); } .dark-mode .card--dash3-title { color: rgb(var(--color-gray-300)); } .dark-mode .card--dash3-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 */ .BackofficeDash3__checkmark--active { font-size: 18px; color: rgb(var(--color-success-dash3-500)) !important; } .BackofficeDash3__checkmark--active:hover { color: rgb(var(--color-success-dash3-400)) !important; } .BackofficeDash3__checkmark--inactive { font-size: 18px; color: rgb(var(--color-success-dash3-500)) !important; } .BackofficeDash3__checkmark--disabled { font-size: 18px; color: rgb(var(--color-gray-400)) !important; } .BackofficeDash3__checkmark--disabled:hover { color: rgb(var(--color-gray-500)) !important; } .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__orgs__dropdown--activeStatus { width: 110px; } .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; } .block-counts { display: flex; justify-content: space-evenly; } .block-counts h3 { display: flex; justify-content: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 20px; } .block-counts .count { font-size: 1.2rem; font-weight: 400; margin: 5px; } .block-counts .count h2 { display: flex; justify-content: center; font-size: 1.5rem; font-weight: 600; margin: 0; } .block-counts .count h4 { display: flex; justify-content: center; font-size: 1.1rem; font-weight: 300; margin: 0; } .block-counts .count--success h2 { color: rgb(var(--color-success-400)); } .block-counts .count--success h4 { margin-bottom: 20px; } .block-counts .count--failed h2 { color: rgb(var(--color-error-400)); } /* Stats page */ .Backoffice-dash3__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .Backoffice-dash3__stats__row { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; } .Backoffice-dash3__stats__box { display: flex; flex-direction: column; } .Backoffice-dash3__stats__title { font-size: 22px; font-weight: bold; margin: 10px 0 25px 0; text-align: center; color: rgb(var(--color-title-dash3)); } .Backoffice-dash3__stats__timeperiod { color: rgb(var(--color-title-dash3)); padding: 0px 0.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; } .Backoffice-dash3__stats__timeperiod__total_count { font-size: 19px; margin-bottom: 20px; font-weight: bold; text-align: center; } .Backoffice-dash3__stats__timeperiod__orgname { display: flex; align-items: center; font-size: 15px; font-weight: 600; margin: 10px 0; } .Backoffice-dash3__stats__timeperiod__bar { height: 25px; min-width: 20%; background-color: rgb(var(--color-primary-400)); display: flex; align-items: center; color: rgb(var(--color-title-dash3)); padding-left: 5px; padding-right: 5px; font-weight: 500; } .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)); } .dark-mode .Backoffice-dash3__stats__title { color: rgb(var(--color-gray-300)); } .dark-mode .Backoffice-dash3__stats__timeperiod { color: rgb(var(--color-gray-200)); } .dark-mode .Backoffice-dash3__stats__timeperiod__bar { background-color: rgb(var(--color-primary-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 */ .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 */ .DashboardCard-dash3 { display: flex; flex-direction: column; min-width: 350px; 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; } .DashboardCard-dash3--span-2 { min-width: 50rem; } .DashboardCard-dash3--placeholder { display: flex; flex-direction: column; min-width: 350px; 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__header { display: flex; 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: 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .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%; } .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: flex-start; gap: 2rem; } .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__headerDropdown { left: -5px !important; top: 25px; } .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; min-width: 350px; } .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; min-width: 900px; } .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 3; } } .DashboardCard-dash3--span-3 { grid-column: auto/span 3; min-width: 900px; } .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 */ /* 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; } @media (max-width: 1440px) { .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: 769px) { .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 */ .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: 20px; } .RadarChart .apexcharts-canvas { width: 100%; } .RadarChart .apexcharts-radar-series { width: 100%; } .RadarChart .apexcharts-text { display: none; } .RadarChart .apexcharts-tooltip-title { font-family: "Onest"; } .RadarChart .apexcharts-tooltip { white-space: wrap; background-color: rgb(19, 41, 75); } .RadarChart .apexcharts-tooltip-info { color: inherit; margin-top: 10px; width: 140px; display: flex; flex-direction: column; font-family: "Onest"; } .RadarChart .apexcharts-tooltip-info h4 { font-size: 12px; font-weight: 700; color: rgb(var(--color-secondary-900)); } .RadarChart .apexcharts-tooltip-info span { font-size: 12px; margin-top: 7px; font-weight: 600; color: rgb(var(--color-secondary-900)); } .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 */ .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; }.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; }.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; } /*------------------------------------*\ # 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 */ .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); }.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 */ /*------------------------------------*\ # 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; } /*------------------------------------*\ # 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; }.Retention-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 */ .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); }.SessionsByGeography-dash3 ~ .react-resizable-handle { display: none; }.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 */ .SlicerQueryWidget__chartCanvas { position: relative; overflow: visible; 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; } .SlicerQueryWidget__headerRightComponent .NiceDropdown__item__text { min-width: 187px; display: flex; align-items: center; justify-content: space-between; } .SlicerQueryWidget__headerRightComponent span { font-size: 14px; } .SlicerQueryWidget__headerRightComponent .button-dash3 { min-width: 25px !important; min-height: 25px !important; width: 25px; height: 25px; padding: 0px 0px; margin-left: 10px; } .SlicerQueryWidget__headerRightComponent .button-dash3 svg { margin: 0 0 0 2px; width: 0.75em; } .SlicerQueryWidget .ColumnChart-dash3 { margin: 0; }/* ******************************************************************************************* * 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; flex-direction: row; align-items: flex-start; justify-content: flex-start; max-height: 280px; overflow: auto; } .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__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 */ .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: 200px; width: 100%; } .ObjectiveWidget__objective-info { text-align: left; } .ObjectiveWidget__objective-name { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; color: rgb(var(--color-gray-900)); line-height: 1.3; } .ObjectiveWidget__objective-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; } .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__objective-name { font-size: 15px; } .ObjectiveWidget__objective-description { font-size: 13px; max-height: 45px; line-clamp: 2; -webkit-line-clamp: 2; } .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__objective-name { color: var(--text-primary-dark, #fff); } .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)); } /*------------------------------------*\ # 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 .loadingGhost { margin-top: 40px; } .CustomDashboard-dash3__emptyAlert { display: flex; flex-direction: column; justify-content: center; } .CustomDashboard-dash3--editMode { min-height: 75vh; border-radius: 10px; border: 1px dashed rgb(var(--color-extra-silver-dash3-900)); 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: flex-start; 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-dash3, .CustomDashboard-dash3__sessionTimeAverage__drillDown .button-dash3 { 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 .ToggleSwitchDash3 { width: 100px; } .CustomDashboard-dash3 .ToggleSwitchDash3__button { width: 25px !important; min-width: 0 !important; } .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; min-width: 50rem; } .react-grid-item { transition: all 200ms ease; transition-property: left, top; font-family: Arial, Helvetica, sans-serif; text-align: center; border: 1px dashed rgb(var(--color-gray-300)); border-radius: 10px; background-color: transparent; height: 330px; min-width: 18.75rem; 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: 20px; height: 20px; bottom: 0; right: 0; cursor: se-resize; } .react-grid-item > .react-resizable-handle::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; border-right: 2px solid rgba(0, 0, 0, 0.4); border-bottom: 2px solid rgba(0, 0, 0, 0.4); } /*------------------------------------*\ # 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 .PageHeader-dash3__content { padding: 35px 0px 40px 0px; } .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-dash3 { 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 .ToggleSwitchDash3 { width: 100px; } .ExitPollResults-dash3 .ToggleSwitchDash3__button { min-width: 0; } .ExitPollResults-dash3__headerDropdown__dropdown { left: -30px; } .ExitPollResults-dash3 .apexcharts-toolbar { z-index: 0 !important; }.Dashboards-dash3 { height: 100%; display: flex; flex-direction: column; } .Dashboards-dash3 .PageHeader-dash3 { min-width: 900px; } .Dashboards-dash3 .Dashboards-dash3__content { min-height: 75vh; min-width: 900px; 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: 17px; line-height: 20px; color: rgb(var(--color-title-dash3)); padding: 10px 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; margin-bottom: 4px; } .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; } .ObjectivesDash3__sessionTable__successRatio { font-size: 14px; } .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; margin: 0 3px; } .ObjectivesDash3__sessionTable__stepBar--shrunken { margin: 0 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)); } /* 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)); } .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__actionPanel { position: sticky; top: 0px; z-index: 1; background-color: rgb(var(--color-white)); } .Analysis__actionPanel--sticky { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .Analysis__actionPanel--stickyContainer { border: none; margin-bottom: 0px; } .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)); } .dark-mode .Analysis__filterRow--andText { color: rgb(var(--color-gray-200)); } .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; margin-right: 20px; } .Analysis__chartCanvas { position: relative; overflow: visible; height: 640px; } .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__container .NiceDropdownDash3__dropdown { min-width: 250px; max-width: 1000px; } .dark-mode .Analysis__actionPanel { background-color: rgb(var(--color-extra-midnight-dash3-900)); } .dark-mode .Analysis__actionPanel--sticky { border-bottom: 1px solid rgba(242, 240, 240, 0.7); } .dark-mode .Analysis__actionPanel--stickyContainer { border: none; } .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; }.rc-slider { position: relative; height: 14px; padding: 5px 0; width: 100%; 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%; background-color: #e9e9e9; height: 4px; border-radius: 6px; } .rc-slider-track { position: absolute; left: 0; height: 4px; border-radius: 6px; background-color: #abe2fb; } .rc-slider-handle { position: absolute; width: 14px; height: 14px; cursor: pointer; cursor: -webkit-grab; margin-top: -5px; cursor: grab; border-radius: 50%; border: solid 2px #96dbfa; background-color: #fff; 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:focus { outline: none; } .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; vertical-align: middle; text-align: center; cursor: pointer; color: #999; } .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; margin-left: -4px; width: 8px; height: 8px; border: 2px solid #e9e9e9; background-color: #fff; cursor: pointer; border-radius: 50%; vertical-align: middle; } .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 { border-color: #ccc; box-shadow: none; background-color: #fff; 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 { height: 100%; width: 4px; } .rc-slider-vertical .rc-slider-track { left: 5px; bottom: 0; width: 4px; } .rc-slider-vertical .rc-slider-handle { 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 { height: 100%; width: 4px; } .rc-slider-vertical .rc-slider-dot { left: 2px; margin-bottom: -4px; } .rc-slider-vertical .rc-slider-dot:first-child { margin-bottom: -4px; } .rc-slider-vertical .rc-slider-dot:last-child { margin-bottom: -4px; } .rc-slider-tooltip-zoom-down-enter, .rc-slider-tooltip-zoom-down-appear { animation-duration: 0.3s; animation-fill-mode: both; display: block !important; animation-play-state: paused; } .rc-slider-tooltip-zoom-down-leave { animation-duration: 0.3s; animation-fill-mode: both; display: block !important; 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% { opacity: 0; transform-origin: 50% 100%; transform: scale(0, 0); } 100% { transform-origin: 50% 100%; transform: scale(1, 1); } } @keyframes rcSliderTooltipZoomDownOut { 0% { transform-origin: 50% 100%; transform: scale(1, 1); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(0, 0); } } .rc-slider-tooltip { position: absolute; left: -9999px; top: -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 { padding: 6px 2px; min-width: 24px; height: 24px; font-size: 12px; line-height: 1; color: #fff; 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 */ .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)); } @media screen and (max-width: 2000px) { .SceneViewer__buttonRow { padding: 2px 30px; } } .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; font-size: 14px; color: rgb(var(--color-title-dash3)); margin-top: 2px; } .SceneViewer__summary__header__item { display: flex; align-items: center; margin-right: 20px; 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.06em; } .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__actions--delete { display: flex; align-items: center; } .SceneViewer__sessionTable__actions--delete .button-dash3 { font-size: 14px; min-height: 22px; min-width: fit-content !important; padding: 6px 8px; } @media screen and (max-width: 2000px) { .SceneViewer__sessionTable__actions--delete .button-dash3 { font-size: 13px; } } .SceneViewer__sessionTable__bulk { display: flex; align-items: center; } .SceneViewer__sessionTable__bulk__title { font-family: "Onest"; font-size: 15px; font-weight: 600; margin-right: 10px; line-height: 40px; } .SceneViewer__sessionTable__bulk__title--nonselected { color: rgb(var(--color-gray-600)); } .SceneViewer__sessionTable__bulk .button-dash3 { font-size: 14px; min-height: 22px; min-width: fit-content !important; padding: 7px 8px; } @media screen and (max-width: 2000px) { .SceneViewer__sessionTable__bulk .button-dash3 { font-size: 13px; } } .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 { cursor: pointer; 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: 12px; 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: 20px; } .SceneViewer__sessionTable__replay { width: 100%; display: flex; justify-content: center; color: rgb(var(--color-primary-400)); font-size: 22px; } .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; 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%; margin-top: -225px; padding: 25px 60px 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); } @media screen and (max-width: 2000px) { .SceneViewerCanvas__clipSlider { margin-top: -177px; padding: 20px 60px 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)); } .SceneViewerCanvas__clipSlider .rc-slider .rc-slider-dot { width: 11px; height: 11px; left: 0px; 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: 340px; 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); 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); } @media screen and (max-width: 2000px) { .SceneViewerCanvas__heatmapSettings { height: 300px; margin-top: -178px; 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)); } .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 { 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: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--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; cursor: pointer; } .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: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); } .SceneSessionViewerDash3__meta { display: flex; justify-content: flex-start; font-family: "Onest"; padding: 30px 20px; } .SceneSessionViewerDash3__meta a { font-weight: 600; } .SceneSessionViewerDash3__meta a:hover { text-decoration: underline; } .SceneSessionViewerDash3__meta__item { margin-right: 20px; min-width: 20%; } .SceneSessionViewerDash3__meta__label { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: rgb(var(--color-title-dash3)); } .SceneSessionViewerDash3__meta__value { font-size: 16px; color: rgb(var(--color-title-dash3)); line-height: 20px; } .SceneSessionViewerDash3__tags { display: flex; flex-direction: column; padding: 0px 20px; width: 100%; margin-bottom: 20px; } .SceneSessionViewerDash3__tags__list { width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 12px; } .SceneSessionViewerDash3__tags__list .TagPill { margin-right: 10px; } .SceneSessionViewerDash3__buttonRow { display: flex; justify-content: left; padding: 0 20px; margin-bottom: 30px; } .SceneSessionViewerDash3__dropdownIcon { margin-left: 15px; color: rgb(var(--color-extra-indigo-600)); } .SceneSessionViewerDash3__property--smallMargin .ContentContainerDash3 { min-width: auto; margin: 0px 20px 10px 20px; background: rgba(var(--color-white), 0.02); } .SceneSessionViewerDash3__property__table { position: relative; margin-bottom: 100px; } .SceneSessionViewerDash3__property__table--hide { height: 400px; overflow: hidden; margin-bottom: 0px; } .SceneSessionViewerDash3__property__hideButton { position: absolute; bottom: 0; left: 0px; right: 0px; padding-bottom: 20px; padding-top: 80px; text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: linear-gradient(rgba(255, 255, 255, 0.8), rgb(255, 255, 255)); } .SceneSessionViewerDash3__property__hideButton--hidden { bottom: -100px; padding-top: 50px; } .SceneSessionViewerDash3__property__hideButton__button { font-family: "Onest"; font-size: 16px; font-weight: 600; color: rgb(var(--color-secondary-500)); cursor: pointer; } .SceneSessionViewerDash3__property__hideButton__button:hover { text-decoration: underline; } .SceneSessionViewerDash3__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)); } .SceneSessionViewerDash3__property__pill--ABTest { background-color: rgb(var(--color-extra-violet-500)); } .SceneSessionViewerDash3__property__pill--App { background-color: #24be67; } .SceneSessionViewerDash3__property__pill--Common { background-color: rgb(var(--color-extra-indigo-400)); } .SceneSessionViewerDash3__property__pill--Device { background-color: rgb(var(--color-gray-500)); } .SceneSessionViewerDash3__property__pill--Geo { background-color: rgb(var(--color-extra-teal-500)); } .SceneSessionViewerDash3__property__pill--User { background-color: rgb(var(--color-secondary-400)); } .SceneSessionViewerDash3__property__pill--Participant { background-color: rgb(var(--color-secondary-700)); font-size: 0.7rem; } .SceneSessionViewerDash3__property__pill--Sensor { background-color: rgb(var(--color-extra-orange-400)); } .SceneSessionViewerDash3__property__pill--HMD { background-color: rgb(var(--color-primary-400)); } .SceneSessionViewerDash3__property__pill--Custom { background-color: rgb(var(--color-secondary-500)); } .SceneSessionViewerDash3__property__pill--Warning { background-color: rgb(var(--color-error-400)); } .SceneSessionViewerDash3__property__pill--Tag { background-color: rgb(var(--color-extra-pink-500)); } .SceneSessionViewerDash3__property__pill--ExitPoll { background-color: rgb(var(--color-extra-violet-300)); } .SceneSessionViewerDash3__property__pill--Event { background-color: rgb(var(--color-extra-violet-300)); } .SceneSessionViewerDash3__property__pill--Metrics { background-color: rgb(var(--color-extra-green-400)); } .SceneSessionViewerDash3__property__pill--XRPF { background-color: rgb(var(--color-extra-orange-500)); } .SceneSessionViewerDash3__property__pill--Multiplayer { background-color: rgb(var(--color-extra-indigo-400)); font-size: 0.7rem; } .SceneSessionViewerDash3__property__displayName { font-size: 15px; line-height: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 10px; } .SceneSessionViewerDash3__property__value { font-size: 15px; } .SceneSessionViewerDash3__property__sortIcon { color: rgb(var(--color-title-dash3)); margin-right: 15px; } .SceneSessionViewerDash3__property__sortIcon:hover { color: rgb(var(--color-gray-700)); } .SceneSessionViewerDash3__raw { padding: 0 20px; margin-bottom: 20px; } .SceneSessionViewerDash3__raw .Well { border-radius: 10px; } .SceneSessionTimeline { font-family: "Onest"; flex-grow: 1; position: relative; width: 100%; margin: 20px 0; /* Event Rows */ /* Event Contents */ /*Event Properties*/ } .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__goToSceneButton .button-dash3 { font-size: 14px; min-height: 22px; min-width: 45px; padding: 6px 9px; } .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-dash3 { font-size: 14px; min-height: 22px; min-width: 45px; padding: 6px 9px; } .SceneSessionTimeline__viewStackTraceButton { display: flex; justify-content: start; padding: 0px; } .SceneSessionTimeline__viewStackTraceButton .button-dash3 { 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__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__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; max-height: 200px; word-break: break-word; } .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__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: 900px; 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; position: relative; aspect-ratio: 1.4; margin: 0 -10px; transition: 0.2s all; } .ObjectTile__image img { transition: 0.2s all; object-fit: cover; width: 100%; height: 100%; } .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: 20px; 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__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 .SceneSessionViewerDash3__meta__label { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewerDash3__meta__value { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewerDash3__dropdownIcon { color: rgb(var(--color-extra-indigo-200)); } .dark-mode .SceneSessionViewerDash3__property--smallMargin .ContentContainerDash3 { background: rgba(var(--color-white), 0.02); } .dark-mode .SceneSessionViewerDash3__property__hideButton { padding-top: 150px; background: linear-gradient(rgba(var(--color-extra-midnight-dash3-900), 0.1), rgba(var(--color-extra-midnight-dash3-900), 1)); } .dark-mode .SceneSessionViewerDash3__property__hideButton__button { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewerDash3__property__hideButton--hidden { background: transparent; bottom: -100px; padding-top: 50px; } .dark-mode .SceneSessionViewerDash3__property__sortIcon { color: rgb(var(--color-gray-300)); } .dark-mode .SceneSessionViewerDash3__property__sortIcon:hover { color: rgb(var(--color-gray-200)); } .dark-mode .SceneSessionViewerDash3__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 */ overflow: hidden; } /* Overlay that only covers SceneExplorerCanvas */ .SceneViewerCanvas__loadingScreen { position: absolute; inset: 0; z-index: 10; background-color: rgba(255, 255, 255, 0.95); 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; } /*------------------------------------*\ # 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: 1440px) { .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: 1440px) { .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: 1440px) { .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: 1440px) { .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: 1440px) { .LoginContainer__Page { padding: 40px 30px 30px 30px; } } .LoginContainer__Page--homepage { padding: 0; min-height: 700px; } @media screen and (max-width: 1440px) { .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: 1440px) { .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)); margin-top: 10px; } .invite-team-row--add-user-container:hover { color: rgb(var(--color-secondary-600)); cursor: pointer; } /*------------------------------------*\ # 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; /* Ensure content stays on top */ } .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 > * { 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 { position: relative; z-index: 1; } .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; } .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:hover { transform: scale(1); } .brand-logo__image { opacity: 0.45; transition: opacity 0.2s; } .brand-logo__image: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: 38px; font-weight: 900; line-height: 1.2; margin-bottom: 35px; } .GetStarted__heading span { color: #a543f1; } @media (max-width: 1440px) { .GetStarted__heading { font-size: 30px; text-align: center; } } .GetStarted__list { padding-left: 30px; margin-bottom: 30px; margin-left: 0; } .GetStarted__list li { color: #13294b; font-size: 18px; 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: 16px; line-height: 1.5; } } @media (max-width: 769px) { .GetStarted__list li { font-size: 16px; } } .GetStarted__subheading { color: #13294b; font-size: 23px; font-weight: bold; line-height: 1.5; margin-bottom: 60px; } @media (max-width: 1440px) { .GetStarted__subheading { font-size: 20px; margin-bottom: 50px; text-align: center; } } @media (max-width: 769px) { .GetStarted__subheading { text-align: center; font-size: 20px; 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: 0; 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); } .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); } } .tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;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 #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;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 #fff;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,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(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,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;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 #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;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 #fff;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,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(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,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;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 #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;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 #fff;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,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(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,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;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 #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;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 #fff;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,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(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,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(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,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.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(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;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}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}} :root { color-scheme: var(--mantine-color-scheme); } *, *::before, *::after { box-sizing: border-box; } input, button, textarea, select { font: inherit; } button, select { text-transform: none; } body { margin: 0; font-family: var(--mantine-font-family); font-size: var(--mantine-font-size-md); line-height: var(--mantine-line-height); background-color: var(--mantine-color-body); color: var(--mantine-color-text); -webkit-font-smoothing: var(--mantine-webkit-font-smoothing); -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing); } @media screen and (max-device-width: 31.25em) { body { -webkit-text-size-adjust: 100% } } @media (prefers-reduced-motion: reduce) { [data-respect-reduced-motion] [data-reduce-motion] { transition: none; animation: none; } } [data-mantine-color-scheme='light'] .mantine-light-hidden { display: none; } [data-mantine-color-scheme='dark'] .mantine-dark-hidden { display: none; } .mantine-focus-auto:focus-visible { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .mantine-focus-always:focus { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .mantine-focus-never:focus { outline: none; } .mantine-active:active { transform: translateY(calc(0.0625rem * var(--mantine-scale))); } fieldset:disabled .mantine-active:active { transform: none; } :where([dir="rtl"]) .mantine-rotate-rtl { transform: rotate(180deg); } /* stylelint-disable */ /* This file is automatically generated, do not modify it directly. */ :root { --mantine-z-index-app: 100; --mantine-z-index-modal: 200; --mantine-z-index-popover: 300; --mantine-z-index-overlay: 400; --mantine-z-index-max: 9999; --mantine-scale: 1; --mantine-cursor-type: default; --mantine-webkit-font-smoothing: antialiased; --mantine-moz-font-smoothing: grayscale; --mantine-color-white: #fff; --mantine-color-black: #000; --mantine-line-height: 1.55; --mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; --mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; --mantine-heading-font-weight: 700; --mantine-heading-text-wrap: wrap; --mantine-radius-default: calc(0.25rem * var(--mantine-scale)); --mantine-primary-color-filled: var(--mantine-color-blue-filled); --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover); --mantine-primary-color-light: var(--mantine-color-blue-light); --mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover); --mantine-primary-color-light-color: var(--mantine-color-blue-light-color); --mantine-breakpoint-xs: 36em; --mantine-breakpoint-sm: 48em; --mantine-breakpoint-md: 62em; --mantine-breakpoint-lg: 75em; --mantine-breakpoint-xl: 88em; --mantine-spacing-xs: calc(0.625rem * var(--mantine-scale)); --mantine-spacing-sm: calc(0.75rem * var(--mantine-scale)); --mantine-spacing-md: calc(1rem * var(--mantine-scale)); --mantine-spacing-lg: calc(1.25rem * var(--mantine-scale)); --mantine-spacing-xl: calc(2rem * var(--mantine-scale)); --mantine-font-size-xs: calc(0.75rem * var(--mantine-scale)); --mantine-font-size-sm: calc(0.875rem * var(--mantine-scale)); --mantine-font-size-md: calc(1rem * var(--mantine-scale)); --mantine-font-size-lg: calc(1.125rem * var(--mantine-scale)); --mantine-font-size-xl: calc(1.25rem * var(--mantine-scale)); --mantine-line-height-xs: 1.4; --mantine-line-height-sm: 1.45; --mantine-line-height-md: 1.55; --mantine-line-height-lg: 1.6; --mantine-line-height-xl: 1.65; --mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1); --mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)); --mantine-shadow-md: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)); --mantine-shadow-lg: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale)) calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)); --mantine-shadow-xl: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale)) calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)); --mantine-radius-xs: calc(0.125rem * var(--mantine-scale)); --mantine-radius-sm: calc(0.25rem * var(--mantine-scale)); --mantine-radius-md: calc(0.5rem * var(--mantine-scale)); --mantine-radius-lg: calc(1rem * var(--mantine-scale)); --mantine-radius-xl: calc(2rem * var(--mantine-scale)); --mantine-primary-color-0: var(--mantine-color-blue-0); --mantine-primary-color-1: var(--mantine-color-blue-1); --mantine-primary-color-2: var(--mantine-color-blue-2); --mantine-primary-color-3: var(--mantine-color-blue-3); --mantine-primary-color-4: var(--mantine-color-blue-4); --mantine-primary-color-5: var(--mantine-color-blue-5); --mantine-primary-color-6: var(--mantine-color-blue-6); --mantine-primary-color-7: var(--mantine-color-blue-7); --mantine-primary-color-8: var(--mantine-color-blue-8); --mantine-primary-color-9: var(--mantine-color-blue-9); --mantine-color-dark-0: #c9c9c9; --mantine-color-dark-1: #b8b8b8; --mantine-color-dark-2: #828282; --mantine-color-dark-3: #696969; --mantine-color-dark-4: #424242; --mantine-color-dark-5: #3b3b3b; --mantine-color-dark-6: #2e2e2e; --mantine-color-dark-7: #242424; --mantine-color-dark-8: #1f1f1f; --mantine-color-dark-9: #141414; --mantine-color-gray-0: #f8f9fa; --mantine-color-gray-1: #f1f3f5; --mantine-color-gray-2: #e9ecef; --mantine-color-gray-3: #dee2e6; --mantine-color-gray-4: #ced4da; --mantine-color-gray-5: #adb5bd; --mantine-color-gray-6: #868e96; --mantine-color-gray-7: #495057; --mantine-color-gray-8: #343a40; --mantine-color-gray-9: #212529; --mantine-color-red-0: #fff5f5; --mantine-color-red-1: #ffe3e3; --mantine-color-red-2: #ffc9c9; --mantine-color-red-3: #ffa8a8; --mantine-color-red-4: #ff8787; --mantine-color-red-5: #ff6b6b; --mantine-color-red-6: #fa5252; --mantine-color-red-7: #f03e3e; --mantine-color-red-8: #e03131; --mantine-color-red-9: #c92a2a; --mantine-color-pink-0: #fff0f6; --mantine-color-pink-1: #ffdeeb; --mantine-color-pink-2: #fcc2d7; --mantine-color-pink-3: #faa2c1; --mantine-color-pink-4: #f783ac; --mantine-color-pink-5: #f06595; --mantine-color-pink-6: #e64980; --mantine-color-pink-7: #d6336c; --mantine-color-pink-8: #c2255c; --mantine-color-pink-9: #a61e4d; --mantine-color-grape-0: #f8f0fc; --mantine-color-grape-1: #f3d9fa; --mantine-color-grape-2: #eebefa; --mantine-color-grape-3: #e599f7; --mantine-color-grape-4: #da77f2; --mantine-color-grape-5: #cc5de8; --mantine-color-grape-6: #be4bdb; --mantine-color-grape-7: #ae3ec9; --mantine-color-grape-8: #9c36b5; --mantine-color-grape-9: #862e9c; --mantine-color-violet-0: #f3f0ff; --mantine-color-violet-1: #e5dbff; --mantine-color-violet-2: #d0bfff; --mantine-color-violet-3: #b197fc; --mantine-color-violet-4: #9775fa; --mantine-color-violet-5: #845ef7; --mantine-color-violet-6: #7950f2; --mantine-color-violet-7: #7048e8; --mantine-color-violet-8: #6741d9; --mantine-color-violet-9: #5f3dc4; --mantine-color-indigo-0: #edf2ff; --mantine-color-indigo-1: #dbe4ff; --mantine-color-indigo-2: #bac8ff; --mantine-color-indigo-3: #91a7ff; --mantine-color-indigo-4: #748ffc; --mantine-color-indigo-5: #5c7cfa; --mantine-color-indigo-6: #4c6ef5; --mantine-color-indigo-7: #4263eb; --mantine-color-indigo-8: #3b5bdb; --mantine-color-indigo-9: #364fc7; --mantine-color-blue-0: #e7f5ff; --mantine-color-blue-1: #d0ebff; --mantine-color-blue-2: #a5d8ff; --mantine-color-blue-3: #74c0fc; --mantine-color-blue-4: #4dabf7; --mantine-color-blue-5: #339af0; --mantine-color-blue-6: #228be6; --mantine-color-blue-7: #1c7ed6; --mantine-color-blue-8: #1971c2; --mantine-color-blue-9: #1864ab; --mantine-color-cyan-0: #e3fafc; --mantine-color-cyan-1: #c5f6fa; --mantine-color-cyan-2: #99e9f2; --mantine-color-cyan-3: #66d9e8; --mantine-color-cyan-4: #3bc9db; --mantine-color-cyan-5: #22b8cf; --mantine-color-cyan-6: #15aabf; --mantine-color-cyan-7: #1098ad; --mantine-color-cyan-8: #0c8599; --mantine-color-cyan-9: #0b7285; --mantine-color-teal-0: #e6fcf5; --mantine-color-teal-1: #c3fae8; --mantine-color-teal-2: #96f2d7; --mantine-color-teal-3: #63e6be; --mantine-color-teal-4: #38d9a9; --mantine-color-teal-5: #20c997; --mantine-color-teal-6: #12b886; --mantine-color-teal-7: #0ca678; --mantine-color-teal-8: #099268; --mantine-color-teal-9: #087f5b; --mantine-color-green-0: #ebfbee; --mantine-color-green-1: #d3f9d8; --mantine-color-green-2: #b2f2bb; --mantine-color-green-3: #8ce99a; --mantine-color-green-4: #69db7c; --mantine-color-green-5: #51cf66; --mantine-color-green-6: #40c057; --mantine-color-green-7: #37b24d; --mantine-color-green-8: #2f9e44; --mantine-color-green-9: #2b8a3e; --mantine-color-lime-0: #f4fce3; --mantine-color-lime-1: #e9fac8; --mantine-color-lime-2: #d8f5a2; --mantine-color-lime-3: #c0eb75; --mantine-color-lime-4: #a9e34b; --mantine-color-lime-5: #94d82d; --mantine-color-lime-6: #82c91e; --mantine-color-lime-7: #74b816; --mantine-color-lime-8: #66a80f; --mantine-color-lime-9: #5c940d; --mantine-color-yellow-0: #fff9db; --mantine-color-yellow-1: #fff3bf; --mantine-color-yellow-2: #ffec99; --mantine-color-yellow-3: #ffe066; --mantine-color-yellow-4: #ffd43b; --mantine-color-yellow-5: #fcc419; --mantine-color-yellow-6: #fab005; --mantine-color-yellow-7: #f59f00; --mantine-color-yellow-8: #f08c00; --mantine-color-yellow-9: #e67700; --mantine-color-orange-0: #fff4e6; --mantine-color-orange-1: #ffe8cc; --mantine-color-orange-2: #ffd8a8; --mantine-color-orange-3: #ffc078; --mantine-color-orange-4: #ffa94d; --mantine-color-orange-5: #ff922b; --mantine-color-orange-6: #fd7e14; --mantine-color-orange-7: #f76707; --mantine-color-orange-8: #e8590c; --mantine-color-orange-9: #d9480f; --mantine-h1-font-size: calc(2.125rem * var(--mantine-scale)); --mantine-h1-line-height: 1.3; --mantine-h1-font-weight: 700; --mantine-h2-font-size: calc(1.625rem * var(--mantine-scale)); --mantine-h2-line-height: 1.35; --mantine-h2-font-weight: 700; --mantine-h3-font-size: calc(1.375rem * var(--mantine-scale)); --mantine-h3-line-height: 1.4; --mantine-h3-font-weight: 700; --mantine-h4-font-size: calc(1.125rem * var(--mantine-scale)); --mantine-h4-line-height: 1.45; --mantine-h4-font-weight: 700; --mantine-h5-font-size: calc(1rem * var(--mantine-scale)); --mantine-h5-line-height: 1.5; --mantine-h5-font-weight: 700; --mantine-h6-font-size: calc(0.875rem * var(--mantine-scale)); --mantine-h6-line-height: 1.5; --mantine-h6-font-weight: 700; } :root[data-mantine-color-scheme='dark'] { --mantine-color-scheme: dark; --mantine-primary-color-contrast: var(--mantine-color-white); --mantine-color-bright: var(--mantine-color-white); --mantine-color-text: var(--mantine-color-dark-0); --mantine-color-body: var(--mantine-color-dark-7); --mantine-color-error: var(--mantine-color-red-8); --mantine-color-placeholder: var(--mantine-color-dark-3); --mantine-color-anchor: var(--mantine-color-blue-4); --mantine-color-default: var(--mantine-color-dark-6); --mantine-color-default-hover: var(--mantine-color-dark-5); --mantine-color-default-color: var(--mantine-color-white); --mantine-color-default-border: var(--mantine-color-dark-4); --mantine-color-dimmed: var(--mantine-color-dark-2); --mantine-color-disabled: var(--mantine-color-dark-6); --mantine-color-disabled-color: var(--mantine-color-dark-3); --mantine-color-disabled-border: var(--mantine-color-dark-4); --mantine-color-dark-text: var(--mantine-color-dark-4); --mantine-color-dark-filled: var(--mantine-color-dark-8); --mantine-color-dark-filled-hover: var(--mantine-color-dark-9); --mantine-color-dark-light: rgba(46, 46, 46, 0.15); --mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2); --mantine-color-dark-light-color: var(--mantine-color-dark-3); --mantine-color-dark-outline: var(--mantine-color-dark-4); --mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05); --mantine-color-gray-text: var(--mantine-color-gray-4); --mantine-color-gray-filled: var(--mantine-color-gray-8); --mantine-color-gray-filled-hover: var(--mantine-color-gray-9); --mantine-color-gray-light: rgba(134, 142, 150, 0.15); --mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2); --mantine-color-gray-light-color: var(--mantine-color-gray-3); --mantine-color-gray-outline: var(--mantine-color-gray-4); --mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05); --mantine-color-red-text: var(--mantine-color-red-4); --mantine-color-red-filled: var(--mantine-color-red-8); --mantine-color-red-filled-hover: var(--mantine-color-red-9); --mantine-color-red-light: rgba(250, 82, 82, 0.15); --mantine-color-red-light-hover: rgba(250, 82, 82, 0.2); --mantine-color-red-light-color: var(--mantine-color-red-3); --mantine-color-red-outline: var(--mantine-color-red-4); --mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05); --mantine-color-pink-text: var(--mantine-color-pink-4); --mantine-color-pink-filled: var(--mantine-color-pink-8); --mantine-color-pink-filled-hover: var(--mantine-color-pink-9); --mantine-color-pink-light: rgba(230, 73, 128, 0.15); --mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2); --mantine-color-pink-light-color: var(--mantine-color-pink-3); --mantine-color-pink-outline: var(--mantine-color-pink-4); --mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05); --mantine-color-grape-text: var(--mantine-color-grape-4); --mantine-color-grape-filled: var(--mantine-color-grape-8); --mantine-color-grape-filled-hover: var(--mantine-color-grape-9); --mantine-color-grape-light: rgba(190, 75, 219, 0.15); --mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2); --mantine-color-grape-light-color: var(--mantine-color-grape-3); --mantine-color-grape-outline: var(--mantine-color-grape-4); --mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05); --mantine-color-violet-text: var(--mantine-color-violet-4); --mantine-color-violet-filled: var(--mantine-color-violet-8); --mantine-color-violet-filled-hover: var(--mantine-color-violet-9); --mantine-color-violet-light: rgba(121, 80, 242, 0.15); --mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2); --mantine-color-violet-light-color: var(--mantine-color-violet-3); --mantine-color-violet-outline: var(--mantine-color-violet-4); --mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05); --mantine-color-indigo-text: var(--mantine-color-indigo-4); --mantine-color-indigo-filled: var(--mantine-color-indigo-8); --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9); --mantine-color-indigo-light: rgba(76, 110, 245, 0.15); --mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2); --mantine-color-indigo-light-color: var(--mantine-color-indigo-3); --mantine-color-indigo-outline: var(--mantine-color-indigo-4); --mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05); --mantine-color-blue-text: var(--mantine-color-blue-4); --mantine-color-blue-filled: var(--mantine-color-blue-8); --mantine-color-blue-filled-hover: var(--mantine-color-blue-9); --mantine-color-blue-light: rgba(34, 139, 230, 0.15); --mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2); --mantine-color-blue-light-color: var(--mantine-color-blue-3); --mantine-color-blue-outline: var(--mantine-color-blue-4); --mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05); --mantine-color-cyan-text: var(--mantine-color-cyan-4); --mantine-color-cyan-filled: var(--mantine-color-cyan-8); --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9); --mantine-color-cyan-light: rgba(21, 170, 191, 0.15); --mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2); --mantine-color-cyan-light-color: var(--mantine-color-cyan-3); --mantine-color-cyan-outline: var(--mantine-color-cyan-4); --mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05); --mantine-color-teal-text: var(--mantine-color-teal-4); --mantine-color-teal-filled: var(--mantine-color-teal-8); --mantine-color-teal-filled-hover: var(--mantine-color-teal-9); --mantine-color-teal-light: rgba(18, 184, 134, 0.15); --mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2); --mantine-color-teal-light-color: var(--mantine-color-teal-3); --mantine-color-teal-outline: var(--mantine-color-teal-4); --mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05); --mantine-color-green-text: var(--mantine-color-green-4); --mantine-color-green-filled: var(--mantine-color-green-8); --mantine-color-green-filled-hover: var(--mantine-color-green-9); --mantine-color-green-light: rgba(64, 192, 87, 0.15); --mantine-color-green-light-hover: rgba(64, 192, 87, 0.2); --mantine-color-green-light-color: var(--mantine-color-green-3); --mantine-color-green-outline: var(--mantine-color-green-4); --mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05); --mantine-color-lime-text: var(--mantine-color-lime-4); --mantine-color-lime-filled: var(--mantine-color-lime-8); --mantine-color-lime-filled-hover: var(--mantine-color-lime-9); --mantine-color-lime-light: rgba(130, 201, 30, 0.15); --mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2); --mantine-color-lime-light-color: var(--mantine-color-lime-3); --mantine-color-lime-outline: var(--mantine-color-lime-4); --mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05); --mantine-color-yellow-text: var(--mantine-color-yellow-4); --mantine-color-yellow-filled: var(--mantine-color-yellow-8); --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9); --mantine-color-yellow-light: rgba(250, 176, 5, 0.15); --mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2); --mantine-color-yellow-light-color: var(--mantine-color-yellow-3); --mantine-color-yellow-outline: var(--mantine-color-yellow-4); --mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05); --mantine-color-orange-text: var(--mantine-color-orange-4); --mantine-color-orange-filled: var(--mantine-color-orange-8); --mantine-color-orange-filled-hover: var(--mantine-color-orange-9); --mantine-color-orange-light: rgba(253, 126, 20, 0.15); --mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2); --mantine-color-orange-light-color: var(--mantine-color-orange-3); --mantine-color-orange-outline: var(--mantine-color-orange-4); --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05); } :root[data-mantine-color-scheme='light'] { --mantine-color-scheme: light; --mantine-primary-color-contrast: var(--mantine-color-white); --mantine-color-bright: var(--mantine-color-black); --mantine-color-text: #000; --mantine-color-body: #fff; --mantine-color-error: var(--mantine-color-red-6); --mantine-color-placeholder: var(--mantine-color-gray-5); --mantine-color-anchor: var(--mantine-color-blue-6); --mantine-color-default: var(--mantine-color-white); --mantine-color-default-hover: var(--mantine-color-gray-0); --mantine-color-default-color: var(--mantine-color-black); --mantine-color-default-border: var(--mantine-color-gray-4); --mantine-color-dimmed: var(--mantine-color-gray-6); --mantine-color-disabled: var(--mantine-color-gray-2); --mantine-color-disabled-color: var(--mantine-color-gray-5); --mantine-color-disabled-border: var(--mantine-color-gray-3); --mantine-color-dark-text: var(--mantine-color-dark-filled); --mantine-color-dark-filled: var(--mantine-color-dark-6); --mantine-color-dark-filled-hover: var(--mantine-color-dark-7); --mantine-color-dark-light: rgba(46, 46, 46, 0.1); --mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12); --mantine-color-dark-light-color: var(--mantine-color-dark-6); --mantine-color-dark-outline: var(--mantine-color-dark-6); --mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05); --mantine-color-gray-text: var(--mantine-color-gray-filled); --mantine-color-gray-filled: var(--mantine-color-gray-6); --mantine-color-gray-filled-hover: var(--mantine-color-gray-7); --mantine-color-gray-light: rgba(134, 142, 150, 0.1); --mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12); --mantine-color-gray-light-color: var(--mantine-color-gray-6); --mantine-color-gray-outline: var(--mantine-color-gray-6); --mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05); --mantine-color-red-text: var(--mantine-color-red-filled); --mantine-color-red-filled: var(--mantine-color-red-6); --mantine-color-red-filled-hover: var(--mantine-color-red-7); --mantine-color-red-light: rgba(250, 82, 82, 0.1); --mantine-color-red-light-hover: rgba(250, 82, 82, 0.12); --mantine-color-red-light-color: var(--mantine-color-red-6); --mantine-color-red-outline: var(--mantine-color-red-6); --mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05); --mantine-color-pink-text: var(--mantine-color-pink-filled); --mantine-color-pink-filled: var(--mantine-color-pink-6); --mantine-color-pink-filled-hover: var(--mantine-color-pink-7); --mantine-color-pink-light: rgba(230, 73, 128, 0.1); --mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12); --mantine-color-pink-light-color: var(--mantine-color-pink-6); --mantine-color-pink-outline: var(--mantine-color-pink-6); --mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05); --mantine-color-grape-text: var(--mantine-color-grape-filled); --mantine-color-grape-filled: var(--mantine-color-grape-6); --mantine-color-grape-filled-hover: var(--mantine-color-grape-7); --mantine-color-grape-light: rgba(190, 75, 219, 0.1); --mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12); --mantine-color-grape-light-color: var(--mantine-color-grape-6); --mantine-color-grape-outline: var(--mantine-color-grape-6); --mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05); --mantine-color-violet-text: var(--mantine-color-violet-filled); --mantine-color-violet-filled: var(--mantine-color-violet-6); --mantine-color-violet-filled-hover: var(--mantine-color-violet-7); --mantine-color-violet-light: rgba(121, 80, 242, 0.1); --mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12); --mantine-color-violet-light-color: var(--mantine-color-violet-6); --mantine-color-violet-outline: var(--mantine-color-violet-6); --mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05); --mantine-color-indigo-text: var(--mantine-color-indigo-filled); --mantine-color-indigo-filled: var(--mantine-color-indigo-6); --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7); --mantine-color-indigo-light: rgba(76, 110, 245, 0.1); --mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12); --mantine-color-indigo-light-color: var(--mantine-color-indigo-6); --mantine-color-indigo-outline: var(--mantine-color-indigo-6); --mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05); --mantine-color-blue-text: var(--mantine-color-blue-filled); --mantine-color-blue-filled: var(--mantine-color-blue-6); --mantine-color-blue-filled-hover: var(--mantine-color-blue-7); --mantine-color-blue-light: rgba(34, 139, 230, 0.1); --mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12); --mantine-color-blue-light-color: var(--mantine-color-blue-6); --mantine-color-blue-outline: var(--mantine-color-blue-6); --mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05); --mantine-color-cyan-text: var(--mantine-color-cyan-filled); --mantine-color-cyan-filled: var(--mantine-color-cyan-6); --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7); --mantine-color-cyan-light: rgba(21, 170, 191, 0.1); --mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12); --mantine-color-cyan-light-color: var(--mantine-color-cyan-6); --mantine-color-cyan-outline: var(--mantine-color-cyan-6); --mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05); --mantine-color-teal-text: var(--mantine-color-teal-filled); --mantine-color-teal-filled: var(--mantine-color-teal-6); --mantine-color-teal-filled-hover: var(--mantine-color-teal-7); --mantine-color-teal-light: rgba(18, 184, 134, 0.1); --mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12); --mantine-color-teal-light-color: var(--mantine-color-teal-6); --mantine-color-teal-outline: var(--mantine-color-teal-6); --mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05); --mantine-color-green-text: var(--mantine-color-green-filled); --mantine-color-green-filled: var(--mantine-color-green-6); --mantine-color-green-filled-hover: var(--mantine-color-green-7); --mantine-color-green-light: rgba(64, 192, 87, 0.1); --mantine-color-green-light-hover: rgba(64, 192, 87, 0.12); --mantine-color-green-light-color: var(--mantine-color-green-6); --mantine-color-green-outline: var(--mantine-color-green-6); --mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05); --mantine-color-lime-text: var(--mantine-color-lime-filled); --mantine-color-lime-filled: var(--mantine-color-lime-6); --mantine-color-lime-filled-hover: var(--mantine-color-lime-7); --mantine-color-lime-light: rgba(130, 201, 30, 0.1); --mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12); --mantine-color-lime-light-color: var(--mantine-color-lime-6); --mantine-color-lime-outline: var(--mantine-color-lime-6); --mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05); --mantine-color-yellow-text: var(--mantine-color-yellow-filled); --mantine-color-yellow-filled: var(--mantine-color-yellow-6); --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7); --mantine-color-yellow-light: rgba(250, 176, 5, 0.1); --mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12); --mantine-color-yellow-light-color: var(--mantine-color-yellow-6); --mantine-color-yellow-outline: var(--mantine-color-yellow-6); --mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05); --mantine-color-orange-text: var(--mantine-color-orange-filled); --mantine-color-orange-filled: var(--mantine-color-orange-6); --mantine-color-orange-filled-hover: var(--mantine-color-orange-7); --mantine-color-orange-light: rgba(253, 126, 20, 0.1); --mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12); --mantine-color-orange-light-color: var(--mantine-color-orange-6); --mantine-color-orange-outline: var(--mantine-color-orange-6); --mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05); } .m_d57069b5 { --scrollarea-scrollbar-size: calc(0.75rem * var(--mantine-scale)); position: relative; overflow: hidden; } .m_c0783ff9 { scrollbar-width: none; overscroll-behavior: var(--scrollarea-over-scroll-behavior); -ms-overflow-style: none; -webkit-overflow-scrolling: touch; width: 100%; height: 100%; } .m_c0783ff9::-webkit-scrollbar { display: none; } .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where( [data-offset-scrollbars='xy'], [data-offset-scrollbars='y'], [data-offset-scrollbars='present'] ):where([data-vertical-hidden]) { padding-inline-end: 0; padding-inline-start: 0; } .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where( [data-offset-scrollbars='xy'], [data-offset-scrollbars='y'], [data-offset-scrollbars='present'] ):not([data-vertical-hidden]) { padding-inline-end: var(--scrollarea-scrollbar-size); padding-inline-start: unset; } .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where( [data-offset-scrollbars='xy'], [data-offset-scrollbars='x'], [data-offset-scrollbars='present'] ):where([data-horizontal-hidden]) { padding-bottom: 0; } .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where( [data-offset-scrollbars='xy'], [data-offset-scrollbars='x'], [data-offset-scrollbars='present'] ):not([data-horizontal-hidden]) { padding-bottom: var(--scrollarea-scrollbar-size); } .m_f8f631dd { min-width: 100%; display: table; } .m_c44ba933 { user-select: none; touch-action: none; box-sizing: border-box; transition: background-color 150ms ease, opacity 150ms ease; padding: calc(var(--scrollarea-scrollbar-size) / 5); display: flex; background-color: transparent; flex-direction: row; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_c44ba933:hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='light']) .m_c44ba933:hover > .m_d8b5e363 { background-color: rgba(0, 0, 0, 0.5); } :where([data-mantine-color-scheme='dark']) .m_c44ba933:hover { background-color: var(--mantine-color-dark-8); } :where([data-mantine-color-scheme='dark']) .m_c44ba933:hover > .m_d8b5e363 { background-color: rgba(255, 255, 255, 0.5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_c44ba933:active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='light']) .m_c44ba933:active > .m_d8b5e363 { background-color: rgba(0, 0, 0, 0.5); } :where([data-mantine-color-scheme='dark']) .m_c44ba933:active { background-color: var(--mantine-color-dark-8); } :where([data-mantine-color-scheme='dark']) .m_c44ba933:active > .m_d8b5e363 { background-color: rgba(255, 255, 255, 0.5); } } .m_c44ba933:where([data-hidden], [data-state='hidden']) { display: none; } .m_c44ba933:where([data-orientation='vertical']) { width: var(--scrollarea-scrollbar-size); top: 0; bottom: var(--sa-corner-width); inset-inline-end: 0; } .m_c44ba933:where([data-orientation='horizontal']) { height: var(--scrollarea-scrollbar-size); flex-direction: column; bottom: 0; inset-inline-start: 0; inset-inline-end: var(--sa-corner-width); } .m_d8b5e363 { flex: 1; border-radius: var(--scrollarea-scrollbar-size); position: relative; transition: background-color 150ms ease; overflow: hidden; opacity: var(--thumb-opacity); } .m_d8b5e363::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: calc(2.75rem * var(--mantine-scale)); min-height: calc(2.75rem * var(--mantine-scale)); } :where([data-mantine-color-scheme='light']) .m_d8b5e363 { background-color: rgba(0, 0, 0, 0.4); } :where([data-mantine-color-scheme='dark']) .m_d8b5e363 { background-color: rgba(255, 255, 255, 0.4); } .m_21657268 { position: absolute; opacity: 0; transition: opacity 150ms ease; display: block; inset-inline-end: 0; bottom: 0; } :where([data-mantine-color-scheme='light']) .m_21657268 { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_21657268 { background-color: var(--mantine-color-dark-8); } .m_21657268:where([data-hovered]) { opacity: 1; } .m_21657268:where([data-hidden]) { display: none; } .m_b1336c6 { min-width: 100%; } .m_87cf2631 { background-color: transparent; cursor: pointer; border: 0; padding: 0; appearance: none; font-size: var(--mantine-font-size-md); text-align: left; text-decoration: none; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :where([dir="rtl"]) .m_87cf2631 { text-align: right; } .m_515a97f8 { border: 0; clip: rect(0 0 0 0); height: calc(0.0625rem * var(--mantine-scale)); width: calc(0.0625rem * var(--mantine-scale)); margin: calc(-0.0625rem * var(--mantine-scale)); overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .m_1b7284a3 { --paper-radius: var(--mantine-radius-default); outline: 0; -webkit-tap-highlight-color: transparent; display: block; touch-action: manipulation; text-decoration: none; border-radius: var(--paper-radius); box-shadow: var(--paper-shadow); background-color: var(--mantine-color-body); } [data-mantine-color-scheme='light'] .m_1b7284a3 { --paper-border-color: var(--mantine-color-gray-3); } [data-mantine-color-scheme='dark'] .m_1b7284a3 { --paper-border-color: var(--mantine-color-dark-4); } .m_1b7284a3:where([data-with-border]) { border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color); } .m_9814e45f { inset: 0; position: absolute; background: var(--overlay-bg, rgba(0, 0, 0, 0.6)); -webkit-backdrop-filter: var(--overlay-filter); backdrop-filter: var(--overlay-filter); border-radius: var(--overlay-radius, 0); z-index: var(--overlay-z-index); } .m_9814e45f:where([data-fixed]) { position: fixed; } .m_9814e45f:where([data-center]) { display: flex; align-items: center; justify-content: center; } .m_38a85659 { position: absolute; border: 1px solid var(--popover-border-color); padding: var(--mantine-spacing-sm) var(--mantine-spacing-md); box-shadow: var(--popover-shadow, none); border-radius: var(--popover-radius, var(--mantine-radius-default)); } .m_38a85659:where([data-fixed]) { position: fixed; } .m_38a85659:focus { outline: none; } :where([data-mantine-color-scheme='light']) .m_38a85659 { --popover-border-color: var(--mantine-color-gray-2); background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_38a85659 { --popover-border-color: var(--mantine-color-dark-4); background-color: var(--mantine-color-dark-6); } .m_a31dc6c1 { background-color: inherit; border: 1px solid var(--popover-border-color); z-index: 1; } .m_3d7bc908 { position: fixed; inset: 0; } .m_5ae2e3c { --loader-size-xs: calc(1.125rem * var(--mantine-scale)); --loader-size-sm: calc(1.375rem * var(--mantine-scale)); --loader-size-md: calc(2.25rem * var(--mantine-scale)); --loader-size-lg: calc(2.75rem * var(--mantine-scale)); --loader-size-xl: calc(3.625rem * var(--mantine-scale)); --loader-size: var(--loader-size-md); --loader-color: var(--mantine-primary-color-filled); } /* ----- Bars loader ----- */ @keyframes m_5d2b3b9d { 0% { transform: scale(0.6); opacity: 0; } 50%, 100% { transform: scale(1); } } .m_7a2bd4cd { position: relative; width: var(--loader-size); height: var(--loader-size); display: flex; gap: calc(var(--loader-size) / 5); } .m_870bb79 { flex: 1; background: var(--loader-color); animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; border-radius: calc(0.125rem * var(--mantine-scale)); } .m_870bb79:nth-of-type(1) { animation-delay: -240ms; } .m_870bb79:nth-of-type(2) { animation-delay: -120ms; } .m_870bb79:nth-of-type(3) { animation-delay: 0; } /* ----- Dots loader ----- */ @keyframes m_aac34a1 { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.5; } } .m_4e3f22d7 { display: flex; justify-content: center; align-items: center; gap: calc(var(--loader-size) / 10); position: relative; width: var(--loader-size); height: var(--loader-size); } .m_870c4af { width: calc(var(--loader-size) / 3 - var(--loader-size) / 15); height: calc(var(--loader-size) / 3 - var(--loader-size) / 15); border-radius: 50%; background: var(--loader-color); animation: m_aac34a1 0.8s infinite linear; } .m_870c4af:nth-child(2) { animation-delay: 0.4s; } /* ----- Oval loader ----- */ @keyframes m_f8e89c4b { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .m_b34414df { display: inline-block; width: var(--loader-size); height: var(--loader-size); } .m_b34414df::after { content: ''; display: block; width: var(--loader-size); height: var(--loader-size); border-radius: calc(625rem * var(--mantine-scale)); border-width: calc(var(--loader-size) / 8); border-style: solid; border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent; animation: m_f8e89c4b 1.2s linear infinite; } .m_8d3f4000 { --ai-size-xs: calc(1.125rem * var(--mantine-scale)); --ai-size-sm: calc(1.375rem * var(--mantine-scale)); --ai-size-md: calc(1.75rem * var(--mantine-scale)); --ai-size-lg: calc(2.125rem * var(--mantine-scale)); --ai-size-xl: calc(2.75rem * var(--mantine-scale)); --ai-size-input-xs: calc(1.875rem * var(--mantine-scale)); --ai-size-input-sm: calc(2.25rem * var(--mantine-scale)); --ai-size-input-md: calc(2.625rem * var(--mantine-scale)); --ai-size-input-lg: calc(3.125rem * var(--mantine-scale)); --ai-size-input-xl: calc(3.75rem * var(--mantine-scale)); --ai-size: var(--ai-size-md); --ai-color: var(--mantine-color-white); line-height: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; user-select: none; overflow: hidden; width: var(--ai-size); height: var(--ai-size); min-width: var(--ai-size); min-height: var(--ai-size); border-radius: var(--ai-radius, var(--mantine-radius-default)); background: var(--ai-bg, var(--mantine-primary-color-filled)); color: var(--ai-color, var(--mantine-color-white)); border: var(--ai-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent); cursor: pointer; } @media (hover: hover) { .m_8d3f4000:hover:where(:not([data-loading], :disabled, [data-disabled])) { background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover)); color: var(--ai-hover-color, var(--ai-color)); } } @media (hover: none) { .m_8d3f4000:active:where(:not([data-loading], :disabled, [data-disabled])) { background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover)); color: var(--ai-hover-color, var(--ai-color)); } } .m_8d3f4000[data-loading] { cursor: not-allowed; } .m_8d3f4000[data-loading] .m_8d3afb97 { opacity: 0; transform: translateY(100%); } .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) { cursor: not-allowed; border: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-disabled-color); background-color: var(--mantine-color-disabled); } .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])):active { transform: none; } .m_302b9fb1 { inset: calc(-0.0625rem * var(--mantine-scale)); position: absolute; border-radius: var(--ai-radius, var(--mantine-radius-default)); display: flex; align-items: center; justify-content: center; } :where([data-mantine-color-scheme='light']) .m_302b9fb1 { background-color: rgba(255, 255, 255, 0.15); } :where([data-mantine-color-scheme='dark']) .m_302b9fb1 { background-color: rgba(0, 0, 0, 0.15); } .m_1a0f1b21 { --ai-border-width: calc(0.0625rem * var(--mantine-scale)); display: flex; } .m_1a0f1b21 :where(*):focus { position: relative; z-index: 1; } .m_1a0f1b21[data-orientation='horizontal'] { flex-direction: row; } .m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child { border-end-end-radius: 0; border-start-end-radius: 0; border-inline-end-width: calc(var(--ai-border-width) / 2); } .m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child { border-end-start-radius: 0; border-start-start-radius: 0; border-inline-start-width: calc(var(--ai-border-width) / 2); } .m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) { border-radius: 0; border-inline-width: calc(var(--ai-border-width) / 2); } .m_1a0f1b21[data-orientation='vertical'] { flex-direction: column; } .m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child { border-end-start-radius: 0; border-end-end-radius: 0; border-bottom-width: calc(var(--ai-border-width) / 2); } .m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child { border-start-start-radius: 0; border-start-end-radius: 0; border-top-width: calc(var(--ai-border-width) / 2); } .m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) { border-radius: 0; border-bottom-width: calc(var(--ai-border-width) / 2); border-top-width: calc(var(--ai-border-width) / 2); } .m_8d3afb97 { display: flex; align-items: center; justify-content: center; transition: transform 150ms ease, opacity 100ms ease; width: 100%; height: 100%; } .m_437b6484 { --section-height-xs: calc(1.125rem * var(--mantine-scale)); --section-height-sm: calc(1.375rem * var(--mantine-scale)); --section-height-md: calc(1.75rem * var(--mantine-scale)); --section-height-lg: calc(2.125rem * var(--mantine-scale)); --section-height-xl: calc(2.75rem * var(--mantine-scale)); --section-height-input-xs: calc(1.875rem * var(--mantine-scale)); --section-height-input-sm: calc(2.25rem * var(--mantine-scale)); --section-height-input-md: calc(2.625rem * var(--mantine-scale)); --section-height-input-lg: calc(3.125rem * var(--mantine-scale)); --section-height-input-xl: calc(3.75rem * var(--mantine-scale)); --section-padding-x-xs: calc(0.375rem * var(--mantine-scale)); --section-padding-x-sm: calc(0.5rem * var(--mantine-scale)); --section-padding-x-md: calc(0.625rem * var(--mantine-scale)); --section-padding-x-lg: calc(0.75rem * var(--mantine-scale)); --section-padding-x-xl: calc(1rem * var(--mantine-scale)); --section-height: var(--section-height-sm); --section-padding-x: var(--section-padding-x-sm); --section-color: var(--mantine-color-white); font-weight: 600; width: auto; border-radius: var(--section-radius, var(--mantine-radius-default)); font-size: var(--section-fz, var(--mantine-font-size-sm)); background: var(--section-bg, var(--mantine-primary-color-filled)); border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent); color: var(--section-color, var(--mantine-color-white)); height: var(--section-height, var(--section-height-sm)); padding-inline: var(--section-padding-x, var(--section-padding-x-sm)); vertical-align: middle; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .m_86a44da5 { --cb-size-xs: calc(1.125rem * var(--mantine-scale)); --cb-size-sm: calc(1.375rem * var(--mantine-scale)); --cb-size-md: calc(1.75rem * var(--mantine-scale)); --cb-size-lg: calc(2.125rem * var(--mantine-scale)); --cb-size-xl: calc(2.75rem * var(--mantine-scale)); --cb-size: var(--cb-size-md); --cb-icon-size: 70%; --cb-radius: var(--mantine-radius-default); line-height: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; user-select: none; width: var(--cb-size); height: var(--cb-size); min-width: var(--cb-size); min-height: var(--cb-size); border-radius: var(--cb-radius); } :where([data-mantine-color-scheme='light']) .m_86a44da5 { color: var(--mantine-color-gray-7); } :where([data-mantine-color-scheme='dark']) .m_86a44da5 { color: var(--mantine-color-dark-1); } .m_86a44da5[data-disabled], .m_86a44da5:disabled { cursor: not-allowed; opacity: 0.6; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover { background-color: var(--mantine-color-dark-6); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):active { background-color: var(--mantine-color-dark-6); } } .m_4081bf90 { display: flex; flex-direction: row; flex-wrap: var(--group-wrap, wrap); justify-content: var(--group-justify, flex-start); align-items: var(--group-align, center); gap: var(--group-gap, var(--mantine-spacing-md)); } .m_4081bf90:where([data-grow]) > * { flex-grow: 1; max-width: var(--group-child-width); } .m_615af6c9 { line-height: 1; padding: 0; margin: 0; font-weight: 400; font-size: var(--mantine-font-size-md); } .m_b5489c3c { display: flex; justify-content: space-between; align-items: center; padding: var(--mb-padding, var(--mantine-spacing-md)); padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) - calc(0.3125rem * var(--mantine-scale))); position: sticky; top: 0; background-color: var(--mantine-color-body); z-index: 1000; min-height: calc(3.75rem * var(--mantine-scale)); transition: padding-inline-end 100ms; } .m_60c222c7 { position: fixed; width: 100%; top: 0; bottom: 0; z-index: var(--mb-z-index); pointer-events: none; } .m_fd1ab0aa { pointer-events: all; box-shadow: var(--mb-shadow, var(--mantine-shadow-xl)); } .m_fd1ab0aa [data-mantine-scrollbar] { z-index: 1001; } [data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar]) .m_b5489c3c { padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale))); } .m_606cb269 { margin-inline-start: auto; } .m_5df29311 { padding: var(--mb-padding, var(--mantine-spacing-md)); padding-top: var(--mb-padding, var(--mantine-spacing-md)); } .m_5df29311:where(:not(:only-child)) { padding-top: 0; } .m_6c018570 { position: relative; margin-top: var(--input-margin-top, 0rem); margin-bottom: var(--input-margin-bottom, 0rem); --input-height-xs: calc(1.875rem * var(--mantine-scale)); --input-height-sm: calc(2.25rem * var(--mantine-scale)); --input-height-md: calc(2.625rem * var(--mantine-scale)); --input-height-lg: calc(3.125rem * var(--mantine-scale)); --input-height-xl: calc(3.75rem * var(--mantine-scale)); --input-padding-y-xs: calc(0.3125rem * var(--mantine-scale)); --input-padding-y-sm: calc(0.375rem * var(--mantine-scale)); --input-padding-y-md: calc(0.5rem * var(--mantine-scale)); --input-padding-y-lg: calc(0.625rem * var(--mantine-scale)); --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale)); --input-height: var(--input-height-sm); --input-radius: var(--mantine-radius-default); --input-cursor: text; --input-text-align: left; --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))); --input-padding: calc(var(--input-height) / 3); --input-padding-inline-start: var(--input-padding); --input-padding-inline-end: var(--input-padding); --input-placeholder-color: var(--mantine-color-placeholder); --input-color: var(--mantine-color-text); --input-disabled-bg: var(--mantine-color-disabled); --input-disabled-color: var(--mantine-color-disabled-color); --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))); --input-right-section-size: var( --input-right-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))) ); --input-size: var(--input-height); --section-y: calc(0.0625rem * var(--mantine-scale)); --left-section-start: calc(0.0625rem * var(--mantine-scale)); --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius); --right-section-end: calc(0.0625rem * var(--mantine-scale)); --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0; } .m_6c018570[data-variant='unstyled'] { --input-padding: 0; --input-padding-y: 0; --input-padding-inline-start: 0; --input-padding-inline-end: 0; } .m_6c018570[data-pointer] { --input-cursor: pointer; } .m_6c018570[data-multiline] { --input-padding-y-xs: calc(0.28125rem * var(--mantine-scale)); --input-padding-y-sm: calc(0.34375rem * var(--mantine-scale)); --input-padding-y-md: calc(0.4375rem * var(--mantine-scale)); --input-padding-y-lg: calc(0.59375rem * var(--mantine-scale)); --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale)); --input-size: auto; --input-line-height: var(--mantine-line-height); --input-padding-y: var(--input-padding-y-sm); } .m_6c018570[data-with-left-section] { --input-padding-inline-start: var(--input-left-section-size); } .m_6c018570[data-with-right-section] { --input-padding-inline-end: var(--input-right-section-size); } [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] { --input-bd: var(--mantine-color-gray-4); --input-bg: var(--mantine-color-white); --input-bd-focus: var(--mantine-primary-color-filled); } [data-mantine-color-scheme='light'] .m_6c018570[data-variant='filled'] { --input-bd: transparent; --input-bg: var(--mantine-color-gray-1); --input-bd-focus: var(--mantine-primary-color-filled); } [data-mantine-color-scheme='light'] .m_6c018570[data-variant='unstyled'] { --input-bd: transparent; --input-bg: transparent; --input-bd-focus: transparent; } [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] { --input-bd: var(--mantine-color-dark-4); --input-bg: var(--mantine-color-dark-6); --input-bd-focus: var(--mantine-primary-color-filled); } [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='filled'] { --input-bd: transparent; --input-bg: var(--mantine-color-dark-5); --input-bd-focus: var(--mantine-primary-color-filled); } [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='unstyled'] { --input-bd: transparent; --input-bg: transparent; --input-bd-focus: transparent; } [data-mantine-color-scheme] .m_6c018570[data-error]:not([data-variant='unstyled']) { --input-bd: var(--mantine-color-error); } [data-mantine-color-scheme] .m_6c018570[data-error] { --input-color: var(--mantine-color-error); --input-placeholder-color: var(--mantine-color-error); --input-section-color: var(--mantine-color-error); } :where([dir="rtl"]) .m_6c018570 { --input-text-align: right; --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0; --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius); } .m_8fb7ebe7 { -webkit-tap-highlight-color: transparent; appearance: none; resize: var(--input-resize, none); display: block; width: 100%; transition: border-color 100ms ease; text-align: var(--input-text-align); color: var(--input-color); border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd); background-color: var(--input-bg); font-family: var(--input-font-family, var(--mantine-font-family)); height: var(--input-size); min-height: var(--input-height); line-height: var(--input-line-height); font-size: var(--input-fz, var(--input-fz, var(--mantine-font-size-sm))); border-radius: var(--input-radius); padding-inline-start: var(--input-padding-inline-start); padding-inline-end: var(--input-padding-inline-end); padding-top: var(--input-padding-y, 0rem); padding-bottom: var(--input-padding-y, 0rem); cursor: var(--input-cursor); overflow: var(--input-overflow); } /* Used as data attribute in Textarea component, does not have associated prop on the Input component */ .m_8fb7ebe7[data-no-overflow] { --input-overflow: hidden; } /* Used as data attribute in JsonInput component, does not have associated prop on the Input component */ .m_8fb7ebe7[data-monospace] { --input-font-family: var(--mantine-font-family-monospace); --input-fz: calc(var(--input-fz, var(--mantine-font-size-sm)) - calc(0.125rem * var(--mantine-scale))); } .m_8fb7ebe7:focus, .m_8fb7ebe7:focus-within { outline: none; --input-bd: var(--input-bd-focus); } [data-error] .m_8fb7ebe7:focus, [data-error] .m_8fb7ebe7:focus-within { --input-bd: var(--mantine-color-error); } .m_8fb7ebe7::placeholder { color: var(--input-placeholder-color); opacity: 1; } .m_8fb7ebe7::-webkit-inner-spin-button, .m_8fb7ebe7::-webkit-outer-spin-button, .m_8fb7ebe7::-webkit-search-decoration, .m_8fb7ebe7::-webkit-search-cancel-button, .m_8fb7ebe7::-webkit-search-results-button, .m_8fb7ebe7::-webkit-search-results-decoration { appearance: none; } .m_8fb7ebe7[type='number'] { -moz-appearance: textfield; } .m_8fb7ebe7:disabled, .m_8fb7ebe7[data-disabled] { cursor: not-allowed; opacity: 0.6; background-color: var(--input-disabled-bg); color: var(--input-disabled-color); } /* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */ .m_8fb7ebe7:has(input:disabled) { cursor: not-allowed; opacity: 0.6; background-color: var(--input-disabled-bg); color: var(--input-disabled-color); } .m_8fb7ebe7:read-only { caret-color: transparent; } .m_82577fc2 { pointer-events: var(--section-pointer-events); position: absolute; z-index: 1; inset-inline-start: var(--section-start); inset-inline-end: var(--section-end); bottom: var(--section-y); top: var(--section-y); display: flex; align-items: center; justify-content: center; width: var(--section-size); border-radius: var(--section-border-radius); color: var(--input-section-color, var(--mantine-color-dimmed)); } .m_82577fc2[data-position='right'] { --section-pointer-events: var(--input-right-section-pointer-events); --section-end: var(--right-section-end); --section-size: var(--input-right-section-size); --section-border-radius: var(--right-section-border-radius); } .m_82577fc2[data-position='left'] { --section-pointer-events: var(--input-left-section-pointer-events); --section-start: var(--left-section-start); --section-size: var(--input-left-section-size); --section-border-radius: var(--left-section-border-radius); } /* ----- Input.Placeholder ----- */ .m_88bacfd0 { color: var(--input-placeholder-color, var(--mantine-color-placeholder)); } [data-error] .m_88bacfd0 { --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder)); } /* ----- Input.Wrapper ----- */ .m_46b77525 { line-height: var(--mantine-line-height); } .m_8fdc1311 { display: inline-block; font-weight: 500; word-break: break-word; cursor: default; -webkit-tap-highlight-color: transparent; font-size: var(--input-label-size, var(--mantine-font-size-sm)); } .m_78a94662 { color: var(--input-asterisk-color, var(--mantine-color-error)); } .m_8f816625, .m_fe47ce59 { word-wrap: break-word; line-height: 1.2; display: block; margin: 0; padding: 0; } .m_8f816625 { color: var(--mantine-color-error); font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))); } .m_fe47ce59 { color: var(--mantine-color-dimmed); font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale)))); } .m_8bffd616 { display: flex; } .m_96b553a6 { --transition-duration: 150ms; top: 0; left: 0; position: absolute; z-index: 0; transition-property: transform, width, height; transition-timing-function: ease; transition-duration: 0ms; } .m_96b553a6:where([data-initialized]) { transition-duration: var(--transition-duration); } .m_96b553a6:where([data-hidden]) { background-color: red; display: none; } .m_9bdbb667 { --accordion-radius: var(--mantine-radius-default); } .m_df78851f { word-break: break-word; } .m_4ba554d4 { padding: var(--mantine-spacing-md); padding-top: calc(var(--mantine-spacing-xs) / 2); } .m_8fa820a0 { margin: 0; padding: 0; } .m_4ba585b8 { width: 100%; display: flex; align-items: center; flex-direction: row-reverse; padding-inline: var(--mantine-spacing-md); opacity: 1; cursor: pointer; background-color: transparent; color: var(--mantine-color-bright); } .m_4ba585b8:where([data-chevron-position='left']) { flex-direction: row; padding-inline-start: 0; } .m_4ba585b8:where(:disabled, [data-disabled]) { opacity: 0.4; cursor: not-allowed; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) .m_4271d21b:where(:not(:disabled, [data-disabled])):hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) .m_4271d21b:where(:not(:disabled, [data-disabled])):hover { background-color: var(--mantine-color-dark-6); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) .m_4271d21b:where(:not(:disabled, [data-disabled])):active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) .m_4271d21b:where(:not(:disabled, [data-disabled])):active { background-color: var(--mantine-color-dark-6); } } .m_df3ffa0f { color: inherit; font-weight: 400; flex: 1; overflow: hidden; text-overflow: ellipsis; padding-top: var(--mantine-spacing-sm); padding-bottom: var(--mantine-spacing-sm); } .m_3f35ae96 { display: flex; align-items: center; justify-content: flex-start; transition: transform var(--accordion-transition-duration, 200ms) ease; width: var(--accordion-chevron-size, calc(0.9375rem * var(--mantine-scale))); min-width: var(--accordion-chevron-size, calc(0.9375rem * var(--mantine-scale))); transform: rotate(0deg); } .m_3f35ae96:where([data-rotate]) { transform: rotate(180deg); } .m_3f35ae96:where([data-position='left']) { margin-inline-end: var(--mantine-spacing-md); margin-inline-start: var(--mantine-spacing-md); } .m_9bd771fe { display: flex; align-items: center; justify-content: center; margin-inline-end: var(--mantine-spacing-sm); } .m_9bd771fe:where([data-chevron-position='left']) { margin-inline-end: 0; margin-inline-start: var(--mantine-spacing-lg); } :where([data-mantine-color-scheme='light']) .m_9bd7b098 { --item-border-color: var(--mantine-color-gray-3); --item-filled-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_9bd7b098 { --item-border-color: var(--mantine-color-dark-4); --item-filled-color: var(--mantine-color-dark-6); } .m_fe19b709 { border-bottom: 1px solid var(--item-border-color); } .m_1f921b3b { border: 1px solid var(--item-border-color); transition: background-color 150ms ease; } .m_1f921b3b:where([data-active]) { background-color: var(--item-filled-color); } .m_1f921b3b:first-of-type { border-start-start-radius: var(--accordion-radius); border-start-end-radius: var(--accordion-radius); } .m_1f921b3b:first-of-type > [data-accordion-control] { border-start-start-radius: var(--accordion-radius); border-start-end-radius: var(--accordion-radius); } .m_1f921b3b:last-of-type { border-end-start-radius: var(--accordion-radius); border-end-end-radius: var(--accordion-radius); } .m_1f921b3b:last-of-type > [data-accordion-control] { border-end-start-radius: var(--accordion-radius); border-end-end-radius: var(--accordion-radius); } .m_1f921b3b + .m_1f921b3b { border-top: 0; } .m_2cdf939a { border-radius: var(--accordion-radius); } .m_2cdf939a:where([data-active]) { background-color: var(--item-filled-color); } .m_9f59b069 { background-color: var(--item-filled-color); border-radius: var(--accordion-radius); border: calc(0.0625rem * var(--mantine-scale)) solid transparent; transition: background-color 150ms ease; } .m_9f59b069[data-active] { border-color: var(--item-border-color); } :where([data-mantine-color-scheme='light']) .m_9f59b069[data-active] { background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_9f59b069[data-active] { background-color: var(--mantine-color-dark-7); } .m_9f59b069 + .m_9f59b069 { margin-top: var(--mantine-spacing-md); } .m_7f854edf { position: fixed; z-index: var(--affix-z-index); inset-inline-start: var(--affix-left); inset-inline-end: var(--affix-right); top: var(--affix-top); bottom: var(--affix-bottom); } .m_66836ed3 { --alert-radius: var(--mantine-radius-default); --alert-bg: var(--mantine-primary-color-light); --alert-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; --alert-color: var(--mantine-primary-color-light-color); padding: var(--mantine-spacing-md) var(--mantine-spacing-md); border-radius: var(--alert-radius); position: relative; overflow: hidden; background-color: var(--alert-bg); border: var(--alert-bd); color: var(--alert-color); } .m_a5d60502 { display: flex; } .m_667c2793 { flex: 1; display: flex; flex-direction: column; gap: var(--mantine-spacing-xs); } .m_6a03f287 { display: flex; align-items: center; justify-content: space-between; font-size: var(--mantine-font-size-sm); font-weight: 700; } .m_6a03f287:where([data-with-close-button]) { padding-inline-end: var(--mantine-spacing-md); } .m_698f4f23 { display: block; overflow: hidden; text-overflow: ellipsis; } .m_667f2a6a { line-height: 1; width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale)); display: flex; align-items: center; justify-content: flex-start; margin-inline-end: var(--mantine-spacing-md); margin-top: calc(0.0625rem * var(--mantine-scale)); } .m_7fa78076 { text-overflow: ellipsis; overflow: hidden; font-size: var(--mantine-font-size-sm); } :where([data-mantine-color-scheme='light']) .m_7fa78076 { color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_7fa78076 { color: var(--mantine-color-white); } .m_7fa78076:where([data-variant='filled']) { color: var(--alert-color); } .m_7fa78076:where([data-variant='white']) { color: var(--mantine-color-black); } .m_87f54839 { width: calc(1.25rem * var(--mantine-scale)); height: calc(1.25rem * var(--mantine-scale)); color: var(--alert-color); } .m_b6d8b162 { -webkit-tap-highlight-color: transparent; text-decoration: none; font-size: var(--text-fz, var(--mantine-font-size-md)); line-height: var(--text-lh, var(--mantine-line-height-md)); font-weight: normal; margin: 0; padding: 0; color: var(--text-color); } .m_b6d8b162:where([data-truncate]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m_b6d8b162:where([data-truncate='start']) { direction: rtl; text-align: right; } :where([dir="rtl"]) .m_b6d8b162:where([data-truncate='start']) { direction: ltr; text-align: left; } .m_b6d8b162:where([data-variant='gradient']) { background-image: var(--text-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .m_b6d8b162:where([data-line-clamp]) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--text-line-clamp); -webkit-box-orient: vertical; } .m_b6d8b162:where([data-inherit]) { line-height: inherit; font-weight: inherit; font-size: inherit; } .m_b6d8b162:where([data-inline]) { line-height: 1; } .m_849cf0da { color: var(--mantine-color-anchor); text-decoration: none; appearance: none; border: none; display: inline; padding: 0; margin: 0; background-color: transparent; cursor: pointer; } @media (hover: hover) { .m_849cf0da:where([data-underline='hover']):hover { text-decoration: underline; } } @media (hover: none) { .m_849cf0da:where([data-underline='hover']):active { text-decoration: underline; } } .m_849cf0da:where([data-underline='not-hover']) { text-decoration: underline; } @media (hover: hover) { .m_849cf0da:where([data-underline='not-hover']):hover { text-decoration: none; } } @media (hover: none) { .m_849cf0da:where([data-underline='not-hover']):active { text-decoration: none; } } .m_849cf0da:where([data-underline='always']) { text-decoration: underline; } .m_849cf0da:where([data-variant='gradient']), .m_849cf0da:where([data-variant='gradient']):hover { text-decoration: none; } .m_849cf0da:where([data-line-clamp]) { display: -webkit-box; } .m_48204f9b { width: var(--slider-size); height: var(--slider-size); position: relative; border-radius: 100%; display: flex; align-items: center; justify-content: center; user-select: none; } .m_48204f9b:focus-within { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .m_48204f9b { --slider-size: calc(3.75rem * var(--mantine-scale)); --thumb-size: calc(var(--slider-size) / 5); } :where([data-mantine-color-scheme='light']) .m_48204f9b { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='dark']) .m_48204f9b { background-color: var(--mantine-color-dark-5); } .m_bb9cdbad { position: absolute; inset: calc(0.0625rem * var(--mantine-scale)); border-radius: var(--slider-size); pointer-events: none; } .m_481dd586 { width: calc(0.125rem * var(--mantine-scale)); position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); transform: rotate(var(--angle)); } .m_481dd586::before { content: ''; position: absolute; top: calc(var(--thumb-size) / 3); left: calc(0.03125rem * var(--mantine-scale)); width: calc(0.0625rem * var(--mantine-scale)); height: calc(var(--thumb-size) / 1.5); transform: translate(-50%, -50%); } :where([data-mantine-color-scheme='light']) .m_481dd586::before { background-color: var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_481dd586::before { background-color: var(--mantine-color-dark-3); } .m_481dd586[data-label]::after { min-width: calc(1.125rem * var(--mantine-scale)); text-align: center; content: attr(data-label); position: absolute; top: calc(-1.5rem * var(--mantine-scale)); left: calc(-0.4375rem * var(--mantine-scale)); transform: rotate(calc(360deg - var(--angle))); font-size: var(--mantine-font-size-xs); } .m_bc02ba3d { position: absolute; inset-block: 0; inset-inline-start: calc(50% - 1.5px); inset-inline-end: 0; height: 100%; width: calc(0.1875rem * var(--mantine-scale)); outline: none; pointer-events: none; } .m_bc02ba3d::before { content: ''; position: absolute; right: 0; top: 0; height: min(var(--thumb-size), calc(var(--slider-size) / 2)); width: calc(0.1875rem * var(--mantine-scale)); } :where([data-mantine-color-scheme='light']) .m_bc02ba3d::before { background-color: var(--mantine-color-gray-7); } :where([data-mantine-color-scheme='dark']) .m_bc02ba3d::before { background-color: var(--mantine-color-dark-1); } .m_bb8e875b { font-size: var(--mantine-font-size-xs); } .m_89ab340[data-resizing] { --app-shell-transition-duration: 0ms !important; } .m_89ab340[data-disabled] { --app-shell-header-offset: 0rem !important; --app-shell-navbar-offset: 0rem !important; --app-shell-aside-offset: 0rem !important; --app-shell-footer-offset: 0rem !important; } [data-mantine-color-scheme='light'] .m_89ab340 { --app-shell-border-color: var(--mantine-color-gray-3); } [data-mantine-color-scheme='dark'] .m_89ab340 { --app-shell-border-color: var(--mantine-color-dark-4); } .m_45252eee, .m_9cdde9a, .m_3b16f56b, .m_8983817, .m_3840c879 { transition-duration: var(--app-shell-transition-duration); transition-timing-function: var(--app-shell-transition-timing-function); } .m_45252eee, .m_9cdde9a { position: fixed; display: flex; flex-direction: column; top: var(--app-shell-header-offset, 0rem); height: calc( 100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem) ); background-color: var(--mantine-color-body); transition-property: transform, top, height; } :where([data-layout='alt']) .m_45252eee, :where([data-layout='alt']) .m_9cdde9a { top: 0rem; height: 100dvh; } .m_45252eee { inset-inline-start: 0; width: var(--app-shell-navbar-width); transition-property: transform, top, height; transform: var(--app-shell-navbar-transform); z-index: var(--app-shell-navbar-z-index); } :where([dir="rtl"]) .m_45252eee { transform: var(--app-shell-navbar-transform-rtl); } .m_45252eee:where([data-with-border]) { border-inline-end: 1px solid var(--app-shell-border-color); } .m_9cdde9a { inset-inline-end: 0; width: var(--app-shell-aside-width); transform: var(--app-shell-aside-transform); z-index: var(--app-shell-aside-z-index); } :where([dir="rtl"]) .m_9cdde9a { transform: var(--app-shell-aside-transform-rtl); } .m_9cdde9a:where([data-with-border]) { border-inline-start: 1px solid var(--app-shell-border-color); } .m_8983817 { padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding)); padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding)); padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding)); padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding)); min-height: 100dvh; transition-property: padding; } .m_3b16f56b, .m_3840c879 { position: fixed; inset-inline: 0; transition-property: transform, left, right; background-color: var(--mantine-color-body); } :where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 { inset-inline-start: var(--app-shell-navbar-offset, 0rem); inset-inline-end: var(--app-shell-aside-offset, 0rem); } .m_3b16f56b { top: 0; height: var(--app-shell-header-height); background-color: var(--mantine-color-body); transform: var(--app-shell-header-transform); z-index: var(--app-shell-header-z-index); } .m_3b16f56b:where([data-with-border]) { border-bottom: 1px solid var(--app-shell-border-color); } .m_3840c879 { bottom: 0; height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); transform: var(--app-shell-footer-transform); z-index: var(--app-shell-footer-z-index); } .m_3840c879:where([data-with-border]) { border-top: 1px solid var(--app-shell-border-color); } .m_6dcfc7c7 { flex-grow: 0; } .m_6dcfc7c7:where([data-grow]) { flex-grow: 1; } .m_71ac47fc { --ar-ratio: 1; max-width: 100%; } .m_71ac47fc > :where(*:not(style)) { aspect-ratio: var(--ar-ratio); width: 100%; } .m_71ac47fc > :where(img, video) { object-fit: cover; } .m_88b62a41 { --combobox-padding: calc(0.25rem * var(--mantine-scale)); padding: var(--combobox-padding); } .m_88b62a41:has([data-mantine-scrollbar]) .m_985517d8 { max-width: calc(100% + var(--combobox-padding)); } .m_88b62a41[data-composed] { padding-inline-end: 0; } .m_88b62a41[data-hidden] { display: none; } /* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */ .m_88b62a41, .m_b2821a6e { --combobox-option-padding-xs: calc(0.25rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale)); --combobox-option-padding-sm: calc(0.375rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)); --combobox-option-padding-md: calc(0.5rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale)); --combobox-option-padding-lg: calc(0.625rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale)); --combobox-option-padding-xl: calc(0.875rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale)); --combobox-option-padding: var(--combobox-option-padding-sm); } .m_92253aa5 { padding: var(--combobox-option-padding); font-size: var(--combobox-option-fz, var(--mantine-font-size-sm)); border-radius: var(--mantine-radius-default); background-color: transparent; color: inherit; cursor: pointer; word-break: break-word; } .m_92253aa5:where([data-combobox-selected]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } .m_92253aa5:where([data-combobox-disabled]) { cursor: not-allowed; opacity: 0.35; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) { background-color: var(--mantine-color-dark-7); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) { background-color: var(--mantine-color-dark-7); } } .m_985517d8 { margin-inline: calc(var(--combobox-padding) * -1); margin-top: calc(var(--combobox-padding) * -1); width: calc(100% + var(--combobox-padding) * 2); border-top-width: 0; border-inline-width: 0; border-end-start-radius: 0; border-end-end-radius: 0; margin-bottom: var(--combobox-padding); position: relative; } :where([data-mantine-color-scheme='light']) .m_985517d8, :where([data-mantine-color-scheme='light']) .m_985517d8:focus { border-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_985517d8, :where([data-mantine-color-scheme='dark']) .m_985517d8:focus { border-color: var(--mantine-color-dark-4); } :where([data-mantine-color-scheme='light']) .m_985517d8 { background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_985517d8 { background-color: var(--mantine-color-dark-7); } .m_2530cd1d { font-size: var(--combobox-option-fz, var(--mantine-font-size-sm)); text-align: center; padding: var(--combobox-option-padding); color: var(--mantine-color-dimmed); } .m_858f94bd, .m_82b967cb { font-size: var(--combobox-option-fz, var(--mantine-font-size-sm)); border: 0 solid transparent; margin-inline: calc(var(--combobox-padding) * -1); padding: var(--combobox-option-padding); } :where([data-mantine-color-scheme='light']) .m_858f94bd, :where([data-mantine-color-scheme='light']) .m_82b967cb { border-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_858f94bd, :where([data-mantine-color-scheme='dark']) .m_82b967cb { border-color: var(--mantine-color-dark-4); } .m_82b967cb { border-top-width: calc(0.0625rem * var(--mantine-scale)); margin-top: var(--combobox-padding); margin-bottom: calc(var(--combobox-padding) * -1); } .m_858f94bd { border-bottom-width: calc(0.0625rem * var(--mantine-scale)); margin-bottom: var(--combobox-padding); margin-top: calc(var(--combobox-padding) * -1); } .m_254f3e4f:has(.m_2bb2e9e5:only-child) { display: none; } .m_2bb2e9e5 { color: var(--mantine-color-dimmed); font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85); padding: var(--combobox-option-padding); font-weight: 500; position: relative; display: flex; align-items: center; } .m_2bb2e9e5::after { content: ''; flex: 1; inset-inline: 0; height: calc(0.0625rem * var(--mantine-scale)); margin-inline-start: var(--mantine-spacing-xs); } :where([data-mantine-color-scheme='light']) .m_2bb2e9e5::after { background-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_2bb2e9e5::after { background-color: var(--mantine-color-dark-4); } .m_2bb2e9e5:only-child { display: none; } /* ------- Combobox.Chevron ------- */ .m_2943220b { --combobox-chevron-size-xs: calc(0.875rem * var(--mantine-scale)); --combobox-chevron-size-sm: calc(1.125rem * var(--mantine-scale)); --combobox-chevron-size-md: calc(1.25rem * var(--mantine-scale)); --combobox-chevron-size-lg: calc(1.5rem * var(--mantine-scale)); --combobox-chevron-size-xl: calc(1.75rem * var(--mantine-scale)); --combobox-chevron-size: var(--combobox-chevron-size-sm); } :where([data-mantine-color-scheme='light']) .m_2943220b { --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6)); } :where([data-mantine-color-scheme='dark']) .m_2943220b { --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3)); } .m_2943220b { width: var(--combobox-chevron-size); height: var(--combobox-chevron-size); color: var(--_combobox-chevron-color); } .m_2943220b:where([data-error]) { color: var(--combobox-chevron-color, var(--mantine-color-error)); } /* ------- OptionsDropdown ------- */ .m_390b5f4 { display: flex; align-items: center; gap: calc(0.5rem * var(--mantine-scale)); } .m_390b5f4:where([data-reverse]) { justify-content: space-between; } .m_8ee53fc2 { opacity: 0.4; width: 0.8em; min-width: 0.8em; height: 0.8em; } :where([data-combobox-selected]) .m_8ee53fc2 { opacity: 1; } .m_5f75b09e { --label-lh-xs: calc(1rem * var(--mantine-scale)); --label-lh-sm: calc(1.25rem * var(--mantine-scale)); --label-lh-md: calc(1.5rem * var(--mantine-scale)); --label-lh-lg: calc(1.875rem * var(--mantine-scale)); --label-lh-xl: calc(2.25rem * var(--mantine-scale)); --label-lh: var(--label-lh-sm); } .m_5f75b09e[data-label-position='left'] { --label-order: 1; --label-offset-end: var(--mantine-spacing-sm); --label-offset-start: 0; } .m_5f75b09e[data-label-position='right'] { --label-order: 2; --label-offset-end: 0; --label-offset-start: var(--mantine-spacing-sm); } .m_5f6e695e { display: flex; } .m_d3ea56bb { --label-cursor: var(--mantine-cursor-type); -webkit-tap-highlight-color: transparent; display: inline-flex; flex-direction: column; font-size: var(--label-fz, var(--mantine-font-size-sm)); line-height: var(--label-lh); cursor: var(--label-cursor); order: var(--label-order); } fieldset:disabled .m_d3ea56bb, .m_d3ea56bb[data-disabled] { --label-cursor: not-allowed; } .m_8ee546b8 { cursor: var(--label-cursor); color: inherit; padding-inline-start: var(--label-offset-start); padding-inline-end: var(--label-offset-end); } fieldset:disabled .m_8ee546b8, .m_8ee546b8:where([data-disabled]) { color: var(--mantine-color-disabled-color); } .m_328f68c0 { margin-top: calc(var(--mantine-spacing-xs) / 2); padding-inline-start: var(--label-offset-start); padding-inline-end: var(--label-offset-end); } .m_8e8a99cc { margin-top: calc(var(--mantine-spacing-xs) / 2); padding-inline-start: var(--label-offset-start); padding-inline-end: var(--label-offset-end); } .m_26775b0a { --card-radius: var(--mantine-radius-default); display: block; width: 100%; border-radius: var(--card-radius); cursor: pointer; } .m_26775b0a :where(*) { cursor: inherit; } .m_26775b0a:where([data-with-border]) { border: calc(0.0625rem * var(--mantine-scale)) solid transparent; } :where([data-mantine-color-scheme='light']) .m_26775b0a:where([data-with-border]) { border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_26775b0a:where([data-with-border]) { border-color: var(--mantine-color-dark-4); } .m_5e5256ee { --checkbox-size-xs: calc(1rem * var(--mantine-scale)); --checkbox-size-sm: calc(1.25rem * var(--mantine-scale)); --checkbox-size-md: calc(1.5rem * var(--mantine-scale)); --checkbox-size-lg: calc(1.875rem * var(--mantine-scale)); --checkbox-size-xl: calc(2.25rem * var(--mantine-scale)); --checkbox-size: var(--checkbox-size-sm); --checkbox-color: var(--mantine-primary-color-filled); --checkbox-icon-color: var(--mantine-color-white); position: relative; border: calc(0.0625rem * var(--mantine-scale)) solid transparent; width: var(--checkbox-size); min-width: var(--checkbox-size); height: var(--checkbox-size); min-height: var(--checkbox-size); border-radius: var(--checkbox-radius, var(--mantine-radius-default)); transition: border-color 100ms ease, background-color 100ms ease; cursor: var(--mantine-cursor-type); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; } :where([data-mantine-color-scheme='light']) .m_5e5256ee { background-color: var(--mantine-color-white); border-color: var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_5e5256ee { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); } .m_5e5256ee[data-indeterminate], .m_5e5256ee[data-checked] { background-color: var(--checkbox-color); border-color: var(--checkbox-color); } .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a { opacity: 1; transform: none; color: var(--checkbox-icon-color); } .m_5e5256ee[data-disabled] { cursor: not-allowed; border-color: var(--mantine-color-disabled-border); background-color: var(--mantine-color-disabled); } [data-mantine-color-scheme='light'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a { color: var(--mantine-color-gray-5); } [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a { color: var(--mantine-color-dark-3); } .m_76e20374[data-indeterminate]:not([data-disabled]), .m_76e20374[data-checked]:not([data-disabled]) { background-color: transparent; border-color: var(--checkbox-color); } .m_76e20374[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_76e20374[data-checked]:not([data-disabled]) > .m_1b1c543a { color: var(--checkbox-color); opacity: 1; transform: none; } .m_1b1c543a { display: block; width: 60%; color: transparent; pointer-events: none; transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5); opacity: 1; transition: transform 100ms ease, opacity 100ms ease; } .m_bf2d988c { --checkbox-size-xs: calc(1rem * var(--mantine-scale)); --checkbox-size-sm: calc(1.25rem * var(--mantine-scale)); --checkbox-size-md: calc(1.5rem * var(--mantine-scale)); --checkbox-size-lg: calc(1.875rem * var(--mantine-scale)); --checkbox-size-xl: calc(2.25rem * var(--mantine-scale)); --checkbox-size: var(--checkbox-size-sm); --checkbox-color: var(--mantine-primary-color-filled); --checkbox-icon-color: var(--mantine-color-white); } .m_26062bec { position: relative; width: var(--checkbox-size); height: var(--checkbox-size); order: 1; } .m_26062bec:where([data-label-position='left']) { order: 2; } .m_26063560 { appearance: none; border: calc(0.0625rem * var(--mantine-scale)) solid transparent; width: var(--checkbox-size); height: var(--checkbox-size); border-radius: var(--checkbox-radius, var(--mantine-radius-default)); padding: 0; display: block; margin: 0; transition: border-color 100ms ease, background-color 100ms ease; cursor: var(--mantine-cursor-type); -webkit-tap-highlight-color: transparent; } :where([data-mantine-color-scheme='light']) .m_26063560 { background-color: var(--mantine-color-white); border-color: var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_26063560 { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); } .m_26063560:where([data-error]) { border-color: var(--mantine-color-error); } .m_26063560[data-indeterminate], .m_26063560:checked { background-color: var(--checkbox-color); border-color: var(--checkbox-color); } .m_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 { opacity: 1; transform: none; } .m_26063560:disabled { cursor: not-allowed; border-color: var(--mantine-color-disabled-border); background-color: var(--mantine-color-disabled); } .m_26063560:disabled + .m_bf295423 { color: var(--mantine-color-disabled-color); } .m_215c4542 + .m_bf295423 { color: var(--checkbox-color); } .m_215c4542[data-indeterminate]:not(:disabled), .m_215c4542:checked:not(:disabled) { background-color: transparent; border-color: var(--checkbox-color); } .m_215c4542[data-indeterminate]:not(:disabled) + .m_bf295423, .m_215c4542:checked:not(:disabled) + .m_bf295423 { color: var(--checkbox-color); opacity: 1; transform: none; } .m_bf295423 { position: absolute; inset: 0; width: 60%; margin: auto; color: var(--checkbox-icon-color); pointer-events: none; transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5); opacity: 0; transition: transform 100ms ease, opacity 100ms ease; } /* Avatar.Group root element */ .m_11def92b { --ag-spacing: var(--mantine-spacing-sm); --ag-offset: calc(var(--ag-spacing) * -1); display: flex; padding-inline-start: var(--ag-spacing); } /* Avatar root element */ .m_f85678b6 { --avatar-size-xs: calc(1rem * var(--mantine-scale)); --avatar-size-sm: calc(1.625rem * var(--mantine-scale)); --avatar-size-md: calc(2.375rem * var(--mantine-scale)); --avatar-size-lg: calc(3.5rem * var(--mantine-scale)); --avatar-size-xl: calc(5.25rem * var(--mantine-scale)); --avatar-size: var(--avatar-size-md); --avatar-radius: calc(62.5rem * var(--mantine-scale)); --avatar-bg: var(--mantine-color-gray-light); --avatar-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; --avatar-color: var(--mantine-color-gray-light-color); --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5); -webkit-tap-highlight-color: transparent; position: relative; display: block; user-select: none; overflow: hidden; border-radius: var(--avatar-radius); text-decoration: none; padding: 0; width: var(--avatar-size); height: var(--avatar-size); min-width: var(--avatar-size); } .m_f85678b6:where([data-within-group]) { margin-inline-start: var(--ag-offset); border: 2px solid var(--mantine-color-body); background: var(--mantine-color-body); } .m_11f8ac07 { object-fit: cover; width: 100%; height: 100%; display: block; } .m_104cd71f { font-weight: 700; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; user-select: none; border-radius: var(--avatar-radius); font-size: var(--avatar-placeholder-fz); background: var(--avatar-bg); border: var(--avatar-bd); color: var(--avatar-color); } .m_104cd71f > [data-avatar-placeholder-icon] { width: 70%; height: 70%; } .m_2ce0de02 { background-size: cover; background-position: center; display: block; width: 100%; border: 0; text-decoration: none; border-radius: var(--bi-radius, 0); } .m_347db0ec { --badge-height-xs: calc(1rem * var(--mantine-scale)); --badge-height-sm: calc(1.125rem * var(--mantine-scale)); --badge-height-md: calc(1.25rem * var(--mantine-scale)); --badge-height-lg: calc(1.625rem * var(--mantine-scale)); --badge-height-xl: calc(2rem * var(--mantine-scale)); --badge-fz-xs: calc(0.5625rem * var(--mantine-scale)); --badge-fz-sm: calc(0.625rem * var(--mantine-scale)); --badge-fz-md: calc(0.6875rem * var(--mantine-scale)); --badge-fz-lg: calc(0.8125rem * var(--mantine-scale)); --badge-fz-xl: calc(1rem * var(--mantine-scale)); --badge-padding-x-xs: calc(0.375rem * var(--mantine-scale)); --badge-padding-x-sm: calc(0.5rem * var(--mantine-scale)); --badge-padding-x-md: calc(0.625rem * var(--mantine-scale)); --badge-padding-x-lg: calc(0.75rem * var(--mantine-scale)); --badge-padding-x-xl: calc(1rem * var(--mantine-scale)); --badge-height: var(--badge-height-md); --badge-fz: var(--badge-fz-md); --badge-padding-x: var(--badge-padding-x-md); --badge-radius: calc(62.5rem * var(--mantine-scale)); --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale))); --badge-color: var(--mantine-color-white); --badge-bg: var(--mantine-primary-color-filled); --badge-border-width: calc(0.0625rem * var(--mantine-scale)); --badge-bd: var(--badge-border-width) solid transparent; -webkit-tap-highlight-color: transparent; font-size: var(--badge-fz); border-radius: var(--badge-radius); height: var(--badge-height); line-height: var(--badge-lh); text-decoration: none; padding: 0 var(--badge-padding-x); display: inline-grid; align-items: center; justify-content: center; width: fit-content; text-transform: uppercase; font-weight: 700; letter-spacing: calc(0.015625rem * var(--mantine-scale)); cursor: default; text-overflow: ellipsis; overflow: hidden; color: var(--badge-color); background: var(--badge-bg); border: var(--badge-bd); } .m_347db0ec:where([data-with-left-section], [data-variant='dot']) { grid-template-columns: auto 1fr; } .m_347db0ec:where([data-with-right-section]) { grid-template-columns: 1fr auto; } .m_347db0ec:where( [data-with-left-section][data-with-right-section], [data-variant='dot'][data-with-right-section] ) { grid-template-columns: auto 1fr auto; } .m_347db0ec:where([data-block]) { display: flex; width: 100%; } .m_347db0ec:where([data-circle]) { padding-inline: calc(0.125rem * var(--mantine-scale)); display: flex; width: var(--badge-height); } .m_fbd81e3d { --badge-dot-size: calc(var(--badge-height) / 3.4); } :where([data-mantine-color-scheme='light']) .m_fbd81e3d { background-color: var(--mantine-color-white); border-color: var(--mantine-color-gray-4); color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_fbd81e3d { background-color: var(--mantine-color-dark-5); border-color: var(--mantine-color-dark-5); color: var(--mantine-color-white); } .m_fbd81e3d::before { content: ''; display: block; width: var(--badge-dot-size); height: var(--badge-dot-size); border-radius: var(--badge-dot-size); background-color: var(--badge-dot-color); margin-inline-end: var(--badge-dot-size); } .m_5add502a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; cursor: inherit; } .m_91fdda9b { --badge-section-margin: calc(var(--mantine-spacing-xs) / 2); display: inline-flex; justify-content: center; align-items: center; max-height: calc(var(--badge-height) - var(--badge-border-width) * 2); } .m_91fdda9b:where([data-position='left']) { margin-inline-end: var(--badge-section-margin); } .m_91fdda9b:where([data-position='right']) { margin-inline-start: var(--badge-section-margin); } .m_ddec01c0 { --blockquote-border: 3px solid var(--bq-bd); position: relative; margin: 0; border-inline-start: var(--blockquote-border); border-start-end-radius: var(--bq-radius); border-end-end-radius: var(--bq-radius); padding: var(--mantine-spacing-xl) calc(2.375rem * var(--mantine-scale)); } :where([data-mantine-color-scheme='light']) .m_ddec01c0 { background-color: var(--bq-bg-light); } :where([data-mantine-color-scheme='dark']) .m_ddec01c0 { background-color: var(--bq-bg-dark); } .m_dde7bd57 { --blockquote-icon-offset: calc(var(--bq-icon-size) / -2); position: absolute; color: var(--bq-bd); background-color: var(--mantine-color-body); display: flex; align-items: center; justify-content: center; top: var(--blockquote-icon-offset); inset-inline-start: var(--blockquote-icon-offset); width: var(--bq-icon-size); height: var(--bq-icon-size); border-radius: var(--bq-icon-size); } .m_dde51a35 { display: block; margin-top: var(--mantine-spacing-md); opacity: 0.6; font-size: 85%; } .m_8b3717df { display: flex; align-items: center; flex-wrap: wrap; } .m_f678d540 { line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .m_3b8f2208 { margin-inline: var(--bc-separator-margin, var(--mantine-spacing-xs)); line-height: 1; display: flex; align-items: center; justify-content: center; } :where([data-mantine-color-scheme='light']) .m_3b8f2208 { color: var(--mantine-color-gray-7); } :where([data-mantine-color-scheme='dark']) .m_3b8f2208 { color: var(--mantine-color-dark-2); } .m_fea6bf1a { --burger-size-xs: calc(0.75rem * var(--mantine-scale)); --burger-size-sm: calc(1.125rem * var(--mantine-scale)); --burger-size-md: calc(1.5rem * var(--mantine-scale)); --burger-size-lg: calc(2.125rem * var(--mantine-scale)); --burger-size-xl: calc(2.625rem * var(--mantine-scale)); --burger-size: var(--burger-size-md); --burger-line-size: calc(var(--burger-size) / 12); width: calc(var(--burger-size) + var(--mantine-spacing-xs)); height: calc(var(--burger-size) + var(--mantine-spacing-xs)); padding: calc(var(--mantine-spacing-xs) / 2); cursor: pointer; } :where([data-mantine-color-scheme='light']) .m_fea6bf1a { --burger-color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_fea6bf1a { --burger-color: var(--mantine-color-white); } .m_d4fb9cad { position: relative; user-select: none; } .m_d4fb9cad, .m_d4fb9cad::before, .m_d4fb9cad::after { display: block; width: var(--burger-size); height: var(--burger-line-size); background-color: var(--burger-color); outline: calc(0.0625rem * var(--mantine-scale)) solid transparent; transition-property: background-color, transform; transition-duration: var(--burger-transition-duration, 300ms); transition-timing-function: var(--burger-transition-timing-function, ease); } .m_d4fb9cad::before, .m_d4fb9cad::after { position: absolute; content: ''; inset-inline-start: 0; } .m_d4fb9cad::before { top: calc(var(--burger-size) / -3); } .m_d4fb9cad::after { top: calc(var(--burger-size) / 3); } .m_d4fb9cad[data-opened] { background-color: transparent; } .m_d4fb9cad[data-opened]::before { transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg); } .m_d4fb9cad[data-opened]::after { transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg); } .m_77c9d27d { --button-height-xs: calc(1.875rem * var(--mantine-scale)); --button-height-sm: calc(2.25rem * var(--mantine-scale)); --button-height-md: calc(2.625rem * var(--mantine-scale)); --button-height-lg: calc(3.125rem * var(--mantine-scale)); --button-height-xl: calc(3.75rem * var(--mantine-scale)); --button-height-compact-xs: calc(1.375rem * var(--mantine-scale)); --button-height-compact-sm: calc(1.625rem * var(--mantine-scale)); --button-height-compact-md: calc(1.875rem * var(--mantine-scale)); --button-height-compact-lg: calc(2.125rem * var(--mantine-scale)); --button-height-compact-xl: calc(2.5rem * var(--mantine-scale)); --button-padding-x-xs: calc(0.875rem * var(--mantine-scale)); --button-padding-x-sm: calc(1.125rem * var(--mantine-scale)); --button-padding-x-md: calc(1.375rem * var(--mantine-scale)); --button-padding-x-lg: calc(1.625rem * var(--mantine-scale)); --button-padding-x-xl: calc(2rem * var(--mantine-scale)); --button-padding-x-compact-xs: calc(0.4375rem * var(--mantine-scale)); --button-padding-x-compact-sm: calc(0.5rem * var(--mantine-scale)); --button-padding-x-compact-md: calc(0.625rem * var(--mantine-scale)); --button-padding-x-compact-lg: calc(0.75rem * var(--mantine-scale)); --button-padding-x-compact-xl: calc(0.875rem * var(--mantine-scale)); --button-height: var(--button-height-sm); --button-padding-x: var(--button-padding-x-sm); --button-color: var(--mantine-color-white); user-select: none; font-weight: 600; position: relative; line-height: 1; text-align: center; overflow: hidden; width: auto; cursor: pointer; display: inline-block; border-radius: var(--button-radius, var(--mantine-radius-default)); font-size: var(--button-fz, var(--mantine-font-size-sm)); background: var(--button-bg, var(--mantine-primary-color-filled)); border: var(--button-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent); color: var(--button-color, var(--mantine-color-white)); height: var(--button-height, var(--button-height-sm)); padding-inline: var(--button-padding-x, var(--button-padding-x-sm)); vertical-align: middle; } .m_77c9d27d:where([data-block]) { display: block; width: 100%; } .m_77c9d27d:where([data-with-left-section]) { padding-inline-start: calc(var(--button-padding-x) / 1.5); } .m_77c9d27d:where([data-with-right-section]) { padding-inline-end: calc(var(--button-padding-x) / 1.5); } .m_77c9d27d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) { cursor: not-allowed; border: calc(0.0625rem * var(--mantine-scale)) solid transparent; transform: none; color: var(--mantine-color-disabled-color); background: var(--mantine-color-disabled); } .m_77c9d27d::before { content: ''; pointer-events: none; position: absolute; inset: calc(-0.0625rem * var(--mantine-scale)); border-radius: var(--button-radius, var(--mantine-radius-default)); transform: translateY(-100%); opacity: 0; filter: blur(12px); transition: transform 150ms ease, opacity 100ms ease; } :where([data-mantine-color-scheme='light']) .m_77c9d27d::before { background-color: rgba(255, 255, 255, 0.15); } :where([data-mantine-color-scheme='dark']) .m_77c9d27d::before { background-color: rgba(0, 0, 0, 0.15); } .m_77c9d27d:where([data-loading]) { cursor: not-allowed; transform: none; } .m_77c9d27d:where([data-loading])::before { transform: translateY(0); opacity: 1; } .m_77c9d27d:where([data-loading]) .m_80f1301b { opacity: 0; transform: translateY(100%); } @media (hover: hover) { .m_77c9d27d:hover:where(:not([data-loading], :disabled, [data-disabled])) { background-color: var(--button-hover, var(--mantine-primary-color-filled-hover)); color: var(--button-hover-color, var(--button-color)); } } @media (hover: none) { .m_77c9d27d:active:where(:not([data-loading], :disabled, [data-disabled])) { background-color: var(--button-hover, var(--mantine-primary-color-filled-hover)); color: var(--button-hover-color, var(--button-color)); } } .m_80f1301b { display: flex; align-items: center; justify-content: var(--button-justify, center); height: 100%; overflow: visible; transition: transform 150ms ease, opacity 100ms ease; } .m_811560b9 { white-space: nowrap; height: 100%; overflow: hidden; display: flex; align-items: center; opacity: 1; } .m_811560b9:where([data-loading]) { opacity: 0.2; } .m_a74036a { display: flex; align-items: center; } .m_a74036a:where([data-position='left']) { margin-inline-end: var(--mantine-spacing-xs); } .m_a74036a:where([data-position='right']) { margin-inline-start: var(--mantine-spacing-xs); } .m_a25b86ee { position: absolute; left: 50%; top: 50%; } .m_80d6d844 { --button-border-width: calc(0.0625rem * var(--mantine-scale)); display: flex; } .m_80d6d844 :where(.m_77c9d27d):focus { position: relative; z-index: 1; } .m_80d6d844[data-orientation='horizontal'] { flex-direction: row; } .m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):first-child { border-end-end-radius: 0; border-start-end-radius: 0; border-inline-end-width: calc(var(--button-border-width) / 2); } .m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):last-child { border-end-start-radius: 0; border-start-start-radius: 0; border-inline-start-width: calc(var(--button-border-width) / 2); } .m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) { border-radius: 0; border-inline-width: calc(var(--button-border-width) / 2); } .m_80d6d844[data-orientation='vertical'] { flex-direction: column; } .m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):first-child { border-end-start-radius: 0; border-end-end-radius: 0; border-bottom-width: calc(var(--button-border-width) / 2); } .m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):last-child { border-start-start-radius: 0; border-start-end-radius: 0; border-top-width: calc(var(--button-border-width) / 2); } .m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) { border-radius: 0; border-bottom-width: calc(var(--button-border-width) / 2); border-top-width: calc(var(--button-border-width) / 2); } .m_70be2a01 { --section-height-xs: calc(1.875rem * var(--mantine-scale)); --section-height-sm: calc(2.25rem * var(--mantine-scale)); --section-height-md: calc(2.625rem * var(--mantine-scale)); --section-height-lg: calc(3.125rem * var(--mantine-scale)); --section-height-xl: calc(3.75rem * var(--mantine-scale)); --section-height-compact-xs: calc(1.375rem * var(--mantine-scale)); --section-height-compact-sm: calc(1.625rem * var(--mantine-scale)); --section-height-compact-md: calc(1.875rem * var(--mantine-scale)); --section-height-compact-lg: calc(2.125rem * var(--mantine-scale)); --section-height-compact-xl: calc(2.5rem * var(--mantine-scale)); --section-padding-x-xs: calc(0.875rem * var(--mantine-scale)); --section-padding-x-sm: calc(1.125rem * var(--mantine-scale)); --section-padding-x-md: calc(1.375rem * var(--mantine-scale)); --section-padding-x-lg: calc(1.625rem * var(--mantine-scale)); --section-padding-x-xl: calc(2rem * var(--mantine-scale)); --section-padding-x-compact-xs: calc(0.4375rem * var(--mantine-scale)); --section-padding-x-compact-sm: calc(0.5rem * var(--mantine-scale)); --section-padding-x-compact-md: calc(0.625rem * var(--mantine-scale)); --section-padding-x-compact-lg: calc(0.75rem * var(--mantine-scale)); --section-padding-x-compact-xl: calc(0.875rem * var(--mantine-scale)); --section-height: var(--section-height-sm); --section-padding-x: var(--section-padding-x-sm); --section-color: var(--mantine-color-white); font-weight: 600; width: auto; border-radius: var(--section-radius, var(--mantine-radius-default)); font-size: var(--section-fz, var(--mantine-font-size-sm)); background: var(--section-bg, var(--mantine-primary-color-filled)); border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent); color: var(--section-color, var(--mantine-color-white)); height: var(--section-height, var(--section-height-sm)); padding-inline: var(--section-padding-x, var(--section-padding-x-sm)); vertical-align: middle; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .m_e615b15f { --card-padding: var(--mantine-spacing-md); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--card-padding); color: var(--mantine-color-text); } :where([data-mantine-color-scheme='light']) .m_e615b15f { background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_e615b15f { background-color: var(--mantine-color-dark-6); } .m_599a2148 { display: block; margin-inline: calc(var(--card-padding) * -1); } .m_599a2148:where(:first-child) { margin-top: calc(var(--card-padding) * -1); border-top: none !important; } .m_599a2148:where(:last-child) { margin-bottom: calc(var(--card-padding) * -1); border-bottom: none !important; } .m_599a2148:where([data-inherit-padding]) { padding-inline: var(--card-padding); } .m_599a2148:where([data-with-border]) { border-top: calc(0.0625rem * var(--mantine-scale)) solid; border-bottom: calc(0.0625rem * var(--mantine-scale)) solid; } :where([data-mantine-color-scheme='light']) .m_599a2148 { border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_599a2148 { border-color: var(--mantine-color-dark-4); } .m_599a2148 + .m_599a2148 { border-top: none !important; } .m_4451eb3a { display: flex; align-items: center; justify-content: center; } .m_4451eb3a:where([data-inline]) { display: inline-flex; } .m_f59ffda3 { --chip-size-xs: calc(1.4375rem * var(--mantine-scale)); --chip-size-sm: calc(1.75rem * var(--mantine-scale)); --chip-size-md: calc(2rem * var(--mantine-scale)); --chip-size-lg: calc(2.25rem * var(--mantine-scale)); --chip-size-xl: calc(2.5rem * var(--mantine-scale)); --chip-icon-size-xs: calc(0.625rem * var(--mantine-scale)); --chip-icon-size-sm: calc(0.75rem * var(--mantine-scale)); --chip-icon-size-md: calc(0.875rem * var(--mantine-scale)); --chip-icon-size-lg: calc(1rem * var(--mantine-scale)); --chip-icon-size-xl: calc(1.125rem * var(--mantine-scale)); --chip-padding-xs: calc(1rem * var(--mantine-scale)); --chip-padding-sm: calc(1.25rem * var(--mantine-scale)); --chip-padding-md: calc(1.5rem * var(--mantine-scale)); --chip-padding-lg: calc(1.75rem * var(--mantine-scale)); --chip-padding-xl: calc(2rem * var(--mantine-scale)); --chip-checked-padding-xs: calc(0.46875rem * var(--mantine-scale)); --chip-checked-padding-sm: calc(0.625rem * var(--mantine-scale)); --chip-checked-padding-md: calc(0.73125rem * var(--mantine-scale)); --chip-checked-padding-lg: calc(0.84375rem * var(--mantine-scale)); --chip-checked-padding-xl: calc(0.98125rem * var(--mantine-scale)); --chip-spacing-xs: calc(0.625rem * var(--mantine-scale)); --chip-spacing-sm: calc(0.75rem * var(--mantine-scale)); --chip-spacing-md: calc(1rem * var(--mantine-scale)); --chip-spacing-lg: calc(1.25rem * var(--mantine-scale)); --chip-spacing-xl: calc(1.375rem * var(--mantine-scale)); --chip-size: var(--chip-size-sm); --chip-icon-size: var(--chip-icon-size-sm); --chip-padding: var(--chip-padding-sm); --chip-spacing: var(--chip-spacing-sm); --chip-checked-padding: var(--chip-checked-padding-sm); --chip-bg: var(--mantine-primary-color-filled); --chip-hover: var(--mantine-primary-color-filled-hover); --chip-color: var(--mantine-color-white); --chip-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent; } .m_be049a53 { display: inline-flex; align-items: center; user-select: none; border-radius: var(--chip-radius, 1000rem); height: var(--chip-size); font-size: var(--chip-fz, var(--mantine-font-size-sm)); line-height: calc(var(--chip-size) - calc(0.125rem * var(--mantine-scale))); padding-inline: var(--chip-padding); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; border: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-text); } .m_be049a53:where([data-checked]) { padding: var(--chip-checked-padding); } .m_be049a53:where([data-disabled]) { cursor: not-allowed; background-color: var(--mantine-color-disabled); color: var(--mantine-color-disabled-color); } :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) { background-color: var(--mantine-color-white); border: 1px solid var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]) { background-color: var(--mantine-color-dark-6); border: 1px solid var(--mantine-color-dark-4); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):hover { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):active { background-color: var(--mantine-color-dark-5); } } .m_3904c1af:not([data-disabled]):where([data-checked]) { --chip-icon-color: var(--chip-color); border: var(--chip-bd); } @media (hover: hover) { .m_3904c1af:not([data-disabled]):where([data-checked]):hover { background-color: var(--chip-hover); } } @media (hover: none) { .m_3904c1af:not([data-disabled]):where([data-checked]):active { background-color: var(--chip-hover); } } .m_fa109255:not([data-disabled]), .m_f7e165c3:not([data-disabled]) { border: calc(0.0625rem * var(--mantine-scale)) solid transparent; color: var(--mantine-color-text); } :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]) { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]) { background-color: var(--mantine-color-dark-5); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):hover { background-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):hover { background-color: var(--mantine-color-dark-4); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):active { background-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):active { background-color: var(--mantine-color-dark-4); } } .m_fa109255:not([data-disabled]):where([data-checked]), .m_f7e165c3:not([data-disabled]):where([data-checked]) { --chip-icon-color: var(--chip-color); color: var(--chip-color); background-color: var(--chip-bg); } @media (hover: hover) { .m_fa109255:not([data-disabled]):where([data-checked]):hover, .m_f7e165c3:not([data-disabled]):where([data-checked]):hover { background-color: var(--chip-hover); } } @media (hover: none) { .m_fa109255:not([data-disabled]):where([data-checked]):active, .m_f7e165c3:not([data-disabled]):where([data-checked]):active { background-color: var(--chip-hover); } } .m_9ac86df9 { width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5)); max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5)); height: var(--chip-icon-size); display: flex; align-items: center; overflow: hidden; } .m_d6d72580 { width: var(--chip-icon-size); height: var(--chip-icon-size); display: block; color: var(--chip-icon-color, inherit); } .m_bde07329 { width: 0; height: 0; padding: 0; opacity: 0; margin: 0; } .m_bde07329:focus-visible + .m_be049a53 { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .m_b183c0a2 { font-family: var(--mantine-font-family-monospace); line-height: var(--mantine-line-height); padding: 2px calc(var(--mantine-spacing-xs) / 2); border-radius: var(--mantine-radius-sm); font-size: var(--mantine-font-size-xs); margin: 0; overflow: auto; } :where([data-mantine-color-scheme='light']) .m_b183c0a2 { background-color: var(--code-bg, var(--mantine-color-gray-0)); } :where([data-mantine-color-scheme='dark']) .m_b183c0a2 { background-color: var(--code-bg, var(--mantine-color-dark-6)); } .m_b183c0a2[data-block] { padding: var(--mantine-spacing-xs); } .m_de3d2490 { --cs-size: calc(1.75rem * var(--mantine-scale)); --cs-radius: calc(62.5rem * var(--mantine-scale)); -webkit-tap-highlight-color: transparent; border: none; appearance: none; display: block; line-height: 1; position: relative; width: var(--cs-size); height: var(--cs-size); min-width: var(--cs-size); min-height: var(--cs-size); border-radius: var(--cs-radius); color: inherit; text-decoration: none; } [data-mantine-color-scheme='light'] .m_de3d2490 { --alpha-overlay-color: var(--mantine-color-gray-3); --alpha-overlay-bg: var(--mantine-color-white); } [data-mantine-color-scheme='dark'] .m_de3d2490 { --alpha-overlay-color: var(--mantine-color-dark-4); --alpha-overlay-bg: var(--mantine-color-dark-7); } .m_862f3d1b { position: absolute; inset: 0; border-radius: var(--cs-radius); } .m_98ae7f22 { position: absolute; inset: 0; border-radius: var(--cs-radius); z-index: 1; box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset, rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--mantine-scale)) inset; } .m_95709ac0 { position: absolute; inset: 0; border-radius: var(--cs-radius); background-size: calc(0.5rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale)); background-position: 0 0, 0 calc(0.25rem * var(--mantine-scale)), calc(0.25rem * var(--mantine-scale)) calc(-0.25rem * var(--mantine-scale)), calc(-0.25rem * var(--mantine-scale)) 0; background-image: linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%), linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%), linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%); } .m_93e74e3 { position: absolute; inset: 0; border-radius: var(--cs-radius); z-index: 2; display: flex; align-items: center; justify-content: center; } .m_fee9c77 { --cp-width-xs: calc(11.25rem * var(--mantine-scale)); --cp-width-sm: calc(12.5rem * var(--mantine-scale)); --cp-width-md: calc(15rem * var(--mantine-scale)); --cp-width-lg: calc(17.5rem * var(--mantine-scale)); --cp-width-xl: calc(20rem * var(--mantine-scale)); --cp-preview-size-xs: calc(1.625rem * var(--mantine-scale)); --cp-preview-size-sm: calc(2.125rem * var(--mantine-scale)); --cp-preview-size-md: calc(2.625rem * var(--mantine-scale)); --cp-preview-size-lg: calc(3.125rem * var(--mantine-scale)); --cp-preview-size-xl: calc(3.375rem * var(--mantine-scale)); --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale)); --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale)); --cp-thumb-size-md: calc(1rem * var(--mantine-scale)); --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale)); --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale)); --cp-saturation-height-xs: calc(6.25rem * var(--mantine-scale)); --cp-saturation-height-sm: calc(6.875rem * var(--mantine-scale)); --cp-saturation-height-md: calc(7.5rem * var(--mantine-scale)); --cp-saturation-height-lg: calc(8.75rem * var(--mantine-scale)); --cp-saturation-height-xl: calc(10rem * var(--mantine-scale)); --cp-preview-size: var(--cp-preview-size-sm); --cp-thumb-size: var(--cp-thumb-size-sm); --cp-saturation-height: var(--cp-saturation-height-sm); --cp-width: var(--cp-width-sm); --cp-body-spacing: var(--mantine-spacing-sm); width: var(--cp-width); padding: calc(0.0625rem * var(--mantine-scale)); } .m_fee9c77:where([data-full-width]) { width: 100%; } .m_9dddfbac { width: var(--cp-preview-size); height: var(--cp-preview-size); } .m_bffecc3e { display: flex; padding-top: calc(var(--cp-body-spacing) / 2); } .m_3283bb96 { flex: 1; } .m_3283bb96:not(:only-child) { margin-inline-end: var(--mantine-spacing-xs); } .m_40d572ba { overflow: hidden; position: absolute; box-shadow: 0 0 1px rgba(0, 0, 0, 0.6); border: 2px solid var(--mantine-color-white); width: var(--cp-thumb-size); height: var(--cp-thumb-size); border-radius: var(--cp-thumb-size); left: calc(var(--thumb-x-offset) - var(--cp-thumb-size) / 2); top: calc(var(--thumb-y-offset) - var(--cp-thumb-size) / 2); } .m_d8ee6fd8 { height: unset !important; width: unset !important; min-width: 0 !important; min-height: 0 !important; margin: calc(0.125rem * var(--mantine-scale)); cursor: pointer; padding-bottom: calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale))); flex: 0 0 calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale))); } .m_5711e686 { margin-top: calc(0.3125rem * var(--mantine-scale)); margin-inline: calc(-0.125rem * var(--mantine-scale)); display: flex; flex-wrap: wrap; } .m_202a296e { --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale)); --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale)); --cp-thumb-size-md: calc(1rem * var(--mantine-scale)); --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale)); --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale)); -webkit-tap-highlight-color: transparent; position: relative; height: var(--cp-saturation-height); border-radius: var(--mantine-radius-sm); margin: calc(var(--cp-thumb-size) / 2); } .m_202a296e:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba { outline: 2px solid var(--mantine-color-blue-filled); } .m_202a296e:where([data-focus-ring='always']):focus .m_40d572ba { outline: 2px solid var(--mantine-color-blue-filled); } .m_11b3db02 { position: absolute; border-radius: var(--mantine-radius-sm); inset: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale))); } .m_d856d47d { --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale)); --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale)); --cp-thumb-size-md: calc(1rem * var(--mantine-scale)); --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale)); --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale)); --cp-thumb-size: var(--cp-thumb-size, calc(0.75rem * var(--mantine-scale))); position: relative; height: calc(var(--cp-thumb-size) + calc(0.125rem * var(--mantine-scale))); margin-inline: calc(var(--cp-thumb-size) / 2); outline: none; } .m_d856d47d + .m_d856d47d { margin-top: calc(0.375rem * var(--mantine-scale)); } .m_d856d47d:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba { outline: 2px solid var(--mantine-color-blue-filled); } .m_d856d47d:where([data-focus-ring='always']):focus .m_40d572ba { outline: 2px solid var(--mantine-color-blue-filled); } :where([data-mantine-color-scheme='light']) .m_d856d47d { --slider-checkers: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_d856d47d { --slider-checkers: var(--mantine-color-dark-4); } .m_8f327113 { position: absolute; top: 0; bottom: 0; inset-inline: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale))); border-radius: 10000rem; } .m_b077c2bc { --ci-eye-dropper-icon-size-xs: calc(0.875rem * var(--mantine-scale)); --ci-eye-dropper-icon-size-sm: calc(1rem * var(--mantine-scale)); --ci-eye-dropper-icon-size-md: calc(1.125rem * var(--mantine-scale)); --ci-eye-dropper-icon-size-lg: calc(1.25rem * var(--mantine-scale)); --ci-eye-dropper-icon-size-xl: calc(1.375rem * var(--mantine-scale)); --ci-eye-dropper-icon-size: var(--ci-eye-dropper-icon-size-sm); } .m_c5ccdcab { --ci-preview-size-xs: calc(1rem * var(--mantine-scale)); --ci-preview-size-sm: calc(1.125rem * var(--mantine-scale)); --ci-preview-size-md: calc(1.375rem * var(--mantine-scale)); --ci-preview-size-lg: calc(1.75rem * var(--mantine-scale)); --ci-preview-size-xl: calc(2.25rem * var(--mantine-scale)); --ci-preview-size: var(--ci-preview-size-sm); } .m_5ece2cd7 { padding: calc(0.5rem * var(--mantine-scale)); } .m_7485cace { --container-size-xs: calc(33.75rem * var(--mantine-scale)); --container-size-sm: calc(45rem * var(--mantine-scale)); --container-size-md: calc(60rem * var(--mantine-scale)); --container-size-lg: calc(71.25rem * var(--mantine-scale)); --container-size-xl: calc(82.5rem * var(--mantine-scale)); --container-size: var(--container-size-md); } .m_7485cace:where([data-strategy='block']) { max-width: var(--container-size); padding-inline: var(--mantine-spacing-md); margin-inline: auto; } .m_7485cace:where([data-strategy='block']):where([data-fluid]) { max-width: 100%; } .m_7485cace:where([data-strategy='grid']) { display: grid; grid-template-columns: 1fr min(100%, var(--container-size)) 1fr; margin-inline: auto; } .m_7485cace:where([data-strategy='grid']) > * { grid-column: 2; } .m_7485cace:where([data-strategy='grid']) > [data-breakout] { grid-column: 1 / -1; } .m_7485cace:where([data-strategy='grid']) > [data-breakout] > [data-container] { max-width: var(--container-size); margin-inline: auto; } .m_e2125a27 { --dialog-size-xs: calc(10rem * var(--mantine-scale)); --dialog-size-sm: calc(12.5rem * var(--mantine-scale)); --dialog-size-md: calc(21.25rem * var(--mantine-scale)); --dialog-size-lg: calc(25rem * var(--mantine-scale)); --dialog-size-xl: calc(31.25rem * var(--mantine-scale)); --dialog-size: var(--dialog-size-md); position: relative; width: var(--dialog-size); max-width: calc(100vw - var(--mantine-spacing-xl) * 2); min-height: calc(3.125rem * var(--mantine-scale)); } .m_5abab665 { position: absolute; top: calc(var(--mantine-spacing-md) / 2); inset-inline-end: calc(var(--mantine-spacing-md) / 2); } .m_3eebeb36 { --divider-size-xs: calc(0.0625rem * var(--mantine-scale)); --divider-size-sm: calc(0.125rem * var(--mantine-scale)); --divider-size-md: calc(0.1875rem * var(--mantine-scale)); --divider-size-lg: calc(0.25rem * var(--mantine-scale)); --divider-size-xl: calc(0.3125rem * var(--mantine-scale)); --divider-size: var(--divider-size-xs); } :where([data-mantine-color-scheme='light']) .m_3eebeb36 { --divider-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_3eebeb36 { --divider-color: var(--mantine-color-dark-4); } .m_3eebeb36:where([data-orientation='horizontal']) { border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color); } .m_3eebeb36:where([data-orientation='vertical']) { border-inline-start: var(--divider-size) var(--divider-border-style, solid) var(--divider-color); height: auto; align-self: stretch; } .m_3eebeb36:where([data-with-label]) { border: 0; } .m_9e365f20 { display: flex; align-items: center; font-size: var(--mantine-font-size-xs); color: var(--mantine-color-dimmed); white-space: nowrap; } .m_9e365f20:where([data-position='left'])::before { display: none; } .m_9e365f20:where([data-position='right'])::after { display: none; } .m_9e365f20::before { content: ''; flex: 1; height: calc(0.0625rem * var(--mantine-scale)); border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color); margin-inline-end: var(--mantine-spacing-xs); } .m_9e365f20::after { content: ''; flex: 1; height: calc(0.0625rem * var(--mantine-scale)); border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color); margin-inline-start: var(--mantine-spacing-xs); } .m_f11b401e { --drawer-size-xs: calc(20rem * var(--mantine-scale)); --drawer-size-sm: calc(23.75rem * var(--mantine-scale)); --drawer-size-md: calc(27.5rem * var(--mantine-scale)); --drawer-size-lg: calc(38.75rem * var(--mantine-scale)); --drawer-size-xl: calc(48.75rem * var(--mantine-scale)); --drawer-size: var(--drawer-size-md); --drawer-offset: 0rem; } .m_5a7c2c9 { z-index: 1000; } .m_b8a05bbd { flex: var(--drawer-flex, 0 0 var(--drawer-size)); height: var(--drawer-height, calc(100% - var(--drawer-offset) * 2)); margin: var(--drawer-offset); max-width: calc(100% - var(--drawer-offset) * 2); max-height: calc(100% - var(--drawer-offset) * 2); overflow-y: auto; } .m_b8a05bbd[data-hidden] { opacity: 0 !important; pointer-events: none; } .m_31cd769a { display: flex; justify-content: var(--drawer-justify, flex-start); align-items: var(--drawer-align, flex-start); } .m_e9408a47 { padding: var(--mantine-spacing-lg); padding-top: var(--mantine-spacing-xs); border-radius: var(--fieldset-radius, var(--mantine-radius-default)); min-inline-size: auto; } .m_84c9523a { border: calc(0.0625rem * var(--mantine-scale)) solid; } :where([data-mantine-color-scheme='light']) .m_84c9523a { border-color: var(--mantine-color-gray-3); background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_84c9523a { border-color: var(--mantine-color-dark-4); background-color: var(--mantine-color-dark-7); } .m_ef274e49 { border: calc(0.0625rem * var(--mantine-scale)) solid; } :where([data-mantine-color-scheme='light']) .m_ef274e49 { border-color: var(--mantine-color-gray-3); background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_ef274e49 { border-color: var(--mantine-color-dark-4); background-color: var(--mantine-color-dark-6); } .m_eda993d3 { padding: 0; border: 0; border-radius: 0; } .m_90794832 { font-size: var(--mantine-font-size-sm); } .m_74ca27fe { padding: 0; margin-bottom: var(--mantine-spacing-sm); } .m_8478a6da { container: mantine-grid / inline-size; } .m_410352e9 { --grid-overflow: visible; --grid-margin: calc(var(--grid-gutter) / -2); --grid-col-padding: calc(var(--grid-gutter) / 2); overflow: var(--grid-overflow); } .m_dee7bd2f { width: calc(100% + var(--grid-gutter)); display: flex; flex-wrap: wrap; justify-content: var(--grid-justify); align-items: var(--grid-align); margin: var(--grid-margin); } .m_96bdd299 { --col-flex-grow: 0; --col-offset: 0rem; flex-shrink: 0; order: var(--col-order); flex-basis: var(--col-flex-basis); width: var(--col-width); max-width: var(--col-max-width); flex-grow: var(--col-flex-grow); margin-inline-start: var(--col-offset); padding: var(--grid-col-padding); } .m_bcb3f3c2 { color: var(--mantine-color-black); } :where([data-mantine-color-scheme='light']) .m_bcb3f3c2 { background-color: var(--mark-bg-light); } :where([data-mantine-color-scheme='dark']) .m_bcb3f3c2 { background-color: var(--mark-bg-dark); } .m_9e117634 { display: block; object-fit: var(--image-object-fit, cover); width: 100%; border-radius: var(--image-radius, 0); } @keyframes m_885901b1 { 0% { opacity: 0.6; transform: scale(0); } 100% { opacity: 0; transform: scale(2.8); } } .m_e5262200 { --indicator-size: calc(0.625rem * var(--mantine-scale)); --indicator-color: var(--mantine-primary-color-filled); position: relative; display: block; } .m_e5262200:where([data-inline]) { display: inline-block; } .m_760d1fb1 { position: absolute; top: var(--indicator-top); left: var(--indicator-left); right: var(--indicator-right); bottom: var(--indicator-bottom); transform: translate(var(--indicator-translate-x), var(--indicator-translate-y)); min-width: var(--indicator-size); height: var(--indicator-size); border-radius: var(--indicator-radius, 1000rem); z-index: var(--indicator-z-index, 200); display: flex; align-items: center; justify-content: center; font-size: var(--mantine-font-size-xs); background-color: var(--indicator-color); color: var(--indicator-text-color, var(--mantine-color-white)); white-space: nowrap; } .m_760d1fb1::before { content: ''; position: absolute; inset: 0; background-color: var(--indicator-color); border-radius: var(--indicator-radius, 1000rem); z-index: -1; } .m_760d1fb1:where([data-with-label]) { padding-inline: calc(var(--mantine-spacing-xs) / 2); } .m_760d1fb1:where([data-with-border]) { border: 2px solid var(--mantine-color-body); } .m_760d1fb1[data-processing]::before { animation: m_885901b1 1000ms linear infinite; } .m_dc6f14e2 { --kbd-fz-xs: calc(0.625rem * var(--mantine-scale)); --kbd-fz-sm: calc(0.75rem * var(--mantine-scale)); --kbd-fz-md: calc(0.875rem * var(--mantine-scale)); --kbd-fz-lg: calc(1rem * var(--mantine-scale)); --kbd-fz-xl: calc(1.25rem * var(--mantine-scale)); --kbd-fz: var(--kbd-fz-sm); font-family: var(--mantine-font-family-monospace); line-height: var(--mantine-line-height); font-weight: 700; font-size: var(--kbd-fz); border-radius: var(--mantine-radius-sm); border: calc(0.0625rem * var(--mantine-scale)) solid; border-bottom-width: calc(0.1875rem * var(--mantine-scale)); unicode-bidi: embed; text-align: center; padding: 0.12em 0.45em; } :where([data-mantine-color-scheme='light']) .m_dc6f14e2 { border-color: var(--mantine-color-gray-3); color: var(--mantine-color-gray-7); background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_dc6f14e2 { border-color: var(--mantine-color-dark-4); color: var(--mantine-color-dark-0); background-color: var(--mantine-color-dark-6); } .m_abbac491 { --list-fz: var(--mantine-font-size-md); --list-lh: var(--mantine-line-height-md); list-style-position: inside; font-size: var(--list-fz); line-height: var(--list-lh); margin: 0; padding: 0; } .m_abbac491:where([data-with-padding]) { padding-inline-start: var(--mantine-spacing-md); } .m_abb6bec2 { white-space: nowrap; line-height: var(--list-lh); } .m_abb6bec2:where([data-with-icon]) { list-style: none; } .m_abb6bec2:where([data-with-icon]) .m_75cd9f71 { --li-direction: row; --li-align: center; } .m_abb6bec2:where(:not(:first-of-type)) { margin-top: var(--list-spacing, 0); } .m_abb6bec2:where([data-centered]) { line-height: 1; } .m_75cd9f71 { display: inline-flex; flex-direction: var(--li-direction, column); align-items: var(--li-align, flex-start); white-space: normal; } .m_60f83e5b { display: inline-block; vertical-align: middle; margin-inline-end: var(--mantine-spacing-sm); } .m_6e45937b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: var(--lo-z-index); } .m_e8eb006c { position: relative; z-index: calc(var(--lo-z-index) + 1); } .m_df587f17 { z-index: var(--lo-z-index); } .m_dc9b7c9f { padding: calc(0.25rem * var(--mantine-scale)); } .m_9bfac126 { color: var(--mantine-color-dimmed); font-weight: 500; font-size: var(--mantine-font-size-xs); padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm); cursor: default; } .m_efdf90cb { margin-top: calc(0.25rem * var(--mantine-scale)); margin-bottom: calc(0.25rem * var(--mantine-scale)); border-top: calc(0.0625rem * var(--mantine-scale)) solid; } :where([data-mantine-color-scheme='light']) .m_efdf90cb { border-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_efdf90cb { border-color: var(--mantine-color-dark-4); } .m_99ac2aa1 { font-size: var(--mantine-font-size-sm); width: 100%; padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm); border-radius: var(--popover-radius, var(--mantine-radius-default)); color: var(--menu-item-color, var(--mantine-color-text)); display: flex; align-items: center; user-select: none; } .m_99ac2aa1:where([data-disabled], :disabled) { color: var(--mantine-color-disabled-color); opacity: 0.6; cursor: not-allowed; } :where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) { background-color: var(--menu-item-hover, var(--mantine-color-gray-1)); } :where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) { background-color: var(--menu-item-hover, var(--mantine-color-dark-4)); } .m_99ac2aa1:where([data-sub-menu-item]) { padding-inline-end: calc(0.3125rem * var(--mantine-scale)); } .m_5476e0d3 { flex: 1; } .m_8b75e504 { display: flex; justify-content: center; align-items: center; } .m_8b75e504:where([data-position='left']) { margin-inline-end: var(--mantine-spacing-xs); } .m_8b75e504:where([data-position='right']) { margin-inline-start: var(--mantine-spacing-xs); } .m_b85b0bed { transform: rotate(-90deg); } :where([dir="rtl"]) .m_b85b0bed { transform: rotate(90deg); } .m_9df02822 { --modal-size-xs: calc(20rem * var(--mantine-scale)); --modal-size-sm: calc(23.75rem * var(--mantine-scale)); --modal-size-md: calc(27.5rem * var(--mantine-scale)); --modal-size-lg: calc(38.75rem * var(--mantine-scale)); --modal-size-xl: calc(48.75rem * var(--mantine-scale)); --modal-size: var(--modal-size-md); --modal-y-offset: 5dvh; --modal-x-offset: 5vw; } .m_9df02822[data-full-screen] { --modal-border-radius: 0 !important; } .m_9df02822[data-full-screen] .m_54c44539 { --modal-content-flex: 0 0 100%; --modal-content-max-height: auto; --modal-content-height: 100dvh; } .m_9df02822[data-full-screen] .m_1f958f16 { --modal-inner-y-offset: 0; --modal-inner-x-offset: 0; } .m_9df02822[data-centered] .m_1f958f16 { --modal-inner-align: center; } .m_d0e2b9cd { border-start-start-radius: var(--modal-radius, var(--mantine-radius-default)); border-start-end-radius: var(--modal-radius, var(--mantine-radius-default)); } .m_54c44539 { flex: var(--modal-content-flex, 0 0 var(--modal-size)); max-width: 100%; max-height: var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2)); height: var(--modal-content-height, auto); overflow-y: auto; } .m_54c44539[data-full-screen] { border-radius: 0; } .m_54c44539[data-hidden] { opacity: 0 !important; pointer-events: none; } .m_1f958f16 { display: flex; justify-content: center; align-items: var(--modal-inner-align, flex-start); padding-top: var(--modal-inner-y-offset, var(--modal-y-offset)); padding-bottom: var(--modal-inner-y-offset, var(--modal-y-offset)); padding-inline: var(--modal-inner-x-offset, var(--modal-x-offset)); } .m_7cda1cd6 { --pill-fz-xs: calc(0.625rem * var(--mantine-scale)); --pill-fz-sm: calc(0.75rem * var(--mantine-scale)); --pill-fz-md: calc(0.875rem * var(--mantine-scale)); --pill-fz-lg: calc(1rem * var(--mantine-scale)); --pill-fz-xl: calc(1.125rem * var(--mantine-scale)); --pill-height-xs: calc(1.125rem * var(--mantine-scale)); --pill-height-sm: calc(1.375rem * var(--mantine-scale)); --pill-height-md: calc(1.5625rem * var(--mantine-scale)); --pill-height-lg: calc(1.75rem * var(--mantine-scale)); --pill-height-xl: calc(2rem * var(--mantine-scale)); --pill-fz: var(--pill-fz-sm); --pill-height: var(--pill-height-sm); font-size: var(--pill-fz); flex: 0; height: var(--pill-height); padding-inline: 0.8em; display: inline-flex; align-items: center; border-radius: var(--pill-radius, 1000rem); line-height: 1; white-space: nowrap; user-select: none; -webkit-user-select: none; max-width: 100%; } :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 { background-color: var(--mantine-color-dark-7); color: var(--mantine-color-dark-0); } :where([data-mantine-color-scheme='light']) .m_7cda1cd6 { color: var(--mantine-color-black); } .m_7cda1cd6:where([data-with-remove]:not(:has(button:disabled))) { padding-inline-end: 0; } .m_7cda1cd6:where([data-disabled], :has(button:disabled)) { cursor: not-allowed; } :where([data-mantine-color-scheme='light']) .m_44da308b { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='light']) .m_44da308b:where([data-disabled], :has(button:disabled)) { background-color: var(--mantine-color-disabled); } :where([data-mantine-color-scheme='light']) .m_e3a01f8 { background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='light']) .m_e3a01f8:where([data-disabled], :has(button:disabled)) { background-color: var(--mantine-color-disabled); } .m_1e0e6180 { cursor: inherit; overflow: hidden; height: 100%; line-height: var(--pill-height); text-overflow: ellipsis; } .m_ae386778 { color: inherit; font-size: inherit; height: 100%; min-height: unset; min-width: 2em; width: unset; border-radius: 0; padding-inline-start: 0.1em; padding-inline-end: 0.3em; flex: 0; border-end-end-radius: var(--pill-radius, 50%); border-start-end-radius: var(--pill-radius, 50%); } .m_7cda1cd6[data-disabled] > .m_ae386778, .m_ae386778:disabled { display: none; background-color: transparent; width: 0.8em; min-width: 0.8em; padding: 0; cursor: not-allowed; } .m_7cda1cd6[data-disabled] > .m_ae386778 > svg, .m_ae386778:disabled > svg { display: none; } .m_ae386778 > svg { pointer-events: none; } .m_1dcfd90b { --pg-gap-xs: calc(0.375rem * var(--mantine-scale)); --pg-gap-sm: calc(0.5rem * var(--mantine-scale)); --pg-gap-md: calc(0.625rem * var(--mantine-scale)); --pg-gap-lg: calc(0.75rem * var(--mantine-scale)); --pg-gap-xl: calc(0.75rem * var(--mantine-scale)); --pg-gap: var(--pg-gap-sm); display: flex; align-items: center; gap: var(--pg-gap); flex-wrap: wrap; } .m_45c4369d { background-color: transparent; appearance: none; min-width: calc(6.25rem * var(--mantine-scale)); flex: 1; border: 0; font-size: inherit; height: 1.6em; color: inherit; padding: 0; } .m_45c4369d::placeholder { color: var(--input-placeholder-color); opacity: 1; } .m_45c4369d:where([data-type='hidden'], [data-type='auto']) { height: calc(0.0625rem * var(--mantine-scale)); width: calc(0.0625rem * var(--mantine-scale)); top: 0; left: 0; pointer-events: none; position: absolute; opacity: 0; } .m_45c4369d:focus { outline: none; } .m_45c4369d:where([data-type='auto']:focus) { height: 1.6em; visibility: visible; opacity: 1; position: static; } .m_45c4369d:where([data-pointer]:not([data-disabled], :disabled)) { cursor: pointer; } .m_45c4369d:where([data-disabled], :disabled) { cursor: not-allowed; } .m_f0824112 { --nl-bg: var(--mantine-primary-color-light); --nl-hover: var(--mantine-primary-color-light-hover); --nl-color: var(--mantine-primary-color-light-color); display: flex; align-items: center; width: 100%; padding: 8px var(--mantine-spacing-sm); user-select: none; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_f0824112:hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_f0824112:hover { background-color: var(--mantine-color-dark-6); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_f0824112:active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_f0824112:active { background-color: var(--mantine-color-dark-6); } } .m_f0824112:where([data-disabled]) { opacity: 0.4; pointer-events: none; } .m_f0824112:where([data-active], [aria-current='page']) { background-color: var(--nl-bg); color: var(--nl-color); } @media (hover: hover) { .m_f0824112:where([data-active], [aria-current='page']):hover { background-color: var(--nl-hover); } } @media (hover: none) { .m_f0824112:where([data-active], [aria-current='page']):active { background-color: var(--nl-hover); } } .m_f0824112:where([data-active], [aria-current='page']) .m_57492dcc { --description-opacity: 0.9; --description-color: var(--nl-color); } .m_690090b5 { display: flex; align-items: center; justify-content: center; transition: transform 150ms ease; } .m_690090b5 > svg { display: block; } .m_690090b5:where([data-position='left']) { margin-inline-end: var(--mantine-spacing-sm); } .m_690090b5:where([data-position='right']) { margin-inline-start: var(--mantine-spacing-sm); } .m_690090b5:where([data-rotate]) { transform: rotate(90deg); } .m_1f6ac4c4 { font-size: var(--mantine-font-size-sm); } .m_f07af9d2 { flex: 1; overflow: hidden; text-overflow: ellipsis; } .m_f07af9d2:where([data-no-wrap]) { white-space: nowrap; } .m_57492dcc { display: block; font-size: var(--mantine-font-size-xs); opacity: var(--description-opacity, 1); color: var(--description-color, var(--mantine-color-dimmed)); overflow: hidden; text-overflow: ellipsis; } :where([data-no-wrap]) .m_57492dcc { white-space: nowrap; } .m_e17b862f { padding-inline-start: var(--nl-offset, var(--mantine-spacing-lg)); } .m_1fd8a00b { transform: rotate(-90deg); } .m_a513464 { --notification-radius: var(--mantine-radius-default); --notification-color: var(--mantine-primary-color-filled); overflow: hidden; box-sizing: border-box; position: relative; display: flex; align-items: center; padding-inline-start: calc(1.375rem * var(--mantine-scale)); padding-inline-end: var(--mantine-spacing-xs); padding-top: var(--mantine-spacing-xs); padding-bottom: var(--mantine-spacing-xs); border-radius: var(--notification-radius); box-shadow: var(--mantine-shadow-lg); } .m_a513464::before { content: ''; display: block; position: absolute; width: calc(0.375rem * var(--mantine-scale)); top: var(--notification-radius); bottom: var(--notification-radius); inset-inline-start: calc(0.25rem * var(--mantine-scale)); border-radius: var(--notification-radius); background-color: var(--notification-color); } :where([data-mantine-color-scheme='light']) .m_a513464 { background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_a513464 { background-color: var(--mantine-color-dark-6); } .m_a513464:where([data-with-icon])::before { display: none; } :where([data-mantine-color-scheme='light']) .m_a513464:where([data-with-border]) { border: 1px solid var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_a513464:where([data-with-border]) { border: 1px solid var(--mantine-color-dark-4); } .m_a4ceffb { box-sizing: border-box; margin-inline-end: var(--mantine-spacing-md); width: calc(1.75rem * var(--mantine-scale)); height: calc(1.75rem * var(--mantine-scale)); border-radius: calc(1.75rem * var(--mantine-scale)); display: flex; align-items: center; justify-content: center; background-color: var(--notification-color); color: var(--mantine-color-white); } .m_b0920b15 { margin-inline-end: var(--mantine-spacing-md); } .m_a49ed24 { flex: 1; overflow: hidden; margin-inline-end: var(--mantine-spacing-xs); } .m_3feedf16 { margin-bottom: calc(0.125rem * var(--mantine-scale)); overflow: hidden; text-overflow: ellipsis; font-size: var(--mantine-font-size-sm); line-height: var(--mantine-line-height-sm); font-weight: 500; } :where([data-mantine-color-scheme='light']) .m_3feedf16 { color: var(--mantine-color-gray-9); } :where([data-mantine-color-scheme='dark']) .m_3feedf16 { color: var(--mantine-color-white); } .m_3d733a3a { font-size: var(--mantine-font-size-sm); line-height: var(--mantine-line-height-sm); overflow: hidden; text-overflow: ellipsis; } :where([data-mantine-color-scheme='light']) .m_3d733a3a { color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_3d733a3a { color: var(--mantine-color-dark-0); } :where([data-mantine-color-scheme='light']) .m_3d733a3a:where([data-with-title]) { color: var(--mantine-color-gray-6); } :where([data-mantine-color-scheme='dark']) .m_3d733a3a:where([data-with-title]) { color: var(--mantine-color-dark-2); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_919a4d88:hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_919a4d88:hover { background-color: var(--mantine-color-dark-8); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_919a4d88:active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_919a4d88:active { background-color: var(--mantine-color-dark-8); } } .m_e2f5cd4e { --ni-right-section-width-xs: calc(1.0625rem * var(--mantine-scale)); --ni-right-section-width-sm: calc(1.5rem * var(--mantine-scale)); --ni-right-section-width-md: calc(1.6875rem * var(--mantine-scale)); --ni-right-section-width-lg: calc(1.9375rem * var(--mantine-scale)); --ni-right-section-width-xl: calc(2.125rem * var(--mantine-scale)); } .m_95e17d22 { --ni-chevron-size-xs: calc(0.625rem * var(--mantine-scale)); --ni-chevron-size-sm: calc(0.875rem * var(--mantine-scale)); --ni-chevron-size-md: calc(1rem * var(--mantine-scale)); --ni-chevron-size-lg: calc(1.125rem * var(--mantine-scale)); --ni-chevron-size-xl: calc(1.25rem * var(--mantine-scale)); --ni-chevron-size: var(--ni-chevron-size-sm); display: flex; flex-direction: column; width: 100%; height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))); max-width: calc(var(--ni-chevron-size) * 1.7); margin-inline-start: auto; } .m_80b4b171 { --control-border: 1px solid var(--input-bd); --control-radius: calc(var(--input-radius) - calc(0.0625rem * var(--mantine-scale))); flex: 0 0 50%; width: 100%; padding: 0; height: calc(var(--input-height) / 2 - calc(0.0625rem * var(--mantine-scale))); border-inline-start: var(--control-border); display: flex; align-items: center; justify-content: center; color: var(--mantine-color-text); background-color: transparent; cursor: pointer; } .m_80b4b171:where(:disabled) { background-color: transparent; cursor: not-allowed; opacity: 0.6; color: var(--mantine-color-disabled-color); } .m_e2f5cd4e[data-error] :where(.m_80b4b171) { color: var(--mantine-color-error); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_80b4b171:hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_80b4b171:hover { background-color: var(--mantine-color-dark-4); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_80b4b171:active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_80b4b171:active { background-color: var(--mantine-color-dark-4); } } .m_80b4b171:where(:first-of-type) { border-radius: 0; border-start-end-radius: var(--control-radius); } .m_80b4b171:last-of-type { border-radius: 0; border-end-end-radius: var(--control-radius); } .m_4addd315 { --pagination-control-size-xs: calc(1.375rem * var(--mantine-scale)); --pagination-control-size-sm: calc(1.625rem * var(--mantine-scale)); --pagination-control-size-md: calc(2rem * var(--mantine-scale)); --pagination-control-size-lg: calc(2.375rem * var(--mantine-scale)); --pagination-control-size-xl: calc(2.75rem * var(--mantine-scale)); --pagination-control-size: var(--pagination-control-size-md); --pagination-control-fz: var(--mantine-font-size-md); --pagination-active-bg: var(--mantine-primary-color-filled); } .m_326d024a { display: flex; align-items: center; justify-content: center; border: calc(0.0625rem * var(--mantine-scale)) solid; cursor: pointer; color: var(--mantine-color-text); height: var(--pagination-control-size); min-width: var(--pagination-control-size); font-size: var(--pagination-control-fz); line-height: 1; border-radius: var(--pagination-control-radius, var(--mantine-radius-default)); } .m_326d024a:where([data-with-padding]) { padding: calc(var(--pagination-control-size) / 4); } .m_326d024a:where(:disabled, [data-disabled]) { cursor: not-allowed; opacity: 0.4; } :where([data-mantine-color-scheme='light']) .m_326d024a { border-color: var(--mantine-color-gray-4); background-color: var(--mantine-color-white); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_326d024a:hover:where(:not(:disabled, [data-disabled])) { background-color: var(--mantine-color-gray-0); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_326d024a:active:where(:not(:disabled, [data-disabled])) { background-color: var(--mantine-color-gray-0); } } :where([data-mantine-color-scheme='dark']) .m_326d024a { border-color: var(--mantine-color-dark-4); background-color: var(--mantine-color-dark-6); } @media (hover: hover) { :where([data-mantine-color-scheme='dark']) .m_326d024a:hover:where(:not(:disabled, [data-disabled])) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='dark']) .m_326d024a:active:where(:not(:disabled, [data-disabled])) { background-color: var(--mantine-color-dark-5); } } .m_326d024a:where([data-active]) { background-color: var(--pagination-active-bg); border-color: var(--pagination-active-bg); color: var(--pagination-active-color, var(--mantine-color-white)); } @media (hover: hover) { .m_326d024a:where([data-active]):hover { background-color: var(--pagination-active-bg); } } @media (hover: none) { .m_326d024a:where([data-active]):active { background-color: var(--pagination-active-bg); } } .m_4ad7767d { height: var(--pagination-control-size); min-width: var(--pagination-control-size); display: flex; align-items: center; justify-content: center; pointer-events: none; } .m_f61ca620 { --psi-button-size-xs: calc(1.375rem * var(--mantine-scale)); --psi-button-size-sm: calc(1.625rem * var(--mantine-scale)); --psi-button-size-md: calc(1.75rem * var(--mantine-scale)); --psi-button-size-lg: calc(2rem * var(--mantine-scale)); --psi-button-size-xl: calc(2.5rem * var(--mantine-scale)); --psi-icon-size-xs: calc(0.75rem * var(--mantine-scale)); --psi-icon-size-sm: calc(0.9375rem * var(--mantine-scale)); --psi-icon-size-md: calc(1.0625rem * var(--mantine-scale)); --psi-icon-size-lg: calc(1.1875rem * var(--mantine-scale)); --psi-icon-size-xl: calc(1.3125rem * var(--mantine-scale)); --psi-button-size: var(--psi-button-size-sm); --psi-icon-size: var(--psi-icon-size-sm); } .m_ccf8da4c { position: relative; overflow: hidden; } .m_f2d85dd2 { font-family: var(--mantine-font-family); background-color: transparent; border: 0; padding-inline-end: var(--input-padding-inline-end); padding-inline-start: var(--input-padding-inline-start); position: absolute; inset: 0; outline: 0; font-size: inherit; line-height: var(--mantine-line-height); height: 100%; width: 100%; color: inherit; } .m_ccf8da4c[data-disabled] .m_f2d85dd2, .m_f2d85dd2:disabled { cursor: not-allowed; } .m_f2d85dd2::placeholder { color: var(--input-placeholder-color); opacity: 1; } .m_f2d85dd2::-ms-reveal { display: none; } .m_b1072d44 { width: var(--psi-button-size); height: var(--psi-button-size); min-width: var(--psi-button-size); min-height: var(--psi-button-size); } .m_b1072d44:disabled { display: none; } .m_f1cb205a { --pin-input-size-xs: calc(1.875rem * var(--mantine-scale)); --pin-input-size-sm: calc(2.25rem * var(--mantine-scale)); --pin-input-size-md: calc(2.625rem * var(--mantine-scale)); --pin-input-size-lg: calc(3.125rem * var(--mantine-scale)); --pin-input-size-xl: calc(3.75rem * var(--mantine-scale)); --pin-input-size: var(--pin-input-size-sm); } .m_cb288ead { width: var(--pin-input-size); height: var(--pin-input-size); } @keyframes m_81a374bd { 0% { background-position: 0 0; } 100% { background-position: calc(2.5rem * var(--mantine-scale)) 0; } } .m_db6d6462 { --progress-radius: var(--mantine-radius-default); --progress-size: var(--progress-size-md); --progress-size-xs: calc(0.1875rem * var(--mantine-scale)); --progress-size-sm: calc(0.3125rem * var(--mantine-scale)); --progress-size-md: calc(0.5rem * var(--mantine-scale)); --progress-size-lg: calc(0.75rem * var(--mantine-scale)); --progress-size-xl: calc(1rem * var(--mantine-scale)); position: relative; height: var(--progress-size); border-radius: var(--progress-radius); overflow: hidden; display: flex; } :where([data-mantine-color-scheme='light']) .m_db6d6462 { background-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_db6d6462 { background-color: var(--mantine-color-dark-4); } .m_2242eb65 { background-color: var(--progress-section-color); height: 100%; width: var(--progress-section-width); display: flex; align-items: center; justify-content: center; overflow: hidden; background-size: calc(1.25rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale)); transition: width var(--progress-transition-duration, 100ms) ease; } .m_2242eb65:where([data-striped]) { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); } .m_2242eb65:where([data-animated]) { animation: m_81a374bd 1s linear infinite; } .m_2242eb65:where(:last-of-type) { border-radius: 0; border-start-end-radius: var(--progress-radius); border-end-end-radius: var(--progress-radius); } .m_2242eb65:where(:first-of-type) { border-radius: 0; border-start-start-radius: var(--progress-radius); border-end-start-radius: var(--progress-radius); } .m_91e40b74 { color: var(--progress-label-color, var(--mantine-color-white)); font-weight: bold; user-select: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: min(calc(var(--progress-size) * 0.65), calc(1.125rem * var(--mantine-scale))); line-height: 1; padding-inline: calc(0.25rem * var(--mantine-scale)); } .m_9dc8ae12 { --card-radius: var(--mantine-radius-default); display: block; width: 100%; border-radius: var(--card-radius); cursor: pointer; } .m_9dc8ae12 :where(*) { cursor: inherit; } .m_9dc8ae12:where([data-with-border]) { border: calc(0.0625rem * var(--mantine-scale)) solid transparent; } :where([data-mantine-color-scheme='light']) .m_9dc8ae12:where([data-with-border]) { border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_9dc8ae12:where([data-with-border]) { border-color: var(--mantine-color-dark-4); } .m_717d7ff6 { --radio-size-xs: calc(1rem * var(--mantine-scale)); --radio-size-sm: calc(1.25rem * var(--mantine-scale)); --radio-size-md: calc(1.5rem * var(--mantine-scale)); --radio-size-lg: calc(1.875rem * var(--mantine-scale)); --radio-size-xl: calc(2.25rem * var(--mantine-scale)); --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale)); --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale)); --radio-icon-size-md: calc(0.625rem * var(--mantine-scale)); --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale)); --radio-icon-size-xl: calc(1rem * var(--mantine-scale)); --radio-icon-size: var(--radio-icon-size-sm); --radio-size: var(--radio-size-sm); --radio-color: var(--mantine-primary-color-filled); --radio-icon-color: var(--mantine-color-white); position: relative; border: calc(0.0625rem * var(--mantine-scale)) solid transparent; width: var(--radio-size); min-width: var(--radio-size); height: var(--radio-size); min-height: var(--radio-size); border-radius: var(--radio-radius, 10000px); transition: border-color 100ms ease, background-color 100ms ease; cursor: var(--mantine-cursor-type); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; } :where([data-mantine-color-scheme='light']) .m_717d7ff6 { background-color: var(--mantine-color-white); border-color: var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_717d7ff6 { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); } .m_717d7ff6[data-indeterminate], .m_717d7ff6[data-checked] { background-color: var(--radio-color); border-color: var(--radio-color); } .m_717d7ff6[data-indeterminate] > .m_3e4da632, .m_717d7ff6[data-checked] > .m_3e4da632 { opacity: 1; transform: none; color: var(--radio-icon-color); } .m_717d7ff6[data-disabled] { cursor: not-allowed; background-color: var(--mantine-color-disabled); border-color: var(--mantine-color-disabled-border); } .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 { color: var(--mantine-color-disabled-color); } .m_2980836c[data-indeterminate]:not([data-disabled]), .m_2980836c[data-checked]:not([data-disabled]) { background-color: transparent; border-color: var(--radio-color); } .m_2980836c[data-indeterminate]:not([data-disabled]) > .m_3e4da632, .m_2980836c[data-checked]:not([data-disabled]) > .m_3e4da632 { color: var(--radio-color); opacity: 1; transform: none; } .m_3e4da632 { display: block; width: var(--radio-icon-size); height: var(--radio-icon-size); color: transparent; pointer-events: none; transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5); opacity: 1; transition: transform 100ms ease, opacity 100ms ease; } .m_f3f1af94 { --radio-size-xs: calc(1rem * var(--mantine-scale)); --radio-size-sm: calc(1.25rem * var(--mantine-scale)); --radio-size-md: calc(1.5rem * var(--mantine-scale)); --radio-size-lg: calc(1.875rem * var(--mantine-scale)); --radio-size-xl: calc(2.25rem * var(--mantine-scale)); --radio-size: var(--radio-size-sm); --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale)); --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale)); --radio-icon-size-md: calc(0.625rem * var(--mantine-scale)); --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale)); --radio-icon-size-xl: calc(1rem * var(--mantine-scale)); --radio-icon-size: var(--radio-icon-size-sm); --radio-icon-color: var(--mantine-color-white); } .m_89c4f5e4 { position: relative; width: var(--radio-size); height: var(--radio-size); order: 1; } .m_89c4f5e4:where([data-label-position='left']) { order: 2; } .m_f3ed6b2b { color: var(--radio-icon-color); opacity: var(--radio-icon-opacity, 0); transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale)))); transition: opacity 100ms ease, transform 200ms ease; pointer-events: none; width: var(--radio-icon-size); height: var(--radio-icon-size); position: absolute; top: calc(50% - var(--radio-icon-size) / 2); left: calc(50% - var(--radio-icon-size) / 2); } .m_8a3dbb89 { border: calc(0.0625rem * var(--mantine-scale)) solid; position: relative; appearance: none; width: var(--radio-size); height: var(--radio-size); border-radius: var(--radio-radius, var(--radio-size)); margin: 0; display: flex; align-items: center; justify-content: center; transition-property: background-color, border-color; transition-timing-function: ease; transition-duration: 100ms; cursor: var(--mantine-cursor-type); -webkit-tap-highlight-color: transparent; } :where([data-mantine-color-scheme='light']) .m_8a3dbb89 { background-color: var(--mantine-color-white); border-color: var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_8a3dbb89 { background-color: var(--mantine-color-dark-6); border-color: var(--mantine-color-dark-4); } .m_8a3dbb89:checked { background-color: var(--radio-color, var(--mantine-primary-color-filled)); border-color: var(--radio-color, var(--mantine-primary-color-filled)); } .m_8a3dbb89:checked + .m_f3ed6b2b { --radio-icon-opacity: 1; --radio-icon-transform: scale(1); } .m_8a3dbb89:disabled { cursor: not-allowed; background-color: var(--mantine-color-disabled); border-color: var(--mantine-color-disabled-border); } .m_8a3dbb89:disabled + .m_f3ed6b2b { --radio-icon-color: var(--mantine-color-disabled-color); } .m_8a3dbb89:where([data-error]) { border-color: var(--mantine-color-error); } .m_1bfe9d39 + .m_f3ed6b2b { --radio-icon-color: var(--radio-color); } .m_1bfe9d39:checked:not(:disabled) { background-color: transparent; border-color: var(--radio-color); } .m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b { --radio-icon-color: var(--radio-color); --radio-icon-opacity: 1; --radio-icon-transform: none; } .m_f8d312f2 { --rating-size-xs: calc(0.875rem * var(--mantine-scale)); --rating-size-sm: calc(1.125rem * var(--mantine-scale)); --rating-size-md: calc(1.25rem * var(--mantine-scale)); --rating-size-lg: calc(1.75rem * var(--mantine-scale)); --rating-size-xl: calc(2rem * var(--mantine-scale)); display: flex; width: max-content; } .m_f8d312f2:where(:has(input:disabled)) { pointer-events: none; } .m_61734bb7 { position: relative; transition: transform 100ms ease; } .m_61734bb7:where([data-active]) { z-index: 1; transform: scale(1.1); } .m_5662a89a { width: var(--rating-size); height: var(--rating-size); display: block; } :where([data-mantine-color-scheme='light']) .m_5662a89a { fill: var(--mantine-color-gray-3); stroke: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_5662a89a { fill: var(--mantine-color-dark-3); stroke: var(--mantine-color-dark-3); } .m_5662a89a:where([data-filled]) { fill: var(--rating-color); stroke: var(--rating-color); } .m_211007ba { height: 0; width: 0; position: absolute; overflow: hidden; white-space: nowrap; opacity: 0; -webkit-tap-highlight-color: transparent; } .m_211007ba:focus-visible + label { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .m_21342ee4 { display: block; cursor: pointer; position: absolute; top: 0; left: 0; z-index: var(--rating-item-z-index, 0); -webkit-tap-highlight-color: transparent; } .m_21342ee4:where([data-read-only]) { cursor: default; } .m_21342ee4:where(:last-of-type) { position: relative; } .m_fae05d6a { clip-path: var(--rating-symbol-clip-path); } .m_1b3c8819 { --tooltip-radius: var(--mantine-radius-default); position: absolute; padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-xs); pointer-events: none; font-size: var(--mantine-font-size-sm); white-space: nowrap; border-radius: var(--tooltip-radius); } :where([data-mantine-color-scheme='light']) .m_1b3c8819 { background-color: var(--tooltip-bg, var(--mantine-color-gray-9)); color: var(--tooltip-color, var(--mantine-color-white)); } :where([data-mantine-color-scheme='dark']) .m_1b3c8819 { background-color: var(--tooltip-bg, var(--mantine-color-gray-2)); color: var(--tooltip-color, var(--mantine-color-black)); } .m_1b3c8819:where([data-multiline]) { white-space: normal; } .m_1b3c8819:where([data-fixed]) { position: fixed; } .m_f898399f { background-color: inherit; border: 0; z-index: 1; } .m_b32e4812 { position: relative; width: var(--rp-size); height: var(--rp-size); min-width: var(--rp-size); min-height: var(--rp-size); --rp-transition-duration: 0ms; } .m_d43b5134 { width: var(--rp-size); height: var(--rp-size); min-width: var(--rp-size); min-height: var(--rp-size); transform: rotate(-90deg); } .m_b1ca1fbf { stroke: var(--curve-color, var(--rp-curve-root-color)); transition: stroke-dashoffset var(--rp-transition-duration) ease, stroke-dasharray var(--rp-transition-duration) ease, stroke var(--rp-transition-duration); } [data-mantine-color-scheme='light'] .m_b1ca1fbf { --rp-curve-root-color: var(--mantine-color-gray-2); } [data-mantine-color-scheme='dark'] .m_b1ca1fbf { --rp-curve-root-color: var(--mantine-color-dark-4); } .m_b23f9dc4 { position: absolute; top: 50%; transform: translateY(-50%); inset-inline: var(--rp-label-offset); } .m_cf365364 { --sc-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale)); --sc-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)); --sc-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale)); --sc-padding-lg: calc(0.4375rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale)); --sc-padding-xl: calc(0.625rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale)); --sc-transition-duration: 200ms; --sc-padding: var(--sc-padding-sm); --sc-transition-timing-function: ease; --sc-font-size: var(--mantine-font-size-sm); position: relative; display: inline-flex; flex-direction: row; width: auto; border-radius: var(--sc-radius, var(--mantine-radius-default)); overflow: hidden; padding: calc(0.25rem * var(--mantine-scale)); } .m_cf365364:where([data-full-width]) { display: flex; } .m_cf365364:where([data-orientation='vertical']) { display: flex; flex-direction: column; width: max-content; } .m_cf365364:where([data-orientation='vertical']):where([data-full-width]) { width: auto; } :where([data-mantine-color-scheme='light']) .m_cf365364 { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='dark']) .m_cf365364 { background-color: var(--mantine-color-dark-8); } .m_9e182ccd { position: absolute; display: block; z-index: 1; border-radius: var(--sc-radius, var(--mantine-radius-default)); } :where([data-mantine-color-scheme='light']) .m_9e182ccd { box-shadow: var(--sc-shadow, none); background-color: var(--sc-color, var(--mantine-color-white)); } :where([data-mantine-color-scheme='dark']) .m_9e182ccd { box-shadow: none; background-color: var(--sc-color, var(--mantine-color-dark-5)); } .m_1738fcb2 { -webkit-tap-highlight-color: transparent; font-weight: 500; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; border-radius: var(--sc-radius, var(--mantine-radius-default)); font-size: var(--sc-font-size); padding: var(--sc-padding); transition: color var(--sc-transition-duration) var(--sc-transition-timing-function); cursor: pointer; /* outline is controlled by .input */ outline: var(--segmented-control-outline, none); } :where([data-mantine-color-scheme='light']) .m_1738fcb2 { color: var(--mantine-color-gray-7); } :where([data-mantine-color-scheme='dark']) .m_1738fcb2 { color: var(--mantine-color-dark-1); } .m_1738fcb2:where([data-read-only]) { cursor: default; } fieldset:disabled .m_1738fcb2, .m_1738fcb2:where([data-disabled]) { cursor: not-allowed; color: var(--mantine-color-disabled-color); } :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active]) { color: var(--sc-label-color, var(--mantine-color-black)); } :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-active]) { color: var(--sc-label-color, var(--mantine-color-white)); } .m_cf365364:where([data-initialized]) .m_1738fcb2:where([data-active])::before { display: none; } .m_1738fcb2:where([data-active])::before { content: ''; inset: 0; z-index: 0; position: absolute; border-radius: var(--sc-radius, var(--mantine-radius-default)); } :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before { box-shadow: var(--sc-shadow, none); background-color: var(--sc-color, var(--mantine-color-white)); } :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-active])::before { box-shadow: none; background-color: var(--sc-color, var(--mantine-color-dark-5)); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover { color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover { color: var(--mantine-color-white); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):active { color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):active { color: var(--mantine-color-white); } } @media (hover: hover) { fieldset:disabled .m_1738fcb2:hover { color: var(--mantine-color-disabled-color) !important; } } @media (hover: none) { fieldset:disabled .m_1738fcb2:active { color: var(--mantine-color-disabled-color) !important; } } .m_1714d588 { height: 0; width: 0; position: absolute; overflow: hidden; white-space: nowrap; opacity: 0; } .m_1714d588[data-focus-ring='auto']:focus:focus-visible + .m_1738fcb2 { --segmented-control-outline: 2px solid var(--mantine-primary-color-filled); } .m_1714d588[data-focus-ring='always']:focus + .m_1738fcb2 { --segmented-control-outline: 2px solid var(--mantine-primary-color-filled); } .m_69686b9b { position: relative; flex: 1; z-index: 2; transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function); } .m_cf365364[data-with-items-borders] :where(.m_69686b9b)::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; background-color: var(--separator-color); width: calc(0.0625rem * var(--mantine-scale)); transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function); } .m_69686b9b[data-orientation='vertical']::before { top: 0; inset-inline: 0; bottom: auto; height: calc(0.0625rem * var(--mantine-scale)); width: auto; } :where([data-mantine-color-scheme='light']) .m_69686b9b { --separator-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_69686b9b { --separator-color: var(--mantine-color-dark-4); } .m_69686b9b:first-of-type::before { --separator-color: transparent; } [data-mantine-color-scheme] .m_69686b9b[data-active]::before, [data-mantine-color-scheme] .m_69686b9b[data-active] + .m_69686b9b::before { --separator-color: transparent; } .m_78882f40 { position: relative; z-index: 2; } .m_fa528724 { --scp-filled-segment-color: var(--mantine-primary-color-filled); --scp-transition-duration: 0ms; --scp-thickness: calc(0.625rem * var(--mantine-scale)); } :where([data-mantine-color-scheme='light']) .m_fa528724 { --scp-empty-segment-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_fa528724 { --scp-empty-segment-color: var(--mantine-color-dark-4); } .m_fa528724 { position: relative; width: fit-content; } .m_62e9e7e2 { display: block; transform: var(--scp-rotation); overflow: hidden; } .m_c573fb6f { transition: stroke-dashoffset var(--scp-transition-duration) ease, stroke-dasharray var(--scp-transition-duration) ease, stroke var(--scp-transition-duration); } .m_4fa340f2 { position: absolute; margin: 0; padding: 0; inset-inline: 0; text-align: center; z-index: 1; } .m_4fa340f2:where([data-position='bottom']) { bottom: 0; padding-inline: calc(var(--scp-thickness) * 2); } .m_4fa340f2:where([data-position='bottom']):where([data-orientation='down']) { bottom: auto; top: 0; } .m_4fa340f2:where([data-position='center']) { top: 50%; padding-inline: calc(var(--scp-thickness) * 3); } .m_925c2d2c { container: simple-grid / inline-size; } .m_2415a157 { display: grid; grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr)); gap: var(--sg-spacing-y) var(--sg-spacing-x); } @keyframes m_299c329c { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .m_18320242 { height: var(--skeleton-height, auto); width: var(--skeleton-width, 100%); border-radius: var(--skeleton-radius, var(--mantine-radius-default)); position: relative; transform: translateZ(0); -webkit-transform: translateZ(0); } .m_18320242:where([data-animate])::after { animation: m_299c329c 1500ms linear infinite; } .m_18320242:where([data-visible]) { overflow: hidden; } .m_18320242:where([data-visible])::before { position: absolute; content: ''; inset: 0; z-index: 10; background-color: var(--mantine-color-body); } .m_18320242:where([data-visible])::after { position: absolute; content: ''; inset: 0; z-index: 11; } :where([data-mantine-color-scheme='light']) .m_18320242:where([data-visible])::after { background-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_18320242:where([data-visible])::after { background-color: var(--mantine-color-dark-4); } .m_dd36362e { --slider-size-xs: calc(0.25rem * var(--mantine-scale)); --slider-size-sm: calc(0.375rem * var(--mantine-scale)); --slider-size-md: calc(0.5rem * var(--mantine-scale)); --slider-size-lg: calc(0.625rem * var(--mantine-scale)); --slider-size-xl: calc(0.75rem * var(--mantine-scale)); --slider-size: var(--slider-size-md); --slider-radius: calc(62.5rem * var(--mantine-scale)); --slider-color: var(--mantine-primary-color-filled); --slider-track-disabled-bg: var(--mantine-color-disabled); -webkit-tap-highlight-color: transparent; outline: none; height: calc(var(--slider-size) * 2); padding-inline: var(--slider-size); display: flex; flex-direction: column; align-items: center; touch-action: none; position: relative; } [data-mantine-color-scheme='light'] .m_dd36362e { --slider-track-bg: var(--mantine-color-gray-2); } [data-mantine-color-scheme='dark'] .m_dd36362e { --slider-track-bg: var(--mantine-color-dark-4); } .m_c9357328 { position: absolute; top: calc(-2.25rem * var(--mantine-scale)); font-size: var(--mantine-font-size-xs); color: var(--mantine-color-white); padding: calc(var(--mantine-spacing-xs) / 2); border-radius: var(--mantine-radius-sm); white-space: nowrap; pointer-events: none; user-select: none; touch-action: none; } :where([data-mantine-color-scheme='light']) .m_c9357328 { background-color: var(--mantine-color-gray-9); } :where([data-mantine-color-scheme='dark']) .m_c9357328 { background-color: var(--mantine-color-dark-4); } .m_c9a9a60a { position: absolute; display: flex; height: var(--slider-thumb-size); width: var(--slider-thumb-size); border: calc(0.25rem * var(--mantine-scale)) solid; transform: translate(-50%, -50%); top: 50%; cursor: pointer; border-radius: var(--slider-radius); align-items: center; justify-content: center; transition: box-shadow 100ms ease, transform 100ms ease; z-index: 3; user-select: none; touch-action: none; outline-offset: calc(0.125rem * var(--mantine-scale)); left: var(--slider-thumb-offset); } :where([dir="rtl"]) .m_c9a9a60a { left: auto; right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size)); } fieldset:disabled .m_c9a9a60a, .m_c9a9a60a:where([data-disabled]) { display: none; } .m_c9a9a60a:where([data-dragging]) { transform: translate(-50%, -50%) scale(1.05); box-shadow: var(--mantine-shadow-sm); } :where([data-mantine-color-scheme='light']) .m_c9a9a60a { color: var(--slider-color); border-color: var(--slider-color); background-color: var(--mantine-color-white); } :where([data-mantine-color-scheme='dark']) .m_c9a9a60a { color: var(--mantine-color-white); border-color: var(--mantine-color-white); background-color: var(--slider-color); } .m_a8645c2 { display: flex; align-items: center; width: 100%; height: calc(var(--slider-size) * 2); cursor: pointer; } fieldset:disabled .m_a8645c2, .m_a8645c2:where([data-disabled]) { cursor: not-allowed; } .m_c9ade57f { position: relative; width: 100%; height: var(--slider-size); } .m_c9ade57f:where([data-inverted]:not([data-disabled])) { --track-bg: var(--slider-color); } fieldset:disabled .m_c9ade57f:where([data-inverted]), .m_c9ade57f:where([data-inverted][data-disabled]) { --track-bg: var(--slider-track-disabled-bg); } .m_c9ade57f::before { content: ''; position: absolute; top: 0; bottom: 0; border-radius: var(--slider-radius); inset-inline: calc(var(--slider-size) * -1); background-color: var(--track-bg, var(--slider-track-bg)); z-index: 0; } .m_38aeed47 { position: absolute; z-index: 1; top: 0; bottom: 0; background-color: var(--slider-color); border-radius: var(--slider-radius); width: var(--slider-bar-width); inset-inline-start: var(--slider-bar-offset); } .m_38aeed47:where([data-inverted]) { background-color: var(--slider-track-bg); } fieldset:disabled .m_38aeed47:where(:not([data-inverted])), .m_38aeed47:where([data-disabled]:not([data-inverted])) { background-color: var(--mantine-color-disabled-color); } .m_b7b0423a { position: absolute; inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2); top: 0; z-index: 2; height: 0; pointer-events: none; } .m_dd33bc19 { border: calc(0.125rem * var(--mantine-scale)) solid; height: var(--slider-size); width: var(--slider-size); border-radius: calc(62.5rem * var(--mantine-scale)); background-color: var(--mantine-color-white); pointer-events: none; } :where([data-mantine-color-scheme='light']) .m_dd33bc19 { border-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_dd33bc19 { border-color: var(--mantine-color-dark-4); } .m_dd33bc19:where([data-filled]) { border-color: var(--slider-color); } .m_dd33bc19:where([data-filled]):where([data-disabled]) { border-color: var(--mantine-color-disabled-border); } .m_68c77a5b { transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2)); font-size: var(--mantine-font-size-sm); white-space: nowrap; cursor: pointer; user-select: none; } :where([data-mantine-color-scheme='light']) .m_68c77a5b { color: var(--mantine-color-gray-6); } :where([data-mantine-color-scheme='dark']) .m_68c77a5b { color: var(--mantine-color-dark-2); } .m_559cce2d { position: relative; } .m_559cce2d:where([data-has-spoiler]) { margin-bottom: calc(1.5rem * var(--mantine-scale)); } .m_b912df4e { display: flex; flex-direction: column; overflow: hidden; transition: max-height var(--spoiler-transition-duration, 200ms) ease; } .m_b9131032 { position: absolute; inset-inline-start: 0; top: 100%; height: calc(1.5rem * var(--mantine-scale)); } .m_6d731127 { display: flex; flex-direction: column; align-items: var(--stack-align, stretch); justify-content: var(--stack-justify, flex-start); gap: var(--stack-gap, var(--mantine-spacing-md)); } .m_cbb4ea7e { --stepper-icon-size-xs: calc(2.125rem * var(--mantine-scale)); --stepper-icon-size-sm: calc(2.25rem * var(--mantine-scale)); --stepper-icon-size-md: calc(2.625rem * var(--mantine-scale)); --stepper-icon-size-lg: calc(3rem * var(--mantine-scale)); --stepper-icon-size-xl: calc(3.25rem * var(--mantine-scale)); --stepper-icon-size: var(--stepper-icon-size-md); --stepper-color: var(--mantine-primary-color-filled); --stepper-content-padding: var(--mantine-spacing-md); --stepper-spacing: var(--mantine-spacing-md); --stepper-radius: calc(62.5rem * var(--mantine-scale)); --stepper-fz: var(--mantine-font-size-md); --stepper-outline-thickness: calc(0.125rem * var(--mantine-scale)); } [data-mantine-color-scheme='light'] .m_cbb4ea7e { --stepper-outline-color: var(--mantine-color-gray-2); } [data-mantine-color-scheme='dark'] .m_cbb4ea7e { --stepper-outline-color: var(--mantine-color-dark-5); } .m_aaf89d0b { display: flex; flex-wrap: nowrap; align-items: center; } .m_aaf89d0b:where([data-wrap]) { flex-wrap: wrap; gap: var(--mantine-spacing-md) 0; } .m_aaf89d0b:where([data-orientation='vertical']) { flex-direction: column; } .m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='left']) { align-items: flex-start; } .m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='right']) { align-items: flex-end; } .m_aaf89d0b:where([data-orientation='horizontal']) { flex-direction: row; } .m_2a371ac9 { transition: background-color 150ms ease; flex: 1; height: var(--stepper-outline-thickness); margin-inline: var(--mantine-spacing-md); background-color: var(--stepper-outline-color); } .m_2a371ac9:where([data-active]) { background-color: var(--stepper-color); } .m_78da155d { padding-top: var(--stepper-content-padding); } .m_cbb57068 { --step-color: var(--stepper-color); display: flex; cursor: default; } .m_cbb57068:where([data-allow-click]) { cursor: pointer; } .m_cbb57068:where([data-icon-position='left']) { flex-direction: row; } .m_cbb57068:where([data-icon-position='right']) { flex-direction: row-reverse; } .m_f56b1e2c { align-items: center; } .m_833edb7e { --separator-spacing: calc(var(--mantine-spacing-xs) / 2); justify-content: flex-start; min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing)); margin-top: var(--separator-spacing); overflow: hidden; } .m_833edb7e:where(:first-of-type) { margin-top: 0; } .m_833edb7e:where(:last-of-type) { min-height: auto; } .m_833edb7e:where(:last-of-type) .m_6496b3f3 { display: none; } .m_818e70b { position: relative; } .m_6496b3f3 { top: calc(var(--stepper-icon-size) + var(--separator-spacing)); inset-inline-start: calc(var(--stepper-icon-size) / 2); height: 100vh; position: absolute; border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color); } .m_6496b3f3:where([data-active]) { border-color: var(--stepper-color); } .m_1959ad01 { height: var(--stepper-icon-size); width: var(--stepper-icon-size); min-height: var(--stepper-icon-size); min-width: var(--stepper-icon-size); border-radius: var(--stepper-radius); font-size: var(--stepper-fz); display: flex; align-items: center; justify-content: center; position: relative; font-weight: bold; transition: background-color 150ms ease, border-color 150ms ease; border: var(--stepper-outline-thickness) solid var(--stepper-outline-color); background-color: var(--stepper-outline-color); } :where([data-mantine-color-scheme='light']) .m_1959ad01 { color: var(--mantine-color-gray-7); } :where([data-mantine-color-scheme='dark']) .m_1959ad01 { color: var(--mantine-color-dark-1); } .m_1959ad01:where([data-progress]) { border-color: var(--step-color); } .m_1959ad01:where([data-completed]) { color: var(--stepper-icon-color, var(--mantine-color-white)); background-color: var(--step-color); border-color: var(--step-color); } .m_a79331dc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--stepper-icon-color, var(--mantine-color-white)); } .m_1956aa2a { display: flex; flex-direction: column; } .m_1956aa2a:where([data-icon-position='left']) { margin-inline-start: var(--mantine-spacing-sm); } .m_1956aa2a:where([data-icon-position='right']) { text-align: right; margin-inline-end: var(--mantine-spacing-sm); } :where([dir="rtl"]) .m_1956aa2a:where([data-icon-position='right']) { text-align: left; } .m_12051f6c { font-weight: 500; font-size: var(--stepper-fz); line-height: 1; } .m_164eea74 { margin-top: calc(var(--stepper-spacing) / 3); margin-bottom: calc(var(--stepper-spacing) / 3); font-size: calc(var(--stepper-fz) - calc(0.125rem * var(--mantine-scale))); line-height: 1; color: var(--mantine-color-dimmed); } .m_5f93f3bb { --switch-height-xs: calc(1rem * var(--mantine-scale)); --switch-height-sm: calc(1.25rem * var(--mantine-scale)); --switch-height-md: calc(1.5rem * var(--mantine-scale)); --switch-height-lg: calc(1.875rem * var(--mantine-scale)); --switch-height-xl: calc(2.25rem * var(--mantine-scale)); --switch-width-xs: calc(2rem * var(--mantine-scale)); --switch-width-sm: calc(2.375rem * var(--mantine-scale)); --switch-width-md: calc(2.875rem * var(--mantine-scale)); --switch-width-lg: calc(3.5rem * var(--mantine-scale)); --switch-width-xl: calc(4.5rem * var(--mantine-scale)); --switch-thumb-size-xs: calc(0.75rem * var(--mantine-scale)); --switch-thumb-size-sm: calc(0.875rem * var(--mantine-scale)); --switch-thumb-size-md: calc(1.125rem * var(--mantine-scale)); --switch-thumb-size-lg: calc(1.375rem * var(--mantine-scale)); --switch-thumb-size-xl: calc(1.75rem * var(--mantine-scale)); --switch-label-font-size-xs: calc(0.3125rem * var(--mantine-scale)); --switch-label-font-size-sm: calc(0.375rem * var(--mantine-scale)); --switch-label-font-size-md: calc(0.4375rem * var(--mantine-scale)); --switch-label-font-size-lg: calc(0.5625rem * var(--mantine-scale)); --switch-label-font-size-xl: calc(0.6875rem * var(--mantine-scale)); --switch-track-label-padding-xs: calc(0.125rem * var(--mantine-scale)); --switch-track-label-padding-sm: calc(0.15625rem * var(--mantine-scale)); --switch-track-label-padding-md: calc(0.1875rem * var(--mantine-scale)); --switch-track-label-padding-lg: calc(0.1875rem * var(--mantine-scale)); --switch-track-label-padding-xl: calc(0.21875rem * var(--mantine-scale)); --switch-height: var(--switch-height-sm); --switch-width: var(--switch-width-sm); --switch-thumb-size: var(--switch-thumb-size-sm); --switch-label-font-size: var(--switch-label-font-size-sm); --switch-track-label-padding: var(--switch-track-label-padding-sm); --switch-radius: calc(62.5rem * var(--mantine-scale)); --switch-color: var(--mantine-primary-color-filled); --switch-disabled-color: var(--mantine-color-disabled); position: relative; } .m_926b4011 { height: 0; width: 0; opacity: 0; margin: 0; padding: 0; position: absolute; overflow: hidden; white-space: nowrap; } .m_9307d992 { -webkit-tap-highlight-color: transparent; cursor: var(--switch-cursor, var(--mantine-cursor-type)); overflow: hidden; position: relative; border-radius: var(--switch-radius); background-color: var(--switch-bg); height: var(--switch-height); min-width: var(--switch-width); margin: 0; transition: background-color 150ms ease, border-color 150ms ease; appearance: none; display: flex; align-items: center; font-size: var(--switch-label-font-size); font-weight: 600; order: var(--switch-order, 1); user-select: none; z-index: 0; line-height: 0; color: var(--switch-text-color); } .m_9307d992:where([data-without-labels]) { width: var(--switch-width); } .m_926b4011:focus-visible + .m_9307d992 { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .m_926b4011:checked + .m_9307d992 { --switch-bg: var(--switch-color); --switch-text-color: var(--mantine-color-white); } .m_926b4011:disabled + .m_9307d992, .m_926b4011[data-disabled] + .m_9307d992 { --switch-bg: var(--switch-disabled-color); --switch-cursor: not-allowed; } [data-mantine-color-scheme='light'] .m_9307d992 { --switch-bg: var(--mantine-color-gray-3); --switch-text-color: var(--mantine-color-gray-6); } [data-mantine-color-scheme='dark'] .m_9307d992 { --switch-bg: var(--mantine-color-dark-5); --switch-text-color: var(--mantine-color-dark-1); } .m_9307d992[data-label-position='left'] { --switch-order: 2; } .m_93039a1d { position: absolute; z-index: 1; border-radius: var(--switch-radius); display: flex; background-color: var(--switch-thumb-bg, var(--mantine-color-white)); height: var(--switch-thumb-size); width: var(--switch-thumb-size); inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding)); transition: inset-inline-start 150ms ease; } .m_93039a1d:where([data-with-thumb-indicator])::before { content: ''; width: 40%; height: 40%; background-color: var(--switch-bg); position: absolute; border-radius: var(--switch-radius); top: 50%; left: 50%; transform: translate(-50%, -50%); } .m_93039a1d > * { margin: auto; } .m_926b4011:checked + * > .m_93039a1d { --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding)); } .m_926b4011:disabled + * > .m_93039a1d, .m_926b4011[data-disabled] + * > .m_93039a1d { --switch-thumb-bg: var(--switch-thumb-bg-disabled); } [data-mantine-color-scheme='light'] .m_93039a1d { --switch-thumb-bg-disabled: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_93039a1d { --switch-thumb-bg-disabled: var(--mantine-color-dark-3); } .m_8277e082 { height: 100%; display: grid; place-content: center; min-width: calc(var(--switch-width) - var(--switch-thumb-size)); padding-inline: var(--switch-track-label-padding); margin-inline-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding)); transition: margin 150ms ease; } .m_926b4011:checked + * > .m_8277e082 { margin-inline-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding)); margin-inline-start: 0; } .m_b23fa0ef { width: 100%; border-collapse: collapse; border-spacing: 0; line-height: var(--mantine-line-height); font-size: var(--mantine-font-size-sm); table-layout: var(--table-layout, auto); caption-side: var(--table-caption-side, bottom); border: none; } :where([data-mantine-color-scheme='light']) .m_b23fa0ef { --table-hover-color: var(--mantine-color-gray-1); --table-striped-color: var(--mantine-color-gray-0); --table-border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_b23fa0ef { --table-hover-color: var(--mantine-color-dark-5); --table-striped-color: var(--mantine-color-dark-6); --table-border-color: var(--mantine-color-dark-4); } .m_b23fa0ef:where([data-with-table-border]) { border: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color); } .m_b23fa0ef:where([data-tabular-nums]) { font-variant-numeric: tabular-nums; } .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) { font-weight: 500; } :where([data-mantine-color-scheme='light']) .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) { background-color: var(--mantine-color-dark-6); } .m_4e7aa4f3 { text-align: left; } :where([dir="rtl"]) .m_4e7aa4f3 { text-align: right; } .m_4e7aa4fd { border-bottom: none; background-color: transparent; } @media (hover: hover) { .m_4e7aa4fd:hover:where([data-hover]) { background-color: var(--tr-hover-bg); } } @media (hover: none) { .m_4e7aa4fd:active:where([data-hover]) { background-color: var(--tr-hover-bg); } } .m_4e7aa4fd:where([data-with-row-border]) { border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color); } .m_4e7aa4ef, .m_4e7aa4f3 { padding: var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs)); } .m_4e7aa4ef:where([data-with-column-border]:not(:last-child)), .m_4e7aa4f3:where([data-with-column-border]:not(:last-child)) { border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color); } .m_b2404537 > :where(tr):where([data-with-row-border]:last-of-type) { border-bottom: none; } .m_b2404537 > :where(tr):where([data-striped='odd']:nth-of-type(odd)) { background-color: var(--table-striped-color); } .m_b2404537 > :where(tr):where([data-striped='even']:nth-of-type(even)) { background-color: var(--table-striped-color); } .m_b2404537 > :where(tr)[data-hover] { --tr-hover-bg: var(--table-highlight-on-hover-color, var(--table-hover-color)); } .m_b242d975 { top: var(--table-sticky-header-offset, 0); z-index: 3; } .m_b242d975:where([data-sticky]) { position: sticky; } .m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3) { position: sticky; top: var(--table-sticky-header-offset, 0); background-color: var(--mantine-color-body); } :where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 { top: initial; } .m_9e5a3ac7 { color: var(--mantine-color-dimmed); } .m_9e5a3ac7:where([data-side='top']) { margin-bottom: var(--mantine-spacing-xs); } .m_9e5a3ac7:where([data-side='bottom']) { margin-top: var(--mantine-spacing-xs); } .m_a100c15 { overflow-x: var(--table-overflow); } .m_62259741 { min-width: var(--table-min-width); max-height: var(--table-max-height); } .m_bcaa9990 { display: flex; flex-direction: column; --toc-depth-offset: 0.8em; } .m_375a65ef { display: block; padding: 0.3em 0.8em; font-size: var(--toc-size, var(--mantine-font-size-md)); border-radius: var(--toc-radius, var(--mantine-radius-default)); padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) { background-color: var(--mantine-color-dark-5); } } .m_375a65ef:where([data-active]) { background-color: var(--toc-bg); color: var(--toc-color); } [data-mantine-color-scheme='light'] .m_89d60db1 { --tab-border-color: var(--mantine-color-gray-3); } [data-mantine-color-scheme='dark'] .m_89d60db1 { --tab-border-color: var(--mantine-color-dark-4); } .m_89d60db1 { display: var(--tabs-display); flex-direction: var(--tabs-flex-direction); --tabs-list-direction: row; --tabs-panel-grow: unset; --tabs-display: block; --tabs-flex-direction: row; --tabs-list-border-width: 0; --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0; --tabs-list-gap: unset; --tabs-list-line-bottom: 0; --tabs-list-line-top: unset; --tabs-list-line-start: 0; --tabs-list-line-end: 0; --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0; --tab-border-width: 0 0 var(--tabs-list-border-width) 0; } .m_89d60db1[data-inverted] { --tabs-list-line-bottom: unset; --tabs-list-line-top: 0; --tab-radius: 0 0 var(--tabs-radius) var(--tabs-radius); --tab-border-width: var(--tabs-list-border-width) 0 0 0; } .m_89d60db1[data-inverted] .m_576c9d4::before { top: 0; bottom: unset; } .m_89d60db1[data-orientation='vertical'] { --tabs-list-line-start: unset; --tabs-list-line-end: 0; --tabs-list-line-top: 0; --tabs-list-line-bottom: 0; --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0; --tab-border-width: 0 var(--tabs-list-border-width) 0 0; --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius); --tabs-list-direction: column; --tabs-panel-grow: 1; --tabs-display: flex; } [dir="rtl"] .m_89d60db1[data-orientation='vertical'] { --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width); --tab-border-width: 0 0 0 var(--tabs-list-border-width); --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0; } .m_89d60db1[data-orientation='vertical'][data-placement='right'] { --tabs-flex-direction: row-reverse; --tabs-list-line-start: 0; --tabs-list-line-end: unset; --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width); --tab-border-width: 0 0 0 var(--tabs-list-border-width); --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0; } [dir="rtl"] .m_89d60db1[data-orientation='vertical'][data-placement='right'] { --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0; --tab-border-width: 0 var(--tabs-list-border-width) 0 0; --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius); } .m_89d60db1[data-variant='default'] { --tabs-list-border-width: calc(0.125rem * var(--mantine-scale)); } [data-mantine-color-scheme='light'] .m_89d60db1[data-variant='default'] { --tab-hover-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_89d60db1[data-variant='default'] { --tab-hover-color: var(--mantine-color-dark-6); } .m_89d60db1[data-variant='outline'] { --tabs-list-border-width: calc(0.0625rem * var(--mantine-scale)); } .m_89d60db1[data-variant='pills'] { --tabs-list-gap: calc(var(--mantine-spacing-sm) / 2); } [data-mantine-color-scheme='light'] .m_89d60db1[data-variant='pills'] { --tab-hover-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_89d60db1[data-variant='pills'] { --tab-hover-color: var(--mantine-color-dark-6); } .m_89d33d6d { display: flex; flex-wrap: wrap; justify-content: var(--tabs-justify, flex-start); flex-direction: var(--tabs-list-direction); gap: var(--tabs-list-gap); } .m_89d33d6d:where([data-grow]) .m_4ec4dce6 { flex: 1; } .m_b0c91715 { flex-grow: var(--tabs-panel-grow); } .m_4ec4dce6 { position: relative; padding: var(--mantine-spacing-xs) var(--mantine-spacing-md); font-size: var(--mantine-font-size-sm); white-space: nowrap; z-index: 0; display: flex; align-items: center; line-height: 1; user-select: none; } .m_4ec4dce6:where(:disabled, [data-disabled]) { opacity: 0.5; cursor: not-allowed; } .m_4ec4dce6:focus { z-index: 1; } .m_fc420b1f { display: flex; align-items: center; justify-content: center; } .m_fc420b1f:where([data-position='left']:not(:only-child)) { margin-inline-end: var(--mantine-spacing-xs); } .m_fc420b1f:where([data-position='right']:not(:only-child)) { margin-inline-start: var(--mantine-spacing-xs); } .m_42bbd1ae { flex: 1; text-align: center; } /*************************************** default variant ***************************************/ .m_576c9d4 { position: relative; } .m_576c9d4::before { content: ''; position: absolute; border: 1px solid var(--tab-border-color); bottom: var(--tabs-list-line-bottom); inset-inline-start: var(--tabs-list-line-start); inset-inline-end: var(--tabs-list-line-end); top: var(--tabs-list-line-top); } .m_539e827b { border-radius: var(--tab-radius); border-width: var(--tab-border-width); border-style: solid; border-color: transparent; background-color: transparent; } .m_539e827b:where([data-active]) { border-color: var(--tabs-color); } @media (hover: hover) { .m_539e827b:hover { background-color: var(--tab-hover-color); } .m_539e827b:hover:where(:not([data-active])) { border-color: var(--tab-border-color); } } @media (hover: none) { .m_539e827b:active { background-color: var(--tab-hover-color); } .m_539e827b:active:where(:not([data-active])) { border-color: var(--tab-border-color); } } @media (hover: hover) { .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover { background-color: transparent; } } @media (hover: none) { .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active { background-color: transparent; } } /*************************************** outline variant ***************************************/ .m_6772fbd5 { position: relative; } .m_6772fbd5::before { content: ''; position: absolute; border-color: var(--tab-border-color); border-width: var(--tabs-list-border-size); border-style: solid; bottom: var(--tabs-list-line-bottom); inset-inline-start: var(--tabs-list-line-start); inset-inline-end: var(--tabs-list-line-end); top: var(--tabs-list-line-top); } .m_b59ab47c { border-top: calc(0.0625rem * var(--mantine-scale)) solid transparent; border-bottom: calc(0.0625rem * var(--mantine-scale)) solid transparent; border-right: calc(0.0625rem * var(--mantine-scale)) solid transparent; border-left: calc(0.0625rem * var(--mantine-scale)) solid transparent; border-top-color: var(--tab-border-top-color); border-bottom-color: var(--tab-border-bottom-color); border-radius: var(--tab-radius); position: relative; --tab-border-bottom-color: transparent; --tab-border-top-color: transparent; --tab-border-inline-end-color: transparent; --tab-border-inline-start-color: transparent; } .m_b59ab47c:where([data-active])::before { content: ''; position: absolute; background-color: var(--tab-border-color); bottom: var(--tab-before-bottom, calc(-0.0625rem * var(--mantine-scale))); left: var(--tab-before-left, calc(-0.0625rem * var(--mantine-scale))); right: var(--tab-before-right, auto); top: var(--tab-before-top, auto); width: calc(0.0625rem * var(--mantine-scale)); height: calc(0.0625rem * var(--mantine-scale)); } .m_b59ab47c:where([data-active])::after { content: ''; position: absolute; background-color: var(--tab-border-color); bottom: var(--tab-after-bottom, calc(-0.0625rem * var(--mantine-scale))); right: var(--tab-after-right, calc(-0.0625rem * var(--mantine-scale))); left: var(--tab-after-left, auto); top: var(--tab-after-top, auto); width: calc(0.0625rem * var(--mantine-scale)); height: calc(0.0625rem * var(--mantine-scale)); } .m_b59ab47c:where([data-active]) { border-top-color: var(--tab-border-top-color); border-bottom-color: var(--tab-border-bottom-color); border-inline-start-color: var(--tab-border-inline-start-color); border-inline-end-color: var(--tab-border-inline-end-color); --tab-border-top-color: var(--tab-border-color); --tab-border-inline-start-color: var(--tab-border-color); --tab-border-inline-end-color: var(--tab-border-color); --tab-border-bottom-color: var(--mantine-color-body); } .m_b59ab47c:where([data-active])[data-inverted] { --tab-border-bottom-color: var(--tab-border-color); --tab-border-top-color: var(--mantine-color-body); --tab-before-bottom: auto; --tab-before-top: calc(-0.0625rem * var(--mantine-scale)); --tab-after-bottom: auto; --tab-after-top: calc(-0.0625rem * var(--mantine-scale)); } .m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='left'] { --tab-border-inline-end-color: var(--mantine-color-body); --tab-border-inline-start-color: var(--tab-border-color); --tab-border-bottom-color: var(--tab-border-color); --tab-before-right: calc(-0.0625rem * var(--mantine-scale)); --tab-before-left: auto; --tab-before-bottom: auto; --tab-before-top: calc(-0.0625rem * var(--mantine-scale)); --tab-after-left: auto; --tab-after-right: calc(-0.0625rem * var(--mantine-scale)); } [dir="rtl"] .m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='left'] { --tab-before-right: auto; --tab-before-left: calc(-0.0625rem * var(--mantine-scale)); --tab-after-left: calc(-0.0625rem * var(--mantine-scale)); --tab-after-right: auto; } .m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='right'] { --tab-border-inline-start-color: var(--mantine-color-body); --tab-border-inline-end-color: var(--tab-border-color); --tab-border-bottom-color: var(--tab-border-color); --tab-before-left: calc(-0.0625rem * var(--mantine-scale)); --tab-before-right: auto; --tab-before-bottom: auto; --tab-before-top: calc(-0.0625rem * var(--mantine-scale)); --tab-after-right: auto; --tab-after-left: calc(-0.0625rem * var(--mantine-scale)); } [dir="rtl"] .m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='right'] { --tab-before-left: auto; --tab-before-right: calc(-0.0625rem * var(--mantine-scale)); --tab-after-right: calc(-0.0625rem * var(--mantine-scale)); --tab-after-left: auto; } /*************************************** pills variant ***************************************/ .m_c3381914 { border-radius: var(--tabs-radius); background-color: var(--tab-bg); color: var(--tab-color); --tab-bg: transparent; --tab-color: inherit; } @media (hover: hover) { .m_c3381914:not([data-disabled]):hover { --tab-bg: var(--tab-hover-color); } } @media (hover: none) { .m_c3381914:not([data-disabled]):active { --tab-bg: var(--tab-hover-color); } } .m_c3381914[data-active][data-active] { --tab-bg: var(--tabs-color); --tab-color: var(--tabs-text-color, var(--mantine-color-white)); } @media (hover: hover) { .m_c3381914[data-active][data-active]:hover { --tab-bg: var(--tabs-color); } } @media (hover: none) { .m_c3381914[data-active][data-active]:active { --tab-bg: var(--tabs-color); } } .m_7341320d { --ti-size-xs: calc(1.125rem * var(--mantine-scale)); --ti-size-sm: calc(1.375rem * var(--mantine-scale)); --ti-size-md: calc(1.75rem * var(--mantine-scale)); --ti-size-lg: calc(2.125rem * var(--mantine-scale)); --ti-size-xl: calc(2.75rem * var(--mantine-scale)); --ti-size: var(--ti-size-md); line-height: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; user-select: none; width: var(--ti-size); height: var(--ti-size); min-width: var(--ti-size); min-height: var(--ti-size); border-radius: var(--ti-radius, var(--mantine-radius-default)); background: var(--ti-bg, var(--mantine-primary-color-filled)); color: var(--ti-color, var(--mantine-color-white)); border: var(--ti-bd, 1px solid transparent); } .m_43657ece { --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2); --tl-bullet-size: calc(1.25rem * var(--mantine-scale)); --tl-line-width: calc(0.25rem * var(--mantine-scale)); --tl-radius: calc(62.5rem * var(--mantine-scale)); --tl-color: var(--mantine-primary-color-filled); } .m_43657ece:where([data-align='left']) { padding-inline-start: var(--offset); } .m_43657ece:where([data-align='right']) { padding-inline-end: var(--offset); } .m_2ebe8099 { font-weight: 500; line-height: 1; margin-bottom: calc(var(--mantine-spacing-xs) / 2); } .m_436178ff { --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color); position: relative; color: var(--mantine-color-text); } .m_436178ff::before { content: ''; pointer-events: none; position: absolute; top: 0; left: var(--timeline-line-left, 0); right: var(--timeline-line-right, 0); bottom: calc(var(--mantine-spacing-xl) * -1); border-inline-start: var(--item-border); display: var(--timeline-line-display, none); } .m_43657ece[data-align='left'] .m_436178ff::before { --timeline-line-left: calc(var(--tl-line-width) * -1); --timeline-line-right: auto; } [dir="rtl"] .m_43657ece[data-align='left'] .m_436178ff::before { --timeline-line-left: auto; --timeline-line-right: calc(var(--tl-line-width) * -1); } .m_43657ece[data-align='right'] .m_436178ff::before { --timeline-line-left: auto; --timeline-line-right: calc(var(--tl-line-width) * -1); } [dir="rtl"] .m_43657ece[data-align='right'] .m_436178ff::before { --timeline-line-left: calc(var(--tl-line-width) * -1); --timeline-line-right: auto; } .m_43657ece:where([data-align='left']) .m_436178ff { padding-inline-start: var(--offset); text-align: left; } .m_43657ece:where([data-align='right']) .m_436178ff { padding-inline-end: var(--offset); text-align: right; } :where([data-mantine-color-scheme='light']) .m_436178ff { --item-border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_436178ff { --item-border-color: var(--mantine-color-dark-4); } .m_436178ff:where([data-line-active])::before { border-color: var(--tli-color, var(--tl-color)); } .m_436178ff:where(:not(:last-of-type)) { --timeline-line-display: block; } .m_436178ff:where(:not(:first-of-type)) { margin-top: var(--mantine-spacing-xl); } .m_8affcee1 { width: var(--tl-bullet-size); height: var(--tl-bullet-size); border-radius: var(--tli-radius, var(--tl-radius)); border: var(--tl-line-width) solid; background-color: var(--mantine-color-body); position: absolute; top: 0; display: flex; align-items: center; justify-content: center; color: var(--mantine-color-text); } :where([data-mantine-color-scheme='light']) .m_8affcee1 { border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_8affcee1 { border-color: var(--mantine-color-dark-4); } .m_43657ece:where([data-align='left']) .m_8affcee1 { left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1); right: auto; } :where([dir="rtl"]) .m_43657ece:where([data-align='left']) .m_8affcee1 { left: auto; right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1); } .m_43657ece:where([data-align='right']) .m_8affcee1 { left: auto; right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1); } :where([dir="rtl"]) .m_43657ece:where([data-align='right']) .m_8affcee1 { left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1); right: auto; } .m_8affcee1:where([data-with-child]) { border-width: var(--tl-line-width); } :where([data-mantine-color-scheme='light']) .m_8affcee1:where([data-with-child]) { background-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_8affcee1:where([data-with-child]) { background-color: var(--mantine-color-dark-4); } .m_8affcee1:where([data-active]) { border-color: var(--tli-color, var(--tl-color)); background-color: var(--mantine-color-white); color: var(--tl-icon-color, var(--mantine-color-white)); } .m_8affcee1:where([data-active]):where([data-with-child]) { background-color: var(--tli-color, var(--tl-color)); color: var(--tl-icon-color, var(--mantine-color-white)); } .m_43657ece:where([data-align='left']) .m_540e8f41 { padding-inline-start: var(--offset); text-align: left; } :where([dir="rtl"]) .m_43657ece:where([data-align='left']) .m_540e8f41 { text-align: right; } .m_43657ece:where([data-align='right']) .m_540e8f41 { padding-inline-end: var(--offset); text-align: right; } :where([dir="rtl"]) .m_43657ece:where([data-align='right']) .m_540e8f41 { text-align: left; } .m_8a5d1357 { margin: 0; font-weight: var(--title-fw); font-size: var(--title-fz); line-height: var(--title-lh); font-family: var(--mantine-font-family-headings); text-wrap: var(--title-text-wrap, var(--mantine-heading-text-wrap)); } .m_8a5d1357:where([data-line-clamp]) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--title-line-clamp); -webkit-box-orient: vertical; } .m_f698e191 { --level-offset: var(--mantine-spacing-lg); margin: 0; padding: 0; user-select: none; } .m_75f3ecf { margin: 0; padding: 0; } .m_f6970eb1 { cursor: pointer; list-style: none; margin: 0; padding: 0; outline: 0; } .m_f6970eb1:focus-visible > .m_dc283425 { outline: 2px solid var(--mantine-primary-color-filled); outline-offset: calc(0.125rem * var(--mantine-scale)); } .m_dc283425 { padding-inline-start: var(--label-offset); } :where([data-mantine-color-scheme='light']) .m_dc283425:where([data-selected]) { background-color: var(--mantine-color-gray-1); } :where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) { background-color: var(--mantine-color-dark-5); } .m_d08caa0 :first-child { margin-top: 0; } .m_d08caa0 :last-child { margin-bottom: 0; } .m_d08caa0 :where(h1, h2, h3, h4, h5, h6) { margin-bottom: var(--mantine-spacing-xs); text-wrap: var(--mantine-heading-text-wrap); font-family: var(--mantine-font-family-headings); } .m_d08caa0 :where(h1) { margin-top: calc(1.5 * var(--mantine-spacing-xl)); font-size: var(--mantine-h1-font-size); line-height: var(--mantine-h1-line-height); font-weight: var(--mantine-h1-font-weight); } .m_d08caa0 :where(h2) { margin-top: var(--mantine-spacing-xl); font-size: var(--mantine-h2-font-size); line-height: var(--mantine-h2-line-height); font-weight: var(--mantine-h2-font-weight); } .m_d08caa0 :where(h3) { margin-top: calc(0.8 * var(--mantine-spacing-xl)); font-size: var(--mantine-h3-font-size); line-height: var(--mantine-h3-line-height); font-weight: var(--mantine-h3-font-weight); } .m_d08caa0 :where(h4) { margin-top: calc(0.8 * var(--mantine-spacing-xl)); font-size: var(--mantine-h4-font-size); line-height: var(--mantine-h4-line-height); font-weight: var(--mantine-h4-font-weight); } .m_d08caa0 :where(h5) { margin-top: calc(0.5 * var(--mantine-spacing-xl)); font-size: var(--mantine-h5-font-size); line-height: var(--mantine-h5-line-height); font-weight: var(--mantine-h5-font-weight); } .m_d08caa0 :where(h6) { margin-top: calc(0.5 * var(--mantine-spacing-xl)); font-size: var(--mantine-h6-font-size); line-height: var(--mantine-h6-line-height); font-weight: var(--mantine-h6-font-weight); } .m_d08caa0 :where(img) { max-width: 100%; margin-bottom: var(--mantine-spacing-xs); } .m_d08caa0 :where(p) { margin-top: 0; margin-bottom: var(--mantine-spacing-lg); } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(mark) { background-color: var(--mantine-color-yellow-2); color: inherit; } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(mark) { background-color: var(--mantine-color-yellow-5); color: var(--mantine-color-black); } .m_d08caa0 :where(a) { color: var(--mantine-color-anchor); text-decoration: none; } @media (hover: hover) { .m_d08caa0 :where(a):hover { text-decoration: underline; } } @media (hover: none) { .m_d08caa0 :where(a):active { text-decoration: underline; } } .m_d08caa0 :where(hr) { margin-top: var(--mantine-spacing-md); margin-bottom: var(--mantine-spacing-md); border: 0; border-top: calc(0.0625rem * var(--mantine-scale)) solid; } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(hr) { border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(hr) { border-color: var(--mantine-color-dark-3); } .m_d08caa0 :where(pre) { padding: var(--mantine-spacing-xs); line-height: var(--mantine-line-height); margin: 0; margin-top: var(--mantine-spacing-md); margin-bottom: var(--mantine-spacing-md); overflow-x: auto; font-family: var(--mantine-font-family-monospace); font-size: var(--mantine-font-size-xs); border-radius: var(--mantine-radius-sm); } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(pre) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(pre) { background-color: var(--mantine-color-dark-8); } .m_d08caa0 :where(pre) :where(code) { background-color: transparent; padding: 0; border-radius: 0; color: inherit; border: 0; } .m_d08caa0 :where(kbd) { --kbd-fz: calc(0.75rem * var(--mantine-scale)); --kbd-padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale)); font-family: var(--mantine-font-family-monospace); line-height: var(--mantine-line-height); font-weight: 700; padding: var(--kbd-padding); font-size: var(--kbd-fz); border-radius: var(--mantine-radius-sm); border: calc(0.0625rem * var(--mantine-scale)) solid; border-bottom-width: calc(0.1875rem * var(--mantine-scale)); } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(kbd) { border-color: var(--mantine-color-gray-3); color: var(--mantine-color-gray-7); background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(kbd) { border-color: var(--mantine-color-dark-3); color: var(--mantine-color-dark-0); background-color: var(--mantine-color-dark-5); } .m_d08caa0 :where(code) { line-height: var(--mantine-line-height); padding: calc(0.0625rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale)); border-radius: var(--mantine-radius-sm); font-family: var(--mantine-font-family-monospace); font-size: var(--mantine-font-size-xs); } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(code) { background-color: var(--mantine-color-gray-0); color: var(--mantine-color-black); } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(code) { background-color: var(--mantine-color-dark-5); color: var(--mantine-color-white); } .m_d08caa0 :where(ul, ol):not([data-type='taskList']) { margin-bottom: var(--mantine-spacing-md); padding-inline-start: var(--mantine-spacing-xl); list-style-position: outside; } .m_d08caa0 :where(table) { width: 100%; border-collapse: collapse; caption-side: bottom; margin-bottom: var(--mantine-spacing-md); } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(table) { --table-border-color: var(--mantine-color-gray-3); } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(table) { --table-border-color: var(--mantine-color-dark-4); } .m_d08caa0 :where(table) :where(caption) { margin-top: var(--mantine-spacing-xs); font-size: var(--mantine-font-size-sm); color: var(--mantine-color-dimmed); } .m_d08caa0 :where(table) :where(th) { text-align: left; font-weight: bold; font-size: var(--mantine-font-size-sm); padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); } .m_d08caa0 :where(table) :where(thead th) { border-bottom: calc(0.0625rem * var(--mantine-scale)) solid; border-color: var(--table-border-color); } .m_d08caa0 :where(table) :where(tfoot th) { border-top: calc(0.0625rem * var(--mantine-scale)) solid; border-color: var(--table-border-color); } .m_d08caa0 :where(table) :where(td) { padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); border-bottom: calc(0.0625rem * var(--mantine-scale)) solid; border-color: var(--table-border-color); font-size: var(--mantine-font-size-sm); } .m_d08caa0 :where(table) :where(tr:last-of-type td) { border-bottom: 0; } .m_d08caa0 :where(blockquote) { font-size: var(--mantine-font-size-lg); line-height: var(--mantine-line-height); margin: var(--mantine-spacing-md) 0; border-radius: var(--mantine-radius-sm); padding: var(--mantine-spacing-md) var(--mantine-spacing-lg); } :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(blockquote) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(blockquote) { background-color: var(--mantine-color-dark-8); } .m_468e7eda { padding-top: 0; padding-bottom: 0; appearance: none; } .m_468e7eda::-webkit-calendar-picker-indicator { display: none; } .m_468e7eda::-webkit-clear-button { display: none; } .m_468e7eda::-webkit-datetime-edit-hour-field, .m_468e7eda::-webkit-datetime-edit-minute-field, .m_468e7eda::-webkit-datetime-edit-second-field, .m_468e7eda::-webkit-datetime-edit-ampm-field { padding-top: 0; max-height: calc(1.875rem * var(--mantine-scale)); display: inline; } .m_468e7eda::-webkit-datetime-edit-hour-field:focus, .m_468e7eda::-webkit-datetime-edit-minute-field:focus, .m_468e7eda::-webkit-datetime-edit-second-field:focus, .m_468e7eda::-webkit-datetime-edit-ampm-field:focus { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } .m_7a8f1e6d { display: flex; align-items: center; height: 100%; overflow: hidden; } :where([dir="rtl"]) .m_7a8f1e6d { flex-direction: row-reverse; } .m_d6bb0a54 { display: flex; align-items: center; height: calc(var(--input-height) - 15px); } .m_b97ecb26 { display: flex; flex-direction: column; } .m_31fe42f9 { display: flex; gap: calc(0.25rem * var(--mantine-scale)); } .m_9c4817c3 { padding: calc(0.25rem * var(--mantine-scale)); } .m_154c536b { text-align: center; width: 2.5em; height: 2em; border-radius: var(--mantine-radius-default); font-size: var(--control-font-size, var(--mantine-font-size-sm)); } .m_154c536b:where([data-active]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } @media (hover: hover) { .m_154c536b:hover:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_154c536b:hover:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_154c536b:hover:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } @media (hover: none) { .m_154c536b:active:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_154c536b:active:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_154c536b:active:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } .m_7be09d0c { text-align: center; height: 2em; padding-inline: 0.5em; border-radius: var(--mantine-radius-default); font-size: var(--control-font-size, var(--mantine-font-size-sm)); } .m_7be09d0c:where([data-active]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } @media (hover: hover) { .m_7be09d0c:hover:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_7be09d0c:hover:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_7be09d0c:hover:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } @media (hover: none) { .m_7be09d0c:active:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_7be09d0c:active:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_7be09d0c:active:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } .m_7d00001d + .m_7d00001d { margin-top: var(--mantine-spacing-sm); } .m_d8d918d7 { margin-bottom: calc(0.25rem * var(--mantine-scale)); color: var(--mantine-color-dimmed); font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px); font-weight: 500; display: flex; align-items: center; padding-inline-start: calc(0.4375rem * var(--mantine-scale)); } .m_d8d918d7::after { content: ''; width: 100%; height: calc(0.0625rem * var(--mantine-scale)); flex: 1; margin-inline-start: var(--mantine-spacing-xs); } :where([data-mantine-color-scheme='light']) .m_d8d918d7::after { background-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_d8d918d7::after { background-color: var(--mantine-color-dark-4); } .m_6b43ba88 { width: calc(2ch + 0.3em); caret-color: transparent; font-variant-numeric: tabular-nums; position: relative; height: 100%; line-height: 1; padding-inline: 0.15em; border: 0; text-align: center; text-align-last: center; background-color: transparent; color: var(--input-color); border-radius: calc(0.125rem * var(--mantine-scale)); appearance: none; } .m_6b43ba88:where([data-am-pm]) { width: calc(3ch + 0.3em); } .m_6b43ba88:where(:disabled) { cursor: not-allowed; } .m_6b43ba88::selection { background-color: transparent; } .m_6b43ba88::placeholder { opacity: 1; color: inherit; } .m_6b43ba88:focus { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); outline: 0; } .m_6b43ba88:focus::placeholder { color: var(--mantine-color-white); } .m_396ce5cb { --day-size-xs: calc(1.875rem * var(--mantine-scale)); --day-size-sm: calc(2.25rem * var(--mantine-scale)); --day-size-md: calc(2.625rem * var(--mantine-scale)); --day-size-lg: calc(3rem * var(--mantine-scale)); --day-size-xl: calc(3.375rem * var(--mantine-scale)); --day-size: var(--day-size-sm); width: var(--day-size, var(--day-size-sm)); height: var(--day-size, var(--day-size-sm)); font-size: calc(var(--day-size) / 2.8); display: inline-flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; background-color: transparent; border-radius: var(--mantine-radius-default); color: var(--mantine-color-text); opacity: 1; } @media (hover: hover) { [data-mantine-color-scheme='light'] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { [data-mantine-color-scheme='light'] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-dark-5); } } .m_396ce5cb:where([data-static]) { user-select: auto; cursor: default; } .m_396ce5cb:where([data-weekend]) { color: var(--mantine-color-red-6); } .m_396ce5cb:where([data-outside]) { color: var(--mantine-color-dimmed); opacity: 0.5; } .m_396ce5cb:where(:disabled, [data-disabled]) { color: var(--mantine-color-disabled-color); cursor: not-allowed; opacity: 0.5; } .m_396ce5cb:where([data-hidden]) { display: none; } :where([data-mantine-color-scheme='light']) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) { border: 1px solid var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) { border: 1px solid var(--mantine-color-dark-4); } .m_396ce5cb:where([data-in-range]) { background-color: var(--mantine-primary-color-light-hover); border-radius: 0; } @media (hover: hover) { .m_396ce5cb:where([data-in-range]):hover:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-light); } } @media (hover: none) { .m_396ce5cb:where([data-in-range]):active:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-light); } } .m_396ce5cb:where([data-first-in-range]) { border-radius: 0; border-start-start-radius: var(--mantine-radius-default); border-end-start-radius: var(--mantine-radius-default); } .m_396ce5cb:where([data-last-in-range]) { border-radius: 0; border-end-end-radius: var(--mantine-radius-default); border-start-end-radius: var(--mantine-radius-default); } .m_396ce5cb:where([data-last-in-range][data-first-in-range]) { border-radius: var(--mantine-radius-default); } .m_396ce5cb:where([data-selected]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-primary-color-contrast); } @media (hover: hover) { .m_396ce5cb:where([data-selected]):hover:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_396ce5cb:where([data-selected]):active:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-filled-hover); } } .m_18a3eca { color: var(--mantine-color-dimmed); font-weight: normal; font-size: var(--wr-fz, var(--mantine-font-size-sm)); text-transform: capitalize; padding-bottom: calc(var(--wr-spacing, var(--mantine-spacing-sm)) / 2); } .m_cc9820d3 { border-collapse: collapse; table-layout: fixed; } .m_8f457cd5 { padding: 0; } .m_8f457cd5:where([data-with-spacing]) { padding: calc(0.03125rem * var(--mantine-scale)); } .m_6cff9dea { --wn-size-xs: calc(1.875rem * var(--mantine-scale)); --wn-size-sm: calc(2.25rem * var(--mantine-scale)); --wn-size-md: calc(2.625rem * var(--mantine-scale)); --wn-size-lg: calc(3rem * var(--mantine-scale)); --wn-size-xl: calc(3.375rem * var(--mantine-scale)); color: var(--mantine-color-dimmed); font-weight: normal; font-size: calc(var(--wn-size, var(--wn-size-sm)) / 2.8); text-align: center; width: var(--wn-size, var(--wn-size-sm)); } .m_dc6a3c71 { --dpc-size-xs: calc(1.875rem * var(--mantine-scale)); --dpc-size-sm: calc(2.25rem * var(--mantine-scale)); --dpc-size-md: calc(2.625rem * var(--mantine-scale)); --dpc-size-lg: calc(3rem * var(--mantine-scale)); --dpc-size-xl: calc(3.375rem * var(--mantine-scale)); --dpc-size: var(--dpc-size-sm); font-size: var(--dpc-fz, var(--mantine-font-size-sm)); height: var(--dpc-size); width: calc((var(--dpc-size) * 7) / 3 + calc(0.09375rem * var(--mantine-scale))); display: flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; background-color: transparent; color: var(--mantine-color-text); opacity: 1; border-radius: var(--mantine-radius-default); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-dark-5); } } .m_dc6a3c71:where(:disabled, [data-disabled]) { color: var(--mantine-color-disabled-color); cursor: not-allowed; opacity: 0.5; } .m_dc6a3c71:where([data-selected]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-primary-color-contrast, var(--mantine-color-white)); } @media (hover: hover) { .m_dc6a3c71:where([data-selected]):hover { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_dc6a3c71:where([data-selected]):active { background-color: var(--mantine-primary-color-filled-hover); } } .m_dc6a3c71:where([data-in-range]) { background-color: var(--mantine-primary-color-light-hover); border-radius: 0; } @media (hover: hover) { .m_dc6a3c71:where([data-in-range]):hover { background-color: var(--mantine-primary-color-light); } } @media (hover: none) { .m_dc6a3c71:where([data-in-range]):active { background-color: var(--mantine-primary-color-light); } } .m_dc6a3c71:where([data-first-in-range]) { border-radius: 0; border-start-start-radius: var(--mantine-radius-default); border-end-start-radius: var(--mantine-radius-default); } .m_dc6a3c71:where([data-last-in-range]) { border-radius: 0; border-end-end-radius: var(--mantine-radius-default); border-start-end-radius: var(--mantine-radius-default); } .m_dc6a3c71:where([data-first-in-range][data-last-in-range]) { border-radius: var(--mantine-radius-default); } .m_9206547b { border-collapse: collapse; border-width: 0; } .m_c5a19c7d { padding: 0; } .m_c5a19c7d:where([data-with-spacing]) { padding: calc(0.03125rem * var(--mantine-scale)); } .m_2a6c32d { border-collapse: collapse; border-width: 0; cursor: pointer; } .m_fe27622f { padding: 0; } .m_fe27622f:where([data-with-spacing]) { padding: calc(0.03125rem * var(--mantine-scale)); } .m_730a79ed { --dch-control-size-xs: calc(1.875rem * var(--mantine-scale)); --dch-control-size-sm: calc(2.25rem * var(--mantine-scale)); --dch-control-size-md: calc(2.625rem * var(--mantine-scale)); --dch-control-size-lg: calc(3rem * var(--mantine-scale)); --dch-control-size-xl: calc(3.375rem * var(--mantine-scale)); --dch-control-size: var(--dch-control-size-sm); display: flex; max-width: calc(var(--dch-control-size) * 8 + calc(0.4375rem * var(--mantine-scale))); margin-bottom: var(--mantine-spacing-xs); } .m_f6645d97, .m_2351eeb0 { height: var(--dch-control-size); border-radius: var(--mantine-radius-default); display: flex; justify-content: center; align-items: center; user-select: none; opacity: 1; cursor: pointer; } .m_f6645d97:where([data-static]), .m_2351eeb0:where([data-static]) { cursor: default; } @media (hover: hover) { [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-dark-5); } } .m_f6645d97:where(:disabled, [data-disabled]), .m_2351eeb0:where(:disabled, [data-disabled]) { opacity: 0.2; cursor: not-allowed; } .m_2351eeb0 { width: var(--dch-control-size); } .m_f6645d97 { flex: 1; font-size: var(--dch-fz, var(--mantine-font-size-sm)); font-weight: 500; text-transform: capitalize; } .m_367dc749 { width: 60%; height: 60%; } .m_367dc749:where([data-direction='next']) { transform: rotate(270deg); } :where([dir="rtl"]) .m_367dc749:where([data-direction='next']) { transform: rotate(90deg); } .m_367dc749:where([data-direction='previous']) { transform: rotate(90deg); } :where([dir="rtl"]) .m_367dc749:where([data-direction='previous']) { transform: rotate(270deg); } .m_30b26e33 { display: flex; gap: var(--mantine-spacing-md); } .m_6fa5e2aa { cursor: pointer; line-height: unset; } .m_6fa5e2aa:where([data-read-only]) { cursor: default; } .m_765a40cf { display: flex; font-size: var(--preset-font-size); } .m_d6a681e1 { display: flex; flex-direction: column; border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid; padding-inline-end: 0.5em; margin-inline-end: 0.5em; } :where([data-mantine-color-scheme='light']) .m_d6a681e1 { border-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_d6a681e1 { border-color: var(--mantine-color-dark-5); } .m_acd30b22 { padding: 0.52em 0.8em; border-radius: var(--mantine-radius-default); font-size: var(--preset-font-size); white-space: nowrap; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_acd30b22:hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_acd30b22:hover { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_acd30b22:active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_acd30b22:active { background-color: var(--mantine-color-dark-5); } } .m_208d2562 { display: flex; align-items: stretch; margin-top: var(--mantine-spacing-md); } .m_62ee059 { flex: 1; margin-inline-end: var(--mantine-spacing-md); } .m_ac3f4d63 { text-align: center; padding-inline: 1em; padding-block: 0.25em; border: 1px solid var(--mantine-color-default-border); background-color: var(--mantine-color-default); color: var(--mantine-color-default-color); border-radius: var(--time-grid-radius, var(--mantine-radius-default)); font-size: var(--time-grid-fz, var(--mantine-font-size-sm)); } @media (hover: hover) { .m_ac3f4d63:hover:where(:not([data-disabled])) { background-color: var(--mantine-color-default-hover); } } @media (hover: none) { .m_ac3f4d63:active:where(:not([data-disabled])) { background-color: var(--mantine-color-default-hover); } } .m_ac3f4d63:where([data-active]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); border-color: transparent; } @media (hover: hover) { .m_ac3f4d63:where([data-active]):hover:where(:not([data-disabled])) { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_ac3f4d63:where([data-active]):active:where(:not([data-disabled])) { background-color: var(--mantine-primary-color-filled-hover); } } .m_ac3f4d63:where(:disabled, [data-disabled]) { opacity: 0.5; cursor: not-allowed; } /*------------------------------------*\ # 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 { list-style-type: none; } .list-pagination li a { color: rgb(var(--color-gray-500)); padding: 10px; letter-spacing: 0.03em; font-size: 10pt; } .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-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-teal-100 { background-color: rgb(var(--color-extra-teal-100)); } .color-extra-teal-100 { color: rgb(var(--color-extra-teal-100)); } .fill-color-extra-teal-100 { fill: rgb(var(--color-extra-teal-100)); } .fill-color-extra-teal-100--hoverable { fill: rgb(var(--color-extra-teal-100)); } .fill-color-extra-teal-100--hoverable:hover { fill: rgb(var(--color-extra-teal-200)); } .stroke-color-extra-teal-100 { stroke: rgb(var(--color-extra-teal-100)); } .stroke-color-extra-teal-100--hoverable { stroke: rgb(var(--color-extra-teal-100)); } .stroke-color-extra-teal-100--hoverable:hover { stroke: rgb(var(--color-extra-teal-200)); } .border-color--extra-teal-100 { border-color: rgb(var(--color-extra-teal-100)) !important; } .bg-extra-teal-200 { background-color: rgb(var(--color-extra-teal-200)); } .color-extra-teal-200 { color: rgb(var(--color-extra-teal-200)); } .fill-color-extra-teal-200 { fill: rgb(var(--color-extra-teal-200)); } .fill-color-extra-teal-200--hoverable { fill: rgb(var(--color-extra-teal-200)); } .fill-color-extra-teal-200--hoverable:hover { fill: rgb(var(--color-extra-teal-300)); } .stroke-color-extra-teal-200 { stroke: rgb(var(--color-extra-teal-200)); } .stroke-color-extra-teal-200--hoverable { stroke: rgb(var(--color-extra-teal-200)); } .stroke-color-extra-teal-200--hoverable:hover { stroke: rgb(var(--color-extra-teal-300)); } .border-color--extra-teal-200 { border-color: rgb(var(--color-extra-teal-200)) !important; } .bg-extra-teal-300 { background-color: rgb(var(--color-extra-teal-300)); } .color-extra-teal-300 { color: rgb(var(--color-extra-teal-300)); } .fill-color-extra-teal-300 { fill: rgb(var(--color-extra-teal-300)); } .fill-color-extra-teal-300--hoverable { fill: rgb(var(--color-extra-teal-300)); } .fill-color-extra-teal-300--hoverable:hover { fill: rgb(var(--color-extra-teal-400)); } .stroke-color-extra-teal-300 { stroke: rgb(var(--color-extra-teal-300)); } .stroke-color-extra-teal-300--hoverable { stroke: rgb(var(--color-extra-teal-300)); } .stroke-color-extra-teal-300--hoverable:hover { stroke: rgb(var(--color-extra-teal-400)); } .border-color--extra-teal-300 { border-color: rgb(var(--color-extra-teal-300)) !important; } .bg-extra-teal-400 { background-color: rgb(var(--color-extra-teal-400)); } .color-extra-teal-400 { color: rgb(var(--color-extra-teal-400)); } .fill-color-extra-teal-400 { fill: rgb(var(--color-extra-teal-400)); } .fill-color-extra-teal-400--hoverable { fill: rgb(var(--color-extra-teal-400)); } .fill-color-extra-teal-400--hoverable:hover { fill: rgb(var(--color-extra-teal-500)); } .stroke-color-extra-teal-400 { stroke: rgb(var(--color-extra-teal-400)); } .stroke-color-extra-teal-400--hoverable { stroke: rgb(var(--color-extra-teal-400)); } .stroke-color-extra-teal-400--hoverable:hover { stroke: rgb(var(--color-extra-teal-500)); } .border-color--extra-teal-400 { border-color: rgb(var(--color-extra-teal-400)) !important; } .bg-extra-teal-500 { background-color: rgb(var(--color-extra-teal-500)); } .color-extra-teal-500 { color: rgb(var(--color-extra-teal-500)); } .fill-color-extra-teal-500 { fill: rgb(var(--color-extra-teal-500)); } .fill-color-extra-teal-500--hoverable { fill: rgb(var(--color-extra-teal-500)); } .fill-color-extra-teal-500--hoverable:hover { fill: rgb(var(--color-extra-teal-600)); } .stroke-color-extra-teal-500 { stroke: rgb(var(--color-extra-teal-500)); } .stroke-color-extra-teal-500--hoverable { stroke: rgb(var(--color-extra-teal-500)); } .stroke-color-extra-teal-500--hoverable:hover { stroke: rgb(var(--color-extra-teal-600)); } .border-color--extra-teal-500 { border-color: rgb(var(--color-extra-teal-500)) !important; } .bg-extra-teal-600 { background-color: rgb(var(--color-extra-teal-600)); } .color-extra-teal-600 { color: rgb(var(--color-extra-teal-600)); } .fill-color-extra-teal-600 { fill: rgb(var(--color-extra-teal-600)); } .fill-color-extra-teal-600--hoverable { fill: rgb(var(--color-extra-teal-600)); } .fill-color-extra-teal-600--hoverable:hover { fill: rgb(var(--color-extra-teal-700)); } .stroke-color-extra-teal-600 { stroke: rgb(var(--color-extra-teal-600)); } .stroke-color-extra-teal-600--hoverable { stroke: rgb(var(--color-extra-teal-600)); } .stroke-color-extra-teal-600--hoverable:hover { stroke: rgb(var(--color-extra-teal-700)); } .border-color--extra-teal-600 { border-color: rgb(var(--color-extra-teal-600)) !important; } .bg-extra-teal-700 { background-color: rgb(var(--color-extra-teal-700)); } .color-extra-teal-700 { color: rgb(var(--color-extra-teal-700)); } .fill-color-extra-teal-700 { fill: rgb(var(--color-extra-teal-700)); } .fill-color-extra-teal-700--hoverable { fill: rgb(var(--color-extra-teal-700)); } .fill-color-extra-teal-700--hoverable:hover { fill: rgb(var(--color-extra-teal-800)); } .stroke-color-extra-teal-700 { stroke: rgb(var(--color-extra-teal-700)); } .stroke-color-extra-teal-700--hoverable { stroke: rgb(var(--color-extra-teal-700)); } .stroke-color-extra-teal-700--hoverable:hover { stroke: rgb(var(--color-extra-teal-800)); } .border-color--extra-teal-700 { border-color: rgb(var(--color-extra-teal-700)) !important; } .bg-extra-teal-800 { background-color: rgb(var(--color-extra-teal-800)); } .color-extra-teal-800 { color: rgb(var(--color-extra-teal-800)); } .fill-color-extra-teal-800 { fill: rgb(var(--color-extra-teal-800)); } .fill-color-extra-teal-800--hoverable { fill: rgb(var(--color-extra-teal-800)); } .fill-color-extra-teal-800--hoverable:hover { fill: rgb(var(--color-extra-teal-900)); } .stroke-color-extra-teal-800 { stroke: rgb(var(--color-extra-teal-800)); } .stroke-color-extra-teal-800--hoverable { stroke: rgb(var(--color-extra-teal-800)); } .stroke-color-extra-teal-800--hoverable:hover { stroke: rgb(var(--color-extra-teal-900)); } .border-color--extra-teal-800 { border-color: rgb(var(--color-extra-teal-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-teal-900: 4, 77, 70; --color-extra-teal-800: 15, 105, 97; --color-extra-teal-700: 30, 134, 124; --color-extra-teal-600: 51, 163, 152; --color-extra-teal-500: 77, 192, 181; --color-extra-teal-400: 111, 208, 198; --color-extra-teal-300: 149, 224, 216; --color-extra-teal-200: 191, 239, 235; --color-extra-teal-100: 237, 255, 253; --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: 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-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-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-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-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-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 { -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; background-color: rgb(var(--color-gray-100)); color: rgb(var(--color-gray-600)); } .modal__radio-buttons__button span { font-size: 1em; line-height: 1.3em; } .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:hover { cursor: pointer; background-color: rgb(var(--color-secondary-100)); } .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__radio-buttons__button.selected i { background-color: rgb(var(--color-success-300)); border: 1px solid rgb(var(--color-success-700)); color: white; } .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; /* For Slicer properties select */ /* For Slicer operators select */ } .pill--small { padding: 1px 2px; line-height: 1em; } .pill .fa { margin: 0; } .pill--noround { border-radius: 0px; } .pill--smallMargin { margin: 0 2px; } .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-extra-teal-300)); color: rgb(var(--color-extra-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--operator { display: flex; align-items: center; justify-content: center; margin-left: 0; margin-right: 6px; width: 20px; height: 14px; border-radius: 5px; padding: 1px 2px; font-size: 65%; } .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--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-teal { color: rgb(var(--color-white)); background-color: rgb(var(--color-extra-teal-500)); border: 1px solid rgb(var(--color-extra-teal-500)); } .pill--o-extra-teal { color: rgb(var(--color-extra-teal-500)); border: 1px solid rgb(var(--color-extra-teal-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)); } .dash3 .pill { padding: 0px 2px; 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; -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.nocursor { cursor: default !important; } .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 { cursor: pointer; } .legends-container .legend--clickable:hover .legend__label { opacity: 1; } .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; } .slide-down-form-section-enter { opacity: 0; max-height: 0; } .slide-down-form-section-enter-active { opacity: 1; max-height: 900px; transition: all 0.2s; } .slide-down-form-section-exit { opacity: 1; max-height: 0; } .slide-down-form-section-exit-active { max-height: 0; opacity: 0; transition: all 0.2s; } .slide-down-form-row-enter { opacity: 0; max-height: 0; padding: 0 0; } .slide-down-form-row-enter-active { opacity: 1; max-height: 150px; padding: 20px 0; transition: all 0.2s; } .slide-down-form-row-exit { opacity: 1; max-height: 150px; padding: 20px 0; } .slide-down-form-row-exit-active { max-height: 0; opacity: 0; padding: 0 0; transition: all 0.2s; } .slide-down-enter { opacity: 0; max-height: 0; } .slide-down-enter-active { opacity: 1; max-height: 100000px; transition: all 0.4s; } .slide-down-exit { opacity: 1; max-height: 1500px; } .slide-down-exit-active { max-height: 0; opacity: 0; transition: all 0.4s; } .dropdown-fade-enter { transform-origin: top; opacity: 0; transform: translateY(-15px) scale(0.9); } .dropdown-fade-enter-active { opacity: 1; transform: translateY(0px); transition: all 0.2s; } .dropdown-fade-exit { opacity: 1; } .dropdown-fade-exit-active { opacity: 0; transition: all 0.2s; } .popup-fade-enter { transform-origin: bottom; opacity: 0; transform: translateY(15px) scale(0.9); } .popup-fade-enter-active { opacity: 1; transform: translateY(0px); transition: all 0.2s; } .popup-fade-exit { opacity: 1; } .popup-fade-exit-active { opacity: 0; transition: all 0.2s; } .slicer-filter-squish-enter { transform-origin: left; opacity: 0; transform: scale(0.9); max-width: 0px; } .slicer-filter-squish-enter-active { opacity: 1; transform: scale(1); max-width: 400px; transition: all 0.4s; } .slicer-filter-squish-exit { opacity: 1; max-width: 400px; } .slicer-filter-squish-exit-active { opacity: 0; max-width: 0px; transition: all 0.4s; } .slicer-gate-fade-enter { opacity: 0; max-height: 0px; } .slicer-gate-fade-enter-active { opacity: 1; transition: all 0.4s; max-height: 1000px; } .slicer-gate-fade-exit { opacity: 1; max-height: 1000px; padding-top: 20px; padding-bottom: 20px; } .slicer-gate-fade-exit-active { opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; transition: all 0.4s; } .slicer-filter-fade-enter { transform-origin: left; opacity: 0; transform: scale(0.1); max-height: 0px; } .slicer-filter-fade-enter-active { opacity: 1; transform: scale(1); transition: all 0.4s; max-height: 100px; } .slicer-filter-fade-exit { opacity: 1; transform-origin: left; max-height: 100px; transform: scale(1); } .slicer-filter-fade-exit-active { opacity: 0; max-height: 0px; transform: scale(0.1); transition: all 0.4s; } .modal-fade-enter { transform-origin: center; opacity: 0; transform: scale(0.8); } .modal-fade-enter-active { opacity: 1; transform: scale(1); transition: all 0.4s; } .modal-fade-exit { transform: scale(1); opacity: 1; } .modal-fade-exit-active { opacity: 0; transform: scale(0.5); transition: all 0.2s; } .overlay-fade-enter { transform-origin: center; opacity: 0; transform: scale(0.8); } .overlay-fade-enter-active { opacity: 1; transform: scale(1); transition: all 0.15s; } .overlay-fade-exit { transform: scale(1); opacity: 1; } .overlay-fade-exit-active { opacity: 0; transform: scale(0.5); transition: all 0.15s; } .dark-mode { /* dash3 */ /* Dashboard card */ /* date picker */ } .dark-mode__copyButton { color: rgb(var(--color-white)); } .dark-mode .AnimatedCheckbox__box { background: transparent; } .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 .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 .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: solid 0.1px rgba(var(--color-gray-700), 0.5); color: rgb(var(--color-extra-violet-dash3-800)); } .dark-mode .RadarChart .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 .RadarChart .apexcharts-tooltip-info span, .dark-mode .RadarChart .apexcharts-tooltip-info h4 { color: rgb(var(--color-extra-lilac-dash3-800)); } .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 .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 { /* Calendar control styles */ } .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 .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)); }