/* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: currentColor; /* 2 */ } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. */ html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Roboto; /* 4 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: 'Roboto Mono'; /* 1 */ font-size: 1em; /* 2 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ } /* Set the default cursor for buttons. */ button, [role='button'] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /** * Do not edit directly * Generated on Thu, 25 Jan 2024 12:56:44 GMT */ :root { --switch-input-transition-timing: ease-in; --switch-input-transition-delay: 0ms; --switch-input-transition-duration: 200ms; --switch-input-transition-property: background-color, padding-left, padding-right; --switch-input-pressed-button-shadow: none; --switch-input-disabled-button-shadow: none; --switch-input-on-large-button-padding-left: 1.125rem; --switch-input-on-medium-button-padding-left: 0.875rem; --switch-input-on-small-button-padding-left: 0.625rem; --switch-input-off-large-button-padding-right: 1.125rem; --switch-input-off-medium-button-padding-right: 0.875rem; --switch-input-off-small-button-padding-right: 0.625rem; --switch-input-large-button-size: 1.25rem; --switch-input-medium-height: 1.25rem; --textarea-medium-icon-size: 1.25rem; --textarea-medium-padding-bottom: 0.625rem; --textarea-medium-padding-top: 0.625rem; --textarea-medium-line-height: 1.25rem; --textarea-medium-font-size: 0.875rem; --typography-overline-text-case: uppercase; --font-weight-black: 900; --font-weight-bold: 700; --font-weight-medium: 500; --font-weight-regular: 400; --font-weight-light: 300; --font-weight-thin: 100; --font-scale-10-line-height: 0.75rem; --font-scale-10-size: 0.5rem; --font-scale-9-line-height: 1rem; --font-scale-9-size: 0.625rem; --font-scale-8-line-height: 1rem; --font-scale-8-size: 0.75rem; --font-scale-7-line-height: 1.25rem; --font-scale-7-size: 0.875rem; --font-scale-6-line-height: 1.5rem; --font-scale-6-size: 1rem; --font-scale-5-line-height: 2rem; --font-scale-5-size: 1.25rem; --font-scale-4-line-height: 2.25rem; --font-scale-4-size: 1.5rem; --font-scale-3-line-height: 3rem; --font-scale-3-size: 2rem; --font-scale-2-line-height: 3.75rem; --font-scale-2-size: 2.5rem; --font-scale-1-line-height: 4.5rem; --font-scale-1-size: 3rem; --font-family-roboto-mono: Roboto Mono; --font-family-roboto: Roboto; --input-medium-icon-size: 1.25rem; --tags-button-background-color: transparent; --tags-unselected-medium-button-padding: none; --tags-medium-padding-right: 0.375rem; --tabs-divider-border-width: 1px; --tabs-small-height: 2.25rem; --tabs-tab-focus-border-type: solid; --tabs-tab-background-color: transparent; --tabs-tab-icon-size: 1.25rem; --spacing-27xl: 24rem; --spacing-26xl: 23rem; --spacing-25xl: 22rem; --spacing-24xl: 21rem; --spacing-23xl: 20rem; --spacing-22xl: 19rem; --spacing-21xl: 18rem; --spacing-20xl: 17rem; --spacing-19xl: 16rem; --spacing-18xl: 15rem; --spacing-17xl: 14rem; --spacing-16xl: 13rem; --spacing-15xl: 12rem; --spacing-14xl: 11rem; --spacing-13xl: 10rem; --spacing-12xl: 9rem; --spacing-11xl: 8rem; --spacing-10xl: 7rem; --spacing-9xl: 6rem; --spacing-8xl: 5.5rem; --spacing-7xl: 5rem; --spacing-6xl: 4.5rem; --spacing-5xl: 4rem; --spacing-4xl: 3.5rem; --spacing-3xl: 3rem; --spacing-xxl: 2.5rem; --spacing-xl: 2rem; --spacing-l: 1.5rem; --spacing-m: 1rem; --spacing-s: 0.75rem; --spacing-xs: 0.5rem; --spacing-xxs: 0.25rem; --spacing-3xs: 0.125rem; --spacing-none: 0rem; --slider-large-mark-secondary-height: 10px; --slider-large-handle-size: 20px; --slider-large-legend-margin: 6px; --slider-medium-mark-secondary-height: 6px; --slider-small-mark-main-height: 6px; --shadow-xl-ultralight: 0 24px 38px 0 hsla(235, 96%, 10%, 0.02), 0 9px 46px 0 hsla(235, 96%, 10%, 0.02), 0 11px 15px 0 hsla(235, 96%, 10%, 0.04); --shadow-xl-light: 0 24px 38px 0 hsla(235, 96%, 10%, 0.04), 0 9px 46px 0 hsla(235, 96%, 10%, 0.04), 0 11px 15px 0 hsla(235, 96%, 10%, 0.08); --shadow-xl-strong: 0 24px 38px 0 hsla(235, 96%, 10%, 0.14), 0 9px 46px 0 hsla(235, 96%, 10%, 0.12), 0 11px 15px 0 hsla(235, 96%, 10%, 0.20); --shadow-l-ultralight: 0 16px 24px 0 hsla(235, 96%, 10%, 0.02), 0 6px 30px 0 hsla(235, 96%, 10%, 0.02), 0 8px 10px 0 hsla(235, 96%, 10%, 0.04); --shadow-l-light: 0 16px 24px 0 hsla(235, 96%, 10%, 0.04), 0 6px 30px 0 hsla(235, 96%, 10%, 0.04), 0 8px 10px 0 hsla(235, 96%, 10%, 0.08); --shadow-l-strong: 0 16px 24px 0 hsla(235, 96%, 10%, 0.14), 0 6px 30px 0 hsla(235, 96%, 10%, 0.12), 0 8px 10px 0 hsla(235, 96%, 10%, 0.20); --shadow-m-ultralight: 0 8px 10px 0 hsla(235, 96%, 10%, 0.02), 0 3px 14px 0 hsla(235, 96%, 10%, 0.02), 0 4px 5px 0 hsla(235, 96%, 10%, 0.04); --shadow-m-light: 0 8px 10px 0 hsla(235, 96%, 10%, 0.04), 0 3px 14px 0 hsla(235, 96%, 10%, 0.04), 0 4px 5px 0 hsla(235, 96%, 10%, 0.08); --shadow-m-strong: 0 8px 10px 0 hsla(235, 96%, 10%, 0.14), 0 3px 14px 0 hsla(235, 96%, 10%, 0.12), 0 4px 5px 0 hsla(235, 96%, 10%, 0.20); --shadow-s-ultralight: 0 2px 4px 0 hsla(235, 96%, 10%, 0.02), 0 4px 5px 0 hsla(235, 96%, 10%, 0.02), 0 1px 10px 0 hsla(235, 96%, 10%, 0.04); --shadow-s-light: 0 2px 4px 0 hsla(235, 96%, 10%, 0.04), 0 4px 5px 0 hsla(235, 96%, 10%, 0.04), 0 1px 10px 0 hsla(235, 96%, 10%, 0.08); --shadow-s-strong: 0 2px 4px 0 hsla(235, 96%, 10%, 0.14), 0 4px 5px 0 hsla(235, 96%, 10%, 0.12), 0 1px 10px 0 hsla(235, 96%, 10%, 0.20); --shadow-xs-ultralight: 0 2px 2px 0 hsla(235, 96%, 10%, 0.02), 0 3px 4px 0 hsla(235, 96%, 10%, 0.02), 0 1px 5px 0 hsla(235, 96%, 10%, 0.04); --shadow-xs-light: 0 2px 2px 0 hsla(235, 96%, 10%, 0.04), 0 3px 4px 0 hsla(235, 96%, 10%, 0.04), 0 1px 5px 0 hsla(235, 96%, 10%, 0.08); --shadow-xs-strong: 0 2px 2px 0 hsla(235, 96%, 10%, 0.14), 0 3px 4px 0 hsla(235, 96%, 10%, 0.12), 0 1px 5px 0 hsla(235, 96%, 10%, 0.20); --radio-large-checked-symbol-size: 1.125rem; --radio-medium-checked-symbol-size: 0.875rem; --radio-medium-input-size: 1.25rem; --radio-small-checked-symbol-size: 0.625rem; --progress-circle-indeterminate-animation-timing-function: linear; --progress-circle-indeterminate-animation-iteration-count: infinite; --progress-circle-indeterminate-animation-duration: 1000ms; --progress-circle-indeterminate-animation-name: loading; --progress-circle-medium-size: 1.25rem; --progress-bar-track-animation-duration: 600ms; --dialog-breakpoint-xlarge-width: 50%; --dialog-breakpoint-large-width: 50%; --dialog-breakpoint-medium-width: 50%; --dialog-breakpoint-small-width: calc(100vw - 32px); --dialog-breakpoint-xsmall-width: calc(100vw - 32px); --dialog-breakpoint-xxsmall-width: calc(100vw - 32px); --dialog-divider-size: 1px; --dialog-max-height: calc(100vh - 16px); --itemlist-item-medium-padding-vertical: 0.625rem; --itemlist-item-active-background-color: transparent; --itemlist-item-disabled-background-color: transparent; --itemlist-item-background-color: transparent; --icon-medium-size: 1.25rem; --header-large-logo-height: 3.25rem; --header-small-logo-height: 1.75rem; --container-2xl: 1536px; --container-xl: 1280px; --container-l: 1024px; --container-m: 768px; --container-s: 640px; --grids-xxsmall-gap: 8px; --grids-xxsmall-margin: 16px; --grids-xxsmall-columns: 4; --grids-xxsmall-max-width: 359px; --grids-xxsmall-min-width: 0px; --grids-xsmall-gap: 8px; --grids-xsmall-margin: 16px; --grids-xsmall-columns: 4; --grids-xsmall-max-width: 639px; --grids-xsmall-min-width: 360px; --grids-small-gap: 16px; --grids-small-margin: 32px; --grids-small-columns: 8; --grids-small-max-width: 767px; --grids-small-min-width: 600px; --grids-medium-gap: 16px; --grids-medium-margin: 32px; --grids-medium-columns: 8; --grids-medium-max-width: 991px; --grids-medium-min-width: 768px; --grids-large-gap: 16px; --grids-large-margin: 32px; --grids-large-columns: 12; --grids-large-max-width: 1279px; --grids-large-min-width: 992px; --grids-xlarge-gap: 16px; --grids-xlarge-margin: 32px; --grids-xlarge-columns: 12; --grids-xlarge-min-width: 1280px; --drawer-large-collapsed-width: 4.5rem; --drawer-large-expanded-width: 20rem; --drawer-medium-collapsed-width: 4rem; --drawer-medium-expanded-width: 15rem; --drawer-small-collapsed-width: 2.875rem; --drawer-small-expanded-width: 12.5rem; --drawer-height: 100vh; --color-primary-900: #01041e; --color-primary-800: #02083c; --color-primary-700: #020b59; --color-primary-600: #030f77; --color-primary-500: #041295; --color-primary-400: #3642aa; --color-primary-300: #6871bf; --color-primary-200: #9ba1d5; --color-primary-100: #cdd0ea; --color-primary-50: #e6e7f4; --color-bluegreen-900: #00221c; --color-bluegreen-800: #004439; --color-bluegreen-700: #006755; --color-bluegreen-600: #008972; --color-bluegreen-500: #00ab8e; --color-bluegreen-400: #33bca5; --color-bluegreen-300: #66cdbb; --color-bluegreen-200: #99ddd2; --color-bluegreen-100: #cceee8; --color-bluegreen-50: #e6f7f4; --color-dark-primary-900: #060b33; --color-dark-primary-800: #0c1566; --color-dark-primary-700: #132099; --color-dark-primary-600: #192acc; --color-dark-primary-500: #1f35ff; --color-dark-primary-400: #4c5dff; --color-dark-primary-300: #7986ff; --color-dark-primary-200: #a5aeff; --color-dark-primary-100: #d2d7ff; --color-dark-primary-50: #e9ebff; --color-dark-orange-900: #331e05; --color-dark-orange-800: #663c0a; --color-dark-orange-700: #995910; --color-dark-orange-600: #cc7715; --color-dark-orange-500: #ff951a; --color-dark-orange-400: #ffaa48; --color-dark-orange-300: #ffbf76; --color-dark-orange-200: #ffd5a3; --color-dark-orange-100: #ffead1; --color-dark-orange-50: #fff4e8; --color-dark-red-900: #330508; --color-dark-red-800: #660a10; --color-dark-red-700: #991019; --color-dark-red-600: #cc1521; --color-dark-red-500: #ff1a29; --color-dark-red-400: #ff4854; --color-dark-red-300: #ff767f; --color-dark-red-200: #ffa3a9; --color-dark-red-100: #ffd1d4; --color-dark-red-50: #ffe8ea; --color-dark-green-900: #062413; --color-dark-green-800: #0d4926; --color-dark-green-700: #136d39; --color-dark-green-600: #1a924c; --color-dark-green-500: #20b65f; --color-dark-green-400: #4dc57f; --color-dark-green-300: #79d39f; --color-dark-green-200: #a6e2bf; --color-dark-green-100: #d2f0df; --color-dark-green-50: #e9f8ef; --color-dark-blue-900: #060b33; --color-dark-blue-800: #0c1566; --color-dark-blue-700: #132099; --color-dark-blue-600: #192acc; --color-dark-blue-500: #1f35ff; --color-dark-blue-400: #4c5dff; --color-dark-blue-300: #7986ff; --color-dark-blue-200: #a5aeff; --color-dark-blue-100: #d2d7ff; --color-dark-blue-50: #e9ebff; --color-black-100: #000000; --color-black-90: rgba(0, 0, 0, 0.9); --color-black-80: rgba(0, 0, 0, 0.8); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-5: rgba(0, 0, 0, 0.05); --color-white-100: #ffffff; --color-white-90: rgba(255, 255, 255, 0.9); --color-white-80: rgba(255, 255, 255, 0.8); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-60: rgba(255, 255, 255, 0.6); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-5: rgba(255, 255, 255, 0.05); --color-bluegrey-900: #131319; --color-bluegrey-850: #1c1d26; --color-bluegrey-800: #252733; --color-bluegrey-750: #383a4b; --color-bluegrey-700: #333344; --color-bluegrey-650: #424257; --color-bluegrey-600: #4a4d65; --color-bluegrey-500: #5d607e; --color-bluegrey-400: #797d9c; --color-bluegrey-300: #9a9db5; --color-bluegrey-200: #bcbece; --color-bluegrey-100: #dedee6; --color-bluegrey-50: #eeeff3; --color-bluegrey-25: #f7f7f9; --color-purple-900: #230717; --color-purple-800: #460f2e; --color-purple-700: #681645; --color-purple-600: #8b1e5c; --color-purple-500: #ae2573; --color-purple-400: #be518f; --color-purple-300: #ce7cab; --color-purple-200: #dfa8c7; --color-purple-100: #efd3e3; --color-purple-50: #f7e9f1; --color-green-900: #051a0e; --color-green-800: #09341b; --color-green-700: #0e4e29; --color-green-600: #126836; --color-green-500: #178244; --color-green-400: #459b69; --color-green-300: #74b48f; --color-green-200: #a2cdb4; --color-green-100: #d1e6da; --color-green-50: #e8f3ed; --color-yellow-900: #332c07; --color-yellow-800: #65570e; --color-yellow-700: #988316; --color-yellow-600: #caae1d; --color-yellow-500: #fdda24; --color-yellow-400: #fde150; --color-yellow-300: #fee97c; --color-yellow-200: #fef0a7; --color-yellow-100: #fff8d3; --color-yellow-50: #fffbe9; --color-orange-900: #2d1800; --color-orange-800: #5a3000; --color-orange-700: #864900; --color-orange-600: #b36100; --color-orange-500: #e07900; --color-orange-400: #e69433; --color-orange-300: #ecaf66; --color-orange-200: #f3c999; --color-orange-100: #f9e4cc; --color-orange-50: #fcf2e6; --color-red-900: #2d0600; --color-red-800: #5a0c00; --color-red-700: #861200; --color-red-600: #b31800; --color-red-500: #e01e00; --color-red-400: #e64b33; --color-red-300: #ec7866; --color-red-200: #f3a599; --color-red-100: #f9d2cc; --color-red-50: #fce9e6; --color-lightblue-900: #00262c; --color-lightblue-800: #004b58; --color-lightblue-700: #007185; --color-lightblue-600: #0096b1; --color-lightblue-500: #00bbdd; --color-lightblue-400: #33c9e4; --color-lightblue-300: #66d7eb; --color-lightblue-200: #99e4f1; --color-lightblue-100: #ccf2f8; --color-lightblue-50: #e6f8fc; --color-blue-900: #01041e; --color-blue-800: #02083c; --color-blue-700: #020b59; --color-blue-600: #030f77; --color-blue-500: #041295; --color-blue-400: #3642aa; --color-blue-300: #6871bf; --color-blue-200: #9ba1d5; --color-blue-100: #cdd0ea; --color-blue-50: #e6e7f4; --checkbox-medium-input-width: 1.25rem; --checkbox-medium-input-height: 1.25rem; --button-ghost-background-color: transparent; --button-outline-background-color: transparent; --button-medium-padding-bottom: 0.625rem; --button-medium-padding-top: 0.625rem; --breakpoint-xlarge: 1280px; --breakpoint-large: 992px; --breakpoint-medium: 768px; --breakpoint-small: 640px; --breakpoint-xsmall: 360px; --breakpoint-xxsmall: 0px; --breadcrumbs-item-hover-font-decoration: underline; --border-style-default: solid; --border-radius-circle: 50%; --border-radius-full: 62.5rem; --border-radius-large: 0.25rem; --border-radius-medium: 0.125rem; --border-radius-none: 0rem; --border-size-thick: 0.25rem; --border-size-medium: 0.125rem; --border-size-thin: 0.0625rem; --border-size-none: 0rem; --tooltip-title-margin-bottom: var(--spacing-xxs); --tooltip-large-content-line-height: var(--font-scale-7-line-height); --tooltip-large-content-font-size: var(--font-scale-7-size); --tooltip-large-content-font-weight: var(--font-weight-regular); --tooltip-large-title-line-height: var(--font-scale-6-line-height); --tooltip-large-title-font-size: var(--font-scale-6-size); --tooltip-large-title-font-weight: var(--font-weight-medium); --tooltip-large-padding: var(--spacing-s); --tooltip-medium-content-line-height: var(--font-scale-8-line-height); --tooltip-medium-content-font-size: var(--font-scale-8-size); --tooltip-medium-content-font-weight: var(--font-weight-regular); --tooltip-medium-title-line-height: var(--font-scale-7-line-height); --tooltip-medium-title-font-size: var(--font-scale-7-size); --tooltip-medium-title-font-weight: var(--font-weight-medium); --tooltip-medium-padding: var(--spacing-s); --tooltip-small-content-line-height: var(--font-scale-9-line-height); --tooltip-small-content-font-size: var(--font-scale-9-size); --tooltip-small-content-font-weight: var(--font-weight-regular); --tooltip-small-title-line-height: var(--font-scale-8-line-height); --tooltip-small-title-font-size: var(--font-scale-8-size); --tooltip-small-title-font-weight: var(--font-weight-medium); --tooltip-small-padding: var(--spacing-xs); --tooltip-lowcontrast-background-color: var(--color-bluegrey-500); --tooltip-highcontrast-background-color: var(--color-bluegrey-900); --tooltip-arrow-border: var(--spacing-xxs); --tooltip-arrow-offset: var(--spacing-xxs); --tooltip-shadow: var(--shadow-xs-light); --tooltip-border-radius: var(--border-radius-medium); --tooltip-font-color: var(--color-bluegrey-25); --tooltip-font-family: var(--font-family-roboto); --switch-input-focus-ring-border-color: var(--color-primary-200); --switch-input-focus-ring-offset-width: var(--spacing-3xs); --switch-input-focus-ring-width: var(--border-size-medium); --switch-input-disabled-on-background-color: var(--color-bluegrey-400); --switch-input-disabled-on-button-background-color: var(--color-bluegrey-50); --switch-input-disabled-on-button-icon-color: var(--color-bluegrey-400); --switch-input-disabled-off-background-color: var(--color-bluegrey-50); --switch-input-disabled-off-button-background-color: var(--color-bluegrey-400); --switch-input-disabled-off-button-icon-color: var(--color-bluegrey-50); --switch-input-button-padding-vertical: var(--spacing-3xs); --switch-input-button-shadow: var(--shadow-xs-ultralight); --switch-input-button-icon-color: var(--color-primary-500); --switch-input-button-background-color: var(--color-bluegrey-25); --switch-input-neutral-button-icon-color: var(--color-bluegrey-500); --switch-input-neutral-on-background-color: var(--color-bluegrey-500); --switch-input-on-button-padding-right: var(--spacing-3xs); --switch-input-on-background-color: var(--color-primary-500); --switch-input-off-button-padding-left: var(--spacing-3xs); --switch-input-off-background-color: var(--color-bluegrey-100); --switch-input-large-icon-size: var(--spacing-m); --switch-input-large-border-radius: var(--border-radius-full); --switch-input-large-button-border-radius: var(--border-radius-circle); --switch-input-large-width: var(--spacing-xxl); --switch-input-large-height: var(--spacing-l); --switch-input-medium-icon-size: var(--spacing-s); --switch-input-medium-border-radius: var(--border-radius-full); --switch-input-medium-button-border-radius: var(--border-radius-circle); --switch-input-medium-button-size: var(--spacing-m); --switch-input-medium-width: var(--spacing-xl); --switch-input-small-icon-size: var(--spacing-xs); --switch-input-small-border-radius: var(--border-radius-full); --switch-input-small-button-border-radius: var(--border-radius-circle); --switch-input-small-button-size: var(--spacing-s); --switch-input-small-width: var(--spacing-l); --switch-input-small-height: var(--spacing-m); --switch-input-margin-horizontal: var(--spacing-xs); --switch-label-disabled-color: var(--color-bluegrey-400); --switch-label-color: var(--color-bluegrey-900); --switch-label-large-line-height: var(--font-scale-6-line-height); --switch-label-large-font-size: var(--font-scale-6-size); --switch-label-medium-line-height: var(--font-scale-7-line-height); --switch-label-medium-font-size: var(--font-scale-7-size); --switch-label-small-line-height: var(--font-scale-8-line-height); --switch-label-small-font-size: var(--font-scale-8-size); --switch-label-font-weight: var(--font-weight-regular); --switch-label-font-family: var(--font-family-roboto); --textarea-icon-error-color: var(--color-red-500); --textarea-icon-warning-color: var(--color-orange-500); --textarea-icon-success-color: var(--color-green-500); --textarea-warning-border-color: var(--color-orange-500); --textarea-error-border-color: var(--color-red-500); --textarea-disabled-text-color: var(--color-bluegrey-400); --textarea-disabled-border-color: var(--color-bluegrey-100); --textarea-disabled-background-color: var(--color-bluegrey-25); --textarea-hover-background-color: var(--color-bluegrey-25); --textarea-focus-border-color: var(--color-primary-500); --textarea-large-icon-right-margin-left: var(--spacing-xs); --textarea-large-icon-left-margin-right: var(--spacing-xxs); --textarea-large-icon-size: var(--spacing-l); --textarea-large-padding-right: var(--spacing-s); --textarea-large-padding-bottom: var(--spacing-s); --textarea-large-padding-left: var(--spacing-s); --textarea-large-padding-top: var(--spacing-s); --textarea-large-line-height: var(--spacing-l); --textarea-large-font-size: var(--spacing-m); --textarea-large-min-height: var(--spacing-9xl); --textarea-medium-icon-right-margin-left: var(--spacing-xs); --textarea-medium-icon-left-margin-right: var(--spacing-xxs); --textarea-medium-padding-right: var(--spacing-s); --textarea-medium-padding-left: var(--spacing-s); --textarea-medium-min-height: var(--spacing-7xl); --textarea-small-icon-right-margin-left: var(--spacing-xs); --textarea-small-icon-left-margin-right: var(--spacing-xxs); --textarea-small-icon-size: var(--spacing-m); --textarea-small-padding-right: var(--spacing-xs); --textarea-small-padding-bottom: var(--spacing-xs); --textarea-small-padding-left: var(--spacing-xs); --textarea-small-padding-top: var(--spacing-xs); --textarea-small-line-height: var(--spacing-m); --textarea-small-font-size: var(--spacing-s); --textarea-small-min-height: var(--spacing-5xl); --textarea-background-color: var(--color-white-100); --textarea-border-radius: var(--border-radius-medium); --textarea-border-color: var(--color-bluegrey-500); --textarea-border-style: var(--border-style-default); --textarea-border-width: var(--border-size-thin); --textarea-placeholder-color: var(--color-bluegrey-500); --textarea-text-color: var(--color-bluegrey-900); --textarea-font-weight: var(--font-weight-regular); --textarea-font-family: var(--font-family-roboto); --typography-code-2-line-height: var(--font-scale-7-line-height); --typography-code-2-size: var(--font-scale-7-size); --typography-code-2-font-weight: var(--font-weight-regular); --typography-code-2-font-family: var(--font-family-roboto-mono); --typography-code-1-line-height: var(--font-scale-6-line-height); --typography-code-1-size: var(--font-scale-6-size); --typography-code-1-font-weight: var(--font-weight-regular); --typography-code-1-font-family: var(--font-family-roboto-mono); --typography-overline-line-height: var(--font-scale-9-line-height); --typography-overline-size: var(--font-scale-9-size); --typography-overline-font-weight: var(--font-weight-regular); --typography-overline-font-family: var(--font-family-roboto); --typography-caption-2-line-height: var(--font-scale-9-line-height); --typography-caption-2-size: var(--font-scale-9-size); --typography-caption-2-font-weight: var(--font-weight-regular); --typography-caption-2-font-family: var(--font-family-roboto); --typography-caption-1-line-height: var(--font-scale-8-line-height); --typography-caption-1-size: var(--font-scale-8-size); --typography-caption-1-font-weight: var(--font-weight-regular); --typography-caption-1-font-family: var(--font-family-roboto); --typography-body-2-line-height: var(--font-scale-7-line-height); --typography-body-2-size: var(--font-scale-7-size); --typography-body-2-font-weight: var(--font-weight-regular); --typography-body-2-font-family: var(--font-family-roboto); --typography-body-1-line-height: var(--font-scale-6-line-height); --typography-body-1-size: var(--font-scale-6-size); --typography-body-1-font-weight: var(--font-weight-regular); --typography-body-1-font-family: var(--font-family-roboto); --typography-subtitle-2-line-height: var(--font-scale-5-line-height); --typography-subtitle-2-size: var(--font-scale-5-size); --typography-subtitle-2-font-weight: var(--font-weight-medium); --typography-subtitle-2-font-family: var(--font-family-roboto); --typography-subtitle-1-line-height: var(--font-scale-4-line-height); --typography-subtitle-1-size: var(--font-scale-4-size); --typography-subtitle-1-font-weight: var(--font-weight-medium); --typography-subtitle-1-font-family: var(--font-family-roboto); --typography-title-3-line-height: var(--font-scale-3-line-height); --typography-title-3-size: var(--font-scale-3-size); --typography-title-3-font-weight: var(--font-weight-bold); --typography-title-3-font-family: var(--font-family-roboto); --typography-title-2-line-height: var(--font-scale-2-line-height); --typography-title-2-size: var(--font-scale-2-size); --typography-title-2-font-weight: var(--font-weight-bold); --typography-title-2-font-family: var(--font-family-roboto); --typography-title-1-line-height: var(--font-scale-1-line-height); --typography-title-1-size: var(--font-scale-1-size); --typography-title-1-font-weight: var(--font-weight-bold); --typography-title-1-font-family: var(--font-family-roboto); --input-warning-border-color: var(--color-orange-500); --input-error-border-color: var(--color-red-500); --input-focus-border-color: var(--color-primary-500); --input-large-icon-right-margin-left: var(--spacing-xs); --input-large-icon-left-margin-right: var(--spacing-xxs); --input-large-icon-size: var(--spacing-l); --input-large-padding-right: var(--spacing-xs); --input-large-padding-bottom: var(--spacing-s); --input-large-padding-left: var(--spacing-xs); --input-large-padding-top: var(--spacing-s); --input-large-line-height: var(--font-scale-6-line-height); --input-large-font-size: var(--font-scale-6-size); --input-large-height: var(--spacing-3xl); --input-medium-icon-right-margin-left: var(--spacing-xs); --input-medium-icon-left-margin-right: var(--spacing-xxs); --input-medium-padding-right: var(--spacing-xs); --input-medium-padding-bottom: var(--spacing-s); --input-medium-padding-left: var(--spacing-xs); --input-medium-padding-top: var(--spacing-s); --input-medium-line-height: var(--font-scale-7-line-height); --input-medium-font-size: var(--font-scale-7-size); --input-medium-height: var(--spacing-xxl); --input-small-icon-right-margin-left: var(--spacing-xs); --input-small-icon-left-margin-right: var(--spacing-xxs); --input-small-icon-size: var(--spacing-m); --input-small-padding-right: var(--spacing-xs); --input-small-padding-bottom: var(--spacing-xs); --input-small-padding-left: var(--spacing-xs); --input-small-padding-top: var(--spacing-xs); --input-small-line-height: var(--font-scale-8-line-height); --input-small-font-size: var(--font-scale-8-size); --input-small-height: var(--spacing-xl); --input-hover-background-color: var(--color-bluegrey-25); --input-hover-icon-color: var(--color-bluegrey-500); --input-default-icon-left-color: var(--color-bluegrey-500); --input-disabled-text-color: var(--color-bluegrey-400); --input-disabled-border-color: var(--color-bluegrey-100); --input-disabled-background-color: var(--color-bluegrey-25); --input-disabled-icon-color: var(--color-bluegrey-400); --input-icon-error-color: var(--color-red-500); --input-icon-warning-color: var(--color-orange-500); --input-icon-success-color: var(--color-green-500); --input-icon-color: var(--color-bluegrey-900); --input-background-color: var(--color-white-100); --input-border-radius: var(--border-radius-medium); --input-border-color: var(--color-bluegrey-500); --input-border-style: var(--border-style-default); --input-border-width: var(--border-size-thin); --input-placeholder-color: var(--color-bluegrey-500); --input-text-color: var(--color-bluegrey-900); --input-font-weight: var(--font-weight-regular); --input-font-family: var(--font-family-roboto); --tags-icon-margin-horizontal: var(--spacing-xxs); --tags-focus-ring-color: var(--color-primary-200); --tags-focus-ring-border-radius: var(--border-radius-full); --tags-focus-ring-border-width: var(--border-size-medium); --tags-focus-ring-offset: var(--spacing-3xs); --tags-button-hover-background-color: var(--color-black-10); --tags-disabled-font-color: var(--color-bluegrey-400); --tags-purple-disabled-background-color: var(--color-purple-50); --tags-yellow-disabled-background-color: var(--color-yellow-50); --tags-red-disabled-background-color: var(--color-red-50); --tags-orange-disabled-background-color: var(--color-orange-50); --tags-green-disabled-background-color: var(--color-green-50); --tags-lightblue-disabled-background-color: var(--color-lightblue-50); --tags-primary-disabled-background-color: var(--color-primary-50); --tags-bluegrey-disabled-background-color: var(--color-bluegrey-50); --tags-selected-icon-color: var(--color-bluegrey-25); --tags-selected-purple-pressed-background-color: var(--color-purple-800); --tags-selected-purple-hover-background-color: var(--color-purple-700); --tags-selected-purple-background-color: var(--color-purple-600); --tags-selected-purple-font-color: var(--color-bluegrey-25); --tags-selected-red-pressed-background-color: var(--color-red-800); --tags-selected-red-hover-background-color: var(--color-red-700); --tags-selected-red-background-color: var(--color-red-600); --tags-selected-red-font-color: var(--color-bluegrey-25); --tags-selected-orange-pressed-background-color: var(--color-orange-800); --tags-selected-orange-hover-background-color: var(--color-orange-700); --tags-selected-orange-background-color: var(--color-orange-600); --tags-selected-orange-font-color: var(--color-bluegrey-25); --tags-selected-yellow-pressed-background-color: var(--color-yellow-800); --tags-selected-yellow-hover-background-color: var(--color-yellow-700); --tags-selected-yellow-background-color: var(--color-yellow-600); --tags-selected-yellow-font-color: var(--color-bluegrey-25); --tags-selected-green-pressed-background-color: var(--color-green-800); --tags-selected-green-hover-background-color: var(--color-green-700); --tags-selected-green-background-color: var(--color-green-600); --tags-selected-green-font-color: var(--color-bluegrey-25); --tags-selected-lightblue-pressed-background-color: var(--color-lightblue-800); --tags-selected-lightblue-hover-background-color: var(--color-lightblue-700); --tags-selected-lightblue-background-color: var(--color-lightblue-600); --tags-selected-lightblue-font-color: var(--color-bluegrey-25); --tags-selected-primary-pressed-background-color: var(--color-primary-800); --tags-selected-primary-hover-background-color: var(--color-primary-700); --tags-selected-primary-background-color: var(--color-primary-600); --tags-selected-primary-font-color: var(--color-bluegrey-25); --tags-selected-bluegrey-pressed-background-color: var(--color-bluegrey-800); --tags-selected-bluegrey-hover-background-color: var(--color-bluegrey-700); --tags-selected-bluegrey-background-color: var(--color-bluegrey-600); --tags-selected-bluegrey-font-color: var(--color-bluegrey-25); --tags-unselected-small-button-padding: var(--spacing-3xs); --tags-unselected-purple-pressed-background-color: var(--color-purple-400); --tags-unselected-purple-hover-background-color: var(--color-purple-200); --tags-unselected-purple-background-color: var(--color-purple-100); --tags-unselected-purple-font-color: var(--color-purple-900); --tags-unselected-yellow-pressed-background-color: var(--color-yellow-400); --tags-unselected-yellow-hover-background-color: var(--color-yellow-200); --tags-unselected-yellow-background-color: var(--color-yellow-100); --tags-unselected-yellow-font-color: var(--color-yellow-900); --tags-unselected-red-pressed-background-color: var(--color-red-400); --tags-unselected-red-hover-background-color: var(--color-red-200); --tags-unselected-red-background-color: var(--color-red-100); --tags-unselected-red-font-color: var(--color-red-900); --tags-unselected-orange-pressed-background-color: var(--color-orange-400); --tags-unselected-orange-hover-background-color: var(--color-orange-200); --tags-unselected-orange-background-color: var(--color-orange-100); --tags-unselected-orange-font-color: var(--color-orange-900); --tags-unselected-green-pressed-background-color: var(--color-green-400); --tags-unselected-green-hover-background-color: var(--color-green-200); --tags-unselected-green-background-color: var(--color-green-100); --tags-unselected-green-font-color: var(--color-green-900); --tags-unselected-lightblue-pressed-background-color: var(--color-lightblue-400); --tags-unselected-lightblue-hover-background-color: var(--color-lightblue-200); --tags-unselected-lightblue-background-color: var(--color-lightblue-100); --tags-unselected-lightblue-font-color: var(--color-lightblue-900); --tags-unselected-primary-pressed-background-color: var(--color-primary-400); --tags-unselected-primary-hover-background-color: var(--color-primary-200); --tags-unselected-primary-background-color: var(--color-primary-100); --tags-unselected-primary-font-color: var(--color-primary-900); --tags-unselected-bluegrey-pressed-background-color: var(--color-bluegrey-400); --tags-unselected-bluegrey-hover-background-color: var(--color-bluegrey-200); --tags-unselected-bluegrey-background-color: var(--color-bluegrey-100); --tags-unselected-bluegrey-font-color: var(--color-bluegrey-900); --tags-medium-label-margin-horizontal: var(--spacing-xxs); --tags-medium-button-icon-size: var(--spacing-m); --tags-medium-padding-left: var(--spacing-s); --tags-medium-icon-size: var(--icon-medium-size); --tags-medium-line-height: var(--font-scale-6-line-height); --tags-medium-font-size: var(--font-scale-6-size); --tags-small-label-margin-horizontal: var(--spacing-none); --tags-small-button-icon-size: var(--spacing-m); --tags-small-padding-right: var(--spacing-xxs); --tags-small-padding-left: var(--spacing-xs); --tags-small-line-height: var(--font-scale-8-line-height); --tags-small-font-size: var(--font-scale-8-size); --tags-padding-vertical: var(--spacing-xxs); --tags-rounded-border-radius: var(--border-radius-full); --tags-sharp-border-radius: var(--border-radius-medium); --tags-font-weight: var(--font-weight-regular); --tags-font-family: var(--font-family-roboto); --tabs-divider-border-color: var(--color-bluegrey-100); --tabs-medium-tab-font-size: var(--font-scale-6-size); --tabs-medium-height: var(--spacing-xxl); --tabs-small-tab-font-size: var(--font-scale-7-size); --tabs-tab-focus-border-color: var(--color-primary-200); --tabs-tab-focus-border-width: var(--spacing-3xs); --tabs-tab-focus-border-radius: var(--spacing-3xs); --tabs-tab-activebar-border-radius: var(--spacing-3xs); --tabs-tab-activebar-height: var(--spacing-xxs); --tabs-tab-activebar-background-color: var(--color-primary-500); --tabs-tab-active-label-color: var(--color-primary-500); --tabs-tab-pressed-background-color: var(--color-bluegrey-100); --tabs-tab-hover-background-color: var(--color-bluegrey-50); --tabs-tab-disabled-label-color: var(--color-bluegrey-400); --tabs-tab-disabled-background-color: var(--color-bluegrey-25); --tabs-tab-label-color: var(--color-bluegrey-900); --tabs-tab-verticalalign-padding-horizontal: var(--spacing-m); --tabs-tab-verticalalign-padding-vertical: var(--spacing-xs); --tabs-tab-padding-horizontal: var(--spacing-m); --tabs-tab-padding-vertical: var(--spacing-xs); --tabs-tab-icon-margin: var(--spacing-xxs); --tabs-tab-font-weight: var(--font-weight-regular); --tabs-tab-font-family: var(--font-family-roboto); --splitbutton-dropdown-trigger-border-bottom-left-radius: var(--border-radius-none); --splitbutton-dropdown-trigger-border-top-left-radius: var(--border-radius-none); --splitbutton-action-margin-right: var(--spacing-3xs); --splitbutton-action-border-bottom-right-radius: var(--border-radius-none); --splitbutton-action-border-top-right-radius: var(--border-radius-none); --slider-tooltip-offset: var(--spacing-xs); --slider-caption-offset: var(--spacing-m); --slider-caption-text-color: var(--color-bluegrey-500); --slider-label-font-weight: var(--font-weight-medium); --slider-border-radius: var(--border-radius-medium); --slider-handle-ring-width: var(--border-size-medium); --slider-handle-ring-offset-width: var(--spacing-3xs); --slider-handle-ring-color: var(--color-primary-200); --slider-neutral-lead-disabled-background-color: var(--color-bluegrey-300); --slider-neutral-lead-background-color: var(--color-bluegrey-500); --slider-neutral-track-background-color: var(--color-bluegrey-100); --slider-neutral-mark-background-color: var(--color-bluegrey-100); --slider-neutral-handle-disabled-background-color: var(--color-bluegrey-200); --slider-neutral-handle-pressed-background-color: var(--color-bluegrey-700); --slider-neutral-handle-hover-background-color: var(--color-bluegrey-600); --slider-neutral-handle-background-color: var(--color-bluegrey-500); --slider-primary-lead-disabled-background-color: var(--color-primary-300); --slider-primary-lead-background-color: var(--color-primary-500); --slider-primary-track-background-color: var(--color-primary-100); --slider-primary-mark-background-color: var(--color-primary-100); --slider-primary-handle-disabled-background-color: var(--color-primary-200); --slider-primary-handle-pressed-background-color: var(--color-primary-700); --slider-primary-handle-hover-background-color: var(--color-primary-600); --slider-primary-handle-background-color: var(--color-primary-500); --slider-large-caption-line-height: var(--font-scale-8-line-height); --slider-large-caption-font-size: var(--font-scale-8-size); --slider-large-label-line-height: var(--font-scale-6-line-height); --slider-large-label-font-size: var(--font-scale-6-size); --slider-large-track-height: var(--spacing-xs); --slider-large-mark-main-height: var(--spacing-s); --slider-large-mark-width: var(--border-size-medium); --slider-large-legend-line-height: var(--font-scale-7-line-height); --slider-large-legend-font-size: var(--font-scale-7-size); --slider-large-metric-line-height: var(--font-scale-8-line-height); --slider-large-metric-font-size: var(--font-scale-8-size); --slider-medium-caption-line-height: var(--font-scale-8-line-height); --slider-medium-caption-font-size: var(--font-scale-8-size); --slider-medium-label-line-height: var(--font-scale-7-line-height); --slider-medium-label-font-size: var(--font-scale-7-size); --slider-medium-track-height: var(--spacing-xxs); --slider-medium-mark-main-height: var(--spacing-xs); --slider-medium-mark-width: var(--border-size-thin); --slider-medium-handle-size: var(--spacing-m); --slider-medium-legend-margin: var(--spacing-xxs); --slider-medium-legend-line-height: var(--font-scale-8-line-height); --slider-medium-legend-font-size: var(--font-scale-8-size); --slider-medium-metric-line-height: var(--font-scale-9-line-height); --slider-medium-metric-font-size: var(--font-scale-9-size); --slider-small-caption-line-height: var(--font-scale-9-line-height); --slider-small-caption-font-size: var(--font-scale-9-size); --slider-small-label-line-height: var(--font-scale-8-line-height); --slider-small-label-font-size: var(--font-scale-8-size); --slider-small-track-height: var(--spacing-3xs); --slider-small-mark-secondary-height: var(--spacing-xxs); --slider-small-mark-width: var(--border-size-thin); --slider-small-handle-size: var(--spacing-s); --slider-small-legend-margin: var(--spacing-xxs); --slider-small-legend-line-height: var(--font-scale-9-line-height); --slider-small-legend-font-size: var(--font-scale-9-size); --slider-small-metric-line-height: var(--font-scale-9-line-height); --slider-small-metric-font-size: var(--font-scale-9-size); --slider-text-color: var(--color-bluegrey-900); --slider-legend-text-color: var(--color-bluegrey-500); --slider-legend-font-weight: var(--font-weight-medium); --slider-metric-offset: var(--spacing-m); --slider-metric-font-weight: var(--font-weight-bold); --slider-font-weight: var(--font-weight-regular); --slider-font-family: var(--font-family-roboto); --radiogroup-large-radio-margin-bottom: var(--spacing-m); --radiogroup-medium-radio-margin-bottom: var(--spacing-s); --radiogroup-small-radio-margin-bottom: var(--spacing-xs); --radio-error-input-border-color: var(--color-red-500); --radio-disabled-label-color: var(--color-bluegrey-400); --radio-disabled-input-checked-symbol-color: var(--color-bluegrey-100); --radio-disabled-input-border-color: var(--color-bluegrey-100); --radio-disabled-input-background-color: var(--color-bluegrey-25); --radio-neutral-input-checked-pressed-symbol-background-color: var(--color-bluegrey-700); --radio-neutral-input-checked-hover-symbol-background-color: var(--color-bluegrey-600); --radio-neutral-input-checked-symbol-background-color: var(--color-bluegrey-500); --radio-input-ring-width: var(--border-size-medium); --radio-input-ring-offset-width: var(--spacing-3xs); --radio-input-ring-color: var(--color-primary-200); --radio-input-pressed-border-color: var(--color-bluegrey-700); --radio-input-pressed-background-color: var(--color-bluegrey-100); --radio-input-hover-background-color: var(--color-bluegrey-50); --radio-input-hover-border-color: var(--color-bluegrey-600); --radio-input-checked-pressed-symbol-background-color: var(--color-primary-700); --radio-input-checked-hover-symbol-background-color: var(--color-primary-600); --radio-input-checked-symbol-background-color: var(--color-primary-500); --radio-input-background-color: var(--color-bluegrey-25); --radio-input-border-color: var(--color-bluegrey-500); --radio-input-border-width: var(--border-size-thin); --radio-input-margin-right: var(--spacing-xs); --radio-large-label-line-height: var(--font-scale-6-line-height); --radio-large-label-font-weight: var(--font-weight-medium); --radio-large-label-font-size: var(--font-scale-6-size); --radio-large-input-size: var(--spacing-l); --radio-label-color: var(--color-bluegrey-900); --radio-label-font-family: var(--font-family-roboto); --radio-medium-label-line-height: var(--font-scale-7-line-height); --radio-medium-label-font-weight: var(--font-weight-medium); --radio-medium-label-font-size: var(--font-scale-7-size); --radio-medium-small-margin-right: var(--spacing-xs); --radio-small-label-line-height: var(--font-scale-8-line-height); --radio-small-label-font-weight: var(--font-weight-medium); --radio-small-label-font-size: var(--font-scale-8-size); --radio-small-input-size: var(--spacing-m); --progress-circle-white-lead-color: var(--color-bluegrey-25); --progress-circle-white-track-color: var(--color-white-10); --progress-circle-neutral-lead-color: var(--color-bluegrey-900); --progress-circle-primary-lead-color: var(--color-primary-500); --progress-circle-track-color: var(--color-black-10); --progress-circle-border-style: var(--border-style-default); --progress-circle-border-width: var(--border-size-medium); --progress-circle-xlarge-size: var(--spacing-xl); --progress-circle-large-size: var(--spacing-l); --progress-circle-small-size: var(--spacing-m); --progress-circle-xsmall-size: var(--spacing-s); --progress-bar-lead-border-radius: var(--border-radius-medium); --progress-bar-lead-success-color: var(--color-green-500); --progress-bar-lead-error-color: var(--color-red-500); --progress-bar-neutral-lead-color: var(--color-bluegrey-500); --progress-bar-primary-lead-color: var(--color-primary-500); --progress-bar-track-border-radius: var(--border-radius-medium); --progress-bar-track-color: var(--color-black-10); --progress-bar-height: var(--border-size-thick); --progress-bar-margin-top: var(--spacing-xs); --progress-bar-caption-error-color: var(--color-red-500); --progress-bar-caption-color: var(--color-bluegrey-500); --progress-bar-percentage-large-line-height: var(--font-scale-7-line-height); --progress-bar-percentage-large-font-size: var(--font-scale-7-size); --progress-bar-percentage-line-height: var(--font-scale-8-line-height); --progress-bar-percentage-font-size: var(--font-scale-8-size); --progress-bar-percentage-font-weight: var(--font-weight-bold); --progress-bar-percentage-color: var(--color-bluegrey-900); --progress-bar-label-large-line-height: var(--font-scale-6-line-height); --progress-bar-label-large-font-size: var(--font-scale-6-size); --progress-bar-label-medium-line-height: var(--font-scale-7-line-height); --progress-bar-label-medium-font-size: var(--font-scale-7-size); --progress-bar-label-small-line-height: var(--font-scale-8-line-height); --progress-bar-label-small-font-size: var(--font-scale-8-size); --progress-bar-label-font-weight: var(--font-weight-medium); --progress-bar-label-color: var(--color-bluegrey-900); --progress-bar-font-weight: var(--font-weight-regular); --progress-bar-font-family: var(--font-family-roboto); --dialog-overlay-background-color: var(--color-black-30); --dialog-buttongroup-margin: var(--spacing-xs); --dialog-footer-padding-vertical: var(--spacing-m); --dialog-footer-padding-horizontal: var(--spacing-l); --dialog-divider-background-color: var(--color-bluegrey-100); --dialog-body-line-height: var(--font-scale-7-line-height); --dialog-body-font-size: var(--font-scale-7-size); --dialog-body-padding-bottom: var(--spacing-l); --dialog-body-padding-horizontal: var(--spacing-l); --dialog-header-padding-vertical: var(--spacing-m); --dialog-header-padding-horizontal: var(--spacing-l); --dialog-header-large-title-line-height: var(--font-scale-4-line-height); --dialog-header-large-title-font-size: var(--font-scale-4-size); --dialog-header-medium-title-line-height: var(--font-scale-5-line-height); --dialog-header-medium-title-font-size: var(--font-scale-5-size); --dialog-header-small-title-line-height: var(--font-scale-6-line-height); --dialog-header-small-title-font-size: var(--font-scale-6-size); --dialog-header-subtitle-line-height: var(--font-scale-9-line-height); --dialog-header-subtitle-font-size: var(--font-scale-9-size); --dialog-header-subtitle-color: var(--color-bluegrey-500); --dialog-header-title-color: var(--color-bluegrey-900); --dialog-background-shadow: var(--shadow-xl-light); --dialog-background-color: var(--color-white-100); --dialog-font-family: var(--font-family-roboto); --itemlist-subitem-large-padding-vertical: var(--spacing-xs); --itemlist-subitem-large-height: var(--spacing-xxl); --itemlist-subitem-medium-padding-vertical: var(--spacing-xs); --itemlist-subitem-medium-height: var(--spacing-xl); --itemlist-subitem-small-padding-vertical: var(--spacing-xxs); --itemlist-subitem-small-height: var(--spacing-l); --itemlist-subitem-active-label-color: var(--color-bluegrey-900); --itemlist-subitem-label-font-weight: var(--font-weight-medium); --itemlist-subitem-label-color: var(--color-bluegrey-500); --itemlist-item-padding-horizontal: var(--spacing-s); --itemlist-item-icon-right-margin-left: var(--spacing-xs); --itemlist-item-icon-left-margin-right: var(--spacing-xs); --itemlist-item-large-padding-vertical: var(--spacing-s); --itemlist-item-large-line-height: var(--font-scale-6-line-height); --itemlist-item-large-font-size: var(--font-scale-6-size); --itemlist-item-large-height: var(--spacing-3xl); --itemlist-item-medium-line-height: var(--font-scale-7-line-height); --itemlist-item-medium-font-size: var(--font-scale-7-size); --itemlist-item-medium-height: var(--spacing-xxl); --itemlist-item-medium-icon-size: var(--icon-medium-size); --itemlist-item-small-padding-vertical: var(--spacing-xs); --itemlist-item-small-line-height: var(--font-scale-8-line-height); --itemlist-item-small-font-size: var(--font-scale-8-size); --itemlist-item-small-height: var(--spacing-xl); --itemlist-item-focus-border-type: var(--border-style-default); --itemlist-item-focus-border-color: var(--color-primary-200); --itemlist-item-focus-border-width: var(--border-size-medium); --itemlist-item-focus-border-radius: var(--border-radius-medium); --itemlist-item-activebar-border-right-radius: var(--border-radius-medium); --itemlist-item-activebar-width: var(--border-size-thick); --itemlist-item-activebar-background-color: var(--color-primary-500); --itemlist-item-pressed-background-color: var(--color-bluegrey-100); --itemlist-item-active-label-color: var(--color-primary-500); --itemlist-item-hover-background-color: var(--color-bluegrey-50); --itemlist-item-disabled-label-color: var(--color-bluegrey-400); --itemlist-item-label-color: var(--color-bluegrey-900); --itemlist-item-font-weight: var(--font-weight-regular); --itemlist-item-font-family: var(--font-family-roboto); --icon-xxlarge-size: var(--spacing-3xl); --icon-xlarge-size: var(--spacing-xl); --icon-large-size: var(--spacing-l); --icon-small-size: var(--spacing-m); --icon-xsmall-size: var(--spacing-s); --header-menu-left-margin-right: var(--spacing-m); --header-brand-margin-right: var(--spacing-3xl); --header-divider-margin-right: var(--spacing-xxl); --header-divider-width: var(--border-size-thin); --header-divider-color: var(--color-bluegrey-100); --header-product-name-font-color: var(--color-bluegrey-500); --header-large-divider-height: var(--spacing-3xl); --header-large-product-name-line-height: var(--font-scale-6-line-height); --header-large-product-name-font-size: var(--font-scale-6-size); --header-large-container-padding-right: var(--spacing-m); --header-large-container-padding-left: var(--spacing-m); --header-large-container-height: var(--spacing-7xl); --header-medium-divider-height: var(--spacing-xxl); --header-medium-product-name-font-size: var(--font-scale-7-size); --header-medium-product-name-font-weight: var(--font-weight-medium); --header-medium-logo-height: var(--spacing-xxl); --header-medium-container-padding-right: var(--spacing-s); --header-medium-container-padding-left: var(--spacing-s); --header-medium-container-height: var(--spacing-5xl); --header-small-divider-height: var(--spacing-xl); --header-small-product-name-line-height: var(--font-scale-8-line-height); --header-small-product-name-font-size: var(--font-scale-8-size); --header-small-container-padding-right: var(--spacing-xs); --header-small-container-padding-left: var(--spacing-xs); --header-small-container-height: var(--spacing-3xl); --header-container-shadow: var(--shadow-s-light); --header-container-background-color: var(--color-white-100); --formfield-caption-disabled-color: var(--color-bluegrey-400); --formfield-caption-error-color: var(--color-red-500); --formfield-caption-warning-color: var(--color-orange-500); --formfield-caption-color: var(--color-bluegrey-500); --formfield-caption-large-line-height: var(--font-scale-8-line-height); --formfield-caption-large-font-size: var(--font-scale-8-size); --formfield-caption-medium-line-height: var(--font-scale-8-line-height); --formfield-caption-medium-font-size: var(--font-scale-8-size); --formfield-caption-small-line-height: var(--font-scale-9-line-height); --formfield-caption-small-font-size: var(--font-scale-9-size); --formfield-caption-margin-top: var(--spacing-3xs); --formfield-counter-margin-left: var(--spacing-xxs); --formfield-counter-color: var(--color-bluegrey-500); --formfield-label-margin-bottom: var(--spacing-xxs); --formfield-label-requiredchar-margin-left: var(--spacing-xxs); --formfield-label-requiredchar-color: var(--color-red-500); --formfield-label-large-line-height: var(--font-scale-6-line-height); --formfield-label-large-font-size: var(--font-scale-6-size); --formfield-label-medium-line-height: var(--font-scale-7-line-height); --formfield-label-medium-font-size: var(--font-scale-7-size); --formfield-label-small-line-height: var(--font-scale-8-line-height); --formfield-label-small-font-size: var(--font-scale-8-size); --formfield-label-disabled-color: var(--color-bluegrey-400); --formfield-label-color: var(--color-bluegrey-900); --formfield-font-weight: var(--font-weight-regular); --formfield-font-family: var(--font-family-roboto); --dropdown-overlay-shadow: var(--shadow-m-strong); --dropdown-overlay-margin-top: var(--spacing-xxs); --dropdown-overlay-padding-vertical: var(--spacing-xxs); --dropdown-overlay-background-color: var(--color-white-100); --dropdown-overlay-border-radius: var(--border-radius-medium); --drawer-large-collapsed-header-padding-horizontal: var(--spacing-m); --drawer-large-collapsed-header-padding-vertical: var(--spacing-m); --drawer-large-collapsed-itemlist-item-padding-horizontal: var(--spacing-m); --drawer-large-collapsed-itemlist-item-padding-vertical: var(--spacing-m); --drawer-large-expanded-header-padding-horizontal: var(--spacing-m); --drawer-large-expanded-header-padding-vertical: var(--spacing-m); --drawer-large-expanded-itemlist-subitem-padding-left-override: var(--spacing-xxl); --drawer-large-expanded-itemlist-subitem-padding-horizontal: var(--spacing-s); --drawer-large-expanded-itemlist-subitem-padding-vertical: var(--spacing-s); --drawer-large-expanded-itemlist-item-padding-left-override: var(--spacing-m); --drawer-large-expanded-itemlist-item-padding-horizontal: var(--spacing-s); --drawer-large-expanded-itemlist-item-padding-vertical: var(--spacing-m); --drawer-medium-collapsed-header-padding-horizontal: var(--spacing-s); --drawer-medium-collapsed-header-padding-vertical: var(--spacing-s); --drawer-medium-collapsed-itemlist-item-padding-horizontal: var(--spacing-m); --drawer-medium-collapsed-itemlist-item-padding-vertical: var(--spacing-s); --drawer-medium-expanded-header-padding-horizontal: var(--spacing-s); --drawer-medium-expanded-header-padding-vertical: var(--spacing-s); --drawer-medium-expanded-itemlist-subitem-padding-left-override: var(--spacing-xxl); --drawer-medium-expanded-itemlist-subitem-padding-horizontal: var(--spacing-s); --drawer-medium-expanded-itemlist-subitem-padding-vertical: var(--spacing-s); --drawer-medium-expanded-itemlist-item-padding-left-override: var(--spacing-m); --drawer-medium-expanded-itemlist-item-padding-horizontal: var(--spacing-s); --drawer-medium-expanded-itemlist-item-padding-vertical: var(--spacing-s); --drawer-small-collapsed-header-padding-horizontal: var(--spacing-xs); --drawer-small-collapsed-header-padding-vertical: var(--spacing-xs); --drawer-small-collapsed-itemlist-item-padding-horizontal: var(--spacing-m); --drawer-small-collapsed-itemlist-item-padding-vertical: var(--spacing-s); --drawer-small-expanded-header-padding-horizontal: var(--spacing-xs); --drawer-small-expanded-header-padding-vertical: var(--spacing-xs); --drawer-small-expanded-itemlist-subitem-padding-left-override: var(--spacing-xxl); --drawer-small-expanded-itemlist-subitem-padding-horizontal: var(--spacing-s); --drawer-small-expanded-itemlist-subitem-padding-vertical: var(--spacing-xs); --drawer-small-expanded-itemlist-item-padding-left-override: var(--spacing-m); --drawer-small-expanded-itemlist-item-padding-horizontal: var(--spacing-s); --drawer-small-expanded-itemlist-item-padding-vertical: var(--spacing-s); --drawer-itemlist-subitem-active-label-color: var(--color-bluegrey-900); --drawer-itemlist-subitem-active-font-weight: var(--font-weight-medium); --drawer-itemlist-subitem-label-color: var(--color-bluegrey-500); --drawer-itemlist-subitem-font-weight: var(--font-weight-regular); --drawer-itemlist-item-active-label-color: var(--color-bluegrey-900); --drawer-itemlist-item-font-weight: var(--font-weight-medium); --drawer-divider-height: var(--border-size-thin); --drawer-divider-color: var(--color-bluegrey-200); --drawer-background-color: var(--color-white-100); --drawer-shadow: var(--shadow-xs-ultralight); --divider-sharpe-radius: var(--border-radius-none); --divider-rounded-radius: var(--border-radius-full); --divider-large-height: var(--border-size-thick); --divider-medium-height: var(--border-size-medium); --divider-small-height: var(--border-size-thin); --divider-color: var(--color-bluegrey-100); --color-danger-pressed: var(--color-red-700); --color-danger-hover: var(--color-red-600); --color-danger-default: var(--color-red-500); --color-warning-pressed: var(--color-orange-700); --color-warning-hover: var(--color-orange-600); --color-warning-default: var(--color-orange-500); --color-success-pressed: var(--color-green-700); --color-success-hover: var(--color-green-600); --color-success-default: var(--color-green-500); --color-neutral-pressed: var(--color-bluegrey-700); --color-neutral-hover: var(--color-bluegrey-600); --color-neutral-default: var(--color-bluegrey-500); --color-primary-pressed: var(--color-blue-700); --color-primary-hover: var(--color-blue-600); --color-primary-default: var(--color-blue-500); --color-dark-danger-pressed: var(--color-red-300); --color-dark-danger-hover: var(--color-red-400); --color-dark-danger-default: var(--color-red-500); --color-dark-warning-pressed: var(--color-orange-300); --color-dark-warning-hover: var(--color-orange-400); --color-dark-warning-default: var(--color-orange-500); --color-dark-success-pressed: var(--color-green-300); --color-dark-success-hover: var(--color-green-400); --color-dark-success-default: var(--color-green-500); --color-dark-neutral-pressed: var(--color-bluegrey-50); --color-dark-neutral-hover: var(--color-bluegrey-100); --color-dark-neutral-default: var(--color-bluegrey-200); --color-dark-primary-pressed: var(--color-blue-200); --color-dark-primary-hover: var(--color-blue-300); --color-dark-primary-default: var(--color-blue-400); --checkboxgroup-large-checkbox-margin-bottom: var(--spacing-m); --checkboxgroup-medium-checkbox-margin-bottom: var(--spacing-s); --checkboxgroup-small-checkbox-margin-bottom: var(--spacing-xs); --checkbox-unchecked-disabled-background-color: var(--color-bluegrey-25); --checkbox-unchecked-disabled-border-color: var(--color-bluegrey-100); --checkbox-unchecked-pressed-background-color: var(--color-bluegrey-100); --checkbox-unchecked-pressed-border-color: var(--color-bluegrey-700); --checkbox-unchecked-hover-background-color: var(--color-bluegrey-50); --checkbox-unchecked-hover-border-color: var(--color-bluegrey-600); --checkbox-unchecked-border-color: var(--color-bluegrey-500); --checkbox-neutral-checked-pressed-background-color: var(--color-bluegrey-700); --checkbox-neutral-checked-hover-background-color: var(--color-bluegrey-600); --checkbox-neutral-checked-background-color: var(--color-bluegrey-500); --checkbox-checked-pressed-background-color: var(--color-primary-700); --checkbox-checked-hover-background-color: var(--color-primary-600); --checkbox-checked-background-color: var(--color-primary-500); --checkbox-checked-disabled-background-color: var(--color-bluegrey-100); --checkbox-checked-disabled-icon-color: var(--color-bluegrey-400); --checkbox-checked-icon-color: var(--color-bluegrey-25); --checkbox-disabled-label-color: var(--color-bluegrey-400); --checkbox-error-border-color: var(--color-red-500); --checkbox-background-color: var(--color-bluegrey-25); --checkbox-label-color: var(--color-bluegrey-900); --checkbox-input-margin-right: var(--spacing-xs); --checkbox-large-input-width: var(--spacing-l); --checkbox-large-input-height: var(--spacing-l); --checkbox-large-label-line-height: var(--font-scale-6-line-height); --checkbox-large-label-font-weight: var(--font-weight-medium); --checkbox-large-label-font-size: var(--font-scale-6-size); --checkbox-medium-label-line-height: var(--font-scale-7-line-height); --checkbox-medium-label-font-weight: var(--font-weight-medium); --checkbox-medium-label-font-size: var(--font-scale-7-size); --checkbox-small-input-width: var(--spacing-m); --checkbox-small-input-height: var(--spacing-m); --checkbox-small-label-line-height: var(--font-scale-8-line-height); --checkbox-small-label-font-weight: var(--font-weight-medium); --checkbox-small-label-font-size: var(--font-scale-8-size); --checkbox-font-weight: var(--font-weight-regular); --checkbox-font-family: var(--font-family-roboto); --checkbox-caption-line-height: var(--font-scale-8-line-height); --checkbox-caption-font-size: var(--font-scale-8-size); --checkbox-caption-color: var(--color-bluegrey-500); --checkbox-caption-margin-top: var(--spacing-xxs); --checkbox-focus-ring-offset-width: var(--spacing-3xs); --checkbox-focus-ring-border-width: var(--border-size-medium); --checkbox-focus-ring-border-color: var(--color-primary-200); --checkbox-border-radius: var(--border-radius-medium); --checkbox-border-width: var(--border-size-thin); --button-icononly-xlarge-padding: var(--spacing-xs); --button-icononly-xlarge-icon-size: var(--spacing-3xl); --button-icononly-large-padding: var(--spacing-xs); --button-icononly-large-icon-size: var(--spacing-xl); --button-icononly-medium-padding: var(--spacing-xs); --button-icononly-medium-icon-size: var(--spacing-l); --button-icononly-small-padding: var(--spacing-xxs); --button-icononly-small-icon-size: var(--spacing-l); --button-icon-small-margin-horizontal: var(--spacing-xxs); --button-icon-margin-horizontal: var(--spacing-xs); --button-ghost-inverted-disabled-background-color: var(--color-white-10); --button-ghost-inverted-disabled-label-color: var(--color-white-20); --button-ghost-inverted-pressed-background-color: var(--color-white-20); --button-ghost-inverted-pressed-label-color: var(--color-bluegrey-100); --button-ghost-inverted-hover-background-color: var(--color-white-10); --button-ghost-inverted-hover-label-color: var(--color-bluegrey-50); --button-ghost-inverted-label-color: var(--color-bluegrey-25); --button-ghost-pressed-background-color: var(--color-black-20); --button-ghost-hover-background-color: var(--color-black-10); --button-ghost-neutral-pressed-label-color: var(--color-bluegrey-900); --button-ghost-neutral-hover-label-color: var(--color-bluegrey-800); --button-ghost-neutral-label-color: var(--color-bluegrey-700); --button-ghost-primary-pressed-label-color: var(--color-primary-700); --button-ghost-primary-hover-label-color: var(--color-primary-600); --button-ghost-primary-label-color: var(--color-primary-500); --button-ghost-disabled-background-color: var(--color-bluegrey-100); --button-outline-neutral-pressed-border-color: var(--color-bluegrey-900); --button-outline-neutral-pressed-label-color: var(--color-bluegrey-900); --button-outline-neutral-hover-border-color: var(--color-bluegrey-800); --button-outline-neutral-hover-label-color: var(--color-bluegrey-800); --button-outline-neutral-label-color: var(--color-bluegrey-700); --button-outline-neutral-border-color: var(--color-bluegrey-700); --button-outline-danger-pressed-border-color: var(--color-red-700); --button-outline-danger-pressed-label-color: var(--color-red-700); --button-outline-danger-hover-border-color: var(--color-red-600); --button-outline-danger-hover-label-color: var(--color-red-600); --button-outline-danger-label-color: var(--color-red-500); --button-outline-danger-border-color: var(--color-red-500); --button-outline-warning-pressed-border-color: var(--color-orange-700); --button-outline-warning-pressed-label-color: var(--color-orange-700); --button-outline-warning-hover-border-color: var(--color-orange-600); --button-outline-warning-hover-label-color: var(--color-orange-600); --button-outline-warning-label-color: var(--color-orange-500); --button-outline-warning-border-color: var(--color-orange-500); --button-outline-success-pressed-border-color: var(--color-green-700); --button-outline-success-pressed-label-color: var(--color-green-700); --button-outline-success-hover-border-color: var(--color-green-600); --button-outline-success-hover-label-color: var(--color-green-600); --button-outline-success-label-color: var(--color-green-500); --button-outline-success-border-color: var(--color-green-500); --button-outline-primary-pressed-border-color: var(--color-primary-700); --button-outline-primary-pressed-label-color: var(--color-primary-700); --button-outline-primary-hover-border-color: var(--color-primary-600); --button-outline-primary-hover-label-color: var(--color-primary-600); --button-outline-primary-label-color: var(--color-primary-500); --button-outline-primary-disabled-border-color: var(--color-bluegrey-100); --button-outline-primary-border-color: var(--color-primary-500); --button-outline-border-width: var(--border-size-medium); --button-outline-border-style: var(--border-style-default); --button-outline-pressed-background-color: var(--color-black-20); --button-outline-hover-background-color: var(--color-black-10); --button-outline-disabled-border-color: var(--color-bluegrey-100); --button-outline-disabled-background-color: var(--color-bluegrey-100); --button-xlarge-padding-right: var(--spacing-m); --button-xlarge-padding-bottom: var(--spacing-m); --button-xlarge-padding-left: var(--spacing-m); --button-xlarge-padding-top: var(--spacing-m); --button-xlarge-height: var(--spacing-5xl); --button-xlarge-line-height: var(--font-scale-5-line-height); --button-xlarge-font-weight: var(--font-weight-medium); --button-xlarge-font-size: var(--font-scale-5-size); --button-large-padding-right: var(--spacing-m); --button-large-padding-bottom: var(--spacing-s); --button-large-padding-left: var(--spacing-m); --button-large-padding-top: var(--spacing-s); --button-large-height: var(--spacing-3xl); --button-large-line-height: var(--font-scale-6-line-height); --button-large-font-weight: var(--font-weight-medium); --button-large-font-size: var(--font-scale-6-size); --button-medium-padding-right: var(--spacing-s); --button-medium-padding-left: var(--spacing-s); --button-medium-height: var(--spacing-xxl); --button-medium-line-height: var(--font-scale-7-line-height); --button-medium-font-weight: var(--font-weight-medium); --button-medium-font-size: var(--font-scale-7-size); --button-small-padding-right: var(--spacing-s); --button-small-padding-bottom: var(--spacing-xs); --button-small-padding-left: var(--spacing-s); --button-small-padding-top: var(--spacing-xs); --button-small-height: var(--spacing-xl); --button-small-line-height: var(--font-scale-8-line-height); --button-small-font-weight: var(--font-weight-bold); --button-small-font-size: var(--font-scale-8-size); --button-ring-width: var(--border-size-medium); --button-ring-offset-width: var(--spacing-3xs); --button-ring-color: var(--color-primary-200); --button-label-color: var(--color-bluegrey-25); --button-background-color: var(--color-bluegrey-900); --button-filled-danger-pressed-background-color: var(--color-red-700); --button-filled-danger-hover-background-color: var(--color-red-600); --button-filled-danger-background-color: var(--color-red-500); --button-filled-danger-label-color: var(--color-bluegrey-25); --button-filled-warning-pressed-background-color: var(--color-orange-700); --button-filled-warning-hover-background-color: var(--color-orange-600); --button-filled-warning-background-color: var(--color-orange-500); --button-filled-warning-label-color: var(--color-bluegrey-25); --button-filled-success-pressed-background-color: var(--color-green-700); --button-filled-success-hover-background-color: var(--color-green-600); --button-filled-success-background-color: var(--color-green-500); --button-filled-success-label-color: var(--color-bluegrey-25); --button-filled-primary-pressed-background-color: var(--color-primary-700); --button-filled-primary-hover-background-color: var(--color-primary-600); --button-filled-primary-background-color: var(--color-primary-500); --button-filled-label-color: var(--color-bluegrey-25); --button-filled-disabled-background-color: var(--color-bluegrey-100); --button-font-family: var(--font-family-roboto); --button-height: var(--spacing-xxl); --button-disabled-label-color: var(--color-bluegrey-400); --button-border-radius: var(--border-radius-medium); --breadcrumbs-separator-slash-color: var(--color-bluegrey-500); --breadcrumbs-separator-slash-large-line-height: var(--font-scale-5-line-height); --breadcrumbs-separator-slash-large-font-size: var(--font-scale-5-size); --breadcrumbs-separator-slash-medium-line-height: var(--font-scale-6-line-height); --breadcrumbs-separator-slash-medium-font-size: var(--font-scale-6-size); --breadcrumbs-separator-slash-small-line-height: var(--font-scale-7-line-height); --breadcrumbs-separator-slash-small-font-size: var(--font-scale-7-size); --breadcrumbs-separator-chevron-color: var(--color-bluegrey-500); --breadcrumbs-separator-chevron-large-icon-color: var(--color-bluegrey-500); --breadcrumbs-separator-chevron-medium-icon-size: var(--icon-medium-size); --breadcrumbs-item-focus-ring-color: var(--color-primary-200); --breadcrumbs-item-focus-ring-border-radius: var(--border-radius-medium); --breadcrumbs-item-focus-ring-border-width: var(--border-size-medium); --breadcrumbs-item-padding-horizontal: var(--spacing-xs); --breadcrumbs-item-active-large-font-weight: var(--font-weight-bold); --breadcrumbs-item-active-medium-font-weight: var(--font-weight-medium); --breadcrumbs-item-active-small-font-weight: var(--font-weight-medium); --breadcrumbs-item-active-font-color: var(--color-primary-900); --breadcrumbs-item-pressed-font-color: var(--color-primary-700); --breadcrumbs-item-neutral-active-font-color: var(--color-bluegrey-900); --breadcrumbs-item-neutral-pressed-font-color: var(--color-bluegrey-700); --breadcrumbs-item-neutral-font-color: var(--color-bluegrey-500); --breadcrumbs-item-large-icon-margin-right: var(--spacing-xxs); --breadcrumbs-item-large-line-height: var(--font-scale-5-line-height); --breadcrumbs-item-large-font-weight: var(--font-weight-medium); --breadcrumbs-item-large-font-size: var(--font-scale-5-size); --breadcrumbs-item-medium-icon-margin-right: var(--spacing-xxs); --breadcrumbs-item-medium-icon-size: var(--icon-medium-size); --breadcrumbs-item-medium-line-height: var(--font-scale-6-line-height); --breadcrumbs-item-medium-font-weight: var(--font-weight-regular); --breadcrumbs-item-medium-font-size: var(--font-scale-6-size); --breadcrumbs-item-small-icon-margin-right: var(--spacing-xxs); --breadcrumbs-item-small-line-height: var(--font-scale-7-line-height); --breadcrumbs-item-small-font-size: var(--font-scale-7-size); --breadcrumbs-item-small-font-weight: var(--font-weight-regular); --breadcrumbs-item-font-color: var(--color-primary-500); --breadcrumbs-item-font-family: var(--font-family-roboto); --alert-error-activebar-background-color: var(--color-red-500); --alert-error-highemphasis-background-color: var(--color-red-500); --alert-error-background-color: var(--color-red-50); --alert-error-icon-color: var(--color-red-500); --alert-warning-activebar-background-color: var(--color-orange-500); --alert-warning-highemphasis-background-color: var(--color-orange-500); --alert-warning-background-color: var(--color-orange-50); --alert-warning-icon-color: var(--color-orange-500); --alert-success-activebar-background-color: var(--color-green-500); --alert-success-highemphasis-background-color: var(--color-green-500); --alert-success-background-color: var(--color-green-50); --alert-success-icon-color: var(--color-green-500); --alert-neutral-activebar-background-color: var(--color-bluegrey-500); --alert-neutral-highemphasis-background-color: var(--color-bluegrey-500); --alert-neutral-background-color: var(--color-bluegrey-50); --alert-neutral-icon-color: var(--color-bluegrey-900); --alert-informative-activebar-background-color: var(--color-primary-500); --alert-informative-highemphasis-background-color: var(--color-primary-500); --alert-informative-background-color: var(--color-primary-50); --alert-informative-icon-color: var(--color-bluegrey-900); --alert-highemphasis-icon-color: var(--color-bluegrey-25); --alert-highemphasis-color: var(--color-bluegrey-25); --alert-color: var(--color-bluegrey-900); --alert-content-font-weight: var(--font-weight-regular); --alert-title-font-weight: var(--font-weight-bold); --alert-title-padding-bottom: var(--spacing-xxs); --alert-icon-margin-right: var(--spacing-xs); --alert-activebar-width: var(--border-size-thick); --alert-rightactions-gap: var(--spacing-xs); --alert-leftcontent-padding-vertical: var(--spacing-xs); --alert-leftcontent-gap: var(--spacing-xs); --alert-font-family: var(--font-family-roboto); --alert-large-line-height: var(--font-scale-6-line-height); --alert-large-font-size: var(--font-scale-6-size); --alert-large-min-height: var(--spacing-4xl); --alert-medium-line-height: var(--font-scale-7-line-height); --alert-medium-font-size: var(--font-scale-7-size); --alert-medium-min-height: var(--spacing-3xl); --alert-small-line-height: var(--font-scale-8-line-height); --alert-small-font-size: var(--font-scale-8-size); --alert-small-min-height: var(--spacing-3xl); --alert-gap: var(--spacing-s); --alert-padding-vertical: var(--spacing-xs); --alert-padding-horizontal: var(--spacing-s); --alert-border-radius: var(--border-radius-medium); --tags-small-icon-size: var(--icon-small-size); --itemlist-item-large-icon-size: var(--icon-large-size); --itemlist-item-small-icon-size: var(--icon-small-size); --breadcrumbs-separator-chevron-large-icon-size: var(--icon-large-size); --breadcrumbs-separator-chevron-small-icon-size: var(--icon-small-size); --breadcrumbs-item-large-icon-size: var(--icon-large-size); --breadcrumbs-item-small-icon-size: var(--icon-small-size); } .qtm-alert { width: 100%; border-radius: var(--alert-border-radius); padding: var(--alert-padding-vertical) var(--alert-padding-horizontal); font-family: var(--alert-font-family); font-weight: var(--alert-content-font-weight); color: var(--alert-color); display: flex; align-items: center; gap: var(--alert-gap); position: relative; box-sizing: border-box; } .qtm-alert .qtm-left-content .qtm-icon { display: flex; align-self: flex-start; } .qtm-alert:before { position: absolute; content: ""; height: 100%; left: 0; width: var(--alert-activebar-width); background-color: var(--alert-informative-activebar-background-color); border-radius: var(--alert-border-radius) 0px 0px var(--alert-border-radius); } .qtm-alert.qtm-low-emphasis:before { display: none; } .qtm-alert .qtm-left-content { padding: var(--alert-leftcontent-padding-vertical) 0; display: flex; flex: 1; gap: var(--alert-leftcontent-gap); } .qtm-alert .qtm-left-content .qtm-message { display: flex; flex: 1; flex-direction: column; gap: var(--alert-title-padding-bottom); } .qtm-alert .qtm-left-content .qtm-message .qtm-title { font-weight: var(--alert-title-font-weight); } .qtm-alert .qtm-right-actions { display: flex; gap: var(--alert-rightactions-gap); } .qtm-alert.qtm-small { font-size: var(--alert-small-font-size); min-height: var(--alert-small-min-height); line-height: var(--alert-small-line-height); } .qtm-alert.qtm-small .qtm-left-content .qtm-icon { font-size: var(--alert-small-line-height); } .qtm-alert, .qtm-alert.qtm-medium { font-size: var(--alert-medium-font-size); min-height: var(--alert-medium-min-height); line-height: var(--alert-medium-line-height); } .qtm-alert .qtm-left-content .qtm-icon, .qtm-alert.qtm-medium .qtm-left-content .qtm-icon { font-size: var(--alert-medium-line-height); } .qtm-alert.qtm-large { font-size: var(--alert-large-font-size); min-height: var(--alert-large-min-height); line-height: var(--alert-large-line-height); } .qtm-alert.qtm-large .qtm-left-content .qtm-icon { font-size: var(--alert-large-line-height); } .qtm-alert, .qtm-alert.qtm-informative { background-color: var(--alert-informative-background-color); } .qtm-alert:before, .qtm-alert.qtm-informative:before { background-color: var(--alert-informative-activebar-background-color); } .qtm-alert .qtm-left-content .qtm-icon, .qtm-alert.qtm-informative .qtm-left-content .qtm-icon { color: var(--alert-informative-icon-color); } .qtm-alert.qtm-high-emphasis, .qtm-alert.qtm-informative.qtm-high-emphasis { background-color: var(--alert-informative-highemphasis-background-color); } .qtm-alert.qtm-neutral { background-color: var(--alert-neutral-background-color); } .qtm-alert.qtm-neutral:before { background-color: var(--alert-neutral-activebar-background-color); } .qtm-alert.qtm-neutral .qtm-left-content .qtm-icon { color: var(--alert-neutral-icon-color); } .qtm-alert.qtm-neutral.qtm-high-emphasis { background-color: var(--alert-neutral-highemphasis-background-color); } .qtm-alert.qtm-success { background-color: var(--alert-success-background-color); } .qtm-alert.qtm-success:before { background-color: var(--alert-success-activebar-background-color); } .qtm-alert.qtm-success .qtm-left-content .qtm-icon { color: var(--alert-success-icon-color); } .qtm-alert.qtm-success.qtm-high-emphasis { background-color: var(--alert-success-highemphasis-background-color); } .qtm-alert.qtm-warning { background-color: var(--alert-warning-background-color); } .qtm-alert.qtm-warning:before { background-color: var(--alert-warning-activebar-background-color); } .qtm-alert.qtm-warning .qtm-left-content .qtm-icon { color: var(--alert-warning-icon-color); } .qtm-alert.qtm-warning.qtm-high-emphasis { background-color: var(--alert-warning-highemphasis-background-color); } .qtm-alert.qtm-error { background-color: var(--alert-error-background-color); } .qtm-alert.qtm-error:before { background-color: var(--alert-error-activebar-background-color); } .qtm-alert.qtm-error .qtm-left-content .qtm-icon { color: var(--alert-error-icon-color); } .qtm-alert.qtm-error.qtm-high-emphasis { background-color: var(--alert-error-highemphasis-background-color); } .qtm-alert.qtm-high-emphasis { color: var(--alert-highemphasis-color); } .qtm-alert.qtm-high-emphasis .qtm-left-content .qtm-icon, .qtm-alert.qtm-high-emphasis.qtm-informative .qtm-left-content .qtm-icon, .qtm-alert.qtm-high-emphasis.qtm-warning .qtm-left-content .qtm-icon, .qtm-alert.qtm-high-emphasis.qtm-error .qtm-left-content .qtm-icon, .qtm-alert.qtm-high-emphasis.qtm-success .qtm-left-content .qtm-icon, .qtm-alert.qtm-high-emphasis.qtm-neutral .qtm-left-content .qtm-icon { color: var(--alert-highemphasis-icon-color); } .qtm-breadcrumb { display: flex; font-family: var(--breadcrumbs-item-font-family); font-size: var(--breadcrumbs-item-medium-font-size); line-height: var(--breadcrumbs-item-medium-line-height); font-weight: var(--breadcrumbs-item-medium-font-weight); } .qtm-breadcrumb .qtm-breadcrumb-item { display: flex; } .qtm-breadcrumb .qtm-breadcrumb-item > * { margin-left: var(--breadcrumbs-item-padding-horizontal); margin-right: var(--breadcrumbs-item-padding-horizontal); color: var(--breadcrumbs-item-font-color); cursor: pointer; display: flex; position: relative; } .qtm-breadcrumb .qtm-breadcrumb-item:first-child > * { margin-left: 0; } .qtm-breadcrumb .qtm-breadcrumb-item:last-child > * { font-weight: var(--breadcrumbs-item-active-medium-font-weight); color: var(--breadcrumbs-item-active-font-color); cursor: default; } .qtm-breadcrumb .qtm-breadcrumb-item:not(:last-child):hover > * > *:not(.qtm-icon) { -webkit-text-decoration: var(--breadcrumbs-item-hover-font-decoration); text-decoration: var(--breadcrumbs-item-hover-font-decoration); } .qtm-breadcrumb .qtm-breadcrumb-item:active > * { color: var(--breadcrumbs-item-pressed-font-color); } .qtm-breadcrumb .qtm-breadcrumb-item:focus-visible { outline: none; } .qtm-breadcrumb .qtm-breadcrumb-item:focus-visible > * { outline: none; box-shadow: 0 0 0 var(--breadcrumbs-item-focus-ring-border-width) var(--breadcrumbs-item-focus-ring-color); border-radius: var(--breadcrumbs-item-focus-ring-border-radius); } .qtm-breadcrumb .qtm-breadcrumb-item .qtm-icon { line-height: inherit; } .qtm-breadcrumb .qtm-breadcrumb-item .qtm-icon { font-size: var(--breadcrumbs-item-medium-icon-size); } .qtm-breadcrumb .qtm-breadcrumb-item .qtm-icon:first-child { margin-right: var(--breadcrumbs-item-medium-icon-margin-right); } .qtm-breadcrumb.qtm-small .qtm-breadcrumb-item:last-child { font-weight: var(--breadcrumbs-item-active-small-font-weight); } .qtm-breadcrumb.qtm-medium .qtm-breadcrumb-item:last-child { font-weight: var(--breadcrumbs-item-active-medium-font-weight); } .qtm-breadcrumb.qtm-large .qtm-breadcrumb-item:last-child { font-weight: var(--breadcrumbs-item-active-large-font-weight); } .qtm-breadcrumb.qtm-small .qtm-icon { font-size: var(--breadcrumbs-item-small-icon-size); } .qtm-breadcrumb.qtm-small .qtm-icon:first-child { margin-right: var(--breadcrumbs-item-small-icon-margin-right); } .qtm-breadcrumb.qtm-medium .qtm-icon { font-size: var(--breadcrumbs-item-medium-icon-size); } .qtm-breadcrumb.qtm-medium .qtm-icon:first-child { margin-right: var(--breadcrumbs-item-medium-icon-margin-right); } .qtm-breadcrumb.qtm-large .qtm-icon { font-size: var(--breadcrumbs-item-large-icon-size); } .qtm-breadcrumb.qtm-large .qtm-icon:first-child { margin-right: var(--breadcrumbs-item-large-icon-margin-right); } .qtm-breadcrumb .qtm-breadcrumb-item:not(:last-child):after, .qtm-breadcrumb.qtm-separator-slash .qtm-breadcrumb-item:not(:last-child):after { color: var(--breadcrumbs-separator-slash-color); content: "/"; } .qtm-breadcrumb.qtm-separator-chevron .qtm-breadcrumb-item:not(:last-child):after { font-family: Material Icons Round, Material Icons; color: var(--breadcrumbs-separator-chevron-color); content: "chevron_right"; line-height: inherit; font-size: var(--breadcrumbs-separator-chevron-medium-icon-size); } .qtm-breadcrumb.qtm-separator-chevron.qtm-small .qtm-breadcrumb-item:not(:last-child):after { font-size: var(--breadcrumbs-separator-chevron-small-icon-size); } .qtm-breadcrumb.qtm-separator-chevron.qtm-medium .qtm-breadcrumb-item:not(:last-child):after { font-size: var(--breadcrumbs-separator-chevron-medium-icon-size); } .qtm-breadcrumb.qtm-separator-chevron.qtm-large .qtm-breadcrumb-item:not(:last-child):after { font-size: var(--breadcrumbs-separator-chevron-large-icon-size); } .qtm-breadcrumb.qtm-neutral .qtm-breadcrumb-item > * { color: var(--breadcrumbs-item-neutral-font-color); } .qtm-breadcrumb.qtm-neutral .qtm-breadcrumb-item:active > * { color: var(--breadcrumbs-item-neutral-pressed-font-color); } .qtm-breadcrumb.qtm-neutral .qtm-breadcrumb-item:last-child > * { color: var(--breadcrumbs-item-neutral-active-font-color); } .qtm-breadcrumb.qtm-small { font-size: var(--breadcrumbs-item-small-font-size); line-height: var(--breadcrumbs-item-small-line-height); font-weight: var(--breadcrumbs-item-small-font-weight); } .qtm-breadcrumb.qtm-medium { font-size: var(--breadcrumbs-item-medium-font-size); line-height: var(--breadcrumbs-item-medium-line-height); font-weight: var(--breadcrumbs-item-medium-font-weight); } .qtm-breadcrumb.qtm-large { font-size: var(--breadcrumbs-item-large-font-size); line-height: var(--breadcrumbs-item-large-line-height); font-weight: var(--breadcrumbs-item-large-font-weight); } .qtm-button { border-width: 0; border-radius: var(--button-border-radius); font-weight: var(--button-medium-font-weight); font-family: var(--button-font-family); display: flex; justify-content: center; align-items: center; width: -moz-fit-content; width: fit-content; cursor: pointer; position: relative; } .qtm-button:disabled { cursor: not-allowed; } .qtm-button:disabled * { pointer-events: none; } .qtm-button:focus { outline: none; } .qtm-button:active { outline: none; } .qtm-button:before { width: calc(100% + calc((var(--button-ring-offset-width) + var(--button-ring-width)) * 2)); height: calc(100% + calc((var(--button-ring-offset-width) + var(--button-ring-width)) * 2)); position: absolute; top: calc(0px - var(--button-ring-offset-width) - var(--button-ring-width)); left: calc(0px - var(--button-ring-offset-width) - var(--button-ring-width)); content: ""; border: var(--button-ring-width) solid var(--button-ring-color); border-radius: var(--button-border-radius); display: none; } .qtm-button:focus-visible { outline: none; } .qtm-button:focus-visible:before { display: block; } .qtm-button.qtm-small { padding-top: var(--button-small-padding-top); padding-left: var(--button-small-padding-left); padding-right: var(--button-small-padding-right); padding-bottom: var(--button-small-padding-bottom); height: var(--button-small-height); font-size: var(--button-small-font-size); line-height: var(--button-small-line-height); } .qtm-button.qtm-small .qtm-icon { font-size: var(--button-small-line-height); width: var(--button-small-line-height); height: var(--button-small-line-height); } .qtm-button.qtm-small .qtm-icon:first-child:not(:only-child) { margin-right: var(--button-icon-small-margin-horizontal); } .qtm-button.qtm-small .qtm-icon:last-child:not(:only-child) { margin-left: var(--button-icon-small-margin-horizontal); } .qtm-button.qtm-small .qtm-icon:only-child { font-size: var(--button-icononly-small-icon-size); width: var(--button-icononly-small-icon-size); height: var(--button-icononly-small-icon-size); margin-top: calc(var(--button-icononly-small-padding) - var(--button-small-padding-top)); margin-left: calc(var(--button-icononly-small-padding) - var(--button-small-padding-left)); margin-right: calc(var(--button-icononly-small-padding) - var(--button-small-padding-right)); margin-bottom: calc(var(--button-icononly-small-padding) - var(--button-small-padding-bottom)); } .qtm-button.qtm-medium, .qtm-button { padding-top: var(--button-medium-padding-top); padding-left: var(--button-medium-padding-left); padding-right: var(--button-medium-padding-right); padding-bottom: var(--button-medium-padding-bottom); height: var(--button-medium-height); font-size: var(--button-medium-font-size); line-height: var(--button-medium-line-height); } .qtm-button.qtm-medium .qtm-icon, .qtm-button .qtm-icon { font-size: var(--button-medium-line-height); width: var(--button-medium-line-height); height: var(--button-medium-line-height); } .qtm-button.qtm-medium .qtm-icon:first-child:not(:only-child), .qtm-button .qtm-icon:first-child:not(:only-child) { margin-right: var(--button-icon-margin-horizontal); } .qtm-button.qtm-medium .qtm-icon:last-child:not(:only-child), .qtm-button .qtm-icon:last-child:not(:only-child) { margin-left: var(--button-icon-margin-horizontal); } .qtm-button.qtm-medium .qtm-icon:only-child, .qtm-button .qtm-icon:only-child { font-size: var(--button-icononly-medium-icon-size); width: var(--button-icononly-medium-icon-size); height: var(--button-icononly-medium-icon-size); margin-top: calc(var(--button-icononly-medium-padding) - var(--button-medium-padding-top)); margin-left: calc(var(--button-icononly-medium-padding) - var(--button-medium-padding-left)); margin-right: calc(var(--button-icononly-medium-padding) - var(--button-medium-padding-right)); margin-bottom: calc(var(--button-icononly-medium-padding) - var(--button-medium-padding-bottom)); } .qtm-button.qtm-large { padding-top: var(--button-large-padding-top); padding-left: var(--button-large-padding-left); padding-right: var(--button-large-padding-right); padding-bottom: var(--button-large-padding-bottom); height: var(--button-large-height); font-size: var(--button-large-font-size); line-height: var(--button-large-line-height); } .qtm-button.qtm-large .qtm-icon { font-size: var(--button-large-line-height); width: var(--button-large-line-height); height: var(--button-large-line-height); } .qtm-button.qtm-large .qtm-icon:first-child:not(:only-child) { margin-right: var(--button-icon-margin-horizontal); } .qtm-button.qtm-large .qtm-icon:last-child:not(:only-child) { margin-left: var(--button-icon-margin-horizontal); } .qtm-button.qtm-large .qtm-icon:only-child { font-size: var(--button-icononly-large-icon-size); width: var(--button-icononly-large-icon-size); height: var(--button-icononly-large-icon-size); margin-top: calc(var(--button-icononly-large-padding) - var(--button-large-padding-top)); margin-left: calc(var(--button-icononly-large-padding) - var(--button-large-padding-left)); margin-right: calc(var(--button-icononly-large-padding) - var(--button-large-padding-right)); margin-bottom: calc(var(--button-icononly-large-padding) - var(--button-large-padding-bottom)); } .qtm-button.qtm-xlarge { padding-top: var(--button-xlarge-padding-top); padding-left: var(--button-xlarge-padding-left); padding-right: var(--button-xlarge-padding-right); padding-bottom: var(--button-xlarge-padding-bottom); height: var(--button-xlarge-height); font-size: var(--button-xlarge-font-size); line-height: var(--button-xlarge-line-height); } .qtm-button.qtm-xlarge .qtm-icon { font-size: var(--button-xlarge-line-height); width: var(--button-xlarge-line-height); height: var(--button-xlarge-line-height); } .qtm-button.qtm-xlarge .qtm-icon:first-child:not(:only-child) { margin-right: var(--button-icon-margin-horizontal); } .qtm-button.qtm-xlarge .qtm-icon:last-child:not(:only-child) { margin-left: var(--button-icon-margin-horizontal); } .qtm-button.qtm-xlarge .qtm-icon:only-child { font-size: var(--button-icononly-xlarge-icon-size); width: var(--button-icononly-xlarge-icon-size); height: var(--button-icononly-xlarge-icon-size); margin-top: calc(var(--button-icononly-xlarge-padding) - var(--button-xlarge-padding-top)); margin-left: calc(var(--button-icononly-xlarge-padding) - var(--button-xlarge-padding-left)); margin-right: calc(var(--button-icononly-xlarge-padding) - var(--button-xlarge-padding-right)); margin-bottom: calc(var(--button-icononly-xlarge-padding) - var(--button-xlarge-padding-bottom)); } .qtm-button.qtm-filled:disabled, .qtm-button:disabled { background-color: var(--button-filled-disabled-background-color); color: var(--button-disabled-label-color); } .qtm-button.qtm-filled.qtm-primary:not([disabled]), .qtm-button:not([disabled]) { color: var(--button-filled-label-color); background-color: var(--button-filled-primary-background-color); } .qtm-button.qtm-filled.qtm-primary:not([disabled]):hover, .qtm-button:not([disabled]):hover { background-color: var(--button-filled-primary-hover-background-color); } .qtm-button.qtm-filled.qtm-primary:not([disabled]):active, .qtm-button:not([disabled]):active { background-color: var(--button-filled-primary-pressed-background-color); } .qtm-button.qtm-filled.qtm-success:not([disabled]) { color: var(--button-filled-success-label-color); background-color: var(--button-filled-success-background-color); } .qtm-button.qtm-filled.qtm-success:not([disabled]):hover { background-color: var(--button-filled-success-hover-background-color); } .qtm-button.qtm-filled.qtm-success:not([disabled]):active { background-color: var(--button-filled-success-pressed-background-color); } .qtm-button.qtm-filled.qtm-warning:not([disabled]) { color: var(--button-filled-warning-label-color); background-color: var(--button-filled-warning-background-color); } .qtm-button.qtm-filled.qtm-warning:not([disabled]):hover { background-color: var(--button-filled-warning-hover-background-color); } .qtm-button.qtm-filled.qtm-warning:not([disabled]):active { background-color: var(--button-filled-warning-pressed-background-color); } .qtm-button.qtm-filled.qtm-danger:not([disabled]) { color: var(--button-filled-danger-label-color); background-color: var(--button-filled-danger-background-color); } .qtm-button.qtm-filled.qtm-danger:not([disabled]):hover { background-color: var(--button-filled-danger-hover-background-color); } .qtm-button.qtm-filled.qtm-danger:not([disabled]):active { background-color: var(--button-filled-danger-pressed-background-color); } .qtm-button.qtm-outline, .qtm-button.qtm-outline:focus { outline-width: var(--button-outline-border-width); outline-style: var(--button-outline-border-style); border-radius: var(--button-border-radius); outline-offset: calc(0rem - var(--button-outline-border-width)); } .qtm-button.qtm-outline:disabled { color: var(--button-disabled-label-color); background-color: var(--button-outline-disabled-background-color); outline-color: var(--button-outline-disabled-border-color); } .qtm-button.qtm-outline.qtm-primary:not([disabled]), .qtm-button.qtm-outline:not([disabled]) { color: var(--button-outline-primary-label-color); outline-color: var(--button-outline-primary-border-color); background-color: var(--button-outline-background-color); } .qtm-button.qtm-outline.qtm-primary:not([disabled]):hover, .qtm-button.qtm-outline:not([disabled]):hover { color: var(--button-outline-primary-hover-label-color); outline-color: var(--button-outline-primary-hover-border-color); background-color: var(--button-outline-hover-background-color); } .qtm-button.qtm-outline.qtm-primary:not([disabled]):active, .qtm-button.qtm-outline:not([disabled]):active { color: var(--button-outline-primary-pressed-label-color); outline-color: var(--button-outline-primary-pressed-border-color); background-color: var(--button-outline-pressed-background-color); } .qtm-button.qtm-outline.qtm-neutral:not([disabled]) { color: var(--button-outline-neutral-label-color); outline-color: var(--button-outline-neutral-border-color); background-color: var(--button-outline-background-color); } .qtm-button.qtm-outline.qtm-neutral:not([disabled]):hover { color: var(--button-outline-neutral-hover-label-color); outline-color: var(--button-outline-neutral-hover-border-color); background-color: var(--button-outline-hover-background-color); } .qtm-button.qtm-outline.qtm-neutral:not([disabled]):active { color: var(--button-outline-neutral-pressed-label-color); outline-color: var(--button-outline-neutral-pressed-border-color); background-color: var(--button-outline-pressed-background-color); } .qtm-button.qtm-outline.qtm-success:not([disabled]) { color: var(--button-outline-success-label-color); outline-color: var(--button-outline-success-border-color); background-color: var(--button-outline-background-color); } .qtm-button.qtm-outline.qtm-success:not([disabled]):hover { color: var(--button-outline-success-hover-label-color); outline-color: var(--button-outline-success-hover-border-color); background-color: var(--button-outline-hover-background-color); } .qtm-button.qtm-outline.qtm-success:not([disabled]):active { color: var(--button-outline-success-pressed-label-color); outline-color: var(--button-outline-success-pressed-border-color); background-color: var(--button-outline-pressed-background-color); } .qtm-button.qtm-outline.qtm-warning:not([disabled]) { color: var(--button-outline-warning-label-color); outline-color: var(--button-outline-warning-border-color); background-color: var(--button-outline-background-color); } .qtm-button.qtm-outline.qtm-warning:not([disabled]):hover { color: var(--button-outline-warning-hover-label-color); outline-color: var(--button-outline-warning-hover-border-color); background-color: var(--button-outline-hover-background-color); } .qtm-button.qtm-outline.qtm-warning:not([disabled]):active { color: var(--button-outline-warning-pressed-label-color); outline-color: var(--button-outline-warning-pressed-border-color); background-color: var(--button-outline-pressed-background-color); } .qtm-button.qtm-outline.qtm-danger:not([disabled]) { color: var(--button-outline-danger-label-color); outline-color: var(--button-outline-danger-border-color); background-color: var(--button-outline-background-color); } .qtm-button.qtm-outline.qtm-danger:not([disabled]):hover { color: var(--button-outline-danger-hover-label-color); outline-color: var(--button-outline-danger-hover-border-color); background-color: var(--button-outline-hover-background-color); } .qtm-button.qtm-outline.qtm-danger:not([disabled]):active { color: var(--button-outline-danger-pressed-label-color); outline-color: var(--button-outline-danger-pressed-border-color); background-color: var(--button-outline-pressed-background-color); } .qtm-button.qtm-ghost { background-color: var(--button-ghost-background-color); } .qtm-button.qtm-ghost:hover:not([disabled]) { background-color: var(--button-ghost-hover-background-color); } .qtm-button.qtm-ghost:disabled { color: var(--button-disabled-label-color); background-color: var(--button-ghost-disabled-background-color); } .qtm-button.qtm-ghost:active.qtm-ghost:not([disabled]) { background-color: var(--button-ghost-pressed-background-color); } .qtm-button.qtm-ghost:active.qtm-ghost:not([disabled]).qtm-primary { color: var(--button-ghost-primary-pressed-label-color); } .qtm-button.qtm-ghost:active.qtm-ghost:not([disabled]).qtm-neutral { color: var(--button-ghost-neutral-pressed-label-color); } .qtm-button.qtm-ghost:active.qtm-ghost:not([disabled]).qtm-inverted { color: var(--button-ghost-inverted-pressed-label-color); background-color: var(--button-ghost-inverted-pressed-background-color); } .qtm-button.qtm-ghost.qtm-primary:not([disabled]) { color: var(--button-ghost-primary-label-color); } .qtm-button.qtm-ghost.qtm-primary:not([disabled]):hover { color: var(--button-ghost-primary-hover-label-color); } .qtm-button.qtm-ghost.qtm-neutral:not([disabled]) { color: var(--button-ghost-neutral-label-color); } .qtm-button.qtm-ghost.qtm-neutral:not([disabled]):hover { color: var(--button-ghost-neutral-hover-label-color); } .qtm-button.qtm-ghost.qtm-inverted:not([disabled]) { color: var(--button-ghost-inverted-label-color); } .qtm-button.qtm-ghost.qtm-inverted:not([disabled]):hover { color: var(--button-ghost-inverted-hover-label-color); background-color: var(--button-ghost-inverted-hover-background-color); } .qtm-button.qtm-ghost.qtm-inverted:disabled { color: var(--button-ghost-inverted-disabled-label-color); background-color: var(--button-ghost-inverted-disabled-background-color); } .qtm-checkbox { display: flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-family: var(--checkbox-font-family); font-weight: var(--checkbox-font-weight); color: var(--checkbox-label-color); } .qtm-checkbox input { margin: 0; } .qtm-checkbox.qtm-small { font-size: var(--checkbox-small-label-font-size); line-height: var(--checkbox-small-label-line-height); } .qtm-checkbox.qtm-small input[type=checkbox] { height: var(--checkbox-small-input-height); width: var(--checkbox-small-input-width); } .qtm-checkbox.qtm-medium, .qtm-checkbox { font-size: var(--checkbox-medium-label-font-size); line-height: var(--checkbox-medium-label-line-height); } .qtm-checkbox.qtm-medium input[type=checkbox], .qtm-checkbox input[type=checkbox] { height: var(--checkbox-medium-input-height); width: var(--checkbox-medium-input-width); } .qtm-checkbox.qtm-large { font-size: var(--checkbox-large-label-font-size); line-height: var(--checkbox-large-label-line-height); } .qtm-checkbox.qtm-large input[type=checkbox] { height: var(--checkbox-large-input-height); width: var(--checkbox-large-input-width); } .qtm-checkbox input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; position: relative; cursor: pointer; background-color: var(--checkbox-background-color); border-color: var(--checkbox-unchecked-border-color); border-style: solid; border-width: var(--checkbox-border-width); border-radius: var(--checkbox-border-radius); margin-right: var(--checkbox-input-margin-right); outline: none; } .qtm-checkbox input[type=checkbox]:after { position: absolute; display: none; content: ""; width: 100%; height: 100%; background-color: var(--checkbox-checked-icon-color); } .qtm-checkbox:hover input[type=checkbox] { border-color: var(--checkbox-unchecked-hover-border-color); background-color: var(--checkbox-unchecked-hover-background-color); } .qtm-checkbox input[type=checkbox]:focus-visible { outline: none; } .qtm-checkbox input[type=checkbox]:focus-visible:before { width: calc(100% + (var(--checkbox-focus-ring-offset-width) + var(--checkbox-focus-ring-border-width) + var(--checkbox-border-width)) * 2); height: calc(100% + (var(--checkbox-focus-ring-offset-width) + var(--checkbox-focus-ring-border-width) + var(--checkbox-border-width)) * 2); position: absolute; top: calc(0px - var(--checkbox-focus-ring-offset-width) - var(--checkbox-focus-ring-border-width) - var(--checkbox-border-width)); left: calc(0px - var(--checkbox-focus-ring-offset-width) - var(--checkbox-focus-ring-border-width) - var(--checkbox-border-width)); content: ""; border: var(--checkbox-focus-ring-border-width) solid var(--checkbox-focus-ring-border-color); border-radius: var(--checkbox-border-radius); display: block; } .qtm-checkbox:active input[type=checkbox] { border-color: var(--checkbox-unchecked-pressed-border-color); background-color: var(--checkbox-unchecked-pressed-background-color); } .qtm-checkbox.qtm-disabled { cursor: not-allowed; color: var(--checkbox-disabled-label-color); } .qtm-checkbox.qtm-disabled input[type=checkbox]:disabled { border-color: var(--checkbox-unchecked-disabled-border-color); background-color: var(--checkbox-unchecked-disabled-background-color); box-shadow: none; cursor: not-allowed; } .qtm-checkbox.qtm-error input[type=checkbox] { border-color: var(--checkbox-error-border-color) !important; } .qtm-checkbox input[type=checkbox]:checked { background-color: var(--checkbox-checked-background-color); border-color: var(--checkbox-checked-background-color); } .qtm-checkbox input[type=checkbox]:checked:after { display: block; -webkit-mask: url('data:image/svg+xml, ') no-repeat 50% 50%; mask: url('data:image/svg+xml, ') no-repeat 50% 50%; } .qtm-checkbox:hover input[type=checkbox]:checked { border-color: var(--checkbox-checked-hover-background-color); background-color: var(--checkbox-checked-hover-background-color); } .qtm-checkbox:active input[type=checkbox]:checked { border-color: var(--checkbox-checked-pressed-background-color); background-color: var(--checkbox-checked-pressed-background-color); } .qtm-checkbox.qtm-disabled input[type=checkbox]:disabled:checked { border-color: var(--checkbox-checked-disabled-background-color); background-color: var(--checkbox-checked-disabled-background-color); } .qtm-checkbox.qtm-disabled input[type=checkbox]:disabled:checked:after { background-color: var(--checkbox-checked-disabled-icon-color); } .qtm-checkbox input[type=checkbox]:indeterminate { background-color: var(--checkbox-checked-background-color); border-color: var(--checkbox-checked-background-color); } .qtm-checkbox input[type=checkbox]:indeterminate:after { display: block; -webkit-mask: url('data:image/svg+xml, ') no-repeat 50% 50%; mask: url('data:image/svg+xml, ') no-repeat 50% 50%; } .qtm-checkbox:hover input[type=checkbox]:indeterminate { border-color: var(--checkbox-checked-hover-background-color); background-color: var(--checkbox-checked-hover-background-color); } .qtm-checkbox:active input[type=checkbox]:indeterminate { border-color: var(--checkbox-checked-pressed-background-color); background-color: var(--checkbox-checked-pressed-background-color); } .qtm-checkbox.qtm-disabled input[type=checkbox]:disabled:indeterminate { border-color: var(--checkbox-checked-disabled-background-color); background-color: var(--checkbox-checked-disabled-background-color); } .qtm-checkbox.qtm-disabled input[type=checkbox]:disabled:indeterminate:after { background-color: var(--checkbox-checked-disabled-icon-color); } .qtm-checkbox.qtm-neutral input[type=checkbox]:checked { background-color: var(--checkbox-neutral-checked-background-color); border-color: var(--checkbox-neutral-checked-background-color); } .qtm-checkbox.qtm-neutral:hover input[type=checkbox]:checked { border-color: var(--checkbox-neutral-checked-hover-background-color); background-color: var(--checkbox-neutral-checked-hover-background-color); } .qtm-checkbox.qtm-neutral:active input[type=checkbox]:checked { border-color: var(--checkbox-neutral-checked-pressed-background-color); background-color: var(--checkbox-neutral-checked-pressed-background-color); } .qtm-checkbox.qtm-neutral.qtm-disabled input[type=checkbox]:disabled:checked { border-color: var(--checkbox-checked-disabled-background-color); background-color: var(--checkbox-checked-disabled-background-color); } .qtm-checkbox.qtm-neutral input[type=checkbox]:indeterminate { background-color: var(--checkbox-neutral-checked-background-color); border-color: var(--checkbox-neutral-checked-background-color); } .qtm-checkbox.qtm-neutral:hover input[type=checkbox]:indeterminate { border-color: var(--checkbox-neutral-checked-hover-background-color); background-color: var(--checkbox-neutral-checked-hover-background-color); } .qtm-checkbox.qtm-neutral:active input[type=checkbox]:indeterminate { border-color: var(--checkbox-neutral-checked-pressed-background-color); background-color: var(--checkbox-neutral-checked-pressed-background-color); } .qtm-checkbox.qtm-neutral.qtm-disabled input[type=checkbox]:disabled:indeterminate { border-color: var(--checkbox-checked-disabled-background-color); background-color: var(--checkbox-checked-disabled-background-color); } .qtm-checkbox-group { display: flex; flex-flow: column wrap; } .qtm-checkbox-group.qtm-small > *:not(:last-child) { margin-bottom: var(--checkboxgroup-small-checkbox-margin-bottom); } .qtm-checkbox-group.qtm-small .qtm-checkbox { font-size: var(--checkbox-small-label-font-size); line-height: var(--checkbox-small-label-line-height); } .qtm-checkbox-group.qtm-small .qtm-checkbox input[type=checkbox] { height: var(--checkbox-small-input-height); width: var(--checkbox-small-input-width); } .qtm-checkbox-group.qtm-medium > *:not(:last-child), .qtm-checkbox-group > *:not(:last-child) { margin-bottom: var(--checkboxgroup-medium-checkbox-margin-bottom); } .qtm-checkbox-group.qtm-medium .qtm-checkbox, .qtm-checkbox-group .qtm-checkbox { font-size: var(--checkbox-medium-label-font-size); line-height: var(--checkbox-medium-label-line-height); } .qtm-checkbox-group.qtm-medium .qtm-checkbox input[type=checkbox], .qtm-checkbox-group .qtm-checkbox input[type=checkbox] { height: var(--checkbox-medium-input-height); width: var(--checkbox-medium-input-width); } .qtm-checkbox-group.qtm-large > *:not(:last-child) { margin-bottom: var(--checkboxgroup-large-checkbox-margin-bottom); } .qtm-checkbox-group.qtm-large .qtm-checkbox { font-size: var(--checkbox-large-label-font-size); line-height: var(--checkbox-large-label-line-height); } .qtm-checkbox-group.qtm-large .qtm-checkbox input[type=checkbox] { height: var(--checkbox-large-input-height); width: var(--checkbox-large-input-width); } .qtm-divider { width: 100%; display: block; border-radius: var(--divider-rounded-radius); background-color: var(--divider-color); } .qtm-divider.qtm-small { height: var(--divider-small-height); } .qtm-divider, .qtm-divider.qtm-medium { height: var(--divider-medium-height); } .qtm-divider.qtm-large { height: var(--divider-large-height); } .qtm-divider.qtm-sharp { border-radius: var(--divider-sharpe-radius); } .qtm-divider.qtm-vertical.qtm-small { height: 100%; width: var(--divider-small-height); } .qtm-divider.qtm-vertical, .qtm-divider.qtm-vertical.qtm-medium { height: 100%; width: var(--divider-medium-height); } .qtm-divider.qtm-vertical.qtm-large { height: 100%; width: var(--divider-large-height); } .qtm-doughnut { display: flex; flex-direction: column; align-items: center; border-radius: var(--border-radius-large); padding: var(--spacing-m); background-color: var(--color-bluegrey-25); gap: var(--spacing-m); } .qtm-doughnut .qtm-doughnut-header { display: flex; flex-direction: column; text-align: center; } .qtm-doughnut .qtm-doughnut-header .qtm-doughnut-header-title { font-size: var(--typography-body-1-size); line-height: var(--typography-body-1-line-height); font-family: var(--typography-body-1-font-family); font-weight: var(--typography-body-1-font-weight); color: var(--color-bluegrey-900); } .qtm-doughnut .qtm-doughnut-content { display: flex; align-items: center; gap: var(--spacing-m); color: var(--color-bluegrey-700); } .qtm-doughnut .qtm-doughnut-content .qtm-chart { max-height: 150px; position: relative; } .qtm-doughnut .qtm-doughnut-content .qtm-chart .qtm-key-metric { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); } .qtm-doughnut .qtm-doughnut-content .qtm-chart .qtm-key-metric .qtm-key-metric-data { font-size: var(--typography-title-3-size); line-height: var(--typography-title-3-line-height); font-family: var(--typography-title-3-font-family); font-weight: var(--typography-title-3-font-weight); } .qtm-doughnut .qtm-doughnut-content .qtm-chart .qtm-key-metric .qtm-key-metric-label { font-size: var(--typography-caption-1-size); line-height: var(--typography-caption-1-line-height); font-family: var(--typography-caption-1-font-family); font-weight: var(--typography-caption-1-font-weight); } .qtm-doughnut .qtm-doughnut-content .qtm-doughnut-legend { display: flex; flex-direction: column; padding: var(--spacing-xxs); gap: var(--spacing-xs); } .qtm-doughnut .qtm-doughnut-content .qtm-doughnut-legend .qtm-doughnut-legend-label { display: flex; align-items: center; gap: var(--spacing-xxs); font-size: var(--typography-caption-2-size); line-height: var(--typography-caption-2-line-height); font-family: var(--typography-caption-2-font-family); font-weight: var(--typography-caption-2-font-weight); } .qtm-doughnut .qtm-doughnut-content .qtm-doughnut-legend .qtm-doughnut-legend-label .qtm-dot { width: var(--spacing-xs); height: var(--spacing-xs); border-radius: var(--border-radius-full); } .qtm-drawer { height: var(--drawer-height); box-shadow: var(--drawer-shadow); display: flex; flex-direction: column; background-color: var(--drawer-background-color); } .qtm-drawer .qtm-drawer-header { border-bottom-style: solid; border-bottom-width: var(--drawer-divider-height); border-bottom-color: var(--drawer-divider-color); } .qtm-drawer .qtm-drawer-body {} .qtm-drawer .qtm-drawer-footer { margin-top: auto; } .qtm-drawer .qtm-menu-item-list .qtm-menu-item-label { font-weight: var(--drawer-itemlist-item-font-weight); } .qtm-drawer .qtm-menu-item-list .qtm-menu-item.qtm-active .qtm-menu-item-label { color: var(--drawer-itemlist-item-active-label-color); } .qtm-drawer .qtm-menu-item-list .qtm-submenu-item { font-weight: var(--drawer-itemlist-subitem-font-weight); color: var(--drawer-itemlist-subitem-label-color); } .qtm-drawer .qtm-menu-item-list .qtm-submenu-item.qtm-active { font-weight: var(--drawer-itemlist-subitem-active-font-weight); color: var(--drawer-itemlist-subitem-active-label-color); } .qtm-drawer, .qtm-drawer.qtm-medium { width: var(--drawer-medium-expanded-width); } .qtm-drawer .qtm-drawer-header, .qtm-drawer.qtm-medium .qtm-drawer-header { padding: var(--drawer-medium-expanded-header-padding-vertical) var(--drawer-medium-expanded-header-padding-horizontal); } .qtm-drawer .qtm-menu-item-list .qtm-menu-item-label, .qtm-drawer.qtm-medium .qtm-menu-item-list .qtm-menu-item-label { padding-left: var(--drawer-medium-expanded-itemlist-item-padding-left-override); padding-right: var(--drawer-medium-expanded-itemlist-item-padding-horizontal); padding-top: var(--drawer-medium-expanded-itemlist-item-padding-vertical); padding-bottom: var(--drawer-medium-expanded-itemlist-item-padding-vertical); } .qtm-drawer .qtm-menu-item-list .qtm-submenu-item, .qtm-drawer.qtm-medium .qtm-menu-item-list .qtm-submenu-item { padding-left: var(--drawer-medium-expanded-itemlist-subitem-padding-left-override); padding-right: var(--drawer-medium-expanded-itemlist-subitem-padding-horizontal); padding-top: var(--drawer-medium-expanded-itemlist-subitem-padding-vertical); padding-bottom: var(--drawer-medium-expanded-itemlist-subitem-padding-vertical); } .qtm-drawer.qtm-small { width: var(--drawer-small-expanded-width); } .qtm-drawer.qtm-small .qtm-drawer-header { padding: var(--drawer-small-expanded-header-padding-vertical) var(--drawer-small-expanded-header-padding-horizontal); } .qtm-drawer.qtm-small .qtm-menu-item-list .qtm-menu-item-label { padding-left: var(--drawer-small-expanded-itemlist-item-padding-left-override); padding-right: var(--drawer-small-expanded-itemlist-item-padding-horizontal); padding-top: var(--drawer-small-expanded-itemlist-item-padding-vertical); padding-bottom: var(--drawer-small-expanded-itemlist-item-padding-vertical); } .qtm-drawer.qtm-small .qtm-menu-item-list .qtm-submenu-item { padding-left: var(--drawer-small-expanded-itemlist-subitem-padding-left-override); padding-right: var(--drawer-small-expanded-itemlist-subitem-padding-horizontal); padding-top: var(--drawer-small-expanded-itemlist-subitem-padding-vertical); padding-bottom: var(--drawer-small-expanded-itemlist-subitem-padding-vertical); } .qtm-drawer.qtm-large { width: var(--drawer-large-expanded-width); } .qtm-drawer.qtm-large .qtm-drawer-header { padding: var(--drawer-large-expanded-header-padding-vertical) var(--drawer-large-expanded-header-padding-horizontal); } .qtm-drawer.qtm-large .qtm-menu-item-list .qtm-menu-item-label { padding-left: var(--drawer-large-expanded-itemlist-item-padding-left-override); padding-right: var(--drawer-large-expanded-itemlist-item-padding-horizontal); padding-top: var(--drawer-large-expanded-itemlist-item-padding-vertical); padding-bottom: var(--drawer-large-expanded-itemlist-item-padding-vertical); } .qtm-drawer.qtm-large .qtm-menu-item-list .qtm-submenu-item { padding-left: var(--drawer-large-expanded-itemlist-subitem-padding-left-override); padding-right: var(--drawer-large-expanded-itemlist-subitem-padding-horizontal); padding-top: var(--drawer-large-expanded-itemlist-subitem-padding-vertical); padding-bottom: var(--drawer-large-expanded-itemlist-subitem-padding-vertical); } .qtm-dropdown { display: inline-flex; position: relative; vertical-align: top; } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button:not([disabled]), .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-filled.qtm-primary:not([disabled]) { background-color: var(--button-filled-primary-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-filled.qtm-success:not([disabled]) { background-color: var(--button-filled-success-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-filled.qtm-warning:not([disabled]) { background-color: var(--button-filled-warning-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-filled.qtm-danger:not([disabled]) { background-color: var(--button-filled-danger-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-outline:not([disabled]) { background-color: var(--button-outline-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-outline:not([disabled]).qtm-primary { color: var(--button-outline-primary-pressed-label-color); outline-color: var(--button-outline-primary-pressed-border-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-outline:not([disabled]).qtm-neutral { color: var(--button-outline-neutral-pressed-label-color); outline-color: var(--button-outline-neutral-pressed-border-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-outline:not([disabled]).qtm-success { color: var(--button-outline-success-pressed-label-color); outline-color: var(--button-outline-success-pressed-border-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-outline:not([disabled]).qtm-warning { color: var(--button-outline-warning-pressed-label-color); outline-color: var(--button-outline-warning-pressed-border-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-outline:not([disabled]).qtm-danger { color: var(--button-outline-danger-pressed-label-color); outline-color: var(--button-outline-danger-pressed-border-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-ghost:not([disabled]) { background-color: var(--button-ghost-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-ghost:not([disabled]).qtm-primary { color: var(--button-ghost-primary-pressed-label-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-ghost:not([disabled]).qtm-neutral { color: var(--button-ghost-neutral-pressed-label-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger .qtm-button.qtm-ghost:not([disabled]).qtm-inverted { color: var(--button-ghost-inverted-pressed-label-color); background-color: var(--button-ghost-inverted-pressed-background-color); } .qtm-dropdown.qtm-visible .qtm-dropdown-trigger input:not(.qtm-disabled) { border-color: var(--input-focus-border-color); } .qtm-dropdown-overlay { display: none; background-color: var(--dropdown-overlay-background-color); border-radius: var(--dropdown-overlay-border-radius); min-width: calc(100% + 2rem); position: absolute; margin-top: var(--dropdown-overlay-margin-top); padding-top: var(--dropdown-overlay-padding-vertical); padding-bottom: var(--dropdown-overlay-padding-vertical); box-shadow: var(--dropdown-overlay-shadow); left: 0; top: 100%; z-index: 1; } .qtm-dropdown.qtm-right .qtm-dropdown-overlay { left: auto; right: 0; } .qtm-dropdown.qtm-left .qtm-dropdown-overlay { left: 0; right: auto; } .qtm-dropdown.qtm-top .qtm-dropdown-overlay { bottom: 100%; top: auto; margin-top: 0; margin-bottom: var(--dropdown-overlay-margin-top); } .qtm-dropdown.qtm-bottom .qtm-dropdown-overlay { bottom: auto; top: 100%; margin-top: var(--dropdown-overlay-margin-top); margin-bottom: 0; } .qtm-dropdown.qtm-center .qtm-dropdown-overlay { left: 50%; transform: translateX(-50%); } .qtm-dropdown.qtm-visible .qtm-dropdown-overlay { display: block; } .qtm-dropdown-select:not(.qtm-disabled) .qtm-dropdown-trigger input[type=text] { cursor: pointer } .qtm-dropdown-select .qtm-disabled .qtm-dropdown-trigger input[type=text] { cursor: not-allowed } .qtm-dropdown-select.qtm-dropdown { display: block } .qtm-dropdown-select .qtm-dropdown-overlay { min-width: 100% } .qtm-form-caption { font-family: var(--formfield-font-family); font-weight: var(--formfield-font-weight); color: var(--formfield-caption-color); margin-top: var(--formfield-caption-margin-top); } .qtm-form-caption.qtm-small { font-size: var(--formfield-caption-small-font-size); line-height: var(--formfield-caption-small-line-height); } .qtm-form-caption.qtm-medium, .qtm-form-caption { font-size: var(--formfield-caption-medium-font-size); line-height: var(--formfield-caption-medium-line-height); } .qtm-form-caption.qtm-large { font-size: var(--formfield-caption-large-font-size); line-height: var(--formfield-caption-large-line-height); } .qtm-form-caption.qtm-disabled { color: var(--formfield-caption-disabled-color); cursor: not-allowed; } .qtm-form-caption.qtm-warning { color: var(--formfield-caption-warning-color); } .qtm-form-caption.qtm-error { color: var(--formfield-caption-error-color); } .qtm-form-field { display: block } .qtm-form-label { font-family: var(--formfield-font-family); font-weight: var(--formfield-font-weight); color: var(--formfield-label-color); margin-bottom: var(--formfield-label-margin-bottom); display: flex; } .qtm-form-label.qtm-small { font-size: var(--formfield-label-small-font-size); line-height: var(--formfield-label-small-line-height); } .qtm-form-label.qtm-medium, .qtm-form-label { font-size: var(--formfield-label-medium-font-size); line-height: var(--formfield-label-medium-line-height); } .qtm-form-label.qtm-large { font-size: var(--formfield-label-large-font-size); line-height: var(--formfield-label-large-line-height); } .qtm-form-label.qtm-required *:first-child:after { content: '*'; color: var(--formfield-label-requiredchar-color); margin-left: var(--formfield-label-requiredchar-margin-left); } .qtm-form-label.qtm-disabled { color: var(--formfield-label-disabled-color); cursor: not-allowed; } .qtm-form-label .qtm-counter { color: var(--formfield-counter-color); margin-left: auto; padding-left: var(--formfield-counter-margin-left); } .qtm-grid { --margin: var(--grids-xxsmall-margin); --gap: var(--grids-xxsmall-gap); display: grid; margin-left: var(--margin); margin-right: var(--margin); gap: var(--gap); grid-template-columns: repeat(var(--grids-xxsmall-columns), minmax(0, 1fr)); } @media (min-width: 360px) { .qtm-grid { --margin: var(--grids-xsmall-margin); --gap: var(--grids-xsmall-gap); grid-template-columns: repeat(var(--grids-xsmall-columns), minmax(0, 1fr)); } } @media (min-width: 600px) { .qtm-grid { --margin: var(--grids-small-margin); --gap: var(--grids-small-gap); grid-template-columns: repeat(var(--grids-small-columns), minmax(0, 1fr)); } } @media (min-width: 768px) { .qtm-grid { --margin: var(--grids-medium-margin); --gap: var(--grids-medium-gap); grid-template-columns: repeat(var(--grids-medium-columns), minmax(0, 1fr)); } } @media (min-width: 992px) { .qtm-grid { --margin: var(--grids-large-margin); --gap: var(--grids-large-gap); grid-template-columns: repeat(var(--grids-large-columns), minmax(0, 1fr)); } } @media (min-width: 1280px) { .qtm-grid { --margin: var(--grids-xlarge-margin); --gap: var(--grids-xlarge-gap); grid-template-columns: repeat(var(--grids-xlarge-columns), minmax(0, 1fr)); } } .qtm-header { display: flex; width: 100%; align-items: center; background-color: var(--header-container-background-color); box-shadow: var(--header-container-shadow); } .qtm-header .qtm-header-brand { margin-right: var(--header-brand-margin-right); display: flex; flex-shrink: 0; align-items: center; } .qtm-header .qtm-header-menu { display: flex; width: 100%; align-items: center; height: 100%; } .qtm-header .qtm-header-menu .qtm-header-menu-left { display: flex; align-items: center; height: 100%; flex: 1 1 0; margin-right: var(--header-menu-left-margin-right); } .qtm-header .qtm-header-menu .qtm-header-menu-right { margin-left: auto; display: flex; align-items: center; height: 100%; flex-shrink: 0; position: relative; } .qtm-header .qtm-header-divider { width: var(--header-divider-width); background-color: var(--header-divider-color); margin-right: var(--header-divider-margin-right); } .qtm-header.qtm-small { height: var(--header-small-container-height); padding-left: var(--header-small-container-padding-left); padding-right: var(--header-small-container-padding-right); } .qtm-header.qtm-small .qtm-header-divider { height: var(--header-small-divider-height); } .qtm-header, .qtm-header.qtm-medium { height: var(--header-medium-container-height); padding-left: var(--header-medium-container-padding-left); padding-right: var(--header-medium-container-padding-right); } .qtm-header .qtm-header-divider, .qtm-header.qtm-medium .qtm-header-divider { height: var(--header-medium-divider-height); } .qtm-header.qtm-large { height: var(--header-large-container-height); padding-left: var(--header-large-container-padding-left); padding-right: var(--header-large-container-padding-right); } .qtm-header.qtm-large .qtm-header-divider { height: var(--header-large-divider-height); } .qtm-icon { display: flex; align-items: center; justify-content: center; } .qtm-icon .material-icons { font-size: inherit; } .qtm-icon .material-icons-outlined { font-size: inherit; } .qtm-icon .material-icons-round { font-size: inherit; } .qtm-icon .material-icons-sharp { font-size: inherit; } .qtm-icon .material-icons-two-tone { font-size: inherit; } .qtm-icon-xsmall { --icon-size-value: var(--icon-xsmall-size); font-size: var(--icon-size-value) !important; width: var(--icon-size-value) !important; height: var(--icon-size-value) !important } .qtm-icon-small { --icon-size-value: var(--icon-small-size); font-size: var(--icon-size-value) !important; width: var(--icon-size-value) !important; height: var(--icon-size-value) !important } .qtm-icon-medium { --icon-size-value: var(--icon-medium-size); font-size: var(--icon-size-value) !important; width: var(--icon-size-value) !important; height: var(--icon-size-value) !important } .qtm-icon-large { --icon-size-value: var(--icon-large-size); font-size: var(--icon-size-value) !important; width: var(--icon-size-value) !important; height: var(--icon-size-value) !important } .qtm-icon-xlarge { --icon-size-value: var(--icon-xlarge-size); font-size: var(--icon-size-value) !important; width: var(--icon-size-value) !important; height: var(--icon-size-value) !important } .qtm-icon-xxlarge { --icon-size-value: var(--icon-xxlarge-size); font-size: var(--icon-size-value) !important; width: var(--icon-size-value) !important; height: var(--icon-size-value) !important } .qtm-menu-item-list { display: block; } .qtm-menu-item-list.qtm-scrollable { --nb-visible-items: 5; --menu-item-height: var(--itemlist-item-medium-height); overflow-y: scroll; max-height: calc(var(--menu-item-height) * (var(--nb-visible-items) + 1/2)); } .qtm-menu-item-list.qtm-scrollable.qtm-small { --menu-item-height: var(--itemlist-item-small-height); } .qtm-menu-item-list.qtm-scrollable.qtm-medium { --menu-item-height: var(--itemlist-item-medium-height); } .qtm-menu-item-list.qtm-scrollable.qtm-large { --menu-item-height: var(--itemlist-item-large-height); } .qtm-menu-item { position: relative; } .qtm-menu-item:before { background-color: var(--itemlist-item-activebar-background-color); width: var(--itemlist-item-activebar-width); border-top-right-radius: var(--itemlist-item-activebar-border-right-radius); border-bottom-right-radius: var(--itemlist-item-activebar-border-right-radius); position: absolute; z-index: 2; top: 0; left: 0; height: 100%; content: ''; display: none; } .qtm-menu-item.qtm-active:before { display: block; } .qtm-menu-item.qtm-disabled:before { display: none; } .qtm-menu-item.qtm-disabled * { color: var(--itemlist-item-disabled-label-color) !important; background-color: var(--itemlist-item-disabled-background-color) !important; cursor: not-allowed !important; } .qtm-menu-item.qtm-collapsed .qtm-submenu-item-list { display: none; } .qtm-menu-item.qtm-active .qtm-menu-item-label:not(:hover), .qtm-menu-item.qtm-active .qtm-submenu-item.qtm-active:not(:hover) { background-color: var(--itemlist-item-active-background-color); } .qtm-menu-item.qtm-active .qtm-menu-item-label:focus:after, .qtm-menu-item.qtm-active .qtm-submenu-item.qtm-active:focus:after { display: none; } .qtm-menu-item.qtm-active .qtm-menu-item-label { color: var(--itemlist-item-active-label-color); } .qtm-menu-item.qtm-active .qtm-submenu-item.qtm-active { color: var(--itemlist-subitem-active-label-color); } .qtm-menu-item.qtm-active:not(.qtm-collapsed) .qtm-menu-item-label:not(:only-child) { background-color: transparent; } .qtm-menu-item-label .qtm-icon:first-child:not(:only-child) { margin-right: var(--itemlist-item-icon-left-margin-right); } .qtm-menu-item-label .qtm-icon:last-child:not(:only-child) { margin-left: auto; } .qtm-menu-item-label { color: var(--itemlist-item-label-color); padding-left: calc(var(--itemlist-item-padding-horizontal) + var(--itemlist-item-activebar-width)); padding-right: var(--itemlist-item-padding-horizontal); } .qtm-menu-item-label, .qtm-submenu-item { font-family: var(--itemlist-item-font-family); font-weight: var(--itemlist-item-font-weight); background-color: var(--itemlist-item-background-color); display: flex; align-items: center; cursor: pointer; position: relative; } .qtm-menu-item-label:after, .qtm-submenu-item:after { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border-width: var(--itemlist-item-focus-border-width); border-style: var(--itemlist-item-focus-border-type); border-color: var(--itemlist-item-focus-border-color); border-radius: var(--itemlist-item-focus-border-radius); content: ""; display: none; } .qtm-menu-item-label:focus, .qtm-submenu-item:focus { outline: none; } .qtm-menu-item-label:focus-visible:after, .qtm-submenu-item:focus-visible:after { display: block; } .qtm-menu-item-label:hover, .qtm-submenu-item:hover { background-color: var(--itemlist-item-hover-background-color); } .qtm-menu-item-label:active, .qtm-submenu-item:active { background-color: var(--itemlist-item-pressed-background-color); } .qtm-menu-item-list .qtm-menu-item-label { min-height: var(--itemlist-item-medium-height); font-size: var(--itemlist-item-medium-font-size); line-height: var(--itemlist-item-medium-line-height); padding-top: var(--itemlist-item-medium-padding-vertical); padding-bottom: var(--itemlist-item-medium-padding-vertical); } .qtm-menu-item-list .qtm-menu-item-label .qtm-icon { font-size: var(--itemlist-item-medium-icon-size); width: var(--itemlist-item-medium-icon-size); height: var(--itemlist-item-medium-icon-size); } .qtm-menu-item-list.qtm-small .qtm-menu-item-label { min-height: var(--itemlist-item-small-height); font-size: var(--itemlist-item-small-font-size); line-height: var(--itemlist-item-small-line-height); padding-top: var(--itemlist-item-small-padding-vertical); padding-bottom: var(--itemlist-item-small-padding-vertical); } .qtm-menu-item-list.qtm-small .qtm-menu-item-label .qtm-icon { font-size: var(--itemlist-item-small-icon-size); width: var(--itemlist-item-small-icon-size); height: var(--itemlist-item-small-icon-size); } .qtm-menu-item-list.qtm-medium .qtm-menu-item-label { min-height: var(--itemlist-item-medium-height); font-size: var(--itemlist-item-medium-font-size); line-height: var(--itemlist-item-medium-line-height); padding-top: var(--itemlist-item-medium-padding-vertical); padding-bottom: var(--itemlist-item-medium-padding-vertical); } .qtm-menu-item-list.qtm-medium .qtm-menu-item-label .qtm-icon { font-size: var(--itemlist-item-medium-icon-size); width: var(--itemlist-item-medium-icon-size); height: var(--itemlist-item-medium-icon-size); } .qtm-menu-item-list.qtm-large .qtm-menu-item-label { min-height: var(--itemlist-item-large-height); font-size: var(--itemlist-item-large-font-size); line-height: var(--itemlist-item-large-line-height); padding-top: var(--itemlist-item-large-padding-vertical); padding-bottom: var(--itemlist-item-large-padding-vertical); } .qtm-menu-item-list.qtm-large .qtm-menu-item-label .qtm-icon { font-size: var(--itemlist-item-large-icon-size); width: var(--itemlist-item-large-icon-size); height: var(--itemlist-item-large-icon-size); } .qtm-submenu-item-list { display: block; } .qtm-submenu-item { color: var(--itemlist-subitem-label-color); padding-right: var(--itemlist-item-padding-horizontal); } .qtm-submenu-item.qtm-disabled { color: var(--itemlist-item-disabled-label-color) !important; background-color: var(--itemlist-item-disabled-background-color) !important; cursor: not-allowed !important; } .qtm-menu-item-list .qtm-submenu-item { min-height: var(--itemlist-subitem-medium-height); font-size: var(--itemlist-item-medium-font-size); line-height: var(--itemlist-item-medium-line-height); padding-top: var(--itemlist-subitem-medium-padding-vertical); padding-bottom: var(--itemlist-subitem-medium-padding-vertical); padding-left: calc(var(--itemlist-item-padding-horizontal) + var(--itemlist-item-activebar-width) + var(--itemlist-item-medium-icon-size) + var(--itemlist-item-icon-left-margin-right)); } .qtm-menu-item-list.qtm-small .qtm-submenu-item { min-height: var(--itemlist-subitem-small-height); font-size: var(--itemlist-item-small-font-size); line-height: var(--itemlist-item-small-line-height); padding-top: var(--itemlist-subitem-small-padding-vertical); padding-bottom: var(--itemlist-subitem-small-padding-vertical); padding-left: calc(var(--itemlist-item-padding-horizontal) + var(--itemlist-item-activebar-width) + var(--itemlist-item-small-icon-size) + var(--itemlist-item-icon-left-margin-right)); } .qtm-menu-item-list.qtm-medium .qtm-submenu-item { min-height: var(--itemlist-subitem-medium-height); font-size: var(--itemlist-item-medium-font-size); line-height: var(--itemlist-item-medium-line-height); padding-top: var(--itemlist-subitem-medium-padding-vertical); padding-bottom: var(--itemlist-subitem-medium-padding-vertical); padding-left: calc(var(--itemlist-item-padding-horizontal) + var(--itemlist-item-activebar-width) + var(--itemlist-item-medium-icon-size) + var(--itemlist-item-icon-left-margin-right)); } .qtm-menu-item-list.qtm-large .qtm-submenu-item { min-height: var(--itemlist-subitem-large-height); font-size: var(--itemlist-item-large-font-size); line-height: var(--itemlist-item-large-line-height); padding-top: var(--itemlist-subitem-large-padding-vertical); padding-bottom: var(--itemlist-subitem-large-padding-vertical); padding-left: calc(var(--itemlist-item-padding-horizontal) + var(--itemlist-item-activebar-width) + var(--itemlist-item-large-icon-size) + var(--itemlist-item-icon-left-margin-right)); } .qtm-modal { display: none; justify-content: center; align-items: center; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; font-family: var(--dialog-font-family); } .qtm-modal.qtm-open { display: flex; } .qtm-modal .qtm-modal-content { display: flex; flex-direction: column; margin: auto; position: relative; overflow: auto; background-color: var(--dialog-background-color); box-shadow: var(--dialog-background-shadow); width: var(--dialog-breakpoint-xxsmall-width); max-height: var(--dialog-max-height); } @media (min-width: 768px) { .qtm-modal .qtm-modal-content { width: var(--dialog-breakpoint-medium-width); } } .qtm-modal .qtm-modal-content .qtm-modal-header { padding-top: var(--dialog-header-padding-vertical); padding-bottom: var(--dialog-header-padding-vertical); padding-left: var(--dialog-header-padding-horizontal); padding-right: var(--dialog-header-padding-horizontal); display: flex; justify-content: flex-end; align-items: center; } .qtm-modal .qtm-modal-content .qtm-modal-header .qtm-modal-title { color: var(--dialog-header-title-color); flex: 1; display: flex; } .qtm-modal .qtm-modal-content .qtm-modal-header .qtm-modal-title > .qtm-icon:first-child { padding-right: 10px; } .qtm-modal .qtm-modal-content .qtm-modal-header .qtm-modal-subtitle { color: var(--dialog-header-subtitle-color); font-size: var(--dialog-header-subtitle-font-size); line-height: var(--dialog-header-subtitle-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-header.qtm-small .qtm-modal-title { font-size: var(--dialog-header-small-title-font-size); line-height: var(--dialog-header-small-title-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-header.qtm-small .qtm-modal-title > .qtm-icon:first-child { font-size: var(--dialog-header-small-title-font-size); height: var(--dialog-header-small-title-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-header.qtm-medium .qtm-modal-title, .qtm-modal .qtm-modal-content .qtm-modal-header .qtm-modal-title { font-size: var(--dialog-header-medium-title-font-size); line-height: var(--dialog-header-medium-title-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-header.qtm-medium .qtm-modal-title > .qtm-icon:first-child, .qtm-modal .qtm-modal-content .qtm-modal-header .qtm-modal-title > .qtm-icon:first-child { font-size: var(--dialog-header-medium-title-font-size); height: var(--dialog-header-medium-title-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-header.qtm-large .qtm-modal-title { font-size: var(--dialog-header-large-title-font-size); line-height: var(--dialog-header-large-title-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-header.qtm-large .qtm-modal-title > .qtm-icon:first-child { font-size: var(--dialog-header-large-title-font-size); height: var(--dialog-header-large-title-line-height); } .qtm-modal .qtm-modal-content .qtm-modal-body { padding-left: var(--dialog-body-padding-horizontal); padding-right: var(--dialog-body-padding-horizontal); padding-bottom: var(--dialog-body-padding-bottom); font-size: var(--dialog-body-font-size); line-height: var(--dialog-body-line-height); overflow: auto; flex: 1; } .qtm-modal .qtm-modal-content .qtm-modal-footer { padding-left: var(--dialog-footer-padding-horizontal); padding-right: var(--dialog-footer-padding-horizontal); padding-bottom: var(--dialog-footer-padding-vertical); display: flex; } .qtm-modal .qtm-modal-content .qtm-modal-divider { --dialog-divider-margin-bottom: var(--spacing-m); background-color: var(--dialog-divider-background-color); height: var(--dialog-divider-size); margin-bottom: var(--dialog-divider-margin-bottom); } .qtm-modal .qtm-modal-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--dialog-overlay-background-color); } .qtm-multiselect .qtm-dropdown-trigger input[type=text] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .qtm-multiselect.qtm-disabled .qtm-dropdown-trigger input[type=text] { cursor: not-allowed } .qtm-multiselect:not(.qtm-disabled) .qtm-dropdown-trigger input[type=text] { cursor: pointer } .qtm-multiselect .qtm-dropdown-overlay { min-width: 100% } .qtm-multiselect .qtm-menu-item .qtm-checkbox { pointer-events: none } .qtm-progress-bar { font-family: var(--progress-bar-font-family); } .qtm-progress-bar progress:indeterminate::after, .qtm-progress-bar.qtm-primary progress:indeterminate::after { background-color: var(--progress-bar-primary-lead-color); } .qtm-progress-bar progress::-webkit-progress-value, .qtm-progress-bar.qtm-primary progress::-webkit-progress-value { background-color: var(--progress-bar-primary-lead-color); } .qtm-progress-bar.qtm-neutral progress:indeterminate::after { background-color: var(--progress-bar-neutral-lead-color); } .qtm-progress-bar.qtm-neutral progress::-webkit-progress-value { background-color: var(--progress-bar-neutral-lead-color); } .qtm-progress-bar.qtm-error progress::-webkit-progress-value { background-color: var(--progress-bar-lead-error-color); } .qtm-progress-bar.qtm-error progress:indeterminate::after { background-color: var(--progress-bar-lead-error-color); } .qtm-progress-bar.qtm-success progress::-webkit-progress-value { background-color: var(--progress-bar-lead-success-color); } .qtm-progress-bar.qtm-bounce progress:indeterminate::after { animation: indeterminateBounceAnimation 1.2s infinite ease-in-out; } .qtm-progress-bar progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; height: var(--progress-bar-height); width: 100%; border-radius: var(--progress-bar-track-border-radius); overflow: hidden; position: relative; display: block; } .qtm-progress-bar progress::-webkit-progress-bar { background-color: var(--progress-bar-track-color); } .qtm-progress-bar progress::-webkit-progress-value { background-color: var(--progress-bar-primary-lead-color); border-radius: var(--progress-bar-lead-border-radius); -webkit-transition: all 600ms ease-out; transition: all 600ms ease-out; } .qtm-progress-bar progress:indeterminate::after { border-radius: var(--progress-bar-lead-border-radius); width: 30%; content: ""; inset: 0; animation: indeterminateAnimation 600ms infinite linear; position: absolute; } @keyframes indeterminateAnimation { 0% { left: -30%; } 100% { left: 100%; } } @keyframes indeterminateBounceAnimation { 0% { left: -25%; } 50% { left: 95%; } 100% { left: -25%; } } .qtm-progress-bar .qtm-progress-bar-label { display: flex; align-items: baseline; justify-content: space-between; font-weight: var(--progress-bar-label-font-weight); font-size: var(--progress-bar-label-medium-font-size); line-height: var(--progress-bar-label-medium-line-height); color: var(--progress-bar-label-color); margin-bottom: var(--progress-bar-margin-top); } .qtm-progress-bar .qtm-progress-bar-label .qtm-progress-bar-percentage { font-size: var(--progress-bar-percentage-font-size); font-weight: var(--progress-bar-percentage-font-weight); color: var(--progress-bar-percentage-color); line-height: var(--progress-bar-percentage-line-height); } .qtm-progress-bar .qtm-progress-bar-caption { font-weight: var(--progress-bar-font-weight); font-size: 0.625rem; color: var(--progress-bar-caption-color); margin-top: var(--progress-bar-margin-top); } .qtm-progress-bar.qtm-error .qtm-progress-bar-caption { color: var(--progress-bar-caption-error-color); } .qtm-progress-bar.qtm-small .qtm-progress-bar-label { font-size: var(--progress-bar-label-small-font-size); line-height: var(--progress-bar-label-small-line-height); } .qtm-progress-bar.qtm-medium .qtm-progress-bar-label { font-size: var(--progress-bar-label-medium-font-size); line-height: var(--progress-bar-label-medium-line-height); } .qtm-progress-bar.qtm-large .qtm-progress-bar-label { font-size: var(--progress-bar-label-large-font-size); line-height: var(--progress-bar-label-large-line-height); } .qtm-progress-bar.qtm-large .qtm-progress-bar-label .qtm-progress-bar-percentage { font-size: var(--progress-bar-percentage-large-font-size); line-height: var(--progress-bar-percentage-large-line-height); } @keyframes spin { to { transform: rotate(360deg); } } .qtm-progress-circle { animation: spin var(--progress-circle-indeterminate-animation-duration) var(--progress-circle-indeterminate-animation-timing-function) var(--progress-circle-indeterminate-animation-iteration-count); } .qtm-progress-circle circle { cx: 50%; cy: 50%; stroke-width: var(--progress-circle-border-width); fill: none; } .qtm-progress-circle.qtm-xsmall { width: var(--progress-circle-xsmall-size); height: var(--progress-circle-xsmall-size); } .qtm-progress-circle.qtm-xsmall circle { r: calc((var(--progress-circle-xsmall-size) - (2 * var(--progress-circle-border-width))) / 2); stroke-dasharray: calc(3.141592653589793 * (var(--progress-circle-xsmall-size) - (2 * var(--progress-circle-border-width)))); } .qtm-progress-circle.qtm-xsmall .qtm-progress { stroke-dashoffset: calc(3.141592653589793 * (var(--progress-circle-xsmall-size) - (2 * var(--progress-circle-border-width))) / 3); } .qtm-progress-circle.qtm-small { width: var(--progress-circle-small-size); height: var(--progress-circle-small-size); } .qtm-progress-circle.qtm-small circle { r: calc((var(--progress-circle-small-size) - (2 * var(--progress-circle-border-width))) / 2); stroke-dasharray: calc(3.141592653589793 * (var(--progress-circle-small-size) - (2 * var(--progress-circle-border-width)))); } .qtm-progress-circle.qtm-small .qtm-progress { stroke-dashoffset: calc(3.141592653589793 * (var(--progress-circle-small-size) - (2 * var(--progress-circle-border-width))) / 3); } .qtm-progress-circle.qtm-medium, .qtm-progress-circle { width: var(--progress-circle-medium-size); height: var(--progress-circle-medium-size); } .qtm-progress-circle.qtm-medium circle, .qtm-progress-circle circle { r: calc((var(--progress-circle-medium-size) - (2 * var(--progress-circle-border-width))) / 2); stroke-dasharray: calc(3.141592653589793 * (var(--progress-circle-medium-size) - (2 * var(--progress-circle-border-width)))); } .qtm-progress-circle.qtm-medium .qtm-progress, .qtm-progress-circle .qtm-progress { stroke-dashoffset: calc(3.141592653589793 * (var(--progress-circle-medium-size) - (2 * var(--progress-circle-border-width))) / 3); } .qtm-progress-circle.qtm-large { width: var(--progress-circle-large-size); height: var(--progress-circle-large-size); } .qtm-progress-circle.qtm-large circle { r: calc((var(--progress-circle-large-size) - (2 * var(--progress-circle-border-width))) / 2); stroke-dasharray: calc(3.141592653589793 * (var(--progress-circle-large-size) - (2 * var(--progress-circle-border-width)))); } .qtm-progress-circle.qtm-large .qtm-progress { stroke-dashoffset: calc(3.141592653589793 * (var(--progress-circle-large-size) - (2 * var(--progress-circle-border-width))) / 3); } .qtm-progress-circle.qtm-xlarge { width: var(--progress-circle-xlarge-size); height: var(--progress-circle-xlarge-size); } .qtm-progress-circle.qtm-xlarge circle { r: calc((var(--progress-circle-xlarge-size) - (2 * var(--progress-circle-border-width))) / 2); stroke-dasharray: calc(3.141592653589793 * (var(--progress-circle-xlarge-size) - (2 * var(--progress-circle-border-width)))); } .qtm-progress-circle.qtm-xlarge .qtm-progress { stroke-dashoffset: calc(3.141592653589793 * (var(--progress-circle-xlarge-size) - (2 * var(--progress-circle-border-width))) / 3); } .qtm-progress-circle.qtm-primary .qtm-progress, .qtm-progress-circle .qtm-progress { stroke: var(--progress-circle-primary-lead-color); } .qtm-progress-circle.qtm-primary .qtm-track, .qtm-progress-circle .qtm-track { stroke: var(--progress-circle-track-color); } .qtm-progress-circle.qtm-neutral .qtm-progress { stroke: var(--progress-circle-neutral-lead-color); } .qtm-progress-circle.qtm-white .qtm-progress { stroke: var(--progress-circle-white-lead-color); } .qtm-progress-circle.qtm-white .qtm-track { stroke: var(--progress-circle-white-track-color); } .qtm-radio { display: flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-family: var(--radio-label-font-family); color: var(--radio-label-color); } .qtm-radio input { margin: 0; } .qtm-radio.qtm-small { font-size: var(--radio-small-label-font-size); line-height: var(--radio-small-label-line-height); font-weight: var(--radio-small-label-font-weight); } .qtm-radio.qtm-small input[type=radio] { height: var(--radio-small-input-size); width: var(--radio-small-input-size); } .qtm-radio.qtm-small input[type=radio]:checked:after { height: var(--radio-small-checked-symbol-size); width: var(--radio-small-checked-symbol-size); } .qtm-radio.qtm-medium, .qtm-radio { font-size: var(--radio-medium-label-font-size); line-height: var(--radio-medium-label-line-height); font-weight: var(--radio-medium-label-font-weight); } .qtm-radio.qtm-medium input[type=radio], .qtm-radio input[type=radio] { height: var(--radio-medium-input-size); width: var(--radio-medium-input-size); } .qtm-radio.qtm-medium input[type=radio]:checked:after, .qtm-radio input[type=radio]:checked:after { height: var(--radio-medium-checked-symbol-size); width: var(--radio-medium-checked-symbol-size); } .qtm-radio.qtm-large { font-size: var(--radio-large-label-font-size); line-height: var(--radio-large-label-line-height); font-weight: var(--radio-large-label-font-weight); } .qtm-radio.qtm-large input[type=radio] { height: var(--radio-large-input-size); width: var(--radio-large-input-size); } .qtm-radio.qtm-large input[type=radio]:checked:after { height: var(--radio-large-checked-symbol-size); width: var(--radio-large-checked-symbol-size); } .qtm-radio input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex-shrink: 0; position: relative; cursor: pointer; border-color: var(--radio-input-border-color); background-color: var(--radio-input-background-color); border-radius: 50%; border-style: solid; border-width: var(--radio-input-border-width); outline: none; margin-right: var(--radio-input-margin-right); } .qtm-radio input[type=radio]:after { position: absolute; display: none; content: ""; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); } .qtm-radio:hover input[type=radio] { border-color: var(--radio-input-hover-border-color); background-color: var(--radio-input-hover-background-color); } .qtm-radio input[type=radio]:focus-visible { outline: none; } .qtm-radio input[type=radio]:focus-visible:before { width: calc(100% + (var(--radio-input-ring-offset-width) + var(--radio-input-ring-width) + var(--radio-input-border-width)) * 2); height: calc(100% + (var(--radio-input-ring-offset-width) + var(--radio-input-ring-width) + var(--radio-input-border-width)) * 2); position: absolute; top: calc(0px - var(--radio-input-ring-offset-width) - var(--radio-input-ring-width) - var(--radio-input-border-width)); left: calc(0px - var(--radio-input-ring-offset-width) - var(--radio-input-ring-width) - var(--radio-input-border-width)); content: ""; border: 2px solid var(--radio-input-ring-color); border-radius: 50%; display: block; } .qtm-radio:active input[type=radio] { border-color: var(--radio-input-pressed-border-color); background-color: var(--radio-input-pressed-background-color); } .qtm-radio.qtm-disabled { cursor: not-allowed; color: var(--radio-disabled-label-color); } .qtm-radio.qtm-disabled input[type=radio]:disabled { border-color: var(--radio-disabled-input-border-color); background-color: var(--radio-disabled-input-background-color); box-shadow: none; cursor: not-allowed; } .qtm-radio.qtm-disabled input[type=radio]:disabled:after { background-color: var(--radio-disabled-input-border-color); } .qtm-radio input[type=radio]:checked { border-color: var(--radio-input-border-color); } .qtm-radio input[type=radio]:checked:after { display: block; background-color: var(--radio-input-checked-symbol-background-color); } .qtm-radio:hover input[type=radio]:checked { border-color: var(--radio-input-hover-border-color); background-color: var(--radio-input-hover-background-color); } .qtm-radio:hover input[type=radio]:checked:after { background-color: var(--radio-input-checked-hover-symbol-background-color); } .qtm-radio:active input[type=radio]:checked { border-color: var(--radio-input-pressed-border-color); background-color: var(--radio-input-pressed-background-color); } .qtm-radio:active input[type=radio]:checked:after { background-color: var(--radio-input-checked-pressed-symbol-background-color); } .qtm-radio.qtm-disabled input[type=radio]:disabled:checked { border-color: var(--radio-disabled-input-border-color); background-color: var(--radio-disabled-input-background-color); } .qtm-radio.qtm-disabled input[type=radio]:disabled:checked:after { background-color: var(--radio-disabled-input-border-color); } .qtm-radio.qtm-error input[type=radio] { --error-border-color: var(--radio-error-input-border-color); border-color: var(--error-border-color) !important; } .qtm-radio.qtm-neutral input[type=radio]:checked:after { background-color: var(--radio-neutral-input-checked-symbol-background-color); } .qtm-radio.qtm-neutral:hover input[type=radio]:checked:after { background-color: var(--radio-neutral-input-checked-hover-symbol-background-color); } .qtm-radio.qtm-neutral:active input[type=radio]:checked:after { background-color: var(--radio-neutral-input-checked-pressed-symbol-background-color); } .qtm-radio.qtm-neutral.qtm-disabled input[type=radio]:disabled:checked { border-color: var(--radio-disabled-input-border-color); background-color: var(--radio-disabled-input-background-color); } .qtm-radio.qtm-neutral.qtm-disabled input[type=radio]:disabled:checked:after { background-color: var(--radio-disabled-input-border-color); } .qtm-radio-group { display: flex; flex-flow: column wrap; } .qtm-radio-group.qtm-small > *:not(:last-child) { margin-bottom: var(--radiogroup-small-radio-margin-bottom); } .qtm-radio-group.qtm-small .qtm-radio { font-size: var(--radio-small-label-font-size); line-height: var(--radio-small-label-line-height); font-weight: var(--radio-small-label-font-weight); } .qtm-radio-group.qtm-small .qtm-radio input[type=radio] { height: var(--radio-small-input-size); width: var(--radio-small-input-size); } .qtm-radio-group.qtm-small .qtm-radio input[type=radio]:checked:after { height: var(--radio-small-checked-symbol-size); width: var(--radio-small-checked-symbol-size); } .qtm-radio-group.qtm-medium > *:not(:last-child), .qtm-radio-group > *:not(:last-child) { margin-bottom: var(--radiogroup-medium-radio-margin-bottom); } .qtm-radio-group.qtm-medium .qtm-radio, .qtm-radio-group .qtm-radio { font-size: var(--radio-medium-label-font-size); line-height: var(--radio-medium-label-line-height); font-weight: var(--radio-medium-label-font-weight); } .qtm-radio-group.qtm-medium .qtm-radio input[type=radio], .qtm-radio-group .qtm-radio input[type=radio] { height: var(--radio-medium-input-size); width: var(--radio-medium-input-size); } .qtm-radio-group.qtm-medium .qtm-radio input[type=radio]:checked:after, .qtm-radio-group .qtm-radio input[type=radio]:checked:after { height: var(--radio-medium-checked-symbol-size); width: var(--radio-medium-checked-symbol-size); } .qtm-radio-group.qtm-large > *:not(:last-child) { margin-bottom: var(--radiogroup-large-radio-margin-bottom); } .qtm-radio-group.qtm-large .qtm-radio { font-size: var(--radio-large-label-font-size); line-height: var(--radio-large-label-line-height); font-weight: var(--radio-large-label-font-weight); } .qtm-radio-group.qtm-large .qtm-radio input[type=radio] { height: var(--radio-large-input-size); width: var(--radio-large-input-size); } .qtm-radio-group.qtm-large .qtm-radio input[type=radio]:checked:after { height: var(--radio-large-checked-symbol-size); width: var(--radio-large-checked-symbol-size); } .qtm-slider-container .qtm-slider { display: flex; position: relative; width: 100%; font-family: var(--slider-font-family); font-weight: var(--slider-font-weight); color: var(--slider-text-color); cursor: pointer; height: var(--slider-height); border-radius: var(--slider-border-radius); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .qtm-slider-container .qtm-slider .qtm-slider-track { position: absolute; width: 100%; height: inherit; border-radius: inherit; z-index: 0; } .qtm-slider-container .qtm-slider .qtm-slider-lead { position: absolute; height: inherit; border-radius: inherit; z-index: 1; } .qtm-slider-container .qtm-slider .qtm-slider-handle { position: absolute; width: var(--slider-input-handle-size); height: var(--slider-input-handle-size); border-radius: 50%; margin-top: calc(var(--slider-height)/2 - var(--slider-input-handle-size)/2); transform: translateX(-50%); z-index: 2; } .qtm-slider-container .qtm-slider .qtm-slider-handle:focus-visible { outline: var(--slider-handle-ring-width) solid var(--slider-handle-ring-color); outline-offset: var(--slider-handle-ring-offset-width); } .qtm-slider-container .qtm-slider .qtm-slider-mark { position: absolute; width: var(--slider-mark-width); height: var(--slider-mark-secondary-height); margin-top: calc(var(--slider-height)/2 - var(--slider-mark-secondary-height)/2); z-index: 1; border-radius: 1px; } .qtm-slider-container .qtm-slider .qtm-slider-mark.qtm-main { height: var(--slider-mark-main-height); margin-top: calc(var(--slider-height)/2 - var(--slider-mark-main-height)/2); } .qtm-slider-container .qtm-slider .qtm-slider-legend { position: absolute; color: var(--slider-legend-text-color); font-size: var(--slider-legend-font-size); font-weight: var(--slider-legend-font-weight); line-height: var(--slider-legend-line-height); transform: translateX(-50%); margin-top: calc(var(--slider-height) + var(--slider-legend-margin-top)); } .qtm-slider-container .qtm-slider .qtm-slider-legend.qtm-top { margin-bottom: calc(var(--slider-height) + var(--slider-legend-margin-top)); bottom: 0; margin-top: 0; } .qtm-slider-container .qtm-slider .qtm-slider-metric { position: absolute; right: 0; bottom: calc(var(--slider-metric-offset) + var(--slider-height)); line-height: var(--slider-metric-line-height); font-size: var(--slider-metric-font-size); font-weight: var(--slider-metric-font-weight); } .qtm-slider-container .qtm-slider.qtm-disabled .qtm-tooltip { pointer-events: none; } .qtm-slider-container .qtm-slider .qtm-tooltip { position: absolute; --tooltip-arrow-offset: var(--slider-tooltip-offset); } .qtm-slider-container.qtm-disabled { cursor: not-allowed; } .qtm-slider-container.qtm-disabled .qtm-slider { pointer-events: none; } .qtm-slider-container .qtm-slider-label { font-weight: var(--slider-label-font-weight); font-size: var(--slider-label-font-size); line-height: var(--slider-label-line-height); } .qtm-slider-container .qtm-slider-caption { font-size: var(--slider-caption-font-size); line-height: var(--slider-caption-line-height); color: var(--slider-caption-text-color); } .qtm-slider-container.qtm-small { --slider-input-handle-size: var(--slider-small-handle-size); --slider-height: var(--slider-small-track-height); --slider-metric-line-height: var(--slider-small-metric-line-height); --slider-metric-font-size: var(--slider-small-metric-font-size); --slider-mark-width: var(--slider-small-mark-width); --slider-mark-main-height: var(--slider-small-mark-main-height); --slider-mark-secondary-height: var(--slider-small-mark-secondary-height); --slider-legend-font-size: var(--slider-small-legend-font-size); --slider-legend-line-height: var(--slider-small-legend-line-height); --slider-legend-margin-top: var(--slider-small-legend-margin); --slider-label-font-size: var(--slider-small-label-font-size); --slider-label-line-height: var(--slider-small-label-line-height); --slider-caption-font-size: var(--slider-small-caption-font-size); --slider-caption-line-height: var(--slider-small-caption-line-height); } .qtm-slider-container, .qtm-slider-container.qtm-medium { --slider-input-handle-size: var(--slider-medium-handle-size); --slider-height: var(--slider-medium-track-height); --slider-metric-line-height: var(--slider-medium-metric-line-height); --slider-metric-font-size: var(--slider-medium-metric-font-size); --slider-mark-width: var(--slider-medium-mark-width); --slider-mark-main-height: var(--slider-medium-mark-main-height); --slider-mark-secondary-height: var(--slider-medium-mark-secondary-height); --slider-legend-font-size: var(--slider-medium-legend-font-size); --slider-legend-line-height: var(--slider-medium-legend-line-height); --slider-legend-margin-top: var(--slider-medium-legend-margin); --slider-label-font-size: var(--slider-medium-label-font-size); --slider-label-line-height: var(--slider-medium-label-line-height); --slider-caption-font-size: var(--slider-medium-caption-font-size); --slider-caption-line-height: var(--slider-medium-caption-line-height); } .qtm-slider-container.qtm-large { --slider-input-handle-size: var(--slider-large-handle-size); --slider-height: var(--slider-large-track-height); --slider-metric-line-height: var(--slider-large-metric-line-height); --slider-metric-font-size: var(--slider-large-metric-font-size); --slider-mark-width: var(--slider-large-mark-width); --slider-mark-main-height: var(--slider-large-mark-main-height); --slider-mark-secondary-height: var(--slider-large-mark-secondary-height); --slider-legend-font-size: var(--slider-large-legend-font-size); --slider-legend-line-height: var(--slider-large-legend-line-height); --slider-legend-margin-top: var(--slider-large-legend-margin); --slider-label-font-size: var(--slider-large-label-font-size); --slider-label-line-height: var(--slider-large-label-line-height); --slider-caption-font-size: var(--slider-large-caption-font-size); --slider-caption-line-height: var(--slider-large-caption-line-height); } .qtm-slider-container .qtm-slider-track, .qtm-slider-container.qtm-primary .qtm-slider-track { background-color: var(--slider-primary-track-background-color); } .qtm-slider-container .qtm-slider-lead, .qtm-slider-container.qtm-primary .qtm-slider-lead { background-color: var(--slider-primary-lead-background-color); } .qtm-slider-container .qtm-slider-handle, .qtm-slider-container.qtm-primary .qtm-slider-handle { background-color: var(--slider-primary-handle-background-color); } .qtm-slider-container .qtm-slider-handle:hover, .qtm-slider-container.qtm-primary .qtm-slider-handle:hover { background-color: var(--slider-primary-handle-hover-background-color); } .qtm-slider-container .qtm-slider-handle:active, .qtm-slider-container.qtm-primary .qtm-slider-handle:active { background-color: var(--slider-primary-handle-pressed-background-color); } .qtm-slider-container .qtm-slider-mark, .qtm-slider-container.qtm-primary .qtm-slider-mark { background-color: var(--slider-primary-mark-background-color); } .qtm-slider-container .qtm-slider-mark.qtm-active, .qtm-slider-container.qtm-primary .qtm-slider-mark.qtm-active { background-color: var(--slider-primary-lead-background-color); } .qtm-slider-container.qtm-disabled .qtm-slider-handle, .qtm-slider-container.qtm-primary.qtm-disabled .qtm-slider-handle { background-color: var(--slider-primary-handle-disabled-background-color); } .qtm-slider-container.qtm-disabled .qtm-slider-lead, .qtm-slider-container.qtm-disabled .qtm-slider-mark.qtm-active, .qtm-slider-container.qtm-primary.qtm-disabled .qtm-slider-lead, .qtm-slider-container.qtm-primary.qtm-disabled .qtm-slider-mark.qtm-active { background-color: var(--slider-primary-lead-disabled-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-track { background-color: var(--slider-neutral-track-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-lead { background-color: var(--slider-neutral-lead-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-handle { background-color: var(--slider-neutral-handle-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-handle:hover { background-color: var(--slider-neutral-handle-hover-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-handle:active { background-color: var(--slider-neutral-handle-pressed-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-mark { background-color: var(--slider-neutral-mark-background-color); } .qtm-slider-container.qtm-neutral .qtm-slider-mark.qtm-active { background-color: var(--slider-neutral-lead-background-color); } .qtm-slider-container.qtm-neutral.qtm-disabled .qtm-slider-handle { background-color: var(--slider-neutral-handle-disabled-background-color); } .qtm-slider-container.qtm-neutral.qtm-disabled .qtm-slider-lead, .qtm-slider-container.qtm-neutral.qtm-disabled .qtm-slider-mark.qtm-active { background-color: var(--slider-neutral-lead-disabled-background-color); } .qtm-slider-container .qtm-slider-label + .qtm-slider, .qtm-slider-container .qtm-slider-caption + .qtm-slider { margin-top: var(--slider-caption-offset); } .qtm-slider-container { width: 100%; display: block; } .qtm-split-button .qtm-button-group { display: inline-flex } .qtm-split-button .qtm-button-action { border-top-right-radius: var(--splitbutton-action-border-top-right-radius); border-bottom-right-radius: var(--splitbutton-action-border-bottom-right-radius); margin-right: var(--splitbutton-action-margin-right) } .qtm-split-button .qtm-button-trigger { border-top-left-radius: var(--splitbutton-dropdown-trigger-border-top-left-radius); border-bottom-left-radius: var(--splitbutton-dropdown-trigger-border-bottom-left-radius) } .qtm-tabs { display: flex; width: -moz-fit-content; width: fit-content; overflow: hidden; } .qtm-tabs::-webkit-scrollbar { display: none; } .qtm-tabs.qtm-fluid .qtm-tab { flex: 1 0 auto; } .qtm-tabs.qtm-scrollable { overflow-x: auto; } .qtm-tabs.qtm-w-full { width: 100%; } .qtm-tabs.qtm-h-full { height: 100%; } .qtm-tabs.qtm-left { justify-content: flex-start; } .qtm-tabs.qtm-center { justify-content: center; } .qtm-tabs.qtm-right { justify-content: flex-end; } .qtm-tabs.qtm-has-divider { border-bottom-width: var(--tabs-divider-border-width); border-bottom-style: solid; border-bottom-color: var(--tabs-divider-border-color); } .qtm-tabs.qtm-tab-vertical .qtm-tab { flex-direction: column; padding-top: var(--tabs-tab-verticalalign-padding-vertical); padding-bottom: var(--tabs-tab-verticalalign-padding-vertical); padding-left: var(--tabs-tab-verticalalign-padding-horizontal); padding-right: var(--tabs-tab-verticalalign-padding-horizontal); } .qtm-tabs.qtm-tab-vertical .qtm-tab .qtm-icon:first-child:not(:only-child) { margin-right: 0; margin-bottom: var(--tabs-tab-icon-margin); } .qtm-tabs.qtm-tab-vertical .qtm-tab .qtm-icon:last-child:not(:only-child) { margin-left: 0; margin-top: var(--tabs-tab-icon-margin); } .qtm-tabs .qtm-tab { display: flex; align-items: center; justify-content: center; padding-top: var(--tabs-tab-padding-vertical); padding-bottom: var(--tabs-tab-padding-vertical); padding-left: var(--tabs-tab-padding-horizontal); padding-right: var(--tabs-tab-padding-horizontal); cursor: pointer; background-color: var(--tabs-tab-background-color); color: var(--tabs-tab-label-color); font-family: var(--tabs-tab-font-family); font-weight: var(--tabs-tab-font-weight); position: relative; outline: none; flex-shrink: 0; } .qtm-tabs .qtm-tab:after { height: var(--tabs-tab-activebar-height); background-color: var(--tabs-tab-activebar-background-color); border-top-right-radius: var(--tabs-tab-activebar-border-radius); border-top-left-radius: var(--tabs-tab-activebar-border-radius); position: absolute; bottom: 0; left: 0; content: ""; width: 100%; display: none; } .qtm-tabs .qtm-tab.qtm-active { color: var(--tabs-tab-active-label-color); } .qtm-tabs .qtm-tab.qtm-active:after { display: block; } .qtm-tabs .qtm-tab.qtm-active.qtm-disabled:after { display: none; } .qtm-tabs .qtm-tab:hover { background-color: var(--tabs-tab-hover-background-color); } .qtm-tabs .qtm-tab.qtm-disabled { color: var(--tabs-tab-disabled-label-color); background-color: var(--tabs-tab-disabled-background-color); cursor: not-allowed; } .qtm-tabs .qtm-tab:before { border-width: var(--tabs-tab-focus-border-width); border-style: var(--tabs-tab-focus-border-type); border-color: var(--tabs-tab-focus-border-color); border-radius: var(--tabs-tab-focus-border-radius); position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; display: none; } .qtm-tabs .qtm-tab:focus-visible:before { display: block; outline: none; } .qtm-tabs .qtm-tab:active { background-color: var(--tabs-tab-pressed-background-color); } .qtm-tabs .qtm-tab.qtm-disabled:active { background-color: var(--tabs-tab-disabled-background-color); } .qtm-tabs .qtm-tab .qtm-icon { height: var(--tabs-tab-icon-size); font-size: var(--tabs-tab-icon-size); display: flex; } .qtm-tabs .qtm-tab .qtm-icon:first-child:not(:only-child) { margin-right: var(--tabs-tab-icon-margin); } .qtm-tabs .qtm-tab .qtm-icon:last-child:not(:only-child) { margin-left: var(--tabs-tab-icon-margin); } .qtm-tabs.qtm-small .qtm-tab { min-height: var(--tabs-small-height); font-size: var(--tabs-small-tab-font-size); } .qtm-tabs.qtm-medium .qtm-tab { min-height: var(--tabs-medium-height); font-size: var(--tabs-medium-tab-font-size); } .qtm-tag { padding-bottom: var(--tags-padding-vertical); padding-top: var(--tags-padding-vertical); font-family: var(--tags-font-family); font-weight: var(--tags-font-weight); display: inline-flex; align-items: center; position: relative; cursor: default; width: -moz-fit-content; width: fit-content; } .qtm-tag:not(.qtm-disabled) .qtm-tag-button:hover { background-color: var(--tags-button-hover-background-color); cursor: pointer; } .qtm-tag .qtm-icon, .qtm-tag .qtm-tag-button { -webkit-user-select: none; -moz-user-select: none; user-select: none; display: inline-flex; align-items: center; } .qtm-tag.qtm-interactive { cursor: pointer; } .qtm-tag:before { width: calc(100% + calc((var(--tags-focus-ring-offset) + var(--tags-focus-ring-border-width)) * 2)); height: calc(100% + calc((var(--tags-focus-ring-offset) + var(--tags-focus-ring-border-width)) * 2)); position: absolute; top: calc(0px - var(--tags-focus-ring-offset) - var(--tags-focus-ring-border-width)); left: calc(0px - var(--tags-focus-ring-offset) - var(--tags-focus-ring-border-width)); content: ""; border: var(--tags-focus-ring-border-width) solid var(--tags-focus-ring-color); display: none; } .qtm-tag:focus-visible { outline: none; } .qtm-tag:focus-visible:before { display: block; } .qtm-tag, .qtm-tag:before, .qtm-tag.qtm-tag-rounded, .qtm-tag.qtm-tag-rounded:before, .qtm-tag .qtm-tag-button:hover, .qtm-tag.qtm-tag-rounded .qtm-tag-button:hover { border-radius: var(--tags-rounded-border-radius); } .qtm-tag.qtm-tag-sharp, .qtm-tag.qtm-tag-sharp:before, .qtm-tag.qtm-tag-sharp .qtm-tag-button:hover { border-radius: var(--tags-sharp-border-radius); } .qtm-tag.qtm-small { font-size: var(--tags-small-font-size); line-height: var(--tags-small-line-height); padding-left: calc(var(--tags-small-padding-left) + var(--tags-icon-margin-horizontal)); padding-right: calc(var(--tags-small-padding-right) * 2 + var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-small .qtm-icon, .qtm-tag.qtm-small .qtm-tag-button { font-size: var(--tags-small-icon-size); width: var(--tags-small-icon-size); height: var(--tags-small-icon-size); } .qtm-tag.qtm-small > .qtm-tag-button:only-child, .qtm-tag.qtm-small > .qtm-icon:only-child { margin-right: calc(0px - var(--tags-icon-margin-horizontal)); margin-left: calc(0px - var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-small > * ~ *:not(.qtm-tag-button) { margin-left: var(--tags-icon-margin-horizontal); } .qtm-tag.qtm-small > *:first-child:not(:only-child) { margin-left: calc(0px - var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-small > *:last-child:not(:only-child):not(.qtm-tag-button) { margin-right: calc(0px - var(--tags-small-label-margin-horizontal)); } .qtm-tag.qtm-small > .qtm-tag-button:not(:only-child):not(:first-child) { margin-left: calc(var(--tags-small-label-margin-horizontal) + var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-small > .qtm-tag-button:last-child:not(:only-child) { margin-right: calc(0px - var(--tags-small-padding-right) - var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-medium, .qtm-tag { font-size: var(--tags-medium-font-size); line-height: var(--tags-medium-line-height); padding-left: calc(var(--tags-medium-padding-left) + var(--tags-icon-margin-horizontal)); padding-right: calc(var(--tags-medium-padding-right) * 2 + var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-medium .qtm-icon, .qtm-tag.qtm-medium .qtm-tag-button, .qtm-tag .qtm-icon, .qtm-tag .qtm-tag-button { font-size: var(--tags-medium-icon-size); width: var(--tags-medium-icon-size); height: var(--tags-medium-icon-size); } .qtm-tag.qtm-medium > .qtm-tag-button:only-child, .qtm-tag.qtm-medium > .qtm-icon:only-child, .qtm-tag > .qtm-tag-button:only-child, .qtm-tag > .qtm-icon:only-child { margin-right: calc(0px - var(--tags-icon-margin-horizontal)); margin-left: calc(0px - var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-medium > * ~ *:not(.qtm-tag-button), .qtm-tag > * ~ *:not(.qtm-tag-button) { margin-left: var(--tags-icon-margin-horizontal); } .qtm-tag.qtm-medium > *:first-child:not(:only-child), .qtm-tag > *:first-child:not(:only-child) { margin-left: calc(0px - var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-medium > *:last-child:not(:only-child):not(.qtm-tag-button), .qtm-tag > *:last-child:not(:only-child):not(.qtm-tag-button) { margin-right: calc(0px - var(--tags-medium-label-margin-horizontal)); } .qtm-tag.qtm-medium > .qtm-tag-button:not(:only-child):not(:first-child), .qtm-tag > .qtm-tag-button:not(:only-child):not(:first-child) { margin-left: calc(var(--tags-medium-label-margin-horizontal) + var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-medium > .qtm-tag-button:last-child:not(:only-child), .qtm-tag > .qtm-tag-button:last-child:not(:only-child) { margin-right: calc(0px - var(--tags-medium-padding-right) - var(--tags-icon-margin-horizontal)); } .qtm-tag.qtm-bluegrey:not(.qtm-disabled) { color: var(--tags-unselected-bluegrey-font-color); background-color: var(--tags-unselected-bluegrey-background-color); } .qtm-tag.qtm-bluegrey:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-bluegrey-hover-background-color); } .qtm-tag.qtm-bluegrey:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-bluegrey-pressed-background-color); } .qtm-tag.qtm-bluegrey:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-bluegrey-font-color); background-color: var(--tags-selected-bluegrey-background-color); } .qtm-tag.qtm-bluegrey:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-bluegrey-hover-background-color); } .qtm-tag.qtm-bluegrey:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-bluegrey-pressed-background-color); } .qtm-tag.qtm-bluegrey.qtm-disabled { background-color: var(--tags-bluegrey-disabled-background-color); } .qtm-tag.qtm-green:not(.qtm-disabled) { color: var(--tags-unselected-green-font-color); background-color: var(--tags-unselected-green-background-color); } .qtm-tag.qtm-green:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-green-hover-background-color); } .qtm-tag.qtm-green:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-green-pressed-background-color); } .qtm-tag.qtm-green:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-green-font-color); background-color: var(--tags-selected-green-background-color); } .qtm-tag.qtm-green:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-green-hover-background-color); } .qtm-tag.qtm-green:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-green-pressed-background-color); } .qtm-tag.qtm-green.qtm-disabled { background-color: var(--tags-green-disabled-background-color); } .qtm-tag.qtm-orange:not(.qtm-disabled) { color: var(--tags-unselected-orange-font-color); background-color: var(--tags-unselected-orange-background-color); } .qtm-tag.qtm-orange:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-orange-hover-background-color); } .qtm-tag.qtm-orange:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-orange-pressed-background-color); } .qtm-tag.qtm-orange:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-orange-font-color); background-color: var(--tags-selected-orange-background-color); } .qtm-tag.qtm-orange:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-orange-hover-background-color); } .qtm-tag.qtm-orange:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-orange-pressed-background-color); } .qtm-tag.qtm-orange.qtm-disabled { background-color: var(--tags-orange-disabled-background-color); } .qtm-tag.qtm-primary:not(.qtm-disabled), .qtm-tag:not(.qtm-disabled) { color: var(--tags-unselected-primary-font-color); background-color: var(--tags-unselected-primary-background-color); } .qtm-tag.qtm-primary:not(.qtm-disabled).qtm-interactive:hover, .qtm-tag:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-primary-hover-background-color); } .qtm-tag.qtm-primary:not(.qtm-disabled).qtm-interactive:active, .qtm-tag:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-primary-pressed-background-color); } .qtm-tag.qtm-primary:not(.qtm-disabled).qtm-selected, .qtm-tag:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-primary-font-color); background-color: var(--tags-selected-primary-background-color); } .qtm-tag.qtm-primary:not(.qtm-disabled).qtm-selected.qtm-interactive:hover, .qtm-tag:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-primary-hover-background-color); } .qtm-tag.qtm-primary:not(.qtm-disabled).qtm-selected.qtm-interactive:active, .qtm-tag:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-primary-pressed-background-color); } .qtm-tag.qtm-primary.qtm-disabled, .qtm-tag.qtm-disabled { background-color: var(--tags-primary-disabled-background-color); } .qtm-tag.qtm-red:not(.qtm-disabled) { color: var(--tags-unselected-red-font-color); background-color: var(--tags-unselected-red-background-color); } .qtm-tag.qtm-red:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-red-hover-background-color); } .qtm-tag.qtm-red:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-red-pressed-background-color); } .qtm-tag.qtm-red:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-red-font-color); background-color: var(--tags-selected-red-background-color); } .qtm-tag.qtm-red:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-red-hover-background-color); } .qtm-tag.qtm-red:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-red-pressed-background-color); } .qtm-tag.qtm-red.qtm-disabled { background-color: var(--tags-red-disabled-background-color); } .qtm-tag.qtm-lightblue:not(.qtm-disabled) { color: var(--tags-unselected-lightblue-font-color); background-color: var(--tags-unselected-lightblue-background-color); } .qtm-tag.qtm-lightblue:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-lightblue-hover-background-color); } .qtm-tag.qtm-lightblue:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-lightblue-pressed-background-color); } .qtm-tag.qtm-lightblue:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-lightblue-font-color); background-color: var(--tags-selected-lightblue-background-color); } .qtm-tag.qtm-lightblue:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-lightblue-hover-background-color); } .qtm-tag.qtm-lightblue:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-lightblue-pressed-background-color); } .qtm-tag.qtm-lightblue.qtm-disabled { background-color: var(--tags-lightblue-disabled-background-color); } .qtm-tag.qtm-yellow:not(.qtm-disabled) { color: var(--tags-unselected-yellow-font-color); background-color: var(--tags-unselected-yellow-background-color); } .qtm-tag.qtm-yellow:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-yellow-hover-background-color); } .qtm-tag.qtm-yellow:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-yellow-pressed-background-color); } .qtm-tag.qtm-yellow:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-yellow-font-color); background-color: var(--tags-selected-yellow-background-color); } .qtm-tag.qtm-yellow:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-yellow-hover-background-color); } .qtm-tag.qtm-yellow:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-yellow-pressed-background-color); } .qtm-tag.qtm-yellow.qtm-disabled { background-color: var(--tags-yellow-disabled-background-color); } .qtm-tag.qtm-purple:not(.qtm-disabled) { color: var(--tags-unselected-purple-font-color); background-color: var(--tags-unselected-purple-background-color); } .qtm-tag.qtm-purple:not(.qtm-disabled).qtm-interactive:hover { background-color: var(--tags-unselected-purple-hover-background-color); } .qtm-tag.qtm-purple:not(.qtm-disabled).qtm-interactive:active { background-color: var(--tags-unselected-purple-pressed-background-color); } .qtm-tag.qtm-purple:not(.qtm-disabled).qtm-selected { color: var(--tags-selected-purple-font-color); background-color: var(--tags-selected-purple-background-color); } .qtm-tag.qtm-purple:not(.qtm-disabled).qtm-selected.qtm-interactive:hover { background-color: var(--tags-selected-purple-hover-background-color); } .qtm-tag.qtm-purple:not(.qtm-disabled).qtm-selected.qtm-interactive:active { background-color: var(--tags-selected-purple-pressed-background-color); } .qtm-tag.qtm-purple.qtm-disabled { background-color: var(--tags-purple-disabled-background-color); } .qtm-tag.qtm-disabled { color: var(--tags-disabled-font-color); } .qtm-tag.qtm-disabled, .qtm-tag.qtm-disabled * { pointer-events: none; } .qtm-text-input { position: relative; } .qtm-text-input input { width: 100%; font-family: var(--input-font-family); font-weight: var(--input-font-weight); background-color: var(--input-background-color); border-width: var(--input-border-width); border-style: var(--input-border-style); border-color: var(--input-border-color); border-radius: var(--input-border-radius); color: var(--input-text-color); } .qtm-text-input input:focus { outline: none; } .qtm-text-input input:placeholder { color: var(--input-placeholder-color); } .qtm-text-input .qtm-icon { color: var(--input-icon-color); flex-shrink: 0; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); display: flex; } .qtm-text-input .qtm-icon:first-child:not(:last-child) { color: var(--input-default-icon-left-color); } .qtm-text-input.qtm-small input { height: var(--input-small-height); font-size: var(--input-small-font-size); line-height: var(--input-small-line-height); padding-right: var(--input-small-padding-right); padding-top: var(--input-small-padding-top); padding-bottom: var(--input-small-padding-bottom); padding-left: var(--input-small-padding-left); } .qtm-text-input.qtm-small .qtm-icon { font-size: var(--input-small-icon-size); width: var(--input-small-icon-size); height: var(--input-small-icon-size); left: var(--input-small-padding-left); } .qtm-text-input.qtm-small .qtm-icon + input { padding-left: calc(var(--input-small-padding-left) + var(--input-small-icon-size) + var(--input-small-icon-left-margin-right)); } .qtm-text-input.qtm-small input + .qtm-icon { left: calc(100% - var(--input-small-icon-size) - var(--input-small-padding-right)); } .qtm-text-input.qtm-small input:not(:last-child) { padding-right: calc(var(--input-small-icon-size) + var(--input-small-padding-right) + var(--input-small-icon-right-margin-left)); } .qtm-text-input.qtm-medium input, .qtm-text-input input { height: var(--input-medium-height); font-size: var(--input-medium-font-size); line-height: var(--input-medium-line-height); padding-right: var(--input-medium-padding-right); padding-top: var(--input-medium-padding-top); padding-bottom: var(--input-medium-padding-bottom); padding-left: var(--input-medium-padding-left); } .qtm-text-input.qtm-medium .qtm-icon, .qtm-text-input .qtm-icon { font-size: var(--input-medium-icon-size); width: var(--input-medium-icon-size); height: var(--input-medium-icon-size); left: var(--input-medium-padding-left); } .qtm-text-input.qtm-medium .qtm-icon + input, .qtm-text-input .qtm-icon + input { padding-left: calc(var(--input-medium-padding-left) + var(--input-medium-icon-size) + var(--input-medium-icon-left-margin-right)); } .qtm-text-input.qtm-medium input + .qtm-icon, .qtm-text-input input + .qtm-icon { left: calc(100% - var(--input-medium-icon-size) - var(--input-medium-padding-right)); } .qtm-text-input.qtm-medium input:not(:last-child), .qtm-text-input input:not(:last-child) { padding-right: calc(var(--input-medium-icon-size) + var(--input-medium-padding-right) + var(--input-medium-icon-right-margin-left)); } .qtm-text-input.qtm-large input { height: var(--input-large-height); font-size: var(--input-large-font-size); line-height: var(--input-large-line-height); padding-right: var(--input-large-padding-right); padding-top: var(--input-large-padding-top); padding-bottom: var(--input-large-padding-bottom); padding-left: var(--input-large-padding-left); } .qtm-text-input.qtm-large .qtm-icon { font-size: var(--input-large-icon-size); width: var(--input-large-icon-size); height: var(--input-large-icon-size); left: var(--input-large-padding-left); } .qtm-text-input.qtm-large .qtm-icon + input { padding-left: calc(var(--input-large-padding-left) + var(--input-large-icon-size) + var(--input-large-icon-left-margin-right)); } .qtm-text-input.qtm-large input + .qtm-icon { left: calc(100% - var(--input-large-icon-size) - var(--input-large-padding-right)); } .qtm-text-input.qtm-large input:not(:last-child) { padding-right: calc(var(--input-large-icon-size) + var(--input-large-padding-right) + var(--input-large-icon-right-margin-left)); } .qtm-text-input input:hover:not(.qtm-disabled) { background: var(--input-hover-background-color); } .qtm-text-input input:focus:not(.qtm-disabled) { border-color: var(--input-focus-border-color); } .qtm-text-input:focus-within .qtm-icon:first-child:not(:last-child) { color: var(--input-icon-color); } .qtm-text-input.qtm-disabled, .qtm-text-input.qtm-disabled input, .qtm-text-input.qtm-disabled .qtm-icon { cursor: not-allowed; color: var(--input-disabled-text-color); } .qtm-text-input.qtm-disabled input { border-color: var(--input-disabled-border-color); background-color: var(--input-disabled-background-color); } .qtm-text-input.qtm-warning input, .qtm-text-input.qtm-warning input:focus:not(.qtm-disabled) { border-color: var(--input-warning-border-color); } .qtm-text-input.qtm-warning input + .qtm-icon { color: var(--input-icon-warning-color); } .qtm-text-input.qtm-error input, .qtm-text-input.qtm-error input:focus:not(.qtm-disabled) { border-color: var(--input-error-border-color); } .qtm-text-input.qtm-error input + .qtm-icon { color: var(--input-icon-error-color); } .qtm-text-input.qtm-success input + .qtm-icon { color: var(--input-icon-success-color); } .qtm-textarea { display: inline-flex; position: relative; width: 100%; } .qtm-textarea textarea + .qtm-icon { position: absolute; } .qtm-textarea.qtm-drag-icon textarea { resize: vertical; } .qtm-textarea textarea { flex: 1; width: 100%; resize: none; background-color: var(--textarea-background-color); border-color: var(--textarea-border-color); border-style: var(--textarea-border-style); border-width: var(--textarea-border-width); border-radius: var(--textarea-border-radius); font-family: var(--textarea-font-family); font-weight: var(--textarea-font-weight); color: var(--textarea-text-color); } .qtm-textarea textarea::-moz-placeholder { color: var(--textarea-placeholder-color); } .qtm-textarea textarea::placeholder { color: var(--textarea-placeholder-color); } .qtm-textarea textarea:focus { outline: none; } .qtm-textarea.qtm-small textarea { min-height: var(--textarea-small-min-height); font-size: var(--textarea-small-font-size); line-height: var(--textarea-small-line-height); padding-left: var(--textarea-small-padding-left); padding-right: var(--textarea-small-padding-right); padding-top: var(--textarea-small-padding-top); padding-bottom: var(--textarea-small-padding-bottom); } .qtm-textarea.qtm-small textarea:not(:only-child) { padding-right: calc(var(--textarea-small-padding-right) + var(--textarea-small-icon-size) + var(--textarea-small-icon-right-margin-left)); } .qtm-textarea.qtm-small textarea + .qtm-icon { font-size: var(--textarea-small-icon-size); width: var(--textarea-small-icon-size); height: var(--textarea-small-icon-size); right: var(--textarea-small-padding-right); top: var(--textarea-small-padding-top); } .qtm-textarea.qtm-medium textarea, .qtm-textarea textarea { min-height: var(--textarea-medium-min-height); font-size: var(--textarea-medium-font-size); line-height: var(--textarea-medium-line-height); padding-left: var(--textarea-medium-padding-left); padding-right: var(--textarea-medium-padding-right); padding-top: var(--textarea-medium-padding-top); padding-bottom: var(--textarea-medium-padding-bottom); } .qtm-textarea.qtm-medium textarea:not(:only-child), .qtm-textarea textarea:not(:only-child) { padding-right: calc(var(--textarea-medium-padding-right) + var(--textarea-medium-icon-size) + var(--textarea-medium-icon-right-margin-left)); } .qtm-textarea.qtm-medium textarea + .qtm-icon, .qtm-textarea textarea + .qtm-icon { font-size: var(--textarea-medium-icon-size); width: var(--textarea-medium-icon-size); height: var(--textarea-medium-icon-size); right: var(--textarea-medium-padding-right); top: var(--textarea-medium-padding-top); } .qtm-textarea.qtm-large textarea { min-height: var(--textarea-large-min-height); font-size: var(--textarea-large-font-size); line-height: var(--textarea-large-line-height); padding-left: var(--textarea-large-padding-left); padding-right: var(--textarea-large-padding-right); padding-top: var(--textarea-large-padding-top); padding-bottom: var(--textarea-large-padding-bottom); } .qtm-textarea.qtm-large textarea:not(:only-child) { padding-right: calc(var(--textarea-large-padding-right) + var(--textarea-large-icon-size) + var(--textarea-large-icon-right-margin-left)); } .qtm-textarea.qtm-large textarea + .qtm-icon { font-size: var(--textarea-large-icon-size); width: var(--textarea-large-icon-size); height: var(--textarea-large-icon-size); right: var(--textarea-large-padding-right); top: var(--textarea-large-padding-top); } .qtm-textarea textarea:hover { background: var(--textarea-hover-background-color); } .qtm-textarea textarea:focus { border-color: var(--textarea-focus-border-color); } .qtm-textarea.qtm-disabled textarea { border-color: var(--textarea-disabled-border-color); background-color: var(--textarea-disabled-background-color); color: var(--textarea-disabled-text-color); cursor: not-allowed; } .qtm-textarea.qtm-warning textarea { border-color: var(--textarea-warning-border-color); } .qtm-textarea.qtm-warning textarea + .qtm-icon { color: var(--textarea-icon-warning-color); } .qtm-textarea.qtm-error textarea { border-color: var(--textarea-error-border-color); } .qtm-textarea.qtm-error textarea + .qtm-icon { color: var(--textarea-icon-error-color); } .qtm-textarea.qtm-success textarea + .qtm-icon { color: var(--textarea-icon-success-color); } .qtm-toggle-switch { display: flex; align-items: center; justify-content: flex-start; } .qtm-toggle-switch.qtm-label-right { flex-direction: row-reverse; justify-content: flex-end; } .qtm-toggle-switch { font-weight: var(--switch-label-font-weight); font-family: var(--switch-label-font-family); color: var(--switch-label-color); } .qtm-toggle-switch.qtm-icon-displayed input:checked + .qtm-toggle-slider:before { content: "done"; } .qtm-toggle-switch.qtm-icon-displayed input:checked + .qtm-toggle-slider[data-icon-on]:before { content: attr(data-icon-on)""; } .qtm-toggle-switch.qtm-icon-displayed input + .qtm-toggle-slider[data-icon-off]:before { content: attr(data-icon-off)""; } .qtm-toggle-switch.qtm-icon-displayed input + .qtm-toggle-slider:before { font-family: Material Icons; content: "close"; color: var(--switch-input-button-icon-color); display: flex; justify-content: center; align-items: center; } .qtm-toggle-switch .qtm-switch { position: relative; display: inline-block; margin: 0 var(--switch-input-margin-horizontal); } .qtm-toggle-switch .qtm-switch input { opacity: 0; width: 0; height: 0; } .qtm-toggle-switch .qtm-switch .qtm-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; transition: var(--switch-input-transition-duration); background-color: var(--switch-input-off-background-color); } .qtm-toggle-switch .qtm-switch .qtm-toggle-slider:before { border-radius: 50%; position: absolute; content: ""; left: var(--switch-input-button-padding-vertical); bottom: var(--switch-input-button-padding-vertical); background-color: var(--switch-input-button-background-color); box-shadow: var(--switch-input-button-shadow); transition: var(--switch-input-transition-duration); } .qtm-toggle-switch .qtm-switch input:focus-visible + .qtm-toggle-slider { outline: solid; outline-width: var(--switch-input-focus-ring-width); outline-offset: var(--switch-input-focus-ring-offset-width); outline-color: var(--switch-input-focus-ring-border-color); } .qtm-toggle-switch .qtm-switch:active .qtm-toggle-slider:before { box-shadow: var(--switch-input-pressed-button-shadow); } .qtm-toggle-switch .qtm-switch input:checked + .qtm-toggle-slider { background-color: var(--switch-input-on-background-color); } .qtm-toggle-switch .qtm-switch input:checked + .qtm-toggle-slider:before { transform: translateX(calc(100% - 2 * var(--switch-input-button-padding-vertical))); background-color: var(--switch-input-button-background-color); } .qtm-toggle-switch .qtm-switch input + .qtm-toggle-slider { background-color: var(--switch-input-off-background-color); } .qtm-toggle-switch.qtm-small { font-size: var(--switch-label-small-font-size); line-height: var(--switch-label-small-line-height); } .qtm-toggle-switch.qtm-small .qtm-switch { height: var(--switch-input-small-height); width: var(--switch-input-small-width); } .qtm-toggle-switch.qtm-small .qtm-switch .qtm-toggle-slider { border-radius: var(--switch-input-small-border-radius); } .qtm-toggle-switch.qtm-small .qtm-switch .qtm-toggle-slider:before { height: calc(var(--switch-input-small-height) - 2 * var(--switch-input-button-padding-vertical)); width: calc(var(--switch-input-small-height) - 2 * var(--switch-input-button-padding-vertical)); } .qtm-toggle-switch.qtm-small.qtm-icon-displayed input + .qtm-toggle-slider:before { font-size: var(--switch-input-small-icon-size); } .qtm-toggle-switch.qtm-medium, .qtm-toggle-switch { font-size: var(--switch-label-medium-font-size); line-height: var(--switch-label-medium-line-height); } .qtm-toggle-switch.qtm-medium .qtm-switch, .qtm-toggle-switch .qtm-switch { height: var(--switch-input-medium-height); width: var(--switch-input-medium-width); } .qtm-toggle-switch.qtm-medium .qtm-switch .qtm-toggle-slider, .qtm-toggle-switch .qtm-switch .qtm-toggle-slider { border-radius: var(--switch-input-medium-border-radius); } .qtm-toggle-switch.qtm-medium .qtm-switch .qtm-toggle-slider:before, .qtm-toggle-switch .qtm-switch .qtm-toggle-slider:before { height: calc(var(--switch-input-medium-height) - 2 * var(--switch-input-button-padding-vertical)); width: calc(var(--switch-input-medium-height) - 2 * var(--switch-input-button-padding-vertical)); } .qtm-toggle-switch.qtm-medium.qtm-icon-displayed input + .qtm-toggle-slider:before, .qtm-toggle-switch.qtm-icon-displayed input + .qtm-toggle-slider:before { font-size: var(--switch-input-medium-icon-size); } .qtm-toggle-switch.qtm-large { font-size: var(--switch-label-large-font-size); line-height: var(--switch-label-large-line-height); } .qtm-toggle-switch.qtm-large .qtm-switch { height: var(--switch-input-large-height); width: var(--switch-input-large-width); } .qtm-toggle-switch.qtm-large .qtm-switch .qtm-toggle-slider { border-radius: var(--switch-input-large-border-radius); } .qtm-toggle-switch.qtm-large .qtm-switch .qtm-toggle-slider:before { height: calc(var(--switch-input-large-height) - 2 * var(--switch-input-button-padding-vertical)); width: calc(var(--switch-input-large-height) - 2 * var(--switch-input-button-padding-vertical)); } .qtm-toggle-switch.qtm-large.qtm-icon-displayed input + .qtm-toggle-slider:before { font-size: var(--switch-input-large-icon-size); } .qtm-toggle-switch.qtm-neutral .qtm-switch input:checked + .qtm-toggle-slider { background-color: var(--switch-input-neutral-on-background-color); } .qtm-toggle-switch.qtm-neutral.qtm-icon-displayed input + .qtm-toggle-slider:before { color: var(--switch-input-neutral-button-icon-color); } .qtm-toggle-switch.qtm-disabled { color: var(--switch-label-disabled-color); } .qtm-toggle-switch.qtm-disabled input[disabled] + .qtm-toggle-slider, .qtm-toggle-switch.qtm-disabled.qtm-neutral input[disabled] + .qtm-toggle-slider { cursor: not-allowed; box-shadow: var(--switch-input-disabled-button-shadow); background-color: var(--switch-input-disabled-off-background-color); } .qtm-toggle-switch.qtm-disabled input[disabled]:checked + .qtm-toggle-slider, .qtm-toggle-switch.qtm-disabled.qtm-neutral input[disabled]:checked + .qtm-toggle-slider { background-color: var(--switch-input-disabled-on-background-color); } .qtm-toggle-switch.qtm-disabled input[disabled] + .qtm-toggle-slider:before, .qtm-toggle-switch.qtm-disabled.qtm-neutral input[disabled] + .qtm-toggle-slider:before { cursor: not-allowed; background-color: var(--switch-input-disabled-off-button-background-color); } .qtm-toggle-switch.qtm-disabled input[disabled]:checked + .qtm-toggle-slider:before, .qtm-toggle-switch.qtm-disabled.qtm-neutral input[disabled]:checked + .qtm-toggle-slider:before { background-color: var(--switch-input-disabled-on-button-background-color); } .qtm-toggle-switch.qtm-disabled.qtm-icon-displayed input[disabled] + .qtm-toggle-slider:before { color: var(--switch-input-disabled-off-button-icon-color); } .qtm-toggle-switch.qtm-disabled.qtm-icon-displayed input[disabled]:checked + .qtm-toggle-slider:before { color: var(--switch-input-disabled-on-button-icon-color); } .qtm-tooltip { display: inline-block; position: relative; } .qtm-tooltip .qtm-tooltip-container { --tooltip-container-padding: var(--tooltip-medium-padding); z-index: 999; width: -moz-max-content; width: max-content; visibility: hidden; background-color: var(--tooltip-highcontrast-background-color); color: var(--tooltip-font-color); padding: var(--tooltip-container-padding); box-shadow: var(--tooltip-shadow); border-radius: var(--tooltip-border-radius); font-family: var(--tooltip-font-family); font-size: var(--tooltip-medium-content-font-size); line-height: var(--tooltip-medium-content-line-height); font-weight: var(--tooltip-medium-content-font-weight); position: absolute; bottom: calc(100% + var(--tooltip-arrow-border) + var(--tooltip-arrow-offset)); left: 50%; transform: translateX(-50%); } .qtm-tooltip .qtm-tooltip-container .qtm-tooltip-title { font-size: var(--tooltip-medium-title-font-size); line-height: var(--tooltip-medium-title-line-height); font-weight: var(--tooltip-medium-title-font-weight); margin-bottom: var(--tooltip-title-margin-bottom); } .qtm-tooltip.qtm-small .qtm-tooltip-container { --tooltip-container-padding: var(--tooltip-small-padding); font-size: var(--tooltip-small-content-font-size); line-height: var(--tooltip-small-content-line-height); font-weight: var(--tooltip-small-content-font-weight); } .qtm-tooltip.qtm-small .qtm-tooltip-container .qtm-tooltip-title { font-size: var(--tooltip-small-title-font-size); line-height: var(--tooltip-small-title-line-height); font-weight: var(--tooltip-small-title-font-weight); } .qtm-tooltip.qtm-medium .qtm-tooltip-container { --tooltip-container-padding: var(--tooltip-medium-padding); font-size: var(--tooltip-medium-content-font-size); line-height: var(--tooltip-medium-content-line-height); font-weight: var(--tooltip-medium-content-font-weight); } .qtm-tooltip.qtm-medium .qtm-tooltip-container .qtm-tooltip-title { font-size: var(--tooltip-medium-title-font-size); line-height: var(--tooltip-medium-title-line-height); font-weight: var(--tooltip-medium-title-font-weight); } .qtm-tooltip.qtm-large .qtm-tooltip-container { --tooltip-container-padding: var(--tooltip-large-padding); font-size: var(--tooltip-large-content-font-size); line-height: var(--tooltip-large-content-line-height); font-weight: var(--tooltip-large-content-font-weight); } .qtm-tooltip.qtm-large .qtm-tooltip-container .qtm-tooltip-title { font-size: var(--tooltip-large-title-font-size); line-height: var(--tooltip-large-title-line-height); font-weight: var(--tooltip-large-title-font-weight); } .qtm-tooltip.qtm-low-contrast .qtm-tooltip-container { background-color: var(--tooltip-lowcontrast-background-color); } .qtm-tooltip.qtm-visible .qtm-tooltip-container { visibility: visible; } .qtm-tooltip.qtm-bottom .qtm-tooltip-container { bottom: auto; top: calc(100% + var(--tooltip-arrow-border) + var(--tooltip-arrow-offset)); } .qtm-tooltip.qtm-left .qtm-tooltip-container { bottom: auto; top: 50%; right: calc(100% + var(--tooltip-arrow-border) + var(--tooltip-arrow-offset)); left: auto; transform: translateY(-50%); } .qtm-tooltip.qtm-right .qtm-tooltip-container { bottom: auto; top: 50%; left: calc(100% + var(--tooltip-arrow-border) + var(--tooltip-arrow-offset)); right: auto; transform: translateY(-50%); } .qtm-tooltip.qtm-start .qtm-tooltip-container { transform: translateX(calc(-1 * (var(--tooltip-container-padding) + var(--tooltip-arrow-border)))); } .qtm-tooltip.qtm-end .qtm-tooltip-container { transform: translateX(calc(-100% + var(--tooltip-container-padding) + var(--tooltip-arrow-border))); } .qtm-tooltip.qtm-start.qtm-left .qtm-tooltip-container, .qtm-tooltip.qtm-start.qtm-right .qtm-tooltip-container { transform: translateY(calc(-1 * (var(--tooltip-arrow-border) + var(--tooltip-container-padding)))); } .qtm-tooltip.qtm-end.qtm-left .qtm-tooltip-container, .qtm-tooltip.qtm-end.qtm-right .qtm-tooltip-container { transform: translateY(calc(-100% + var(--tooltip-arrow-border) + var(--tooltip-container-padding))); } .qtm-tooltip:focus-within .qtm-tooltip-container, .qtm-tooltip:hover .qtm-tooltip-container { visibility: visible; } .qtm-tooltip::before { --tooltip-arrow-color: var(--tooltip-highcontrast-background-color); content: ''; opacity: 0; position: absolute; border-left: var(--tooltip-arrow-border) solid transparent; border-right: var(--tooltip-arrow-border) solid transparent; border-top: var(--tooltip-arrow-border) solid var(--tooltip-arrow-color); border-bottom: 0 solid var(--tooltip-arrow-color); top: calc(0px - var(--tooltip-arrow-border) - var(--tooltip-arrow-offset)); left: 50%; transform: translateX(-50%); } .qtm-tooltip.qtm-bottom::before { border-bottom: var(--tooltip-arrow-border) solid var(--tooltip-arrow-color); border-top: 0 solid var(--tooltip-arrow-color); bottom: calc(0px - var(--tooltip-arrow-border) - var(--tooltip-arrow-offset)); top: auto; } .qtm-tooltip.qtm-left::before { border-bottom: var(--tooltip-arrow-border) solid transparent; border-top: var(--tooltip-arrow-border) solid transparent; border-left: var(--tooltip-arrow-border) solid var(--tooltip-arrow-color); border-right: 0 solid transparent; top: 50%; bottom: auto; transform: translateY(-50%); left: calc(0px - var(--tooltip-arrow-border) - var(--tooltip-arrow-offset)); } .qtm-tooltip.qtm-right::before { border-bottom: var(--tooltip-arrow-border) solid transparent; border-top: var(--tooltip-arrow-border) solid transparent; border-left: 0 solid transparent ; border-right: var(--tooltip-arrow-border) solid var(--tooltip-arrow-color); top: 50%; bottom: auto; transform: translateY(-50%); left: calc(100% + var(--tooltip-arrow-offset)); } .qtm-tooltip.qtm-visible::before { opacity: 1; } .qtm-tooltip.qtm-low-contrast::before { --tooltip-arrow-color: var(--tooltip-lowcontrast-background-color); } .qtm-tooltip:focus-within::before, .qtm-tooltip:hover:before { opacity: 1; } .qtm-tooltip:focus-within, .qtm-tooltip:focus-within > * { outline: none; } h1,h2,h3,p { margin: 0 } .qtm-title-1 { font-size: var(--typography-title-1-size); line-height: var(--typography-title-1-line-height); font-family: var(--typography-title-1-font-family); font-weight: var(--typography-title-1-font-weight) } .qtm-title-2 { font-size: var(--typography-title-2-size); line-height: var(--typography-title-2-line-height); font-family: var(--typography-title-2-font-family); font-weight: var(--typography-title-2-font-weight) } .qtm-title-3 { font-size: var(--typography-title-3-size); line-height: var(--typography-title-3-line-height); font-family: var(--typography-title-3-font-family); font-weight: var(--typography-title-3-font-weight) } .qtm-subtitle-1 { font-size: var(--typography-subtitle-1-size); line-height: var(--typography-subtitle-1-line-height); font-family: var(--typography-subtitle-1-font-family); font-weight: var(--typography-subtitle-1-font-weight) } .qtm-subtitle-2 { font-size: var(--typography-subtitle-2-size); line-height: var(--typography-subtitle-2-line-height); font-family: var(--typography-subtitle-2-font-family); font-weight: var(--typography-subtitle-2-font-weight) } .qtm-body-1 { font-size: var(--typography-body-1-size); line-height: var(--typography-body-1-line-height); font-family: var(--typography-body-1-font-family); font-weight: var(--typography-body-1-font-weight) } .qtm-body-2 { font-size: var(--typography-body-2-size); line-height: var(--typography-body-2-line-height); font-family: var(--typography-body-2-font-family); font-weight: var(--typography-body-2-font-weight) } .qtm-caption-1 { font-size: var(--typography-caption-1-size); line-height: var(--typography-caption-1-line-height); font-family: var(--typography-caption-1-font-family); font-weight: var(--typography-caption-1-font-weight) } .qtm-caption-2 { font-size: var(--typography-caption-2-size); line-height: var(--typography-caption-2-line-height); font-family: var(--typography-caption-2-font-family); font-weight: var(--typography-caption-2-font-weight) } .qtm-code-1 { font-size: var(--typography-code-1-size); line-height: var(--typography-code-1-line-height); font-family: var(--typography-code-1-font-family); font-weight: var(--typography-code-1-font-weight) } .qtm-code-2 { font-size: var(--typography-code-2-size); line-height: var(--typography-code-2-line-height); font-family: var(--typography-code-2-font-family); font-weight: var(--typography-code-2-font-weight) } .qtm-overline { font-size: var(--typography-overline-size); line-height: var(--typography-overline-line-height); font-family: var(--typography-overline-font-family); font-weight: var(--typography-overline-font-weight); text-transform: var(--typography-overline-text-case) }